/* ============================================================
   TEC CATALYST — review build
   Tokens carried over from the earlier Claude "Catalyst Field" build.
   Change colours and spacing HERE. Nothing below should need a raw hex.
   ============================================================ */
@font-face{ font-family:"Instrument Serif"; font-style:normal; font-weight:400; font-display:swap;
  src:url("assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Instrument Serif"; font-style:italic; font-weight:400; font-display:swap;
  src:url("assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); }
@font-face{ font-family:"Sora"; font-style:normal; font-weight:300; font-display:swap;
  src:url("assets/fonts/sora-latin-300-normal.woff2") format("woff2"); }
@font-face{ font-family:"Sora"; font-style:normal; font-weight:400; font-display:swap;
  src:url("assets/fonts/sora-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Sora"; font-style:normal; font-weight:500; font-display:swap;
  src:url("assets/fonts/sora-latin-500-normal.woff2") format("woff2"); }
@font-face{ font-family:"Sora"; font-style:normal; font-weight:600; font-display:swap;
  src:url("assets/fonts/sora-latin-600-normal.woff2") format("woff2"); }

:root{
  --ink:#050810;          /* page floor                                   */
  --navy:#0A1428;         /* base field                                   */
  --navy-lift:#132443;    /* hairlines, depth                             */
  --bone:#F2EFE8;         /* type on navy                                 */
  --slate:#93A4BC;        /* secondary type on navy (large sizes only)    */
  --gold:#D9A94C;         /* CTA + energy accent                          */
  --gold-hot:#F5D68A;     /* headings on navy, highlights                 */
  --gold-deep:#73560F;    /* small labels on cream (passes 4.5:1)         */
  --cream:#F3EDE0;        /* content sheets                               */
  --paper:#FFFDF7;        /* inputs and inner cards on cream              */
  --text:#0A0F1A;         /* body text on cream                           */
  --text-soft:#2B3445;    /* secondary text on cream                      */
  --line:rgba(10,15,26,.18);

  --display:"Instrument Serif","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --body:"Sora",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --shell:1240px;
  --gut:clamp(18px,5vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --hdr:76px;
}

@property --halo{ syntax:'<percentage>'; initial-value:0%; inherits:false; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr) + 12px); -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:var(--body); font-weight:400; font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
[hidden]{ display:none !important; }
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ---------- Background layers (from the Claude build) ---------- */
#field,#net{ position:fixed; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
#field{ z-index:0; }
#net{ z-index:1; }
#field,#net{ opacity:0; transition:opacity .9s ease; }
body.bg-on #field, body.bg-on #net{ opacity:1; }
.scrim{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(5,8,16,.70) 0%, rgba(5,8,16,.18) 24%, rgba(5,8,16,.18) 70%, rgba(5,8,16,.74) 100%);
}
body.no-webgl #field, .no-js #field{
  background:
    radial-gradient(90% 70% at 30% 20%, #16294a 0%, transparent 60%),
    linear-gradient(to bottom, var(--navy), var(--ink));
}

main,.site-footer{ position:relative; z-index:3; }
.shell{ max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }

:focus-visible{ outline:3px solid var(--gold-hot); outline-offset:3px; border-radius:2px; }
.sheet :focus-visible{ outline-color:var(--navy); }
.skip{ position:absolute; left:-9999px; top:0; z-index:99; }
.skip:focus{ left:var(--gut); top:12px; background:var(--gold); color:var(--ink); padding:12px 18px; font-weight:600; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50; padding-block:16px;
  transition:background .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.settled{ background:rgba(5,8,16,.92); border-bottom-color:var(--navy-lift); }
.bar{ display:flex; align-items:center; gap:24px; }

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; color:var(--bone); }
.brand-logo{ width:52px; height:52px; flex:0 0 52px; display:block; }
.brand-word{ font-family:var(--display); font-size:1.42rem; letter-spacing:.01em; white-space:nowrap; position:relative; line-height:1; }
.brand-word .rule{ color:var(--gold); padding-inline:.26em; }
.brand-word.dark{ color:var(--text); font-size:1.7rem; margin-bottom:12px; }
.brand-word.dark .rule{ color:var(--gold-deep); }
/* IGNITION: one gold sweep across the wordmark on load. Fires once. */
.site-header .brand-word{ overflow:hidden; padding:6px 10px; margin:-6px -10px; }
.site-header .brand-word::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 38%, rgba(245,214,138,.55) 50%, transparent 62%);
  transform:translateX(-115%); mix-blend-mode:screen;
}

.site-nav{ display:flex; align-items:center; gap:26px; }
.site-nav a:not(.btn){
  color:var(--bone); text-decoration:none; font-size:.95rem; font-weight:500;
  padding-block:10px; position:relative;
}
.site-nav a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:4px; height:2px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease);
}
.site-nav a:not(.btn):hover::after, .site-nav a:not(.btn):focus-visible::after{ transform:scaleX(1); transform-origin:left; }

.menu-btn{
  display:none; align-items:center; gap:10px; min-height:44px; padding:8px 14px;
  background:transparent; border:1px solid var(--slate); border-radius:3px; color:var(--bone);
  font-weight:500; font-size:.95rem; cursor:pointer;
}
.menu-ico{ width:18px; height:12px; position:relative; border-top:2px solid currentColor; border-bottom:2px solid currentColor; }
.menu-ico::after{ content:""; position:absolute; left:0; right:0; top:3px; border-top:2px solid currentColor; }

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--body); font-size:.95rem; font-weight:600; line-height:1.2;
  border-radius:3px; text-decoration:none; cursor:pointer; text-align:center;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:13px 24px; border:1px solid transparent;
  transition:transform .35s var(--ease), --halo .5s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.btn-primary{
  background:var(--gold); color:var(--ink);
  box-shadow:0 12px 34px -14px rgba(217,169,76,var(--halo,0)); --halo:0%;
}
.btn-primary:hover{ --halo:80%; background:var(--gold-hot); }
.btn-dark{ background:var(--navy); color:var(--bone); border-color:var(--navy); }
.btn-dark:hover{ background:var(--navy-lift); }
.btn-sm{ min-height:44px; padding:10px 18px; font-size:.88rem; }
.link-btn{
  background:none; border:0; padding:8px 0; min-height:44px; cursor:pointer; text-align:left;
  color:var(--text); font-weight:600; font-size:.9rem; text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:var(--gold-deep); text-decoration-thickness:2px;
}
.link-btn:hover{ color:var(--gold-deep); }

/* ---------- Sheets: cream content boxes, dark text ---------- */
.sheet{
  background:var(--cream); color:var(--text); border-radius:4px;
  padding:clamp(22px,3.2vw,46px);
  box-shadow:0 34px 90px -46px rgba(0,0,0,.9);
}
.sheet p{ color:var(--text); }
.sheet p + p{ margin-top:1em; }
.sheet a:not(.btn){ color:var(--text); font-weight:600; text-decoration-color:var(--gold-deep); text-decoration-thickness:2px; text-underline-offset:4px; }
.sheet h3{ font-family:var(--body); font-weight:600; font-size:1.04rem; line-height:1.35; color:var(--text); }
.lede{ font-size:clamp(1.08rem,1.5vw,1.26rem); line-height:1.55; max-width:62ch; }
.fine{ font-size:.9rem; color:var(--text-soft); }

/* ---------- Sections ---------- */
.sec{ padding-block:clamp(64px,10vh,128px); }
.sec-h{
  font-family:var(--display); font-weight:400; color:var(--gold-hot);
  font-size:clamp(2.15rem,4.6vw,3.9rem); line-height:1.04; letter-spacing:-.015em;
  max-width:19ch; margin-bottom:clamp(26px,4vw,48px); text-wrap:balance;
}

/* ---------- 1. Hero ---------- */
.hero{ padding-block:clamp(28px,5vh,64px) clamp(48px,8vh,96px); }
.hero-grid{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,7fr); gap:clamp(28px,4vw,64px); align-items:center; }
h1{
  font-family:var(--display); font-weight:400; color:var(--bone);
  font-size:clamp(2.7rem,5.1vw,4.7rem); line-height:1; letter-spacing:-.02em; margin-bottom:clamp(22px,3vw,34px);
}
h1 .ln{ display:block; overflow:hidden; padding-bottom:.08em; }
h1 .ln > span{ display:block; }
.hero-card{ max-width:58ch; padding:clamp(20px,2.4vw,32px); }
.hero-card > p:first-child{ font-size:clamp(1.02rem,1.3vw,1.14rem); line-height:1.6; }
.actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.hero-card .fine{ margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }

/* ---------- The reel ---------- */
.reel{ min-width:0; }
.reel-stage{
  position:relative; aspect-ratio:16/12.2; overflow:hidden; border-radius:4px;
  background:var(--navy); container-type:inline-size;
  box-shadow:0 0 0 1px rgba(217,169,76,.35), 0 50px 120px -50px #000;
}
.scene{ position:absolute; inset:0; margin:0; }
.js .scene{ opacity:0; visibility:hidden; transition:opacity .9s var(--ease), visibility 0s linear .9s; }
.js .scene.is-active{ opacity:1; visibility:visible; transition:opacity .9s var(--ease), visibility 0s; z-index:2; }
.no-js .scene[hidden]{ display:none; }

.plate, .plate img, .clip{ position:absolute; inset:0; width:100%; height:100%; }
.plate img, .clip{ object-fit:cover; transform:scale(1.04); }
.clip{ z-index:1; opacity:0; transition:opacity .8s var(--ease); }
.clip.is-ready{ opacity:1; }
.pan-e img{ object-position:78% 40%; }
.pan-b img{ object-position:50% 30%; }

.grade{
  position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(to top, rgba(5,8,16,.86) 0%, rgba(5,8,16,.12) 46%, rgba(5,8,16,.30) 100%),
    linear-gradient(100deg, rgba(10,20,40,.42), rgba(10,20,40,0) 60%);
}
.grade-deep{
  background:
    linear-gradient(to top, rgba(5,8,16,.90) 0%, rgba(5,8,16,.50) 50%, rgba(5,8,16,.55) 100%);
}
/* film grain: hides the softness of the placeholder stills */
.grade::after, .still::after{
  content:""; position:absolute; inset:0; opacity:.22; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scene .cap{
  position:absolute; z-index:4; left:4%; bottom:5%; max-width:min(88%,460px);
  background:var(--cream); color:var(--text); border-radius:3px; padding:10px 16px 12px;
  display:flex; flex-direction:column; gap:2px;
}
.scene .cap em{ font-family:var(--display); font-size:clamp(1.05rem,3.4cqw,1.5rem); line-height:1.1; color:var(--gold-deep); }
.scene .cap span{ font-size:clamp(.86rem,2.3cqw,1.02rem); font-weight:500; line-height:1.35; }

.sweep{
  position:absolute; z-index:5; top:0; bottom:0; width:22%; left:-30%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(245,214,138,.34), transparent);
}

/* FX layer: default state is the FINAL state, so reduced motion and no-JS both read correctly */
.fx{ position:absolute; inset:0; z-index:3; font-size:clamp(10.5px,2.05cqw,14px); }
.fx b{ font-weight:600; }

/* ch1: diagnostic pins */
.pin{ position:absolute; display:flex; align-items:center; }
.pin i{ width:.9em; height:.9em; border-radius:50%; background:var(--gold); box-shadow:0 0 0 .35em rgba(217,169,76,.28); flex:0 0 auto; }
.pin::before{ content:""; order:1; width:2.2em; height:2px; background:var(--gold); transform-origin:left; }
.pin b{ order:2; background:var(--cream); color:var(--text); padding:.5em .85em; border-radius:2px; white-space:nowrap; }
.pin-1{ left:6%; top:12%; }
.pin-2{ left:40%; top:34%; }
.pin-3{ left:12%; top:56%; }

/* ch2: enquiry flow */
.flow-panel{
  position:absolute; left:5%; right:5%; top:16%; padding:1.5em 1.2em 1.2em;
  background:var(--cream); color:var(--text); border-radius:3px;
}
.flow-line{ position:absolute; left:10%; right:10%; top:calc(1.5em + .55em); height:2px; background:rgba(10,15,26,.25); }
.flow-pulse{ position:absolute; top:-4px; left:100%; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px rgba(217,169,76,.35); opacity:0; }
.flow-nodes{ display:flex; position:relative; }
.flow-nodes li{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.35em; padding-inline:.2em; }
.flow-nodes i{ width:1.1em; height:1.1em; border-radius:50%; background:var(--gold-deep); border:2px solid var(--cream); box-shadow:0 0 0 2px var(--gold-deep); }
.flow-nodes b{ font-size:1em; }
.flow-nodes small{ font-size:.86em; color:var(--text-soft); line-height:1.25; }

/* ch3: content into one next step */
.tiles{ position:absolute; left:5%; right:5%; top:10%; display:grid; grid-template-columns:repeat(4,1fr); gap:2.4%; }
.tile{ background:var(--cream); color:var(--text); border-radius:3px; padding:.8em .8em .7em; display:flex; flex-direction:column; gap:.6em; }
.pic{ display:flex; gap:6%; align-items:flex-end; height:3.4em; }
.pic u{ display:block; text-decoration:none; border:2px solid var(--text); border-radius:1px; }
.t-story .pic u{ flex:1; height:100%; }
.t-site .pic{ flex-direction:column; align-items:flex-start; justify-content:center; gap:16%; }
.t-site .pic u{ height:0; width:100%; border-width:2px 0 0; }
.t-site .pic u:nth-child(2){ width:78%; } .t-site .pic u:nth-child(3){ width:52%; border-color:var(--gold-deep); }
.t-social .pic u:nth-child(1){ width:30%; aspect-ratio:1; }
.t-social .pic u:nth-child(2){ width:22%; height:100%; }
.t-social .pic u:nth-child(3){ flex:1; aspect-ratio:16/9; }
.t-search .pic{ flex-direction:column; align-items:flex-start; justify-content:center; gap:14%; }
.t-search .pic u:nth-child(1){ width:100%; height:32%; border-radius:99px; }
.t-search .pic u:nth-child(2){ width:84%; height:0; border-width:3px 0 0; border-color:var(--gold-deep); }
.t-search .pic u:nth-child(3){ width:60%; height:0; border-width:2px 0 0; }
.funnel-line{ position:absolute; left:50%; top:calc(10% + 7.6em); width:2px; height:12%; background:var(--gold); transform-origin:top; }
.next-step{
  position:absolute; left:50%; top:calc(10% + 7.6em + 12%); transform:translateX(-50%);
  background:var(--gold); color:var(--ink); font-weight:600; padding:.6em 1.2em; border-radius:99px; white-space:nowrap;
}

/* ch4: wireframe to working interface */
.device{ position:absolute; background:var(--cream); border-radius:4px; overflow:hidden; box-shadow:0 20px 50px -20px #000; }
.desk{ left:6%; top:9%; width:60%; aspect-ratio:16/10.4; }
.phone{ right:7%; top:17%; width:19%; aspect-ratio:9/17; border-radius:10px; border:3px solid var(--cream); }
.chrome{ height:9%; display:flex; align-items:center; gap:4px; padding-left:3%; background:#E4DCC9; }
.chrome i{ width:6px; height:6px; border-radius:50%; background:var(--text-soft); opacity:.6; }
.wire, .polish{ position:absolute; inset:9% 0 0 0; padding:6% 7%; display:flex; flex-direction:column; gap:7%; }
.phone .polish{ inset:0; padding:16% 12%; gap:6%; }
.wire{ opacity:0; }
.wire u{ display:block; text-decoration:none; background:rgba(10,15,26,.16); border:1.5px dashed rgba(10,15,26,.45); border-radius:2px; height:14%; }
.wire u:nth-child(1){ width:70%; height:20%; } .wire u:nth-child(3){ width:84%; } .wire u:nth-child(4){ width:34%; }
.polish{ background:var(--navy); }
.p-h{ display:block; height:16%; width:74%; background:var(--bone); border-radius:2px; }
.phone .p-h{ height:9%; width:90%; }
.p-t{ display:block; height:5%; width:90%; background:var(--slate); border-radius:2px; opacity:.8; }
.p-t.short{ width:58%; }
.phone .p-t{ height:4%; }
.p-btn{
  position:relative; margin-top:auto; align-self:flex-start; min-width:46%; height:20%;
  background:var(--gold); color:var(--ink); border-radius:3px; font-weight:600; font-size:.92em;
  display:grid; place-items:center;
}
.phone .p-btn{ width:100%; height:11%; font-size:.78em; }
.p-btn span{ grid-area:1/1; }
.lbl-a{ opacity:0; }
.cursor{ position:absolute; left:26%; top:80%; width:14px; height:14px; border-radius:50%; background:var(--bone); border:3px solid var(--ink); opacity:0; z-index:3; }

/* ch5: reporting view, sample data */
.report{ position:absolute; left:40%; right:5%; top:9%; background:var(--cream); color:var(--text); border-radius:3px; padding:1em 1.1em; }
.report-top{ display:flex; justify-content:space-between; align-items:center; gap:.6em; margin-bottom:.8em; }
.sample{ background:var(--text); color:var(--cream); padding:.25em .6em; border-radius:2px; font-weight:600; font-size:.86em; white-space:nowrap; }
.bars{ display:flex; align-items:flex-end; gap:5%; height:5.2em; border-bottom:2px solid var(--text); }
.bars i{ flex:1; background:var(--gold-deep); transform-origin:bottom; }
.bars i:nth-child(1){ height:34%; } .bars i:nth-child(2){ height:52%; } .bars i:nth-child(3){ height:44%; }
.bars i:nth-child(4){ height:68%; } .bars i:nth-child(5){ height:60%; } .bars i:nth-child(6){ height:86%; }
.spark{ width:100%; height:2.4em; margin-top:.7em; display:block; }
.spark path{ fill:none; stroke:var(--text); stroke-width:2; vector-effect:non-scaling-stroke; stroke-dasharray:260; stroke-dashoffset:0; }
.report ul{ margin-top:.5em; display:grid; gap:.2em; }
.report li{ font-size:.92em; padding-left:1em; position:relative; }
.report li::before{ content:""; position:absolute; left:0; top:.55em; width:.45em; height:.45em; background:var(--gold-deep); border-radius:50%; }

@container (max-width:520px){
  .pin b{ white-space:normal; max-width:15em; }
  .pin-1{ left:4%; top:7%; } .pin-2{ left:4%; top:27%; } .pin-3{ left:4%; top:47%; }
  .flow-panel{ top:5%; left:4%; right:30%; padding:.9em 1em; }
  .flow-line{ left:calc(1em + .55em - 1px); right:auto; top:1.6em; bottom:1.6em; width:2px; height:auto; }
  .flow-pulse{ top:100%; left:-4px; margin-left:0; margin-top:-5px; }
  .flow-nodes{ flex-direction:column; gap:.62em; }
  .flow-nodes li{ flex-direction:row; align-items:center; text-align:left; gap:.7em; }
  .flow-nodes small{ display:none; }
  .tiles{ grid-template-columns:repeat(2,1fr); gap:.6em; top:5%; left:4%; right:4%; }
  .pic{ height:2.4em; }
  .funnel-line{ display:none; }
  .next-step{ top:auto; bottom:31%; }
  .desk{ left:4%; top:6%; width:66%; }
  .phone{ right:4%; top:10%; width:22%; }
  .report{ left:4%; right:4%; top:5%; padding:.8em .9em; }
  .bars{ height:3.6em; } .spark{ height:1.6em; }
  .report ul{ display:none; }
}

.reel-bar{ display:flex; align-items:stretch; gap:10px; margin-top:12px; }
.reel-tabs{ display:flex; flex:1; min-width:0; gap:4px; }
.reel-tabs button{
  flex:1 1 0; min-width:44px; min-height:56px; position:relative; cursor:pointer;
  background:rgba(5,8,16,.72); border:0; border-top:2px solid var(--navy-lift);
  color:var(--bone); font-size:.8rem; font-weight:500; text-align:left; padding:6px 10px 9px;
  white-space:nowrap; overflow:hidden; line-height:1.2;
}
.reel-tabs button span{ display:block; font-family:var(--display); font-size:1.2rem; line-height:1.1; color:var(--gold-hot); }
.reel-tabs button[aria-selected="true"]{ background:var(--cream); color:var(--text); font-weight:600; }
.reel-tabs button[aria-selected="true"] span{ color:var(--gold-deep); }
.reel-tabs button i{ position:absolute; left:0; top:-2px; height:2px; width:100%; background:var(--gold); transform:scaleX(0); transform-origin:left; }
.reel-foot{ display:flex; gap:16px; align-items:flex-start; justify-content:space-between; margin-top:10px; }
.reel-pause{
  flex:0 0 auto; min-width:84px; min-height:44px; cursor:pointer;
  background:var(--cream); color:var(--text); border:0; border-radius:3px; font-weight:600; font-size:.88rem;
}
.reel-pause:hover{ background:var(--gold-hot); }
.no-js .reel-pause, .no-js .reel-bar{ display:none; }
.reel-note{ font-size:.84rem; line-height:1.45; color:var(--bone); opacity:.9; max-width:64ch; }

/* ---------- Stills ---------- */
.still{ position:relative; overflow:hidden; border-radius:4px; box-shadow:0 0 0 1px rgba(217,169,76,.3); }
.still img{ width:100%; height:100%; object-fit:cover; filter:saturate(.96) contrast(1.03); }
.still::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(5,8,16,.8), rgba(10,20,40,.18) 55%); }
.still figcaption{ position:absolute; z-index:2; left:14px; bottom:12px; right:14px; font-size:.84rem; color:var(--bone); font-weight:500; }

/* ---------- 2. Gaps ---------- */
.gaps-grid{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); align-items:start; }
.still-tall{ aspect-ratio:4/5.4; position:sticky; top:calc(var(--hdr) + 24px); }
.still-tall img{ object-position:34% 50%; }
.gaps-sheet{ margin-left:-7%; margin-top:56px; position:relative; z-index:2; }
.gaps{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 40px; margin-top:30px; }
.gaps li{ border-top:2px solid var(--text); padding-top:14px; }
.gaps p{ margin-top:6px; font-size:.98rem; color:var(--text-soft); }

/* ---------- 3. Services ledger ---------- */
.ledger{ margin-top:30px; }
.row{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1.5fr) minmax(0,1.15fr);
  gap:12px 30px; padding-block:18px; border-top:1px solid var(--line);
}
.row:first-child{ border-top:2px solid var(--text); }
.sheet .row h3{ font-family:var(--display); font-weight:400; font-size:clamp(1.5rem,2.2vw,1.95rem); line-height:1.08; letter-spacing:-.01em; }
.row h4{ font-size:.8rem; font-weight:600; color:var(--gold-deep); margin-bottom:3px; }
.row p{ font-size:.89rem; line-height:1.5; }

/* ---------- 4. Process ---------- */
.steps{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; position:relative; counter-reset:none; }
.steps::before{ content:""; position:absolute; left:10%; right:10%; top:8px; height:1px; background:var(--navy-lift); }
.step{ display:flex; flex-direction:column; align-items:center; gap:26px; }
.dot{
  width:17px; height:17px; border-radius:50%; background:var(--navy-lift); position:relative; z-index:1;
  box-shadow:0 0 0 4px var(--ink); transition:background .6s var(--ease), box-shadow .6s var(--ease);
}
.step.lit .dot{ background:var(--gold); box-shadow:0 0 0 4px var(--ink), 0 0 22px 4px rgba(217,169,76,.6); }
.step-sheet{ padding:0 0 18px; overflow:hidden; width:100%; flex:1; display:flex; flex-direction:column; }
.step-sheet img{ width:100%; aspect-ratio:16/10; object-fit:cover; filter:saturate(.96) contrast(1.03); }
.step-sheet img.flip{ object-position:92% 50%; }
.step-sheet h3, .step-sheet p, .step-sheet .link-btn{ margin-inline:18px; }
.sheet.step-sheet h3{ font-family:var(--display); font-weight:400; font-size:1.7rem; margin-top:16px; line-height:1.1; }
.step-sheet .n{ color:var(--gold-deep); margin-right:4px; }
.step-sheet p{ font-size:.95rem; margin-top:8px; flex:1; }
.step-sheet .link-btn{ margin-top:8px; }
.no-js .step-sheet .link-btn{ display:none; }

/* ---------- 5. Demo ---------- */
.demo-flag{ background:var(--text); color:var(--cream) !important; padding:12px 16px; border-radius:3px; font-size:.95rem; }
.demo-flag strong{ color:var(--gold-hot); }
.track{ display:grid; grid-template-columns:repeat(5,1fr); margin-top:30px; position:relative; }
.track::before{ content:""; position:absolute; left:10%; right:10%; top:10px; height:2px; background:var(--line); }
.track li{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; font-size:.9rem; font-weight:500; color:var(--text-soft); position:relative; }
.track li::before{ content:""; width:22px; height:22px; border-radius:50%; background:var(--cream); border:2px solid var(--text-soft); position:relative; z-index:1; transition:background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease); }
.track li.is-on{ color:var(--text); font-weight:600; }
.track li.is-on::before{ background:var(--gold); border-color:var(--text); }
.track li.is-now::before{ transform:scale(1.25); }
.demo-body{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:28px; margin-top:30px; align-items:start; }
.ticket{ background:var(--paper); border:1px solid var(--line); border-left:5px solid var(--gold); border-radius:3px; padding:18px 20px; }
.ticket-k{ font-size:.84rem; font-weight:600; color:var(--gold-deep) !important; }
.sheet .ticket p + p{ margin-top:6px; }
.ticket-t{ font-family:var(--display); font-size:1.55rem; line-height:1.15; }
.ticket-m{ font-size:.95rem; color:var(--text-soft) !important; }
.ticket-s{ margin-top:12px !important; font-size:.95rem; }
.ticket-s b{ background:var(--text); color:var(--cream); padding:2px 10px; border-radius:99px; font-weight:600; }
.log-wrap h3{ margin-bottom:10px; }
.log{ counter-reset:lg; display:grid; gap:10px; }
.log li{ counter-increment:lg; position:relative; padding:10px 14px 10px 44px; background:var(--paper); border:1px solid var(--line); border-radius:3px; font-size:.95rem; }
.log li::before{ content:counter(lg); position:absolute; left:12px; top:9px; width:22px; height:22px; border-radius:50%; background:var(--text); color:var(--cream); font-size:.78rem; font-weight:600; display:grid; place-items:center; }
.demo-ctl{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.no-js .demo-ctl{ display:none; }

/* ---------- 6. Who ---------- */
.who{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 40px; margin-top:26px; }
.who > div{ border-top:1px solid var(--line); padding-block:20px; }
.who dt{ font-family:var(--display); font-size:clamp(1.45rem,2vw,1.8rem); line-height:1.1; }
.who dd{ margin-top:6px; font-size:.96rem; color:var(--text-soft); }

/* ---------- 8. Founder ---------- */
.founder-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(18px,2.4vw,32px); align-items:center; }
.founder-sheet{ position:relative; z-index:2; }
.big{ font-family:var(--display); font-size:clamp(1.5rem,2.4vw,2.05rem); line-height:1.22; letter-spacing:-.005em; }
.sign{ margin-top:26px !important; font-family:var(--display); font-size:1.7rem; line-height:1.1; }
.sign span{ font-family:var(--body); font-size:.88rem; font-weight:500; color:var(--text-soft); }
.still-wide{ aspect-ratio:16/11; }
.still-wide img{ object-position:60% 50%; }

/* ---------- 9. FAQ ---------- */
.faq-sheet{ padding-block:clamp(10px,1.6vw,22px); max-width:920px; }
details{ border-top:1px solid var(--line); }
details:first-child{ border-top:0; }
summary{
  cursor:pointer; list-style:none; position:relative; padding:20px 44px 20px 0; min-height:48px;
  font-family:var(--display); font-size:clamp(1.3rem,2vw,1.6rem); line-height:1.2;
}
summary::-webkit-details-marker{ display:none; }
summary::after{ content:""; position:absolute; right:6px; top:50%; width:16px; height:16px; margin-top:-8px;
  background:linear-gradient(var(--text),var(--text)) center/100% 2px no-repeat, linear-gradient(var(--text),var(--text)) center/2px 100% no-repeat;
  transition:transform .3s var(--ease); }
details[open] summary::after{ transform:rotate(45deg); }
details p{ padding:0 44px 22px 0; max-width:66ch; }

/* ---------- 10. Audit ---------- */
.audit-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px,4vw,56px); align-items:start; }
.form-note{ background:var(--paper); border:1px solid var(--line); border-left:5px solid var(--gold); padding:12px 16px; border-radius:3px; font-size:.95rem; grid-column:1/-1; }
.enquiry{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 20px; }
.field-wide, .enquiry > .btn{ grid-column:1/-1; }
.enquiry > .btn{ justify-self:start; }
label{ display:block; font-weight:600; font-size:.95rem; margin-bottom:6px; }
.opt{ font-weight:400; color:var(--text-soft); }
input, textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--text); background:var(--paper);
  border:1.5px solid var(--text-soft); border-radius:3px; padding:13px 14px; min-height:48px;
}
textarea{ resize:vertical; line-height:1.5; }
input:focus-visible, textarea:focus-visible{ outline:3px solid var(--navy); outline-offset:1px; border-color:var(--navy); }
[aria-invalid="true"]{ border-color:#9B1C1C; border-width:2px; }
.err{ color:#8A1414 !important; font-size:.9rem; font-weight:600; margin-top:6px !important; }
.hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-fine{ grid-column:1/-1; }
.enquiry > .btn[disabled]{ opacity:.6; cursor:progress; }
.sent h3{ font-family:var(--display) !important; font-weight:400 !important; font-size:1.9rem !important; line-height:1.15 !important; margin-bottom:10px; }
.sent{ border-left:5px solid var(--gold); padding-left:18px; }
.preview h3{ font-family:var(--display) !important; font-weight:400 !important; font-size:1.7rem !important; line-height:1.15 !important; margin-bottom:10px; }
.preview textarea{ margin-top:16px; font-size:.95rem; background:var(--paper); }
.preview-ctl{ display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
.status{ margin-top:12px !important; font-weight:600; min-height:1.5em; }

/* ---------- Footer ---------- */
.site-footer{ padding-bottom:clamp(28px,5vh,56px); }
/* footer links: comfortable touch targets */
.site-footer .foot-nav a,.site-footer .foot-social a,.site-footer .foot-brand p a{ display:inline-block; padding:13px 4px; }
.footer-sheet{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:30px 48px; }
.foot-brand p{ max-width:46ch; }
.foot-brand .brand-logo{ width:64px; height:64px; flex:none; margin-bottom:14px; }
.foot-nav{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 24px; align-content:start; }
.foot-nav a{ padding-block:10px; font-weight:500 !important; }
.foot-legal{ grid-column:1/-1; border-top:1px solid var(--line); padding-top:16px; font-size:.88rem; color:var(--text-soft) !important; }

/* ---------- Sticky mobile CTA ---------- */
.mcta{
  position:fixed; z-index:40; left:0; right:0; bottom:0; padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(5,8,16,.94); border-top:1px solid var(--navy-lift);
  transform:translateY(110%); transition:transform .4s var(--ease); display:none;
}
.mcta .btn{ width:auto; flex:1 1 0; white-space:nowrap; font-size:15px; padding-left:10px; padding-right:10px; } .mcta .btn-primary{ flex:2 1 0; } .mcta .btn-dark{ border:1.5px solid #F6F0E1; color:#F6F0E1; }
.mcta.is-on{ transform:none; }

/* ============================================================
   MOTION — only when the visitor has not asked for less of it
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .js h1 .ln > span{ transform:translateY(105%); animation:rise 1.15s var(--ease) forwards; }
  .js h1 .ln:nth-child(1) > span{ animation-delay:.15s; }
  .js h1 .ln:nth-child(2) > span{ animation-delay:.26s; }
  .js h1 .ln:nth-child(3) > span{ animation-delay:.37s; }
  .js .hero-card{ opacity:0; animation:fade 1s .7s var(--ease) forwards; }
  .js .reel{ opacity:0; animation:fade 1.2s .5s var(--ease) forwards; }
  .js .site-header .brand-word::after{ animation:ignite 1.5s 1.1s var(--ease) 1 forwards; }

  .reel.is-paused .scene *, .reel.is-paused .sweep{ animation-play-state:paused !important; }
  .js .scene.no-anim, .js .scene.no-anim *, .js .scene.no-anim *::before{ animation:none !important; }

  .js .scene.is-active .plate img{ animation:panA 8s var(--ease) both; }
  .js .scene.is-active .pan-b img{ animation-name:panB; }
  .js .scene.is-active .pan-c img{ animation-name:panC; }
  .js .scene.is-active .pan-d img{ animation-name:panD; }
  .js .scene.is-active .pan-e img{ animation-name:panE; }
  .js .reel-stage.is-changing .sweep{ animation:sweep .9s var(--ease) 1; }
  .js .scene.is-active .cap{ animation:capIn .8s .25s var(--ease) both; }

  /* ch1 */
  .js .is-active .pin i{ animation:pop .5s var(--ease) both; }
  .js .is-active .pin::before{ animation:draw .45s var(--ease) both; }
  .js .is-active .pin b{ animation:chip .5s var(--ease) both; }
  .js .is-active .pin-1 i{ animation-delay:.6s; } .js .is-active .pin-1::before{ animation-delay:.85s; } .js .is-active .pin-1 b{ animation-delay:1.05s; }
  .js .is-active .pin-2 i{ animation-delay:1.7s; } .js .is-active .pin-2::before{ animation-delay:1.95s; } .js .is-active .pin-2 b{ animation-delay:2.15s; }
  .js .is-active .pin-3 i{ animation-delay:2.8s; } .js .is-active .pin-3::before{ animation-delay:3.05s; } .js .is-active .pin-3 b{ animation-delay:3.25s; }

  /* ch2 */
  .js .is-active .flow-panel{ animation:chip .6s .3s var(--ease) both; }
  .js .is-active .flow-pulse{ animation:pulseX 3.4s .9s linear both; }
  .js .is-active .flow-nodes i{ animation:nodeOn .45s var(--ease) both; }
  .js .is-active .flow-nodes small{ animation:fade .45s var(--ease) both; }
  .js .is-active .flow-nodes li:nth-child(1) :is(i,small){ animation-delay:.9s; }
  .js .is-active .flow-nodes li:nth-child(2) :is(i,small){ animation-delay:1.75s; }
  .js .is-active .flow-nodes li:nth-child(3) :is(i,small){ animation-delay:2.6s; }
  .js .is-active .flow-nodes li:nth-child(4) :is(i,small){ animation-delay:3.45s; }
  .js .is-active .flow-nodes li:nth-child(5) :is(i,small){ animation-delay:4.3s; }

  /* ch3 */
  .js .is-active .tile{ animation:chip .55s var(--ease) both; }
  .js .is-active .tile:nth-child(1){ animation-delay:.4s; } .js .is-active .tile:nth-child(2){ animation-delay:.9s; }
  .js .is-active .tile:nth-child(3){ animation-delay:1.4s; } .js .is-active .tile:nth-child(4){ animation-delay:1.9s; }
  .js .is-active .funnel-line{ animation:drawY .6s 2.6s var(--ease) both; }
  .js .is-active .next-step{ animation:stepIn .7s 3.1s var(--ease) both; }

  /* ch4 */
  .js .is-active .desk{ animation:chip .6s .3s var(--ease) both; }
  .js .is-active .wire{ animation:wireOut .7s 1.7s var(--ease) both; }
  .js .is-active .desk .polish{ animation:fade .7s 1.7s var(--ease) both; }
  .js .is-active .phone{ animation:phoneIn .7s 2.6s var(--ease) both; }
  .js .is-active .cursor{ animation:cursorGo 2s 3.2s var(--ease) both; }
  .js .is-active .lbl-a{ animation:lblOut .3s 4.3s var(--ease) both; }
  .js .is-active .lbl-b{ animation:fade .3s 4.3s var(--ease) both; }
  .js .is-active .p-btn{ animation:press .35s 4.2s var(--ease) both; }

  /* ch5 */
  .js .is-active .report{ animation:chip .6s .3s var(--ease) both; }
  .js .is-active .bars i{ animation:grow .7s var(--ease) both; }
  .js .is-active .bars i:nth-child(1){ animation-delay:.8s; } .js .is-active .bars i:nth-child(2){ animation-delay:.95s; }
  .js .is-active .bars i:nth-child(3){ animation-delay:1.1s; } .js .is-active .bars i:nth-child(4){ animation-delay:1.25s; }
  .js .is-active .bars i:nth-child(5){ animation-delay:1.4s; } .js .is-active .bars i:nth-child(6){ animation-delay:1.55s; }
  .js .is-active .spark path{ animation:dash 1.6s 2.2s var(--ease) both; }
  .js .is-active .report li{ animation:fade .5s var(--ease) both; }
  .js .is-active .report li:nth-child(1){ animation-delay:3.2s; } .js .is-active .report li:nth-child(2){ animation-delay:3.5s; } .js .is-active .report li:nth-child(3){ animation-delay:3.8s; }

}

@keyframes rise{ to{ transform:translateY(0); } }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes ignite{ to{ transform:translateX(115%); } }
@keyframes panA{ from{ transform:scale(1.16) translate(-2.4%,1.2%); } to{ transform:scale(1.04) translate(1%,0); } }
@keyframes panB{ from{ transform:scale(1.05) translate(0,0); } to{ transform:scale(1.2) translate(2%,-3%); } }
@keyframes panC{ from{ transform:scale(1.18) translate(2.5%,0); } to{ transform:scale(1.05) translate(-1.5%,1%); } }
@keyframes panD{ from{ transform:scale(1.06) translate(-2%,0); } to{ transform:scale(1.16) translate(2%,-1%); } }
@keyframes panE{ from{ transform:scale(1.22) translate(-1%,-1%); } to{ transform:scale(1.06) translate(0,0); } }
@keyframes sweep{ from{ left:-30%; } to{ left:110%; } }
@keyframes capIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes pop{ from{ opacity:0; transform:scale(.2); } to{ opacity:1; transform:none; } }
@keyframes draw{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes drawY{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@keyframes chip{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes stepIn{ 0%{ opacity:0; transform:translateX(-50%) scale(.8); } 60%{ opacity:1; transform:translateX(-50%) scale(1.08); } 100%{ opacity:1; transform:translateX(-50%) scale(1); } }
@keyframes pulseX{ 0%{ left:0; opacity:1; } 96%{ left:100%; opacity:1; } 100%{ left:100%; opacity:0; } }
@keyframes pulseY{ 0%{ top:0; opacity:1; } 96%{ top:100%; opacity:1; } 100%{ top:100%; opacity:0; } }
@keyframes nodeOn{ from{ background:var(--cream); transform:scale(.7); } to{ background:var(--gold-deep); transform:none; } }
@keyframes wireOut{ from{ opacity:1; } to{ opacity:0; } }
@keyframes lblOut{ from{ opacity:1; } to{ opacity:0; } }
@keyframes phoneIn{ from{ opacity:0; transform:translateX(30%); } to{ opacity:1; transform:none; } }
@keyframes cursorGo{ 0%{ opacity:0; left:70%; top:30%; } 20%{ opacity:1; } 55%{ left:26%; top:80%; opacity:1; transform:none; } 62%{ transform:scale(.7); } 70%{ transform:none; opacity:1; } 100%{ left:26%; top:80%; opacity:0; } }
@keyframes press{ 50%{ transform:scale(.94); } }
@keyframes grow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@keyframes dash{ from{ stroke-dashoffset:260; } to{ stroke-dashoffset:0; } }

@container (max-width:520px){
  @media (prefers-reduced-motion: no-preference){
    .js .is-active .flow-pulse{ animation-name:pulseY; }
  }
}

/* Reduced motion: a full stop, not a slower version */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .row{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .row h3{ grid-column:1/-1; }
  .steps{ grid-template-columns:1fr; gap:22px; }
  .steps::before{ left:8px; right:auto; top:12px; bottom:12px; width:1px; height:auto; }
  .step{ display:grid; grid-template-columns:17px minmax(0,1fr); gap:18px; align-items:start; }
  .step .dot{ margin-top:22px; }
  .step-sheet{ display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr); column-gap:6px; padding:0; }
  .step-sheet img{ grid-row:1/4; height:100%; aspect-ratio:auto; min-height:170px; }
  .step-sheet .link-btn{ margin-bottom:10px; }
}

@media (max-width:900px){
  :root{ --hdr:68px; }
  .menu-btn{ display:inline-flex; }
  .js .site-nav{
    display:none; position:absolute; left:var(--gut); right:var(--gut); top:calc(100% + 6px);
    flex-direction:column; align-items:stretch; gap:0; background:var(--cream); border-radius:4px; padding:10px 18px 18px;
    box-shadow:0 30px 70px -20px #000; max-height:calc(100svh - var(--hdr) - 20px); overflow:auto;
  }
  .js .site-nav.is-open{ display:flex; }
  .js .site-nav a:not(.btn){ color:var(--text); font-size:1.08rem; font-weight:600; padding:15px 2px; border-bottom:1px solid var(--line); }
  .js .site-nav .nav-cta{ margin-top:16px; }
  .no-js .menu-btn{ display:none; }
  .no-js .bar{ flex-wrap:wrap; }
  .no-js .site-nav{ flex-wrap:wrap; gap:6px 18px; width:100%; }
  .site-header, .site-header.settled{ background:var(--ink); }

  .hero-grid{ grid-template-columns:1fr; }
  .reel-stage{ aspect-ratio:4/3.5; }
  .gaps-grid{ grid-template-columns:1fr; }
  .still-tall{ position:relative; top:auto; aspect-ratio:16/9; }
  .gaps-sheet{ margin:12px 0 0 0; }
  .demo-body, .audit-grid, .founder-grid, .footer-sheet{ grid-template-columns:1fr; }
  .founder-grid{ display:flex; flex-direction:column; align-items:stretch; }
  .still-wide{ aspect-ratio:16/10; order:1; }
  .founder-sheet{ order:2; margin:12px 0 0 0; }
  .who{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mcta{ display:flex; gap:10px; }
  body.has-mcta{ padding-bottom:0; }
}

@media (max-width:640px){
  .brand-word{ font-size:1.22rem; }
  .brand-logo{ width:44px; height:44px; flex-basis:44px; }
  h1{ font-size:clamp(2.35rem,11.4vw,3.2rem); }
  .actions .btn{ width:100%; }
  .gaps{ grid-template-columns:1fr; }
  .row{ grid-template-columns:1fr; gap:14px; }
  .step-sheet{ display:flex; }
  .step-sheet img{ aspect-ratio:16/9; min-height:0; height:auto; }
  .reel-tabs button{ font-size:0; padding:6px; text-align:center; }
  .reel-tabs button span{ font-size:1.3rem; }
  .reel-tabs button[aria-selected="true"]{ flex:3 1 0; font-size:.84rem; text-align:left; padding-inline:10px; }
  .track{ grid-template-columns:1fr; gap:10px; }
  .track::before{ left:10px; right:auto; top:10px; bottom:10px; width:2px; height:auto; }
  .track li{ flex-direction:row; text-align:left; gap:14px; }
  .who{ grid-template-columns:1fr; }
  .enquiry{ grid-template-columns:1fr; }
  .demo-ctl .btn, .preview-ctl .btn, .enquiry > .btn{ width:100%; }
  .foot-nav{ grid-template-columns:1fr 1fr; }
  summary{ padding-right:36px; }
  details p{ padding-right:0; }
}

/* ===== Booking buttons ===== */
.btn-book{
  position:relative; isolation:isolate; overflow:hidden; gap:10px; padding:14px 28px; letter-spacing:.01em;
  color:var(--ink);
  background:linear-gradient(180deg,#F8DE9B 0%,#E3B95A 48%,#CC9B35 100%);
  border:1px solid rgba(115,86,15,.55);
  box-shadow:0 14px 34px -12px rgba(217,169,76,.65), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(115,86,15,.25);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);
}
.btn-book:hover{
  background:linear-gradient(180deg,#FBE7AE 0%,#EBC56A 48%,#D6A53F 100%);
  transform:translateY(-2px);
  box-shadow:0 18px 40px -12px rgba(245,214,138,.85), inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 0 rgba(115,86,15,.25);
}
.btn-book:active{ transform:translateY(0); }
.btn-book > *{ position:relative; z-index:2; }   /* label and icon stay above the shine */
.btn-book svg{ flex:none; }
.btn-book.btn-sm{ padding:10px 18px; }
.btn-book::after{
  content:""; position:absolute; top:-30%; bottom:-30%; left:0; width:38%; pointer-events:none; z-index:1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);
  transform:translateX(-170%) skewX(-18deg);
  animation:book-sheen 5s ease-in-out 1.4s infinite;
}
@keyframes book-sheen{ 0%,60%{ transform:translateX(-170%) skewX(-18deg); } 100%{ transform:translateX(480%) skewX(-18deg); } }
.btn-outline{ background:transparent; color:var(--text); border:1.5px solid var(--navy); }
.btn-outline:hover{ background:var(--navy); color:var(--bone); }
.sent-book{ margin-top:16px; }
@media (prefers-reduced-motion:reduce){
  .btn-book::after{ animation:none; opacity:0; }
  .btn-book,.btn-book:hover{ transition:none; transform:none; }
}

/* ===== Founder photo (real photograph) ===== */
.still-portrait{ aspect-ratio:1/1; width:100%; max-width:460px; justify-self:center; }
.still-portrait img{ object-position:50% 30%; filter:none; }
@media (max-width:900px){ .still-portrait{ order:1; max-width:none; } }

/* ===== Cookie choice bar ===== */
.cc-bar{ position:fixed; z-index:60; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); max-width:760px; margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:14px 16px;
  background:var(--cream); color:var(--text); border:1px solid var(--gold); border-radius:6px;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.6); font-size:.92rem; line-height:1.45; }
.cc-bar p{ margin:0; flex:1 1 300px; }
.cc-bar a{ color:var(--text); text-decoration:underline; }
.cc-actions{ display:flex; gap:8px; flex:0 0 auto; }
.cc-bar :focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
body:has(.mcta.is-on) .cc-bar{ bottom:calc(86px + env(safe-area-inset-bottom,0px)); }
@media print{ .cc-bar{ display:none; } }

/* ===== Footer brand headline ===== */
.foot-tagline{ font-family:var(--display); font-size:clamp(1.3rem,2.2vw,1.6rem); line-height:1.2; color:var(--text); margin:4px 0 14px; max-width:32ch; }


/* i18n 2026-10-09 */
.lang-switch{display:flex;flex-wrap:wrap;gap:.15rem;align-items:center;margin:0;padding:0}
.lang-switch a{color:inherit;text-decoration:none;font-size:.78rem;letter-spacing:.06em;padding:.35rem .5rem;border-radius:6px;opacity:.8;line-height:1}
.lang-switch a:hover,.lang-switch a:focus-visible{opacity:1;text-decoration:underline}
.lang-switch a[aria-current="true"]{opacity:1;font-weight:600;box-shadow:inset 0 -2px 0 currentColor}
.lang-switch-footer{justify-content:center;margin:1.25rem 0 0}
html[lang="ar"] body,html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4,html[lang="ar"] .btn,html[lang="ar"] button,html[lang="ar"] input,html[lang="ar"] textarea{font-family:"Segoe UI",Tahoma,"Noto Sans Arabic","Geeza Pro",Arial,system-ui,sans-serif;letter-spacing:0}

/* i18n 2026-10-09 b */
.lang-menu{position:relative;font-size:.8rem;flex:0 0 auto}
.lang-menu summary{list-style:none;cursor:pointer;padding:.5rem .75rem;border:1px solid rgba(245,214,138,.5);border-radius:999px;color:inherit;display:inline-flex;gap:.4rem;align-items:center;line-height:1;font-weight:600;letter-spacing:.06em}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu summary::after{content:"\25BE";font-size:.7rem}
.lang-menu[open] summary,.lang-menu summary:hover,.lang-menu summary:focus-visible{background:rgba(245,214,138,.16)}
.lang-menu .lang-list{position:absolute;right:0;top:calc(100% + .45rem);z-index:80;min-width:11.5rem;background:#f4ecdc;color:#111;border:1px solid #c9a24a;border-radius:10px;padding:.35rem;box-shadow:0 14px 34px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:.1rem}
.lang-menu .lang-list a{color:#111;opacity:1;padding:.6rem .8rem;font-size:.95rem;letter-spacing:0;border-radius:6px;white-space:nowrap;box-shadow:none}
.lang-menu .lang-list a:hover,.lang-menu .lang-list a:focus-visible{background:#e6d6b0;text-decoration:none}
.lang-menu .lang-list a[aria-current="true"]{font-weight:700;background:#ead9a8;box-shadow:none}
html[dir="rtl"] .lang-menu .lang-list{right:auto;left:0}

/* i18n 2026-10-09 c */
html[dir="rtl"] .skip,html[dir="rtl"] .hp,html[dir="rtl"] .hp label,html[dir="rtl"] .hp input{left:auto!important;right:-9999px!important}
html[dir="rtl"],html[dir="rtl"] body{overflow-x:clip}

/* i18n 2026-10-09 d */
.lang-bar{display:flex;justify-content:flex-end;margin:.25rem 0 1rem}
.lang-bar .lang-menu summary{color:#111;border-color:#c9a24a}