@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Serif+JP:wght@200..900&display=swap');
* { box-sizing: border-box; }
:root {
    --white: #FFFFFF;
    --cream: #fdf6e8;
    --text: #202020;
    --textli: #74777d;
    --link: #1D4ED8;
    --lavender-bg: #f0eafe;
    --dandilion-bg: #FDF3D0;
    --ocean-bg: #D3E2F1;
    --sea-bg: #e7f7df;
    --lavender-md: #b69eed;
    --dandilion-md: #f3d678;
    --ocean-md: #99c3ed;
    --lavender-dk: #5e4b89;
    --dandilion-dk: #7e6c2f;
    --ocean-dk: #45688b;
    --sea-md: #a6d78d;
    --border: #BBBBBB;
}
body {
    margin: 0;
    text-align: left;
    font-family: "Inter", sans-serif;
    color: var(--text);
}
.badge {
    text-transform: uppercase;
    padding: 10px 15px;
    background-color: var(--lavender-bg);
    color: var(--lavender-dk);
    width: fit-content;
    border-radius: 1000px;
    font-size: 13px;
    font-weight: 500;
}
.badge.ocean {
    background-color: var(--ocean-bg);
    color: var(--ocean-dk); 
}
.innerwrap, article { 
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
}
article p, .article-max {
    max-width: 980px;
}
article#casestudy {
    margin-top: 120px;
}
.mid {
    max-width: 780px;
}
.sm {
    max-width: 640px;
}
.flex {
    display: flex;
    align-items: flex-start;
}
.flex.wrap {
    flex-wrap: wrap;
}
.flex.wrap-reverse {
    flex-wrap: wrap-reverse;
}
.solutions {
    counter-reset: solution-counter;
}
.solution {
    border-top: 1px solid var(--border);
    padding: 50px 0;
    counter-increment: solution-counter;
}

.solution .unit::before {
    content: counter(solution-counter, decimal-leading-zero);
}
.mg-50 { margin-top: 50px; }
ol {
    padding: 0;
    margin: 0;
    counter-reset: list-counter;
    list-style-type: none;
}
ol li {
    margin: 0;
    padding: 25px 0;
    border-bottom: 1px solid var(--border);
    counter-increment: list-counter;
    display: flex;
    gap: 20px;
}
ol li:first-child {
    border-top: 1px solid var(--border);
}
ol li.counter::before {
    content: counter(list-counter, decimal-leading-zero);
    margin-left: 15px;
    font-family: monospace;
    color: var(--textli);
}
.flex.ac { align-items: center; }
.flex.sb { justify-content: space-between; }
.flex.sa { justify-content: space-around; }
.flex.gap-25 { gap: 25px;}
.flex.gap-50 { gap: 50px; row-gap: 25px; }
.flex.gap-100 { gap: 100px; row-gap: 40px; }
.flex.gap-150 { gap: 150px; row-gap: 40px; }

.col {
    flex: 1 1 280px;
}
.col.col-60 { min-width: 60%; }

a, a:visited, a:active {
    color: #202020;
    text-decoration: none;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--link);
    transition: margin-right .2s ease, color .2s ease, border-bottom .2s ease;
}
a:hover {
    color: var(--link);
    border-bottom: 2px solid var(--link);
}
a.larger {
    font-size: 1.125rem;
}
a.button {
    background-color: var(--text);
    display: block;
    width: fit-content;
    text-wrap: nowrap;
    color: var(--white);
    padding: 15px 25px;
    border-radius: 100px;
    font-size: 1.2rem;
    border-bottom: none;
    transition: background-color .2s ease;
}
a.button:hover { background-color: var(--link); }
.nav-items a {
    text-transform: uppercase;
    text-wrap: nowrap;
    font-size: .8rem;
    font-weight: 500;
    border-bottom: none;
    padding-bottom: 0px;
    border-bottom: 0px solid var(--link);
    transition: padding-bottom .2s ease;
}
.nav-items a:hover {
    padding-bottom: 5px;
    border-bottom: 2px solid var(--link);
}
.nav-items a:not(:last-child) {
    margin-right: 15px;
}
.herocta {
    padding-left: 40px;
    border-left: 1px solid #bbb;
    flex: 1 1 280px;

}
a.arrowlink  { margin-right: 5px; }
a.arrowlink:hover { margin-right: 15px; }
h1 {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(2rem, 5vw, 4.2rem);
    margin-top: 0;
    text-wrap: balance;
    font-weight: 500;
}
h2 { 
    font-family: "Noto Serif JP", serif; 
    font-size: 1.8rem;
}
.overline + h2 {
    margin-top: 10px;
}
.review {
    max-width: 100vw;
    padding: 50px;
    margin-top: 10%;
    position: relative;
}
.profile {
    width: 100%;
    max-width: 420px;
    border-radius: 20px;
}
.review::before {
    content: '';
    position: absolute;
    width: 120%;
    max-width: 100vw;
    height: 120%;
    left: -10%;
    top: -10%;
    z-index: -1;
    background-image: url('/images/watercolor.jpg');
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center;
}
.review blockquote {
    font-size: 1.6rem;
}
blockquote {
    font-family: "Noto Serif JP", serif;
    margin: 0;
    padding: 30px;
    background-color: var(--sea-bg);
    font-size: 2rem;
    border-radius: 20px;
}
blockquote::before {
    content: '“';
    display: block;
    font-size: 80px;
    line-height: 40px;
    margin-top: 30px;
}
blockquote.insight {
    background-color: var(--lavender-bg);
}
blockquote.insight::before {
    content: 'insight';
    text-transform: uppercase;
    display: block;
    font-size: 12px;
    line-height: 20px;
    font-family: monospace;
}
.author {
    margin-top: 15px;
    font-size: 1.2rem;
}
.author::before {
    content: '—';
}
p { line-height: 1.5rem; }
p:first-child { margin-top: 0; }
.article-section {
    margin-top: 120px;
}
section {
    padding: 40px 80px;
}
.cream {
    margin-top: 50px;
    background-color: var(--cream);
    padding: 25px;
}
section.alt {
    margin-top: 50px; 
    background-color: #f6f3ff;
}
@media screen and (max-width: 680px) {
    section {
        padding: 40px 20px;
    }
    .review {
        padding: 20px;
    }
    blockquote {
        font-size: 1.5rem;
    }
}
.logo {
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 8px;
    font-size: 20px;
    border: none;
}
.logo:hover { border-bottom: none; }
hr {
    border: none;
    border-bottom: 1px solid #bbb;
}
hr.short {
    width: 50px;
    margin: 10px 0 30px;
    border-bottom: 2px solid var(--text);
}

h2.whr, .overline { 
    font-family: 'Inter', sans-serif;
    background-color: var(--white);
    color: #634FA2;
    padding-right: 20px;
    text-transform: uppercase;
    line-height: 25px;
    font-size: 15px;
    width: fit-content;
    text-wrap: nowrap;
    font-weight: 600;
}
h2.whr {
    margin-top:-22px;
}
h3 {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(1.6rem, 5vw, 2rem);
    margin-top: 0;
    text-wrap: balance;
    font-weight: 500;
}
article h3 {
    font-family: "Inter", sans-serif;
    font-size: 20px;
    margin: 15px 0;
    font-weight: 700;
}
h4 {
    margin: 10px 0 15px 0;
    text-transform: uppercase;
}
p.catch {
    font-size: clamp(1.2rem, 4vw, 1.8rem);
    line-height: 1.4em;
}
p.descriptor {
    font-size: clamp(1rem, 4vw, 1.4rem);
    line-height: 1.4em;
}
.benefits, .phase {
    margin-top: 50px;
}
.step {
    flex: 1 1 280px; /* grow | shrink | basis */
    min-width: 280px;
}
.icon-bg {
    background-color: var(--lavender-bg);
    padding: 12px;
    height: 56px;
    border-radius: 100px;
    margin-bottom: 25px;
}
.icon-bg.dandy { background-color: var(--dandilion-bg); }
.icon-bg.sea { background-color: var(--sea-bg); }
.icon-bg.ocean { 
    background-color: var(--ocean-bg);
    fill: blue;
}
.benefit-list, .contact {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.benefit-list li, .contact li {
    padding: 15px 0;
    gap: 15px;
    margin: 5px 0;
    border-bottom: 1px solid var(--border);
    line-height: 30px;
}
.benefit-list li::before {
    content: '';
    background-image: url('/images/checkmark.svg');
    background-size: 20px 20px;
    background-position: center;
    display: inline-block;
    min-width: 30px;
    min-height: 30px;
    background-color: var(--lavender-bg);
    border-radius: 100px;
}
.brand {
    flex: 1;
    min-width: 180px;
    max-height: 60px;
}
.case-study h2, .digit {
    font-family: "Noto Serif JP", serif;
}
.case-studies {
    border-top: 1px solid var(--border);
    padding: 50px 0;
    counter-reset: cs-counter;
}
.case-study {
    min-width: 340px;
    flex: 1 1 420px;
    margin-bottom: 40px;
    counter-increment: cs-counter;
}
.case-study .csn::before {
    content: counter(cs-counter, decimal-leading-zero);
}
.case-study h2 {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 5px;
    margin-top: 5px;
}
.case-study .csn { 
    font-size: 80px;
    position: relative;
    font-weight: 100;
    margin-bottom: 25px;
}

.case-study:nth-child(n+1) .csn {
    color: var(--lavender-md);
}

.case-study .csn::after {
    content: '';
    position: absolute;
    height: 120%;
    transform: rotate(30deg);
    border-left: 1px solid var(--border);
    width: 15px;
    background-color: var(--white);
}
.digit { font-size: 40px; }
.digit.lg { font-size: 80px; }
.kpis { 
    margin-top: 40px; 
    border-top: 1px solid var(--border);
    overflow: hidden;
}
.kpi {
    background-color: var(--white);
    text-align: left;
    flex: 1 1;
}
.unit {
    color: var(--textli);
}
.unit.mono { font-family: monospace; }

/* ============================================================

   CASE STUDY ADDITIONS — new, appended, safe to reuse anywhere

   Two small global elements used to keep case studies image-led

   and low on text density (see conference case study).

   ============================================================ */



/* Image placeholder frame — drop real photography in later.

   Swap the inner <span> for an <img> or <picture> when ready. */

.media {

    background-color: var(--lavender-bg);
    border-radius: 8px;
    aspect-ratio: 16 / 9;
    margin: 60px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--textli);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.media.tall { aspect-ratio: 4 / 5; }
.media.wide { aspect-ratio: 21 / 9; }



/* Large single-line pull statement — an oversized in-between

   moment instead of another paragraph. Use sparingly, 1 per section. */

.statement {
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
    font-size: clamp(1.5rem, 4vw, 2.4rem);
    line-height: 1.4;
    max-width: 780px;
    margin: 90px 0;
}
.meter {
    height: 10px;
    background-color: var(--lavender-bg);
    border-radius: 100px;
    overflow: hidden;
    max-width: 420px;
}

.meter-fill {
    height: 100%;
    border-radius: 100px;
    background-color: var(--ocean-md);
}

.meter-scale {
    display: flex;
    max-width: 420px;
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--textli);
}
.meter-scale span.active {
    color: var(--text);
    font-weight: 600;
}

form {
    padding: 30px;
    border-radius: 20px;
    border: 1px solid var(--border);
}
form label {
    display: block;
    margin: 20px 0 5px 0;
}
form input,
form textarea {
    width: 100%;
    padding: 10px 15px;
    font-size: 20px;
    border-radius: 5px;
    border: 1px solid var(--border);
}
input[type="submit"] {
    margin-top: 15px;
    background-color: var(--text);
    color: var(--white);
    transition: background-color .3s ease;
}
input[type="submit"]:hover {
    background-color: var(--link);
    cursor: pointer;
}