/* ==========================================================================
   Twelve10 Co Ltd — design system
   Material Design 3 structure, Twelve10 palette.

   Source colours:  Golden Brown #A67C00 · White #F7F8FA · Dark Blue #001F3F
   Type:            Georgia Pro (display/body) + Inter (labels/UI)

   Sections:
     1. Tonal palettes
     2. Scheme tokens (light / dark / contextual)
     3. Elevation, shape, motion, state layers
     4. Base + typography scale
     5. Layout primitives
     6. Components
     7. Page sections
     8. Motion + accessibility
   ========================================================================== */

/* ==========================================================================
   1. TONAL PALETTES
   Fixed reference ramps. Nothing outside section 2 should read these.
   ========================================================================== */

:root{
  /* Primary — Golden Brown */
  --gold-10:#213232; --gold-20:#3F4227; --gold-30:#60551A; --gold-40:#85690D;
  --gold-50:#A67C00; --gold-60:#B5922D; --gold-70:#C2A655; --gold-80:#D0BC82;
  --gold-90:#E0D5B4; --gold-95:#EBE5D4; --gold-99:#F4F3F0;

  /* Secondary — Dark Blue, opened into a violet-indigo ramp */
  --ink-10:#001F3F; --ink-20:#14304E; --ink-30:#28425D; --ink-40:#405770;
  --ink-50:#5E7186; --ink-60:#7C8C9C; --ink-70:#99A6B3; --ink-80:#B7C0C9;
  --ink-90:#D4DAE0; --ink-95:#E6E9ED;

  /* Neutral — tinted toward the ink so greys never go muddy */
  --n-0:#001F3F;  --n-4:#001F3F;  --n-6:#0A2846;  --n-10:#001F3F;
  --n-12:#112E4C; --n-17:#1E3955; --n-22:#2A445F; --n-24:#344D66;
  --n-30:#435A71; --n-40:#5E7186; --n-50:#7C8C9C; --n-60:#94A1AF;
  --n-70:#ADB7C2; --n-80:#C3CAD3; --n-90:#D9DEE4; --n-92:#E1E4E9;
  --n-94:#E7EAEE; --n-96:#ECEEF2; --n-98:#F1F3F5; --n-100:#F7F8FA;

  /* Warm neutral — the sand band */
  --sand-90:#F0EDE4; --sand-80:#EAE4D2; --sand-70:#E2D8B9;
}

/* ==========================================================================
   2. SCHEME TOKENS
   :root carries the light scheme. .scheme-dark flips a subtree.
   Every component below reads only these, so a section changes scheme by
   swapping one class.
   ========================================================================== */

:root,
.scheme-light{
  --primary:            var(--gold-40);
  --on-primary:         var(--n-100);
  --primary-container:  var(--gold-90);
  --on-primary-container: var(--gold-10);
  --primary-fixed-dim:  var(--gold-50);

  --secondary:            var(--ink-40);
  --on-secondary:         var(--n-100);
  --secondary-container:  var(--ink-90);
  --on-secondary-container: var(--ink-10);

  --surface:            #F7F8FA;
  --surface-dim:        var(--n-90);
  --surface-bright:     var(--n-100);
  --surface-lowest:     var(--n-100);
  --surface-low:        var(--n-98);
  --surface-c:          var(--n-96);
  --surface-high:       var(--n-94);
  --surface-highest:    var(--n-92);

  --on-surface:         var(--n-10);
  --on-surface-var:     #4F647B;
  --outline:            var(--n-50);
  --outline-var:        var(--n-80);

  --inverse-surface:    var(--n-10);
  --on-inverse-surface: var(--n-94);
  --inverse-primary:    var(--gold-80);

  --scrim:              rgba(0, 31, 63, .55);
  --surface-tint:       var(--gold-50);

  /* State-layer opacities travel with the scheme so overlays stay legible */
  --state-hover: .08;
  --state-focus: .10;
  --state-press: .10;
}

.scheme-dark{
  --primary:            var(--gold-80);
  --on-primary:         var(--gold-20);
  --primary-container:  var(--gold-30);
  --on-primary-container: var(--gold-90);
  --primary-fixed-dim:  var(--gold-70);

  --secondary:            var(--ink-80);
  --on-secondary:         var(--ink-20);
  --secondary-container:  var(--ink-30);
  --on-secondary-container: var(--ink-90);

  --surface:            var(--n-6);
  --surface-dim:        var(--n-4);
  --surface-bright:     var(--n-30);
  --surface-lowest:     var(--n-4);
  --surface-low:        var(--n-12);
  --surface-c:          var(--n-17);
  --surface-high:       var(--n-22);
  --surface-highest:    var(--n-24);

  --on-surface:         #F7F8FA;
  --on-surface-var:     var(--n-80);
  --outline:            var(--n-60);
  --outline-var:        var(--n-30);

  --inverse-surface:    var(--n-90);
  --on-inverse-surface: var(--n-10);
  --inverse-primary:    var(--gold-40);

  --scrim:              rgba(0, 31, 63, .6);
  --surface-tint:       var(--gold-80);

  --state-hover: .10;
  --state-focus: .12;
  --state-press: .12;
}

/* The warm band keeps the light scheme but sits on sand */
.scheme-sand{
  --surface:         var(--sand-90);
  --surface-lowest:  #F4F3F0;
  --surface-low:     #F1EFE8;
  --surface-c:       var(--sand-90);
  --surface-high:    var(--sand-80);
  --surface-highest: #E5DDC3;
  --outline-var:     var(--sand-70);
}

/* Honour the OS preference. Sections that must stay dark keep .scheme-dark;
   sections that must stay light opt back in with .scheme-light. */
/* Dark mode has three states, and all three are handled here.
   1. OS set to dark, no explicit choice  -> the media query below
   2. Reader picked dark                  -> :root[data-theme="dark"]
   3. Reader picked light on a dark OS    -> :not([data-theme="light"]) keeps
                                             the media query out of the way
   Components only ever read the tokens, so nothing else changes. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --primary:            var(--gold-80);
    --on-primary:         var(--gold-20);
    --primary-container:  var(--gold-30);
    --on-primary-container: var(--gold-90);
    --primary-fixed-dim:  var(--gold-70);

    --secondary:            var(--ink-80);
    --on-secondary:         var(--ink-20);
    --secondary-container:  var(--ink-30);
    --on-secondary-container: var(--ink-90);

    --surface:            var(--n-6);
    --surface-dim:        var(--n-4);
    --surface-bright:     var(--n-30);
    --surface-lowest:     var(--n-4);
    --surface-low:        var(--n-12);
    --surface-c:          var(--n-17);
    --surface-high:       var(--n-22);
    --surface-highest:    var(--n-24);

    --on-surface:         #F7F8FA;
    --on-surface-var:     var(--n-80);
    --outline:            var(--n-60);
    --outline-var:        var(--n-30);

    --inverse-surface:    var(--n-90);
    --on-inverse-surface: var(--n-10);
    --inverse-primary:    var(--gold-40);
    --surface-tint:       var(--gold-80);

    --state-hover: .10;
    --state-focus: .12;
    --state-press: .12;
  }
  /* Sand goes to a warm-shifted dark container rather than glowing */
  :root:not([data-theme="light"]) .scheme-sand{
    --surface:         var(--n-6);
    --surface-lowest:  var(--n-4);
    --surface-low:     var(--n-12);
    --surface-c:       var(--n-17);
    --surface-high:    var(--n-22);
    --surface-highest: var(--n-24);
    --outline-var:     var(--n-30);
  }
  :root:not([data-theme="light"]) img,
  :root:not([data-theme="light"]) .media{ filter: brightness(.92) contrast(1.02); }
}

/* The reader's explicit choice wins in both directions. */
:root[data-theme="dark"]{
  --primary:            var(--gold-80);
  --on-primary:         var(--gold-20);
  --primary-container:  var(--gold-30);
  --on-primary-container: var(--gold-90);
  --primary-fixed-dim:  var(--gold-70);

  --secondary:            var(--ink-80);
  --on-secondary:         var(--ink-20);
  --secondary-container:  var(--ink-30);
  --on-secondary-container: var(--ink-90);

  --surface:            var(--n-6);
  --surface-dim:        var(--n-4);
  --surface-bright:     var(--n-30);
  --surface-lowest:     var(--n-4);
  --surface-low:        var(--n-12);
  --surface-c:          var(--n-17);
  --surface-high:       var(--n-22);
  --surface-highest:    var(--n-24);

  --on-surface:         #F7F8FA;
  --on-surface-var:     var(--n-80);
  --outline:            var(--n-60);
  --outline-var:        var(--n-30);

  --inverse-surface:    var(--n-90);
  --on-inverse-surface: var(--n-10);
  --inverse-primary:    var(--gold-40);
  --surface-tint:       var(--gold-80);

  --state-hover: .10;
  --state-focus: .12;
  --state-press: .12;
}
:root[data-theme="dark"] .scheme-sand{
  --surface:         var(--n-6);
  --surface-lowest:  var(--n-4);
  --surface-low:     var(--n-12);
  --surface-c:       var(--n-17);
  --surface-high:    var(--n-22);
  --surface-highest: var(--n-24);
  --outline-var:     var(--n-30);
}
:root[data-theme="dark"] img,
:root[data-theme="dark"] .media{ filter: brightness(.92) contrast(1.02); }


/* ==========================================================================
   3. ELEVATION · SHAPE · MOTION
   ========================================================================== */

:root{
  --elev-0: none;
  --elev-1: 0 1px 2px 0 rgba(0, 31, 63,.22), 0 1px 3px 1px rgba(0, 31, 63,.10);
  --elev-2: 0 1px 2px 0 rgba(0, 31, 63,.22), 0 2px 6px 2px rgba(0, 31, 63,.10);
  --elev-3: 0 4px 8px 3px rgba(0, 31, 63,.11), 0 1px 3px 0 rgba(0, 31, 63,.22);
  --elev-4: 0 6px 10px 4px rgba(0, 31, 63,.11), 0 2px 3px 0 rgba(0, 31, 63,.22);
  --elev-5: 0 8px 12px 6px rgba(0, 31, 63,.12), 0 4px 4px 0 rgba(0, 31, 63,.22);

  --shape-xs:  4px;
  --shape-sm:  8px;
  --shape-md:  12px;
  --shape-lg:  16px;
  --shape-xl:  28px;
  --shape-2xl: 40px;
  --shape-full: 999px;

  --ease-emph:       cubic-bezier(.2, 0, 0, 1);
  --ease-emph-decel: cubic-bezier(.05, .7, .1, 1);
  --ease-emph-accel: cubic-bezier(.3, 0, .8, .15);
  --ease-standard:   cubic-bezier(.2, 0, 0, 1);

  --dur-1: 150ms;
  --dur-2: 250ms;
  --dur-3: 400ms;
  --dur-4: 550ms;
  --dur-5: 800ms;

  --wrap: 1280px;
  --sec-y: clamp(76px, 9vw, 140px);

  --serif: "Georgia Pro", Georgia, "Noto Serif", "PT Serif", "Times New Roman", serif;
  --sans:  "Archivo", "Helvetica Neue", Helvetica, system-ui, -apple-system, Arial, sans-serif;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ==========================================================================
   4. BASE + TYPE SCALE
   Display and headline sit in the serif. Labels, buttons and numerals sit in
   the sans, which is what stops the page reading like a print brochure.
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:96px; }

body{
  margin:0;
  background:var(--surface);
  color:var(--on-surface);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overflow-wrap:break-word;
  transition:background var(--dur-3) var(--ease-standard);
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--primary); color:var(--on-primary); }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
}

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

/* Display / headline / title */
.t-display  { font-size:clamp(46px, 7.2vw, 100px); line-height:.98; letter-spacing:-.03em; }
.t-headline { font-size:clamp(33px, 4.3vw, 60px);  line-height:1.04; letter-spacing:-.022em; }
.t-title-lg { font-size:clamp(26px, 2.6vw, 38px);  line-height:1.14; letter-spacing:-.018em; }
.t-title    { font-size:clamp(20px, 1.7vw, 26px);  line-height:1.22; letter-spacing:-.012em; }
.t-title-sm { font-size:clamp(18px, 1.3vw, 21px);  line-height:1.3;  letter-spacing:-.008em; }

/* Body */
.t-lede{
  font-family:var(--serif);
  font-size:clamp(17px, 1.3vw, 20px);
  line-height:1.62;
  color:var(--on-surface-var);
}
.t-body{ font-size:16px; color:var(--on-surface-var); }

/* Labels — always sans, always tracked */
.t-label,
.eyebrow{
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.4;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 20px;
  color:var(--primary);
}
.eyebrow::before{
  content:"";
  width:24px;
  height:1px;
  background:currentColor;
  opacity:.6;
  flex:none;
}
.eyebrow--plain::before{ display:none; }

.num{
  font-family:var(--sans);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

em.accent{ font-style:normal; color:var(--primary); }

.measure      { max-width:66ch; }
.measure--mid { max-width:56ch; }
.measure--tight{ max-width:46ch; }
.center       { text-align:center; }
.center .measure, .center .measure--mid, .center .measure--tight{ margin-inline:auto; }

/* ==========================================================================
   5. LAYOUT PRIMITIVES
   ========================================================================== */

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(20px, 4vw, 44px);
}
.wrap--narrow{ max-width:920px; }

.stack-xs > * + *{ margin-top:8px; }
.stack-sm > * + *{ margin-top:16px; }
.stack    > * + *{ margin-top:24px; }
.stack-lg > * + *{ margin-top:40px; }

.section{
  position:relative;
  padding-block:var(--sec-y);
  background:var(--surface);
  color:var(--on-surface);
}
.section--tight{ padding-block:clamp(52px, 6vw, 88px); }
.section--flush-top{ padding-top:0; }

.section-head{ margin-bottom:clamp(40px, 5vw, 68px); }
.section-head .t-headline{ margin-bottom:20px; }

/* Grain overlay for dark sections. Sits above the gradient, below content. */
.grain{ position:relative; isolation:isolate; }
.grain::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--grain);
  opacity:.16;
  mix-blend-mode:overlay;
  pointer-events:none;
  z-index:1;
}
.grain > *{ position:relative; z-index:2; }

/* ==========================================================================
   6. COMPONENTS
   ========================================================================== */

/* --- state layer --------------------------------------------------------
   One mechanism, used by every interactive surface: a currentColor film at
   the scheme's hover/focus/press opacity. Material's actual model, rather
   than ad-hoc :hover colour swaps.
   ------------------------------------------------------------------------ */

.state{ position:relative; overflow:hidden; isolation:isolate; }
.state::before{
  content:"";
  position:absolute;
  inset:0;
  background:currentColor;
  opacity:0;
  transition:opacity var(--dur-2) var(--ease-standard);
  pointer-events:none;
  z-index:0;
}
.state:hover::before        { opacity:var(--state-hover); }
.state:focus-visible::before{ opacity:var(--state-focus); }
.state:active::before       { opacity:var(--state-press); }
.state > *{ position:relative; z-index:1; }

/* Ripple, injected by js/site.js */
.ripple{
  position:absolute;
  border-radius:50%;
  transform:scale(0);
  background:currentColor;
  opacity:.22;
  pointer-events:none;
  animation:ripple var(--dur-4) var(--ease-emph-decel) forwards;
  z-index:0;
}
@keyframes ripple{
  to{ transform:scale(2.4); opacity:0; }
}

/* --- buttons ------------------------------------------------------------ */

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:0 28px;
  border:1px solid transparent;
  border-radius:var(--shape-full);
  font-family:var(--sans);
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.02em;
  text-decoration:none;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  white-space:nowrap;
  transition:
    box-shadow var(--dur-2) var(--ease-standard),
    transform  var(--dur-2) var(--ease-emph),
    background var(--dur-2) var(--ease-standard),
    border-color var(--dur-2) var(--ease-standard),
    color var(--dur-2) var(--ease-standard);
}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:currentColor;
  opacity:0;
  transition:opacity var(--dur-2) var(--ease-standard);
  z-index:0;
}
.btn:hover::before        { opacity:var(--state-hover); }
.btn:focus-visible::before{ opacity:var(--state-focus); }
.btn:active::before       { opacity:var(--state-press); }
.btn > *{ position:relative; z-index:1; }
.btn span{ position:relative; z-index:1; }
.btn svg{ position:relative; z-index:1; width:18px; height:18px; flex:none; }
.btn:active{ transform:scale(.975); }

/* filled — the one primary action per view */
.btn--filled{
  background:var(--primary);
  color:var(--on-primary);
  box-shadow:var(--elev-0);
}
.btn--filled:hover{ box-shadow:var(--elev-1); }
.btn--filled:active{ box-shadow:var(--elev-0); }

/* elevated — filled's quieter sibling, for use on busy grounds */
.btn--elevated{
  background:var(--surface-low);
  color:var(--primary);
  box-shadow:var(--elev-1);
}
.btn--elevated:hover{ box-shadow:var(--elev-2); }

/* tonal — secondary actions that still need weight */
.btn--tonal{
  background:var(--primary-container);
  color:var(--on-primary-container);
}
.btn--tonal:hover{ box-shadow:var(--elev-1); }

/* outlined — tertiary */
.btn--outlined{
  background:transparent;
  color:var(--primary);
  border-color:var(--outline-var);
}
.btn--outlined:hover{ border-color:var(--primary); }

/* text — lowest emphasis */
.btn--text{
  background:transparent;
  color:var(--primary);
  padding-inline:16px;
}

.btn--sm{ min-height:42px; padding-inline:17px; font-size:13.5px; }
.btn--lg{ min-height:60px; padding-inline:36px; font-size:16px; }
.btn--block{ width:100%; }

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* arrow that travels on hover */
.btn .arrow{ transition:transform var(--dur-2) var(--ease-emph); }
.btn:hover .arrow{ transform:translateX(4px); }

/* --- text link with arrow ----------------------------------------------- */

.arrowlink{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--sans);
  font-size:14px;
  font-weight:600;
  letter-spacing:.04em;
  text-decoration:none;
  color:var(--primary);
}
.arrowlink svg{
  width:16px; height:16px;
  transition:transform var(--dur-2) var(--ease-emph);
}
.arrowlink:hover svg{ transform:translateX(5px); }

/* --- FAB ---------------------------------------------------------------- */

.fab{
  position:fixed;
  right:clamp(16px, 3vw, 32px);
  bottom:clamp(16px, 3vw, 32px);
  z-index:60;
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:60px;
  padding:0 24px;
  border:0;
  border-radius:var(--shape-lg);
  background:var(--primary-container);
  color:var(--on-primary-container);
  box-shadow:var(--elev-3);
  font-family:var(--sans);
  font-size:14.5px;
  font-weight:600;
  text-decoration:none;
  overflow:hidden;
  isolation:isolate;
  transform:translateY(0);
  transition:
    box-shadow var(--dur-2) var(--ease-standard),
    transform var(--dur-3) var(--ease-emph),
    opacity var(--dur-3) var(--ease-standard);
}
.fab::before{
  content:""; position:absolute; inset:0;
  background:currentColor; opacity:0;
  transition:opacity var(--dur-2) var(--ease-standard);
}
.fab:hover::before{ opacity:var(--state-hover); }
.fab:hover{ box-shadow:var(--elev-4); }
.fab svg{ width:22px; height:22px; position:relative; z-index:1; flex:none; }
.fab span{ position:relative; z-index:1; }
.fab[data-tucked="true"]{
  transform:translateY(140%);
  opacity:0;
  pointer-events:none;
}
@media (max-width: 560px){
  .fab span{
    position:absolute;
    width:1px; height:1px;
    overflow:hidden;
    clip-path:inset(50%);
  }
  .fab{ padding:0; width:60px; justify-content:center; border-radius:var(--shape-lg); }
}

/* --- chips -------------------------------------------------------------- */

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:36px;
  padding:0 16px;
  border:1px solid var(--outline-var);
  border-radius:var(--shape-sm);
  background:transparent;
  color:var(--on-surface-var);
  font-family:var(--sans);
  font-size:13px;
  font-weight:500;
  letter-spacing:.01em;
  text-decoration:none;
  white-space:nowrap;
}
.chip--filled{
  background:var(--secondary-container);
  color:var(--on-secondary-container);
  border-color:transparent;
}
.chip--primary{
  background:var(--primary-container);
  color:var(--on-primary-container);
  border-color:transparent;
}
.chip svg{ width:15px; height:15px; }
.chip-row{ display:flex; flex-wrap:wrap; gap:10px; }

/* --- cards -------------------------------------------------------------- */

.card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:clamp(26px, 2.4vw, 38px);
  border-radius:var(--shape-lg);
  background:var(--surface-c);
  color:var(--on-surface);
  text-decoration:none;
  overflow:hidden;
  isolation:isolate;
  transition:
    box-shadow var(--dur-2) var(--ease-standard),
    transform var(--dur-3) var(--ease-emph),
    background var(--dur-2) var(--ease-standard);
}
.card > *{ position:relative; z-index:1; }
.card p{ color:var(--on-surface-var); font-size:15.5px; }

.card--elevated{ background:var(--surface-low); box-shadow:var(--elev-1); }
.card--outlined{ background:var(--surface); border:1px solid var(--outline-var); }
.card--filled  { background:var(--surface-high); }

a.card::before,
.card--interactive::before{
  content:"";
  position:absolute;
  inset:0;
  background:currentColor;
  opacity:0;
  transition:opacity var(--dur-2) var(--ease-standard);
  z-index:0;
}
a.card:hover::before{ opacity:var(--state-hover); }
a.card:hover{ transform:translateY(-6px); box-shadow:var(--elev-3); }
a.card:active{ transform:translateY(-2px); box-shadow:var(--elev-1); }

/* On hover the icon tile goes solid gold and squares off its corner, the way
   a slate or a stamped case marking does. Chosen over the more familiar
   accent bar sliding across the card top. */
.card .mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px; height:56px;
  border-radius:var(--shape-md) var(--shape-md) var(--shape-md) 2px;
  background:var(--primary-container);
  color:var(--on-primary-container);
  margin-bottom:6px;
  transition:
    background var(--dur-2) var(--ease-standard),
    color var(--dur-2) var(--ease-standard),
    border-radius var(--dur-3) var(--ease-emph);
}
.card .mark svg{ width:28px; height:28px; }
a.card:hover .mark{
  background:var(--primary);
  color:var(--on-primary);
  border-radius:2px var(--shape-md) var(--shape-md) var(--shape-md);
}
.card .arrowlink{ margin-top:auto; padding-top:10px; }

.card-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(16px, 1.7vw, 24px);
}
.card-grid--2{ grid-template-columns:repeat(2, 1fr); }
@media (max-width: 960px){
  .card-grid{ grid-template-columns:1fr; }
  .card-grid--2{ grid-template-columns:1fr; }
}

/* --- service list (numbered, two column) -------------------------------- */

.svc-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(14px, 1.5vw, 20px);
}
.svc{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px;
  align-items:start;
  padding:26px 28px;
  border-radius:var(--shape-md);
  background:var(--surface-c);
  transition:background var(--dur-2) var(--ease-standard), transform var(--dur-3) var(--ease-emph);
}
.svc:hover{ background:var(--surface-high); transform:translateX(4px); }
.svc .idx{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  flex:none;
  border-radius:var(--shape-full);
  border:1px solid var(--outline-var);
  color:var(--primary);
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}
.svc h3{ margin-bottom:6px; }
.svc p{ color:var(--on-surface-var); font-size:15.5px; margin:0; }
.svc .tag{
  display:inline-block;
  margin-left:8px;
  padding:2px 9px;
  border-radius:var(--shape-full);
  background:var(--secondary-container);
  color:var(--on-secondary-container);
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  vertical-align:middle;
}
@media (max-width: 860px){ .svc-grid{ grid-template-columns:1fr; } }

.svc-note{
  max-width:74ch;
  margin-top:clamp(26px, 3vw, 40px);
  padding-top:clamp(20px, 2.2vw, 28px);
  border-top:1px solid var(--outline-var);
  font-size:15.5px;
  color:var(--on-surface-var);
}

/* --- stepper (the plan) -------------------------------------------------- */

.steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px, 2.4vw, 34px);
  counter-reset:step;
}
.step{
  position:relative;
  padding-top:34px;
}
/* connecting rail */
.step::before{
  content:"";
  position:absolute;
  top:17px;
  left:0;
  right:0;
  height:1px;
  background:var(--outline-var);
}
.step:first-child::before{ left:17px; }
.step:last-child::before{ right:calc(100% - 18px); }
.step .dot{
  position:absolute;
  top:8px;
  left:0;
  width:18px; height:18px;
  border-radius:50%;
  background:var(--surface);
  border:2px solid var(--primary);
  box-shadow:0 0 0 6px var(--surface);
}
.step .dot::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:50%;
  background:var(--primary);
  transform:scale(0);
  transition:transform var(--dur-3) var(--ease-emph);
}
.step.is-visible .dot::after{ transform:scale(1); }
.step .idx{
  display:block;
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:12px;
}
.step h3{ margin-bottom:10px; }
.step p{ color:var(--on-surface-var); font-size:15.5px; }
@media (max-width: 860px){
  .steps{ grid-template-columns:1fr; gap:0; }
  .step{ padding:0 0 34px 40px; }
  .step::before{
    top:18px; bottom:0; left:8px; right:auto;
    width:1px; height:auto;
  }
  .step:first-child::before{ left:8px; top:18px; }
  .step:last-child::before{ right:auto; bottom:calc(100% - 18px); }
  .step .dot{ top:8px; left:0; }
}

/* --- comparison (success vs stakes) ------------------------------------- */

.compare{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(16px, 2vw, 28px);
}
.compare-col{
  padding:clamp(28px, 2.8vw, 44px);
  border-radius:var(--shape-lg);
}
.compare-col--bad{
  background:var(--surface-c);
  border:1px solid var(--outline-var);
}
.compare-col--good{
  background:var(--primary-container);
  color:var(--on-primary-container);
  box-shadow:var(--elev-2);
}
.compare-col h3{ margin-bottom:22px; }
.ticklist{ list-style:none; margin:0; padding:0; }
.ticklist li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:start;
  padding:13px 0;
  font-size:16px;
}
.ticklist li + li{ border-top:1px solid currentColor; border-color:color-mix(in srgb, currentColor 16%, transparent); }
.ticklist svg{ width:20px; height:20px; margin-top:3px; flex:none; }
.compare-col--good .ticklist svg{ color:var(--primary); }
.compare-col--bad .ticklist{ color:var(--on-surface-var); }
.compare-col--bad .ticklist svg{ color:var(--outline); }
@media (max-width: 860px){ .compare{ grid-template-columns:1fr; } }

/* --- feature list ------------------------------------------------------- */

.featlist{ list-style:none; margin:0; padding:0; }
.featlist li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px;
  padding:24px 0;
}
.featlist li + li{ border-top:1px solid var(--outline-var); }
.featlist .mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px; height:46px;
  flex:none;
  border-radius:var(--shape-md);
  background:var(--surface-highest);
  color:var(--primary);
}
.featlist .mark svg{ width:23px; height:23px; }
.featlist h3{ margin-bottom:5px; }
.featlist p{ color:var(--on-surface-var); font-size:15.5px; margin:0; }

/* --- FAQ (MD3 expansion panel) ------------------------------------------ */

.faq{ display:flex; flex-direction:column; gap:10px; }
.faq details{
  border-radius:var(--shape-md);
  background:var(--surface-c);
  overflow:hidden;
  transition:background var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
.faq details[open]{ background:var(--surface-high); box-shadow:var(--elev-1); }
.faq summary{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:22px 26px;
  cursor:pointer;
  list-style:none;
  font-family:var(--serif);
  font-size:clamp(18px, 1.4vw, 21px);
  line-height:1.35;
  letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"";
  flex:none;
  width:22px; height:22px;
  margin-top:3px;
  background:currentColor;
  color:var(--primary);
  transition:transform var(--dur-3) var(--ease-emph);
  -webkit-mask:var(--icon-plus) center / contain no-repeat;
          mask:var(--icon-plus) center / contain no-repeat;
}
.faq details[open] summary::after{ transform:rotate(180deg); }
.faq summary:hover{ color:var(--primary); }
.faq .answer{
  padding:0 26px 24px;
  max-width:62ch;
  color:var(--on-surface-var);
  font-size:16px;
}
:root{
  --icon-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* --- marquee (client strip) --------------------------------------------- */

.marquee{
  position:relative;
  overflow:hidden;
  padding-block:26px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track{
  display:flex;
  width:max-content;
  gap:0;
  animation:marquee 34s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}
.marquee-item{
  display:inline-flex;
  align-items:center;
  gap:clamp(28px, 4vw, 56px);
  padding-inline:clamp(14px, 2vw, 28px);
  font-family:var(--serif);
  font-size:clamp(19px, 2vw, 30px);
  letter-spacing:-.01em;
  color:var(--on-surface);
  opacity:.72;
  white-space:nowrap;
}
.marquee-item::after{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background:var(--primary);
  flex:none;
}

/* --- media placeholder --------------------------------------------------- */

.media{
  position:relative;
  overflow:hidden;
  border-radius:var(--shape-lg);
  min-height:240px;
  display:flex;
  align-items:flex-end;
  background:
    radial-gradient(120% 90% at 22% 12%, rgba(166,124,0,.42), transparent 62%),
    linear-gradient(150deg, #1E3955 0%, #112E4C 48%, #001F3F 100%);
}
.media::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--grain);
  opacity:.2;
  mix-blend-mode:overlay;
}
.media::after{
  content:attr(data-label);
  position:relative;
  display:block;
  padding:18px 22px;
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(247,248,250,.5);
}
.media--tall{ min-height:clamp(340px, 42vw, 560px); }
.media--light{
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(166,124,0,.3), transparent 60%),
    linear-gradient(150deg, var(--sand-90) 0%, var(--sand-80) 100%);
}
.media--light::after{ color:rgba(0,31,63,.42); }

/* --- founder portrait ----------------------------------------------------
   Works as the .media placeholder now, and as a real <img> once one is added.
   ------------------------------------------------------------------------ */
img.founder-photo{
  width:100%;
  height:auto;
  border-radius:var(--shape-lg);
  box-shadow:var(--elev-2);
}

/* --- divider ------------------------------------------------------------ */

.divider{ height:1px; background:var(--outline-var); border:0; margin:0; }

/* ==========================================================================
   7. PAGE SECTIONS
   ========================================================================== */

/* --- scroll progress ----------------------------------------------------- */

.progress{
  position:fixed;
  top:0; left:0;
  height:3px;
  width:100%;
  transform:scaleX(0);
  transform-origin:left;
  background:linear-gradient(90deg, var(--gold-50), var(--gold-80));
  z-index:70;
  will-change:transform;
}

/* --- top app bar ---------------------------------------------------------- */

.app-bar{
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;
  background:transparent;
  transition:
    background var(--dur-3) var(--ease-standard),
    box-shadow var(--dur-3) var(--ease-standard),
    backdrop-filter var(--dur-3) var(--ease-standard);
}
.app-bar[data-scrolled="true"]{
  background:color-mix(in srgb, var(--n-6) 88%, transparent);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
          backdrop-filter:saturate(160%) blur(14px);
  box-shadow:var(--elev-2);
}
.app-bar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(8px, 1.1vw, 18px);
  padding-block:18px;
  transition:padding var(--dur-3) var(--ease-standard);
}
.app-bar[data-scrolled="true"] .app-bar__inner{ padding-block:12px; }

.brand{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  flex:none;
}
.brand img{
  display:block;
  height:clamp(32px, 3.2vw, 42px);
  width:auto;
}
.app-bar[data-scrolled="true"] .brand img{ height:clamp(28px, 2.8vw, 36px); }

.nav-links{
  display:flex;
  align-items:center;
  /* seven items, a toggle and a CTA share this bar, so the gap is tight */
  gap:2px;
  list-style:none;
  margin:0;
  padding:0;
}
.nav-links a{
  position:relative;
  display:block;
  padding:9px clamp(9px, 0.9vw, 14px);
  border-radius:var(--shape-full);
  overflow:hidden;
  isolation:isolate;
  text-decoration:none;
  color:rgba(247,248,250,.82);
  font-family:var(--sans);
  font-size:14.5px;
  font-weight:500;
  white-space:nowrap;
  transition:color var(--dur-2) var(--ease-standard);
}
.nav-links a::before{
  content:""; position:absolute; inset:0;
  background:currentColor; opacity:0;
  transition:opacity var(--dur-2) var(--ease-standard);
  z-index:-1;
}
.nav-links a:hover{ color:#F7F8FA; }
.nav-links a:hover::before{ opacity:.12; }
.nav-links a[aria-current="page"]{
  color:var(--gold-80);
  background:rgba(208,188,130,.14);
}

/* --- theme toggle -------------------------------------------------------
   Sits in the app bar beside the menu button. Both icons ship in the
   markup and CSS decides which shows, so there is no flash of the wrong
   glyph before the script runs.
   ------------------------------------------------------------------------ */
.theme-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px; height:42px;
  flex:none;
  border:1px solid rgba(247,248,250,.22);
  border-radius:var(--shape-full);
  background:transparent;
  color:rgba(247,248,250,.86);
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:color var(--dur-2) var(--ease-standard),
             border-color var(--dur-2) var(--ease-standard);
}
.theme-toggle:hover{ color:var(--gold-70); border-color:var(--gold-70); }
.theme-toggle svg{ width:19px; height:19px; position:relative; z-index:1; }

/* show the icon for the mode the button switches TO */
.theme-toggle .icon-moon{ display:block; }
.theme-toggle .icon-sun { display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{ display:none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display:block; }
}
:root[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display:block; }
:root[data-theme="light"] .theme-toggle .icon-moon{ display:block; }
:root[data-theme="light"] .theme-toggle .icon-sun { display:none; }

.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:46px; height:46px;
  border:0;
  border-radius:var(--shape-full);
  background:rgba(247,248,250,.1);
  color:#F7F8FA;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
}
.nav-toggle svg{ width:24px; height:24px; }
.nav-toggle .icon-close{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-menu{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display:block; }

.app-bar__cta{ display:inline-flex; }

/* The nav list carries a booking link for the mobile sheet. On desktop the
   same action already lives in the bar's filled button, so hide the duplicate. */
.nav-cta-item{ display:none; }

@media (max-width: 1240px){
  .nav-toggle{ display:inline-flex; order:3; }
  .app-bar__cta{ display:none; }
  .nav-links{
    order:4;
    flex-basis:100%;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    margin-top:14px;
    padding:12px 0 18px;
    border-top:1px solid rgba(247,248,250,.14);
  }
  .nav-links[hidden]{ display:none; }
  .nav-links a{
    padding:14px 16px;
    border-radius:var(--shape-md);
    font-size:17px;
  }
  .nav-cta-item{ display:block; margin-top:10px; }
  .nav-links .nav-cta-mobile{
    background:var(--gold-50);
    color:#F7F8FA;
    text-align:center;
    font-weight:600;
  }
  .app-bar__inner{ flex-wrap:wrap; }
  .app-bar[data-open="true"]{
    background:var(--n-6);
    -webkit-backdrop-filter:none; backdrop-filter:none;
    box-shadow:var(--elev-3);
  }
}

/* --- hero ---------------------------------------------------------------- */

.hero{
  position:relative;
  min-height:min(92svh, 880px);
  display:flex;
  /* Centred rather than bottom-aligned: the hero copy is a single short
     line, and flex-end left a large dead zone above it. */
  align-items:center;
  padding:clamp(130px, 15vw, 180px) 0 clamp(90px, 10vw, 130px);
  color:#F7F8FA;
  overflow:hidden;
  background:var(--n-4);
}
.hero__bg{
  position:absolute;
  inset:-20%;
  z-index:0;
  background:
    radial-gradient(46% 40% at 18% 74%, rgba(166,124,0,.60), transparent 62%),
    radial-gradient(40% 38% at 78% 22%, rgba(67,90,113,.62), transparent 64%),
    radial-gradient(52% 48% at 62% 88%, rgba(17,46,76,.66), transparent 66%),
    linear-gradient(160deg, #112E4C 0%, #0A2846 46%, #001F3F 100%);
  animation:drift 26s var(--ease-standard) infinite alternate;
  will-change:transform;
}
@keyframes drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(-3%, 2%, 0) scale(1.08); }
}
.hero__grain{
  position:absolute;
  inset:0;
  z-index:1;
  background-image:var(--grain);
  opacity:.19;
  mix-blend-mode:overlay;
  pointer-events:none;
}
.hero__vignette{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(0, 31, 63,.55) 0%, transparent 32%, transparent 62%, rgba(0, 31, 63,.7) 100%);
  pointer-events:none;
}
.hero .wrap{ position:relative; z-index:2; }

.hero__grid{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(0, .95fr);
  gap:clamp(32px, 5vw, 72px);
  align-items:end;
}
.hero .eyebrow{ color:var(--gold-70); }
.hero h1{ margin-bottom:26px; }
.hero h1 em{ font-style:normal; color:var(--gold-70); }
.hero__lede{
  font-size:clamp(17px, 1.35vw, 20px);
  line-height:1.6;
  color:rgba(247,248,250,.78);
  max-width:52ch;
  margin-bottom:34px;
}
.hero .btn-row{ margin-bottom:8px; }
.hero .btn--outlined{ color:#F7F8FA; border-color:rgba(247,248,250,.34); }
.hero .btn--outlined:hover{ border-color:var(--gold-70); color:var(--gold-70); }

/* the floating note card, now an MD3 surface */
.hero__card{
  padding:28px 30px;
  border-radius:var(--shape-lg);
  background:rgba(247,248,250,.07);
  border:1px solid rgba(247,248,250,.16);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
          backdrop-filter:blur(18px) saturate(150%);
  box-shadow:var(--elev-3);
}
.hero__card .t-title{ margin-bottom:10px; }
.hero__card p:not(.t-title){
  font-size:15px;
  color:rgba(247,248,250,.74);
  margin-bottom:18px;
}
.hero__card .arrowlink{ color:var(--gold-70); }

/* The hero's right column is now just a route into Our approach, so it
   aligns to the bottom of the grid rather than filling the space. */
.hero__aside{ display:flex; justify-content:flex-start; align-items:flex-end; }
@media (min-width: 1021px){ .hero__aside{ justify-content:flex-end; } }

.hero__scroll{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(247,248,250,.5);
  text-decoration:none;
}
.hero__scroll span::after{
  content:"";
  display:block;
  width:1px;
  height:34px;
  margin:8px auto 0;
  background:linear-gradient(180deg, rgba(247,248,250,.5), transparent);
  animation:scrollhint 2.2s var(--ease-standard) infinite;
}
@keyframes scrollhint{
  0%,100%{ transform:scaleY(.4); transform-origin:top; opacity:.4; }
  50%    { transform:scaleY(1);  transform-origin:top; opacity:1; }
}

@media (max-width: 1020px){
  .hero__grid{ grid-template-columns:1fr; align-items:start; }
  .hero__scroll{ display:none; }
}

/* --- inner page hero ------------------------------------------------------ */

.page-hero{
  position:relative;
  overflow:hidden;
  padding:clamp(140px, 16vw, 210px) 0 clamp(64px, 8vw, 108px);
  color:#F7F8FA;
  background:var(--n-4);
}
.page-hero__bg{
  position:absolute;
  inset:-15%;
  z-index:0;
  background:
    radial-gradient(44% 52% at 24% 18%, rgba(166,124,0,.5), transparent 64%),
    radial-gradient(42% 46% at 82% 62%, rgba(67,90,113,.55), transparent 64%),
    linear-gradient(170deg, #112E4C 0%, #0A2846 52%, #001F3F 100%);
  animation:drift 30s var(--ease-standard) infinite alternate;
}
.page-hero__grain{
  position:absolute; inset:0; z-index:1;
  background-image:var(--grain);
  opacity:.17;
  mix-blend-mode:overlay;
  pointer-events:none;
}
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero h1{ margin-bottom:20px; }
.page-hero .eyebrow{ color:var(--gold-70); }
.page-hero__lede{
  font-size:clamp(17px, 1.3vw, 20px);
  line-height:1.6;
  color:rgba(247,248,250,.78);
  max-width:58ch;
}

.crumb{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:26px;
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.06em;
  color:rgba(247,248,250,.6);
}
.crumb a{ text-decoration:none; }
.crumb a:hover{ color:var(--gold-70); }
.crumb svg{ width:14px; height:14px; opacity:.6; }
.crumb .current{ color:var(--gold-70); }

/* --- CTA band ------------------------------------------------------------- */

.cta-band{
  position:relative;
  overflow:hidden;
  padding:clamp(64px, 8vw, 120px) 0;
  color:#F7F8FA;
  background:var(--n-4);
}
.cta-band__bg{
  position:absolute;
  inset:-15%;
  z-index:0;
  background:
    radial-gradient(40% 52% at 16% 34%, rgba(166,124,0,.58), transparent 62%),
    radial-gradient(44% 48% at 86% 70%, rgba(67,90,113,.5), transparent 64%),
    linear-gradient(150deg, #1E3955 0%, #112E4C 52%, #001F3F 100%);
  animation:drift 34s var(--ease-standard) infinite alternate;
}
.cta-band__grain{
  position:absolute; inset:0; z-index:1;
  background-image:var(--grain);
  opacity:.18;
  mix-blend-mode:overlay;
  pointer-events:none;
}
.cta-band .wrap{ position:relative; z-index:2; }
.cta-band__grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(32px, 5vw, 72px);
  align-items:center;
}
.cta-band .eyebrow{ color:var(--gold-70); }
.cta-band h2{ margin-bottom:20px; }
.cta-band p{ color:rgba(247,248,250,.78); }
.cta-band .btn--outlined{ color:#F7F8FA; border-color:rgba(247,248,250,.34); }
.cta-band .btn--outlined:hover{ border-color:var(--gold-70); color:var(--gold-70); }
.cta-band__panel{
  padding:clamp(28px, 3vw, 44px);
  border-radius:var(--shape-xl);
  background:rgba(247,248,250,.07);
  border:1px solid rgba(247,248,250,.16);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
          backdrop-filter:blur(18px) saturate(150%);
  box-shadow:var(--elev-3);
}
@media (max-width: 960px){ .cta-band__grid{ grid-template-columns:1fr; } }

/* --- split (image + panel) ------------------------------------------------ */

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px, 4vw, 64px);
  align-items:center;
}
.split .media{ min-height:clamp(360px, 44vw, 620px); height:100%; }
@media (max-width: 960px){ .split{ grid-template-columns:1fr; } }

/* The approach section carries the opening line only, so its image is held
   shorter than a standard split to keep the two columns in proportion. */
#approach .split .media{ min-height:clamp(300px, 30vw, 420px); }

/* --- booking ------------------------------------------------------------- */

.booking{
  border-radius:var(--shape-xl);
  background:var(--surface-lowest);
  box-shadow:var(--elev-2);
  overflow:hidden;
}
.booking__head{
  padding:clamp(28px, 3vw, 44px);
  border-bottom:1px solid var(--outline-var);
}
.booking__frame{
  position:relative;
  background:var(--n-100);
  min-height:640px;
}
.booking__frame iframe{
  display:block;
  width:100%;
  height:660px;
  border:0;
}
.booking__fallback{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  padding:20px clamp(28px, 3vw, 44px);
  background:var(--surface-c);
  font-size:15px;
  color:var(--on-surface-var);
}
@media (max-width: 700px){
  .booking__frame iframe{ height:720px; }
}

/* --- footer --------------------------------------------------------------- */

.site-footer{
  position:relative;
  background:var(--n-6);
  color:#F7F8FA;
  padding-top:clamp(60px, 7vw, 100px);
  overflow:hidden;
}
.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(60% 70% at 82% 0%, rgba(166,124,0,.16), transparent 62%);
  pointer-events:none;
}
.site-footer .wrap{ position:relative; z-index:1; }

.footer-top{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:clamp(28px, 4vw, 60px);
  align-items:center;
  padding-bottom:clamp(40px, 5vw, 66px);
}
.footer-top h2{ max-width:16ch; }
.footer-brand{
  display:flex;
  justify-content:flex-end;
}
.footer-brand img{
  display:block;
  height:clamp(76px, 9vw, 116px);
  width:auto;
}

.footer-cols{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:clamp(28px, 4vw, 60px);
  padding-block:clamp(38px, 5vw, 58px);
  border-top:1px solid rgba(247,248,250,.14);
}
.footer-cols h4{
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-70);
  margin-bottom:20px;
}
.footer-cols > div > p{ color:rgba(247,248,250,.7); font-size:15.5px; }
.footer-cols ul{ list-style:none; margin:0; padding:0; }
.footer-cols li{ margin-bottom:12px; }
.footer-cols li a{
  text-decoration:none;
  color:rgba(247,248,250,.7);
  font-size:15.5px;
  transition:color var(--dur-2) var(--ease-standard);
}
.footer-cols li a:hover{ color:var(--gold-70); }

.contact-line{
  display:flex;
  gap:10px;
  align-items:baseline;
  color:rgba(247,248,250,.7);
  font-size:15.5px;
  margin-bottom:10px;
}
.contact-line b{
  font-family:var(--sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(247,248,250,.45);
  min-width:88px;
}
.contact-line a{ text-decoration:none; }
.contact-line a:hover{ color:var(--gold-70); }

.social-row{
  display:flex;
  gap:10px;
  margin-top:24px;
}
.social{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  border-radius:var(--shape-full);
  border:1px solid rgba(247,248,250,.2);
  color:rgba(247,248,250,.8);
  overflow:hidden;
  isolation:isolate;
  transition:color var(--dur-2) var(--ease-standard),
             border-color var(--dur-2) var(--ease-standard),
             transform var(--dur-2) var(--ease-emph);
}
.social::before{
  content:""; position:absolute; inset:0;
  background:currentColor; opacity:0;
  transition:opacity var(--dur-2) var(--ease-standard);
}
.social:hover::before{ opacity:.12; }
.social:hover{
  color:var(--gold-70);
  border-color:var(--gold-70);
  transform:translateY(-2px);
}
.social svg{ width:20px; height:20px; position:relative; z-index:1; }

.footer-base{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:space-between;
  padding-block:24px;
  border-top:1px solid rgba(247,248,250,.14);
  font-family:var(--sans);
  font-size:13px;
  color:rgba(247,248,250,.5);
}

@media (max-width: 900px){
  .footer-top{ grid-template-columns:1fr; }
  .footer-brand{ justify-content:flex-start; }
  .footer-cols{ grid-template-columns:1fr; }
}


/* ==========================================================================
   8. MOTION + ACCESSIBILITY
   ========================================================================== */

/* Scroll reveal, driven by IntersectionObserver in js/site.js.
   .reveal is only applied by the script, so a no-JS visitor sees everything. */
.js .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:
    opacity var(--dur-4) var(--ease-emph-decel),
    transform var(--dur-4) var(--ease-emph-decel);
  transition-delay:var(--reveal-delay, 0ms);
}
.js .reveal.is-visible{ opacity:1; transform:none; }

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  padding:14px 22px;
  border-radius:0 0 var(--shape-md) 0;
  background:var(--gold-50);
  color:#F7F8FA;
  font-family:var(--sans);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
}
.skip:focus{ left:0; top:0; }

:focus-visible{
  outline:3px solid var(--primary);
  outline-offset:3px;
  /* No border-radius here. It used to force every focusable element to 4px,
     so focusing a card snapped its 16px corners square and focusing a pill
     button squared that off too, which read as the element changing shape.
     The outline follows each element's own radius on its own. */
}

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

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

/* ==========================================================================
   9. ELEVATION PASS — premium polish
   Additive layer applied over the Material system: nested "double-bezel"
   depth, button-in-button CTAs, a snappier press, and a blur-up reveal.
   Every rule reads scheme tokens only, so it follows light/dark/sand and the
   brand palette (Golden Brown / Dark Blue / White) unchanged.
   ========================================================================== */

/* --- 9.1 Button-in-button trailing icon ---------------------------------
   The travelling arrow now rides inside its own circular well, flush with
   the button's right edge, the way a key sits in its recess. Press also
   drops to 140ms so the button feels physically heard. */
.btn{
  transition:
    box-shadow   var(--dur-2) var(--ease-standard),
    transform    140ms        var(--ease-emph),
    background   var(--dur-2) var(--ease-standard),
    border-color var(--dur-2) var(--ease-standard),
    color        var(--dur-2) var(--ease-standard);
}
.btn .arrow{
  box-sizing:border-box;
  width:30px; height:30px;
  margin-left:2px;
  margin-right:-14px;                 /* seat the well into the right padding */
  padding:7px;
  border-radius:var(--shape-full);
  background:color-mix(in srgb, currentColor 15%, transparent);
  transition:
    transform  var(--dur-2) var(--ease-emph),
    background var(--dur-2) var(--ease-standard);
}
.btn:hover .arrow{
  transform:translate(3px, -1px);
  background:color-mix(in srgb, currentColor 26%, transparent);
}
.btn--sm .arrow{ width:26px; height:26px; padding:6px; margin-right:-10px; }
.btn--lg .arrow{ width:34px; height:34px; padding:8px; margin-right:-16px; }

/* --- 9.2 Double-bezel depth ---------------------------------------------
   A concentric inner hairline set 7px in from the edge draws the second
   bezel line; the glass panels also catch a 1px highlight along their top
   so light appears to sit on a real edge. The frame lives on ::after, so
   the hover elevation swap never wipes it. */
.card--filled::after,
.hero__card::after,
.cta-band__panel::after,
.booking::after,
.compare-col--good::after{
  content:"";
  position:absolute;
  inset:7px;
  pointer-events:none;
  z-index:2;
  border:1px solid color-mix(in srgb, currentColor 12%, transparent);
}
/* concentric radius = outer radius minus the 7px inset */
.card--filled::after,
.hero__card::after,
.compare-col--good::after{ border-radius:calc(var(--shape-lg) - 7px); }
.cta-band__panel::after,
.booking::after{ border-radius:calc(var(--shape-xl) - 7px); }

/* light-catch highlight on the hero + CTA glass (not hover-swapped) */
.hero__card,
.cta-band__panel{
  box-shadow:
    var(--elev-3),
    inset 0 1px 0 color-mix(in srgb, #F7F8FA 30%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #F7F8FA 6%, transparent);
}

/* --- 9.3 Blur-up reveal --------------------------------------------------
   Sections resolve from a soft blur as well as a rise, which masks the
   moment of arrival. Stagger delay from the base rule is preserved. */
.js .reveal{
  filter:blur(8px);
  transition:
    opacity   var(--dur-4) var(--ease-emph-decel),
    transform var(--dur-4) var(--ease-emph-decel),
    filter    var(--dur-4) var(--ease-emph-decel);
  transition-delay:var(--reveal-delay, 0ms);
}
.js .reveal.is-visible{ filter:blur(0); }

@media (prefers-reduced-motion: reduce){
  .js .reveal{ filter:none; }
  .btn .arrow{ transition:none; }
}

/* ==========================================================================
   10. OVERDRIVE — award-tier signature layer
   POV: "execution as choreography." Confident cinematic type, gold used as a
   precise mark, content arriving in sequence. Same MD3 tokens and brand
   palette; every animation collapses under prefers-reduced-motion.
   ========================================================================== */

/* --- 10.1 Hero: kinetic mask headline ------------------------------------ */
.hero__title{
  position:relative;
  margin-bottom:28px;
  font-size:clamp(54px, 8.8vw, 134px);
  line-height:.88;
  letter-spacing:-.035em;
}
.hero__title .line{
  display:block;
  overflow:hidden;
  padding-bottom:.08em;
  margin-bottom:-.08em;
}
.hero__title .line--sm{
  font-size:.4em;
  letter-spacing:-.012em;
  color:rgba(247,248,250,.8);
  margin-bottom:.04em;
}
.hero__title .line__inner{
  display:block;
  will-change:transform;
  animation:maskRise 900ms var(--ease-emph-decel) backwards;
}
.hero__title .line--sm   .line__inner{ animation-delay:.16s; }
.hero__title .line--lead .line__inner{ animation-delay:.30s; }
.hero__title em{
  font-style:normal;
  color:var(--gold-70);
}
.hero__title .dot{ color:var(--gold-60); }
@keyframes maskRise{ from{ transform:translateY(114%); } to{ transform:translateY(0); } }

.hero .eyebrow{ animation:heroFade 820ms var(--ease-emph-decel) .10s backwards; }
.hero__lede   { animation:heroFade 820ms var(--ease-emph-decel) .58s backwards; }
.hero .btn-row{ animation:heroFade 820ms var(--ease-emph-decel) .72s backwards; }
@keyframes heroFade{
  from{ opacity:0; transform:translateY(18px); filter:blur(6px); }
  to  { opacity:1; transform:none;            filter:blur(0);   }
}


.hero__spot{
  position:absolute; top:0; left:0; z-index:1;
  width:620px; height:620px; border-radius:50%;
  background:radial-gradient(circle, rgba(208,188,130,.12), transparent 62%);
  pointer-events:none; opacity:0; mix-blend-mode:screen;
  transition:opacity var(--dur-3) var(--ease-standard);
  will-change:transform;
}
.hero:hover .hero__spot{ opacity:1; }

/* --- 10.2 Service "slate" cards ------------------------------------------ */
.card--slate{ padding-top:clamp(30px, 3vw, 46px); }
.card--slate .card__no{
  position:absolute; top:16px; right:22px; z-index:1;
  font-family:var(--sans); font-variant-numeric:tabular-nums;
  font-size:clamp(50px, 6vw, 88px); font-weight:700; line-height:1;
  letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1px color-mix(in srgb, currentColor 22%, transparent);
  opacity:.42;
  transition:color var(--dur-3) var(--ease-standard),
             opacity var(--dur-3) var(--ease-standard);
  pointer-events:none;
}
a.card--slate:hover .card__no{
  color:color-mix(in srgb, var(--primary) 20%, transparent);
  opacity:.85;
}
.card__rule{
  position:absolute; top:0; left:0; z-index:3;
  height:2px; width:100%;
  background:linear-gradient(90deg, var(--primary), var(--gold-80));
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-3) var(--ease-emph);
}
a.card--slate:hover .card__rule{ transform:scaleX(1); }
a.card--slate:hover{ transform:translateY(-8px); }

/* --- 10.3 Filled-button sheen -------------------------------------------- */
.btn--filled::after{
  content:"";
  position:absolute; top:0; left:-70%; z-index:0;
  width:45%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(247,248,250,.38), transparent);
  transform:skewX(-18deg);
  opacity:0;
  pointer-events:none;
}
.btn--filled:hover::after{ animation:sheen 760ms var(--ease-standard); }
@keyframes sheen{
  0%  { left:-70%; opacity:0; }
  18% { opacity:1; }
  100%{ left:130%; opacity:0; }
}

/* --- 10.4 Numbered service rows (service pages) -------------------------- */
.svc::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; z-index:1;
  width:3px; border-radius:3px;
  background:linear-gradient(180deg, var(--primary), var(--gold-70));
  transform:scaleY(0); transform-origin:top;
  transition:transform var(--dur-3) var(--ease-emph);
}
.svc:hover::before{ transform:scaleY(1); }
.svc:hover{ transform:translateX(6px); box-shadow:var(--elev-1); }
.svc .idx{
  transition:background var(--dur-2) var(--ease-standard),
             color var(--dur-2) var(--ease-standard),
             border-color var(--dur-2) var(--ease-standard);
}
.svc:hover .idx{
  background:var(--primary); color:var(--on-primary); border-color:var(--primary);
}

/* --- 10.5 Bolder statement bands ----------------------------------------- */
.marquee-item{ font-size:clamp(22px, 2.5vw, 40px); opacity:.78; }

/* --- 10.6 Inner-page hero entrance --------------------------------------- */
.page-hero .crumb  { animation:heroFade 760ms var(--ease-emph-decel) 0s   backwards; }
.page-hero .eyebrow{ animation:heroFade 760ms var(--ease-emph-decel) .06s backwards; }
.page-hero h1      { animation:heroFade 900ms var(--ease-emph-decel) .16s backwards; }
.page-hero__lede   { animation:heroFade 820ms var(--ease-emph-decel) .32s backwards; }
.page-hero .btn-row{ animation:heroFade 820ms var(--ease-emph-decel) .44s backwards; }

/* --- 10.7 Reduced motion: collapse the signature layer ------------------- */
@media (prefers-reduced-motion: reduce){
  .hero__title .line__inner,
  .hero__title em,
  .hero .eyebrow, .hero__lede, .hero .btn-row,
  .hero__bg::after,
  .page-hero .crumb, .page-hero .eyebrow, .page-hero h1,
  .page-hero__lede, .page-hero .btn-row,
  .btn--filled:hover::after{ animation:none !important; }
  .hero__title .line__inner{ transform:none !important; }
  .hero__spot{ display:none; }
}

/* --- 10.8 Service-page hero: kinetic mask title -------------------------- */
.page-hero__title{ animation:none; line-height:.92; }
.page-hero__title .line{
  display:block; overflow:hidden;
  padding-bottom:.08em; margin-bottom:-.08em;
}
.page-hero__title .line__inner{
  display:block; will-change:transform;
  animation:maskRise 900ms var(--ease-emph-decel) backwards;
}
.page-hero__title .line:nth-child(1) .line__inner{ animation-delay:.14s; }
.page-hero__title .line:nth-child(2) .line__inner{ animation-delay:.26s; }
@media (prefers-reduced-motion: reduce){
  .page-hero__title .line__inner{ animation:none !important; transform:none !important; }
}

/* --- 10.9 keep the concentric bezel off full-bleed media cards -------- */
.card--filled:has(.media)::after{ content:none; }

/* ==========================================================================
   11. EDITORIAL + REAL IMAGERY  (EVORIA-tier build-out)
   Photography drops into the existing .media slots; adds a Selected Work
   portfolio, a stats band, and a testimonial system. Light-dominant rhythm
   with the dark sections kept as punctuation.
   ========================================================================== */

/* real photos replace the gradient placeholders in-place */
img.media{
  display:block;
  width:100%;
  object-fit:cover;
  background:var(--surface-highest);           /* soft tint while loading */
}
img.media:not(.media--tall){ height:clamp(240px, 30vw, 380px); }
img.media.media--tall{ height:clamp(360px, 44vw, 600px); }

/* --- 11.1 Selected Work portfolio --------------------------------------- */

/* --- 11.2 Stats band ---------------------------------------------------- */
.stats{ display:grid; grid-template-columns:repeat(3, 1fr); }
.stat{ padding:clamp(4px,1vw,12px) clamp(18px,2.2vw,34px); }
.stat + .stat{ border-left:1px solid var(--outline-var); }
.stat__num{
  font-family:var(--serif);
  font-size:clamp(48px, 5.2vw, 78px);
  line-height:.98; letter-spacing:-.035em;
  color:var(--on-surface);
}
.stat__label{
  margin-top:14px;
  font-family:var(--serif);
  font-size:clamp(15px,1.15vw,18px);
  line-height:1.35;
  color:var(--on-surface-var);
}
@media (max-width: 860px){
  .stats{ grid-template-columns:repeat(2, 1fr); row-gap:30px; }
  .stat:nth-child(odd){ border-left:0; }
  .stat:nth-child(n+3){ border-top:1px solid var(--outline-var); padding-top:30px; }
}

/* --- 11.3 Testimonials (styles ready; page ships an honest empty-state) -- */
/* --- selected works cards ------------------------------------------------ */

.work-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(16px, 1.8vw, 24px);
}
@media (max-width: 960px){ .work-grid{ grid-template-columns:1fr; } }

.work-card{
  position:relative;
  display:block;
  border-radius:var(--shape-lg);
  overflow:hidden;
  isolation:isolate;
  background:var(--n-10);
  text-decoration:none;
  color:#F7F8FA;
  box-shadow:var(--elev-1);
  transition:box-shadow var(--dur-3) var(--ease-standard),
             transform var(--dur-3) var(--ease-emph);
}
.work-card:hover{ transform:translateY(-6px); box-shadow:var(--elev-3); }

.work-card__img{
  display:block;
  width:100%;
  height:clamp(320px, 30vw, 440px);
  object-fit:cover;
  border-radius:0;
  transition:transform var(--dur-5) var(--ease-emph);
}
.work-card:hover .work-card__img{ transform:scale(1.04); }

.work-card__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,31,63,0) 30%, rgba(0,31,63,.4) 58%, rgba(0,31,63,.9) 100%);
}
.work-card__body{
  position:absolute; inset:auto 0 0 0; z-index:2;
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  padding:clamp(20px, 2vw, 28px);
}
.work-card__cat{
  display:block;
  font-family:var(--sans);
  font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-70);
  margin-bottom:8px;
}
.work-card__title{
  display:block;
  font-family:var(--serif);
  font-size:clamp(21px, 1.9vw, 27px);
  line-height:1.15;
  letter-spacing:-.015em;
}
.work-card__client{
  display:block;
  margin-top:5px;
  font-family:var(--sans);
  font-size:12.5px;
  color:rgba(247,248,250,.72);
}
.work-card__go{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  border-radius:var(--shape-full);
  border:1px solid rgba(247,248,250,.3);
  transition:background var(--dur-2) var(--ease-standard),
             border-color var(--dur-2) var(--ease-standard);
}
.work-card__go svg{ width:17px; height:17px; }
.work-card:hover .work-card__go{ background:var(--gold-50); border-color:var(--gold-50); }

/* --- on-set strip (About) ------------------------------------------------ */

.onset{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(14px, 1.6vw, 22px);
}
@media (max-width: 860px){ .onset{ grid-template-columns:1fr; } }

.onset__item{ margin:0; }
.onset__item img{
  display:block;
  width:100%;
  height:clamp(220px, 22vw, 300px);
  object-fit:cover;
  border-radius:var(--shape-md);
  box-shadow:var(--elev-1);
}
.onset__item figcaption{
  margin-top:10px;
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.03em;
  color:var(--on-surface-var);
}

/* --- SB7 additions: guide line, stakes, checklist ------------------------ */

.guide-line{
  font-family:var(--serif);
  font-size:clamp(18px, 1.6vw, 23px);
  line-height:1.42;
  letter-spacing:-.01em;
  color:var(--on-surface);
  max-width:44ch;
  margin:0 0 20px;
  padding-left:18px;
  border-left:3px solid var(--primary);
}

.ticklist--wide{ max-width:70ch; }
.ticklist--wide li{ font-size:16.5px; }

.stakes{
  margin-top:clamp(26px, 3vw, 40px);
  padding-top:clamp(20px, 2.2vw, 28px);
  border-top:1px solid var(--outline-var);
  font-family:var(--serif);
  font-size:clamp(17px, 1.5vw, 21px);
  color:var(--on-surface-var);
  max-width:52ch;
}

/* checklist page */
.ckgroup{ margin-bottom:clamp(30px, 3.4vw, 46px); }
.ckgroup__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  font-family:var(--sans); font-size:11.5px; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--primary);
  margin:0 0 14px; padding-bottom:9px; border-bottom:1px solid var(--outline-var);
}
.ckgroup__head .num{
  font-variant-numeric:tabular-nums; color:var(--on-surface-var); font-weight:600;
}
.cklist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.cklist li{
  display:grid; grid-template-columns:auto 1fr; gap:13px;
  align-items:start; padding:8px 0;
}
.cklist input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  width:18px; height:18px; margin:4px 0 0; flex:none;
  border:1.5px solid var(--outline); border-radius:3px;
  background:transparent; cursor:pointer;
  transition:background var(--dur-2) var(--ease-standard),
             border-color var(--dur-2) var(--ease-standard);
}
.cklist input[type="checkbox"]:checked{
  background:var(--primary); border-color:var(--primary);
}
.cklist label{ cursor:pointer; }
.cklist .hint{
  display:block; font-size:14px; color:var(--on-surface-var); margin-top:2px;
}

.ckrush{
  border-left:3px solid var(--primary);
  background:var(--surface-c);
  padding:18px 22px; margin-bottom:clamp(30px,3.4vw,46px);
}
.ckrush p{ margin:0; font-size:15.5px; }

.ckclose{ padding-top:clamp(22px,2.4vw,30px); border-top:2px solid var(--on-surface); }
.ckclose p{ margin:0 0 20px; color:var(--on-surface-var); max-width:62ch; }

@media print{
  .app-bar, .site-footer, .progress, .page-hero__bg, .page-hero__grain,
  .ckclose .btn{ display:none !important; }
  .page-hero{ padding:0 0 18px; color:#000; background:none; }
  .ckgroup{ page-break-inside:avoid; }
}

/* --- testimonial carousel -------------------------------------------------
   Scroll-snap so a card always lands square, never half off-screen. It
   auto-advances, but scrolling, swiping, the arrows or the arrow keys hand
   control to the reader and stop the timer permanently.
   -------------------------------------------------------------------------- */

.tcar{ position:relative; }

.tcar__viewport{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  /* without this, mandatory snapping pulls the card flush to the scrollport
     edge and swallows the track's gutter padding */
  scroll-padding-inline:clamp(20px, 4vw, 44px);
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-block:6px;
}
.tcar__viewport::-webkit-scrollbar{ display:none; }
.tcar__viewport:focus-visible{
  outline:3px solid var(--primary);
  outline-offset:4px;
  border-radius:var(--shape-lg);
}

.tcar__track{
  display:flex;
  gap:clamp(16px, 1.8vw, 24px);
  /* line the first and last card up with the page gutter */
  padding-inline:clamp(20px, 4vw, 44px);
  width:max-content;
}
@media (min-width: 1368px){
  .tcar__track{ padding-inline:calc((100vw - 1280px) / 2 + 44px); }
  .tcar__viewport{ scroll-padding-inline:calc((100vw - 1280px) / 2 + 44px); }
}
.tcar__track > .tstmnl{
  flex:0 0 clamp(290px, 27vw, 400px);
  scroll-snap-align:start;
}

.tcar__controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:clamp(22px, 2.4vw, 32px);
}

.tcar__dots{ display:flex; gap:8px; flex-wrap:wrap; }
.tcar__dot{
  width:8px; height:8px;
  padding:0;
  border:0;
  border-radius:var(--shape-full);
  background:var(--outline-var);
  cursor:pointer;
  transition:background var(--dur-2) var(--ease-standard),
             width var(--dur-3) var(--ease-emph);
}
.tcar__dot[aria-current="true"]{ background:var(--primary); width:26px; }

.tcar__arrows{ display:flex; gap:10px; }
.tcar__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px; height:48px;
  border-radius:var(--shape-full);
  border:1px solid var(--outline-var);
  background:var(--surface-lowest);
  color:var(--on-surface);
  cursor:pointer;
  transition:background var(--dur-2) var(--ease-standard),
             border-color var(--dur-2) var(--ease-standard),
             color var(--dur-2) var(--ease-standard),
             opacity var(--dur-2) var(--ease-standard);
}
.tcar__btn svg{ width:20px; height:20px; }
.tcar__btn:hover{
  background:var(--primary);
  border-color:var(--primary);
  color:var(--on-primary);
}
/* the arrows wrap around, so neither ever dead-ends */

@media (max-width: 700px){
  .tcar__controls{ justify-content:center; }
  .tcar__dots{ display:none; }
}

.tstmnl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,24px); }
@media (max-width: 960px){ .tstmnl-grid{ grid-template-columns:1fr; } }
.tstmnl{
  /* <figure> and <blockquote> both carry a UA default margin of 40px per
     side. Left in, it ate ~80px of every card's width. */
  margin:0;
  display:flex; flex-direction:column; gap:22px;
  padding:clamp(26px,2.4vw,36px);
  border:1px solid var(--outline-var);
  border-radius:var(--shape-lg);
  background:var(--surface-lowest);
}
.tstmnl__quote{ margin:0; font-family:var(--serif); font-size:clamp(17px,1.3vw,19px); line-height:1.5; color:var(--on-surface); }
.tstmnl__who{ margin-top:auto; }
.tstmnl__name{ font-family:var(--serif); font-size:17px; }
.tstmnl__role{ display:block; margin-top:3px; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--on-surface-var); }
.tstmnl-soon{ max-width:60ch; margin-inline:auto; }

/* ==========================================================================
   12. BRAND-EXACT DARK  (client colour lock)
   The three brand colours are the anchors — White #F7F8FA (light surfaces),
   Dark Blue #001F3F (dark sections), Golden Brown #A67C00 (accent). The dark
   sections are re-hued to sit on the EXACT brand Dark Blue with gold light,
   dropping the near-black #0B0820 and any off-brand violet.
   ========================================================================== */
:root{
  --brand-gold:#A67C00;
  --brand-navy:#001F3F;   /* exact client Dark Blue */
  --brand-white:#F7F8FA;  /* exact client White */
  /* Depth comes from lifting toward White, never from going darker than the
     brand Dark Blue. #001F3F is the floor: nothing on the site sits below it. */
  --navy-lift:#163350;    /* #001F3F mixed 9% toward #F7F8FA */
}
.hero, .page-hero, .cta-band, .site-footer{ background:var(--brand-navy); }
.app-bar[data-scrolled="true"]{ background:color-mix(in srgb, var(--brand-navy) 90%, transparent); }
.app-bar[data-open="true"]{ background:var(--brand-navy); }

.hero__bg{
  background:
    radial-gradient(46% 40% at 18% 74%, rgba(166,124,0,.42), transparent 60%),
    radial-gradient(44% 40% at 80% 20%, rgba(166,124,0,.16), transparent 62%),
    linear-gradient(160deg, var(--navy-lift) 0%, var(--brand-navy) 100%);
}
.page-hero__bg{
  background:
    radial-gradient(44% 50% at 24% 18%, rgba(166,124,0,.40), transparent 62%),
    radial-gradient(42% 44% at 82% 66%, rgba(166,124,0,.14), transparent 64%),
    linear-gradient(170deg, var(--navy-lift) 0%, var(--brand-navy) 100%);
}
.cta-band__bg{
  background:
    radial-gradient(42% 50% at 16% 34%, rgba(166,124,0,.42), transparent 60%),
    radial-gradient(44% 46% at 86% 70%, rgba(166,124,0,.14), transparent 64%),
    linear-gradient(150deg, var(--navy-lift) 0%, var(--brand-navy) 100%);
}

/* --- touch devices: no sticky hover -------------------------------------
   A phone emulates :hover on tap and keeps it applied until the next tap
   somewhere else, so a tapped card stayed lifted, shadowed and recoloured.
   Neutralise every hover-driven movement where there is no real pointer.
   :active still fires, so taps keep their momentary feedback.
   ------------------------------------------------------------------------ */
@media (hover: none){
  a.card:hover,
  a.card--slate:hover,
  .work-card:hover,
  .svc:hover{ transform:none; }

  a.card--slate:hover,
  a.card:hover{ box-shadow:none; }
  a.card--elevated:hover{ box-shadow:var(--elev-1); }
  .work-card:hover{ box-shadow:var(--elev-1); }
  .svc:hover{ box-shadow:none; }

  a.card:hover::before{ opacity:0; }
  a.card:hover .mark{
    background:var(--primary-container);
    color:var(--on-primary-container);
    border-radius:var(--shape-md) var(--shape-md) var(--shape-md) 2px;
  }
  a.card--slate:hover .card__rule{ transform:scaleX(0); }
  .work-card:hover .work-card__img{ transform:none; }

  .btn:hover .arrow,
  .arrowlink:hover svg{ transform:none; }
  .btn:hover::before,
  .state:hover::before,
  .nav-links a:hover::before,
  .social:hover::before{ opacity:0; }
  .social:hover{ transform:none; }

  .tcar__btn:hover{
    background:var(--surface-lowest);
    border-color:var(--outline-var);
    color:var(--on-surface);
  }
}