/* ============================================================
   S95 CAPITAL — design tokens
   ============================================================ */
:root{
  --black:       #1A1600;
  --black-soft:  #211c04;
  --black-2:     #262005;
  --black-3:     #2f2707;
  --gold:        #FFD700;
  --gold-2:      #E8C34A;
  --gold-dim:    rgba(255,215,0,.55);
  --gold-faint:  rgba(255,215,0,.14);
  --cream:       #F8F4E6;
  --body-c:      #B7AF98;
  --body-c-dim:  #857e69;
  --line:        rgba(255,215,0,.14);
  --line-strong: rgba(255,215,0,.32);
  --shadow-gold: 0 20px 60px -20px rgba(255,215,0,.25);

  --font-serif: "Merriweather", Georgia, serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);

  --container: 1240px;
  --nav-h: 88px;
}

*,*::before,*::after{ box-sizing: border-box; }
[hidden]{ display:none !important; }
html{
  background: var(--black);
  scroll-behavior: auto;
}
html.has-lenis{ overflow: hidden auto; }
body{
  margin:0;
  background: var(--black);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  cursor: default;
}
img,svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration:none; }
button{ font-family: inherit; background:none; border:none; color:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
::selection{ background: var(--gold); color: var(--black); }

.eyebrow{
  display:flex; align-items:center; gap:.6em;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.eyebrow-dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-faint);
  flex-shrink:0;
}
.h2{
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.2vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--cream);
}

/* ============================================================
   Grain + fixed depth layers
   ============================================================ */
.grain-svg{
  position: fixed; inset:0; width:100%; height:100%;
  z-index: 3; pointer-events:none;
  opacity: .05;
  mix-blend-mode: overlay;
}
.bg-layers{
  position: fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.orb{
  position:absolute; border-radius:50%;
  filter: blur(90px);
  mix-blend-mode: screen;
  will-change: transform;
}
.orb-a{ width:52vw; height:52vw; top:-18vw; right:-14vw; background: radial-gradient(circle, rgba(255,215,0,.16), transparent 70%); }
.orb-b{ width:38vw; height:38vw; top:60vh; left:-12vw; background: radial-gradient(circle, rgba(255,215,0,.12), transparent 70%); }
.orb-c{ width:44vw; height:44vw; top:150vh; right:-10vw; background: radial-gradient(circle, rgba(255,196,0,.10), transparent 70%); }
.beam{
  position:absolute; top:0; left:50%; width:1px; height:100%;
  background: linear-gradient(to bottom, transparent, var(--gold-faint) 20%, transparent 60%);
  opacity:.4;
}
.grid-lines{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,215,0,.035) 1px, transparent 1px);
  background-size: 8.33% 100%;
  opacity:.5;
}

/* ============================================================
   Cursor accent — normal system arrow, trailing gold glow
   ============================================================ */
.cursor-ring{ display:none; }
@media (hover:hover) and (pointer:fine){
  /* keep the native arrow everywhere; this is a decorative accent only */
  .cursor-ring{
    display:block; position:fixed; top:0; left:0; z-index: 999;
    pointer-events:none; border-radius:50%;
    transform: translate(-50%,-50%);
    will-change: transform;
    width:28px; height:28px;
    background: radial-gradient(circle, rgba(255,215,0,.35), rgba(255,215,0,0) 70%);
    opacity:0; transition: width .3s var(--ease-out), height .3s var(--ease-out), opacity .3s;
  }
  .cursor-ring.is-hover{ width:52px; height:52px; opacity:1; }
}

/* ============================================================
   Preloader
   ============================================================ */
.preloader{
  position:fixed; inset:0; z-index: 1000;
  background: var(--black);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
}
.preloader-mark{ display:flex; }
.preloader-mark-img{ height:72px; width:auto; display:block; }
.preloader-bar{ width:180px; height:1px; background: rgba(255,215,0,.15); overflow:hidden; }
.preloader-bar span{ display:block; height:100%; width:0%; background: var(--gold); }

/* scroll progress rail */
.scroll-rail{
  position: fixed; top:0; left:0; width:100%; height:2px; z-index: 500;
  background: transparent;
}
.scroll-rail-fill{
  display:block; height:100%; width:0%;
  background: linear-gradient(to right, var(--gold-2), var(--gold));
  box-shadow: 0 0 12px rgba(255,215,0,.5);
}

/* ============================================================
   Nav
   ============================================================ */
.site-nav{
  position: fixed; top:0; left:0; width:100%; z-index: 400;
  height: var(--nav-h);
  display:flex; align-items:center;
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease-out), border-color .4s var(--ease-out), height .4s var(--ease-out), backdrop-filter .4s;
}
.site-nav.scrolled{
  height: 72px;
  background: rgba(26,22,0,.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav-inner{
  width:100%; max-width: var(--container); margin:0 auto; padding: 0 32px;
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
}
.logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-mark{ font-family: var(--font-serif); font-weight:900; font-size:1.6rem; color: var(--gold); letter-spacing:-.01em; line-height:1; display:flex; align-items:center; }
.logo-mark-img{ height:1.6rem; width:auto; display:block; }
.logo-word{ font-family: var(--font-sans); font-weight:500; font-size:.66rem; letter-spacing:.24em; color: var(--body-c); line-height:1; margin-top:.15em; }

.nav-actions{ display:flex; align-items:center; gap:22px; flex-shrink:0; }
.nav-burger{ display:flex; flex-direction:column; gap:5px; padding:6px; z-index:600; }
.nav-burger span{ width:22px; height:1.5px; background: var(--cream); transition: transform .3s var(--ease-out), opacity .3s; }
.nav-burger.is-open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2){ opacity:0; }
.nav-burger.is-open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

/* buttons */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding: 15px 30px; font-size:.86rem; font-weight:600; letter-spacing:.01em;
  border-radius: 2px; overflow:hidden; isolation:isolate;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s;
}
.btn span{ position:relative; z-index:2; }
.btn-sm{ padding: 10px 22px; font-size:.78rem; }
.btn-gold{
  background: var(--gold); color: var(--black);
  box-shadow: 0 12px 30px -12px rgba(255,215,0,.55);
}
.btn-gold::before{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.55) 45%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-out);
}
.btn-gold:hover::before{ transform: translateX(120%); }
.btn-gold:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(255,215,0,.65); }
.btn-ghost{
  border:1px solid var(--line-strong); color: var(--cream); background: rgba(255,215,0,.03);
}
.btn-ghost:hover{ border-color: var(--gold); background: rgba(255,215,0,.08); transform: translateY(-2px); }
.btn-block{ width:100%; padding:17px; }

/* mobile menu — slide-in side drawer with a dimmed backdrop, so it
   never covers the whole screen */
.mm-backdrop{
  position: fixed; inset:0; z-index: 490;
  background: rgba(10,8,0,.6);
  backdrop-filter: blur(2px);
  opacity:0; pointer-events:none;
  transition: opacity .4s var(--ease-out);
}
.mm-backdrop.is-open{ opacity:1; pointer-events:auto; }

.mobile-menu{
  position: fixed; top:0; right:0; bottom:0; z-index: 500;
  width: min(78vw, 320px);
  background: var(--black-2);
  border-left: 1px solid var(--line-strong);
  box-shadow: -40px 0 70px -20px rgba(0,0,0,.6);
  display:flex; flex-direction:column; justify-content:flex-start;
  padding: calc(var(--nav-h) + 28px) 28px 40px;
  overflow-y:auto;
  transform: translateX(100%);
  transition: transform .5s var(--ease-in-out);
}
.mobile-menu.is-open{ transform: translateX(0); }
.mobile-menu nav{ display:flex; flex-direction:column; gap:2px; }
.mobile-menu nav a{
  font-family: var(--font-serif); font-size: 1.28rem; font-weight:700; color: var(--cream);
  padding: 13px 0; border-bottom:1px solid var(--line);
  opacity:0; transform: translateY(12px);
}
.mobile-menu.is-open nav a{ animation: mmIn .55s var(--ease-out) forwards; }
.mobile-menu nav a:nth-child(1){ animation-delay:.05s; }
.mobile-menu nav a:nth-child(2){ animation-delay:.09s; }
.mobile-menu nav a:nth-child(3){ animation-delay:.13s; }
.mobile-menu nav a:nth-child(4){ animation-delay:.17s; }
.mobile-menu nav a:nth-child(5){ animation-delay:.21s; }
.mobile-menu nav a:nth-child(6){ animation-delay:.25s; }
.mm-cta{
  font-family: var(--font-sans) !important; font-size: .88rem !important; font-weight:600;
  color: var(--black) !important; border-bottom:none !important;
  background: var(--gold); text-align:center; border-radius:2px;
  padding: 15px 0 !important; margin-top: 18px;
  animation-delay:.3s !important;
}
@keyframes mmIn{ to{ opacity:1; transform:none; } }

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative; z-index:1; overflow:hidden;
  min-height: 100vh;
  display:flex; align-items:center;
  padding: calc(var(--nav-h) + 40px) 32px 120px;
}
.hero-media{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.hero-media:empty{ display:none; }
.hero-media img, .hero-media video{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(26,22,0,.55), rgba(26,22,0,.88));
}
.hero-paths{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-paths-svg{ display:block; width:100%; height:100%; }
.hero-paths-svg path{
  fill:none;
  stroke: var(--gold);
  stroke-dasharray: 0.22 0.78;
  stroke-dashoffset: 1;
  animation-name: heroPathFlow;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.hero-paths-svg.is-static path{ animation:none; stroke-dasharray:none; stroke-dashoffset:0; opacity:.05; }
@keyframes heroPathFlow{
  from{ stroke-dashoffset: 1; }
  to{ stroke-dashoffset: -1; }
}
.hero-inner{ width:100%; max-width: var(--container); margin:0 auto; position:relative; z-index:1; }
.hero-title{
  font-family: var(--font-serif); font-weight:700; color: var(--cream);
  font-size: clamp(2.8rem, 7.6vw, 6.4rem);
  line-height: 1.03; letter-spacing:-.02em;
  margin-bottom: 34px;
  max-width: 15ch;
}
.hero-title em{ font-style: italic; color: var(--gold); font-weight:700; }
.line-mask{ display:block; overflow:hidden; padding-bottom: .06em; }
.line-inner{ display:block; transform: translateY(115%); }

.hero-sub{
  font-size: 1.08rem; color: var(--body-c); max-width: 46ch; line-height:1.75;
  margin-bottom: 44px;
}
.hero-intro{ max-width: 50ch; margin-bottom: 44px; display:flex; flex-direction:column; gap:14px; }
.hero-intro-heading{
  font-family: var(--font-serif); font-weight:700; font-size: 1.3rem; color: var(--cream);
  letter-spacing:-.01em;
}
.hero-intro p:not(.hero-intro-heading){ font-size: .96rem; color: var(--body-c); line-height:1.7; }
.hero-ctas{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom: 90px; }

.hero-chips{ position:relative; height: 170px; }
.chip{
  position:absolute;
  background: linear-gradient(160deg, rgba(255,215,0,.09), rgba(255,215,0,.02));
  border:1px solid var(--line); border-radius: 3px;
  backdrop-filter: blur(6px);
  padding: 18px 22px;
  display:flex; align-items:center; gap:12px;
  will-change: transform;
}
.chip-1{ top:0; left:0; }
.chip-2{ top:14px; left: 236px; }
.chip-3{ top:36px; left: 512px; display:flex; align-items:baseline; gap:6px; }
.chip-num{ font-family: var(--font-serif); font-size:1.9rem; font-weight:700; color: var(--gold); line-height:1; }
.chip-pre{ font-size:.7rem; color: var(--body-c-dim); text-transform:uppercase; letter-spacing:.1em; }
.chip-label{ font-size:.72rem; color: var(--body-c); line-height:1.35; }

.scroll-cue{
  position:absolute; bottom: 36px; left:32px;
  display:flex; align-items:center; gap:12px;
  color: var(--body-c-dim); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
}
.scroll-cue-line{ width:1px; height:38px; background: linear-gradient(to bottom, var(--gold), transparent); position:relative; overflow:hidden; }
.scroll-cue-line::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background: var(--gold);
  animation: cueDrop 1.8s ease-in-out infinite;
}
@keyframes cueDrop{ 0%{ top:-100%; } 60%,100%{ top:100%; } }

/* ============================================================
   Marquee
   ============================================================ */
.marquee-strip{
  position:relative; z-index:1;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding: 22px 0; overflow:hidden;
  background: linear-gradient(180deg, rgba(255,215,0,.03), transparent);
}
.marquee-track{
  display:flex; align-items:center; gap: 28px; white-space:nowrap; width:max-content;
  animation: marquee 32s linear infinite;
}
.marquee-strip:hover .marquee-track{ animation-play-state: paused; }
.marquee-track span{
  font-family: var(--font-sans); font-weight:500; font-size:1rem; letter-spacing:.02em; color: var(--body-c);
}
.marquee-track i{ color: var(--gold); font-style:normal; font-size:.8rem; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }


/* ============================================================
   Why (pinned differentiators)
   ============================================================ */
.why{ position:relative; z-index:1; }
.why-pin{
  position:relative; height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding: 0 32px; max-width: var(--container); margin:0 auto;
  background: var(--black);
}
.why-head{ margin-bottom: 72px; }
.why-head .h2{ max-width: 14ch; }
.why-items{ display:grid; grid-template-columns: repeat(3,1fr); gap: 44px; }
.why-item{
  padding-top: 28px; border-top:1px solid var(--line);
  opacity:.32; filter: grayscale(.6);
  transform: translateY(18px) scale(.98);
  transition: border-color .35s ease;
}
.why-item:hover{ border-top-color: var(--gold); }
.why-item-icon{
  width:44px; height:44px; color: var(--gold); margin-bottom: 26px;
  transition: filter .35s ease, transform .35s ease;
}
.why-item-icon svg{ width:100%; height:100%; }
.why-item:hover .why-item-icon{
  transform: scale(1.08);
  filter: drop-shadow(0 0 10px rgba(255,215,0,.7)) drop-shadow(0 0 24px rgba(255,215,0,.35));
}
.why-item-no{ display:block; font-family: var(--font-serif); font-size:.8rem; color: var(--gold-dim); margin-bottom:10px; letter-spacing:.05em; }
.why-item h3{ font-family: var(--font-serif); font-size:1.5rem; font-weight:700; color: var(--cream); margin-bottom:12px; }
.why-item p{ color: var(--body-c); font-size:.95rem; line-height:1.7; max-width: 32ch; }

/* ============================================================
   Services — stacked scroll cards
   ============================================================ */
.services{ position:relative; z-index:1; padding-top: 130px; }
.services-head{ max-width: var(--container); margin:0 auto; padding: 0 32px 70px; }
.services-sub{ color: var(--body-c); max-width:56ch; margin-top:20px; font-size:1.02rem; }

.stack{ position:relative; }
.stack-card{
  position: sticky; top:0; height:100vh;
  display:flex; align-items:center;
  will-change: transform, opacity;
  /* The inner content box only needs ~78vh, but it must not leave the rest
     of this panel transparent — that gap let the previous (fading but not
     yet fully gone) card show through above/below the current one. */
  background: var(--black-2);
}
.stack-card-inner{
  width:100%; max-width: var(--container); margin: 0 auto;
  padding: 64px 32px;
  background: linear-gradient(160deg, var(--black-2), var(--black-soft));
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -30px 80px -30px rgba(0,0,0,.6), var(--shadow-gold);
  display:grid; grid-template-columns: 90px 110px 1fr; align-items:start; gap: 8px 36px;
  min-height: 78vh;
}
.stack-no{
  grid-column:1; font-family: var(--font-serif); font-size:1.1rem; color: var(--gold-dim);
  padding-top: 4px;
}
.stack-icon{ grid-column:2; width:64px; height:64px; color: var(--gold); }
.stack-copy{ grid-column:3; max-width: 640px; }
.stack-tag{
  display:inline-block; font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color: var(--gold); margin-bottom: 20px;
}
.stack-copy h3{
  font-family: var(--font-serif); font-weight:700; color: var(--cream);
  font-size: clamp(2.2rem, 4vw, 3.4rem); line-height:1.05; margin-bottom: 22px; letter-spacing:-.01em;
}
.stack-copy p{ color: var(--body-c); font-size:1.08rem; line-height:1.75; max-width: 52ch; margin-bottom: 34px; }
.stack-meta{ display:flex; align-items:center; gap: 34px; flex-wrap:wrap; }
.stack-meta > span{
  font-size:.82rem; color: var(--cream); border:1px solid var(--line); padding:8px 16px; border-radius:2px;
}
.stack-media{ display:none; }
.stack-card-inner.has-media{ grid-template-columns: 90px 110px 1fr minmax(220px, 320px); }
.stack-card-inner.has-media .stack-media{
  display:block; grid-column:4; grid-row: 1 / span 2; align-self:stretch;
  border-radius:8px; overflow:hidden; border:1px solid var(--line-strong); min-height:220px;
}
.stack-media img, .stack-media video{ width:100%; height:100%; object-fit:cover; display:block; }
.stack-link{ font-size:.92rem; font-weight:600; color: var(--gold); display:inline-flex; align-items:center; gap:8px; }
.stack-link i{ font-style:normal; transition: transform .3s var(--ease-out); }
.stack-link:hover i{ transform: translateX(5px); }
.stack-link-secondary{
  font-size:.92rem; font-weight:500; color: var(--body-c);
  border-bottom:1px solid var(--line); transition: color .25s, border-color .25s;
}
.stack-link-secondary:hover{ color: var(--cream); border-color: var(--gold); }

/* ============================================================
   Process
   ============================================================ */
.process{ position:relative; z-index:1; padding: 180px 32px 160px; max-width: var(--container); margin:0 auto; }
.process-head{ margin-bottom: 90px; }
.process-track{ position:relative; display:grid; grid-template-columns: repeat(4,1fr); gap: 40px; }
.process-line{
  position:absolute; top:15px; left:0; width:100%; height:1px; background: var(--line);
}
.process-line-fill{
  display:block; height:100%; width:100%; background: var(--gold); box-shadow: 0 0 10px rgba(255,215,0,.6);
  transform-origin: left center; transform: scaleX(0);
}
.process-step{ position:relative; padding-top: 46px; opacity:0; transform: translateY(24px); }
.process-step::before{
  content:""; position:absolute; top:8px; left:0; width:15px; height:15px; border-radius:50%;
  background: var(--black); border:2px solid var(--gold-dim);
}
.process-num{ display:block; font-family: var(--font-serif); font-size:.85rem; color: var(--gold-dim); margin-bottom:14px; }
.process-step h3{ font-family: var(--font-serif); font-size:1.28rem; font-weight:700; color: var(--cream); margin-bottom:12px; }
.process-step p{ color: var(--body-c); font-size:.92rem; line-height:1.7; }

/* ============================================================
   Stats
   ============================================================ */
.stats{ position:relative; z-index:1; padding: 60px 32px 180px; }
.stats-grid{
  max-width: var(--container); margin:0 auto;
  display:grid; grid-template-columns: repeat(3,1fr);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.stat{ padding: 56px 24px; text-align:center; border-left:1px solid var(--line); }
.stat:first-child{ border-left:none; }
.stat-num{
  display:block; font-family: var(--font-serif); font-weight:900; color: var(--gold);
  font-size: clamp(2.6rem, 5vw, 4.2rem); line-height:1; margin-bottom:16px;
}
.stat-label{ font-size:.85rem; color: var(--body-c); letter-spacing:.02em; }

/* ============================================================
   Contact
   ============================================================ */
.contact{ position:relative; z-index:1; padding: 40px 32px 180px; }
.contact-inner{
  max-width: var(--container); margin:0 auto;
  display:grid; grid-template-columns: 1fr 1fr; gap: 90px;
}
.contact-copy p{ color: var(--body-c); font-size:1.05rem; line-height:1.75; max-width: 42ch; margin-top:22px; }
.contact-list{ margin-top: 44px; display:flex; flex-direction:column; gap:0; }
.contact-list li{
  display:flex; align-items:center; gap:20px; padding: 18px 0; border-bottom:1px solid var(--line);
}
.contact-list li span{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--body-c-dim); width:70px; flex-shrink:0; }
.contact-list li a{ font-family: var(--font-sans); font-weight:600; font-size:1.15rem; color: var(--cream); }
.contact-list li a:hover{ color: var(--gold); }

.contact-form{
  position:relative;
  background: linear-gradient(165deg, var(--black-2), var(--black-soft));
  border:1px solid var(--line); border-radius:4px;
  padding: 44px; box-shadow: 0 40px 90px -40px rgba(0,0,0,.7);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap: 22px; }
.field{ margin-bottom: 22px; }
.field label{ display:block; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color: var(--body-c-dim); margin-bottom:10px; }
.field input, .field select, .field textarea{
  width:100%; background: rgba(255,215,0,.03); border:1px solid var(--line);
  color: var(--cream); font-family: var(--font-sans); font-size:.95rem;
  padding: 13px 15px; border-radius:2px; transition: border-color .25s, background .25s;
}
.field select{ appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD700'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 14px center; background-size:16px; }
.field select option{ background: var(--black); color: var(--cream); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--gold); background: rgba(255,215,0,.06);
}
.field textarea{ resize: vertical; min-height: 100px; }

.field-group{ margin-bottom: 22px; padding: 18px 20px; border:1px solid var(--line); border-radius:4px; background: rgba(255,215,0,.015); }
.field-group .form-row:last-child, .field-group .field:last-child{ margin-bottom:0; }

.field-checkbox label{
  display:flex; align-items:flex-start; gap:10px; text-transform:none; letter-spacing:normal;
  font-size:.85rem; color: var(--body-c); cursor:pointer;
}
.field-checkbox input[type="checkbox"]{ width:auto; flex-shrink:0; margin-top:3px; accent-color: var(--gold); cursor:pointer; }

.btn-spinner{
  display:none; width:16px; height:16px; margin-left:10px; border-radius:50%;
  border:2px solid rgba(26,22,0,.25); border-top-color: var(--black);
}
.contact-form.is-loading .btn-spinner{ display:inline-block; animation: spin .7s linear infinite; }
.contact-form.is-loading .btn-label{ opacity:.7; }
@keyframes spin{ to{ transform: rotate(360deg); } }

.form-success{
  display:flex; align-items:center; gap:10px; margin-top:20px; font-size:.92rem; color: var(--gold);
  opacity:0; height:0; overflow:hidden; transition: opacity .4s, height .4s;
}
.form-success svg{ width:20px; height:20px; flex-shrink:0; }
.contact-form.is-success .form-success{ opacity:1; height:auto; }
.contact-form.is-success form,
.contact-form.is-success .form-row,
.contact-form.is-success .field,
.contact-form.is-success .field-group,
.contact-form.is-success .btn{ opacity:.45; pointer-events:none; }

.field-honeypot{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none; }

.form-error{
  display:flex; align-items:center; gap:10px; margin-top:16px; font-size:.88rem; color:#ff8a8a;
  padding:12px 14px; border:1px solid rgba(255,80,80,.3); border-radius:2px; background:rgba(255,80,80,.06);
}
.contact-form.is-error .form-error{ display:flex; }

/* ============================================================
   Legal pages
   ============================================================ */
.legal-hero{
  position:relative; z-index:1; padding: calc(var(--nav-h) + 80px) 32px 60px;
  max-width: 820px; margin:0 auto;
}
.legal-hero p{ color: var(--body-c); margin-top:18px; max-width:56ch; }
.legal-body{
  position:relative; z-index:1; max-width: 820px; margin:0 auto; padding: 20px 32px 140px;
  border-top:1px solid var(--line);
}
.legal-body section{ padding: 44px 0; border-bottom:1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 24px); }
.legal-body section:last-child{ border-bottom:none; }
.legal-body h2{ font-family: var(--font-serif); font-size:1.5rem; font-weight:700; color: var(--cream); margin-bottom:16px; }
.legal-section-body > *{ margin-bottom:14px; }
.legal-section-body > *:last-child{ margin-bottom:0; }
.legal-section-body p{ color: var(--body-c); line-height:1.8; }
.legal-section-body ul, .legal-section-body ol{ padding-left: 22px; }
.legal-section-body li{ color: var(--body-c); line-height:1.8; margin-bottom:8px; }
.legal-section-body li:last-child{ margin-bottom:0; }
.legal-section-body li::marker{ color: var(--gold-dim); }
.legal-section-body a{ color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.legal-updated{ color: var(--body-c-dim); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; margin-top:20px; }

.table-scroll{ overflow-x:auto; }
.legal-table{ width:100%; min-width:480px; border-collapse:collapse; font-size:.92rem; }
.legal-table th, .legal-table td{ text-align:left; padding:12px 14px; border:1px solid var(--line); color: var(--body-c); line-height:1.6; vertical-align:top; }
.legal-table th{ color: var(--gold-dim); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; background: rgba(255,215,0,.03); }

/* ============================================================
   Service detail pages
   ============================================================ */
.service-hero{
  position:relative; z-index:1; overflow:hidden;
  padding: calc(var(--nav-h) + 90px) 32px 70px;
}
.service-hero-inner{ max-width: 820px; margin:0 auto; position:relative; z-index:1; }
.service-hero h1{
  font-family: var(--font-serif); font-weight:700; color: var(--cream);
  font-size: clamp(2.4rem, 5.4vw, 4rem); line-height:1.06; letter-spacing:-.02em;
  margin: 14px 0 24px;
}
.service-hero-intro{ color: var(--body-c); font-size:1.1rem; line-height:1.75; max-width: 62ch; margin-bottom: 34px; }
.service-hero-meta{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.service-hero-badge{
  font-size:.82rem; color: var(--cream); border:1px solid var(--line); padding:10px 18px; border-radius:2px;
}

.service-highlights{
  position:relative; z-index:1; max-width: 820px; margin: 0 auto; padding: 0 32px 20px;
  display:grid; grid-template-columns: 1fr 1fr; gap:16px;
}
.highlight-item{
  display:flex; align-items:flex-start; gap:14px;
  border:1px solid var(--line); border-radius:4px; padding:18px 20px;
  background: rgba(255,215,0,.02);
}
.highlight-dot{
  flex-shrink:0; width:8px; height:8px; border-radius:50%; margin-top:7px;
  background: var(--gold); box-shadow: 0 0 10px rgba(255,215,0,.7);
}
.highlight-item span:last-child{ color: var(--body-c); font-size:.95rem; line-height:1.6; }

.service-content{
  position:relative; z-index:1; max-width: 820px; margin:0 auto; padding: 50px 32px 20px;
  border-top:1px solid var(--line);
}
.service-section{ padding: 40px 0; border-bottom:1px solid var(--line); }
.service-section:last-child{ border-bottom:none; }
.service-section h2{ font-family: var(--font-serif); font-size:1.5rem; font-weight:700; color: var(--cream); margin-bottom:16px; }
.service-section p{ color: var(--body-c); line-height:1.8; }

.service-cta{
  position:relative; z-index:1; max-width: 720px; margin: 40px auto 0; padding: 56px 40px;
  text-align:center; border:1px solid var(--line-strong); border-radius:6px;
  background: linear-gradient(165deg, var(--black-2), var(--black-soft));
}
.service-cta h2{ font-family: var(--font-serif); font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight:700; color: var(--cream); margin-bottom:14px; }
.service-cta h2 em{ font-style:italic; color: var(--gold); }
.service-cta p{ color: var(--body-c); margin-bottom: 30px; }

.service-related{ position:relative; z-index:1; max-width: 820px; margin:0 auto; padding: 90px 32px 140px; }
.service-related > .eyebrow{ margin-bottom: 26px; }
.service-related-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.service-related-card{
  display:flex; align-items:center; gap:16px; padding:18px 20px;
  border:1px solid var(--line); border-radius:4px; transition: border-color .25s, background .25s;
}
.service-related-card:hover{ border-color: var(--gold); background: rgba(255,215,0,.04); }
.service-related-no{ font-family: var(--font-serif); font-size:.85rem; color: var(--gold-dim); flex-shrink:0; }
.service-related-title{ flex:1; color: var(--cream); font-size:.98rem; font-weight:500; }
.service-related-arrow{ color: var(--gold); opacity:0; transform: translateX(-4px); transition: opacity .25s, transform .25s; }
.service-related-card:hover .service-related-arrow{ opacity:1; transform:none; }

@media (max-width: 640px){
  .service-highlights{ grid-template-columns: 1fr; }
  .service-related-grid{ grid-template-columns: 1fr; }
  .service-cta{ padding: 40px 26px; }
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ position:relative; z-index:1; padding: 56px 32px 48px; border-top:1px solid var(--line); }
.footer-logo{ display:inline-flex; align-items:center; }
.footer-row{
  max-width: var(--container); margin:0 auto; padding-bottom:24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.footer-nav{ display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
.footer-nav a{ color: var(--body-c); font-size:.92rem; transition: color .25s; }
.footer-nav a:hover{ color: var(--gold); }
.footer-bottom-wrap{
  max-width: var(--container); margin:0 auto; padding-top:24px;
  border-top:1px solid var(--line);
}
.footer-disclaimer{ color: var(--body-c-dim); font-size:.85rem; line-height:1.7; max-width: 70ch; }

.to-top{
  position:fixed; right:28px; bottom:28px; z-index:300;
  width:48px; height:48px; border-radius:50%;
  background: var(--gold); color: var(--black);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 28px -10px rgba(255,215,0,.6);
  opacity:0; transform: translateY(14px) scale(.9); pointer-events:none;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.to-top.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.to-top svg{ width:20px; height:20px; }

/* ============================================================
   Reveal utility states (JS toggles .is-in)
   ============================================================ */
.reveal-fade{ opacity:0; transform: translateY(22px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal-fade.is-in{ opacity:1; transform:none; }
.reveal-lines .line-mask{ display:block; overflow:hidden; }
.process-step.is-in{ opacity:1; transform:none; transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.why-item.is-active{ opacity:1; filter:none; transform:none; transition: opacity .6s var(--ease-out), filter .6s var(--ease-out), transform .6s var(--ease-out), border-color .35s ease; }
.stack-card.reveal-fallback{ opacity:0; transform: translateY(40px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.stack-card.reveal-fallback.is-in{ opacity:1; transform:none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1180px){
  .chip-3{ left: auto; right:0; }

  .nav-actions{ gap:14px; }
  .nav-actions .btn-sm{ padding:8px 16px; font-size:.72rem; }
}

@media (max-width: 899px){
  :root{ --nav-h: 76px; }

  /* SVG feTurbulence + mix-blend-mode, composited full-viewport at all
     times, is expensive to keep rendered during scroll on mobile GPUs —
     for a grain texture that's barely visible at 5% opacity anyway. */
  .grain-svg{ display:none; }

  /* On mobile the hero copy routinely runs taller than the screen, so the
     large serif heading ends up scrolling directly underneath the fixed
     nav soon after the page starts moving. Desktop can get away with a
     transparent nav that only solidifies past 40px of scroll, but on
     mobile that leaves a window where heading text shows through/behind
     the logo and menu button — the messy overlap this fixes. Keep the
     mobile nav solid at all times instead of waiting on the scroll
     threshold. */
  /* .scrolled (toggled by JS past 40px, same specificity as this) still
     wins on source order alone, but only because this block comes later
     in the file — spell it out explicitly so that isn't left implicit. */
  .site-nav, .site-nav.scrolled{
    background: rgba(26,22,0,.97);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom-color: var(--line);
  }

  .hero{
    padding-top: calc(var(--nav-h) + 24px);
    /* Content here is routinely taller than one screen, so centering (the
       desktop behaviour) pushes the heading's top edge up behind the fixed
       nav — worse still as mobile browsers resize 100vh when the address
       bar collapses mid-scroll. Top-align and use a stable viewport unit
       instead so the heading never renders under the nav. */
    min-height: 100svh;
    align-items: flex-start;
  }
  .hero-chips{ height:auto; display:flex; flex-direction:column; gap:14px; }
  .chip{ position:static !important; width:100%; }

  .why{ height:auto; }
  .why-pin{ height:auto; padding: 100px 24px; }
  .why-items{ grid-template-columns: 1fr; gap:36px; }
  .why-item{ opacity:0; filter:none; transform: translateY(24px); }
  .why-item.is-active{ opacity:1; transform:none; }

  .services{ padding-top: 90px; }
  .services-head{ padding: 0 24px 46px; }
  .stack-card{ position: static; height:auto; padding: 0 0 24px; }
  .stack-card-inner{
    grid-template-columns: 60px 1fr; padding: 40px 24px; min-height:0;
    border-radius: 6px;
  }
  .stack-no{ grid-column:1; }
  .stack-icon{ grid-column:2; grid-row:1; width:48px; height:48px; justify-self:end; }
  .stack-copy{ grid-column: 1 / -1; }
  .stack-card-inner.has-media{ grid-template-columns: 60px 1fr; }
  .stack-card-inner.has-media .stack-media{
    grid-column: 1 / -1; grid-row:auto; min-height:200px; margin-top:24px;
  }

  .process{ padding: 110px 24px 110px; }
  .process-head{ margin-bottom: 56px; }
  .process-track{ grid-template-columns: 1fr; gap: 40px; }
  .process-line{ top:7px; left:7px; width:1px; height: calc(100% - 14px); }
  .process-step{ padding: 0 0 0 40px; }
  .process-step::before{ top:2px; left:0; }
  .process-num{ margin-bottom:10px; }

  .to-top{ width:44px; height:44px; right:18px; bottom:18px; }
  .to-top svg{ width:18px; height:18px; }

  .stats{ padding: 20px 24px 120px; }
  .stats-grid{ grid-template-columns: 1fr; }
  .stat{ border-left:none; border-top:1px solid var(--line); }
  .stat:first-child{ border-top:none; }

  .contact{ padding: 20px 24px 120px; }
  .contact-inner{ grid-template-columns: 1fr; gap: 54px; }
  .contact-form{ padding: 30px; }
  .form-row{ grid-template-columns: 1fr; }

  .footer-row{ flex-direction:column; align-items:flex-start; gap:20px; }
  .footer-nav{ gap:20px; row-gap:8px; }
}

@media (max-width: 560px){
  .hero-title{ max-width: none; }
  .btn{ padding: 14px 22px; }
}

/* nav-actions now carries two pill buttons (Health Check, Enquire) plus the
   burger — on narrow phones the default sizing pushes the burger off the
   edge of the screen, making the menu unreachable. Tighten everything down
   so all three stay on-screen. */
@media (max-width: 420px){
  .nav-inner{ padding: 0 16px; gap: 14px; }
  .nav-actions{ gap: 8px; }
  .nav-actions .btn-sm{ padding: 7px 11px; font-size: .68rem; }
}

@media (max-width: 340px){
  /* Still too tight for the full wordmark alongside two pill buttons —
     drop "CAPITAL" and keep just the gold S95 mark. */
  .logo-word{ display:none; }
}

/* ============================================================
   Cookie consent
   ============================================================ */
.footer-cookie-settings{
  color: var(--body-c); font-size:.92rem; background:none; border:none; padding:0;
  font-family: var(--font-sans); cursor:pointer; transition: color .25s;
}
.footer-cookie-settings:hover{ color: var(--gold); }

.cookie-consent{
  position: fixed; left:20px; right:20px; bottom:20px; z-index: 900;
  max-width: 760px; margin: 0 auto;
  background: linear-gradient(165deg, var(--black-2), var(--black-soft));
  border:1px solid var(--line-strong); border-radius:6px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.75);
  padding: 26px 28px; display:flex; gap:24px; flex-wrap:wrap; align-items:center; justify-content:space-between;
  animation: cc-rise .5s var(--ease-out);
}
@keyframes cc-rise{ from{ opacity:0; transform: translateY(16px); } to{ opacity:1; transform:none; } }
.cookie-consent-copy{ flex:1 1 380px; min-width:0; }
.cookie-consent-heading{ font-family: var(--font-serif); font-size:1.05rem; color: var(--cream); margin:0 0 6px; }
.cookie-consent-text{ color: var(--body-c); font-size:.88rem; line-height:1.65; margin:0; }
.cookie-consent-text a{ color: var(--gold); text-decoration: underline; text-underline-offset:2px; }
.cookie-consent-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; flex-shrink:0; }
.btn-cc-link{
  background:none; border:none; color: var(--body-c); font-family: var(--font-sans);
  font-size:.82rem; text-decoration: underline; text-underline-offset:2px; cursor:pointer; padding:4px 0;
}
.btn-cc-link:hover{ color: var(--gold); }
.cookie-consent .btn{ white-space:nowrap; }

.cookie-modal-backdrop{
  position: fixed; inset:0; z-index: 940; background: rgba(10,8,0,.7); backdrop-filter: blur(2px);
}
.cookie-modal{
  position: fixed; z-index: 950; left:50%; top:50%; transform: translate(-50%,-50%);
  width: min(560px, calc(100vw - 40px)); max-height: min(680px, calc(100vh - 40px));
  overflow-y:auto; background: var(--black-2); border:1px solid var(--line-strong); border-radius:8px;
  padding: 32px 30px; box-shadow: 0 40px 100px -20px rgba(0,0,0,.8);
}
.cookie-modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cookie-modal-head h2{ font-family: var(--font-serif); font-size:1.3rem; color: var(--cream); margin:0; }
.cookie-modal-close{
  background:none; border:none; color: var(--body-c); font-size:1.6rem; line-height:1; cursor:pointer; padding:4px 8px;
}
.cookie-modal-close:hover{ color: var(--gold); }
.cookie-modal-intro{ color: var(--body-c); font-size:.88rem; line-height:1.65; margin:0 0 24px; }
.cookie-modal-intro a{ color: var(--gold); text-decoration: underline; text-underline-offset:2px; }

.cookie-cat{ border-top:1px solid var(--line); padding: 18px 0; }
.cookie-cat:first-of-type{ border-top:none; }
.cookie-cat-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:8px; }
.cookie-cat-title{ font-weight:600; color: var(--cream); font-size:.95rem; }
.cookie-cat-desc{ color: var(--body-c); font-size:.84rem; line-height:1.6; margin:0; }

.cookie-toggle{
  position:relative; width:42px; height:24px; border-radius:20px; flex-shrink:0;
  background: rgba(255,215,0,.1); border:1px solid var(--line-strong); cursor:pointer; padding:0;
  transition: background .25s, border-color .25s;
}
.cookie-toggle-dot{
  position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background: var(--body-c); transition: transform .25s, background .25s;
}
.cookie-toggle[aria-checked="true"]{ background: var(--gold); border-color: var(--gold); }
.cookie-toggle[aria-checked="true"] .cookie-toggle-dot{ background: var(--black); transform: translateX(18px); }
.cookie-toggle.is-locked{ cursor:not-allowed; background: var(--gold-faint); border-color: var(--line-strong); }
.cookie-toggle.is-locked .cookie-toggle-dot{ background: var(--gold-dim); transform: translateX(18px); }

.cookie-modal-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }

@media (max-width: 640px){
  .cookie-consent{ left:12px; right:12px; bottom:12px; padding:22px 20px; }
  .cookie-consent-actions{ width:100%; justify-content:space-between; }
  .cookie-modal{ padding: 26px 20px; }
}

/* ============================================================
   404 page
   ============================================================ */
.error-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:24px;
}
.error-wrap{ max-width:480px; }
.error-logo{ justify-content:center; margin-bottom:48px; }
.error-code{ font-family: var(--font-serif); font-weight:900; font-size:5.5rem; line-height:1; color: var(--gold); margin:0; }
.error-page h1{ font-family: var(--font-serif); font-weight:700; font-size:1.6rem; margin:18px 0 12px; }
.error-page p{ color: var(--body-c); line-height:1.7; margin:0 0 34px; }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count:1 !important; transition-duration: .01ms !important; scroll-behavior:auto !important; }
  .line-inner{ transform:none; }
}