/* ==========================================================================
   OneTouchGrade: advisory design system
   Light editorial. The original hairline structure, inverted to paper, with
   the logo's spectrum carrying the colour. Type and space keep the hierarchy.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
    /* Surface */
    --paper:      #FFFFFF;
    --paper-2:    #F8F9FD;
    --surface:    #F2F4FA;
    --surface-2:  #E9ECF6;
    --hairline:   rgba(12, 16, 31, 0.12);
    --hairline-2: rgba(12, 16, 31, 0.22);

    /* Text */
    --ink:      #0C101F;
    --bone:     #0C101F;
    --bone-dim: #3D4356;
    --muted:    #5E6478;
    --faint:    #8B90A2;

    /* Brand spectrum, taken from the logo ring */
    --violet:      #6C50E9;
    --violet-lift: #8A74FF;
    --violet-deep: #4B2FC4;
    --cyan:        #0098AB;
    --gold:        #D8860B;
    --pink:        #DB3E96;
    --green:       #17A957;
    --wa:          #0F8A43;
    --wa-deep:     #0B6E35;

    --accent:      var(--violet);
    --accent-dim:  var(--violet-deep);
    --accent-wash: rgba(108, 80, 233, 0.10);

    /* Buttons */
    --btn:      #0C101F;
    --btn-hover:#1B2237;
    --on-btn:   #FFFFFF;

    /* Per-component accent. Grids override it to cycle the spectrum. */
    --c:      var(--violet);
    --c-wash: rgba(108, 80, 233, 0.10);

    /* Type */
    --display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --sans:    'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Space */
    --gutter:  clamp(1.25rem, 5vw, 5rem);
    --section: clamp(5rem, 11vh, 9rem);
    --maxw:    1280px;

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
    color-scheme: light;
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.6;
    font-feature-settings: 'ss01', 'cv05';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1200;
    padding: 0.75rem 1.25rem;
    background: var(--btn);
    color: var(--on-btn);
}
.skip-link:focus { left: 1rem; top: 1rem; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Layout ------------------------------------------------------------- */
.wrap {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(3rem, 7vh, 5rem); }
.section--flush-top { padding-top: 0; }
.section--line { border-top: 1px solid var(--hairline); }
.section--raised {
    background:
        radial-gradient(52rem 26rem at 6% 0%, rgba(108, 80, 233, 0.06), transparent 62%),
        radial-gradient(46rem 24rem at 100% 100%, rgba(0, 152, 171, 0.06), transparent 64%),
        var(--paper-2);
}

/* --- Typography --------------------------------------------------------- */
.display-1 {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(2.85rem, 7.4vw, 6.5rem);
    line-height: 0.98;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.display-2 {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(2.25rem, 4.6vw, 3.9rem);
    line-height: 1.04;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.display-3 {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(1.6rem, 2.6vw, 2.35rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/* The emphasised phrase carries the brand gradient.
   background-clip: text paints inside the inline box only, and an italic
   serif's last glyph overhangs its advance width, so the tail of the word
   was being sliced off. The padding widens the paint box; the matching
   negative margin keeps the layout and kerning exactly where they were. */
.display-1 em, .display-2 em, .display-3 em {
    font-style: italic;
    background: linear-gradient(100deg, var(--violet) 0%, var(--pink) 50%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-inline: 0.04em 0.16em;
    margin-inline: -0.04em -0.16em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--violet-deep);
}
/* .eyebrow::before {
    content: '';
    width: 1.75rem;
    height: 2px;
    background: linear-gradient(90deg, var(--violet), var(--pink));
} */
.eyebrow--plain::before { display: none; }

.lede {
    font-size: clamp(1.05rem, 1.35vw, 1.3rem);
    line-height: 1.62;
    color: var(--bone-dim);
    max-width: 58ch;
    text-wrap: pretty;
}

.body { color: var(--bone-dim); max-width: 66ch; text-wrap: pretty; }
.body-sm { font-size: 0.94rem; color: var(--muted); line-height: 1.65; }

.mono {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--faint);
}

.accent { color: var(--accent); }
.dim { color: var(--muted); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.95rem 1.6rem;
    border-radius: 999px;
    font-size: 0.925rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    white-space: nowrap;
    transition: background 0.35s var(--ease), color 0.35s var(--ease),
                border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
    background: var(--btn);
    color: var(--on-btn);
    font-weight: 600;
}
.btn--primary:hover { background: var(--btn-hover); }

.btn--ghost {
    border: 1px solid var(--hairline-2);
    color: var(--ink);
}
.btn--ghost:hover { border-color: var(--btn); background: rgba(12, 16, 31, 0.04); }

.btn--sm { padding: 0.62rem 1.15rem; font-size: 0.86rem; }
.btn--block { width: 100%; }

/* WhatsApp: brand-recognisable, darkened so white text clears AA */
.btn--wa {
    background: var(--wa);
    color: #fff;
    font-weight: 600;
}
.btn--wa:hover { background: var(--wa-deep); }
.btn--wa svg { width: 17px; height: 17px; fill: currentColor; }

.btn .arrow { transition: transform 0.35s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* Text link with a rule that wipes in */
.link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--ink);
    padding-bottom: 2px;
    background-image: linear-gradient(90deg, var(--violet), var(--pink));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 2px;
    transition: background-size 0.4s var(--ease), color 0.3s var(--ease);
}
.link:hover { background-size: 100% 2px; color: var(--violet-deep); }

/* --- Pills / tags ------------------------------------------------------- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid rgba(23, 169, 87, 0.28);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #0F7C40;
    background: rgba(23, 169, 87, 0.07);
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(23, 169, 87, 0.5);
    animation: pulse 2.6s infinite;
    flex: none;
}
@keyframes pulse {
    70%  { box-shadow: 0 0 0 7px rgba(23, 169, 87, 0); }
    100% { box-shadow: 0 0 0 0 rgba(23, 169, 87, 0); }
}

.tag {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--c-wash);
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c);
    background: var(--c-wash);
}

/* --- Header ------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.site-header.is-stuck {
    border-bottom-color: var(--hairline);
    background: rgba(255, 255, 255, 0.93);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    height: 4.75rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    flex: none;
}
.brand img { width: 34px; height: 34px; }
.brand__name {
    font-family: var(--display);
    font-size: 1.28rem;
    line-height: 1;
    letter-spacing: -0.01em;
}
.brand__role {
    display: block;
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--violet-deep);
    /* margin-top: 3px; */
}

.nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-left: auto;
}
.nav a {
    position: relative;
    font-size: 0.9rem;
    color: var(--muted);
    transition: color 0.3s var(--ease);
}
.nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--violet), var(--pink));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
.nav a.is-active { color: var(--ink); }

.header__cta { display: flex; align-items: center; gap: 0.75rem; flex: none; }

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    align-items: center;
    justify-content: center;
}
.nav-toggle span {
    display: block;
    position: relative;
    width: 20px;
    height: 1.5px;
    background: var(--ink);
    transition: background 0.2s var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 20px;
    height: 1.5px;
    background: var(--ink);
    transition: transform 0.35s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
    position: fixed;
    inset: 4.75rem 0 0 0;
    z-index: 890;
    background:
        radial-gradient(36rem 20rem at 100% 0%, rgba(219, 62, 150, 0.08), transparent 62%),
        radial-gradient(36rem 20rem at 0% 100%, rgba(108, 80, 233, 0.08), transparent 62%),
        var(--paper);
    padding: 2rem var(--gutter) 3rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
    overflow-y: auto;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.drawer a.drawer__link {
    font-family: var(--display);
    font-size: 2rem;
    line-height: 1.35;
    border-bottom: 1px solid var(--hairline);
    padding: 0.85rem 0;
}
.drawer a.drawer__link.is-active { color: var(--violet); }
.drawer .btn { margin-top: 2rem; }
.drawer__meta { margin-top: auto; padding-top: 2.5rem; }

body.is-locked { overflow: hidden; }

/* --- Hero --------------------------------------------------------------- */
.hero {
    position: relative;
    padding-block: clamp(4rem, 12vh, 8.5rem) var(--section);
    overflow: hidden;
}
/* Four soft colour fields, offset so they read as one wash */
.hero::before {
    content: '';
    position: absolute;
    top: -28%;
    left: 50%;
    width: min(1400px, 160vw);
    aspect-ratio: 1;
    transform: translateX(-50%);
    background:
        radial-gradient(32rem 24rem at 22% 26%, rgba(108, 80, 233, 0.17), transparent 62%),
        radial-gradient(30rem 22rem at 78% 20%, rgba(219, 62, 150, 0.14), transparent 62%),
        radial-gradient(32rem 22rem at 62% 68%, rgba(216, 134, 11, 0.12), transparent 64%),
        radial-gradient(28rem 20rem at 30% 74%, rgba(0, 152, 171, 0.12), transparent 62%);
    pointer-events: none;
    z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

.hero__title { margin-block: 1.75rem 1.9rem; max-width: 17ch; }
.hero__lede { margin-bottom: 2.75rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }

.hero__proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem 2.5rem;
    margin-top: 4.5rem;
    padding-top: 2.25rem;
    border-top: 1px solid var(--hairline);
}
.hero__proof > *:nth-child(1) { --c: var(--violet); }
.hero__proof > *:nth-child(2) { --c: var(--cyan); }
.hero__proof > *:nth-child(3) { --c: var(--gold); }
.hero__proof > *:nth-child(4) { --c: var(--pink); }
.hero__proof .stat__num { color: var(--c); }

/* Page hero for inner pages */
.page-hero {
    position: relative;
    padding-block: clamp(3.5rem, 9vh, 6rem) clamp(2.5rem, 6vh, 4rem);
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute;
    top: -70%;
    left: 50%;
    width: min(1200px, 150vw);
    aspect-ratio: 1;
    transform: translateX(-50%);
    background:
        radial-gradient(28rem 20rem at 26% 62%, rgba(108, 80, 233, 0.14), transparent 62%),
        radial-gradient(26rem 18rem at 74% 58%, rgba(0, 152, 171, 0.11), transparent 62%);
    pointer-events: none;
    z-index: 0;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero__title { margin-block: 1.5rem 1.5rem; max-width: 20ch; }

/* --- Stat / figure row -------------------------------------------------- */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    background: var(--hairline);
    border-block: 1px solid var(--hairline);
}
.stat { background: var(--paper); padding: 1.9rem 1.6rem; }
.stat__num {
    font-family: var(--display);
    font-size: clamp(2.1rem, 3.4vw, 2.9rem);
    line-height: 1;
    letter-spacing: -0.01em;
}
.stat__label {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 0.75rem;
}

/* --- Marquee ------------------------------------------------------------ */
.marquee {
    position: relative;
    overflow: hidden;
    padding-block: 1.6rem;
    border-block: 1px solid var(--hairline);
    background: linear-gradient(90deg,
        rgba(108, 80, 233, 0.045),
        rgba(219, 62, 150, 0.045),
        rgba(216, 134, 11, 0.045));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
    display: flex;
    width: max-content;
    gap: 2.25rem;
    animation: slide 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 2.25rem;
    font-family: var(--mono);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bone-dim);
    white-space: nowrap;
}
.marquee__item::after {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--violet);
}
.marquee__item:nth-child(6n+2)::after { background: var(--cyan); }
.marquee__item:nth-child(6n+3)::after { background: var(--gold); }
.marquee__item:nth-child(6n+4)::after { background: var(--pink); }
.marquee__item:nth-child(6n+5)::after { background: var(--green); }
.marquee__item:nth-child(6n)::after   { background: var(--violet-lift); }
@keyframes slide {
    to { transform: translateX(-50%); }
}

/* --- Section headers ---------------------------------------------------- */
.sec-head {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 2rem 4rem;
    align-items: end;
    margin-bottom: clamp(2.75rem, 5vw, 4.5rem);
}
.sec-head__title { margin-top: 1.25rem; }
.sec-head--center {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    max-width: 46rem;
    margin-inline: auto;
}
.sec-head--center .lede { margin-inline: auto; }
.sec-head--stack { grid-template-columns: 1fr; }

/* --- Model (four steps) ------------------------------------------------- */
.model { border-top: 1px solid var(--hairline); }

.model__row {
    --c: var(--violet);
    --c-wash: rgba(108, 80, 233, 0.10);
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem 3.5rem;
    padding-block: clamp(2.25rem, 4vw, 3.25rem);
    border-bottom: 1px solid var(--hairline);
    transition: background 0.5s var(--ease);
}
.model__row:nth-child(2) { --c: var(--cyan); --c-wash: rgba(0, 152, 171, 0.10); }
.model__row:nth-child(3) { --c: var(--gold); --c-wash: rgba(216, 134, 11, 0.12); }
.model__row:nth-child(4) { --c: var(--pink); --c-wash: rgba(219, 62, 150, 0.10); }
.model__row:hover { background: var(--c-wash); }

.model__step {
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--c);
    padding-top: 0.55rem;
}
.model__title { margin-bottom: 0.9rem; }
.model__lede { color: var(--bone-dim); font-size: 1.02rem; }
.model__body { color: var(--muted); font-size: 0.95rem; margin-bottom: 1.5rem; }

.ticks { display: grid; gap: 0.6rem; }
.ticks li {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    font-size: 0.9rem;
    color: var(--bone-dim);
}
.ticks li::before {
    content: '';
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--c, var(--violet));
}

/* --- Card grids ---------------------------------------------------------
   The hairlines come from a ring on each cell rather than a 1px gap over a
   container background. Fractional track widths were rounding the gaps away
   in places and doubling them in others, and any row that didn't fill left
   the container colour showing through as a grey block. Rings overlap on
   shared edges, so every line is one pixel whatever the grid does. */
.grid {
    display: grid;
    gap: 0;
    background: transparent;
    border: 0;
    /* Keeps the hovered cell's z-index local to its own grid. */
    isolation: isolate;
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cell {
    --c: var(--violet);
    --c-wash: rgba(108, 80, 233, 0.10);
    position: relative;
    z-index: 0;
    background: var(--paper);
    box-shadow: 0 0 0 1px var(--hairline);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    transition: background 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
/* A colour keyline that fills in on hover */
.cell::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--c);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease);
}
/* Lift the hovered cell so its own ring and keyline sit above its neighbours.
   The wash is translucent, so it is layered over paper rather than replacing
   it, otherwise a tinted section showed through the card on hover. */
.cell:hover {
    z-index: 1;
    background: linear-gradient(var(--c-wash), var(--c-wash)), var(--paper);
    box-shadow: 0 0 0 1px var(--hairline-2);
}
.cell:hover::before { transform: scaleX(1); }

/* Cycle the spectrum across every card grid */
.grid .cell:nth-child(5n+2) { --c: var(--cyan);        --c-wash: rgba(0, 152, 171, 0.10); }
.grid .cell:nth-child(5n+3) { --c: var(--gold);        --c-wash: rgba(216, 134, 11, 0.12); }
.grid .cell:nth-child(5n+4) { --c: var(--pink);        --c-wash: rgba(219, 62, 150, 0.10); }
.grid .cell:nth-child(5n+5) { --c: var(--green);       --c-wash: rgba(23, 169, 87, 0.10); }
.grid .cell:nth-child(5n+6) { --c: var(--violet-lift); --c-wash: rgba(138, 116, 255, 0.10); }

.cell__no {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--c);
}
.cell__title { font-family: var(--display); font-size: 1.5rem; line-height: 1.2; }
.cell__body { color: var(--muted); font-size: 0.94rem; }

/* Free-standing card (not in a hairline grid) */
.card {
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: clamp(1.6rem, 3vw, 2.25rem);
}

/* --- Engagements -------------------------------------------------------- */
.engagement {
    --c: var(--violet);
    --c-wash: rgba(108, 80, 233, 0.10);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 2rem 4rem;
    padding-block: clamp(2.5rem, 4.5vw, 3.75rem);
    border-bottom: 1px solid var(--hairline);
    scroll-margin-top: 7rem;
}
.engagement:first-of-type { border-top: 1px solid var(--hairline); }
.engagement:nth-of-type(2) { --c: var(--cyan); --c-wash: rgba(0, 152, 171, 0.10); }
.engagement:nth-of-type(3) { --c: var(--gold); --c-wash: rgba(216, 134, 11, 0.12); }
.engagement:nth-of-type(4) { --c: var(--pink); --c-wash: rgba(219, 62, 150, 0.10); }

.engagement__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem; }
.engagement__title { margin-block: 0.9rem 0.85rem; }
.engagement__lede { font-size: 1.05rem; color: var(--bone-dim); }

/* On the hub the title links to the engagement's own page. The reset strips
   link styling globally, so it needs its own affordance to read as clickable. */
.case__title a,
.engagement__title a {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.12em;
    text-decoration-thickness: 1px;
    transition: text-decoration-color 0.3s var(--ease), color 0.3s var(--ease);
}
.case__title a:hover,
.case__title a:focus-visible,
.engagement__title a:hover,
.engagement__title a:focus-visible { text-decoration-color: var(--accent); color: var(--accent); }

/* --- Case studies ------------------------------------------------------- */
.case {
    --c: var(--violet);
    --c-wash: rgba(108, 80, 233, 0.10);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 2.5rem 4rem;
    align-items: center;
    padding-block: clamp(2.75rem, 5vw, 4.5rem);
    border-bottom: 1px solid var(--hairline);
}
.case:nth-child(even) .case__media { order: 2; }
.case:first-child { border-top: 1px solid var(--hairline); }
.case:nth-of-type(2) { --c: var(--cyan); --c-wash: rgba(0, 152, 171, 0.10); }
.case:nth-of-type(3) { --c: var(--gold); --c-wash: rgba(216, 134, 11, 0.12); }
.case:nth-of-type(4) { --c: var(--pink); --c-wash: rgba(219, 62, 150, 0.10); }

.case__media {
    position: relative;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
}
.case__media img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    transition: transform 0.9s var(--ease);
}
.case:hover .case__media img { transform: scale(1.035); }

.case__logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--surface);
    padding: 5px;
    margin-bottom: 1.15rem;
}
.case__title { margin-block: 0.85rem 1rem; }
.case__results { display: grid; gap: 0.55rem; margin-block: 1.75rem; }

/* --- Product band (SquareMeter) ----------------------------------------- */
.product {
    --c: var(--violet);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
    padding: clamp(1.75rem, 3.5vw, 3rem);
    border: 1px solid var(--hairline);
    border-radius: 18px;
    background:
        radial-gradient(34rem 22rem at 100% 0%, rgba(0, 152, 171, 0.10), transparent 62%),
        radial-gradient(30rem 20rem at 0% 100%, rgba(108, 80, 233, 0.10), transparent 62%),
        var(--paper);
}

/* The product's own lockup, so it reads as its own brand inside the band. */
.product__logo { height: 34px; width: auto; }
.product__title { margin-block: 1.1rem 0.9rem; }
.product__features { margin-top: 1.75rem; }

.product__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: 1.75rem;
}
.product__stat {
    padding: 1.1rem 1rem;
    background: var(--paper);
    box-shadow: 0 0 0 1px var(--hairline);
}
.product__stat:nth-child(1) { --c: var(--violet); }
.product__stat:nth-child(2) { --c: var(--cyan); }
.product__stat:nth-child(3) { --c: var(--gold); }
.product__stat .stat__num { color: var(--c); font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.product__stat .stat__label { margin-top: 0.5rem; font-size: 0.64rem; letter-spacing: 0.09em; }

.product__aside { display: grid; gap: 1.25rem; }
.product__note {
    font-size: 0.9rem;
    color: var(--muted);
    padding-top: 1.25rem;
    border-top: 1px solid var(--hairline);
}

/* --- Testimonials ------------------------------------------------------- */
/* auto-fit can leave a trailing empty track, so the hairlines come from each
   cell's own ring rather than a container background showing through */
.quotes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 0;
}
.quote {
    --c: var(--violet);
    --c-wash: rgba(108, 80, 233, 0.10);
    position: relative;
    z-index: 0;
    background: var(--paper);
    box-shadow: 0 0 0 1px var(--hairline);
    padding: clamp(1.75rem, 3vw, 2.4rem);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    transition: background 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.quote:nth-child(6n+2) { --c: var(--cyan);        --c-wash: rgba(0, 152, 171, 0.10); }
.quote:nth-child(6n+3) { --c: var(--gold);        --c-wash: rgba(216, 134, 11, 0.12); }
.quote:nth-child(6n+4) { --c: var(--pink);        --c-wash: rgba(219, 62, 150, 0.10); }
.quote:nth-child(6n+5) { --c: var(--green);       --c-wash: rgba(23, 169, 87, 0.10); }
.quote:nth-child(6n)   { --c: var(--violet-lift); --c-wash: rgba(138, 116, 255, 0.12); }
.quote:hover {
    z-index: 1;
    background: linear-gradient(var(--c-wash), var(--c-wash)), var(--paper);
    box-shadow: 0 0 0 1px var(--hairline-2);
}

.quote__mark {
    font-family: var(--display);
    font-size: 3rem;
    line-height: 0.6;
    color: var(--c);
}
.quote__text {
    font-family: var(--display);
    font-size: 1.24rem;
    line-height: 1.4;
    letter-spacing: -0.005em;
    flex: 1;
}
.quote__who { display: flex; align-items: center; gap: 0.85rem; }
.quote__who img {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    border: 2px solid var(--c-wash);
}
.quote__mono {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    flex: none;
    background: var(--c-wash);
    border: 2px solid var(--c-wash);
    color: var(--c);
    font-family: var(--mono);
    font-size: 0.8rem;
    font-weight: 500;
}
.quote__name { font-size: 0.92rem; font-weight: 500; }
.quote__role { font-size: 0.82rem; color: var(--muted); }

/* --- Accordion (FAQ) ---------------------------------------------------- */
.faq { border-top: 1px solid var(--hairline); }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    width: 100%;
    text-align: left;
    padding: 1.6rem 0;
    font-family: var(--display);
    font-size: clamp(1.15rem, 1.9vw, 1.45rem);
    line-height: 1.3;
    transition: color 0.3s var(--ease);
}
.faq__q:hover { color: var(--violet); }
.faq__icon {
    position: relative;
    flex: none;
    width: 15px;
    height: 15px;
    color: var(--violet);
}
.faq__icon::before, .faq__icon::after {
    content: '';
    position: absolute;
    top: 50%; left: 0;
    width: 15px;
    height: 2px;
    background: currentColor;
    transition: transform 0.4s var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item.is-open .faq__icon::after { transform: rotate(0deg); }
.faq__item.is-open .faq__q { color: var(--violet); }

.faq__a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s var(--ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
    max-width: 68ch;
    padding-bottom: 1.75rem;
    color: var(--bone-dim);
}

/* --- CTA band ----------------------------------------------------------- */
.cta {
    position: relative;
    text-align: center;
    padding-block: clamp(4.5rem, 10vh, 8rem);
    border-top: 1px solid var(--hairline);
    overflow: hidden;
}
.cta::before {
    content: '';
    position: absolute;
    bottom: -62%;
    left: 50%;
    width: min(1100px, 150vw);
    aspect-ratio: 1;
    transform: translateX(-50%);
    background:
        radial-gradient(28rem 20rem at 30% 32%, rgba(108, 80, 233, 0.16), transparent 62%),
        radial-gradient(26rem 18rem at 70% 26%, rgba(219, 62, 150, 0.13), transparent 62%),
        radial-gradient(26rem 18rem at 52% 58%, rgba(216, 134, 11, 0.12), transparent 62%);
    pointer-events: none;
}
.cta > * { position: relative; }
.cta__title { margin-block: 1.5rem 1.5rem; max-width: 18ch; margin-inline: auto; }
.cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: center;
    margin-top: 2.5rem;
}

/* --- Forms -------------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

.field { display: grid; gap: 0.5rem; }
.field > label, .field__label {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--muted);
}
.field input, .field textarea, .field select {
    width: 100%;
    padding: 0.9rem 1rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 9px;
    font-size: 0.95rem;
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.field textarea { resize: vertical; min-height: 7.5rem; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none;
    border-color: var(--violet);
    background: var(--paper);
    box-shadow: 0 0 0 3px var(--accent-wash);
}

/* Chip-style radio group */
.chips { position: relative; display: flex; flex-wrap: wrap; gap: 0.55rem; }
/* Hidden but still focusable. Pinned to the group's origin so the native
   control cannot push past the container on narrow viewports. */
.chips input {
    position: absolute;
    top: 0; left: 0;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}
.chips label {
    display: inline-block;
    padding: 0.55rem 1rem;
    border: 1px solid var(--hairline-2);
    border-radius: 999px;
    font-size: 0.87rem;
    color: var(--bone-dim);
    cursor: pointer;
    transition: all 0.3s var(--ease);
}
.chips label:hover { border-color: var(--violet); color: var(--violet-deep); }
.chips input:checked + label {
    background: var(--btn);
    border-color: var(--btn);
    color: var(--on-btn);
    font-weight: 500;
}
.chips input:focus-visible + label { outline: 2px solid var(--violet); outline-offset: 3px; }

.alert {
    padding: 0.9rem 1.1rem;
    border-radius: 9px;
    font-size: 0.9rem;
    border: 1px solid;
}
.alert--ok  { border-color: rgba(23, 169, 87, 0.35); background: rgba(23, 169, 87, 0.08); color: #0E7038; }
.alert--bad { border-color: rgba(214, 45, 45, 0.35); background: rgba(214, 45, 45, 0.06); color: #B0201F; }

.contact-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* --- Split layout (contact, about) -------------------------------------- */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
}
.split--narrow { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }

.contact-lines { display: grid; gap: 1px; background: var(--hairline); border-block: 1px solid var(--hairline); margin-top: 2.5rem; }
.contact-line {
    background: var(--paper);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1.15rem 0;
}
.contact-line__label {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--faint);
}

/* --- Prose (legal pages) ------------------------------------------------ */
.prose { max-width: 70ch; }
.prose h2 {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.2;
    margin-top: 3rem;
    margin-bottom: 1rem;
}
.prose h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.65rem;
    color: var(--violet-deep);
}
.prose p, .prose li { color: var(--bone-dim); margin-bottom: 1rem; }
.prose ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1.25rem; }
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: var(--violet); }
.prose a { color: var(--violet-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); font-weight: 600; }

/* --- Articles (guides and insights) ------------------------------------- */
.article__meta {
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--faint);
    margin-top: 1.75rem;
}
.article__meta a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

/* Slightly wider than the legal prose: these carry tables. */
.article__body { max-width: 74ch; }

/* Tables are here because a comparison marked up as a table is extracted far
   more reliably, by search engines and by language models, than the same
   comparison written as prose. Worth the CSS. */
.table-scroll {
    overflow-x: auto;
    margin: 1.75rem 0 2rem;
    border: 1px solid var(--hairline);
    border-radius: 12px;
}
.prose table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.prose caption {
    caption-side: top;
    text-align: left;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint);
    padding: 0.9rem 1.1rem 0.6rem;
}
.prose thead th {
    text-align: left;
    font-weight: 600;
    color: var(--ink);
    background: var(--surface);
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid var(--hairline-2);
    white-space: nowrap;
}
.prose tbody th {
    text-align: left;
    font-weight: 600;
    color: var(--ink);
    vertical-align: top;
}
.prose tbody th, .prose td {
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid var(--hairline);
    color: var(--bone-dim);
    vertical-align: top;
}
.prose tbody tr:last-child th,
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr:nth-child(even) { background: var(--paper-2); }

/* --- Footer ------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--hairline); padding-top: clamp(3.5rem, 7vw, 5.5rem); }
.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 3rem 2.5rem;
    padding-bottom: 3.5rem;
}
.site-footer h4 {
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--violet-deep);
    margin-bottom: 1.25rem;
}
.site-footer nav { display: grid; gap: 0.7rem; }
.site-footer nav a, .site-footer__col p {
    font-size: 0.92rem;
    color: var(--muted);
    transition: color 0.3s var(--ease);
}
.site-footer nav a:hover { color: var(--violet); }

.site-footer__bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem 2rem;
    padding-block: 1.75rem;
    border-top: 1px solid var(--hairline);
    font-size: 0.85rem;
    color: var(--faint);
}
.site-footer__bar nav { display: flex; gap: 1.5rem; }
.site-footer__bar a { color: var(--faint); }
.site-footer__bar a:hover { color: var(--ink); }

.socials { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
.socials a {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border: 1px solid var(--hairline);
    border-radius: 50%;
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.socials a:nth-child(1):hover { border-color: var(--violet); background: rgba(108, 80, 233, 0.09); }
.socials a:nth-child(2):hover { border-color: var(--pink);   background: rgba(219, 62, 150, 0.09); }
.socials a:nth-child(3):hover { border-color: var(--cyan);   background: rgba(0, 152, 171, 0.09); }
.socials a:hover svg { fill: var(--ink); }
.socials svg { width: 16px; height: 16px; fill: var(--muted); transition: fill 0.3s var(--ease); }

/* --- Floating WhatsApp connect ------------------------------------------
   Collapsed to a disc, widening to a labelled pill on hover or focus. Sits
   below the mobile drawer (z-index 890) so it never covers the menu. */
.wa-float {
    position: fixed;
    right: clamp(0.9rem, 2.2vw, 1.75rem);
    bottom: clamp(0.9rem, 2.2vw, 1.75rem);
    z-index: 880;
    display: inline-flex;
    align-items: center;
    height: 54px;
    padding-inline: 15px;
    border-radius: 999px;
    background: var(--wa);
    color: #fff;
    box-shadow: 0 12px 30px rgba(12, 16, 31, 0.20);
    transition: background 0.3s var(--ease), transform 0.3s var(--ease),
                box-shadow 0.3s var(--ease);
}
.wa-float:hover {
    background: var(--wa-deep);
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(12, 16, 31, 0.26);
}
.wa-float svg { width: 24px; height: 24px; fill: currentColor; flex: none; }
.wa-float__label {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    font-size: 0.9rem;
    font-weight: 600;
    transition: max-width 0.4s var(--ease), opacity 0.3s var(--ease),
                padding-left 0.4s var(--ease);
}
.wa-float:hover .wa-float__label,
.wa-float:focus-visible .wa-float__label {
    max-width: 12rem;
    padding-left: 0.6rem;
    opacity: 1;
}
/* The disc would sit on top of the footer's last line on small screens. */
@media (max-width: 640px) {
    .site-footer__bar { padding-bottom: 4.5rem; }
}

/* --- Reveal animation --------------------------------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
    transition-delay: var(--delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* --- Utilities ---------------------------------------------------------- */
.stack   { display: grid; gap: 1rem; }
.stack-2 { display: grid; gap: 2rem; }
.row     { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.sticky-aside { position: sticky; top: 7rem; }

/* --- Responsive --------------------------------------------------------- */
/* Every collapsed track is minmax(0, 1fr): an "auto" floor lets a nowrap
   button set the column's min-content width and push the layout wider than
   the viewport, which body's overflow-x then quietly clips. */
@media (max-width: 1024px) {
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .model__row { grid-template-columns: 4rem minmax(0, 1fr); }
    .model__row > :last-child { grid-column: 2; }
}

@media (max-width: 900px) {
    .nav, .header__cta .btn { display: none; }
    .nav-toggle { display: flex; }
    .sec-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .split, .split--narrow, .engagement, .product { grid-template-columns: minmax(0, 1fr); }
    .case { grid-template-columns: minmax(0, 1fr); }
    .case:nth-child(even) .case__media { order: 0; }
    .sticky-aside { position: static; }
}

@media (max-width: 640px) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
    .form__row { grid-template-columns: minmax(0, 1fr); }
    /* A long label on a full-width button wraps rather than overflowing. */
    .btn--block { white-space: normal; }
    .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    .hero__proof { gap: 1rem 1.75rem; }
    .brand__role { display: none; }
    .btn { padding: 0.85rem 1.35rem; }
    .hero__actions .btn { flex: 1 1 100%; }
}

/* --- Motion preferences ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
    .marquee__track { animation: none; }
}

/* --- Print -------------------------------------------------------------- */
@media print {
    .site-header, .drawer, .cta, .marquee, .wa-float { display: none; }
    body { background: #fff; color: #000; }
}