/* ==========================================================================
   Zilwinx — Public Website Stylesheet
   Standalone: the public site does not load Bootstrap. The admin panel keeps
   its own Bootstrap CDN, so the two never share styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand — a near-black neutral ground with a deep teal accent.
       #111113 and #026e60 are the two given colours; the rest of each ramp is
       derived from them.

       #111113 alone does four jobs at four depths (top bar, hero and page
       heads, .section-deep, footer). Using one value for all of them merges the
       top bar, header and hero into a single slab, so the ramp keeps a step
       between them — the differences are small but they hold the page's
       structure together. */
    --brand-900: #0b0b0c;
    --brand-800: #111113;   /* given */
    --brand-700: #1c1c20;
    --brand-600: #2a2a30;

    /* The accent is dark, so it cannot do the same work at both ends. 500/600
       are the given colour, for accent-on-light. 300/400 are lighter tints of
       the same hue, for accent-on-dark, where #026e60 only reaches 3.06:1
       against #111113 and fails as text. */
    --accent-300: #3dc9b2;  /* on dark — 9.16:1 on #111113 */
    --accent-400: #0e9c88;  /* on dark — 5.50:1 on #111113 */
    --accent-500: #026e60;  /* given  — 6.17:1 on white, and with white on it */
    --accent-600: #026e60;  /* given */
    --accent-700: #01564b;  /* on light — 8.63:1 on white */

    /* Channel lists for rgba() tints. Dark surfaces tint with the light accent:
       a 12% wash of #026e60 over near-black is invisible. */
    --brand-rgb: 17, 17, 19;
    --accent-rgb: 2, 110, 96;
    --accent-light-rgb: 61, 201, 178;

    /* Legacy aliases. The palette moved from navy/gold to the logo's
       teal/cyan, but the class names across the site still read navy/gold —
       these keep every existing rule on the new brand without a rename. */
    --navy-900: var(--brand-900);
    --navy-800: var(--brand-800);
    --navy-700: var(--brand-700);
    --navy-600: var(--brand-600);
    --gold-500: var(--accent-500);
    --gold-400: var(--accent-400);
    --gold-600: var(--accent-700);

    /* Neutrals. The ground is achromatic now, so these drop their green cast
       and carry only a trace of the accent hue. */
    --ink: #17191a;
    --body: #4d5654;
    /* #78908b measured 3.41:1 on white — below the 4.5:1 AA floor. This is
       5.02:1 at the same hue, and carries .text-muted across every card. */
    --muted: #626d6b;
    --line: #e2e7e6;
    --surface: #ffffff;
    --surface-alt: #00000017;
    --surface-deep: #e6eeed;

    /* Feedback */
    --danger: #c0392b;
    --success: #1e7d5a;

    /* Typography */
    --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Spacing scale */
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;

    /* Shape */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;

    --shadow-sm: 0 1px 2px rgba(var(--brand-rgb), .06), 0 2px 8px rgba(var(--brand-rgb), .05);
    --shadow: 0 4px 12px rgba(var(--brand-rgb), .08), 0 12px 32px rgba(var(--brand-rgb), .07);
    --shadow-lg: 0 12px 28px rgba(var(--brand-rgb), .12), 0 28px 60px rgba(var(--brand-rgb), .10);

    --wrap: 1180px;
    --topbar-h: 40px;
    --header-h: 76px;
    --ease: cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Keep anchor targets clear of the sticky header. */
    scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--body);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--navy-700); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--gold-600); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--ink);
    margin: 0 0 var(--sp-4);
    line-height: 1.22;
    font-weight: 700;
}

h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
h4 { font-size: 1.15rem; }
h5 { font-size: 1.02rem; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }
li { margin-bottom: var(--sp-2); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }

/* Visible focus for keyboard users, suppressed for mouse clicks. */
:focus-visible {
    outline: 3px solid var(--accent-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* The base accent is dark, so on the near-black sections the outline would all
   but vanish. These are every dark surface on the site; they get the light
   accent instead (9.16:1 against #111113). */
.topbar :focus-visible,
.hero :focus-visible,
.page-head :focus-visible,
.section-deep :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible {
    outline-color: var(--accent-300);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--navy-800);
    color: #fff;
    padding: var(--sp-3) var(--sp-5);
    z-index: 200;
}
.skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--sp-5);
}

.wrap-narrow { max-width: 800px; }

.section { padding: var(--sp-9) 0; }
.section-sm { padding: var(--sp-8) 0; }
.section-alt { background: var(--surface-alt); }
.section-deep { background: var(--navy-800); color: rgba(255, 255, 255, .82); }
.section-deep h2, .section-deep h3, .section-deep h4 { color: #fff; }

.section-head {
    max-width: 680px;
    margin: 0 auto var(--sp-7);
    text-align: center;
}
.section-head.left { margin-inline: 0; text-align: left; }
.section-head p { color: var(--muted); font-size: 1.05rem; margin-bottom: 0; }

.eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-600);
    margin-bottom: var(--sp-3);
}
/* Every dark surface. .page-head was missing here: its eyebrow fell back to the
   light-surface accent and measured 2.19:1 against the near-black ground. */
.section-deep .eyebrow,
.page-head .eyebrow,
.cta-band .eyebrow,
.hero .eyebrow { color: var(--accent-400); }

/* Gold rule under a heading — the "classic" detail. */
.rule::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    background: var(--gold-500);
    margin: var(--sp-4) auto 0;
}
.section-head.left .rule::after, .rule.left::after { margin-inline: 0; }

/* Grid ------------------------------------------------------------------- */

/* Grid items default to min-width:auto, so a wide child (a <pre> block, a long
   unbroken string) stretches its track past the viewport instead of scrolling
   inside its own container. min-width:0 lets overflow:auto actually work. */
.grid > *, .split > *, .split-side > * { min-width: 0; }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-gap-lg { gap: var(--sp-6); }

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
    align-items: center;
}
.split-wide { grid-template-columns: 1.15fr .85fr; }

/* Used on its own (form pages, article + sidebar), so it declares its own grid
   rather than relying on .split being present too. */
.split-side {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--sp-7);
    align-items: start;
}

/* Sidebar on the right instead of the left (article pages). Must be a class,
   never an inline style — an inline style outranks the media queries below and
   would stop the layout collapsing on mobile. */
.split-side-rev { grid-template-columns: 1fr 300px; }

/* The aside is usually much shorter than the form or article beside it, which
   left a tall dead column. Sticking it keeps it in view instead. Released back
   to static flow at the breakpoint where the columns stack. */
.split-side > aside,
.split-side > .side-sticky {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-5));
}

.stack > * + * { margin-top: var(--sp-4); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1;
    padding: .85rem 1.6rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: center;
    transition: background .18s var(--ease), color .18s var(--ease),
                border-color .18s var(--ease), transform .18s var(--ease),
                box-shadow .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--navy-800); color: #fff; }
.btn-primary:hover { background: var(--navy-700); color: #fff; box-shadow: var(--shadow); }

/* White label, not the near-black one this carried when the accent was bright
   cyan: #111113 on #026e60 is 3.06:1, white on it is 6.17:1. The hover steps to
   the lighter accent, which takes the dark label back. */
.btn-gold { background: var(--accent-500); color: #fff; }
.btn-gold:hover { background: var(--accent-400); color: var(--brand-900); box-shadow: var(--shadow); }

.btn-outline { background: transparent; color: var(--navy-800); border-color: var(--line); }
.btn-outline:hover { border-color: var(--navy-800); color: var(--navy-800); background: var(--surface-alt); }

.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }

.btn-light { background: #fff; color: var(--navy-800); }
.btn-light:hover { background: var(--surface-alt); color: var(--navy-800); box-shadow: var(--shadow); }

.btn-lg { padding: 1.05rem 2.1rem; font-size: 1rem; }
.btn-sm { padding: .6rem 1.1rem; font-size: .85rem; }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btn-row.center { justify-content: center; }

/* Text link with a moving arrow. */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: 600;
    font-size: .92rem;
    color: var(--navy-700);
}
.link-arrow i { transition: transform .18s var(--ease); }
.link-arrow:hover i { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. Top bar, header & navigation
   -------------------------------------------------------------------------- */

/* Utility strip above the header: phone and email always one tap away.
   Deliberately not sticky — it scrolls away and leaves the header on top. */
.topbar {
    background: var(--brand-900);
    color: rgba(255, 255, 255, .8);
    font-size: .84rem;
    border-bottom: 1px solid rgba(var(--accent-light-rgb), .22);
}
.topbar .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: var(--topbar-h);
    flex-wrap: wrap;
}

.topbar-contact {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}
.topbar-contact li { margin: 0; }

.topbar-contact a,
.topbar-meta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: rgba(255, 255, 255, .82);
    white-space: nowrap;
}
.topbar-contact a:hover { color: var(--accent-300); }
.topbar-contact i,
.topbar-meta i { color: var(--accent-400); font-size: .82rem; }

.topbar-aside { display: flex; align-items: center; gap: var(--sp-5); }

/* Separator between the strip's own links on narrow screens. */
.topbar-divider {
    display: block;
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, .24);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--accent-500);
}

.site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    min-height: var(--header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.01em;
    flex-shrink: 0;
}
.brand:hover { color: var(--ink); }
.brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: linear-gradient(140deg, var(--navy-700), var(--navy-900));
    color: var(--gold-400);
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}
/* Uploaded logo. Capped so a large upload cannot stretch the header. */
.brand-logo {
    max-height: 80px;
    max-width: 220px;
    width: auto;
    object-fit: contain;
}
.site-footer .brand-logo { max-height: 80px; }
/* An uploaded logo has a dark wordmark drawn for a light page, so on the
   near-black footer it sits on a light plate rather than vanishing. The plate
   is padding, so the height cap is lowered to keep the total near 80px. */
.brand-logo-plate {
    background: #fff;
    border-radius: 10px;
    padding: 8px 14px;
    box-sizing: content-box;
}
.site-footer .brand-logo.brand-logo-plate { max-height: 56px; }

.brand small {
    display: block;
    font-family: var(--font-body);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 2px;
}

.nav { display: flex; align-items: center; gap: var(--sp-2); }
.nav-list {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-list > li { margin: 0; position: relative; }

/* The nav speaks the site's label voice — the same uppercase, tracked, 600
   treatment .eyebrow uses above every section heading — so the header reads as
   part of the type system rather than as default body copy. */
.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: .62rem .72rem;
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--body);
    white-space: nowrap;
    transition: color .18s var(--ease);
}

/* A rule that wipes in from the left, replacing the background pill the links
   used to get on hover — that read as a button and fought with the CTA beside
   it. The same rule is what marks the current page, so hover is a preview of
   the active state rather than a different idea. */
.nav-link::after {
    content: "";
    position: absolute;
    left: .72rem;
    right: .72rem;
    bottom: .26rem;
    height: 2px;
    background: var(--accent-500);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .24s var(--ease);
}

.nav-link:hover { color: var(--ink); }
.nav-link:hover::after,
.has-drop:hover > .nav-link::after { transform: scaleX(1); }

.nav-link.active { color: var(--ink); }
.nav-link.active::after { transform: scaleX(1); }

/* Dropdown (Services, Programs) ------------------------------------------- */
/* Scaled down with the smaller nav type so the chevron stays a hint rather
   than competing with the label. */
.has-drop > .nav-link i { font-size: .62rem; transition: transform .18s var(--ease); }
.has-drop:hover > .nav-link i { transform: rotate(180deg); }

.drop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 250px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-2);
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.has-drop:hover .drop,
.has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: translateY(0); }
.drop li { margin: 0; }
/* Menu items stay sentence case: these are service and programme names, some
   of them admin-entered, and tracking them out like the top level would hurt
   reading rather than help it. */
.drop a {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: .6rem .75rem;
    border-radius: var(--radius-sm);
    font-size: .88rem;
    font-weight: 500;
    color: var(--body);
    transition: background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
}
.drop a:hover { background: var(--surface-alt); color: var(--ink); transform: translateX(3px); }
.drop a i { color: var(--gold-600); width: 18px; text-align: center; }

.nav-cta { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }

.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    width: 44px;
    height: 44px;
    cursor: pointer;
    color: var(--ink);
    font-size: 1.1rem;
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
/* Flat brand fill — no gradient. Depth comes from the grid texture instead. */
.hero {
    position: relative;
    isolation: isolate;
    background: var(--brand-800);
    color: rgba(255, 255, 255, .84);
    padding: calc(var(--sp-9) + .5rem) 0 var(--sp-9);
    overflow: hidden;
}

/* Hairline of brand light where the hero meets the next section. */
.hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(var(--accent-light-rgb), .32);
}

/* Decorative layer. Purely presentational, marked aria-hidden in the markup. */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

/* Engineering grid texture, ruled evenly across the flat fill. The 1px hairlines
   are drawn with linear-gradient because that is how CSS paints a repeating
   rule — the fill underneath stays a single flat colour. */
.hero-lines {
    position: absolute;
    /* -1px top and bottom only: it hides the seam where the grid meets the
       section edge. A negative left/right would push 1px past the viewport and
       give the whole page a horizontal scrollbar. */
    inset: -1px 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 64px 64px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: var(--sp-8);
    align-items: center;
}

/* Copy column ------------------------------------------------------------- */
/* Scoped to .hero so it outranks the `.hero .eyebrow` colour above. */
.hero .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .42rem 1rem .42rem .72rem;
    border-radius: 999px;
    background: rgba(var(--accent-light-rgb), .11);
    border: 1px solid rgba(var(--accent-light-rgb), .3);
    color: var(--accent-300);
    margin-bottom: var(--sp-5);
    backdrop-filter: blur(4px);
}
.hero .hero-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-400);
    box-shadow: 0 0 0 4px rgba(var(--accent-light-rgb), .16);
    flex-shrink: 0;
}

.hero h1 {
    color: #fff;
    font-size: clamp(2.2rem, 4.7vw, 3.7rem);
    line-height: 1.08;
    letter-spacing: -.022em;
    margin-bottom: var(--sp-5);
}

/* Accent word in the headline — flat cyan, no gradient fill. */
.hero-accent { color: var(--accent-300); }

.hero p.lead {
    font-size: 1.12rem;
    max-width: 34rem;
    color: rgba(255, 255, 255, .78);
    margin-bottom: var(--sp-6);
}
.hero .btn-row { margin-bottom: var(--sp-7); }
.hero .btn-gold { box-shadow: 0 10px 26px rgba(var(--accent-light-rgb), .28); }
.hero .btn-gold:hover { box-shadow: 0 14px 34px rgba(var(--accent-light-rgb), .40); }

.hero-trust {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    padding-top: var(--sp-5);
    border-top: 1px solid rgba(255, 255, 255, .14);
}
/* Dividers via border rather than gap, so the rule sits midway between stats. */
.hero-trust > div {
    padding-right: var(--sp-6);
    margin-right: var(--sp-6);
    border-right: 1px solid rgba(255, 255, 255, .2);
}
.hero-trust > div:last-child { padding-right: 0; margin-right: 0; border-right: 0; }
.hero-trust div strong {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 2.6vw, 2.05rem);
    color: #fff;
    line-height: 1;
    margin-bottom: 5px;
}
.hero-trust div span { font-size: .8rem; letter-spacing: .03em; color: rgba(255, 255, 255, .62); }

/* Panel column ------------------------------------------------------------ */
/* Flat translucent fill and a single flat accent hairline — no gradient. */
.hero-panel {
    position: relative;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(var(--accent-light-rgb), .28);
    border-radius: 20px;
    padding: var(--sp-6);
    backdrop-filter: blur(10px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.hero-panel-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.hero-panel-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    /* Lighter accent here: the tile sits on the near-black hero, where the base
       accent would barely separate from the panel behind it. */
    background: var(--accent-400);
    color: var(--brand-900);
    font-size: .92rem;
    flex-shrink: 0;
}
.hero-panel h4 {
    color: #fff;
    margin: 0;
    font-family: var(--font-body);
    font-size: .9rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
}

.hero-panel ul { list-style: none; padding: 0; margin: 0; }
.hero-panel li {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    padding: .72rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-size: .93rem;
    color: rgba(255, 255, 255, .86);
    transition: transform .18s var(--ease), color .18s var(--ease);
}
.hero-panel li:last-child { border-bottom: 0; padding-bottom: 0; }
.hero-panel li:hover { transform: translateX(4px); color: #fff; }

.hero-tick {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .6rem;
    background: rgba(var(--accent-light-rgb), .15);
    border: 1px solid rgba(var(--accent-light-rgb), .34);
    color: var(--accent-300);
    flex-shrink: 0;
    transition: background .18s var(--ease), color .18s var(--ease);
}
.hero-panel li:hover .hero-tick { background: var(--accent-400); color: var(--brand-900); }

/* Inner page header ------------------------------------------------------- */
/* Same flat fill and grid texture as the home hero, so the two read as one
   system. The texture is painted here rather than in the markup because every
   inner page shares this one block. */
.page-head {
    position: relative;
    isolation: isolate;
    background: var(--brand-800);
    color: rgba(255, 255, 255, .8);
    padding: var(--sp-8) 0 var(--sp-7);
    text-align: center;
}
.page-head::before {
    content: "";
    position: absolute;
    /* -1px top and bottom only: it hides the seam where the grid meets the
       section edge. A negative left/right would push 1px past the viewport and
       give the whole page a horizontal scrollbar. */
    inset: -1px 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 64px 64px;
}
.page-head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(var(--accent-light-rgb), .32);
}
.page-head h1 { color: #fff; margin-bottom: var(--sp-3); }
.page-head p { max-width: 640px; margin: 0 auto; color: rgba(255, 255, 255, .76); }

.crumb {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    list-style: none;
    padding: 0;
    margin: var(--sp-4) 0 0;
    font-size: .85rem;
    color: rgba(255, 255, 255, .6);
}
.crumb li { margin: 0; }
.crumb a { color: rgba(255, 255, 255, .82); }
.crumb a:hover { color: var(--gold-400); }
.crumb li + li::before { content: "/"; margin-right: var(--sp-2); color: rgba(255, 255, 255, .4); }

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--sp-6);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card-hover:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card h3, .card h4 { margin-bottom: var(--sp-3); }
.card p { font-size: .94rem; }
.card .link-arrow { margin-top: auto; padding-top: var(--sp-4); }

.card-icon {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: linear-gradient(140deg, rgba(var(--brand-rgb), .10), rgba(var(--accent-rgb), .22));
    color: var(--brand-800);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    margin-bottom: var(--sp-4);
    flex-shrink: 0;
}

/* Numbered "why us" cards. */
.card-num {
    font-family: var(--font-display);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--gold-500);
    margin-bottom: var(--sp-3);
}

/* Media card: image on top (portfolio, blog). */
.card-media { padding: 0; overflow: hidden; }
.card-media .thumb {
    aspect-ratio: 16 / 10;
    background: linear-gradient(140deg, var(--navy-700), var(--navy-900));
    display: grid;
    place-items: center;
    color: var(--gold-400);
    font-size: 2.4rem;
    position: relative;
}
.card-media .thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Logo thumbnail: shown whole, centred on a light panel, never cropped. */
.card-media .thumb.thumb-logo { background: var(--surface-alt); border-bottom: 1px solid var(--surface-deep); }
.card-media .thumb.thumb-logo img { object-fit: contain; padding: var(--sp-6) var(--sp-5); }
.card-media .card-body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }

.thumb-tag {
    position: absolute;
    top: var(--sp-3);
    left: var(--sp-3);
    background: rgba(var(--brand-rgb), .88);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .3rem .65rem;
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   8. Chips, badges, meta
   -------------------------------------------------------------------------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .78rem;
    font-weight: 500;
    padding: .28rem .65rem;
    border-radius: 999px;
    background: var(--surface-deep);
    color: var(--body);
    border: 1px solid var(--line);
    /* No nowrap: chips also carry sentence-length service offerings, which
       would otherwise force horizontal overflow in a narrow grid column.
       Short chips still sit on one line because they fit. */
    max-width: 100%;
}
.chip-gold { background: rgba(var(--accent-rgb), .14); border-color: rgba(var(--accent-rgb), .40); color: var(--accent-700); }
.chip-navy { background: rgba(var(--brand-rgb), .07); border-color: rgba(var(--brand-rgb), .16); color: var(--brand-800); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    font-size: .84rem;
    color: var(--muted);
}
.meta span { display: inline-flex; align-items: center; gap: 6px; }
.meta i { color: var(--gold-600); }

/* Tech pill list. */
.tech-list { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; list-style: none; padding: 0; margin: 0; }
.tech-list li { margin: 0; }
.tech-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    width: 118px;
    padding: var(--sp-4) var(--sp-2);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: .82rem;
    font-weight: 500;
    color: var(--body);
    transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.tech-pill:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: var(--navy-800); }
.tech-pill i { font-size: 1.7rem; color: var(--navy-700); }

/* --------------------------------------------------------------------------
   9. Lists
   -------------------------------------------------------------------------- */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
    position: relative;
    padding-left: 1.9rem;
    margin-bottom: var(--sp-3);
    font-size: .95rem;
}
.check-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: .1rem;
    color: var(--gold-600);
    font-size: .82rem;
}
.check-list.light li { color: rgba(255, 255, 255, .82); }
.check-list.light li::before { color: var(--gold-400); }

.def-list { margin: 0; }
.def-list div {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--line);
    font-size: .92rem;
}
.def-list div:last-child { border-bottom: 0; }
.def-list dt { color: var(--muted); margin: 0; }
.def-list dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; }

/* Numbered process steps. */
.steps { counter-reset: step; display: grid; gap: var(--sp-5); }
.step { position: relative; padding-left: 4.2rem; }
.step::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    width: 3rem;
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--gold-500);
    border-right: 2px solid var(--line);
    padding-right: var(--sp-4);
    text-align: right;
    line-height: 1.4;
}
.step h4 { margin-bottom: var(--sp-2); }
.step p { font-size: .92rem; margin: 0; }

/* --------------------------------------------------------------------------
   10. Testimonials
   -------------------------------------------------------------------------- */
.quote {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--sp-6);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}
.quote::before {
    content: "\201C";
    font-family: var(--font-display);
    position: absolute;
    top: .2rem;
    right: var(--sp-5);
    font-size: 5rem;
    line-height: 1;
    color: rgba(var(--accent-rgb), .26);
}
.quote p { font-size: .96rem; position: relative; z-index: 1; }
.stars { color: var(--gold-500); font-size: .85rem; margin-bottom: var(--sp-3); letter-spacing: 2px; }

.who { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-5); }
.avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--navy-700), var(--navy-900));
    color: var(--gold-400);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 1.05rem;
    flex-shrink: 0;
}
img.avatar { object-fit: cover; }
.who strong { display: block; color: var(--ink); font-size: .92rem; }
.who span { font-size: .82rem; color: var(--muted); }

/* The initials avatar is a span inside .who, so `.who span` above outranks
   `.avatar` and was repainting it muted grey at the smaller size — 3.67:1 on
   the dark disc. Restated at equal specificity so the avatar's own styling wins. */
.who .avatar { color: var(--accent-300); font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   11. Stats & CTA band
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.stat { text-align: center; padding: var(--sp-5) var(--sp-3); }
.stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    color: var(--navy-800);
    line-height: 1;
    margin-bottom: var(--sp-2);
}
.section-deep .stat strong { color: var(--gold-400); }
.stat span { font-size: .86rem; color: var(--muted); }
.section-deep .stat span { color: rgba(255, 255, 255, .7); }

.cta-band {
    background:
        radial-gradient(700px 300px at 15% 110%, rgba(var(--accent-light-rgb), .26), transparent 60%),
        linear-gradient(120deg, var(--brand-800), var(--brand-600));
    border-radius: var(--radius-lg);
    padding: var(--sp-8);
    color: rgba(255, 255, 255, .84);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-6);
    align-items: center;
}
.cta-band h2 { color: #fff; margin-bottom: var(--sp-3); }
.cta-band p { margin: 0; color: rgba(255, 255, 255, .78); }

/* --------------------------------------------------------------------------
   12. Forms
   -------------------------------------------------------------------------- */
.form-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--sp-7);
    box-shadow: var(--shadow-sm);
}

.field { margin-bottom: var(--sp-5); }
.field label {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--sp-2);
}
.field .req { color: var(--danger); }
.field .hint { display: block; font-size: .8rem; color: var(--muted); margin-top: var(--sp-2); }

.control {
    display: block;
    width: 100%;
    font-family: inherit;
    font-size: .95rem;
    color: var(--ink);
    background: #fff;
    padding: .8rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.control::placeholder { color: #9aa5a3; }
.control:focus {
    outline: none;
    border-color: var(--navy-600);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .16);
}
textarea.control { min-height: 140px; resize: vertical; }
select.control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237a8798'%3E%3Cpath d='M8 11 3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 14px;
    padding-right: 2.5rem;
}

/* Native file input restyled to match .control. */
.control[type="file"] { padding: .55rem 1rem; }
.control[type="file"]::file-selector-button {
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
    color: var(--navy-800);
    background: var(--surface-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .45rem .9rem;
    margin-right: var(--sp-4);
    cursor: pointer;
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.field-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }

.consent { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: .88rem; }
.consent input { margin-top: .35rem; flex-shrink: 0; }

.note {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-radius: var(--radius-sm);
    font-size: .88rem;
    background: rgba(var(--accent-rgb), .10);
    border: 1px solid rgba(var(--accent-rgb), .34);
    color: var(--accent-700);
    margin-bottom: var(--sp-5);
}
.note i { margin-top: .2rem; }
/* Form feedback after a submission. */
.note-success { background: rgba(30, 125, 90, .1); border-color: rgba(30, 125, 90, .3); color: #14563d; }
.note-error { background: rgba(192, 57, 43, .08); border-color: rgba(192, 57, 43, .3); color: #8e2c21; }
.control-error { border-color: var(--danger); }
.field .hint-error { color: var(--danger); }

/* --------------------------------------------------------------------------
   13. Contact blocks
   -------------------------------------------------------------------------- */
.contact-item { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.contact-item i {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(var(--accent-rgb), .16);
    color: var(--accent-700);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.contact-item strong { display: block; color: var(--ink); font-size: .92rem; margin-bottom: 2px; }
.contact-item span, .contact-item a { font-size: .92rem; color: var(--body); }

.map-frame {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    line-height: 0;
    background: var(--surface-alt);
}
.map-frame iframe { width: 100%; height: 380px; border: 0; }

/* --------------------------------------------------------------------------
   14. Filter bar (portfolio / blog)
   -------------------------------------------------------------------------- */
.filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-7);
}
.filter-btn {
    font-family: inherit;
    font-size: .88rem;
    font-weight: 500;
    padding: .55rem 1.15rem;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--body);
    border-radius: 999px;
    cursor: pointer;
    transition: all .18s var(--ease);
}
.filter-btn:hover { border-color: var(--navy-600); color: var(--navy-800); }
.filter-btn.active { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

.is-hidden { display: none !important; }

/* --------------------------------------------------------------------------
   15. Article body (blog post)
   -------------------------------------------------------------------------- */
.article-body { font-size: 1.03rem; }
.article-body h2 { margin-top: var(--sp-7); }
.article-body h3 { margin-top: var(--sp-6); }
.article-body ul, .article-body ol { padding-left: 1.4rem; }
.article-body blockquote {
    margin: var(--sp-6) 0;
    padding: var(--sp-5) var(--sp-6);
    border-left: 3px solid var(--gold-500);
    background: var(--surface-alt);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--ink);
}
.article-body code {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: .88em;
    background: var(--surface-deep);
    padding: .15rem .4rem;
    border-radius: 4px;
    color: var(--navy-800);
}
.article-body pre {
    background: var(--navy-900);
    color: #dfe6f0;
    padding: var(--sp-5);
    border-radius: var(--radius);
    overflow-x: auto;
    font-size: .88rem;
}
.article-body pre code { background: none; color: inherit; padding: 0; }

.sidebar-card {
    background: var(--surface-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--sp-5);
    margin-bottom: var(--sp-5);
}
.sidebar-card h4 { font-size: 1rem; margin-bottom: var(--sp-4); }
.sidebar-list { list-style: none; padding: 0; margin: 0; }
.sidebar-list li { margin: 0; border-bottom: 1px solid var(--line); }
.sidebar-list li:last-child { border-bottom: 0; }
.sidebar-list a { display: block; padding: var(--sp-3) 0; font-size: .9rem; color: var(--body); }
.sidebar-list a:hover { color: var(--navy-800); }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
/* Same grid texture as the hero and page heads, closing the page the way it
   opened. The alpha is lower than theirs because the footer sits on the darker
   --brand-900, where a white hairline reads stronger for the same opacity. */
.site-footer {
    position: relative;
    isolation: isolate;
    background: var(--brand-900);
    color: rgba(255, 255, 255, .62);
    padding: var(--sp-8) 0 var(--sp-5);
}
.site-footer::before {
    content: "";
    position: absolute;
    /* -1px top and bottom only: it hides the seam where the grid meets the
       section edge. A negative left/right would push 1px past the viewport and
       give the whole page a horizontal scrollbar. */
    inset: -1px 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 64px 64px;
}
.site-footer h4 {
    color: #fff;
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: var(--sp-4);
}
.site-footer .brand { color: #fff; margin-bottom: var(--sp-4); }
.site-footer .brand:hover { color: #fff; }
.site-footer p { font-size: .9rem; }

.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--sp-7); }
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: var(--sp-2); }
.footer-list a { font-size: .9rem; color: rgba(255, 255, 255, .62); }
.footer-list a:hover { color: var(--gold-400); }

.socials { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.socials a {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .8);
    display: grid;
    place-items: center;
    transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.socials a:hover { background: var(--accent-400); color: var(--brand-900); transform: translateY(-2px); }

.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li { display: flex; gap: var(--sp-3); font-size: .9rem; margin-bottom: var(--sp-3); }
.footer-contact i { color: var(--accent-400); margin-top: .3rem; flex-shrink: 0; }
/* The phone and email links had no colour of their own, so they inherited the
   global dark link colour and sat at 1.16:1 on the near-black footer. */
.footer-contact a { color: rgba(255, 255, 255, .72); }
.footer-contact a:hover { color: var(--accent-300); }

.footer-base {
    margin-top: var(--sp-7);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--accent-500);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3);
    font-size: .85rem;
}
.footer-base a { color: rgba(255, 255, 255, .62); }
.footer-base a:hover { color: var(--gold-400); }

/* --------------------------------------------------------------------------
   17. Utilities
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-muted { color: var(--muted); }

/* --------------------------------------------------------------------------
   Team cards (About page)
   -------------------------------------------------------------------------- */
.team-photo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto var(--sp-4);
    display: block;
    border: 3px solid var(--surface-deep);
}

/* Fallback when a member has no photo: their initial on the brand tint, the
   same treatment the testimonial avatars use. */
.team-initial {
    display: grid;
    place-items: center;
    background: rgba(var(--accent-rgb), .10);
    color: var(--accent-700);
    font-family: var(--font-display);
    font-size: 2.2rem;
    line-height: 1;
}

.team-role {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent-700);
    margin: var(--sp-2) 0 var(--sp-3);
}

.team-links {
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: auto;
    padding-top: var(--sp-4);
}
.team-links a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface-alt);
    color: var(--accent-700);
    font-size: .85rem;
    transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.team-links a:hover {
    background: var(--accent-500);
    color: #fff;
    transform: translateY(-2px);
}

/* Empty state — shown where a data-driven grid has nothing to render. Replaces
   an earlier block that leaned on Bootstrap utilities; the public site does not
   load Bootstrap, so those classes did nothing. */
.empty-state {
    text-align: center;
    padding: var(--sp-8) var(--sp-5);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: var(--surface-alt);
}
.empty-state i {
    font-size: 2rem;
    color: var(--muted);
    opacity: .6;
    margin-bottom: var(--sp-4);
    display: block;
}
.empty-state p { color: var(--muted); margin-bottom: var(--sp-5); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.w-full { width: 100%; }

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    :root { --sp-9: 4.5rem; --sp-8: 3rem; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
    .hero-grid, .split, .split-wide { grid-template-columns: 1fr; gap: var(--sp-6); }
    .split-side { grid-template-columns: 1fr; }
    .split-side > aside, .split-side > .side-sticky { position: static; }
    .cta-band { grid-template-columns: 1fr; text-align: center; }
    .cta-band .btn-row { justify-content: center; }
}

/* 1120px. The header is brand (220) + nav (≈659) + CTA (136) ≈ 1015px, and
   .wrap takes 48px of padding, so the full nav needs about 1063px of viewport.
   Collapsing any later than that overflows horizontally.

   This moved up from 1060px when the nav went uppercase: tracking widened the
   list from 613px to 659px, which was enough to push the header over at 1061px.
   Re-measure this if the nav gains an item or the type changes again, and keep
   the breakpoint in website.js in sync with it. */
@media (max-width: 1120px) {
    /* backdrop-filter creates a containing block and its own paint layer, which
       interferes with the drawer that hangs off the header below. The header is
       already 96% opaque, so dropping the blur here costs nothing visually. */
    .site-header { backdrop-filter: none; }

    /* Nav collapses into a slide-down drawer.
       Anchored to the header (absolute, top:100%) rather than the viewport:
       the top bar pushes the header down when the page is unscrolled, so a
       fixed drawer at top:var(--header-h) would sit under the header. */
    .nav-toggle { display: grid; place-items: center; }

    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100vh - var(--header-h));
        display: block;
        background: #fff;
        border-top: 1px solid var(--line);
        padding: var(--sp-5);
        overflow-y: auto;
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
    }
    .nav.open { opacity: 1; visibility: visible; transform: translateY(0); }

    .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav-list > li { border-bottom: 1px solid var(--line); }
    /* Uppercase and tracked like the desktop nav, but a touch smaller — at 1rem
       the tracking pushed the longer labels toward the drawer edge. */
    .nav-link { padding: .95rem .25rem; font-size: .86rem; justify-content: space-between; }
    /* The underline is a desktop affordance: in the drawer each row already has
       its own divider, and a second rule under the label just reads as noise. */
    .nav-link::after { display: none; }
    .nav-link.active { color: var(--accent-700); }

    /* Dropdown becomes a static nested list. */
    .drop {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        min-width: 0;
        padding: 0 0 var(--sp-3) var(--sp-4);
        display: none;
    }
    .has-drop.open .drop { display: block; }
    .has-drop > .nav-link i { transition: transform .18s var(--ease); }
    .has-drop.open > .nav-link i { transform: rotate(180deg); }

    .nav-cta { flex-direction: column; align-items: stretch; margin-top: var(--sp-5); }
    .nav-cta .btn { width: 100%; }

    .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .field-row, .field-row-3 { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .form-card { padding: var(--sp-5); }

    /* The strip keeps the phone and email; the opening hours drop off. */
    .topbar-aside { display: none; }
    .topbar .wrap { justify-content: center; }
    .topbar-contact { gap: var(--sp-4); justify-content: center; }

    .hero-trust > div { padding-right: var(--sp-4); margin-right: var(--sp-4); }
}

@media (max-width: 560px) {
    :root { --sp-9: 3.5rem; }
    .wrap { padding-inline: var(--sp-4); }

    /* Stats go to an even three-up so they never wrap awkwardly. */
    .hero-trust { grid-template-columns: repeat(3, 1fr); }
    .hero-trust > div { padding-right: var(--sp-3); margin-right: var(--sp-3); }
    .hero-trust div span { font-size: .72rem; line-height: 1.35; display: block; }
    .hero-panel { padding: var(--sp-5); }

    .topbar { font-size: .79rem; }
    .topbar .wrap { padding-block: .35rem; }

    .stats { grid-template-columns: 1fr; }
    .btn { width: 100%; }
    .btn-row { flex-direction: column; }
    .btn-row .btn { width: 100%; }
    .filters { gap: var(--sp-1); }
    .filter-btn { font-size: .8rem; padding: .45rem .85rem; }
    .step { padding-left: 3.4rem; }
    .step::before { width: 2.4rem; font-size: 1.2rem; padding-right: var(--sp-3); }
    .cta-band { padding: var(--sp-6) var(--sp-5); }
    .def-list div { flex-direction: column; gap: 2px; }
    .def-list dd { text-align: left; }
}

/* --------------------------------------------------------------------------
   19. Motion & print
   -------------------------------------------------------------------------- */
/* Scoped to .js so content is never hidden when JavaScript does not run.
   The class is set on <html> by an inline script in the layout head. */
.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.js .reveal.visible { opacity: 1; transform: none; }
/* Already in view at load: shown outright, with no transition to run. */
.js .reveal.reveal-instant { transition: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    .js .reveal { opacity: 1; transform: none; }
}

@media print {
    .topbar, .site-header, .site-footer, .cta-band, .nav-toggle { display: none !important; }
    body { color: #000; }
    .hero, .page-head { background: none; color: #000; }
    .hero-bg { display: none; }
    .hero h1, .page-head h1 { color: #000; }
}