/* ==========================================================================
   Immigration Lawyer, sections and components
   Depends on theme.css for tokens and primitives.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Site header, utility strip above, bar below
   -------------------------------------------------------------------------- */

/* The strip and the bar stick together as one piece of chrome. */
.site-top {
    position: sticky;
    top: 0;
    z-index: 900;
}

.topbar {
    background: var(--ink-deep);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.8125rem;
    line-height: 1;
}
.topbar__inner {
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 2vw, 2rem);
    min-height: var(--topbar-h);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    flex-wrap: wrap;
}
.topbar__gap { flex: 1 1 auto; }
.topbar__fact,
.topbar__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    margin: 0;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
}
.topbar__link { transition: color var(--dur) var(--ease); }
.topbar__link:hover { color: #fff; }
.topbar .ico { width: 0.95rem; height: 0.95rem; color: var(--brand); opacity: 0.95; }
.topbar__link:hover .ico { color: #fff; }
.flagset--sm svg { width: 15px; height: 10.5px; }

/* The Google rating lives up here, where it has room to be read in full and
   leaves the bar below to the navigation. */
.topbar__rating {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    padding-right: clamp(0.9rem, 2vw, 2rem);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.16);
    transition: color var(--dur) var(--ease);
}
.topbar__rating:hover { color: #fff; }
.topbar__mark { width: 1.05rem; height: 1.05rem; opacity: 1; }
.topbar__score {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.topbar__rating .stars { display: inline-flex; gap: 0.1em; }
.topbar__rating .stars .ico { width: 0.8rem; height: 0.8rem; color: var(--amber); opacity: 1; }

@media (max-width: 900px) {
    .topbar__fact--hide-sm { display: none; }
    .topbar__inner { justify-content: space-between; }
    .topbar__rating { box-shadow: none; padding-right: 0; }
}
@media (max-width: 620px) {
    .topbar__count { display: none; }
}
@media (max-width: 460px) {
    .topbar__link { display: none; }
    .topbar__inner { justify-content: center; }
}

.site-head {
    position: relative;
    background: var(--paper);
    border-bottom: 1px solid transparent;
    box-shadow: 0 0 0 0 rgba(var(--shadow-rgb),0);
    transition: border-color var(--dur) var(--ease),
                background var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}
/* Only once the bar has left the top of the page. At rest it sits flat on the
   paper with nothing under it. */
.site-head.is-stuck {
    border-bottom-color: var(--hair);
    background: rgba(var(--paper-rgb),0.92);
    backdrop-filter: saturate(1.6) blur(14px);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    box-shadow: 0 22px 44px -28px rgba(var(--shadow-rgb),0.5);
}

.site-head__inner {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
    height: var(--head-h);
    transition: height var(--dur) var(--ease);
}
.site-head.is-stuck .site-head__inner { height: 88px; }

.brand { flex: none; display: block; line-height: 0; }
/* A wordmark, and a wide one: near six to one. It is sized off the width it
   may take beside the navigation, not off the height of the bar, or it would
   run into the menu long before it looked tall enough.

   The figure is set against the call button rather than against the bar: the
   button stands 48px, and a mark taller than that reads as the one loud thing
   in a row of quiet ones. This sits just under it. */
.brand svg, .brand img { height: 42px; width: auto; transition: height var(--dur) var(--ease); }
.site-head.is-stuck .brand svg,
.site-head.is-stuck .brand img { height: 32px; }

.nav { margin-left: auto; }
.nav__list {
    display: flex;
    align-items: center;
    gap: clamp(1.1rem, 2.2vw, 2.1rem);
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav__list li { margin: 0; }

.nav__item {
    display: flex;
    align-items: center;
    gap: 0.15em;
}

.nav__link {
    position: relative;
    display: inline-block;
    padding: 0.4em 0;
    font-size: var(--step-0);
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    white-space: nowrap;
}
.nav__link::after {
    content: "";
    position: absolute;
    left: 0; right: 100%;
    bottom: 0.1em;
    height: 1px;
    background: var(--ink);
    transition: right var(--dur) var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { right: 0; }
.nav__item.is-current > .nav__link { color: var(--ink); font-weight: 600; }
.nav__item.is-current > .nav__link::after { right: 0; background: var(--brand); }

/* Dropdown */
.nav__item--has-children { position: relative; }
.nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    background: none;
    border: 0;
    padding: 0.4em 0;
    cursor: pointer;
}
.nav__toggle .ico { width: 0.7em; height: 0.7em; transition: transform var(--dur) var(--ease); }
.nav__item--open .nav__toggle .ico { transform: rotate(180deg); }

.nav__sub {
    position: absolute;
    top: calc(100% + 0.9rem);
    left: -1.25rem;
    min-width: 21rem;
    padding: 0.6rem 0;
    margin: 0;
    list-style: none;
    background: var(--surface);
    box-shadow: 0 1px 0 var(--hair), 0 24px 48px -24px rgba(var(--shadow-rgb),0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.nav__item--open .nav__sub,
.nav__item--has-children:hover .nav__sub {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.nav__sub li { margin: 0; }
.nav__sub a {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.85em;
    padding: 0.7em 1.15rem;
    font-size: var(--step--1);
    line-height: 1.3;
    color: var(--ink-soft);
    text-decoration: none;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__sub-text { flex: 1 1 auto; min-width: 0; }
.nav__sub-ico {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.1rem; height: 2.1rem;
    color: var(--ink-mute);
    background: var(--paper);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__sub-ico .ico { width: 1.05rem; height: 1.05rem; }
.nav__sub a:hover { background: var(--paper); color: var(--ink); }
.nav__sub a:hover .nav__sub-ico { background: var(--brand); color: var(--on-brand); }
/* The bar's underline animation has no place inside the panel. */
.nav__sub .nav__link::after { display: none; }

/* Header aside: the call button */
.head-aside {
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 1.8vw, 1.6rem);
    flex: none;
}

/* The number is the second-most-used control on the page after the menu, so it
   is drawn as a control rather than as a line of text. On hover the plate
   deepens and the glyph square takes the brand colour, rather than the whole
   button changing under the cursor. */
.head-phone {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    padding: 0.55rem 1.25rem;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
    color: var(--on-brand);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 10px 22px -12px rgba(var(--brand-rgb),0.85);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* A slow sheen crosses the plate so the number catches the eye without
   anything blinking at the reader. */
.head-phone::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -70%;
    width: 45%;
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.32) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-18deg);
    animation: headphone-sheen 5.5s var(--ease) infinite;
    pointer-events: none;
    z-index: -1;
}
@keyframes headphone-sheen {
    0%, 62% { left: -70%; }
    88%, 100% { left: 130%; }
}
@keyframes headphone-ring {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-14deg); }
    40% { transform: rotate(11deg); }
    60% { transform: rotate(-7deg); }
    80% { transform: rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
    .head-phone::after { animation: none; }
    .head-phone:hover .head-phone__ico .ico { animation: none; }
}
/* a:hover in the base sheet outranks .head-phone, so the number has to say
   white again or it turns brand-blue on a near-black plate. */
.head-phone:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -12px rgba(var(--brand-rgb),1);
    color: var(--on-brand);
}
/* The handset stands on its own, sized to the two lines of type beside it
   rather than tucked into a little box. */
.head-phone__ico {
    flex: none;
    width: 1.85rem;
    height: 1.85rem;
    color: var(--on-brand);
}
.head-phone:hover .head-phone__ico { animation: headphone-ring 0.8s var(--ease); }
.head-phone__text { display: grid; line-height: 1.15; }
.head-phone__label {
    font-size: 0.6875rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--on-brand-soft);
}
.head-phone__num {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

/* Burger */
.burger {
    display: none;
    width: 44px; height: 44px;
    margin-right: -10px;
    background: none;
    border: 0;
    cursor: pointer;
    position: relative;
}
.burger span {
    position: absolute;
    left: 10px;
    width: 24px; height: 1.5px;
    background: var(--ink);
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 28px; }
body.menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Full-screen mobile menu */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 890;
    background: var(--paper);
    padding: calc(var(--head-h) + 1.25rem) var(--shell-pad) var(--sp-7);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 340ms var(--ease), visibility 340ms;
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }

/* No numerals: nothing in this menu is ranked. The only place a numeral
   belongs on the site is the process, where the order is the point. */
.mobile-menu__list { list-style: none; margin: 0; padding: 0; }
.mobile-menu__list > li {
    margin: 0;
    border-top: 1px solid var(--hair);
}
.mobile-menu__list > li:last-child { border-bottom: 1px solid var(--hair); }
.mobile-menu__list > li > a,
.mobile-menu__list > li > .mobile-menu__parent {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    width: 100%;
    padding: 0.85em 0;
    background: none;
    border: 0;
    text-align: left;
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ink);
    text-decoration: none;
}
.mobile-menu__sub {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}
/* Practice areas carry the same mark here as in the desktop dropdown and on
   the home page index, so the same thing looks the same everywhere. */
.mobile-menu__sub a {
    display: flex;
    align-items: center;
    gap: 0.65em;
    padding: 0.42em 0;
    font-size: var(--step-0);
    color: var(--ink-soft);
    text-decoration: none;
}
.mobile-menu__sub-ico { display: grid; place-items: center; flex: none; color: var(--brand); }
.mobile-menu__sub-ico .ico { width: 1.15rem; height: 1.15rem; }
.mobile-menu__foot {
    margin-top: var(--sp-7);
    display: grid;
    gap: var(--sp-3);
}
.mobile-menu__foot a {
    font-family: var(--font-body);
    font-size: var(--step--1);
    color: var(--ink-soft);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.6em;
}

/* The bar gives things up in order as it narrows: the navigation's breathing
   room, then the logo's extra height, then the navigation itself. */
/* The bar has a fixed width budget, so the navigation steps down in size
   rather than overflowing. */
@media (max-width: 1560px) {
    .nav__list { gap: 1.15rem; }
    .nav__link { font-size: 0.9375rem; }
}
@media (max-width: 1340px) {
    .nav__list { gap: 0.95rem; }
    .nav__link { font-size: 0.875rem; }
}
@media (max-width: 1400px) {
    .site-head__inner { gap: clamp(1rem, 2vw, 2rem); }
    .brand svg, .brand img { height: 38px; }
    .site-head.is-stuck .brand svg,
    .site-head.is-stuck .brand img { height: 28px; }
}
@media (max-width: 1080px) {
    .nav { display: none; }
    .burger { display: block; }
    .head-aside { margin-left: auto; }
}
@media (max-width: 560px) {
    .head-phone { padding: 0; background: none; color: var(--ink); }
    .head-phone__text { display: none; }
    .head-phone__ico { width: 1.5rem; height: 1.5rem; color: #fff; }
}

/* --------------------------------------------------------------------------
   2. Home hero, the film runs the whole section, veiled left and right
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    background: var(--paper);
    --hero-pad: clamp(2rem, 3vw, 3rem);
    overflow: hidden;
    isolation: isolate;
}

/* The film fills the hero. Two veils sit on it: paper on the left, where the
   words are, fading out across the middle; cobalt deepening to the right,
   where the form sits. */
.hero__film {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--ink-deep);
}
.hero__film video,
.hero__film img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
}
.hero__veil { position: absolute; inset: 0; }

/* Stacked layout. A paper wash heavy enough to carry ink type leaves the film
   as a ghost, and the form card covers the lower half, so there is nowhere for
   it to show. Stacked therefore goes the other way: the film keeps a dark
   reading of its own and the copy turns white over it. */
.hero__veil--paper {
    background: linear-gradient(
        180deg,
        rgba(var(--ink-deep-rgb), 0.80) 0%,
        rgba(var(--ink-deep-rgb), 0.72) 42%,
        rgba(var(--dusk-rgb),0.74) 100%
    );
}
.hero__veil--brand { display: none; }

@media (max-width: 999px) {
    /* Scoped to the copy, never the panel: the form card underneath stays
       white and must keep its own ink. */
    .hero__copy {
        --ink: #FFFFFF;
        --ink-soft: rgba(255, 255, 255, 0.82);
        --ink-mute: rgba(255, 255, 255, 0.70);
        --hair: rgba(255, 255, 255, 0.22);
        /* --ink went white, so what sits on an --ink fill has to go with it. */
        --on-ink: var(--ink-deep);
    }
    /* Needs the extra class: the base rule for this is further down the file
       and would otherwise win on source order at equal specificity. */
    .hero__copy .hero__title em { color: var(--brand-lift); }
    /* The ghost button inverts with the copy, and its hover has to come with
       it or it ends up white on white. */
    .hero__copy .btn--ghost:hover,
    .hero__copy .btn--ghost:focus {
        --btn-bg: #FFFFFF;
        --btn-fg: var(--ink-deep);
        box-shadow: inset 0 0 0 1px #FFFFFF;
    }
}

@media (min-width: 1000px) {
    /* Never fully opaque: the film stays faintly readable behind the words,
       which is the point of having it run the whole hero. 0.90 still leaves
       ink type at roughly 12:1 against the brightest frame. */
    .hero__veil--paper {
        background: linear-gradient(
            90deg,
            rgba(var(--paper-rgb),0.96) 0%,
            rgba(var(--paper-rgb),0.93) 28%,
            rgba(var(--paper-rgb),0.86) 40%,
            rgba(var(--paper-rgb),0.5) 50%,
            rgba(var(--paper-rgb),0) 62%
        );
    }
    .hero__veil--brand {
        display: block;
        background: linear-gradient(
            90deg,
            rgba(var(--brand-deep-rgb),0) 38%,
            rgba(var(--brand-deep-rgb),0.22) 52%,
            rgba(var(--brand-deep-rgb),0.58) 72%,
            rgba(var(--brand-deep-rgb),0.78) 100%
        );
    }
}

.hero__shell { position: relative; z-index: 1; }

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3rem);
    padding-top: var(--hero-pad);
    padding-bottom: clamp(2.5rem, 4vw, 4rem);
}

/* Exactly one screen: the strip, the bar and the hero together fill 100dvh.
   The copy centres in the left column and the film takes whatever height the
   form leaves in the right, so the panel always reaches the fold. */
@media (min-width: 1000px) {
    .hero__grid {
        grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
        gap: clamp(2rem, 4vw, 5rem);
        align-items: stretch;
        min-height: calc(100dvh - var(--head-total));
        padding-bottom: 0;
    }
    .hero__copy {
        align-self: center;
        max-width: 37rem;
        padding-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
    }
}

.hero__title {
    font-size: clamp(2.15rem, 1.35rem + 2.8vw, 3.6rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    margin: 0 0 var(--sp-4);
    max-width: 20ch;
}
.hero__title em {
    font-style: normal;
    color: var(--brand);
}
.hero__body { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); max-width: 50ch; margin: 0 0 var(--sp-5); }

/* Two plain statements on ruled lines. No numerals, neither one ranks above
   the other, and stacked, so a long line never fights the column edge. */
.claims {
    list-style: none;
    margin: 0 0 var(--sp-6);
    padding: 0;
    display: grid;
    gap: 0;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-5); }

/* The proof that closes the hero copy. It runs the full width of the column
   rather than sharing a line with the buttons: it is the second reason to
   believe the heading, and a badge beside a button read as a footnote.

   Ruled top and bottom, like the claims above it, so the column ends on the
   same structural device it is built from. */
.gproof {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(1rem, 2.4vw, 2.25rem);
    row-gap: var(--sp-4);
    padding: clamp(0.9rem, 1.6vw, 1.35rem) 0;
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
    text-decoration: none;
    color: inherit;
}

/* Whose ratings these are, in the mark people recognise. */
.gproof__brand { display: grid; gap: 0.3em; justify-items: start; }
.gwordmark {
    height: clamp(19px, 1.9vw, 25px);
    width: auto;
    display: block;
}
.gproof__brandnote {
    font-family: var(--font-body);
    font-size: var(--step--1);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

/* The figure, at a size you read before you read anything else. */
.gproof__score {
    display: flex;
    align-items: baseline;
    gap: 0.3em;
    padding-left: clamp(1rem, 2.4vw, 2.25rem);
    box-shadow: inset 1px 0 0 var(--hair);
}
.gproof__figure {
    font-family: var(--font-body);
    font-size: clamp(2.1rem, 1.4rem + 2vw, 3.1rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.gproof__outof {
    font-family: var(--font-body);
    font-size: var(--step--1);
    color: var(--ink-mute);
    white-space: nowrap;
}

.gproof__rating { display: grid; gap: 0.35em; }
.gproof__stars { gap: 0.16em; }
.gproof__stars .ico { width: 1.3rem; height: 1.3rem; }
.gproof__count {
    font-size: var(--step-0);
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* The second line. The copy column is around 40rem even on a wide screen, and
   four things across it left the count breaking after every word, so the
   qualifier and the way in take a row of their own. */
.gproof__foot {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5em var(--sp-5);
    padding-top: clamp(0.6rem, 1vw, 0.9rem);
    border-top: 1px solid var(--hair-soft);
}
.gproof__note {
    font-size: var(--step--1);
    line-height: 1.35;
    color: var(--ink-mute);
}
.gproof__go {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    flex: none;
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--ink);
}
.gproof__go .ico { transition: transform var(--dur) var(--ease); }
.gproof:hover .gproof__go { color: var(--brand); }
.gproof:hover .gproof__go .ico { transform: translateX(4px); }

/* On a phone the whole band has to earn its scroll: same content, less of it.
   The mark lies down beside its label instead of standing over it, the figure
   comes off its peak, and every gap is taken in. Stacked, the divider beside
   the figure would also rule against nothing. */
@media (max-width: 519px) {
    .gproof {
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: var(--sp-4);
        row-gap: 0.55rem;
        padding-block: 0.8rem;
    }
    .gproof__brand {
        grid-column: 1 / -1;
        display: flex;
        align-items: baseline;
        gap: 0.5em;
    }
    .gwordmark { height: 17px; }
    .gproof__score { padding-left: 0; box-shadow: none; }
    .gproof__figure { font-size: 1.95rem; }
    .gproof__rating { gap: 0.2em; }
    .gproof__stars .ico { width: 1.05rem; height: 1.05rem; }
    .gproof__foot { padding-top: 0.5rem; gap: 0.35em var(--sp-4); }
    .gproof__note { line-height: 1.3; }
}

.trustline {
    display: flex;
    align-items: center;
    gap: 0.75em;
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--step--1);
    color: var(--ink-mute);
}
/* Two wordings, one line. The named list is the useful one and it runs wide,
   so it holds the desktop; the phone gets the short form and lets the flags
   name the languages. Never both. */
.trustline__short { display: none; }

.flagset { display: inline-flex; gap: 0.3em; }
.flagset svg { width: 20px; height: 14px; display: block; }

/* The form card. It sits on the cobalt side of the film and is kept to the
   same measure as the words opposite, so the two sides read as a pair. */
.hero__panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* On a phone the form sits well below the fold, so the reveal only ever meant
   it faded in once somebody had already scrolled to it. It is the thing we
   want them to reach, so it stands there from the start instead. */
@media (max-width: 999px) {
    .hero__panel[data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
.hero__form {
    position: relative;   /* the portrait hangs off this corner */
    width: 100%;
    background: var(--surface);
    padding: clamp(1.35rem, 2.4vw, 2rem);
    box-shadow: 0 1px 0 var(--hair), 0 44px 80px -44px rgba(var(--shadow-rgb), 0.55);
}
@media (min-width: 1000px) {
    .hero__form { max-width: 33rem; }
}
/* The hero is one screen, so the form gives ground before the page does. */
@media (min-width: 1000px) and (max-height: 1000px) {
    .hero__form { padding: 1.4rem 1.5rem; }
    .hero__form .inlineform textarea { min-height: 0; height: 5em; }
    .hero__form .form-grid { gap: 0.7rem; }
    .hero__form .inlineform .form-grid { margin-bottom: var(--sp-4); }
    .hero__form .inlineform__head { margin-bottom: var(--sp-4); }
}
/* Shorter still: tighten the copy as well. */
@media (min-width: 1000px) and (max-height: 860px) {
    /* the taller bar has to come out of somewhere */
    .hero { --hero-pad: 1.5rem; }
    .hero__title { font-size: clamp(2rem, 1.1rem + 2vw, 2.85rem); }
    .hero__body { font-size: var(--step-0); margin-bottom: var(--sp-4); }
    .hero__form { padding: 1.25rem 1.4rem; }
    .hero__form .inlineform textarea { min-height: 0; height: 4.2em; }
    .hero__form .form-grid { gap: 0.6rem; }
    .hero__form .inlineform .form-grid { margin-bottom: var(--sp-4); }
    .hero__form .inlineform__head { margin-bottom: var(--sp-3); }
    .hero__form .inlineform__title { font-size: var(--step-1); }
}

/* The person who will read the message. A square, lifted off the top corner of
   the form and hung a little past both edges, so it reads as something laid on
   the card rather than slotted into it. */
.hero__form {
    --avatar-w:   clamp(88px, 9vw, 124px);
    --avatar-out: clamp(0.75rem, 1.6vw, 1.25rem);   /* how far past the corner */
}

.hero__avatar--form {
    position: absolute;
    top: calc(-1 * var(--avatar-out));
    right: calc(-1 * var(--avatar-out));
    z-index: 2;
    width: var(--avatar-w);
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--mist);
    box-shadow: 0 16px 30px -16px rgba(var(--shadow-rgb), 0.5);
}

/* The source is a wide shot of him at a desk. Square and shrunk to this size
   the whole room would read as clutter, so the frame is taken in on the head
   and shoulders.

   The figures are measured off the file, not guessed: a 580px window centred
   on (770, 530) of the 1245x1400 original, which leaves headroom over the hair
   and keeps a shoulder in. width is 1245/580, and the offsets put that centre
   at the centre of the square. max-width is named because the reset caps every
   image at 100%, which would undo the enlargement. */
.hero__avatar--form img {
    position: absolute;
    width: 100%;
    height: auto;
    max-width: none;
    left: 0%;
    top: -0%;
}

/* The heading keeps its hands off that corner. Taken on the head alone, so the
   fields underneath still run the full width of the card. */
.hero__form .inlineform__head--person {
    display: block;
    padding-right: calc(var(--avatar-w) - var(--avatar-out) + var(--sp-4));
}

/* No rule under the heading here. It ran the width of the card and passed
   behind the portrait, cutting it across the middle. The space alone separates
   the invitation from the fields now, and it takes more of it to read as a
   break than it did with a line down the middle of it: 16px with the rule
   gone was a heading falling into the form. */
.hero__form .inlineform__head {
    border-bottom: 0;
    padding-bottom: var(--sp-5);
}
/* --------------------------------------------------------------------------
   2b. Hero foot band, the promise, the rating and the figures
   -------------------------------------------------------------------------- */

.herostrip {
    background: var(--paper);
    padding-top: clamp(2.5rem, 4vw, 4rem);
    /* Not --section-y: this is the foot of the hero, not a section of its own,
       and the strip always ends on the figures, whose cells already carry
       var(--sp-6) below the labels. A full section's padding on top of that
       left the rules hanging in an empty band. The figure here is the head
       padding less those 2rem, so the block sits evenly between the two. */
    padding-bottom: clamp(1.25rem, 2vw, 2rem);
}
.herostrip__top { display: grid; gap: var(--sp-4); }
@media (min-width: 900px) {
    .herostrip__top {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: var(--sp-6);
    }
}

.hero__promise {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--ink);
    max-width: 46ch;
    margin: 0;
}

/* Stat strip along the hero foot */
.statstrip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--hair);
    margin-top: var(--sp-6);
}
@media (min-width: 760px) {
    .statstrip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* The mark stands beside the figure it belongs to, not above it: stacked, it
   read as a third line of its own. */
.statstrip__cell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(0.7rem, 1.2vw, 1.1rem);
    align-items: start;
    padding: var(--sp-5) var(--sp-4) var(--sp-6) 0;
    border-bottom: 1px solid var(--hair);
}
@media (min-width: 760px) {
    .statstrip__cell { border-bottom: 0; }
    .statstrip__cell + .statstrip__cell { padding-left: clamp(1rem, 2vw, 2rem); box-shadow: inset 1px 0 0 var(--hair); }
}
.statstrip__ico {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    display: grid;
    place-items: center;
    color: var(--brand);
}
.statstrip__ico .ico {
    width: clamp(2rem, 1.4rem + 1.6vw, 2.75rem);
    height: clamp(2rem, 1.4rem + 1.6vw, 2.75rem);
}
.statstrip__num {
    display: block;
    font-family: var(--font-body);
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--ink);
}
.statstrip__label {
    display: block;
    margin-top: 0.55em;
    font-size: var(--step--1);
    color: var(--ink-mute);
    max-width: 16ch;
}

.hero__rating {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-family: var(--font-body);
    font-size: var(--step--1);
    color: var(--ink-mute);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--dur) var(--ease);
}
.hero__rating:hover { color: var(--ink); }
.hero__rating .ico--lg { width: 1.4rem; height: 1.4rem; }
.hero__rating .stars { gap: 0.1em; }
.hero__rating .stars .ico { width: 0.85rem; height: 0.85rem; }
.hero__rating > span:first-of-type {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   3. Review wall, three at a time on a snapping track
   -------------------------------------------------------------------------- */

.reviews { background: var(--paper-warm); }

/* The portrait that used to hold the right of this row is gone, so the score
   takes its place on the same baseline as the heading rather than sitting
   under it and leaving the top of the section empty. */
.reviews { padding-top: calc(var(--section-y) * 0.72); }

/* No rule under the head: the progress bar above the cards already draws a
   line across the same width, and two of them read as a mistake. */
.reviews__head {
    display: grid;
    gap: var(--sp-5);
    margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}
@media (min-width: 900px) {
    .reviews__head {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: clamp(2rem, 4vw, 4rem);
        align-items: end;
    }
    .reviews__meta { justify-self: end; }
    /* The score no longer sits under it, so the heading has the width to run
       on one line. Needs the parent class: the measure is set in a rule further
       down the file, which would otherwise win on source order. */
    .reviews__head .reviews__title { max-width: none; }
}

.reviews__title {
    font-size: var(--step-4);
    letter-spacing: -0.03em;
    line-height: 1.06;
    margin: 0;
    max-width: 26ch;
}
.reviews__title em { font-style: normal; color: var(--brand); }

.reviews__score {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55em;
    margin: 0;
    font-size: var(--step--1);
    color: var(--ink-mute);
}
.reviews__mark { width: 1.3rem; height: 1.3rem; }
.reviews__score .figure-set { font-size: 1.35rem; font-weight: 600; color: var(--ink); line-height: 1; }
.reviews__score .stars { gap: 0.12em; }
.reviews__score .stars .ico { width: 0.95rem; height: 0.95rem; }
.reviews__count { padding-left: 0.55em; box-shadow: inset 1px 0 0 var(--hair); }

.reviews__cta { margin: var(--sp-4) 0 0; }

/* The portrait stands on the line that opens the reviews and breaks up out of
   the section, so his head crosses into the band above, which is what keeps
   the top of the section from ballooning to fit him. A flat block behind his
   lower half holds him in the composition. */
.reviews__portrait {
    position: relative;
    justify-self: start;
    align-self: end;
    width: 100%;
    max-width: 262px;
    margin-top: calc(-1 * var(--section-y) - 5rem);
    margin-bottom: 0;
}
.reviews__portrait::before {
    content: "";
    position: absolute;
    left: 9%; right: 9%;
    bottom: 0;
    height: 54%;
    background: var(--brand-wash);
    z-index: 0;
}
.reviews__portrait img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: -1px;   /* sits exactly on the rule */
    transform: scaleX(-1); /* facing into the page, not away from it */
}
@media (min-width: 900px) { .reviews__portrait { justify-self: end; } }
@media (max-width: 899px) { .reviews__portrait { display: none; } }

/* The track itself: full page width, three panels in view, snapping. */
.reviewwall { --rev-gap: clamp(1rem, 1.8vw, 1.75rem); }

.reviewwall__bar {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    padding-bottom: var(--sp-4);
}
.reviewwall__progress {
    flex: 1 1 auto;
    height: 1px;
    background: var(--hair);
    position: relative;
    overflow: hidden;
}
.reviewwall__progress span {
    position: absolute;
    top: -1px; left: 0;
    height: 3px;
    width: 33%;
    background: var(--ink);
    transition: transform 420ms var(--ease), width 420ms var(--ease);
}
.reviewwall__nav { display: flex; align-items: center; gap: 0.75rem; flex: none; }
.reviewwall__count {
    font-size: var(--step--1);
    color: var(--ink-mute);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.reviewwall__count [data-reviews-page] { color: var(--ink); font-weight: 600; }
.reviewwall__slash { padding: 0 0.15em; color: var(--ink-faint); }

.revnav {
    display: grid;
    place-items: center;
    width: 2.75rem; height: 2.75rem;
    background: none;
    border: 1px solid var(--hair);
    color: var(--ink);
    cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.revnav:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.revnav:disabled { color: var(--ink-faint); cursor: default; opacity: 0.5; }
.revnav .ico { width: 1.1rem; height: 1.1rem; }

.reviewwall__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: var(--rev-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;

    /* overflow-x on a scroller clips the other axis too, so the cards' drop
       shadow needs room inside it. Vertically that is padding, taken straight
       back off with a negative margin so the section spacing is unchanged.

       Horizontally it cannot be padding: on a scroller the padding is part of
       the scrollport, so it puts the edge of the next card on screen and pulls
       the first one away from the container edge. The sides are handled on the
       shadow instead, by giving every card shadow a spread of at least half its
       blur. That leaves no halo to the left or right at all, only underneath,
       which is where a lifted card wants one.

       The bottom figure is measured, not reasoned: a blur reaches its full
       radius, not half of it, and its tail is asymptotic, so the hover shadow
       (38 down, 80 blur, -40 spread) was still visible 88px past the card.
       112px takes it below anything the eye can pick out, and costs nothing
       because the negative margin gives the same amount straight back. */
    padding: 1.25rem 0 7rem;
    margin: -1.25rem 0 -7rem;
}
.reviewwall__track::-webkit-scrollbar { display: none; }
@media (min-width: 700px) {
    .reviewwall__track { grid-auto-columns: calc((100% - var(--rev-gap)) / 2); }
}
@media (min-width: 1040px) {
    .reviewwall__track { grid-auto-columns: calc((100% - 2 * var(--rev-gap)) / 3); }
}

/* One review card, shared by the home page track and the reviews page columns,
   so the two read as the same component. Name and date sit tight together at
   the top, the rating under them, the words below that. */
.review {
    scroll-snap-align: start;
    /* Positioned so the screen-reader-only spans inside are laid out against
       the panel. Left to the page, they escape the track's clip and drag the
       document's width out with them. */
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    padding: clamp(1.5rem, 2.4vw, 2.25rem);
    box-shadow: 0 1px 0 var(--hair), 0 24px 44px -34px rgba(var(--shadow-rgb),0.4);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.review:hover { transform: translateY(-3px); box-shadow: 0 1px 0 var(--hair), 0 32px 56px -30px rgba(var(--shadow-rgb),0.45); }

.review__head { display: grid; gap: 0.1rem; }
.review__name { font-weight: 600; color: var(--ink); font-size: var(--step-0); line-height: 1.25; margin: 0; }
.review__when { font-size: 0.8125rem; line-height: 1.25; color: var(--ink-mute); }

.review .stars { margin-top: var(--sp-3); }
.review .stars .ico { width: 0.9rem; height: 0.9rem; }

.review__quote {
    font-size: var(--step-0);
    line-height: 1.6;
    color: var(--ink-soft);
    margin: var(--sp-4) 0 var(--sp-5);
    flex: 1 1 auto;
}
.review__quote.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.review__more {
    align-self: start;
    background: none; border: 0; padding: 0;
    margin: calc(-1 * var(--sp-3)) 0 var(--sp-5);
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--brand);
    cursor: pointer;
}
.review__more:hover { color: var(--brand-deep); }

.review__verified {
    margin: 0;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--hair);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   4. Index rows, practice areas. No ranking, so no numerals: each area
   carries its own mark instead.
   -------------------------------------------------------------------------- */

/* Two to a row on a wide screen, so six areas read as a block of three rows
   rather than a long list. The rules between them are drawn by the cells:
   a bottom edge on each, and a left edge on the second column. */
.index {
    /* Stacked, the row runs the full column and needs no inset of its own. */
    --index-pad: 0rem;
    border-top: 1px solid var(--hair);
}

@media (min-width: 860px) {
    /* Both columns carry the same inset, so the hover plate is identical on
       every row. The inset is carried on a custom property, not on a
       padding-inline declaration: the shorthand in the base rule below sits
       later in the file and would win at equal specificity. */
    .index {
        --index-pad: clamp(1.25rem, 2vw, 2rem);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .index__row:nth-child(even) { box-shadow: inset 1px 0 0 var(--hair); }
}

.index__row {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-5);
    padding: clamp(1.4rem, 2.6vw, 2.1rem) var(--index-pad);
    border-bottom: 1px solid var(--hair);
    text-decoration: none;
    color: inherit;
    transition: background var(--dur) var(--ease);
}
.index__ico {
    display: grid;
    place-items: center;
    width: 3.1rem; height: 3.1rem;
    flex: none;
    background: var(--surface);
    color: var(--ink-soft);
    box-shadow: inset 0 0 0 1px var(--hair);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.index__ico .ico { width: 1.45rem; height: 1.45rem; }
.index__row:hover { background: var(--surface); }
.index__row:hover .index__ico { background: var(--brand); color: var(--on-brand); box-shadow: inset 0 0 0 1px var(--brand); }
.section--mist .index__ico { background: var(--paper-warm); }

.index__title {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 700;
    letter-spacing: -0.028em;
    line-height: 1.1;
    margin: 0;
    color: var(--ink);
}
.index__desc {
    display: block;
    margin-top: 0.4em;
    font-size: var(--step--1);
    color: var(--ink-mute);
    max-width: 56ch;
}
.index__go {
    display: grid;
    place-items: center;
    width: 2.6rem; height: 2.6rem;
    color: var(--ink-faint);
    transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.index__row:hover .index__go { color: var(--brand); transform: translateX(4px); }
.index__go .ico { width: 1.15rem; height: 1.15rem; }

@media (max-width: 640px) {
    .index__row { grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-4); }
    .index__ico { width: 2.6rem; height: 2.6rem; }
    .index__ico .ico { width: 1.2rem; height: 1.2rem; }
    .index__go { display: none; }
}

/* --------------------------------------------------------------------------
   5. Pillars, dark, three columns split by hairlines
   -------------------------------------------------------------------------- */

.pillars {
    display: grid;
    gap: 0;
    margin-top: var(--sp-8);
    border-top: 1px solid var(--hair);
}
@media (min-width: 900px) {
    .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pillar {
    padding: var(--sp-6) 0;
    border-bottom: 1px solid var(--hair);
}
@media (min-width: 900px) {
    .pillar { padding: var(--sp-7) clamp(1.5rem, 2.6vw, 2.75rem) var(--sp-6) 0; border-bottom: 0; }
    .pillar + .pillar { padding-left: clamp(1.5rem, 2.6vw, 2.75rem); box-shadow: inset 1px 0 0 var(--hair); }
}
/* A short line naming the commitment, in place of a ranking numeral. */
.pillar__label {
    display: block;
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-lift);
    margin-bottom: var(--sp-5);
}
.pillar__title { font-size: var(--step-2); margin: 0 0 var(--sp-4); }
.pillar__body { color: var(--ink-soft); margin: 0; font-size: var(--step-0); }

/* --------------------------------------------------------------------------
   6. Process, one hairline, four numerals sitting on it
   -------------------------------------------------------------------------- */

.steps { position: relative; margin-top: var(--sp-8); }
.steps__track {
    display: grid;
    gap: var(--sp-6);
}
@media (min-width: 860px) {
    .steps__track { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
    .steps::before {
        content: "";
        position: absolute;
        left: 0; right: 0;
        top: 1.55rem;
        height: 1px;
        background: var(--hair);
    }
}
.step { position: relative; }
.step__n {
    display: inline-grid;
    place-items: center;
    width: 3.1rem; height: 3.1rem;
    margin-bottom: var(--sp-5);
    /* Solid cobalt: the numerals are the one thing that has to carry the eye
       along the rule, and a hairline square on paper did not do it. */
    background: var(--brand);
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--on-brand);
    transition: background var(--dur) var(--ease);
}
.step:hover .step__n { background: var(--brand-deep); }
.step__title { font-size: var(--step-2); margin: 0 0 var(--sp-3); }
.step__body { color: var(--ink-soft); margin: 0; font-size: var(--step-0); max-width: 34ch; }

/* --------------------------------------------------------------------------
   7. Feature block, image bleeding off one edge
   -------------------------------------------------------------------------- */

.feature { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 1000px) {
    .feature { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2.5rem, 5vw, 6rem); }
    .feature--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
    .feature--flip .feature__media { order: 2; }
}

.feature__media { position: relative; }
.feature__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 1000px) {
    .feature__media { margin-left: calc((var(--vw) - min(var(--vw), var(--shell))) / -2 - var(--shell-pad)); }
    .feature__media img { aspect-ratio: 5 / 4; }
    .feature--flip .feature__media {
        margin-left: 0;
        margin-right: calc((var(--vw) - min(var(--vw), var(--shell))) / -2 - var(--shell-pad));
    }
}

/* The figure sits over the image edge, not in a floating box. */
.feature__figure {
    position: absolute;
    z-index: 2;
    right: clamp(-1rem, -1.6vw, -2rem);
    bottom: clamp(1.5rem, 3vw, 2.75rem);
    padding: clamp(0.9rem, 1.4vw, 1.35rem) clamp(1.1rem, 1.8vw, 1.6rem);
    background: var(--brand);
    box-shadow: 0 20px 40px -22px rgba(var(--gloom-rgb),0.9);
    font-family: var(--font-body);
    font-size: clamp(2.75rem, 4.6vw, 4rem);
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.05em;
    color: var(--on-brand);
    text-align: left;
}
/* The full variant lets the picture reach the top and bottom edges of its
   section instead of sitting inside the section's padding. The section keeps
   its padding for the text column; the media cancels it. */
@media (min-width: 1000px) {
    .feature--full { align-items: stretch; }
    .feature--full .feature__media {
        margin-top: calc(-1 * var(--section-y));
        margin-bottom: calc(-1 * var(--section-y));
        display: flex;
    }
    .feature--full .feature__media img {
        aspect-ratio: auto;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    .feature--full > :not(.feature__media) { align-self: center; }


}

/* When the image bleeds right, the figure moves to its inner edge, off the
   right it would hang past the viewport. */
@media (min-width: 1000px) {
    .feature--flip .feature__figure {
        right: auto;
        left: clamp(-1rem, -1.6vw, -2rem);
    }
}
.feature__figure span {
    display: block;
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.25;
    color: var(--on-brand-soft);
    margin-top: 0.5em;
    max-width: 12ch;
}

/* A quiet list with a hanging rule, no tick icons. */
/* Any list of what we do or offer: a green tick, then the line. Shared by
   the about lists and the hero claims so they read as one device. */
.marks { list-style: none; margin: var(--sp-6) 0; padding: 0; display: grid; }
.marks li,
.claims li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.7em;
    margin: 0;
    padding: 0.85em 0;
    border-top: 1px solid var(--hair);
    font-size: var(--step-0);
    line-height: 1.45;
    color: var(--ink-soft);
}
.marks li:last-child,
.claims li:last-child { border-bottom: 1px solid var(--hair); }
.marks li .ico,
.claims li .ico {
    width: 1.1em;
    height: 1.1em;
    margin-top: 0.16em;
    color: var(--green);
    stroke-width: 2.6;
}

.langline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em 1.1em;
    font-family: var(--font-body);
    font-size: var(--step--1);
    color: var(--ink-mute);
    margin: var(--sp-5) 0;
}
.langline span { display: inline-flex; align-items: center; gap: 0.45em; }
.langline svg { width: 18px; height: 13px; }

/* --------------------------------------------------------------------------
   8. Contact section, form on the dark, map bleeding right
   -------------------------------------------------------------------------- */

.contactsec { position: relative; }
.contactsec__grid { display: grid; gap: var(--sp-7); }
@media (min-width: 1000px) {
    .contactsec__grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: clamp(2.5rem, 5vw, 5rem);
        align-items: start;
    }
    /* The map column runs taller than the form, so the heading and the form
       ride down with the reader rather than scrolling away above it. */
    .contactsec__left {
        position: sticky;
        top: var(--sticky-top);
    }
}
.contactsec__map {
    position: relative;
    min-height: 320px;
    background: var(--ink);
    overflow: hidden;
}
.contactsec__map iframe {
    width: 100%; height: 100%;
    min-height: 320px;
    border: 0;
    filter: grayscale(1) invert(0.92) contrast(0.86);
}
@media (min-width: 1000px) {
    /* The map runs to the top edge of the section and off the right of the
       shell, so it reads as part of the page rather than a panel inside it.
       The height gains what the negative margin takes, so its foot stays put. */
    .contactsec__map {
        margin-top: calc(-1 * var(--section-y));
        margin-right: calc((var(--vw) - min(var(--vw), var(--shell))) / -2 - var(--shell-pad));
        min-height: calc(480px + var(--section-y));
    }
    .contactsec__map iframe { min-height: calc(480px + var(--section-y)); }
}

.deflist { display: grid; gap: var(--sp-4); margin: var(--sp-6) 0 0; }
.deflist div { display: grid; gap: 0.25em; padding-top: var(--sp-3); border-top: 1px solid var(--hair); }
.deflist dt {
    font-family: var(--font-body);
    font-size: var(--step--1);
    color: var(--ink-faint);
    margin: 0;
}
.deflist dd { margin: 0; font-size: var(--step-0); color: var(--ink); }
.deflist a { color: inherit; text-decoration: none; }
.deflist a:hover { color: var(--brand); }

/* --------------------------------------------------------------------------
   9. Inline form
   -------------------------------------------------------------------------- */

.inlineform__head {
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--hair);
}
.inlineform__head--person {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-5);
}
.inlineform__title {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0 0 0.35em;
}
.inlineform__sub { font-size: var(--step--1); line-height: 1.5; color: var(--ink-mute); margin: 0; max-width: 42ch; }
.inlineform .form-grid { margin-bottom: var(--sp-5); }
.inlineform__foot { display: grid; gap: var(--sp-4); }

/* The foot stacks in every variant: the drop target, then the send button,
   both the full width of the form, with the reassurance centred beneath. */
.inlineform__foot > .btn { width: 100%; justify-content: center; }
.inlineform__foot .form-note { justify-content: center; text-align: center; margin: 0; }

.btn-loading { display: none; }
.is-sending .btn-text { display: none; }
.is-sending .btn-loading { display: inline-flex; align-items: center; gap: 0.6em; }
/* Square, in keeping with everything else on the page: a mark that turns on
   its own centre rather than a spinning ring. */
.spinner {
    width: 0.8em; height: 0.8em;
    border: 1.5px solid currentColor;
    border-right-color: transparent;
    border-bottom-color: transparent;
    animation: spin 780ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   10. Page header for inner pages
   -------------------------------------------------------------------------- */

/* Compact: breadcrumbs, heading, one line of subtitle, and a hairline handing
   over to the content. Nothing tall, nothing decorative. */
.pagehead {
    padding-top: clamp(1.75rem, 2.6vw, 2.75rem);
    padding-bottom: clamp(1.5rem, 2.2vw, 2.25rem);
}
.pagehead__inner { padding-bottom: clamp(1.5rem, 2.2vw, 2.25rem); border-bottom: 1px solid var(--hair); }
.pagehead__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-body);
    font-size: var(--step--1);
    color: var(--ink-faint);
    margin-bottom: var(--sp-4);
}
.pagehead__crumbs a { color: var(--ink-mute); text-decoration: none; }
.pagehead__crumbs a:hover { color: var(--brand); }
/* Two columns where there is room: the heading beside its subtitle, so the
   block stays short instead of stacking into a wall. */
.pagehead__title { font-size: var(--step-4); margin: 0; max-width: 24ch; }
.pagehead__sub { font-size: var(--step-0); color: var(--ink-soft); max-width: 58ch; margin: var(--sp-4) 0 0; }
@media (min-width: 900px) {
    .pagehead__lockup {
        display: grid;
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
        gap: clamp(2rem, 4vw, 4rem);
        align-items: end;
    }
    .pagehead__lockup .pagehead__sub { margin: 0; }
}

.pagehead__band { margin-top: var(--sp-7); position: relative; overflow: hidden; height: clamp(180px, 26vw, 340px); background: var(--ink-deep); }
.pagehead__band video,
.pagehead__band img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   11. Blog index
   -------------------------------------------------------------------------- */

/* Category filter as inline text navigation, not pills. */
.filternav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 1.6em;
    padding-top: var(--sp-5);
    border-top: 1px solid var(--hair);
    margin-top: var(--sp-6);
}
.filternav a {
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--ink-mute);
    text-decoration: none;
    padding-bottom: 0.3em;
    background-image: linear-gradient(var(--ink), var(--ink));
    background-size: 0 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
}
.filternav a:hover { color: var(--ink); background-size: 100% 1px; }
.filternav a.is-active {
    color: var(--ink);
    background-image: linear-gradient(var(--brand), var(--brand));
    background-size: 100% 1px;
}

.postfeature { display: grid; gap: var(--sp-6); margin-top: var(--sp-7); }
@media (min-width: 900px) {
    .postfeature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
}
.postfeature__media { overflow: hidden; }
.postfeature__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 800ms var(--ease); }
.postfeature:hover .postfeature__media img { transform: scale(1.03); }
.postfeature__title { font-size: var(--step-4); margin: var(--sp-4) 0; }
.postfeature__title a { color: inherit; text-decoration: none; }
.postfeature__title a:hover { color: var(--brand); }
.postfeature__excerpt { color: var(--ink-soft); margin: 0 0 var(--sp-5); max-width: 46ch; }

.postmeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em 0.9em;
    font-family: var(--font-body);
    font-size: var(--step--1);
    color: var(--ink-mute);
}
.postmeta a { color: var(--brand); text-decoration: none; }
.postmeta a:hover { text-decoration: underline; }
.postmeta__sep { color: var(--ink-faint); }

/* The article grid. Every card carries a full-width picture, a post without
   one borrows from the library rather than leaving a hole in the row. */
.postgrid {
    display: grid;
    gap: clamp(1.75rem, 3vw, 2.75rem);
    margin-top: clamp(3rem, 5vw, 4.5rem);
    padding-top: clamp(2.5rem, 4vw, 3.5rem);
    border-top: 1px solid var(--hair);
}
@media (min-width: 640px) { .postgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .postgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.postcard {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    color: inherit;
    box-shadow: 0 1px 0 var(--hair), 0 22px 40px -34px rgba(var(--shadow-rgb),0.4);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* The title link covers the card, so the whole thing is one target without
   nesting anchors. */
.postcard__link { color: inherit; text-decoration: none; }
.postcard__link::after { content: ""; position: absolute; inset: 0; }
.postcard:hover {
    transform: translateY(-3px);
    box-shadow: 0 1px 0 var(--hair), 0 30px 52px -30px rgba(var(--shadow-rgb),0.45);
}

.postcard__media {
    display: block;
    overflow: hidden;
    background: var(--mist);
}
.postcard__media img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 700ms var(--ease);
}
.postcard:hover .postcard__media img { transform: scale(1.04); }

.postcard__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: clamp(1.25rem, 2vw, 1.75rem);
}
.postcard__title {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 700;
    letter-spacing: -0.024em;
    line-height: 1.18;
    margin: 0.65em 0 0.4em;
    color: var(--ink);
    transition: color var(--dur) var(--ease);
}
.postcard:hover .postcard__title,
.postcard:hover .postcard__link { color: var(--brand); }
.postcard__excerpt {
    font-size: var(--step--1);
    line-height: 1.6;
    color: var(--ink-mute);
    margin: 0 0 var(--sp-5);
    flex: 1 1 auto;
}
.postcard__more {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--ink);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--hair);
    transition: color var(--dur) var(--ease);
}
.postcard__more .ico { width: 1rem; height: 1rem; transition: transform var(--dur) var(--ease); }
.postcard:hover .postcard__more { color: var(--brand); }
.postcard:hover .postcard__more .ico { transform: translateX(4px); }

/* Pagination. the_posts_pagination() wraps the links in <nav><div.nav-links>,
   so the row has to be laid out on that inner element, styling .pager alone
   leaves the numerals stacked. */
.pager { margin-top: var(--sp-8); }
.pager .navigation,
.pager .pagination { width: 100%; }
.pager .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25em;
}
.pager .page-numbers {
    display: grid;
    place-items: center;
    min-width: 2.6rem; height: 2.6rem;
    padding: 0 0.5em;
    font-family: var(--font-body);
    font-size: var(--step--1);
    color: var(--ink-mute);
    text-decoration: none;
    transition: color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pager .page-numbers:hover { color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink); }
.pager .page-numbers.current { color: var(--brand); box-shadow: inset 0 -1px 0 var(--brand); }
.pager .page-numbers.dots { box-shadow: none; }

/* --------------------------------------------------------------------------
   12. Single post
   -------------------------------------------------------------------------- */

.article__head { max-width: 780px; margin: 0 auto; text-align: center; }
.article__head .postmeta { justify-content: center; }
.article__title { font-size: var(--step-5); margin: var(--sp-5) 0 0; }

.article__cover { margin-top: var(--sp-7); }
.article__cover img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

.article__grid { display: grid; gap: var(--sp-8); margin-top: var(--sp-8); }
@media (min-width: 1040px) {
    .article__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(2.5rem, 5vw, 5.5rem); align-items: start; }
    .article__aside { position: sticky; top: var(--sticky-top); }
}

.article__body { max-width: var(--measure); }

.tagline { display: flex; flex-wrap: wrap; gap: 0.4em 1.1em; margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--hair); }
.tagline a { font-family: var(--font-body); font-size: var(--step--1); color: var(--ink-mute); text-decoration: none; }
.tagline a:hover { color: var(--brand); }

.share { display: flex; align-items: center; gap: var(--sp-5); margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--hair); }
.share__label { font-family: var(--font-body); font-size: var(--step--1); color: var(--ink-faint); }
.share__set { display: flex; gap: var(--sp-5); }
.share__set a { color: var(--ink-mute); transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.share__set a:hover { color: var(--brand); transform: translateY(-2px); }
.share__set .ico { width: 1.05rem; height: 1.05rem; }

.aside-block + .aside-block { margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid var(--hair); }
.aside-block__title { font-family: var(--font-body); font-size: var(--step--1); color: var(--ink-faint); letter-spacing: 0.05em; margin: 0 0 var(--sp-5); font-weight: 500; }

.aside-cta { background: var(--ink-deep); color: #fff; padding: clamp(1.5rem, 3vw, 2rem); }
.aside-cta h4 { color: #fff; font-size: var(--step-2); margin: 0 0 var(--sp-3); }
.aside-cta p { color: rgba(255,255,255,0.72); font-size: var(--step--1); margin: 0 0 var(--sp-5); }
.aside-cta .tlink { color: #fff; }
.aside-cta .tlink:hover { color: var(--brand-hi); }
.aside-cta__phone {
    display: block;
    margin-top: var(--sp-4);
    font-family: var(--font-body);
    font-size: var(--step--1);
    color: rgba(255,255,255,0.72);
    text-decoration: none;
}
.aside-cta__phone:hover { color: #fff; }

.minilist { list-style: none; margin: 0; padding: 0; }
.minilist li { margin: 0; border-top: 1px solid var(--hair); }
.minilist li:first-child { border-top: 0; }
.minilist a {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.85em 0;
    font-size: var(--step--1);
    color: var(--ink-soft);
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}
/* Where the list is practice areas, the mark takes the column the numeral used
   to sit in. Elsewhere, the list is simply a list. */
.minilist--areas a { grid-template-columns: 1.6rem minmax(0, 1fr); align-items: center; }
.minilist__ico { display: grid; place-items: center; color: var(--brand); }
.minilist__ico .ico { width: 1.15rem; height: 1.15rem; }
.minilist a:hover { color: var(--brand); }
.minilist time { display: block; font-family: var(--font-body); font-size: 0.85em; color: var(--ink-faint); margin-top: 0.25em; }

.related { margin-top: var(--sp-9); padding-top: var(--sp-6); border-top: 1px solid var(--hair); }
.related__grid { display: grid; gap: var(--sp-6); margin-top: var(--sp-6); }
@media (min-width: 760px) { .related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); } }
.related__item { text-decoration: none; color: inherit; display: block; }
.related__item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: var(--sp-4); }
.related__item h4 { font-size: var(--step-1); margin: 0 0 0.4em; transition: color var(--dur) var(--ease); }
.related__item:hover h4 { color: var(--brand); }

/* Table of contents on practice area pages */
.toc { }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; border-top: 1px solid var(--hair); }
.toc li:first-child { border-top: 0; }
.toc a {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    padding: 0.7em 0;
    font-size: var(--step--1);
    color: var(--ink-soft);
    text-decoration: none;
}
.toc a:hover, .toc a.is-active { color: var(--brand); }

/* --------------------------------------------------------------------------
   13. Disclosure list, FAQ
   -------------------------------------------------------------------------- */

.faq__layout { display: grid; gap: var(--sp-7); }
@media (min-width: 1000px) {
    .faq__layout { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
    .faq__index { position: sticky; top: var(--sticky-top); }
}

.faqsearch { position: relative; margin-bottom: var(--sp-6); }
.faqsearch input {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--hair);
    padding: 0.8em 2rem 0.7em 0;
    font-family: var(--font-body);
    font-size: var(--step-0);
    color: var(--ink);
}
.faqsearch input:focus { outline: none; border-bottom-color: var(--brand); }
.faqsearch__clear {
    position: absolute; right: 0; top: 50%;
    transform: translateY(-50%);
    background: none; border: 0; cursor: pointer;
    color: var(--ink-faint);
    font-size: 1.2rem; line-height: 1;
    padding: 0.3em;
}
.faqsearch__clear:hover { color: var(--ink); }

/* Topic navigation. Each entry jumps to its heading; the active one is set
   from the scroll position, so it always says where you are. */
.catindex { display: grid; }
.catindex a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    width: 100%;
    padding: 0.72em 0;
    border-top: 1px solid var(--hair);
    text-align: left;
    font-size: var(--step--1);
    color: var(--ink-mute);
    text-decoration: none;
    transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.catindex a:last-child { border-bottom: 1px solid var(--hair); }
.catindex a:hover { color: var(--ink); }
.catindex a.is-active { color: var(--brand); font-weight: 600; }
.catindex__n { font-family: var(--font-body); font-size: 0.85em; color: var(--ink-faint); }
.catindex a.is-active .catindex__n { color: var(--brand); }

/* The card under the topic list. The list already ends on a hairline, so it
   needs nothing but space above it.

   Measured: the column runs 736px with the card, and the sticky offset is
   154px, so it wants a 914px viewport to stand fully clear. Above roughly
   780px the worst case is that the link sits just below the fold while the
   column is pinned, which is fine. Below that the card would start eating the
   topic list itself, so there it stands down. */
.faqask { margin-top: var(--sp-6); }
.faqask__img { display: block; width: 100%; height: auto; }
.faqask__lead {
    margin: var(--sp-4) 0 var(--sp-3);
    max-width: 34ch;
    font-size: var(--step--1);
    color: var(--ink-mute);
}
@media (min-width: 1000px) and (max-height: 779px) {
    .faqask { display: none; }
}

.faqgroup + .faqgroup { margin-top: var(--sp-8); }
.faqgroup__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    padding-bottom: var(--sp-4);
}
.faqgroup__title { font-size: var(--step-3); margin: 0; }
.faqgroup__n { font-family: var(--font-body); font-size: var(--step--1); color: var(--ink-faint); flex: none; }

.disclosure { border-top: 1px solid var(--hair); }
.disclosure__item { border-bottom: 1px solid var(--hair); }
.disclosure__q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-5);
    width: 100%;
    padding: clamp(1.1rem, 2vw, 1.5rem) 0;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--ink);
    transition: color var(--dur) var(--ease);
}
.disclosure__q:hover { color: var(--brand); }
.disclosure__mark {
    position: relative;
    flex: none;
    width: 1.1rem; height: 1.1rem;
    margin-top: 0.25em;
}
.disclosure__mark::before,
.disclosure__mark::after {
    content: "";
    position: absolute;
    background: currentColor;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.disclosure__mark::before { left: 0; right: 0; top: 50%; height: 1px; margin-top: -0.5px; }
.disclosure__mark::after { top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -0.5px; }
.disclosure__q[aria-expanded="true"] .disclosure__mark::after { transform: scaleY(0); opacity: 0; }
.disclosure__q[aria-expanded="true"] { color: var(--brand); }
.disclosure__a { color: var(--ink-soft); }
.disclosure__a-inner { padding: 0 0 clamp(1.2rem, 2vw, 1.7rem); max-width: 62ch; }

.faq__empty { padding: var(--sp-8) 0; text-align: center; }
.faq__empty p { color: var(--ink-mute); }

/* --------------------------------------------------------------------------
   14. Reviews page
   -------------------------------------------------------------------------- */

.ratingrow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
    margin-top: var(--sp-7);
}
.ratingrow__cell { padding: var(--sp-6) var(--sp-4) var(--sp-6) 0; }
.ratingrow__cell + .ratingrow__cell { padding-left: clamp(1rem, 2.5vw, 2.5rem); box-shadow: inset 1px 0 0 var(--hair); }
.ratingrow__num {
    display: block;
    font-family: var(--font-body);
    font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--ink);
}
.ratingrow__label { display: block; margin-top: 0.6em; font-size: var(--step--1); color: var(--ink-mute); }

/* The reviews page lays the same card out in masonry columns. */
.reviewgrid { columns: 1; column-gap: clamp(1.5rem, 3vw, 3rem); margin-top: var(--sp-8); }
@media (min-width: 720px) { .reviewgrid { columns: 2; } }
@media (min-width: 1080px) { .reviewgrid { columns: 3; } }
.reviewgrid .review {
    break-inside: avoid;
    margin-bottom: clamp(1.5rem, 3vw, 3rem);
    display: block;   /* flex items cannot live inside a column box */
}
.reviewgrid .review:hover { transform: none; }

.loadmore { display: grid; justify-items: center; gap: var(--sp-4); margin-top: var(--sp-7); }

/* --------------------------------------------------------------------------
   15. Glossary
   -------------------------------------------------------------------------- */

.alphabet {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15em;
    padding: var(--sp-5) 0;
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
    margin-top: var(--sp-6);
    position: sticky;
    top: 68px;
    background: var(--paper);
    z-index: 40;
}
.alphabet button {
    min-width: 2.1rem;
    padding: 0.3em 0.2em;
    background: none; border: 0;
    font-family: var(--font-body);
    font-size: var(--step-0);
    color: var(--ink-mute);
    cursor: pointer;
    transition: color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.alphabet button:hover:not(:disabled) { color: var(--ink); }
.alphabet button.is-active { color: var(--brand); box-shadow: inset 0 -1px 0 var(--brand); }
.alphabet button:disabled { color: var(--ink-faint); opacity: 0.4; cursor: default; }

.termgroup { margin-top: var(--sp-8); }
.termgroup__head { display: flex; align-items: baseline; gap: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--ink); }
.termgroup__letter { font-family: var(--font-display); font-size: var(--step-4); font-weight: 700; letter-spacing: -0.03em; margin: 0; }
.termgroup__n { font-family: var(--font-body); font-size: var(--step--1); color: var(--ink-faint); }

.termlist { display: grid; }
@media (min-width: 860px) { .termlist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 4rem); } }
.termlist__item { border-bottom: 1px solid var(--hair); }
.termlist__item a { display: block; padding: var(--sp-5) 0; text-decoration: none; color: inherit; }
.termlist__item a:hover .termlist__title { color: var(--brand); }
.termlist__title { font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.35em; transition: color var(--dur) var(--ease); }
.termlist__short { font-size: var(--step--1); color: var(--ink-mute); margin: 0; }
.termlist__syn { font-family: var(--font-body); font-size: var(--step--1); color: var(--ink-faint); margin: 0.5em 0 0; }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.ticker {
    overflow: hidden;
    padding: 1.05rem 0;
    background: var(--brand);
    color: var(--on-brand);
}
.ticker__track {
    display: flex;
    gap: 3.5rem;
    width: max-content;
    animation: ticker 62s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 0.65em;
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--on-brand);
    white-space: nowrap;
}
.ticker__item .ico { width: 1em; height: 1em; color: var(--on-brand); stroke-width: 2.4; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* The closing band carries a photograph under a deep wash, which is what
   separates it from the flat footer beneath. */
.endcta { position: relative; }
.endcta--image {
    background-image: var(--endcta-image);
    background-size: cover;
    background-position: 50% 55%;
    background-repeat: no-repeat;
    padding-block: clamp(5rem, 4rem + 6vw, 9.5rem);
}
.endcta--image { background-image: var(--endcta-image); }
/* Three layers: a cobalt cast over the photograph, a horizontal wash that
   keeps the copy side legible, and a deep foot that hands over to the footer
   so the two dark surfaces do not read as one. */
.endcta__veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(var(--fathom-rgb),0.95) 0%, rgba(var(--fathom-rgb),0.8) 42%, rgba(var(--fathom-rgb),0.42) 100%),
        linear-gradient(180deg, rgba(var(--brand-rgb),0.42) 0%, rgba(var(--brand-rgb),0.1) 42%, rgba(var(--pitch-rgb),0.86) 100%);
}
.endcta > .shell { position: relative; z-index: 1; }

.endcta__grid { display: grid; gap: var(--sp-6); align-items: end; }
@media (min-width: 900px) {
    /* The words get three quarters of the width, so the body sits on two
       lines rather than four, and the actions line up on the same baseline. */
    .endcta__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); }
}
.endcta__eyebrow { font-family: var(--font-body); font-size: var(--step--1); color: var(--brand-lift); margin: 0 0 var(--sp-5); }
.endcta__title { font-size: var(--step-5); margin: 0; }
.endcta__body { color: rgba(255,255,255,0.7); margin: var(--sp-5) 0 0; max-width: 92ch; font-size: var(--step-1); line-height: 1.5; }
.endcta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
@media (min-width: 900px) {
    .endcta__actions { flex-direction: column; align-items: stretch; }
    .endcta__actions .btn { justify-content: center; }
}

.site-foot {
    background-color: var(--ink-deep);
    color: rgba(255,255,255,0.7);
    padding-block: var(--sp-8) var(--sp-6);
    position: relative;
    /* A round light centred on the foot of the page, pushed down so only the
       top of the circle rises into the footer. */
    --glow-x: 50%;
    --glow-y: 118%;
    --glow-w: 40%;
    --glow-h: 168%;
    --glow-strength: 0.55;
}
.site-foot > * { position: relative; z-index: 1; }
.site-foot a { color: rgba(255,255,255,0.7); text-decoration: none; transition: color var(--dur) var(--ease); }
.site-foot a:hover { color: #fff; }

.foot__grid { display: grid; gap: var(--sp-7); }
@media (min-width: 760px) { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .foot__grid { grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.66fr)); gap: clamp(2rem, 4vw, 4rem); } }

.foot__brand svg, .foot__brand img { height: 48px; width: auto; margin-bottom: var(--sp-5); }
.foot__desc { font-size: var(--step--1); color: rgba(255,255,255,0.6); max-width: 34ch; margin: 0 0 var(--sp-5); }
.foot__social { display: flex; gap: var(--sp-4); }
.foot__social a { color: rgba(255,255,255,0.6); }
.foot__social a:hover { color: #fff; }
.foot__social .ico { width: 1.15rem; height: 1.15rem; }

.foot__title {
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--brand-lift);
    margin: 0 0 var(--sp-5);
}
.foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6em; }
.foot__list li { margin: 0; }
.foot__list a { font-size: var(--step--1); }
.foot__contact { display: grid; gap: 0.75em; font-family: var(--font-body); font-size: var(--step--1); }

.foot__base {
    margin-top: var(--sp-8);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--hair-invert-soft);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    font-family: var(--font-body);
    font-size: var(--step--1);
    color: rgba(255,255,255,0.45);
}
.foot__legal { display: flex; flex-wrap: wrap; gap: 0.5em 1.4rem; list-style: none; margin: 0; padding: 0; }
.foot__legal li { margin: 0; }

/* --------------------------------------------------------------------------
   17. Floating actions
   -------------------------------------------------------------------------- */

.fabs {
    position: fixed;
    right: clamp(0.85rem, 2vw, 1.5rem);
    bottom: clamp(0.85rem, 2vw, 1.5rem);
    z-index: 800;
    display: grid;
    gap: 0.55rem;
    justify-items: end;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.fabs.is-visible { opacity: 1; visibility: visible; transform: none; }
.fab {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    background: var(--ink);
    color: var(--on-ink);
    border: 0;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.fab:hover { background: var(--brand); color: var(--on-brand); transform: translateY(-2px); }
.fab .ico { width: 1.15rem; height: 1.15rem; }
/* The two labelled actions share one width, set by whichever label is
   longer, so the cluster reads as a stack rather than a staircase. */
.fab--phone,
.fab--whatsapp {
    width: 100%;
    min-width: 46px;
    padding: 0 1.15rem;
    gap: 0.6em;
    grid-auto-flow: column;
    justify-content: center;
    font-size: var(--step--1);
    font-weight: 600;
}

.fab--phone { background: var(--brand); color: var(--on-brand); }
.fab--phone:hover { background: var(--ink); color: var(--on-ink); }

/* WhatsApp keeps its own colour, people look for the green, and carries
   white on it, mark and label alike. */
.fab--whatsapp { background: #25D366; color: #fff; }
.fab--whatsapp:hover { background: #1FB855; color: #fff; }
.fab--whatsapp .ico { width: 1.3rem; height: 1.3rem; }

.fab--top { opacity: 0; pointer-events: none; }
.fab--top.is-visible { opacity: 1; pointer-events: auto; }

@media (max-width: 560px) {
    .fab--phone span, .fab--whatsapp span { display: none; }
    .fab--phone,
.fab--whatsapp { width: 46px; padding: 0; }
}

/* --------------------------------------------------------------------------
   18. Callback modal
   -------------------------------------------------------------------------- */

.callback { background: var(--ink-deep); color: #fff; padding: clamp(1.75rem, 4vw, 2.5rem); position: relative; }
.callback h5 { color: #fff; font-size: var(--step-2); margin: 0 0 0.3em; }
.callback p { color: rgba(255,255,255,0.62); font-size: var(--step--1); margin: 0 0 var(--sp-6); }
.callback__close {
    position: absolute; top: 1rem; right: 1rem;
    width: 2.2rem; height: 2.2rem;
    background: none; border: 0; cursor: pointer;
    color: rgba(255,255,255,0.6);
    display: grid; place-items: center;
}
.callback__close:hover { color: #fff; }

/* --------------------------------------------------------------------------
   19. Contact page + thanks + 404 + search
   -------------------------------------------------------------------------- */

.channels { display: grid; border-top: 1px solid var(--hair); margin-top: var(--sp-7); }
@media (min-width: 860px) { .channels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.channel { padding: var(--sp-6) var(--sp-4) var(--sp-6) 0; border-bottom: 1px solid var(--hair); }
@media (min-width: 860px) {
    .channel { border-bottom: 0; padding-right: clamp(1.5rem, 3vw, 2.5rem); }
    .channel + .channel { padding-left: clamp(1.5rem, 3vw, 2.5rem); box-shadow: inset 1px 0 0 var(--hair); }
}
.channel__label { font-family: var(--font-body); font-size: var(--step--1); color: var(--ink-faint); margin: 0 0 var(--sp-4); }
.channel__value { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; margin: 0 0 var(--sp-4); }
.channel__value a { color: inherit; text-decoration: none; }
.channel__value a:hover { color: var(--brand); }

/* Three ways to open a conversation, on the contact page. Deliberately not a
   second copy of the address block below it: each row is an action, and the
   note under it says what happens, not what the detail is. */
.startrow {
    display: grid;
    border-top: 1px solid var(--hair);
    margin-top: var(--sp-7);
}
@media (min-width: 860px) {
    .startrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.startrow__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(0.9rem, 1.4vw, 1.25rem);
    width: 100%;
    padding: var(--sp-5) var(--sp-4) var(--sp-5) 0;
    border: 0;
    border-bottom: 1px solid var(--hair);
    background: none;
    text-align: left;
    text-decoration: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background var(--dur) var(--ease);
}
@media (min-width: 860px) {
    .startrow__item { padding-right: clamp(1.25rem, 2.4vw, 2rem); }
    .startrow__item + .startrow__item {
        padding-left: clamp(1.25rem, 2.4vw, 2rem);
        box-shadow: inset 1px 0 0 var(--hair);
    }
}
.startrow__ico { color: var(--brand); display: grid; place-items: center; }
.startrow__ico .ico { width: 1.9rem; height: 1.9rem; }
.startrow__ico--wa { color: var(--green); }
.startrow__body { display: grid; gap: 0.2em; }
.startrow__title {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--ink);
}
.startrow__note { font-size: var(--step--1); color: var(--ink-mute); line-height: 1.35; }
.startrow__item:hover .startrow__title { color: var(--brand); }

.receipt { border-top: 1px solid var(--hair); margin-top: var(--sp-7); }
.receipt__row { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--sp-4); padding: 0.85em 0; border-bottom: 1px solid var(--hair); }
.receipt__key { font-family: var(--font-body); font-size: var(--step--1); color: var(--ink-faint); }
.receipt__val { font-size: var(--step-0); color: var(--ink); }
@media (max-width: 560px) { .receipt__row { grid-template-columns: minmax(0, 1fr); gap: 0.2em; } }

.bignum {
    font-family: var(--font-body);
    font-size: clamp(5rem, 18vw, 12rem);
    font-weight: 500;
    line-height: 0.85;
    letter-spacing: -0.05em;
    color: var(--ink);
    margin: 0 0 var(--sp-5);
}

.searchresult { border-bottom: 1px solid var(--hair); padding: var(--sp-6) 0; }
.searchresult__kind { font-family: var(--font-body); font-size: var(--step--1); color: var(--brand); }
.searchresult__title { font-size: var(--step-2); margin: 0.4em 0 0.5em; }
.searchresult__title a { color: inherit; text-decoration: none; }
.searchresult__title a:hover { color: var(--brand); }

.chiplist { display: flex; flex-wrap: wrap; gap: 0.4em 1.4em; margin-top: var(--sp-5); }
.chiplist a { font-size: var(--step--1); color: var(--ink-mute); text-decoration: none; padding-bottom: 0.25em; box-shadow: inset 0 -1px 0 var(--hair); transition: color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.chiplist a:hover { color: var(--brand); box-shadow: inset 0 -1px 0 var(--brand); }

/* --------------------------------------------------------------------------
   20. Team profile
   -------------------------------------------------------------------------- */

/* Who you will be working with. Both columns run the full width of the
   container and the same height, so the picture never floats in a pocket of
   empty paper beside a taller column of text. */
.profile { display: grid; gap: var(--sp-6); margin-top: var(--sp-7); }
@media (min-width: 900px) {
    .profile {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: clamp(2rem, 4vw, 4.5rem);
        align-items: stretch;
    }
    .profile__media { height: 100%; }
    .profile__media img { height: 100%; aspect-ratio: auto; }
    /* No picture: the identity rail takes the narrow column the photograph
       used to hold, and the prose takes the wide one. */
    .profile--textonly { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
    .profile--textonly .profile__body-col {
        padding-left: clamp(2rem, 4vw, 4.5rem);
        box-shadow: inset 1px 0 0 var(--hair);
    }
    .profile--textonly { gap: 0; }
}
.profile__id { display: flex; flex-direction: column; }
/* The rail is a column of its own, so the contact row does not need to be
   pushed to the bottom of a taller neighbour. */
.profile--textonly .profile__contact { margin-top: var(--sp-6); }
.profile__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 35%; }
.profile__body-col { display: flex; flex-direction: column; }
.profile__role { font-family: var(--font-body); font-size: var(--step--1); color: var(--brand); margin: 0 0 var(--sp-4); }
.profile__name { font-size: var(--step-3); margin: 0 0 0.25em; }
.profile__cred { font-family: var(--font-body); font-size: var(--step--1); color: var(--ink-mute); margin: 0 0 var(--sp-5); }
.profile__body { color: var(--ink-soft); max-width: none; }
.profile__body p + p { margin-top: 1em; }
.profile__contact { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: auto; padding-top: var(--sp-5); border-top: 1px solid var(--hair); }
.profile__contact .ico { color: var(--brand); width: 1.05rem; height: 1.05rem; }
.profile__contact a { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-body); font-size: var(--step--1); color: var(--ink); text-decoration: none; }
.profile__contact a:hover { color: var(--brand); }

/* --------------------------------------------------------------------------
   21. Long-form two-column (about page)
   -------------------------------------------------------------------------- */

.twocol { display: grid; gap: var(--sp-6); margin-top: var(--sp-7); }
@media (min-width: 900px) { .twocol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); } }
.twocol > div { color: var(--ink-soft); }
.twocol p + p { margin-top: 1em; }
.twocol p:first-child::first-letter {
    float: left;
    font-family: var(--font-display);
    font-size: 3.6em;
    line-height: 0.82;
    font-weight: 700;
    padding-right: 0.08em;
    color: var(--ink);
}

/* Languages row */
.langrow { display: grid; border-top: 1px solid var(--hair); margin-top: var(--sp-7); }
@media (min-width: 700px) { .langrow { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* The flag sits beside the language at every width. Stacked, it read as a mark
   floating above the word rather than as part of it. */
.langrow__cell {
    display: flex;
    align-items: center;
    gap: 0.7em;
    padding: var(--sp-5) var(--sp-3) var(--sp-5) 0;
    border-bottom: 1px solid var(--hair);
}
@media (min-width: 700px) {
    .langrow__cell { border-bottom: 0; }
    .langrow__cell + .langrow__cell { padding-left: clamp(0.75rem, 1.5vw, 1.5rem); box-shadow: inset 1px 0 0 var(--hair); }
}
.langrow__flag { flex: none; display: block; line-height: 0; }
.langrow__flag svg { width: 30px; height: 21px; display: block; }
.langrow__name { font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; letter-spacing: -0.02em; }

/* Founder message */
/* A shallower dark band. The picture no longer breaks out of it, but the
   section still reads better tighter than a full one. */
.founderband { padding-block: clamp(3rem, 4.5vw, 5rem); }

/* A photograph, not a cut-out: it is laid out in a column like any picture
   rather than stood on the floor of the band. The one graphic move is a flat
   cobalt plate stepped out behind it, the same element used over the feature
   images elsewhere. */
.founder { display: grid; gap: var(--sp-7); }
@media (min-width: 1000px) {
    .founder {
        grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
        gap: clamp(2.5rem, 5vw, 5rem);
        align-items: center;
    }
    .founder--flip { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); }
    .founder--flip .founder__media { order: 2; }
}
.founder__media {
    position: relative;
    margin: 0;
    max-width: 22rem;
}
@media (min-width: 1000px) { .founder__media { max-width: none; } }
.founder__media::before {
    content: "";
    position: absolute;
    left: clamp(-0.85rem, -1.4vw, -1.6rem);
    bottom: clamp(-0.85rem, -1.4vw, -1.6rem);
    width: 58%;
    height: 44%;
    background: var(--brand);
    z-index: 0;
}
.founder--flip .founder__media::before {
    left: auto;
    right: clamp(-0.85rem, -1.4vw, -1.6rem);
}
.founder__media img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
}
.founder__quote {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 500;
    line-height: 1.28;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 var(--sp-6);
}
.founder__body { color: var(--ink-soft); }
.founder__body p + p { margin-top: 1em; }
.founder__sign { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--hair); }
/* Signed rather than typed. */
.signature {
    display: block;
    font-family: "Reenie Beanie", "Segoe Script", cursive;
    /* Reenie Beanie has a smaller cap height than Alex Brush at the same size,
       so it needs a step up to read as the same signature. */
    font-size: clamp(2.5rem, 1.75rem + 2.3vw, 3.6rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--brand-lift);
    margin-bottom: 0.1em;
}
.founder__role { display: block; font-family: var(--font-body); font-size: var(--step--1); color: var(--ink-mute); }

/* Track record figures */
.figrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--hair); }
@media (min-width: 900px) { .figrow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.figrow__cell { padding: var(--sp-6) var(--sp-4) var(--sp-6) 0; border-bottom: 1px solid var(--hair); }
@media (min-width: 900px) {
    .figrow__cell { border-bottom: 0; }
    .figrow__cell + .figrow__cell { padding-left: clamp(1rem, 2vw, 2rem); box-shadow: inset 1px 0 0 var(--hair); }
}
.figrow__num { display: block; font-family: var(--font-body); font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); font-weight: 500; line-height: 1; letter-spacing: -0.04em; color: var(--ink); }
.figrow__label { display: block; margin-top: 0.6em; font-size: var(--step--1); color: var(--ink-mute); max-width: 18ch; }

/* --------------------------------------------------------------------------
   The card of our own that closes the review wall
   -------------------------------------------------------------------------- */

.reviewcta {
    background: var(--brand);
    color: var(--on-brand);
    box-shadow: none;
}
.reviewcta:hover { transform: none; box-shadow: none; }
.reviewcta__eyebrow {
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--on-brand-mute);
    margin: 0 0 var(--sp-4);
}
.reviewcta__title {
    font-size: var(--step-3);
    line-height: 1.12;
    color: var(--on-brand);
    margin: 0 0 var(--sp-4);
}
.reviewcta__body {
    font-size: var(--step--1);
    line-height: 1.6;
    color: var(--on-brand-soft);
    margin: 0 0 var(--sp-5);
}
.reviewcta__list {
    list-style: none;
    margin: 0 0 var(--sp-6);
    padding: 0;
    display: grid;
}
.reviewcta__list li { margin: 0; }
.reviewcta__list a {
    display: flex;
    align-items: center;
    gap: 0.65em;
    padding: 0.62em 0;
    border-top: 1px solid var(--hair-on-brand);
    font-size: var(--step--1);
    color: var(--on-brand);
    text-decoration: none;
    transition: padding-left var(--dur) var(--ease);
}
.reviewcta__list li:last-child a { border-bottom: 1px solid var(--hair-on-brand); }
.reviewcta__list a:hover { padding-left: 0.35em; }
.reviewcta__list .ico { width: 1.05rem; height: 1.05rem; flex: none; opacity: 0.85; }
.reviewcta .btn { width: 100%; justify-content: center; }

/* --------------------------------------------------------------------------
   Category badge and icon-led meta on the blog cards
   -------------------------------------------------------------------------- */

.badge {
    align-self: start;
    display: inline-block;
    margin: 0;
    padding: 0.42em 0.7em;
    background: var(--brand);
    color: var(--on-brand);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
}
.postcard:hover .badge { background: var(--brand-deep); }

.postcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em 0.9em; }
.postmeta__bit { display: inline-flex; align-items: center; gap: 0.4em; }
.postmeta__bit .ico { width: 0.95em; height: 0.95em; color: var(--brand); }

/* --------------------------------------------------------------------------
   Contact details: free-standing blue marks, no plate behind them
   -------------------------------------------------------------------------- */

.deflist div { grid-template-columns: auto minmax(0, 1fr); column-gap: 0.85em; align-items: start; }
.deflist__ico { grid-row: 1 / span 2; display: grid; place-items: center; padding-top: 0.15em; }
.deflist__ico .ico { width: 1.35rem; height: 1.35rem; color: var(--brand-lift); }
/* The row is itself a span on the lines that are not links, so it has to win
   against any generic span rule in the footer. */
.foot__contact .foot__contact-row { display: flex; align-items: center; gap: 0.6em; }
span.foot__contact-row { color: rgba(255, 255, 255, 0.55); }
.foot__contact-row > span { display: inline; }
.foot__contact-row .ico { width: 1.05rem; height: 1.05rem; flex: none; color: var(--brand-lift); }

/* Two ways on from the profile, above the direct lines. */
.profile__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin-top: var(--sp-6);
}
.profile__actions + .profile__contact { margin-top: var(--sp-5); }

/* --------------------------------------------------------------------------
   Danish origin, stated plainly
   -------------------------------------------------------------------------- */

/* Stays on the strip at every width, including mobile. */
.topbar__origin { font-weight: 500; color: rgba(255, 255, 255, 0.86); }
.topbar__origin svg { width: 18px; height: 12.6px; flex: none; }
@media (max-width: 900px) { .topbar__origin { display: inline-flex; } }
@media (max-width: 460px) { .topbar__origin { font-size: 0.75rem; } }

/* The languages line leads the hero, above the heading. */
.trustline--lead {
    margin: 0 0 var(--sp-4);
    font-weight: 500;
    color: var(--ink-soft);
}
.trustline--lead .flagset svg { width: 22px; height: 15.4px; }

/* --------------------------------------------------------------------------
   Review cards. Deep ink against the light section so the wall of voices is
   the thing you notice, using the same cobalt light and film grain as the
   other dark surfaces rather than a new device.
   -------------------------------------------------------------------------- */

.review {
    --glow-x: 82%;
    --glow-y: -14%;
    --glow-w: 78%;
    --glow-h: 90%;
    --glow-strength: 0.42;

    overflow: hidden;
    background-color: var(--ink-deep);
    background-image: radial-gradient(
        ellipse var(--glow-w) var(--glow-h) at var(--glow-x) var(--glow-y),
        rgba(var(--brand-rgb), calc(var(--glow-strength) * var(--glow-alpha))) 0%,
        rgba(var(--brand-rgb), calc(0.18 * var(--glow-alpha))) 34%,
        rgba(var(--brand-rgb), calc(0.05 * var(--glow-alpha))) 56%,
        rgba(var(--ink-deep-rgb), 0) 74%
    );
    color: rgba(255, 255, 255, 0.82);
    /* Spread is at least half the blur on both layers, so nothing spills past
       the left or right edge, where the track would clip it. */
    box-shadow:
        0 2px 6px -3px rgba(var(--shadow-rgb), 0.3),
        0 26px 56px -28px rgba(var(--umbra-rgb),0.8);
}

/* grain, so a large dark panel never reads as flat black */
.review::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--dark-grain);
    background-size: 180px 180px;
    opacity: 0.06;
    mix-blend-mode: overlay;
    pointer-events: none;
}
.review > * { position: relative; z-index: 1; }

/* the accent wipes in along the foot on hover */
.review::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-lift) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 460ms var(--ease);
    z-index: 2;
}
.review:hover::after { transform: scaleX(1); }
.review:hover {
    box-shadow:
        0 2px 8px -4px rgba(var(--shadow-rgb), 0.34),
        0 38px 80px -40px rgba(var(--umbra-rgb),0.95);
}

.review__source {
    position: absolute;
    top: clamp(1.25rem, 2vw, 1.75rem);
    right: clamp(1.25rem, 2vw, 1.75rem);
    display: block;
    z-index: 2;
}
.review__source .ico { width: 1.35rem; height: 1.35rem; }

.review__head { padding-right: 2.5rem; }
.review__name { color: #fff; font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; }
.review__when { color: rgba(255, 255, 255, 0.5); }

.review .stars .ico { width: 1rem; height: 1rem; }

.review__quote {
    font-size: var(--step-1);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}
.review__more { color: var(--brand-lift); }
.review__more:hover { color: #fff; }

.review__verified {
    border-top-color: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.45);
}

/* The card of our own keeps the solid cobalt, so it still reads as ours. */
.reviewcta {
    background-color: var(--brand);
    background-image: none;
    color: var(--on-brand);
}
.reviewcta::before,
.reviewcta::after { display: none; }
.reviewcta:hover { box-shadow: none; }

.reviewgrid .review { position: relative; }

/* A mark above each commitment, so the band is not three columns of prose. */
.pillar__ico {
    display: block;
    margin-bottom: var(--sp-5);
    color: var(--brand-lift);
}
.pillar__ico .ico { width: 2.35rem; height: 2.35rem; stroke-width: 1.4; }
@media (min-width: 900px) {
    .pillar__ico { margin-bottom: var(--sp-6); }
}

/* --------------------------------------------------------------------------
   Mobile refinements

   Kept together at the foot of the file on purpose. Several of these override
   declarations that appear earlier at the same specificity, and source order
   is what settles that: a rule tucked into a media query further up loses to
   the plain rule below it, silently.
   -------------------------------------------------------------------------- */

/* --- Topbar: the Danish line reads first, the score sits hard right ------- */
@media (max-width: 900px) {
    .topbar__gap { display: none; }
    .topbar__inner { justify-content: flex-start; gap: 0.75rem; }
    .topbar__origin { order: 1; }
    .topbar__link   { order: 2; }
    .topbar__rating { order: 3; margin-left: auto; box-shadow: none; padding-right: 0; }
}
@media (max-width: 460px) {
    .topbar__inner { justify-content: flex-start; }
    .topbar__origin { font-size: 0.8125rem; }
}

/* --- Header: shorter bar, smaller mark, a phone icon you can actually see - */
@media (max-width: 700px) {
    :root { --head-h: 62px; }
    .site-head.is-stuck .site-head__inner { height: 54px; }
    .brand svg, .brand img { height: 32px; }
    .site-head.is-stuck .brand svg,
    .site-head.is-stuck .brand img { height: 26px; }
    .head-aside { gap: 0.5rem; }
}
@media (max-width: 560px) {
    /* It had been left white on paper, which is to say invisible. */
    .head-phone__ico { color: var(--brand); width: 1.6rem; height: 1.6rem; }
    .head-phone { box-shadow: none; }
}

/* --- Home hero: as much of it above the fold as the words allow ----------- */
@media (max-width: 700px) {
    .hero { --hero-pad: 1.1rem; }
    .hero__grid { gap: 1.25rem; padding-bottom: 1.5rem; }

    /* The languages line. The flags lead on a wide screen, but in a phone
       column the sentence has to wrap, and wrapping it in the narrow gutter
       beside the flags left a ragged block. The flags go last here, so the
       sentence gets the full width and they sit under it, or beside it where
       there is room. */
    .trustline--lead {
        font-size: 0.8125rem;
        line-height: 1.35;
        flex-wrap: wrap;
        gap: 0.45em 0.55em;
        margin-bottom: 0.9rem;
    }
    .trustline--lead .trustline__long  { display: none; }
    .trustline--lead .trustline__short { display: inline; }
    .trustline--lead .flagset { order: 2; gap: 0.18em; }
    .trustline--lead .flagset svg { width: 15px; height: 10.5px; }

    /* The measure and the balancing both fight the column here: they pulled
       the heading in short of the body underneath, which read as a mistake.
       Let it run to the same edge as everything else. */
    .hero__title {
        font-size: clamp(1.7rem, 1.1rem + 3.4vw, 2.3rem);
        margin-bottom: 0.7rem;
        max-width: none;
        text-wrap: pretty;
    }
    .hero__body { font-size: var(--step-0); line-height: 1.45; margin-bottom: 1rem; }
    .claims { margin-bottom: 1.1rem; }
    .claims li { padding: 0.6em 0; font-size: var(--step--1); }
    .hero__actions { gap: 0.6rem; margin-bottom: 1rem; }
    .gproof { padding-block: 0.9rem; }
}

/* --- Footer: brand, then how to reach us, then the two lists side by side - */
@media (max-width: 759px) {
    .foot__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-6) var(--sp-5);
    }
    .foot__grid > *:nth-child(1) { grid-column: 1 / -1; order: 1; }
    .foot__grid > *:nth-child(4) { grid-column: 1 / -1; order: 2; }
    .foot__grid > *:nth-child(2) { order: 3; }
    .foot__grid > *:nth-child(3) { order: 4; }

    .foot__brand svg, .foot__brand img { height: 40px; margin-bottom: var(--sp-4); }
    .foot__desc { margin-bottom: var(--sp-4); }
    .foot__title { margin-bottom: var(--sp-3); }

    .foot__base {
        margin-top: var(--sp-6);
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: var(--sp-3);
    }
}

/* --- The fixed action bar, phones only ----------------------------------- */

/* Not rendered at all above the breakpoint, so nothing here can leak onto a
   desktop layout. */
.mobar { display: none; }

@media (max-width: 900px) {
    :root { --mobar-h: 92px; }

    .mobar {
        display: block;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        /* Above the floating buttons, below the full-screen menu and the
           sticky header, so opening the menu covers it. */
        z-index: 860;
        background: var(--ink-deep);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -20px 44px -26px rgba(0, 0, 0, 0.9);
    }

    /* The score sits above the actions: the reason to press, then the press. */
    .mobar__proof {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.45em;
        height: 30px;
        background: rgba(255, 255, 255, 0.055);
        box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
        font-family: var(--font-body);
        font-size: 0.75rem;
        line-height: 1;
        color: rgba(255, 255, 255, 0.72);
        text-decoration: none;
        white-space: nowrap;
    }
    .mobar__gmark { display: grid; place-items: center; flex: none; }
    .mobar__gmark .ico { width: 0.95rem; height: 0.95rem; }
    .mobar__score { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
    .mobar__proof .stars { display: inline-flex; gap: 0.08em; }
    .mobar__proof .stars .ico { width: 0.72rem; height: 0.72rem; color: var(--amber); }
    .mobar__count { color: rgba(255, 255, 255, 0.5); }
    /* The whole lockup measures about 240px, so it holds on any current phone.
       Only the very narrowest drop the count. */
    @media (max-width: 330px) { .mobar__count { display: none; } }

    .mobar__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mobar__btn {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        display: grid;
        place-items: center;
        align-content: center;
        gap: 0.3rem;
        min-height: 62px;
        padding: 0.55rem 0.35rem 0.6rem;
        font-family: var(--font-body);
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1.1;
        text-align: center;
        text-decoration: none;
        color: var(--on-brand);
    }
    .mobar__btn .ico { width: 1.3rem; height: 1.3rem; }
    .mobar__btn span { display: block; }

    /* The one button in the row that is not a brand fill, so it takes the
       other foreground. */
    .mobar__btn--areas { background: var(--ink); color: var(--on-ink); }
    .mobar__btn--call  { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%); }
    .mobar__btn--wa    { background: #25D366; }

    /* Pressed states rather than hover: this only exists on touch. */
    /* --ink-soft rather than black: on a palette that puts light type on a
       dark page --ink is the light one, and a black plate under --on-ink would
       press to dark-on-dark. --ink-soft always steps off --ink, whichever way
       round the palette runs. */
    .mobar__btn--areas:active { background: var(--ink-soft); }
    .mobar__btn--call:active  { background: var(--brand-deep); }
    .mobar__btn--wa:active    { background: #1FB855; }
    .mobar__btn:active .ico   { transform: scale(0.94); }

    /* The same slow sheen the header's call button carries on desktop. */
    .mobar__btn--call::after {
        content: "";
        position: absolute;
        top: 0; bottom: 0;
        left: -70%;
        width: 45%;
        background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.32) 50%, rgba(255,255,255,0) 100%);
        transform: skewX(-18deg);
        animation: headphone-sheen 5.5s var(--ease) infinite;
        pointer-events: none;
        z-index: -1;
    }

    /* The bar carries the call and WhatsApp actions now, so the floating pair
       stands down and only "back to top" is left, lifted clear of the bar. */
    .fab--phone,
    .fab--whatsapp { display: none; }
    .fabs { bottom: calc(var(--mobar-h) + env(safe-area-inset-bottom, 0px) + 1.5rem); }

    /* Room under the last line of the footer, so the copyright and the legal
       links are not sitting behind the bar at the bottom of the page. */
    .site-foot { padding-bottom: calc(var(--sp-6) + var(--mobar-h) + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
    .mobar__btn--call::after { animation: none; }
}