/* ==========================================================================
   Futurion Marketing — main stylesheet
   --------------------------------------------------------------------------
   Contents
   01. Design tokens
   02. Reset & base
   03. Typography
   04. Layout primitives
   05. Buttons
   06. Surfaces (glass, cards, chips)
   07. Preloader & scroll progress
   08. Header & navigation
   09. Hero
   10. Stats & timeline
   11. Services
   12. Products
   13. Partners & testimonials
   14. FAQ accordion
   15. Blog
   16. Forms
   17. Contact & map
   18. Legal / prose
   19. Footer
   20. Floating actions
   21. AI assistant
   22. Cookie banner
   23. Confirmation & error pages
   24. Utilities
   25. Responsive
   26. Motion & print preferences
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */
:root {
    /* ----------------------------------------------------------------------
     | BRAND PALETTE — derived from the Futurion Marketing logo.
     | Sampled directly from the supplied artwork:
     |   ink   #212832  (the "F" mark)
     |   cream #F7F6F2  (the logo field)
     | The identity is deliberately monochrome, so a single restrained accent
     | is introduced — brass — which is the traditional partner to charcoal
     | and warm cream, and complements rather than fights the cream's warmth.
     | ------------------------------------------------------------------- */

    /* Ink — the logo charcoal, extended into a usable scale */
    --ink-950: #11151b;
    --ink-900: #171d25;
    --ink-800: #212832;   /* ← exact logo colour */
    --ink-700: #2b3441;
    --ink-600: #3a4553;
    --ink-500: #4d5a6b;

    /* Cream — the logo field, extended */
    --cream-50:  #fdfdfb;
    --cream-100: #f7f6f2;  /* ← exact logo colour */
    --cream-200: #f1efe8;
    --cream-300: #e7e4da;
    --cream-400: #d8d4c7;

    /* Brass — the single accent */
    --brass-200: #eddfc0;
    --brass-300: #ddc79b;
    --brass-400: #c9ac74;
    --brass-500: #b8934e;   /* accent on dark surfaces */
    --brass-600: #9a7838;   /* accent on cream — AA for text */
    --brass-700: #7b5f2b;

    /* Supporting hues, muted to sit beside brass without shouting */
    --teal-500:  #17727a;
    --teal-600:  #125c63;
    --sage-600:  #4a7355;
    --clay-600:  #a8632f;
    --plum-600:  #6a5480;

    /* Warm neutrals (replace the old cool slates) */
    --stone-700: #3f4650;
    --stone-600: #59616d;
    --stone-500: #757d89;
    --stone-400: #9aa1ab;
    --stone-300: #c3c7cd;
    --stone-200: #e2e1dc;
    --stone-100: #eeece6;
    --stone-50:  #f7f6f2;
    --white: #ffffff;

    /* Status */
    --success-500: #3f7d55;
    --danger-500:  #b4453c;
    --warning-500: #b8873a;

    /* Semantic */
    --bg:           var(--cream-100);
    --bg-alt:       var(--cream-200);
    --bg-raised:    #ffffff;
    --bg-dark:      var(--ink-800);
    --text:         var(--ink-800);
    --text-muted:   var(--stone-600);
    --text-invert:  var(--cream-100);
    --border:       rgba(33, 40, 50, 0.10);
    --border-strong:rgba(33, 40, 50, 0.18);

    /* Gradients */
    --gradient-brand:  linear-gradient(135deg, #2b3441 0%, #212832 55%, #171d25 100%);
    --gradient-brass:  linear-gradient(135deg, #9a7838 0%, #b8934e 45%, #c9ac74 100%);
    /* Brighter brass for fills that sit on the dark ink surfaces — the same
       ramp as the "Better contracts." display text in the hero. The standard
       brass and the charcoal --gradient-brand both disappear against ink. */
    --gradient-brass-light: linear-gradient(135deg, #ddc79b 0%, #c9ac74 50%, #b8934e 100%);
    --gradient-soft:   linear-gradient(135deg, rgba(184,147,78,.16), rgba(33,40,50,.06));
    --gradient-dark:   linear-gradient(155deg, #171d25 0%, #2b3441 55%, #171d25 100%);
    /* Display text on DARK backgrounds */
    --gradient-text:   linear-gradient(100deg, #ddc79b 0%, #c9ac74 50%, #b8934e 100%);
    /* Display text on CREAM backgrounds — darker so it stays legible */
    --gradient-text-on-light: linear-gradient(100deg, #9a7838 0%, #b8934e 55%, #7b5f2b 100%);

    /* Glass */
    --glass-bg:      rgba(255, 255, 255, 0.66);
    --glass-border:  rgba(255, 255, 255, 0.80);
    --glass-blur:    18px;
    --glass-dark-bg: rgba(23, 29, 37, 0.62);

    /* Shadows — warm-tinted to sit on cream rather than grey it out */
    --shadow-xs: 0 1px 2px rgba(33, 40, 50, .05);
    --shadow-sm: 0 2px 8px rgba(33, 40, 50, .06), 0 1px 2px rgba(33, 40, 50, .04);
    --shadow-md: 0 10px 30px -12px rgba(33, 40, 50, .16), 0 4px 12px rgba(33, 40, 50, .05);
    --shadow-lg: 0 26px 60px -22px rgba(33, 40, 50, .24), 0 8px 24px rgba(33, 40, 50, .07);
    --shadow-xl: 0 44px 90px -30px rgba(33, 40, 50, .34);
    --shadow-brand: 0 16px 36px -14px rgba(33, 40, 50, .45);
    --shadow-brass: 0 14px 32px -12px rgba(184, 147, 78, .45);

    /* ---- Legacy aliases -------------------------------------------------
     | Kept so any rule still referencing the old token names resolves to a
     | brand-correct colour instead of failing silently.
     | ------------------------------------------------------------------ */
    --indigo-50:  var(--cream-200);
    --indigo-100: var(--brass-200);
    --indigo-300: var(--brass-300);
    --indigo-500: var(--brass-500);
    --indigo-600: var(--brass-600);
    --indigo-700: var(--brass-700);
    --violet-500: var(--brass-400);
    --violet-600: var(--brass-600);
    --cyan-400:   var(--brass-300);
    --cyan-500:   var(--teal-500);
    --amber-500:  var(--brass-500);
    --green-500:  var(--success-500);
    --rose-500:   var(--danger-500);
    --slate-700: var(--stone-700);
    --slate-600: var(--stone-600);
    --slate-500: var(--stone-500);
    --slate-400: var(--stone-400);
    --slate-300: var(--stone-300);
    --slate-200: var(--stone-200);
    --slate-100: var(--stone-100);
    --slate-50:  var(--stone-50);

    /* Radii */
    --r-sm:  10px;
    --r-md:  14px;
    --r-lg:  20px;
    --r-xl:  28px;
    --r-2xl: 36px;
    --r-pill: 999px;

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

    /* Typography */
    --font-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --fs-xs:   .78rem;
    --fs-sm:   .875rem;
    --fs-base: 1rem;
    --fs-md:   1.0625rem;
    --fs-lg:   1.1875rem;
    --fs-xl:   clamp(1.35rem, 1.1rem + .8vw, 1.6rem);
    --fs-2xl:  clamp(1.7rem, 1.3rem + 1.6vw, 2.35rem);
    --fs-3xl:  clamp(2.1rem, 1.5rem + 2.6vw, 3.15rem);
    --fs-hero: clamp(2.6rem, 1.7rem + 4.2vw, 4.6rem);

    /* Layout */
    --container: 1240px;
    --container-narrow: 880px;
    --header-h: 82px;
    /* Height the header condenses to once scrolled. */
    --header-h-stuck: 68px;

    /* Motion */
    --ease-out:   cubic-bezier(.22, 1, .36, 1);
    --ease-in-out:cubic-bezier(.65, 0, .35, 1);
    --ease-spring:cubic-bezier(.34, 1.56, .64, 1);
    --t-fast: .18s;
    --t-mid:  .32s;
    --t-slow: .6s;

    /* Accent map (set per component with .accent-*).
       The default is brass-700: it is the darkest brass and the only one that
       clears WCAG AA for body-size text on the cream field. */
    --accent:       var(--brass-700);
    --accent-soft:  rgba(184, 147, 78, .15);
    --accent-glow:  rgba(184, 147, 78, .34);
}

/* Accent themes ---------------------------------------------------------
 | Service-line accents, all desaturated so they read as one family beside
 | the brass. `--accent` is the *text/icon* value and is measured against the
 | cream field (#F7F6F2) at WCAG AA for body-size text; the lighter brass
 | tones are used only for fills, borders and glows where 3:1 applies.
 |
 | Measured contrast on cream:
 |   #7b5f2b brass  5.5:1     #8f5426 clay   5.6:1
 |   #125c63 teal   7.1:1     #4a7355 sage   5.0:1
 |   #6a5480 plum   6.1:1
 | -------------------------------------------------------------------- */
.accent-indigo { --accent: #7b5f2b; --accent-soft: rgba(184,147,78,.15); --accent-glow: rgba(184,147,78,.34); }
.accent-amber  { --accent: #8f5426; --accent-soft: rgba(168,99,47,.13);  --accent-glow: rgba(168,99,47,.30); }
.accent-cyan   { --accent: #125c63; --accent-soft: rgba(23,114,122,.13); --accent-glow: rgba(23,114,122,.30); }
.accent-green  { --accent: #4a7355; --accent-soft: rgba(74,115,85,.13);  --accent-glow: rgba(74,115,85,.28); }
.accent-violet { --accent: #6a5480; --accent-soft: rgba(106,84,128,.13); --accent-glow: rgba(106,84,128,.30); }

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 20px);

    /* Decorative pieces — glows, orbs, floating chips — deliberately sit a
       little outside their parent. On a narrow screen that widened the page
       and left a blank strip down the right until layout settled.
       `clip` rather than `hidden`: hidden would make <html> a scroll
       container and break position:sticky on the header and jump bar. */
    overflow-x: clip;
}

/* Safari below 16 has no overflow:clip. Fall back to constraining the width,
   which stops the overflow without creating a scroll container either. */
@supports not (overflow-x: clip) {
    html { max-width: 100%; overflow-x: hidden; }
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }

img { background-color: var(--slate-100); }

a { color: var(--indigo-600); text-decoration: none; transition: color var(--t-fast) var(--ease-out); }
a:hover { color: var(--violet-600); }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

address { font-style: normal; }

table { border-collapse: collapse; width: 100%; }

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

::selection { background: rgba(184, 147, 78, .22); color: var(--ink-900); }

:focus-visible {
    outline: 3px solid var(--indigo-500);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Skip link ------------------------------------------------------------- */
.skip-link {
    position: fixed;
    top: -100px;
    left: 16px;
    z-index: 2000;
    padding: .85rem 1.4rem;
    background: var(--ink-800);
    color: #fff;
    border-radius: var(--r-sm);
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    transition: top var(--t-mid) var(--ease-out);
}
.skip-link:focus { top: 16px; color: #fff; }

/* Accessible hiding ----------------------------------------------------- */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Honeypot -------------------------------------------------------------- */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.022em;
    color: var(--ink-900);
    text-wrap: balance;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { text-wrap: pretty; }

.text-gradient {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--indigo-600);
    margin-bottom: var(--sp-3);
}
.eyebrow::before {
    content: '';
    width: 26px; height: 2px;
    border-radius: 2px;
    background: var(--gradient-brand);
}
.eyebrow--light { color: var(--indigo-300); }
.eyebrow--light::before { background: linear-gradient(90deg, var(--indigo-300), var(--cyan-400)); }

.section-title { font-size: var(--fs-2xl); max-width: 22ch; }
.section-head--center .section-title { max-width: 28ch; margin-inline: auto; }

.section-lead {
    font-size: var(--fs-md);
    color: var(--text-muted);
    max-width: 62ch;
    line-height: 1.75;
}
.section-head--center .section-lead { margin-inline: auto; }

.lead { font-size: var(--fs-lg); line-height: 1.7; color: var(--slate-700); }

/* ==========================================================================
   04. LAYOUT PRIMITIVES
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}

.section {
    position: relative;
    padding-block: clamp(3.5rem, 7vw, var(--sp-11));
}
.section--tight { padding-block: clamp(2.4rem, 4.5vw, 3.6rem); }

.section__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.section > .container { position: relative; z-index: 1; }

.section-head {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(1.2rem, 3vw, 3rem);
    align-items: end;
    margin-bottom: clamp(2rem, 4vw, 3.4rem);
}
.section-head--center {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
}
.section-head__link {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 600;
    white-space: nowrap;
    align-self: end;
    justify-self: end;
}
.section-head__link i { transition: transform var(--t-fast) var(--ease-out); }
.section-head__link:hover i { transform: translateX(4px); }

.section-foot { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }

/* Alternating backgrounds ---------------------------------------------- */
.section--journey,
.section--products,
.section--faqs,
.section--values,
.section--blog { background: var(--bg-alt); }

.section--services { background:
    radial-gradient(1000px 500px at 85% -10%, rgba(184,147,78,.07), transparent 60%),
    var(--bg); }

.section--partners { background: var(--bg); overflow: hidden; }

.section--testimonials { background:
    radial-gradient(900px 460px at 10% 0%, rgba(221,199,155,.08), transparent 62%),
    var(--bg-alt); }

/* Decorative orbs ------------------------------------------------------- */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    will-change: transform;
}
.orb--1 { width: 460px; height: 460px; top: -140px; left: -110px;
          background: radial-gradient(circle, rgba(184,147,78,.55), transparent 70%); }
.orb--2 { width: 520px; height: 520px; top: 20%; right: -180px;
          background: radial-gradient(circle, rgba(201,172,116,.42), transparent 70%); }
.orb--3 { width: 380px; height: 380px; bottom: -120px; left: 32%;
          background: radial-gradient(circle, rgba(221,199,155,.4), transparent 70%); }
.orb--soft { width: 620px; height: 620px; top: -220px; right: -220px; opacity: .35;
             background: radial-gradient(circle, rgba(184,147,78,.35), transparent 70%); }

.grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: radial-gradient(ellipse 90% 65% at 50% 35%, #000 35%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 90% 65% at 50% 35%, #000 35%, transparent 78%);
}

/* ==========================================================================
   05. BUTTONS
   ========================================================================== */
.btn {
    --btn-py: .82rem;
    --btn-px: 1.5rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: var(--btn-py) var(--btn-px);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.2;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    isolation: isolate;
    overflow: hidden;
    transition: transform var(--t-mid) var(--ease-out),
                box-shadow var(--t-mid) var(--ease-out),
                background-color var(--t-mid) var(--ease-out),
                color var(--t-mid) var(--ease-out),
                border-color var(--t-mid) var(--ease-out);
}
.btn i { font-size: .95em; transition: transform var(--t-mid) var(--ease-out); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn--sm  { --btn-py: .62rem; --btn-px: 1.15rem; font-size: var(--fs-xs); }
.btn--lg  { --btn-py: 1.02rem; --btn-px: 2rem; font-size: var(--fs-base); }
.btn--block { display: flex; width: 100%; }

/* Primary --------------------------------------------------------------- */
.btn--primary {
    color: #fff;
    background: var(--gradient-brand);
    background-size: 180% 180%;
    background-position: 0% 50%;
    box-shadow: var(--shadow-brand);
    transition: background-position .55s var(--ease-out), transform var(--t-mid) var(--ease-out),
                box-shadow var(--t-mid) var(--ease-out);
}
.btn--primary::after {
    /* Sheen sweep on hover */
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.28) 48%, transparent 62%);
    transform: translateX(-120%);
    transition: transform .7s var(--ease-out);
}
.btn--primary:hover {
    color: #fff;
    background-position: 100% 50%;
    box-shadow: 0 22px 48px -14px rgba(154,120,56,.62);
}
.btn--primary:hover::after { transform: translateX(120%); }
.btn--primary:hover i:last-child { transform: translateX(3px); }

/* Outline --------------------------------------------------------------- */
.btn--outline {
    color: var(--ink-900);
    border-color: var(--border-strong);
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.btn--outline:hover {
    color: var(--indigo-700);
    border-color: var(--indigo-300);
    background: var(--indigo-50);
    box-shadow: var(--shadow-md);
}

/* Ghost ----------------------------------------------------------------- */
.btn--ghost {
    color: var(--ink-900);
    background: var(--slate-100);
    border-color: transparent;
}
.btn--ghost:hover { background: var(--slate-200); color: var(--ink-900); }

/* Glass (on dark) ------------------------------------------------------- */
.btn--glass {
    color: #fff;
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.24);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.btn--glass:hover {
    color: #fff;
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.4);
}

/* Submit state ---------------------------------------------------------- */
.btn__spinner {
    display: none;
    width: 17px; height: 17px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
.btn.is-loading { pointer-events: none; opacity: .85; }
.btn.is-loading .btn__label,
.btn.is-loading .btn__icon { display: none; }
.btn.is-loading .btn__spinner { display: block; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   06. SURFACES
   ========================================================================== */
.glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    box-shadow: var(--shadow-md);
    border-radius: var(--r-xl);
}

.glass-dark {
    position: relative;
    background: var(--gradient-dark);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: var(--r-2xl);
    color: #fff;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}
.glass-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(700px 340px at 12% 0%, rgba(184,147,78,.35), transparent 62%),
        radial-gradient(620px 320px at 92% 100%, rgba(221,199,155,.22), transparent 60%);
    pointer-events: none;
}
.glass-dark > * { position: relative; z-index: 1; }
.glass-dark h2, .glass-dark h3 { color: #fff; }
.glass-dark p { color: rgba(255,255,255,.76); }

/* Chips ----------------------------------------------------------------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .42rem .9rem;
    border-radius: var(--r-pill);
    background: var(--white);
    border: 1px solid var(--border);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--slate-600);
    transition: all var(--t-fast) var(--ease-out);
}
a.chip:hover, .chip.is-active {
    color: var(--indigo-700);
    border-color: var(--indigo-300);
    background: var(--indigo-50);
}
.chip--sm { padding: .3rem .7rem; font-size: .72rem; }
.chip--solid { background: var(--gradient-brand); color: #fff; border-color: transparent; }
a.chip--solid:hover { color: #fff; filter: brightness(1.06); }
.chip__count {
    display: inline-grid;
    place-items: center;
    min-width: 20px; height: 20px;
    padding-inline: .3rem;
    border-radius: var(--r-pill);
    background: var(--slate-100);
    font-size: .68rem;
    font-weight: 700;
    color: var(--slate-600);
}
.chip-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: clamp(1.8rem, 3vw, 2.6rem);
}

/* Stretched link -------------------------------------------------------- */
.stretched-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* ==========================================================================
   07. PRELOADER & SCROLL PROGRESS
   ========================================================================== */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    /* Brand cream, so the supplied logo animation blends into the overlay. */
    background: var(--cream-100);
    transition: opacity .55s var(--ease-out), visibility .55s var(--ease-out);
}
.preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* CSS failsafe: if main.js never loads, the overlay still clears after 6s so
   a blocked script can never leave the visitor staring at a spinner. */
.preloader { animation: preloader-failsafe 0s linear 6s forwards; }
@keyframes preloader-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.preloader__inner { display: grid; justify-items: center; gap: .55rem; }

.preloader__stage {
    position: relative;
    display: grid;
    place-items: center;
    width: 180px;
    height: 180px;
    margin-bottom: .2rem;
}
.preloader__video {
    width: 180px;
    height: 180px;
    object-fit: contain;
    /* The source is letterboxed on the same cream, so blending is seamless. */
    mix-blend-mode: multiply;
}
.preloader__fallback {
    position: absolute;
    width: 76px;
    height: auto;
    opacity: 0;
    animation: preload-breathe 1.7s var(--ease-in-out) infinite;
}
/* Swap to the static mark when the video is unavailable. */
.preloader.no-video .preloader__video { display: none; }
.preloader.no-video .preloader__fallback { opacity: 1; }

@keyframes preload-breathe {
    0%, 100% { opacity: .45; transform: scale(.97); }
    50%      { opacity: 1;   transform: scale(1); }
}

.preloader__word {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-800);
}
.preloader__rule {
    width: 46px;
    height: 2px;
    border-radius: 2px;
    background: var(--gradient-brass);
    transform-origin: center;
    animation: preload-rule 1.5s var(--ease-in-out) infinite;
}
@keyframes preload-rule {
    0%, 100% { transform: scaleX(.35); opacity: .5; }
    50%      { transform: scaleX(1);   opacity: 1; }
}
.preloader__tagline {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--stone-500);
}

/* Safety valve: if JS never runs, reveal the page after 2.5s. */
.no-js .preloader { display: none; }

.scroll-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 1100;
    background: transparent;
    pointer-events: none;
}
.scroll-progress__bar {
    display: block;
    height: 100%;
    width: 0%;
    /* Runs across the top of the page, over the dark hero — the charcoal
       gradient was invisible there. */
    background: var(--gradient-brass-light);
    box-shadow: 0 0 14px rgba(201,172,116,.65);
    transition: width .1s linear;
}

/* ==========================================================================
   08. HEADER & NAVIGATION
   ========================================================================== */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: transparent;
    transition: background-color var(--t-mid) var(--ease-out),
                box-shadow var(--t-mid) var(--ease-out),
                height var(--t-mid) var(--ease-out),
                backdrop-filter var(--t-mid) var(--ease-out);
}
/* Solid from the first paint — the bar reads as a fixed surface rather than
   floating over the hero. It still condenses and gains a shadow on scroll. */
.site-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--cream-100);
    border-bottom: 1px solid var(--border);
    opacity: 1;
    z-index: -1;
}
.site-header.is-stuck {
    height: var(--header-h-stuck);
    box-shadow: 0 8px 30px -18px rgba(33,40,50,.35);
}
.site-header.is-hidden { transform: translateY(-100%); }

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    width: 100%;
}

/* Brand ----------------------------------------------------------------- */
.brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    flex-shrink: 0;
    color: var(--ink-900);
}
.brand:hover { color: var(--ink-900); }
.brand__mark {
    display: grid;
    place-items: center;
    width: 34px;
    transition: transform var(--t-mid) var(--ease-spring);
}
/* The mark is the supplied artwork, keyed to transparency — no plate or
   drop-shadow, so it reads exactly as the logo does on its own. */
.brand__mark img { width: 34px; height: auto; background: transparent; }
.brand:hover .brand__mark { transform: translateY(-2px) scale(1.05); }

.brand-tagline {
    margin-top: .75rem;
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--brass-400);
}
.brand__text { display: grid; line-height: 1.05; }
.brand__name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.03em;
}
.brand__suffix {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--slate-500);
}

/* Primary nav ----------------------------------------------------------- */
.site-nav { display: block; }
.site-nav__list { display: flex; align-items: center; gap: .15rem; }
.site-nav__item { position: relative; }

.site-nav__link {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .62rem .85rem;
    border-radius: var(--r-pill);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--slate-700);
    transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.site-nav__link::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 6px;
    width: 0; height: 2px;
    border-radius: 2px;
    background: var(--gradient-brand);
    transform: translateX(-50%);
    transition: width var(--t-mid) var(--ease-out);
}
.site-nav__link:hover { color: var(--ink-900); background: rgba(184,147,78,.07); }
.site-nav__link:hover::after,
.site-nav__link.is-active::after { width: 22px; }
.site-nav__link.is-active { color: var(--indigo-700); }
.site-nav__caret { font-size: .6rem; transition: transform var(--t-fast) var(--ease-out); }
.has-dropdown:hover .site-nav__caret { transform: rotate(180deg); }

/* Dropdown -------------------------------------------------------------- */
.dropdown {
    position: absolute;
    top: 100%; left: 50%;
    transform: translate(-50%, 8px);
    padding-top: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out),
                visibility var(--t-mid);
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.dropdown__panel {
    display: grid;
    gap: .2rem;
    width: 380px;
    padding: .6rem;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    background: rgba(255,255,255,.92);
}
.dropdown__item {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .7rem .8rem;
    border-radius: var(--r-md);
    color: var(--ink-900);
    transition: background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.dropdown__item:hover { background: var(--indigo-50); color: var(--ink-900); transform: translateX(3px); }
.dropdown__icon {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: .95rem;
}
.dropdown__text { display: grid; gap: .1rem; }
.dropdown__text strong { font-family: var(--font-display); font-size: var(--fs-sm); }
.dropdown__text small { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45; }
.dropdown__item--all { border-top: 1px solid var(--border); margin-top: .25rem; padding-top: .8rem; }

/* Header actions -------------------------------------------------------- */
.site-header__actions { display: flex; align-items: center; gap: .8rem; }

.header-phone {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--slate-700);
    padding: .5rem .3rem;
}
.header-phone i { color: var(--indigo-600); }
.header-phone:hover { color: var(--indigo-700); }

/* Burger ---------------------------------------------------------------- */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    padding: 0 10px;
    border-radius: 12px;
    background: var(--slate-100);
    transition: background-color var(--t-fast) var(--ease-out);
}
.nav-toggle:hover { background: var(--slate-200); }
.nav-toggle__bar {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: var(--ink-900);
    transition: transform var(--t-mid) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav ------------------------------------------------------------ */
.mobile-nav {
    position: fixed;
    top: 0; right: 0;
    z-index: 1050;
    width: min(400px, 88vw);
    height: 100dvh;
    padding: calc(var(--header-h) + 12px) 1.4rem 1.6rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .42s var(--ease-out);
}
.mobile-nav__panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.6rem;
    min-height: 100%;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border-left: 1px solid var(--border);
    z-index: -1;
}
.mobile-nav__list { display: grid; gap: .2rem; }
.mobile-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .95rem 1rem;
    border-radius: var(--r-md);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink-900);
    transition: background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.mobile-nav__link i { font-size: .78rem; color: var(--slate-400); }
.mobile-nav__link:hover, .mobile-nav__link.is-active {
    background: var(--indigo-50);
    color: var(--indigo-700);
    transform: translateX(3px);
}
.mobile-nav__footer { display: grid; gap: .7rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.mobile-nav__phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font-weight: 600;
    color: var(--slate-600);
    padding-top: .3rem;
}
.mobile-nav__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(17,21,27,.42);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity var(--t-mid) var(--ease-out);
}
.mobile-nav__backdrop.is-visible { opacity: 1; }

/* ==========================================================================
   09. HERO
   ========================================================================== */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(100svh, 940px);
    padding-block: calc(var(--header-h) + 3.2rem) clamp(4rem, 8vw, 7rem);
    background: var(--gradient-dark);
    color: #fff;
    overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; overflow: hidden; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.hero .orb { opacity: .42; animation: orb-drift 18s var(--ease-in-out) infinite alternate; }
.hero .orb--2 { animation-duration: 24s; animation-delay: -6s; }
.hero .orb--3 { animation-duration: 21s; animation-delay: -11s; }

@keyframes orb-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(38px, -28px, 0) scale(1.09); }
}

.hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .48rem 1.05rem;
    margin-bottom: var(--sp-5);
    border-radius: var(--r-pill);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(255,255,255,.9);
}
.hero__badge-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--green-500);
    box-shadow: 0 0 0 0 rgba(63,125,85,.6);
    animation: pulse-dot 2.4s var(--ease-out) infinite;
}
@keyframes pulse-dot {
    0%   { box-shadow: 0 0 0 0 rgba(63,125,85,.55); }
    70%  { box-shadow: 0 0 0 10px rgba(63,125,85,0); }
    100% { box-shadow: 0 0 0 0 rgba(63,125,85,0); }
}

.hero__title {
    font-size: var(--fs-hero);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -.038em;
    color: #fff;
    margin-bottom: var(--sp-5);
    max-width: 15ch;
}
.hero__title .text-gradient { display: block; }

.hero__subtitle {
    font-size: clamp(1rem, .95rem + .3vw, 1.16rem);
    line-height: 1.72;
    color: rgba(255,255,255,.76);
    max-width: 56ch;
    margin-bottom: var(--sp-6);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: var(--sp-6); }

.hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem 1.7rem;
    font-size: var(--fs-sm);
    color: rgba(255,255,255,.66);
}
.hero__trust li { display: inline-flex; align-items: center; gap: .5rem; }
.hero__trust i { color: var(--cyan-400); font-size: .9rem; }

/* Hero visual ----------------------------------------------------------- */
.hero__visual { position: relative; }

.hero-card {
    --glass-bg: rgba(255,255,255,.08);
    --glass-border: rgba(255,255,255,.16);
    padding: clamp(1.4rem, 2.4vw, 2rem);
    color: #fff;
    box-shadow: 0 40px 90px -30px rgba(0,0,0,.6);
}
.hero-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.3rem;
}
.hero-card__label { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.hero-card__pill {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .25rem .7rem;
    border-radius: var(--r-pill);
    background: rgba(63,125,85,.16);
    color: #a8cdb6;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.hero-card__rows { display: grid; gap: 1rem; }
.hero-card__row {
    display: grid;
    grid-template-columns: 34px 1fr;
    grid-template-areas: 'icon name' 'icon bar';
    align-items: center;
    gap: .35rem .8rem;
}
.hero-card__icon {
    grid-area: icon;
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: #fff;
    font-size: .82rem;
}
.hero-card__name { grid-area: name; font-size: var(--fs-sm); font-weight: 600; color: rgba(255,255,255,.88); }
.hero-card__bar {
    grid-area: bar;
    display: block;
    height: 6px;
    border-radius: var(--r-pill);
    background: rgba(255,255,255,.1);
    overflow: hidden;
}
.hero-card__bar > span {
    display: block;
    height: 100%;
    width: var(--w);
    border-radius: inherit;
    /* Sits inside the glass card on the dark hero — needs the bright brass. */
    background: var(--gradient-brass-light);
    box-shadow: 0 0 12px rgba(201, 172, 116, .35);
    transform-origin: left;
    animation: bar-grow 1.3s var(--ease-out) both;
}
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hero-card__foot {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-top: 1.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255,255,255,.1);
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: rgba(255,255,255,.55);
}
.hero-card__foot i { color: var(--indigo-300); margin-top: 2px; }

.hero-chip {
    --glass-bg: rgba(255,255,255,.1);
    --glass-border: rgba(255,255,255,.2);
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .72rem 1.05rem;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    color: rgba(255,255,255,.9);
    box-shadow: 0 20px 40px -18px rgba(0,0,0,.6);
}
.hero-chip strong { color: #fff; font-family: var(--font-display); font-size: .95rem; }
.hero-chip i { color: var(--cyan-400); }
.hero-chip--1 { top: -22px; left: -26px; }
.hero-chip--2 { bottom: -26px; right: -14px; }

/* Scroll cue ------------------------------------------------------------ */
.hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 3;
    display: grid;
    justify-items: center;
    gap: .5rem;
    color: rgba(255,255,255,.55);
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
}
.hero__scroll:hover { color: #fff; }
.hero__scroll-mouse {
    width: 24px; height: 38px;
    border: 2px solid currentColor;
    border-radius: var(--r-pill);
    display: grid;
    justify-items: center;
    padding-top: 7px;
}
.hero__scroll-mouse span {
    width: 3px; height: 7px;
    border-radius: 2px;
    background: currentColor;
    animation: scroll-cue 1.7s var(--ease-in-out) infinite;
}

/* Auto-scroll running: the cue becomes a stop control. */
.hero__scroll.is-autoscrolling {
    color: var(--brass-300);
}
.hero__scroll.is-autoscrolling .hero__scroll-mouse {
    border-color: var(--brass-400);
    box-shadow: 0 0 0 0 rgba(201, 172, 116, .5);
    animation: autoscroll-pulse 1.5s var(--ease-out) infinite;
}
.hero__scroll.is-autoscrolling .hero__scroll-mouse span {
    animation-duration: .85s;
}
@keyframes autoscroll-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(201, 172, 116, .45); }
    70%  { box-shadow: 0 0 0 12px rgba(201, 172, 116, 0); }
    100% { box-shadow: 0 0 0 0 rgba(201, 172, 116, 0); }
}
@keyframes scroll-cue {
    0%   { opacity: 0; transform: translateY(-3px); }
    45%  { opacity: 1; transform: translateY(4px); }
    100% { opacity: 0; transform: translateY(11px); }
}

/* Inner page hero ------------------------------------------------------- */
.page-hero {
    position: relative;
    padding-block: calc(var(--header-h) + clamp(2.6rem, 5vw, 4.5rem)) clamp(2.8rem, 5vw, 4.6rem);
    background: var(--gradient-dark);
    color: #fff;
    overflow: hidden;
}
.page-hero__bg { position: absolute; inset: 0; overflow: hidden; }
.page-hero__inner { position: relative; z-index: 1; }
.page-hero__title {
    font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.3rem);
    font-weight: 800;
    letter-spacing: -.035em;
    color: #fff;
    max-width: 20ch;
    margin-bottom: var(--sp-4);
}
.page-hero__subtitle {
    font-size: var(--fs-md);
    line-height: 1.75;
    color: rgba(255,255,255,.74);
    max-width: 64ch;
}
.page-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: var(--sp-6); }

/* Breadcrumbs ----------------------------------------------------------- */
.breadcrumbs { margin-bottom: var(--sp-5); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; font-size: var(--fs-xs); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: .55rem; color: rgba(255,255,255,.55); }
.breadcrumbs a { color: rgba(255,255,255,.72); }
.breadcrumbs a:hover { color: #fff; }
.breadcrumbs i { font-size: .55rem; opacity: .5; }
.breadcrumbs [aria-current="page"] { color: rgba(255,255,255,.95); font-weight: 600; }

/* ==========================================================================
   10. STATS & TIMELINE
   ========================================================================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(1rem, 2vw, 1.6rem);
    margin-bottom: clamp(3rem, 6vw, 5rem);
}
.stats-grid--band { margin-bottom: 0; }

.stat-card {
    position: relative;
    padding: clamp(1.5rem, 2.4vw, 2.1rem);
    text-align: center;
    overflow: hidden;
    transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 60%; height: 3px;
    border-radius: 0 0 4px 4px;
    background: var(--gradient-brand);
    opacity: .85;
}
.stat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.stat-card__icon {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    margin: 0 auto .9rem;
    border-radius: 16px;
    background: var(--gradient-soft);
    color: var(--indigo-600);
    font-size: 1.15rem;
}
.stat-card__value {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    /* Stat cards sit on cream, so use the darker brass ramp for legibility. */
    background: var(--gradient-text-on-light);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: .35rem;
    font-variant-numeric: tabular-nums;
}
.stat-card__label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-base);
    color: var(--ink-900);
    margin-bottom: .3rem;
}
.stat-card__text { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }

/* Timeline -------------------------------------------------------------- */
.timeline { position: relative; padding-block: 1rem; }
.timeline__spine {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: var(--slate-200);
    border-radius: 2px;
}
.timeline__progress {
    display: block;
    width: 100%;
    height: 0%;
    border-radius: inherit;
    background: var(--gradient-brand);
    box-shadow: 0 0 16px rgba(184,147,78,.45);
    transition: height .15s linear;
}

.timeline__item {
    position: relative;
    width: calc(50% - 46px);
    margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
    padding-right: 6px;
}
.timeline__item--right { margin-left: auto; padding-right: 0; padding-left: 6px; }

.timeline__marker {
    position: absolute;
    top: 22px;
    right: -66px;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--indigo-300);
    color: var(--indigo-600);
    font-size: .85rem;
    box-shadow: 0 0 0 6px rgba(184,147,78,.09);
    transition: transform var(--t-mid) var(--ease-spring), background var(--t-mid) var(--ease-out),
                color var(--t-mid) var(--ease-out);
}
.timeline__item--right .timeline__marker { right: auto; left: -66px; }
.timeline__item.is-active .timeline__marker,
.timeline__item:hover .timeline__marker {
    background: var(--gradient-brand);
    border-color: transparent;
    color: #fff;
    transform: scale(1.1);
}

.timeline__card {
    padding: clamp(1.2rem, 2vw, 1.7rem);
    transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
.timeline__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.timeline__year {
    display: inline-block;
    padding: .25rem .75rem;
    margin-bottom: .6rem;
    border-radius: var(--r-pill);
    background: var(--indigo-50);
    color: var(--indigo-700);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .04em;
}
.timeline__title { font-size: var(--fs-lg); margin-bottom: .45rem; }
.timeline__text { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.7; }

/* ==========================================================================
   11. SERVICES
   ========================================================================== */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
    gap: clamp(1.1rem, 2vw, 1.6rem);
}

.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 2.4vw, 2.1rem);
    border-radius: var(--r-xl);
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out),
                border-color var(--t-mid) var(--ease-out);
}
.service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(160deg, var(--accent-soft), transparent 55%);
    opacity: 0;
    transition: opacity var(--t-mid) var(--ease-out);
}
.service-card__glow {
    position: absolute;
    top: -60px; right: -60px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-glow), transparent 68%);
    opacity: 0;
    filter: blur(26px);
    transition: opacity var(--t-slow) var(--ease-out);
    z-index: -1;
}
.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}
.service-card:hover::before { opacity: 1; }
.service-card:hover .service-card__glow { opacity: .8; }

.service-card__icon {
    display: grid;
    place-items: center;
    width: 58px; height: 58px;
    margin-bottom: 1.1rem;
    border-radius: 18px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.35rem;
    transition: transform var(--t-mid) var(--ease-spring);
}
.service-card:hover .service-card__icon { transform: scale(1.08) rotate(-5deg); }

.service-card__title { font-size: var(--fs-xl); margin-bottom: .35rem; }
.service-card__title a { color: inherit; }
.service-card__tagline {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--accent);
    margin-bottom: .7rem;
}
.service-card__text { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.7; margin-bottom: 1.1rem; }

.service-card__list { display: grid; gap: .55rem; margin-bottom: 1.3rem; }
.service-card__list li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: var(--fs-sm);
    color: var(--slate-700);
    line-height: 1.55;
}
.service-card__list i { color: var(--accent); font-size: .78rem; margin-top: .32rem; flex-shrink: 0; }

.service-card__cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: auto;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--accent);
}
.service-card__cta i { transition: transform var(--t-mid) var(--ease-out); }
.service-card:hover .service-card__cta i { transform: translateX(5px); }

/* Service jump nav ------------------------------------------------------ */
/* Sits directly beneath the header and tracks it exactly.
   `--header-offset` is written by main.js on every scroll frame and holds how
   much of the header is still visible, so the bar rises as the header
   condenses and takes its place at the very top once it slides away. The
   fallback keeps it correct before the first script frame, and with no
   JavaScript at all. No transition here: the value is already animated by
   following the header itself. */
.service-jump {
    position: sticky;
    top: var(--header-offset, var(--header-h));
    z-index: 60;
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
}
/* Header slid out of view — take its place at the very top. */

.service-jump__inner {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-block: .7rem;
    scrollbar-width: none;
}
.service-jump__inner::-webkit-scrollbar { display: none; }
.service-jump__link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
    border-radius: var(--r-pill);
    white-space: nowrap;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--slate-700);
    border: 1px solid var(--border);
    transition: all var(--t-fast) var(--ease-out);
}
.service-jump__link i { color: var(--accent); }
.service-jump__link:hover {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    background: var(--accent-soft);
}

/* Service blocks -------------------------------------------------------- */
.service-block--alt {
    background: var(--bg-alt);
    --media-ring: var(--bg-alt);   /* keeps a paired photo's ring on-background */
}

.service-block__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
    gap: clamp(1.8rem, 4vw, 4rem);
    align-items: center;
    margin-bottom: clamp(2.2rem, 4vw, 3.4rem);
}
.service-block__icon {
    display: grid;
    place-items: center;
    width: 64px; height: 64px;
    margin-bottom: 1.2rem;
    border-radius: 20px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.5rem;
    box-shadow: 0 14px 30px -14px var(--accent-glow);
}
.service-block__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: var(--sp-6); }

.service-block__media { position: relative; }
.service-block__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-lg);
}
/* Two photos for one service. The second overlaps the first's lower corner
   instead of stacking under it, so the column keeps close to the single-image
   footprint and stays level with the text beside it. */
.service-block__media--pair { padding-bottom: 11%; }
.service-block__media .service-block__media-inset {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-xl);
    /* Ring drawn in the section's own background so the inset separates from
       a busy photo underneath. --media-ring follows the alternating block
       backgrounds rather than hardcoding one of them. */
    box-shadow: 0 0 0 6px var(--media-ring, var(--bg)), var(--shadow-lg);
}

.service-block__media-glow {
    position: absolute;
    /* Was `-6%` on the right, which pushed the page wider than the screen on
       mobile. Kept inside the parent; the blur still reads as a glow. */
    inset: 12% 0 -8% 12%;
    z-index: -1;
    border-radius: var(--r-2xl);
    background: var(--accent-glow);
    filter: blur(60px);
    opacity: .5;
}

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: .9rem;
    margin-bottom: clamp(2.4rem, 4vw, 3.6rem);
}
.benefit-card {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: 1.1rem 1.25rem;
    border-radius: var(--r-lg);
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--slate-700);
    transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
.benefit-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.benefit-card i { color: var(--accent); margin-top: .22rem; flex-shrink: 0; }

/* Process --------------------------------------------------------------- */
.process { margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }
.process__title { font-size: var(--fs-xl); margin-bottom: 1.4rem; }
.process__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: clamp(1rem, 2vw, 1.8rem);
    counter-reset: step;
}
.process__list--stacked { grid-template-columns: 1fr; gap: 1rem; margin-block: 1.6rem 2.4rem; }
.process__step { display: flex; gap: 1rem; align-items: flex-start; }
.process__step h3, .process__step h4 { font-size: var(--fs-base); margin-bottom: .3rem; }
.process__step p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.65; }
.process__number {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 13px;
    background: var(--gradient-brand);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .95rem;
    box-shadow: 0 10px 22px -10px rgba(154,120,56,.6);
}

/* Supplier panel -------------------------------------------------------- */
.supplier-panel { padding: clamp(1.4rem, 2.6vw, 2.2rem); }
.supplier-panel__title { font-size: var(--fs-lg); margin-bottom: 1.3rem; }
.supplier-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: .9rem;
}
.supplier-list__item {
    display: grid;
    justify-items: center;
    gap: .55rem;
    padding: 1rem .75rem;
    border-radius: var(--r-md);
    background: var(--white);
    border: 1px solid var(--border);
    text-align: center;
    transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
.supplier-list__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.supplier-list__item img {
    max-height: 44px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    background: transparent;
    transition: transform var(--t-mid) var(--ease-out);
}
.supplier-list__item:hover img { transform: scale(1.05); }
.supplier-list__item span { font-size: var(--fs-xs); font-weight: 600; color: var(--slate-600); }

/* Inline note ----------------------------------------------------------- */
.inline-note,
.notice-band {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: 1rem 1.25rem;
    border-radius: var(--r-lg);
    background: var(--indigo-50);
    border: 1px solid var(--indigo-100);
    font-size: var(--fs-sm);
    line-height: 1.65;
    color: var(--slate-700);
}
.inline-note i, .notice-band i { color: var(--indigo-600); margin-top: .2rem; flex-shrink: 0; }
.notice-band--stack { display: flex; }

/* CTA band -------------------------------------------------------------- */
.cta-band {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, auto);
    gap: clamp(1.4rem, 3vw, 3rem);
    align-items: center;
    padding: clamp(1.9rem, 4vw, 3.2rem);
}
.cta-band h2 { font-size: var(--fs-2xl); margin-bottom: .7rem; max-width: 20ch; }
.cta-band p { font-size: var(--fs-md); max-width: 54ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Detail layout --------------------------------------------------------- */
.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: clamp(1.6rem, 3.5vw, 3.4rem);
    align-items: start;
}
.detail-hero-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-lg);
    margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

/* Same pairing as the services page, narrower because this column is wider:
   the second photo overlaps the hero's lower corner rather than pushing the
   copy further down. The figure carries the spacing so the inset can hang
   into the padding without the gap before the text collapsing. */
.detail-hero-image--pair {
    position: relative;
    padding-bottom: 8%;
    margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.detail-hero-image--pair > img:first-of-type { margin-bottom: 0; }
.detail-hero-image .detail-hero-image__inset {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin-bottom: 0;
    border-radius: var(--r-xl);
    box-shadow: 0 0 0 6px var(--media-ring, var(--bg)), var(--shadow-lg);
}
.sticky-panel { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 1rem; }

.quote-panel { padding: clamp(1.4rem, 2.4vw, 1.9rem); display: grid; gap: .85rem; }
.quote-panel__icon {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    border-radius: 16px;
    background: var(--gradient-brand);
    color: #fff;
    font-size: 1.15rem;
    box-shadow: 0 14px 28px -12px rgba(154,120,56,.6);
}
.quote-panel__title { font-size: var(--fs-lg); }
.quote-panel__text { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.65; }
.quote-panel__phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--slate-600);
    padding-top: .2rem;
}

.related-panel { padding: clamp(1.2rem, 2.2vw, 1.7rem); }
.related-panel__title { font-size: var(--fs-base); margin-bottom: .9rem; }
.related-panel ul { display: grid; gap: .3rem; }
.related-panel a {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .65rem;
    border-radius: var(--r-md);
    color: var(--ink-900);
    transition: background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.related-panel a:hover { background: var(--indigo-50); transform: translateX(3px); }
.related-panel__icon {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: .88rem;
}
.related-panel strong { display: block; font-family: var(--font-display); font-size: var(--fs-sm); }
.related-panel small { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; }

.category-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--fs-sm);
    font-weight: 600;
}
.category-list span {
    display: inline-grid;
    place-items: center;
    min-width: 24px; height: 24px;
    border-radius: var(--r-pill);
    background: var(--slate-100);
    font-size: .7rem;
    color: var(--slate-600);
}

/* ==========================================================================
   12. PRODUCTS
   ========================================================================== */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: clamp(1.2rem, 2.2vw, 1.8rem);
}

.product-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--r-xl);
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
.product-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); }

.product-card__media { position: relative; overflow: hidden; background: var(--slate-100); }
.product-card__media img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .8s var(--ease-out);
}
.product-card:hover .product-card__media img { transform: scale(1.06); }
.product-card__badge {
    position: absolute;
    top: 14px; left: 14px;
    padding: .35rem .8rem;
    border-radius: var(--r-pill);
    background: rgba(33,40,50,.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.product-card__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.2rem, 2vw, 1.6rem); }
.product-card__head { display: flex; align-items: center; gap: .85rem; margin-bottom: .9rem; }
.product-card__icon {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    flex-shrink: 0;
    border-radius: 14px;
    background: var(--gradient-soft);
    color: var(--indigo-600);
    font-size: 1.05rem;
}
.product-card__title { font-size: var(--fs-lg); line-height: 1.2; }
.product-card__type { font-size: var(--fs-xs); color: var(--text-muted); }
.product-card__summary { font-size: var(--fs-sm); color: var(--slate-600); line-height: 1.7; margin-bottom: 1rem; }

.product-card__benefits { display: grid; gap: .5rem; margin-bottom: 1rem; }
.product-card__benefits li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: var(--fs-sm);
    color: var(--slate-700);
    line-height: 1.55;
}
.product-card__benefits i { color: var(--indigo-500); font-size: .82rem; margin-top: .28rem; flex-shrink: 0; }

.product-card__bestfor {
    display: flex;
    gap: .6rem;
    padding: .8rem .95rem;
    margin-bottom: 1.1rem;
    border-radius: var(--r-md);
    background: var(--indigo-50);
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--slate-700);
}
.product-card__bestfor i { color: var(--indigo-600); margin-top: .18rem; }

.product-card__actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: auto; }

.product-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin-top: clamp(1.4rem, 3vw, 2.2rem);
}
.product-strip__item {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem 1.1rem;
    border-radius: var(--r-pill);
    background: var(--white);
    border: 1px solid var(--border);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--slate-700);
    box-shadow: var(--shadow-xs);
    transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.product-strip__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.product-strip__item i { color: var(--indigo-500); }

/* Selector / guide ------------------------------------------------------ */
.selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.1rem;
}
.selector-card { padding: clamp(1.3rem, 2.2vw, 1.8rem); }
.selector-card h2 { font-size: var(--fs-lg); margin-bottom: .5rem; }
.selector-card p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.7; }
.selector-card__icon {
    display: grid;
    place-items: center;
    width: 50px; height: 50px;
    margin-bottom: 1rem;
    border-radius: 16px;
    background: var(--gradient-soft);
    color: var(--indigo-600);
    font-size: 1.1rem;
}

.guide-layout {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(1.8rem, 4vw, 3.6rem);
    align-items: center;
}
.guide-list { display: grid; gap: .8rem; }
.guide-list__item {
    display: flex;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    border-radius: var(--r-lg);
}
.guide-list__item strong { font-family: var(--font-display); font-size: var(--fs-base); }
.guide-list__item p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; margin-top: .2rem; }
.guide-list__num {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    flex-shrink: 0;
    border-radius: 11px;
    background: var(--gradient-brand);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .85rem;
}

/* ==========================================================================
   13. PARTNERS & TESTIMONIALS
   ========================================================================== */
/* No edge mask. It faded each logo in and out as it crossed the boundary,
   which read as logos popping into existence rather than gliding past. They
   now stay fully visible for the whole travel. */
.partner-carousel {
    padding-block: clamp(1rem, 2vw, 1.8rem);
}
.partner-carousel .swiper-wrapper { transition-timing-function: linear !important; align-items: center; }
.partner-carousel .swiper-slide { width: auto; }

.partner-logo {
    display: grid;
    place-items: center;
    /* Wider card with tighter side padding: very wide logos (EDF at ~7:1,
       365 finance at ~10:1) are limited by width, so extra width is what
       actually makes them legible. */
    width: 216px;
    height: 96px;
    padding: .9rem 1rem;
    border-radius: var(--r-lg);
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
.partner-logo:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.partner-logo img {
    max-height: 50px;
    /* Constrain width too, so an unusually wide supplier logo scales down
       inside the card instead of overflowing it. */
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    background: transparent;
    /* Full colour on purpose: this section earns trust through instant brand
       recognition, and desaturating the logos throws that away. Consistency
       comes from the uniform cards and normalised logo sizing instead. */
    transition: transform var(--t-mid) var(--ease-out);
}
.partner-logo:hover img { transform: scale(1.05); }

.partner-note {
    margin-top: clamp(1.2rem, 2.5vw, 2rem);
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--slate-400);
    max-width: 62ch;
    margin-inline: auto;
}

/* Fallback marquee when Swiper is unavailable --------------------------- */
.partner-carousel:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-inline: 1rem;
    scrollbar-width: none;
}
.partner-carousel:not(.swiper-initialized) .swiper-wrapper::-webkit-scrollbar { display: none; }
.partner-carousel:not(.swiper-initialized) .swiper-slide { flex: 0 0 auto; }

/* Testimonials ---------------------------------------------------------- */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: clamp(1.1rem, 2vw, 1.6rem);
}
.testimonial-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: clamp(1.5rem, 2.4vw, 2.1rem);
    transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
.testimonial-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.testimonial-card__quote {
    font-size: 1.6rem;
    color: var(--indigo-300);
    opacity: .55;
}
.testimonial-card blockquote p {
    font-size: var(--fs-md);
    line-height: 1.75;
    color: var(--slate-700);
    font-style: italic;
}
.testimonial-card__author { display: flex; align-items: center; gap: .8rem; margin-top: auto; }
.testimonial-card__author img {
    width: 46px; height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--white);
    box-shadow: var(--shadow-sm);
}
.testimonial-card__author strong { display: block; font-family: var(--font-display); font-size: var(--fs-sm); }
.testimonial-card__author small { font-size: var(--fs-xs); color: var(--text-muted); }
.testimonial-card__stars { display: flex; gap: .2rem; color: var(--amber-500); font-size: .8rem; }

/* ==========================================================================
   14. FAQ ACCORDION
   ========================================================================== */
.faq-layout {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(1.8rem, 4vw, 4rem);
    align-items: start;
}
.faq-aside-card {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    margin-top: 1.8rem;
    padding: 1.2rem 1.4rem;
    border-radius: var(--r-lg);
}
.faq-aside-card strong { display: block; font-family: var(--font-display); margin-bottom: .2rem; }
.faq-aside-card p { font-size: var(--fs-sm); color: var(--text-muted); }
.faq-aside-card__icon {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    flex-shrink: 0;
    border-radius: 14px;
    background: var(--gradient-brand);
    color: #fff;
}

.accordion { display: grid; gap: .75rem; }
.accordion__item {
    border-radius: var(--r-lg);
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: border-color var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
.accordion__item:has(.accordion__trigger[aria-expanded="true"]) {
    border-color: var(--indigo-300);
    box-shadow: var(--shadow-md);
}
.accordion__heading { margin: 0; font-size: inherit; }
.accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    width: 100%;
    padding: 1.15rem 1.35rem;
    text-align: left;
    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--ink-900);
    transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.accordion__trigger:hover { background: var(--slate-50); color: var(--indigo-700); }
.accordion__question { flex: 1; }
.accordion__indicator {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--indigo-50);
    color: var(--indigo-600);
    font-size: .78rem;
    transition: transform var(--t-mid) var(--ease-spring), background var(--t-mid) var(--ease-out),
                color var(--t-mid) var(--ease-out);
}
.accordion__trigger[aria-expanded="true"] .accordion__indicator {
    transform: rotate(45deg);
    background: var(--gradient-brand);
    color: #fff;
}
.accordion__panel { overflow: hidden; }
.accordion__content {
    padding: 0 1.35rem 1.3rem;
    font-size: var(--fs-sm);
    line-height: 1.78;
    color: var(--text-muted);
}
/* No-JS: show everything */
.no-js .accordion__panel[hidden] { display: block; }

/* ==========================================================================
   15. BLOG
   ========================================================================== */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(1.2rem, 2.2vw, 1.9rem);
}

.post-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--r-xl);
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
.post-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); }
.post-card__media { display: block; overflow: hidden; background: var(--slate-100); }
.post-card__media img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .8s var(--ease-out);
}
.post-card:hover .post-card__media img { transform: scale(1.06); }
.post-card__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.15rem, 2vw, 1.55rem); }
.post-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-bottom: .8rem;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
.post-card__title { font-size: var(--fs-lg); line-height: 1.32; margin-bottom: .55rem; }
.post-card__title a { color: inherit; }
.post-card__title a:hover { color: var(--indigo-600); }
.post-card__excerpt { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.7; margin-bottom: 1.1rem; }
.post-card__cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: auto;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--indigo-600);
}
.post-card__cta i { transition: transform var(--t-mid) var(--ease-out); }
.post-card:hover .post-card__cta i { transform: translateX(4px); }

/* Featured post --------------------------------------------------------- */
.featured-post {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(1.4rem, 3vw, 2.8rem);
    align-items: center;
    padding: clamp(1.2rem, 2.4vw, 1.8rem);
    margin-bottom: clamp(2rem, 4vw, 3.2rem);
    border-radius: var(--r-2xl);
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}
.featured-post__media { display: block; overflow: hidden; border-radius: var(--r-xl); }
.featured-post__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .8s var(--ease-out); }
.featured-post:hover .featured-post__media img { transform: scale(1.04); }
.featured-post__title { font-size: var(--fs-2xl); line-height: 1.22; margin-block: .5rem .7rem; }
.featured-post__title a { color: inherit; }
.featured-post__title a:hover { color: var(--indigo-600); }
.featured-post__excerpt { font-size: var(--fs-md); color: var(--text-muted); line-height: 1.75; margin-bottom: 1.3rem; }

/* Pagination ------------------------------------------------------------ */
.pagination {
    display: flex;
    justify-content: center;
    gap: .45rem;
    margin-top: clamp(2rem, 4vw, 3.2rem);
}
.pagination__link {
    display: grid;
    place-items: center;
    min-width: 44px; height: 44px;
    padding-inline: .7rem;
    border-radius: var(--r-md);
    background: var(--white);
    border: 1px solid var(--border);
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--slate-600);
    transition: all var(--t-fast) var(--ease-out);
}
.pagination__link:hover { border-color: var(--indigo-300); color: var(--indigo-700); background: var(--indigo-50); }
.pagination__link.is-active {
    background: var(--gradient-brand);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--shadow-brand);
}

.empty-state {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--fs-md);
}

/* Article --------------------------------------------------------------- */
.article-hero {
    position: relative;
    padding-block: calc(var(--header-h) + clamp(2.4rem, 5vw, 4rem)) clamp(2.4rem, 5vw, 3.6rem);
    background: var(--gradient-dark);
    color: #fff;
    overflow: hidden;
}
.article-hero__bg { position: absolute; inset: 0; overflow: hidden; }
.article-hero__inner { position: relative; z-index: 1; max-width: var(--container-narrow); }
.article-hero__title {
    font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem);
    font-weight: 800;
    letter-spacing: -.035em;
    color: #fff;
    margin-block: 1rem .9rem;
}
.article-hero__excerpt { font-size: var(--fs-md); line-height: 1.75; color: rgba(255,255,255,.74); max-width: 64ch; }

.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.1rem;
    margin-top: 1.8rem;
    font-size: var(--fs-sm);
    color: rgba(255,255,255,.66);
}
.article-meta i { margin-right: .4rem; opacity: .8; }
.article-meta__author { display: inline-flex; align-items: center; gap: .7rem; }
.article-meta__avatar {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    color: var(--indigo-300);
}
.article-meta__author strong { display: block; color: #fff; font-family: var(--font-display); font-size: var(--fs-sm); }
.article-meta__author small { font-size: var(--fs-xs); color: rgba(255,255,255,.55); }
.article-meta__divider { width: 1px; height: 26px; background: rgba(255,255,255,.16); }

.article-cover {
    margin-top: clamp(-2.6rem, -4vw, -2rem);
    position: relative;
    z-index: 2;
}
.article-cover img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-xl);
}

.section--article { padding-top: clamp(2.2rem, 4vw, 3.4rem); }
.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: clamp(1.8rem, 4vw, 3.6rem);
    align-items: start;
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: 2.4rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--border);
}
.article-tags__label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--slate-400); margin-right: .3rem; }

.article-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    margin-top: 1.6rem;
}
.article-share__label { font-size: var(--fs-sm); font-weight: 600; color: var(--slate-600); margin-right: .3rem; }
.article-share__btn {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 13px;
    background: var(--slate-100);
    color: var(--slate-600);
    transition: all var(--t-fast) var(--ease-out);
}
.article-share__btn:hover {
    background: var(--gradient-brand);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: var(--shadow-brand);
}

/* ==========================================================================
   16. FORMS
   ========================================================================== */
.enquiry-form { display: grid; gap: 1.3rem; }

.form-head { margin-bottom: 1.6rem; }
.form-head__title { font-size: var(--fs-2xl); margin-bottom: .5rem; }
.form-head__text { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.65; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.05rem;
}
.field--full { grid-column: 1 / -1; }

.field { display: grid; gap: .42rem; }
.field__label {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--slate-700);
}
.req { color: var(--danger-500); }

/* "optional" pill used on non-required fields */
.field__optional {
    margin-left: .4rem;
    padding: .1rem .45rem;
    border-radius: var(--r-pill);
    background: var(--stone-100);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--stone-500);
    vertical-align: 1px;
}

.field__control { position: relative; display: block; }
.field__icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .85rem;
    color: var(--slate-400);
    pointer-events: none;
    transition: color var(--t-fast) var(--ease-out);
}
.field__caret {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .7rem;
    color: var(--slate-400);
    pointer-events: none;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: .92rem 1.05rem .92rem 2.6rem;
    border-radius: var(--r-md);
    border: 1.5px solid var(--border-strong);
    background: rgba(255,255,255,.9);
    font-size: var(--fs-sm);
    color: var(--text);
    transition: border-color var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out),
                background-color var(--t-fast) var(--ease-out);
    appearance: none;
    -webkit-appearance: none;
}
.field select { padding-right: 2.6rem; cursor: pointer; }
.field__control--textarea textarea { padding-left: 1.05rem; resize: vertical; min-height: 120px; }
.field--sm input, .field--sm select { padding: .68rem .85rem; font-size: var(--fs-xs); }
.field--sm .field__label { font-size: var(--fs-xs); }

.field input::placeholder,
.field textarea::placeholder { color: var(--slate-400); }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--slate-300); }

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--indigo-500);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(184,147,78,.14);
}
.field input:focus + .field__icon,
.field__control:focus-within .field__icon { color: var(--indigo-600); }

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
    border-color: var(--rose-500);
    background: #fdf5f4;
}
.field.has-error input:focus,
.field.has-error textarea:focus { box-shadow: 0 0 0 4px rgba(180,69,60,.13); }

.field__error {
    display: none;
    font-size: var(--fs-xs);
    color: var(--rose-500);
    font-weight: 500;
}
.field__error:not(:empty) { display: block; }

.field__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.field__counter { font-size: var(--fs-xs); color: var(--slate-400); font-variant-numeric: tabular-nums; margin-left: auto; }

/* Checkbox -------------------------------------------------------------- */
.field--checkbox { gap: .3rem; }
.checkbox { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer; }
.checkbox input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
}
.checkbox__box {
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    flex-shrink: 0;
    margin-top: 1px;
    border-radius: 7px;
    border: 1.5px solid var(--border-strong);
    background: #fff;
    color: transparent;
    font-size: .68rem;
    transition: all var(--t-fast) var(--ease-out);
}
.checkbox input:checked + .checkbox__box {
    background: var(--gradient-brand);
    border-color: transparent;
    color: #fff;
}
.checkbox input:focus-visible + .checkbox__box {
    outline: 3px solid var(--indigo-500);
    outline-offset: 2px;
}
.checkbox__text { font-size: var(--fs-xs); line-height: 1.65; color: var(--text-muted); }

/* Radio pills ----------------------------------------------------------- */
.radio-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.radio-pill { position: relative; cursor: pointer; }
.radio-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio-pill span {
    display: inline-flex;
    align-items: center;
    padding: .58rem 1.1rem;
    border-radius: var(--r-pill);
    border: 1.5px solid var(--border-strong);
    background: #fff;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--slate-600);
    transition: all var(--t-fast) var(--ease-out);
}
.radio-pill:hover span { border-color: var(--slate-300); }
.radio-pill input:checked + span {
    background: var(--gradient-brand);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--shadow-brand);
}
.radio-pill input:focus-visible + span { outline: 3px solid var(--indigo-500); outline-offset: 2px; }
.priority-high input:checked + span   { background: linear-gradient(135deg,#c07a3c,#b4453c); }
.priority-urgent input:checked + span { background: linear-gradient(135deg,#b4453c,#8c332c); }
.priority-low input:checked + span    { background: linear-gradient(135deg,#2b7f86,#17727a); }

/* Form footer ----------------------------------------------------------- */
.enquiry-form__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.4rem;
    padding-top: .4rem;
}
.enquiry-form__note {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    max-width: 46ch;
    line-height: 1.55;
}
.enquiry-form__note i { color: var(--green-500); }

/* Alerts & feedback ----------------------------------------------------- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .95rem 1.15rem;
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    line-height: 1.6;
}
.alert i { margin-top: .16rem; }
.alert--error   { background: #fdf3f2; border: 1px solid #eccfcb; color: #8c332c; }
.alert--success { background: #f0f5f1; border: 1px solid #c2d8c9; color: #31624a; }

.form-feedback {
    display: none;
    padding: .9rem 1.1rem;
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    line-height: 1.6;
}
.form-feedback.is-visible { display: block; }
.form-feedback.is-success { background: #f0f5f1; border: 1px solid #c2d8c9; color: #31624a; }
.form-feedback.is-error   { background: #fdf3f2; border: 1px solid #eccfcb; color: #8c332c; }

/* Newsletter ------------------------------------------------------------ */
.newsletter { margin-top: 1.6rem; display: grid; gap: .55rem; }
.newsletter__row { display: flex; gap: .5rem; }
.newsletter__input {
    flex: 1;
    min-width: 0;
    padding: .78rem 1rem;
    border-radius: var(--r-md);
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: var(--fs-sm);
    transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.newsletter__input::placeholder { color: rgba(255,255,255,.4); }
.newsletter__input:focus {
    outline: none;
    border-color: var(--indigo-300);
    background: rgba(255,255,255,.1);
    box-shadow: 0 0 0 4px rgba(184,147,78,.18);
}
.newsletter__btn {
    display: grid;
    place-items: center;
    width: 48px;
    flex-shrink: 0;
    border-radius: var(--r-md);
    /* Also on the ink footer. */
    background: var(--gradient-brass-light);
    color: var(--ink-800);
    transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.newsletter__btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-brand); }
.newsletter__hint { font-size: var(--fs-xs); color: rgba(255,255,255,.42); line-height: 1.55; }
.newsletter .form-feedback { font-size: var(--fs-xs); padding: .6rem .8rem; }

/* ==========================================================================
   17. CONTACT & MAP
   ========================================================================== */
.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(1.8rem, 4vw, 3.6rem);
    align-items: start;
}
.contact-layout--reverse { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.contact-layout__form { padding: clamp(1.5rem, 3vw, 2.6rem); }

.contact-points { display: grid; gap: 1.1rem; margin-top: var(--sp-6); }
.contact-points li { display: flex; align-items: center; gap: .95rem; }
.contact-points strong {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    color: var(--ink-900);
}
.contact-points span span { font-size: var(--fs-sm); color: var(--text-muted); }
.contact-points__icon {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    flex-shrink: 0;
    border-radius: 15px;
    background: var(--gradient-soft);
    color: var(--indigo-600);
}

.channel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.channel-card {
    display: block;
    padding: clamp(1.3rem, 2.2vw, 1.7rem);
    color: var(--ink-900);
    transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
a.channel-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); color: var(--ink-900); }
.channel-card h2 { font-size: var(--fs-base); margin-block: .8rem .3rem; }
.channel-card p { font-size: var(--fs-sm); font-weight: 600; color: var(--indigo-600); margin-bottom: .25rem; word-break: break-word; }
.channel-card small { font-size: var(--fs-xs); color: var(--text-muted); }
.channel-card address { font-size: var(--fs-sm); color: var(--slate-600); line-height: 1.6; margin-bottom: .3rem; }
.channel-card__icon {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    border-radius: 15px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.05rem;
}

.map-panel {
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    margin-bottom: 1rem;
}
.map-panel iframe { display: block; width: 100%; border: 0; }
.map-panel__directions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1rem;
    border-top: 1px solid var(--border);
    background: var(--white);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-800);
    transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.map-panel__directions i { color: var(--brass-600); }
.map-panel__directions:hover { background: var(--cream-200); color: var(--brass-700); }
.map-placeholder {
    display: grid;
    place-items: center;
    gap: .55rem;
    min-height: 340px;
    padding: 2rem 1.5rem;
    text-align: center;
    background:
        radial-gradient(600px 300px at 50% 0%, rgba(184,147,78,.1), transparent 65%),
        repeating-linear-gradient(45deg, var(--slate-50) 0 14px, var(--white) 14px 28px);
}
.map-placeholder__pin {
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--gradient-brand);
    color: #fff;
    font-size: 1.25rem;
    box-shadow: var(--shadow-brand);
    animation: pin-bob 2.6s var(--ease-in-out) infinite;
}
@keyframes pin-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.map-placeholder__title { font-family: var(--font-display); font-weight: 700; color: var(--ink-900); }
.map-placeholder__text { font-size: var(--fs-sm); color: var(--slate-600); }
.map-placeholder__hint { font-size: var(--fs-xs); color: var(--slate-400); max-width: 40ch; }
.map-placeholder code {
    padding: .1rem .4rem;
    border-radius: 5px;
    background: var(--slate-100);
    font-size: .95em;
}

.response-panel { padding: clamp(1.4rem, 2.4vw, 1.9rem); }
.response-panel__title { font-size: var(--fs-lg); margin-bottom: 1.2rem; }
.response-steps { display: grid; gap: 1.1rem; margin-bottom: 1.3rem; }
.response-steps li { display: flex; gap: .9rem; align-items: flex-start; }
.response-steps strong { display: block; font-family: var(--font-display); font-size: var(--fs-sm); }
.response-steps p { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.6; margin-top: .15rem; }
.response-steps__num {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--indigo-50);
    color: var(--indigo-700);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .82rem;
}

/* Mission / values / why ------------------------------------------------ */
.mv-grid, .values-grid, .why-grid {
    display: grid;
    gap: clamp(1.1rem, 2vw, 1.6rem);
}
.mv-grid   { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.values-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.why-grid  { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.mv-card { padding: clamp(1.6rem, 2.6vw, 2.2rem); }
.mv-card h2 { font-size: var(--fs-xl); margin-block: 1rem .6rem; }
.mv-card p { font-size: var(--fs-md); color: var(--slate-600); line-height: 1.75; }
.mv-card__icon {
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    border-radius: 18px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.25rem;
}

.value-card {
    padding: clamp(1.4rem, 2.2vw, 1.9rem);
    border-radius: var(--r-xl);
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
.value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.value-card h3 { font-size: var(--fs-base); margin-block: .9rem .4rem; }
.value-card p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.7; }
.value-card__icon {
    display: grid;
    place-items: center;
    width: 50px; height: 50px;
    border-radius: 16px;
    background: var(--gradient-brand);
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 12px 26px -12px rgba(154,120,56,.6);
}

.why-card { padding: clamp(1.3rem, 2.2vw, 1.8rem); }
.why-card h3 { font-size: var(--fs-base); margin-block: .85rem .4rem; }
.why-card p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.7; }
.why-card__icon {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 15px;
    background: var(--gradient-soft);
    color: var(--indigo-600);
}

/* Story ----------------------------------------------------------------- */
.story-layout {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(1.8rem, 4vw, 3.8rem);
    align-items: center;
}
.story-layout__media { position: relative; }
.story-layout__media img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-lg);
}
.story-badge {
    position: absolute;
    right: -14px;
    bottom: -18px;
    display: grid;
    gap: .1rem;
    padding: 1rem 1.4rem;
    border-radius: var(--r-lg);
}
.story-badge strong { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--indigo-700); }
.story-badge span { font-size: var(--fs-xs); color: var(--text-muted); }
.story-text { font-size: var(--fs-md); color: var(--slate-600); line-height: 1.85; margin-top: 1rem; }

/* ==========================================================================
   18. LEGAL / PROSE
   ========================================================================== */
.legal-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: clamp(1.8rem, 4vw, 3.6rem);
    align-items: start;
}
.legal-toc__panel { padding: 1.3rem 1.4rem; }
.legal-toc__title {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--slate-400);
    margin-bottom: .8rem;
}
.legal-toc ol { display: grid; gap: .1rem; counter-reset: toc; }
.legal-toc a {
    display: block;
    padding: .45rem .6rem;
    border-radius: 9px;
    font-size: var(--fs-sm);
    color: var(--slate-600);
    transition: all var(--t-fast) var(--ease-out);
}
.legal-toc a:hover, .legal-toc a.is-active {
    background: var(--indigo-50);
    color: var(--indigo-700);
    font-weight: 600;
}

.legal-content { max-width: 78ch; }
.legal-updated { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--border); color: var(--slate-400); font-size: var(--fs-sm); }

.prose { font-size: var(--fs-md); line-height: 1.82; color: var(--slate-700); }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 {
    font-size: var(--fs-xl);
    margin-top: 2.6rem;
    margin-bottom: .3rem;
    scroll-margin-top: calc(var(--header-h) + 24px);
}
.prose h3 { font-size: var(--fs-lg); margin-top: 1.9rem; margin-bottom: .2rem; }
.prose ul, .prose ol { padding-left: 1.4rem; display: grid; gap: .55rem; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose ul.tick-list, .prose .tick-list { padding-left: 0; }
.prose .tick-list li { list-style: none; }
.prose strong { color: var(--ink-900); font-weight: 600; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose blockquote {
    padding: 1.1rem 1.4rem;
    border-left: 4px solid var(--indigo-500);
    background: var(--indigo-50);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-style: italic;
}
.prose code {
    padding: .12rem .4rem;
    border-radius: 5px;
    background: var(--slate-100);
    font-size: .9em;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.prose .note, .note-block {
    display: block;
    padding: 1rem 1.25rem;
    border-radius: var(--r-md);
    background: #faf4e9;
    border: 1px solid #e8d3ab;
    color: #7b5f2b;
    font-size: var(--fs-sm);
}
.note-block i { margin-right: .5rem; }

.tick-list { display: grid; gap: .6rem; }
.tick-list li {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--slate-700);
}
.tick-list i { color: var(--accent, var(--indigo-600)); margin-top: .35rem; flex-shrink: 0; font-size: .82rem; }

.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--border); }
.data-table { min-width: 520px; font-size: var(--fs-sm); }
.data-table th, .data-table td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--border); }
.data-table thead th {
    background: var(--slate-50);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--slate-500);
}
.data-table tbody tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   19. FOOTER
   ========================================================================== */
.site-footer { background: var(--ink-800); color: rgba(255,255,255,.72); }

.footer-cta { padding-block: clamp(2.5rem, 5vw, 4rem) 0; background: var(--bg); }
.footer-cta__card {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, auto);
    gap: clamp(1.4rem, 3vw, 3rem);
    align-items: center;
    padding: clamp(1.9rem, 4vw, 3.2rem);
}
.footer-cta h2 { font-size: var(--fs-2xl); margin-bottom: .7rem; max-width: 20ch; }
.footer-cta p { font-size: var(--fs-md); max-width: 52ch; }
.footer-cta__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

.footer-main { padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); }
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.5fr;
    gap: clamp(1.6rem, 3vw, 3rem);
}
.brand--footer .brand__name { color: #fff; }
.brand--footer .brand__suffix { color: rgba(255,255,255,.45); }
.brand--footer:hover { color: #fff; }

.footer-about {
    margin-top: 1.1rem;
    font-size: var(--fs-sm);
    line-height: 1.75;
    color: rgba(255,255,255,.52);
    max-width: 42ch;
}

.footer-heading {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 1.1rem;
}
.footer-heading--sm { font-size: var(--fs-xs); margin-bottom: .55rem; }

.footer-links { display: grid; gap: .6rem; }
.footer-links a {
    font-size: var(--fs-sm);
    color: rgba(255,255,255,.6);
    transition: color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
    display: inline-block;
}
.footer-links a:hover { color: #fff; transform: translateX(4px); }

.footer-contact { display: grid; gap: .85rem; }
.footer-contact li { display: flex; align-items: flex-start; gap: .7rem; font-size: var(--fs-sm); color: rgba(255,255,255,.6); line-height: 1.6; }
.footer-contact i { color: var(--indigo-300); margin-top: .28rem; font-size: .85rem; flex-shrink: 0; }
.footer-contact a { color: rgba(255,255,255,.72); }
.footer-contact a:hover { color: #fff; }

.social-list { display: flex; gap: .55rem; margin-top: 1.3rem; }
.social-list a {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 13px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.68);
    transition: all var(--t-mid) var(--ease-out);
}
.social-list a:hover {
    /* Footer is ink — brass reads, charcoal does not. */
    background: var(--gradient-brass-light);
    border-color: transparent;
    color: var(--ink-800);
    transform: translateY(-3px);
    box-shadow: var(--shadow-brand);
}

.footer-bottom {
    padding-block: 1.4rem 2rem;
    border-top: 1px solid rgba(255,255,255,.08);
}
.footer-bottom__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .8rem 1.5rem;
}
.footer-copy { font-size: var(--fs-xs); color: rgba(255,255,255,.42); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.footer-legal a, .footer-legal__btn {
    font-size: var(--fs-xs);
    color: rgba(255,255,255,.5);
    transition: color var(--t-fast) var(--ease-out);
}
.footer-legal a:hover, .footer-legal__btn:hover { color: #fff; }
.footer-disclaimer {
    margin-top: 1.2rem;
    font-size: .72rem;
    line-height: 1.7;
    color: rgba(255,255,255,.32);
    max-width: 105ch;
}

/* ==========================================================================
   20. FLOATING ACTIONS
   ========================================================================== */
.floating-actions {
    position: fixed;
    left: 22px;
    bottom: 22px;
    z-index: 900;
    display: grid;
    gap: .7rem;
}

.fab {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    color: #fff;
    font-size: 1.35rem;
    box-shadow: var(--shadow-lg);
    transition: transform var(--t-mid) var(--ease-spring), box-shadow var(--t-mid) var(--ease-out);
}
.fab:hover { transform: translateY(-4px) scale(1.06); color: #fff; }
.fab::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    padding: .45rem .8rem;
    border-radius: 9px;
    background: var(--ink-800);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.fab:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

/* WhatsApp keeps a recognisable green — it is a UI affordance people identify
   instantly — but deepened slightly so it sits comfortably beside the brass. */
.fab--whatsapp { background: linear-gradient(140deg, #1fa855, #12764a); }
.fab--whatsapp .fab__pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(31,168,85,.6);
    animation: fab-pulse 2.4s var(--ease-out) infinite;
}
@keyframes fab-pulse {
    0%   { transform: scale(1); opacity: .8; }
    70%  { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
}

.fab--top {
    width: 48px; height: 48px;
    font-size: 1rem;
    background: rgba(255,255,255,.85);
    color: var(--ink-800);
    border: 1px solid var(--border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out);
}
.fab--top.is-visible { opacity: 1; transform: translateY(0); }
.fab--top:hover { color: var(--indigo-700); }

/* ==========================================================================
   21. AI ASSISTANT
   ========================================================================== */
.ai-launcher {
    position: fixed;
    right: 22px;
    bottom: 22px;
    /* Above the sticky header (1000) and the mobile drawer (1050), so the
       panel is never clipped and its close button is always reachable. */
    z-index: 1060;
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    height: 58px;
    padding: 0 1.35rem 0 .55rem;
    border-radius: var(--r-pill);
    background: var(--gradient-brand);
    color: #fff;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 700;
    box-shadow: 0 20px 44px -16px rgba(154,120,56,.72);
    transition: transform var(--t-mid) var(--ease-spring), box-shadow var(--t-mid) var(--ease-out),
                opacity var(--t-mid) var(--ease-out);
}
.ai-launcher:hover { transform: translateY(-4px) scale(1.03); color: #fff; }
.ai-launcher.is-hidden { opacity: 0; visibility: hidden; transform: scale(.85); }
.ai-launcher__icon {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    font-size: 1.1rem;
}
.ai-launcher__dot {
    position: absolute;
    top: 6px; right: 12px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #7fae90;
    border: 2px solid #fff;
    animation: pulse-dot 2.6s var(--ease-out) infinite;
}

/* `--app-vh` is published by ai-assistant.js from window.visualViewport, so it
   shrinks when a phone's on-screen keyboard appears. Viewport units do not:
   svh and dvh both keep reporting the full screen, which let the panel stay
   taller than the space actually visible and pushed its header — and with it
   the close button — off the top. The unit fallback covers the first paint. */
.ai-panel {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1070;
    display: flex;
    flex-direction: column;
    width: min(408px, calc(100vw - 32px));
    max-height: min(660px, calc(var(--app-vh, 100dvh) - 44px));
    opacity: 0;
    transform: translateY(18px) scale(.97);
    transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out);
}
/* display:flex above would otherwise defeat the hidden attribute. */
.ai-panel[hidden] { display: none; }

/* Phones only — see the mobile block near the end of this file. */
.ai-backdrop { display: none; }
.ai-panel.is-open { opacity: 1; transform: translateY(0) scale(1); }

/* The inner card is a flex child rather than carrying `max-height: inherit`.
   inherit copies the parent's computed max-height, which resolved against a
   stale viewport height and let the card render taller than the panel that
   contains it. As a flex item it simply cannot exceed its parent. */
.ai-panel__inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: var(--r-xl);
    background: rgba(255,255,255,.9);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

/* The header carries the close button, so it must never be squeezed out of
   the panel. Everything below it is allowed to shrink; the log absorbs the
   difference. Without this the stacked minimum heights overflowed a short
   phone screen and pushed the header — and the close button — off the top. */
.ai-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1rem;
    background: var(--gradient-brand);
    color: #fff;
    flex-shrink: 0;
}
.ai-panel__identity { display: flex; align-items: center; gap: .7rem; }
.ai-avatar {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    font-size: 1rem;
}
.ai-panel__meta { display: grid; line-height: 1.25; }
.ai-panel__meta strong { font-family: var(--font-display); font-size: var(--fs-sm); }
.ai-panel__meta small {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: var(--fs-xs);
    color: rgba(255,255,255,.8);
}
.ai-status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #7fae90;
    box-shadow: 0 0 0 0 rgba(74,222,128,.6);
    animation: pulse-dot 2.6s var(--ease-out) infinite;
}
.ai-panel__close {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: rgba(255,255,255,.16);
    color: #fff;
    transition: background var(--t-fast) var(--ease-out);
}
.ai-panel__close:hover { background: rgba(255,255,255,.28); }

.ai-panel__log {
    flex: 1;
    min-height: 220px;
    padding: 1.1rem;
    overflow-y: auto;
    display: grid;
    gap: .8rem;
    align-content: start;
    scroll-behavior: smooth;
    background: rgba(248,250,252,.6);
}
.ai-panel__log::-webkit-scrollbar { width: 6px; }
.ai-panel__log::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 3px; }

.ai-msg {
    max-width: 84%;
    padding: .75rem 1rem;
    border-radius: 16px;
    font-size: var(--fs-sm);
    line-height: 1.65;
    animation: msg-in .32s var(--ease-out) both;
    overflow-wrap: anywhere;
}
@keyframes msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ai-msg--bot {
    justify-self: start;
    background: #fff;
    border: 1px solid var(--border);
    border-bottom-left-radius: 5px;
    color: var(--slate-700);
    box-shadow: var(--shadow-xs);
}
.ai-msg--user {
    justify-self: end;
    background: var(--gradient-brand);
    border-bottom-right-radius: 5px;
    color: #fff;
}
.ai-msg p + p { margin-top: .6rem; }
.ai-msg a { color: inherit; text-decoration: underline; }

.ai-typing { display: inline-flex; gap: 4px; padding: .95rem 1rem; }
.ai-typing span {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--slate-400);
    animation: typing 1.3s var(--ease-in-out) infinite;
}
.ai-typing span:nth-child(2) { animation-delay: .18s; }
.ai-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); opacity: .45; }
    30% { transform: translateY(-5px); opacity: 1; }
}

.ai-quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: 0 1.1rem .8rem;
    background: rgba(248,250,252,.6);
}
.ai-quick-replies:empty { display: none; }
.ai-quick-reply {
    padding: .45rem .85rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--indigo-100);
    background: #fff;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--indigo-700);
    transition: all var(--t-fast) var(--ease-out);
}
.ai-quick-reply:hover {
    background: var(--indigo-50);
    border-color: var(--indigo-300);
    transform: translateY(-2px);
}

/* Lead form ------------------------------------------------------------- */
.ai-lead {
    padding: 1rem 1.1rem;
    border-top: 1px solid var(--border);
    background: #fff;
    max-height: 340px;
    overflow-y: auto;
}
.ai-lead__intro { font-size: var(--fs-xs); font-weight: 600; color: var(--slate-600); margin-bottom: .8rem; }
.ai-lead__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.ai-lead__grid .field input,
.ai-lead__grid .field select { padding-left: .85rem; }
.ai-lead__message { margin-top: .6rem; }
/* Shorter than the site-wide 120px: the panel is height-constrained on a
   phone, and this field is optional — it must not push the submit button
   out of reach to make room for text nobody has to write. */
.ai-lead__message .field__control--textarea textarea {
    min-height: 74px;
    padding-left: .85rem;
}
.ai-lead__hint {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin-top: .6rem;
    padding: .55rem .7rem;
    border-radius: var(--r-sm);
    background: var(--cream-200);
    font-size: .68rem;
    line-height: 1.55;
    color: var(--stone-600);
}
.ai-lead__hint i { color: var(--brass-600); margin-top: .15rem; flex-shrink: 0; }

.ai-lead__consent { font-size: .7rem; color: var(--slate-400); margin-top: .7rem; line-height: 1.5; }
.ai-lead__actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .8rem; }
.ai-lead .form-feedback { margin-top: .7rem; font-size: var(--fs-xs); padding: .6rem .8rem; }

/* Composer -------------------------------------------------------------- */
.ai-composer {
    display: flex;
    gap: .5rem;
    padding: .8rem 1rem;
    border-top: 1px solid var(--border);
    background: #fff;
    flex-shrink: 0;
}
.ai-composer__input {
    flex: 1;
    min-width: 0;
    padding: .72rem 1rem;
    border-radius: var(--r-pill);
    border: 1.5px solid var(--border-strong);
    background: var(--slate-50);
    font-size: var(--fs-sm);
    transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.ai-composer__input:focus {
    outline: none;
    border-color: var(--indigo-500);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(184,147,78,.13);
}
.ai-composer__send {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--gradient-brand);
    color: #fff;
    transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.ai-composer__send:hover { transform: scale(1.06); box-shadow: var(--shadow-brand); }
.ai-composer__send:disabled { opacity: .55; pointer-events: none; }

.ai-panel__disclaimer {
    padding: .6rem 1rem .85rem;
    background: #fff;
    font-size: .68rem;
    line-height: 1.5;
    color: var(--slate-400);
    text-align: center;
    flex-shrink: 0;
}

/* ==========================================================================
   22. COOKIE BANNER
   ========================================================================== */
.cookie-banner {
    position: fixed;
    left: 50%;
    bottom: 18px;
    z-index: 980;
    width: min(720px, calc(100vw - 32px));
    transform: translate(-50%, 130%);
    transition: transform .5s var(--ease-out);
}
.cookie-banner.is-visible { transform: translate(-50%, 0); }
.cookie-banner__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.2rem;
    align-items: center;
    padding: 1.15rem 1.4rem;
    background: rgba(255,255,255,.92);
    box-shadow: var(--shadow-xl);
}
.cookie-banner__title {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: var(--fs-base);
    margin-bottom: .35rem;
}
.cookie-banner__title i { color: var(--amber-500); }
.cookie-banner__text { font-size: var(--fs-xs); line-height: 1.65; color: var(--text-muted); }
.cookie-banner__actions { display: flex; gap: .5rem; flex-shrink: 0; }

/* ==========================================================================
   23. CONFIRMATION & ERROR PAGES
   ========================================================================== */
.section--confirmation, .section--error {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 82svh;
    padding-block: calc(var(--header-h) + 3rem) 4rem;
    background: var(--gradient-dark);
    overflow: hidden;
}
.confirmation__bg { position: absolute; inset: 0; overflow: hidden; }
.section--confirmation .container, .section--error .container { position: relative; z-index: 1; }

.confirmation-card {
    --glass-bg: rgba(255,255,255,.95);
    max-width: 640px;
    margin-inline: auto;
    padding: clamp(1.8rem, 4vw, 3rem);
    text-align: center;
}
.confirmation-card__tick { display: block; margin: 0 auto 1.4rem; width: 72px; }
.tick__circle {
    stroke: var(--green-500);
    stroke-dasharray: 152;
    stroke-dashoffset: 152;
    animation: tick-circle .7s var(--ease-out) forwards;
}
.tick__check {
    stroke: var(--green-500);
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: tick-check .45s var(--ease-out) .55s forwards;
}
@keyframes tick-circle { to { stroke-dashoffset: 0; } }
@keyframes tick-check  { to { stroke-dashoffset: 0; } }

.confirmation-card__title { font-size: var(--fs-2xl); margin-bottom: .8rem; }
.confirmation-card__text { font-size: var(--fs-md); color: var(--text-muted); line-height: 1.75; }
.confirmation-card__note { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 1rem; line-height: 1.7; }
.confirmation-card__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1.8rem; }

.reference-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    margin: 1.6rem auto 0;
    padding: 1.2rem 1.5rem;
    border-radius: var(--r-lg);
    background: var(--ink-800);
    color: #fff;
}
.reference-box__label {
    width: 100%;
    font-size: var(--fs-xs);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
}
.reference-box__value {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem);
    font-weight: 800;
    letter-spacing: .08em;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.reference-box__copy {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .9rem;
    border-radius: var(--r-pill);
    background: rgba(255,255,255,.1);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 600;
    transition: background var(--t-fast) var(--ease-out);
}
.reference-box__copy:hover { background: rgba(255,255,255,.2); }

.confirmation-next {
    display: grid;
    gap: .7rem;
    margin-top: 1.6rem;
    text-align: left;
}
.confirmation-next li {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem 1rem;
    border-radius: var(--r-md);
    background: var(--slate-50);
    font-size: var(--fs-sm);
    color: var(--slate-600);
}
.confirmation-next i { color: var(--indigo-600); }

/* Error page ------------------------------------------------------------ */
.error-page { text-align: center; color: #fff; }
.error-page__code {
    font-family: var(--font-display);
    font-size: clamp(5rem, 3rem + 12vw, 11rem);
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.05em;
}
.error-page__title { color: #fff; font-size: var(--fs-2xl); margin-block: .6rem 1rem; }
.error-page__text { color: rgba(255,255,255,.7); font-size: var(--fs-md); max-width: 52ch; margin-inline: auto; }
.error-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2rem; }
.error-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .8rem;
    max-width: 780px;
    margin: 2.8rem auto 0;
}
.error-links__item {
    --glass-bg: rgba(255,255,255,.08);
    --glass-border: rgba(255,255,255,.14);
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .95rem 1.15rem;
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: rgba(255,255,255,.85);
    transition: transform var(--t-mid) var(--ease-out), background var(--t-mid) var(--ease-out);
}
.error-links__item:hover { color: #fff; background: rgba(255,255,255,.14); transform: translateY(-3px); }
.error-links__item i { color: var(--indigo-300); }

/* ==========================================================================
   24. UTILITIES
   ========================================================================== */
[data-float] { will-change: transform; }
[hidden] { display: none !important; }

/* AOS fallback: if AOS never initialises, content must still be visible. */
.no-js [data-aos] { opacity: 1 !important; transform: none !important; }

/* ==========================================================================
   25. RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
    .site-nav__list { gap: 0; }
    .site-nav__link { padding-inline: .65rem; font-size: .84rem; }
    .header-phone { display: none; }
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
    .footer-col--contact { grid-column: 1 / -1; }
    .detail-layout, .article-layout { grid-template-columns: minmax(0, 1fr) 300px; }
    .legal-layout { grid-template-columns: 220px minmax(0, 1fr); }
}

@media (max-width: 1024px) {
    :root { --header-h: 74px; }

    .site-nav { display: none; }
    .nav-toggle { display: flex; }

    .hero__inner { grid-template-columns: 1fr; gap: 3rem; }
    .hero__visual { max-width: 520px; }
    .hero__title { max-width: 18ch; }
    .hero__scroll { display: none; }

    .section-head { grid-template-columns: 1fr; align-items: start; }
    .section-head__link { justify-self: start; }

    .service-block__head,
    .guide-layout,
    .story-layout,
    .featured-post,
    .faq-layout,
    .contact-layout,
    .contact-layout--reverse,
    .cta-band,
    .footer-cta__card {
        grid-template-columns: 1fr;
    }
    .story-layout__media { order: -1; }
    .story-badge { right: 12px; bottom: -14px; }

    .detail-layout, .article-layout, .legal-layout { grid-template-columns: 1fr; }
    .sticky-panel { position: static; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .legal-toc { display: none; }

    .timeline__spine { left: 20px; }
    .timeline__item, .timeline__item--right {
        width: 100%;
        margin-left: 0;
        padding-left: 62px;
        padding-right: 0;
    }
    .timeline__marker,
    .timeline__item--right .timeline__marker { left: 0; right: auto; }
}

@media (max-width: 768px) {
    .form-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-col--brand { grid-column: 1 / -1; }
    .cookie-banner__panel { grid-template-columns: 1fr; }
    .cookie-banner__actions { justify-content: stretch; }
    .cookie-banner__actions .btn { flex: 1; }
    .article-cover { margin-top: -1.4rem; }
    .products-grid--preview { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    :root { --header-h: 68px; }

    .btn--lg { --btn-py: .9rem; --btn-px: 1.5rem; font-size: var(--fs-sm); }
    .hero__actions .btn,
    .page-hero__actions .btn,
    .cta-band__actions .btn,
    .footer-cta__actions .btn,
    .confirmation-card__actions .btn,
    .error-page__actions .btn { width: 100%; }

    .hero-chip { display: none; }
    .brand__suffix { display: none; }

    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom__inner { flex-direction: column; align-items: flex-start; }

    .floating-actions { left: 14px; bottom: 14px; }
    .fab { width: 50px; height: 50px; font-size: 1.2rem; }
    .fab::after { display: none; }

    .ai-launcher { right: 14px; bottom: 14px; height: 52px; padding-right: 1.1rem; }
    .ai-launcher__icon { width: 42px; height: 42px; }
    /* svh is the viewport height with the browser toolbars showing — the
       height that is guaranteed visible, and the fallback until the script
       measures the real visible height. */
    .ai-panel {
        right: 8px; left: 8px;
        bottom: calc(8px + var(--app-vv-inset, 0px));
        width: auto;
        max-height: calc(var(--app-vh, 100svh) - 16px);
    }
    /* Let the log give up space so the header and composer always fit. */
    .ai-panel__log { min-height: 0; }
    .ai-lead { max-height: 38svh; }

    /* A tap anywhere outside the card closes the assistant. On a phone the
       launcher is underneath the open panel, so the header button was the only
       way out — this gives a second, obvious one. */
    .ai-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1065;
        background: rgba(33,40,50,.45);
        opacity: 0;
        transition: opacity var(--t-mid) var(--ease-out);
    }
    .ai-backdrop.is-open { opacity: 1; }

    .ai-lead__grid { grid-template-columns: 1fr; }

    .enquiry-form__footer { flex-direction: column; align-items: stretch; }
    .enquiry-form__footer .btn { width: 100%; }
}

/* ==========================================================================
   26. MOTION & PRINT PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    html { scroll-behavior: auto; }
    .orb { animation: none; }
    .hero__canvas { display: none; }
    [data-aos] { opacity: 1 !important; transform: none !important; }
}

/* Fallback for browsers without backdrop-filter (older Firefox/Safari) --- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass { background: rgba(255,255,255,.96); }
    .site-header::after { background: rgba(255,255,255,.98); }
    .mobile-nav::before { background: #fff; }
    .ai-panel__inner { background: #fff; }
    .cookie-banner__panel { background: #fff; }
}

@media print {
    .site-header, .mobile-nav, .floating-actions, .ai-launcher, .ai-panel,
    .cookie-banner, .scroll-progress, .preloader, .footer-cta, .section--cta,
    .hero__scroll, .article-share, .chip-nav, .pagination { display: none !important; }

    body { background: #fff; color: #000; }
    .hero, .page-hero, .article-hero { background: #fff !important; color: #000; padding-block: 1rem; }
    .hero__title, .page-hero__title, .article-hero__title, .error-page__title { color: #000; }
    .hero__subtitle, .page-hero__subtitle, .article-hero__excerpt { color: #333; }
    .glass, .glass-dark { background: #fff !important; border: 1px solid #ddd; box-shadow: none; color: #000; }
    a { text-decoration: underline; color: #000; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
    .section { padding-block: 1.2rem; break-inside: avoid; }
}