/* ============================================================
   AMBER SIGNS & PRINT — Homepage v2 "Night & Day"
   Direction 01 "Heritage Craft", pushed: the page opens in the
   workshop's street at night (ink, glowing amber) and warms into
   the familiar paper world on scroll.

   Progressive enhancement contract:
   - Everything is VISIBLE and usable by default (no-JS = fine).
   - GSAP animates *from* hidden states at runtime only.
   - prefers-reduced-motion kills every CSS animation here, and
     script.js skips GSAP/three.js entirely.
   ============================================================ */

/* ---------- 1 · Tokens ---------- */
:root{
  /* Paper (day) palette — per handover */
  --paper:#F2E8D6;
  --surface:#FBF5E9;
  --surface-2:#F7EEDD;
  --amber:#DC7A12;
  --amber-deep:#B45F0A;
  --walnut:#6B4423;
  --body:#4A3A28;
  --body-soft:#5A4A37;
  --ink:#211910;
  --muted:#6E5F49; /* A3: darkened from #8C7C64 for AA on paper (5.09:1 vs --paper) */
  --line:#D8C8AA;
  --line-soft:#E6D9BF;

  /* Night palette — the street outside the workshop */
  --night:#14100A;
  --night-2:#1D1610;
  --night-line:#3A2E1E;
  --night-text:#F2E8D6;
  --night-muted:#A89878;
  --glow:#FFA94D;

  /* Type */
  --f-display:"Bricolage Grotesque", system-ui, sans-serif;
  --f-body:"Newsreader", Georgia, serif;
  --f-mono:"Space Mono", ui-monospace, monospace;

  /* Shape */
  --r-btn:8px; --r-card:12px; --r-panel:14px;

  --container:1180px;
  --pad:56px;
  --ease:cubic-bezier(.32,.94,.6,1);
}

/* ---------- 2 · Reset & base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--night); /* night first: avoids a pale flash and frames the hero */
  color:var(--body);
  font-family:var(--f-body);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--amber-deep); }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:2px; }

.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }

/* Anchor jumps land clear of the fixed header */
[id]{ scroll-margin-top:92px; }

.skip-link{
  position:absolute; left:16px; top:-48px; z-index:300;
  background:var(--ink); color:var(--paper); font-family:var(--f-mono); font-size:13px;
  padding:10px 16px; border-radius:0 0 8px 8px; text-decoration:none;
  transition:top .18s ease;
}
.skip-link:focus{ top:0; }

/* ---------- 3 · Typography ---------- */
.h-display{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(44px,7vw,86px);
  line-height:.97;
  letter-spacing:-.02em;
  margin:14px 0 22px;
  color:var(--night-text);
  /* A1: never let a long word clip past a narrow viewport in the no-JS /
     fallback-font path (independent of GSAP/SplitText) */
  overflow-wrap:break-word;
}
/* A1: on narrow phones give the headline clear headroom so the greedy
   fallback-font line ("…say open") fits and wraps instead of clipping at
   the right edge. Only ≤430px — desktop and tablet sizing are untouched. */
@media (max-width:430px){
  .h-display{ font-size:clamp(32px,9vw,40px); }
}
.h-section{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(30px,4vw,48px);
  line-height:1.04;
  letter-spacing:-.015em;
  color:var(--ink);
  margin:10px 0 18px;
}
.em-amber{ font-family:var(--f-body); font-style:italic; font-weight:400; color:var(--amber); letter-spacing:0; }

/* The neon phrase: italic Newsreader that glows like a trough light.
   Lit by default (no-JS); script.js dims it, then flickers it on. */
.em-neon{
  font-family:var(--f-body); font-style:italic; font-weight:400; letter-spacing:0;
  color:var(--glow);
  text-shadow:0 0 18px rgba(220,122,18,.55), 0 0 60px rgba(220,122,18,.30);
}
.em-neon.pre{ color:#5D4626; text-shadow:none; }
.em-neon.lit{ animation:neon-flicker 1.1s steps(1,end) 1 both; }
@keyframes neon-flicker{
  0%{ color:#5D4626; text-shadow:none; }
  7%{ color:var(--glow); text-shadow:0 0 18px rgba(220,122,18,.55); }
  11%{ color:#5D4626; text-shadow:none; }
  18%{ color:var(--glow); text-shadow:0 0 18px rgba(220,122,18,.55); }
  24%{ color:#6A5026; text-shadow:0 0 6px rgba(220,122,18,.2); }
  36%,100%{ color:var(--glow); text-shadow:0 0 18px rgba(220,122,18,.55), 0 0 60px rgba(220,122,18,.30); }
}
.em-neon-soft{
  font-family:var(--f-body); font-style:italic; font-weight:400;
  color:var(--glow); text-shadow:0 0 14px rgba(220,122,18,.4);
}

.eyebrow{
  font-family:var(--f-mono); font-size:12.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.18em;
  color:var(--walnut); margin:0 0 6px;
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap; /* A1: eyebrow chip + label wrap instead of clipping when narrow */
}
.eyebrow .idx{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:999px;
  padding:3px 9px; font-size:11px; color:var(--amber-deep); background:var(--surface);
}
.on-dark-eyebrow{ color:var(--night-muted); }
.on-dark-eyebrow .idx{ border-color:var(--night-line); background:transparent; color:var(--glow); }

.lede{ font-size:clamp(18px,1.6vw,21px); line-height:1.55; color:var(--body-soft); max-width:56ch; margin:0 0 8px; }
.hero .lede{ color:#CBB995; }

.link-amber{ color:var(--amber-deep); text-decoration-color:rgba(220,122,18,.4); text-underline-offset:3px; transition:color .18s ease; }
.link-amber:hover{ color:var(--amber); }

/* ---------- 4 · Buttons & chips ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-display); font-weight:600; font-size:15.5px;
  padding:13px 22px; border-radius:var(--r-btn);
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform .18s var(--ease), background .18s ease, color .18s ease, border-color .18s ease, box-shadow .25s ease;
  will-change:transform;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--amber); color:#FFF8EC; }
.btn-primary:hover{ background:var(--amber-deep); }
.btn-glow:hover{ box-shadow:0 6px 32px rgba(220,122,18,.45); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--walnut); }
.btn-ghost-dark{ background:transparent; color:var(--night-text); border-color:var(--night-line); }
.btn-ghost-dark:hover{ border-color:var(--glow); color:var(--glow); }

.chip{
  font-family:var(--f-mono); font-size:12.5px; color:var(--walnut);
  border:1px solid var(--line); border-radius:999px; padding:6px 13px;
  background:var(--surface); white-space:nowrap;
  transition:border-color .18s ease, color .18s ease, transform .18s var(--ease);
}
.chip:hover{ border-color:var(--amber); color:var(--amber-deep); transform:translateY(-2px); }

/* ---------- 5 · Loader (JS-only; never shown without JS) ---------- */
.loader{ display:none; }
html.js .loader{
  display:flex; align-items:center; justify-content:center;
  position:fixed; inset:0; z-index:400; background:var(--night);
}
html.js .loader.is-done{ display:none; }
.loader-inner{ text-align:center; }
.loader-mark{ width:64px; height:64px; margin-inline:auto; }
.loader-text{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--night-muted); margin-top:18px;
}

/* ---------- 6 · Custom cursor accent (pointer devices, decorative) ---------- */
.cursor-dot,.cursor-ring{ display:none; }
@media (hover:hover) and (pointer:fine){
  html.js.has-cursor .cursor-dot{
    display:block; position:fixed; z-index:350; top:0; left:0;
    width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%;
    background:var(--amber); pointer-events:none;
  }
  html.js.has-cursor .cursor-ring{
    display:block; position:fixed; z-index:350; top:0; left:0;
    width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
    border:1.5px solid rgba(220,122,18,.55); pointer-events:none;
    transition:transform .25s var(--ease), border-color .25s ease;
  }
  html.js.has-cursor .cursor-ring.is-hover{ transform:scale(1.7); border-color:var(--amber); }
  /* A5: the amber cursor leads over decorative/canvas areas, but native
     cursors return on everything readable or interactive — text keeps the
     I-beam, links/controls the pointer, and form fields their I-beam — so
     affordances are never suppressed. */
  html.js.has-cursor,
  html.js.has-cursor *{ cursor:none !important; }
  html.js.has-cursor p, html.js.has-cursor h1, html.js.has-cursor h2,
  html.js.has-cursor h3, html.js.has-cursor h4, html.js.has-cursor li,
  html.js.has-cursor address, html.js.has-cursor blockquote,
  html.js.has-cursor figcaption, html.js.has-cursor small,
  html.js.has-cursor b, html.js.has-cursor em, html.js.has-cursor strong,
  html.js.has-cursor span, html.js.has-cursor label{ cursor:auto !important; }
  html.js.has-cursor a, html.js.has-cursor a *,
  html.js.has-cursor button, html.js.has-cursor button *,
  html.js.has-cursor .btn, html.js.has-cursor .btn *,
  html.js.has-cursor summary, html.js.has-cursor select,
  html.js.has-cursor [role="button"]{ cursor:pointer !important; }
  html.js.has-cursor input, html.js.has-cursor textarea{ cursor:text !important; }
  html.js.has-cursor input[type="checkbox"], html.js.has-cursor input[type="radio"],
  html.js.has-cursor input[type="submit"], html.js.has-cursor input[type="button"],
  html.js.has-cursor input[type="file"]{ cursor:pointer !important; }
}

/* ---------- 7 · Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
  background:transparent;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:14px; }

.brand{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
.logo-mark{ width:38px; height:38px; flex:none; }
.logo-core{ fill:var(--paper); }
.brand .wm{ display:flex; flex-direction:column; line-height:1; }
.brand .wm b{ font-family:var(--f-display); font-weight:700; font-size:21px; letter-spacing:-.01em; color:var(--ink); transition:color .35s ease; }
.brand .wm small{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.3em; color:var(--walnut); margin-top:3px; transition:color .35s ease; }

.site-nav ul{ display:flex; gap:26px; list-style:none; margin:0; padding:0; }
.site-nav a{
  font-family:var(--f-display); font-weight:500; font-size:15px;
  color:var(--ink); text-decoration:none; position:relative; padding-block:4px;
  transition:color .35s ease;
}
.site-nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--amber); transform:scaleX(0); transform-origin:right;
  transition:transform .25s var(--ease);
}
.site-nav a:hover::after,.site-nav a:focus-visible::after{ transform:scaleX(1); transform-origin:left; }

.header-cta{ display:flex; align-items:center; gap:18px; }
.header-phone{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:14px; font-weight:700;
  color:var(--ink); text-decoration:none; transition:color .35s ease;
}
.header-phone:hover{ color:var(--amber-deep); }

/* Header over the night hero */
.site-header.on-dark .brand .wm b{ color:var(--night-text); }
.site-header.on-dark .brand .wm small{ color:var(--night-muted); }
.site-header.on-dark .logo-core{ fill:var(--night); }
.site-header.on-dark .site-nav a{ color:var(--night-text); }
.site-header.on-dark .header-phone{ color:var(--night-text); }
.site-header.on-dark .header-phone:hover{ color:var(--glow); }

/* Header once it leaves the hero (JS toggles .is-day; without JS the paper
   styling below also applies via :target-less fallback — acceptable on dark) */
.site-header.is-day{
  background:rgba(242,232,214,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom-color:var(--line-soft);
}
.site-header.is-day .brand .wm b,
.site-header.is-day .site-nav a,
.site-header.is-day .header-phone{ color:var(--ink); }
.site-header.is-day .brand .wm small{ color:var(--walnut); }
.site-header.is-day .logo-core{ fill:var(--paper); }

.nav-toggle{
  width:44px; height:40px; border:1px solid var(--night-line); border-radius:var(--r-btn);
  background:transparent; display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:5px; cursor:pointer;
}
.nav-toggle span{ display:block; width:18px; height:2px; background:currentColor; color:var(--night-text); transition:transform .25s var(--ease), opacity .2s ease; }
.site-header.is-day .nav-toggle{ border-color:var(--line); }
.site-header.is-day .nav-toggle span{ color:var(--ink); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- 8 · Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:stretch; /* the grid fills the hero so the sign stage can reach the top */
  background:var(--night);
  color:var(--night-text);
  overflow:hidden;
  padding-block:120px 140px;
}
.hero-bg{ position:absolute; inset:0; pointer-events:none; }
.glow{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; }
.glow-a{ width:52vw; height:52vw; right:-12vw; top:-18vw; background:radial-gradient(circle, rgba(220,122,18,.34), transparent 65%); }
.glow-b{ width:40vw; height:40vw; left:-16vw; bottom:-14vw; background:radial-gradient(circle, rgba(180,95,10,.20), transparent 65%); }
/* Paper-grain over the night, like dusty glass */
.hero-grain{
  position:absolute; inset:0; opacity:.07; mix-blend-mode:overlay;
  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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
}

.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:40px; align-items:center; width:100%;
}
.hero-micro{
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--night-muted); margin-top:34px;
}
.hero-micro .dot{ color:var(--amber); font-size:9px; vertical-align:2px; padding-inline:6px; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }

/* Split-text line masks (added by JS around SplitText lines) */
.st-line{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }

/* The hanging-sign stage: stretches the full height of the hero (negative
   margins swallow the hero's padding) so the sign hangs from the very top
   of the window rather than mid-air */
.hero-stage{
  position:relative; align-self:stretch;
  height:auto; min-height:420px;
  margin-block:-120px -140px;
}
/* Soft amber halo so the sign reads as lit-in-the-dark, not a pasted-on box.
   closest-side sizing guarantees the fade completes INSIDE the element —
   a farthest-corner ellipse was being clipped into a visible rectangle. */
.hero-stage::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse closest-side at 50% 50%, rgba(220,122,18,.20), rgba(220,122,18,.06) 55%, transparent 92%);
}
.sign-canvas{ position:absolute; inset:0; }
.sign-canvas canvas{ display:block; width:100%!important; height:100%!important; }

/* CSS fallback sign: shown until/unless WebGL takes over (JS hides it) */
.sign-fallback{ position:absolute; inset:0; display:flex; justify-content:center; }
.sign-fallback.is-replaced{ display:none; }
/* Chains drop in from the top edge of the stage (the top of the window),
   so the sign hangs from the browser chrome rather than a mid-air bracket */
.sf-chain{ position:absolute; top:0; width:2px; height:calc(8% + 68px); background:linear-gradient(#241B11,#3A2E1E); }
.sf-chain-l{ left:calc(50% - 72px); }
.sf-chain-r{ left:calc(50% + 72px); }
.sf-board{
  position:absolute; top:calc(8% + 68px); left:50%;
  width:220px; padding:26px 18px 22px; text-align:center;
  /* near-night board with an inner amber bloom: emerges from the dark
     rather than sitting on it as a lighter rectangle */
  background:radial-gradient(120% 120% at 50% 28%, #221A10, #161109 72%);
  border:1px solid transparent; border-radius:var(--r-panel);
  box-shadow:0 0 70px 12px rgba(220,122,18,.16), inset 0 0 60px rgba(220,122,18,.10);
  transform:translateX(-50%);
  transform-origin:50% -68px;
  animation:sf-sway 5.2s ease-in-out infinite alternate;
}
@keyframes sf-sway{
  from{ transform:translateX(-50%) rotate(2.4deg); }
  to{ transform:translateX(-50%) rotate(-2.4deg); }
}
.sf-board svg{ width:64px; height:64px; margin:0 auto 14px; filter:drop-shadow(0 0 18px rgba(220,122,18,.5)); }
.sf-board b{
  display:block; font-family:var(--f-display); font-weight:800; font-size:34px; letter-spacing:.08em;
  color:var(--glow); text-shadow:0 0 16px rgba(220,122,18,.55);
}
.sf-board small{
  display:block; margin-top:8px; font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:.3em; color:var(--night-muted);
}

/* Scroll cue */
.scroll-cue{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-decoration:none; z-index:2;
}
.sc-label{ font-family:var(--f-mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--night-muted); }
.sc-line{ width:1.5px; height:44px; background:linear-gradient(var(--amber), transparent); overflow:hidden; position:relative; }
.sc-line::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:linear-gradient(var(--glow), transparent);
  animation:cue-drip 1.8s ease-in-out infinite;
}
@keyframes cue-drip{ to{ top:100%; } }
.scroll-cue:hover .sc-label{ color:var(--glow); }

/* ---------- 9 · The DAY sheet: paper slides over the night ---------- */
.day{
  position:relative; z-index:5;
  background:var(--paper);
  border-radius:28px 28px 0 0;
  margin-top:-34px;
  box-shadow:0 -28px 70px rgba(0,0,0,.35);
}

/* ---------- 10 · Marquee ---------- */
.marquee{
  overflow:hidden; border-bottom:1px solid var(--line-soft);
  padding-block:20px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{
  display:inline-flex; gap:0; white-space:nowrap; width:max-content;
  animation:marquee 36s linear infinite;
  will-change:transform;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{
  font-family:var(--f-display); font-weight:600; font-size:19px; color:var(--walnut);
  padding-inline:26px; position:relative;
}
.marquee-track span::after{
  content:"◆"; position:absolute; right:-7px; top:50%; transform:translateY(-50%);
  font-size:8px; color:var(--amber);
}
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- 11 · Trust ---------- */
.trust{ padding-block:54px 58px; border-bottom:1px solid var(--line-soft); }
.trust-line{
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); text-align:center; margin:0 0 26px;
}
.trust-names{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  list-style:none; margin:0; padding:0;
}
/* li chip typography/treatments live in §27 */

/* ---------- 12 · Sections shared ---------- */
.about,.services,.work,.reviews,.contact{ padding-block:84px; }
.services-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:32px;
  margin-bottom:42px;
}
.services-head .lede{ max-width:38ch; text-align:right; }

/* ---------- 13 · About ---------- */
.about-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:64px; align-items:start; }
.steps{ list-style:none; margin:34px 0 0; padding:0; display:flex; flex-direction:column; }
.steps li{
  display:flex; gap:20px; padding-block:20px;
  border-top:1px solid var(--line-soft);
}
.steps li:last-child{ border-bottom:1px solid var(--line-soft); }
.steps .n{
  font-family:var(--f-mono); font-weight:700; font-size:13px; color:var(--amber-deep);
  border:1px solid var(--line); border-radius:999px; flex:none;
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface);
}
.steps h3{ font-family:var(--f-display); font-weight:600; font-size:19px; color:var(--ink); margin:6px 0 6px; }
.steps p{ margin:0; color:var(--body-soft); font-size:16.5px; }

.stats{ display:flex; gap:44px; margin-top:38px; flex-wrap:wrap; }
.stat{ display:flex; flex-direction:column; gap:4px; }
.stat .big{ font-family:var(--f-display); font-weight:700; font-size:42px; color:var(--ink); line-height:1; }
.stat .big sup{ color:var(--amber); font-size:24px; }
.stat .small{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

.about-frame{ margin:0; position:relative; overflow:hidden; border-radius:var(--r-panel); border:1px solid var(--line); }
.about-frame img{ width:100%; object-fit:cover; }
.about-frame img[data-parallax]{ scale:1.12; will-change:transform; }
.about-frame figcaption{
  position:absolute; left:14px; bottom:14px;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(33,25,16,.82); color:var(--paper); border-radius:999px; padding:7px 14px;
}

/* ---------- 14 · Service cards ---------- */
.cards-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; perspective:900px; }
.card{
  /* raised paper: top-lit gradient + warm resting shadow so the card is a
     visual hook at rest, not a flat panel that only wakes on hover */
  background:linear-gradient(180deg,#FFFDF7,var(--surface));
  border:1px solid var(--line); border-radius:var(--r-card);
  padding:26px 24px 24px; position:relative; overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 12px 30px -14px rgba(107,68,35,.25);
  transition:border-color .18s ease, box-shadow .25s ease, transform .18s var(--ease);
  transform-style:preserve-3d; will-change:transform;
}
.card::before{ /* amber top rule: a short tab at rest, draws full-width on hover */
  content:""; position:absolute; top:0; left:0; height:3px; width:100%;
  background:var(--amber); transform:scaleX(.18); transform-origin:left;
  transition:transform .3s var(--ease);
}
.card:hover{ border-color:var(--amber); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 22px 50px -18px rgba(107,68,35,.32); }
.card:hover::before{ transform:scaleX(1); }
.card .ic{
  width:46px; height:46px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(220,122,18,.35); color:var(--amber-deep); background:var(--surface-2);
  margin-bottom:18px; transition:background .18s ease, color .18s ease, border-color .18s ease, transform .3s var(--ease);
}
.card:hover .ic{ background:var(--amber); color:#FFF8EC; }
.card h3{ font-family:var(--f-display); font-weight:600; font-size:19px; color:var(--ink); margin:0 0 8px; }
.card p{ margin:0; font-size:16px; color:var(--body-soft); }

.also-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:26px; }
.also-label{ font-family:var(--f-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-right:4px; }

.print-band{ background:var(--surface-2); border-block:1px solid var(--line-soft); }
/* On the darker print band, lift the cards a touch more so they still read as raised */
.print-band .card{ box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 14px 34px -14px rgba(107,68,35,.32); }
.print-band .card:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 24px 54px -18px rgba(107,68,35,.38); }

/* ---------- 15 · Work ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.filter-btn{
  font-family:var(--f-mono); font-size:13px; cursor:pointer;
  color:var(--walnut); background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:8px 16px;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s var(--ease);
}
.filter-btn:hover{ border-color:var(--amber); transform:translateY(-2px); }
.filter-btn[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.work-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:200px; grid-auto-flow:dense; gap:14px;
}
.work-item{ margin:0; position:relative; border-radius:var(--r-card); overflow:hidden; border:1px solid var(--line); }
.work-item.is-hidden{ display:none; }
.span-sq{ grid-column:span 1; grid-row:span 1; }
.span-tall{ grid-column:span 1; grid-row:span 2; }
.span-wide{ grid-column:span 2; grid-row:span 1; }
.work-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease);
}
.work-item:hover img{ transform:scale(1.06); }
.work-item figcaption{
  position:absolute; left:10px; bottom:10px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  background:rgba(251,245,233,.92); color:var(--walnut);
  border:1px solid var(--line); border-radius:999px; padding:6px 12px;
  transform:translateY(6px); opacity:.85;
  transition:transform .3s var(--ease), opacity .3s ease;
}
.work-item:hover figcaption{ transform:translateY(0); opacity:1; }

/* Royal Navy: a pocket of night inside the day */
.navy{
  margin-top:46px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:0; border-radius:var(--r-panel); overflow:hidden;
  background:linear-gradient(150deg,#1A1410,#241A0F);
  border:1px solid var(--night-line);
}
.navy-copy{ padding:46px 48px; color:var(--night-text); align-self:center; }
.navy-copy h3{
  font-family:var(--f-display); font-weight:600; font-size:clamp(24px,2.6vw,34px);
  line-height:1.1; margin:12px 0 16px; color:var(--night-text);
}
.navy-copy p{ color:#CBB995; margin:0; font-size:17px; }
.navy-art{ position:relative; min-height:300px; overflow:hidden; }
.navy-art img{ position:absolute; inset:0; width:100%; height:114%; object-fit:cover; will-change:transform; }

/* ---------- 16 · Reviews ---------- */
.reviews{ background:var(--surface-2); border-block:1px solid var(--line-soft); }
.reviews-head{ display:flex; align-items:center; justify-content:space-between; gap:30px; margin-bottom:40px; }
.badge-100{ width:120px; height:120px; flex:none; }
.badge-100 text{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.22em; fill:var(--walnut); }
.badge-100 .core-num{ font-family:var(--f-display); font-weight:700; font-size:24px; fill:var(--amber-deep); letter-spacing:0; }
.stamp-rotor{ transform-origin:60px 60px; }

.quotes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.quote{
  margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:28px 26px 22px; position:relative;
  transition:transform .18s var(--ease), border-color .18s ease, box-shadow .25s ease;
}
.quote:hover{ transform:translateY(-4px); border-color:var(--amber); box-shadow:0 16px 40px rgba(107,68,35,.12); }
.quote::before{
  content:"\201C"; position:absolute; top:6px; left:18px;
  font-family:var(--f-body); font-style:italic; font-size:64px; line-height:1; color:var(--amber); opacity:.35;
}
.quote p{ margin:18px 0 16px; font-size:17px; color:var(--body); font-style:italic; }
.quote figcaption{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

/* ---------- 17 · Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; align-items:start; }
.quote-form{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-panel);
  padding:34px;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.field label{ font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--walnut); }
.req{ color:var(--amber); }
.field input,.field textarea{
  font-family:var(--f-body); font-size:17px; color:var(--body);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-btn);
  padding:12px 14px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(220,122,18,.16);
}
.consent{ display:flex; gap:12px; align-items:flex-start; margin:6px 0 22px; }
.consent input{ margin-top:5px; width:17px; height:17px; accent-color:var(--amber); flex:none; }
.consent label{ font-size:14.5px; color:var(--body-soft); }
.form-foot{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.form-foot .alt{ margin:0; font-size:15.5px; color:var(--muted); }

.contact-aside{ display:flex; flex-direction:column; gap:26px; }
.contact-block h3{ font-family:var(--f-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--walnut); margin:0 0 8px; }
.contact-block p{ margin:8px 0 0; font-size:15.5px; color:var(--body-soft); }
.big-link{
  font-family:var(--f-display); font-weight:600; font-size:clamp(20px,2vw,26px);
  color:var(--ink); text-decoration:none; position:relative; display:inline-block;
}
.big-link::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%;
  background:var(--amber); transform:scaleX(0); transform-origin:right;
  transition:transform .3s var(--ease);
}
.big-link:hover::after{ transform:scaleX(1); transform-origin:left; }
.big-link:hover{ color:var(--amber-deep); }
address{ font-style:normal; line-height:1.7; }

/* ---------- 18 · Footer (night again) ---------- */
.site-footer{
  position:relative; background:var(--night); color:#CBB995;
  padding-block:70px 130px; overflow:hidden;
  font-size:16px;
}
.site-footer a{ color:var(--night-text); text-decoration-color:rgba(220,122,18,.4); text-underline-offset:3px; }
.site-footer a:hover{ color:var(--glow); }
.on-dark-brand .wm b{ color:var(--night-text)!important; }
.on-dark-brand .wm small{ color:var(--night-muted)!important; }
.footer-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr) minmax(0,1fr);
  gap:48px; padding-bottom:44px; border-bottom:1px solid var(--night-line);
}
.footer-h{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--night-muted); margin:0 0 12px; }
.footer-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.footer-links a{ text-decoration:none; font-family:var(--f-display); font-weight:500; font-size:15.5px; }
.footer-legal{
  position:relative; z-index:1;
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding-top:24px; font-family:var(--f-mono); font-size:12.5px; color:var(--night-muted);
}
.legal-links{ display:flex; gap:18px; }
.legal-links a{ color:var(--night-muted); }
.footer-ghost{
  position:absolute; left:50%; bottom:-.18em; transform:translateX(-50%);
  font-family:var(--f-display); font-weight:800; white-space:nowrap;
  font-size:clamp(90px,16vw,230px); letter-spacing:-.03em; line-height:1;
  color:transparent;
  -webkit-text-stroke:2px rgba(220,122,18,.22);
  pointer-events:none; user-select:none;
}
/* Bricolage Grotesque is a variable font whose glyphs contain overlapping
   path segments (e.g. inside the "e"); text-stroke draws those interior
   lines. Overlaying the same text filled with the footer background hides
   everything inside the outline, leaving only the outer edge of the stroke
   (hence 2px above, so ~1px stays visible). */
.footer-ghost::after{
  content:attr(data-ghost);
  position:absolute; left:0; top:0;
  color:var(--night);
  -webkit-text-stroke:0;
}

/* ---------- 19 · Mobile CTA ---------- */
.mobile-cta{ display:none; }

/* ---------- 20 · Responsive ---------- */
@media (max-width:1020px){
  .hero-grid{ grid-template-columns:1fr; gap:8px; }
  .hero{ padding-block:130px 150px; }
  .hero-stage{ height:380px; min-height:340px; order:-1; margin:-30px 0 0; align-self:auto; }
  .services-head{ flex-direction:column; align-items:flex-start; gap:8px; }
  .services-head .lede{ text-align:left; }
  .cards-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .about-grid{ grid-template-columns:1fr; gap:40px; }
  .work-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:180px; }
  .navy{ grid-template-columns:1fr; }
  .navy-art{ min-height:260px; order:-1; }
  .quotes{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; gap:40px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:760px){
  :root{ --pad:24px; }
  body{ font-size:17px; }
  .about,.services,.work,.reviews,.contact{ padding-block:64px; }

  /* Nav collapses — JS-gated so no-JS users keep a plain inline nav */
  html.js .nav-toggle:not([hidden]){ display:inline-flex; }
  .header-phone .num{ display:none; }
  .header-cta .btn-primary{ display:none; }
  html.js .site-nav{
    position:fixed; inset:0; z-index:-1;
    background:var(--night); display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
  html.js .site-nav.is-open{ opacity:1; pointer-events:auto; z-index:99; }
  html.js .site-nav ul{ flex-direction:column; gap:26px; text-align:center; }
  html.js .site-nav.is-open a{ color:var(--night-text)!important; font-size:28px; font-weight:600; }
  html.no-js .site-nav ul{ gap:14px; flex-wrap:wrap; }
  html.no-js .site-nav a{ font-size:13.5px; }

  .hero{ padding-block:110px 130px; }
  .hero-stage{ height:300px; min-height:280px; }
  .sf-board{ width:190px; }
  .scroll-cue{ display:none; }
  .stats{ gap:28px; }
  .cards-grid{ grid-template-columns:1fr; }
  .work-grid{ grid-template-columns:1fr; grid-auto-rows:230px; }
  .span-wide,.span-tall{ grid-column:span 1; grid-row:span 1; }
  .navy-copy{ padding:34px 26px; }
  .form-row{ grid-template-columns:1fr; gap:0; }
  .reviews-head{ flex-direction:column; align-items:flex-start; }
  .footer-grid{ grid-template-columns:1fr; gap:34px; }
  .site-footer{ padding-bottom:170px; }

  /* Sticky mobile CTA */
  .mobile-cta{
    display:flex; gap:10px; position:fixed; left:12px; right:12px; bottom:12px; z-index:90;
    background:rgba(251,245,233,.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    border:1px solid var(--line); border-radius:14px; padding:10px;
    box-shadow:0 12px 40px rgba(33,25,16,.25);
  }
  .mobile-cta .btn{ flex:1; justify-content:center; }
}

/* ============================================================
   22 · THE THROUGHLINE — the fitter's line
   One amber vertical that opens as the hero's chain, threads
   every section index ("fixings" bolted to it), welds the About
   steps on, and re-hangs the roundel in the footer. Decorative
   only (aria-hidden everywhere).

   Three segments (hero / day / footer) share the same X so they
   read as one unbroken line. FULLY DRAWN BY DEFAULT — script.js
   rewinds each segment (scaleY:0) and draws it with scroll only
   when motion is allowed, so no-JS and reduced-motion users get
   a clean static line.
   ============================================================ */
.rail{
  position:absolute; top:0; bottom:0;
  /* gutter centre: between the container edge and the content's left
     edge — the axis the index chips get bolted onto. 100% (not 100vw)
     so the maths matches the container even with a scrollbar. */
  left:calc(max(0px, (100% - var(--container)) / 2) + var(--pad) / 2 - 1px);
  width:2px; pointer-events:none;
}
.rail-line{ display:block; width:100%; height:100%; will-change:transform; }

/* Hero: iron chain out of the ceiling, warming to amber as it falls */
.rail--hero .rail-line{
  background:linear-gradient(180deg, #241B11, #3A2E1E 70px, rgba(220,122,18,.5) 240px, rgba(220,122,18,.62));
}
.rail-plate{ /* the ceiling fixing the line drops from */
  position:absolute; top:0; left:50%; width:14px; height:4px; margin-left:-7px;
  background:#3A2E1E; border-radius:0 0 3px 3px;
}

/* Day: a quiet amber thread — above the section backgrounds (z 1),
   below the chips bolted to it (.rail-fix is z 2) */
.rail--day{ z-index:1; }
.rail--day .rail-line{
  background:linear-gradient(180deg, rgba(220,122,18,.62), rgba(220,122,18,.4) 50%, rgba(220,122,18,.72));
}

/* Footer: the line resolves, glowing, and the sign re-hangs */
.rail--footer{ bottom:auto; height:clamp(170px, 34%, 240px); }
.rail--footer .rail-line{
  background:linear-gradient(180deg, rgba(220,122,18,.72), var(--glow));
  box-shadow:0 0 12px rgba(220,122,18,.3);
}
.rail-pendant{ position:absolute; top:100%; left:50%; width:0; }
.rail-pendant-swing{
  display:block; width:44px; margin-left:-22px; padding-top:8px; position:relative;
  transform-origin:50% 0;
  animation:pendant-sway 5.6s ease-in-out infinite alternate; /* killed by reduced motion */
}
.rail-pendant-swing::before{ /* the short link between line and roundel */
  content:""; position:absolute; left:50%; top:0; width:2px; height:8px; margin-left:-1px;
  background:var(--glow);
}
.rail-pendant-swing svg{ display:block; width:44px; height:44px; filter:drop-shadow(0 0 16px rgba(220,122,18,.55)); }
@keyframes pendant-sway{
  from{ transform:rotate(3.5deg); }
  to{ transform:rotate(-3.5deg); }
}

/* Fixings: the existing section index chips bolt onto the line.
   The chip leaves the eyebrow's flex flow and centres on the rail;
   its opaque background lets the line read as passing behind it. */
.rail-fix{ position:relative; z-index:2; }
.rail-fix .idx{
  position:absolute; top:50%; left:calc(-1 * var(--pad) / 2);
  transform:translate(-50%,-50%); margin:0;
  border-color:rgba(220,122,18,.5);
}
.rail-fix.on-dark-eyebrow .idx{ background:var(--night-2); } /* hero chip must occlude the line */

/* About steps: welded connectors from the line to each step roundel */
.steps li{ position:relative; }
.weld{
  position:absolute; top:40px; /* centre of the 40px step roundel */
  left:calc(-1 * var(--pad) / 2); width:calc(var(--pad) / 2); height:2px;
  background:linear-gradient(90deg, rgba(220,122,18,.9), rgba(220,122,18,.3));
}
.weld::before{ /* bolt head where the weld meets the line */
  content:""; position:absolute; left:-2px; top:50%; width:6px; height:6px; margin-top:-3px;
  border-radius:50%; background:var(--amber);
}

@media (max-width:760px){
  /* hairline tucked to the edge (--pad is 24px here, so the rail sits at 12px) */
  .rail{ width:1.5px; }
  .rail-plate{ width:10px; margin-left:-5px; }
  /* chips return to the text flow; a short tick ties each one to the line */
  .rail-fix .idx{ position:static; transform:none; }
  .rail-fix::before{
    content:""; position:absolute; top:50%; left:calc(-1 * var(--pad) / 2);
    width:calc(var(--pad) / 2); height:1.5px; margin-top:-1px;
    background:rgba(220,122,18,.45);
  }
  .rail-pendant-swing{ width:28px; margin-left:-14px; }
  .rail-pendant-swing svg{ width:28px; height:28px; }
}

/* ============================================================
   23 · TIME-OF-DAY — dawn and dusk veils
   script.js scrubs .day's background-color (dawn → paper → dusk)
   and these two veil opacities along the throughline's descent.
   Both custom properties default to 0 and the background stays
   --paper, so no-JS and reduced-motion users keep today's exact
   static night / paper / night treatment.
   ============================================================ */
.day{ --dawn-o:0; --dusk-o:0; }
.day::before,.day::after{
  content:""; position:absolute; left:0; right:0; pointer-events:none;
  z-index:-1; /* above the sheet's own fill, below all content */
}
.day::before{ /* first light spilling over the top of the sheet */
  top:0; height:340px; opacity:var(--dawn-o);
  border-radius:28px 28px 0 0;
  background:linear-gradient(180deg, rgba(220,122,18,.16), rgba(255,169,77,.06) 45%, rgba(255,169,77,0));
}
.day::after{ /* dusk gathering before the footer's night */
  bottom:0; height:260px; opacity:var(--dusk-o);
  background:linear-gradient(0deg, rgba(20,16,10,.45), rgba(33,22,10,.16) 55%, rgba(33,22,10,0));
}

/* ============================================================
   24 · FIXING SEATS & SECTION RESPONSES
   As the throughline's drawn tip reaches a section's fixing (its
   index chip crosses the draw horizon), script.js seats the chip
   and charges the section. Each section then ANSWERS the line in
   its own craft language. All one-shot; transform / opacity /
   colour / filter / box-shadow only. Inert without JS (classes
   are never added) and collapsed under reduced motion (§21).
   ------------------------------------------------------------ */

/* ----- Universal: the fixing tightens onto the line -----
   A bolt seating home: the chip punches, an amber ring pings
   outward, and the border locks to amber for good ("fitted").
   The end state (amber border) is baked into the keyframes so the
   animation's `both` fill holds it — no separate transition to
   land, which keeps the "fitted" state reliable under fast scroll. */
.rail-fix.is-seated .idx{ animation:fix-seat .6s var(--ease) both; }
@keyframes fix-seat{
  0%  { transform:translate(-50%,-50%) scale(1);    box-shadow:0 0 0 0 rgba(220,122,18,.6); border-color:rgba(220,122,18,.5); color:var(--amber-deep); }
  45% { transform:translate(-50%,-50%) scale(1.24); box-shadow:0 0 0 8px rgba(220,122,18,0); border-color:var(--amber); }
  100%{ transform:translate(-50%,-50%) scale(1);    box-shadow:0 0 0 0 rgba(220,122,18,0);  border-color:var(--amber);     color:var(--amber-deep); }
}

/* Stagger indices for the grid cascades (set once, used by the
   section responses below; harmless when no section is charged) */
.cards-grid .card:nth-child(1){ --i:0; } .cards-grid .card:nth-child(2){ --i:1; }
.cards-grid .card:nth-child(3){ --i:2; } .cards-grid .card:nth-child(4){ --i:3; }
.cards-grid .card:nth-child(5){ --i:4; } .cards-grid .card:nth-child(6){ --i:5; }
.work-grid .work-item:nth-child(1){ --wi:0; } .work-grid .work-item:nth-child(2){ --wi:1; }
.work-grid .work-item:nth-child(3){ --wi:2; } .work-grid .work-item:nth-child(4){ --wi:3; }
.work-grid .work-item:nth-child(5){ --wi:4; } .work-grid .work-item:nth-child(6){ --wi:5; }
.work-grid .work-item:nth-child(7){ --wi:6; } .work-grid .work-item:nth-child(8){ --wi:7; }
.work-grid .work-item:nth-child(9){ --wi:8; }

/* ----- SIGNS (02): current runs the grid -----
   The line energises the cards: each amber top-rule lights up
   full-width in reading order, then relaxes back to its tab —
   a charge spreading from the rail through the work. */
#signs.is-charged .card::before{
  animation:rail-charge .7s var(--ease) both;
  animation-delay:calc(var(--i,0) * .07s);
}
@keyframes rail-charge{
  0%  { transform:scaleX(.18); background:var(--amber); }
  45% { transform:scaleX(1);   background:var(--glow); }
  100%{ transform:scaleX(.18); background:var(--amber); }
}

/* ----- PRINT (03): a print-head pass & ink stamp -----
   A registration bar sweeps across the heading (a print pass),
   then each icon stamps like a press striking ink. */
#print .services-head{ position:relative; }
#print.is-charged .services-head::after{
  content:""; position:absolute; left:0; right:0; bottom:-10px; height:2px; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--amber), transparent);
  transform:scaleX(0); animation:reg-sweep .75s var(--ease) both;
}
@keyframes reg-sweep{
  0%  { transform:scaleX(0); transform-origin:left; }
  50% { transform:scaleX(1); transform-origin:left; }
  51% { transform:scaleX(1); transform-origin:right; }
  100%{ transform:scaleX(0); transform-origin:right; }
}
#print.is-charged .card .ic{
  animation:ink-stamp .5s var(--ease) both;
  animation-delay:calc(.18s + var(--i,0) * .06s);
}
@keyframes ink-stamp{
  0%  { transform:scale(1); }
  35% { transform:scale(.84); background:var(--amber); color:#FFF8EC; border-color:var(--amber); }
  100%{ transform:scale(1); }
}

/* ----- WORK (04): the contact sheet develops -----
   Work images surface from a dim, low-saturation state to full
   colour in cascade, like prints coming up in the tray. (filter
   only — safe to layer over the data-reveal fade.) */
#work.is-charged .work-item{
  animation:develop .8s ease both;
  animation-delay:calc(var(--wi,0) * .05s);
}
@keyframes develop{
  0%  { filter:brightness(.55) saturate(.35) contrast(.92); }
  100%{ filter:none; }
}
/* The Royal Navy neon re-buzzes as it enters (its own trigger) */
.em-neon-soft.is-buzzed{ animation:neon-buzz 1s steps(1,end) both; }
@keyframes neon-buzz{
  0%{ opacity:.35; } 8%{ opacity:1; } 12%{ opacity:.45; } 20%{ opacity:1; }
  26%{ opacity:.7; } 34%{ opacity:1; } 100%{ opacity:1; }
}

/* ----- REVIEWS (05) ----- the 100% badge stamps down: GSAP-driven
   (it's a reveal target), see script.js. No CSS needed here.    */

/* ----- CONTACT (06) ----- an amber focus-ring ripples down the
   fields: GSAP-driven box-shadow stagger, see script.js.        */

@media (max-width:760px){
  /* mobile chips sit in the text flow — seat without the centring translate */
  @keyframes fix-seat{
    0%  { transform:scale(1);    box-shadow:0 0 0 0 rgba(220,122,18,.6); border-color:rgba(220,122,18,.5); color:var(--amber-deep); }
    45% { transform:scale(1.24); box-shadow:0 0 0 8px rgba(220,122,18,0); border-color:var(--amber); }
    100%{ transform:scale(1);    box-shadow:0 0 0 0 rgba(220,122,18,0);  border-color:var(--amber);     color:var(--amber-deep); }
  }
}

/* ---------- 21 · Reduced motion: calm everything ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .marquee-track{ animation:none; transform:none; }
  .sf-board{ animation:none; }
  .em-neon,.em-neon.pre,.em-neon.lit{ color:var(--glow); text-shadow:none; animation:none; }
  .about-frame img[data-parallax]{ scale:1; }
}

/* ============================================================
   25 · SPECIMEN CARD ICONS — "the letters are the product"
   Each card icon is a small proof-of-craft in the medium itself
   (pure CSS + inline SVG). Fixed 72px height = zero layout shift.
   Motion is hover/one-shot, double-gated (hover:hover)+(reduced-
   motion:no-preference); every hover mirrors on :focus-within for
   keyboard parity. Decorative (aria-hidden); the <h3> carries
   meaning. Resting states are finished, not broken.
   ============================================================ */
.specimen{
  position:relative; width:100%; height:72px; margin-bottom:18px;
  border-radius:10px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}

/* -- SIGNS 1 · Built-up lettering: an extruded capital A -- */
.sp-builtup .sp-A{
  font-family:var(--f-display); font-weight:700; font-size:44px; line-height:1; color:var(--amber);
  text-shadow:1px 1px 0 var(--walnut),2px 2px 0 #7a4f28,3px 3px 0 #7a4f28,4px 4px 0 var(--amber-deep),5px 5px 0 var(--amber-deep);
  transition:text-shadow .3s var(--ease),transform .3s var(--ease);
}

/* -- SIGNS 2 · Vehicle livery: a walnut van with an AMBER decal -- */
.sp-livery .sp-van{ transition:transform .3s var(--ease); }
.sp-vanword{ font-family:var(--f-mono); font-weight:700; font-size:9px; letter-spacing:1px; fill:var(--paper); }
.sp-speed{
  position:absolute; left:16%; top:42%; width:16px; height:2px; border-radius:2px; background:var(--amber-deep);
  opacity:0; transform:translateX(7px); transition:opacity .3s ease,transform .3s var(--ease);
}
.sp-speed2{ top:56%; left:13%; width:11px; }

/* -- SIGNS 3 · Illuminated: the word ON, dim until it flicks on -- */
.sp-on{
  font-family:var(--f-mono); font-weight:700; font-size:26px; letter-spacing:.14em;
  color:var(--muted); text-shadow:0 0 6px rgba(255,169,77,.18);
}

/* -- SIGNS 4 · Shop fascias: a lit fascia over a doorway -- */
.sp-fascia{ flex-direction:column; gap:5px; }
.sp-lintel{
  position:relative; overflow:hidden;
  font-family:var(--f-display); font-weight:600; font-size:12px; letter-spacing:.05em; font-variant:small-caps;
  color:var(--paper); background:var(--walnut); border-radius:5px; padding:5px 16px;
}
.sp-lintel::after{
  content:""; position:absolute; top:0; left:0; width:45%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,236,205,.55),transparent); transform:translateX(-160%);
}
.sp-door{ width:56px; height:16px; border-left:1.5px solid rgba(107,68,35,.4); border-right:1.5px solid rgba(107,68,35,.4); }

/* -- SIGNS 5 · Banners & site boards: an eyeleted flag -- */
.sp-flag{
  position:relative; font-family:var(--f-mono); font-size:9px; letter-spacing:.1em; color:var(--amber-deep);
  background:var(--surface-2); border:1px solid var(--line); border-radius:3px; padding:11px 22px;
}
.sp-eye{ position:absolute; width:5px; height:5px; border-radius:50%; background:radial-gradient(circle at 40% 35%,var(--line),var(--walnut)); }
.sp-eye:nth-child(1){ left:4px; top:4px; } .sp-eye:nth-child(2){ right:4px; top:4px; }
.sp-eye:nth-child(3){ left:4px; bottom:4px; } .sp-eye:nth-child(4){ right:4px; bottom:4px; }

/* -- SIGNS 6 · Brass plaques: an engraved, brushed-brass plate -- */
.sp-plate{
  position:relative; overflow:hidden;
  font-family:var(--f-mono); font-weight:700; font-size:11px; letter-spacing:.06em; color:var(--ink); text-shadow:0 1px 0 rgba(255,246,226,.7);
  background:linear-gradient(100deg,var(--amber-deep),#cf924b 32%,#e6bd82 50%,#cf924b 68%,var(--amber-deep));
  border-radius:4px; padding:13px 16px;
  box-shadow:inset 0 1px 0 rgba(255,246,226,.4),inset 0 -1px 0 rgba(0,0,0,.22);
}
.sp-plate::after{
  content:""; position:absolute; top:0; left:0; width:35%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,245,225,.6),transparent); transform:translateX(-160%);
}

/* -- PRINT · registration/crop marks in all four corners -- */
.specimen--print .sp-marks{
  --cm:linear-gradient(var(--line),var(--line));
  position:absolute; inset:5px; pointer-events:none; opacity:.4; transition:opacity .18s ease;
  background:
    var(--cm) 0 0/7px 1px no-repeat, var(--cm) 0 0/1px 7px no-repeat,
    var(--cm) 100% 0/7px 1px no-repeat, var(--cm) 100% 0/1px 7px no-repeat,
    var(--cm) 0 100%/7px 1px no-repeat, var(--cm) 0 100%/1px 7px no-repeat,
    var(--cm) 100% 100%/7px 1px no-repeat, var(--cm) 100% 100%/1px 7px no-repeat;
}

/* -- PRINT 1 · Business cards: a fanned stack of three distinct cards -- */
.sp-fan{ position:relative; width:70px; height:46px; }
.sp-bc{
  position:absolute; left:50%; bottom:4px; width:34px; height:22px; margin-left:-17px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-btn);
  box-shadow:0 1px 3px rgba(107,68,35,.24);
  transform-origin:50% 100%; transition:transform .3s var(--ease);
}
.sp-bc::after{ content:""; position:absolute; left:5px; top:5px; width:4px; height:4px; border-radius:50%; background:var(--amber); }
.sp-bc:nth-child(1){ transform:translateX(-7px) rotate(-12deg); }
.sp-bc:nth-child(3){ transform:translateX(7px) rotate(12deg); }

/* -- PRINT 2 · Letterheads: a sheet with a folded corner -- */
.sp-sheet{
  position:relative; width:44px; height:56px; border:1px solid var(--line); border-radius:2px; overflow:hidden;
  background:
    radial-gradient(circle,var(--amber) 48%,transparent 52%) 7px 15px/5px 5px no-repeat,
    linear-gradient(var(--line),var(--line)) 7px 26px/28px 2px no-repeat,
    linear-gradient(var(--line),var(--line)) 7px 33px/28px 2px no-repeat,
    linear-gradient(var(--line),var(--line)) 7px 40px/20px 2px no-repeat,
    var(--surface);
}
.sp-sheet::before{ content:""; position:absolute; top:8px; left:7px; right:7px; height:2px; background:var(--amber); }
.sp-fold{
  position:absolute; right:0; bottom:0; width:0; height:0;
  border-style:solid; border-width:0 0 10px 10px; border-color:transparent transparent var(--surface-2) transparent;
  filter:drop-shadow(-1px -1px 1px rgba(107,68,35,.3)); transition:border-width .3s var(--ease);
}

/* -- PRINT 3 · Leaflets & posters: a tri-fold in perspective -- */
.sp-leaflet{ perspective:130px; }
.sp-trifold{ display:flex; transform-style:preserve-3d; }
.sp-panel{ position:relative; width:20px; height:46px; background:var(--surface); border:1px solid var(--line); transition:transform .3s var(--ease); }
.sp-panel::after{ content:""; position:absolute; left:4px; top:12px; width:10px; height:2px; background:var(--amber); }
.sp-panel:first-child{ transform:rotateY(28deg); transform-origin:right; }
.sp-panel:last-child{ transform:rotateY(-28deg); transform-origin:left; }

/* -- PRINT 4 · Point of sale: a strut-back showcard -- */
.sp-pos{ perspective:170px; }
.sp-counter{ position:relative; transform-style:preserve-3d; }
.sp-face{
  position:relative; z-index:1; width:44px; height:34px;
  background:var(--surface); border:1px solid var(--line); border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:700; font-size:18px; color:var(--amber);
  transform:rotateX(6deg); transform-origin:50% 100%; transition:transform .4s var(--ease);
}
.sp-strut{
  position:absolute; right:5px; bottom:-3px; z-index:0; width:0; height:0;
  border-style:solid; border-width:16px 7px 0 0; border-color:var(--walnut) transparent transparent transparent;
}

/* -- PRINT 5 · Menu boards: a dark board with a special -- */
.sp-mboard{
  width:54px; height:54px; background:#1D1610; border-radius:var(--r-btn);
  padding:8px 9px; display:flex; flex-direction:column; gap:5px;
}
.sp-menuword{ font-family:var(--f-mono); font-size:9px; letter-spacing:.12em; color:var(--glow); }
.sp-mline{ height:2px; border-radius:2px; background:var(--line); transition:background .18s ease; }
.sp-mline:nth-child(3){ width:78%; } .sp-mline:nth-child(4){ width:88%; }

/* -- PRINT 6 · Floor graphics: a decal in perspective -- */
.sp-floor{ perspective:130px; }
.sp-decal{ position:relative; width:52px; height:44px; display:flex; align-items:center; justify-content:center; transform-style:preserve-3d; }
.sp-ellipse{ width:46px; height:46px; border:3px solid var(--amber); border-radius:50%; transform:rotateX(55deg); }
.sp-arrow{ position:absolute; transition:transform .3s var(--ease); }

/* ---- Hover / focus reveals + keyframes (double-gated) ----
   Motion only arms with a real pointer AND when motion is allowed;
   :focus-within mirrors every hover so keyboard Tab triggers them. */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  /* 1 · built-up letter deepens its extrusion and lifts off the wall */
  .card:hover .sp-A,.card:focus-within .sp-A{
    transform:translateY(-2px);
    text-shadow:1px 1px 0 var(--walnut),3px 3px 0 #7a4f28,4px 4px 0 #7a4f28,6px 6px 0 var(--amber-deep),7px 7px 0 var(--amber-deep);
  }
  /* 2 · van drives forward, speed lines fade in behind it */
  .card:hover .sp-van,.card:focus-within .sp-van{ transform:translateX(6px); }
  .card:hover .sp-speed,.card:focus-within .sp-speed{ opacity:.9; transform:translateX(0); }
  /* 3 · illuminated ON flicks on (≤400ms two-dip), ends fully lit */
  .card:hover .sp-on,.card:focus-within .sp-on{ animation:sp-flicker .4s steps(1,end) both; }
  @keyframes sp-flicker{
    0%{ color:var(--muted); text-shadow:0 0 6px rgba(255,169,77,.18); }
    22%{ color:var(--glow); text-shadow:0 0 10px rgba(255,169,77,.7); }
    38%{ color:var(--muted); text-shadow:none; }
    58%{ color:var(--glow); text-shadow:0 0 12px rgba(255,169,77,.8); }
    74%{ color:var(--muted); text-shadow:none; }
    100%{ color:var(--glow); text-shadow:0 0 12px rgba(255,169,77,.85),0 0 22px rgba(255,169,77,.5); }
  }
  /* 4 · fascia: a single light sweep crosses the lintel */
  .card:hover .sp-lintel::after,.card:focus-within .sp-lintel::after{ animation:sp-sweep .45s var(--ease) 1 both; }
  /* 5 · banner: one gentle ripple */
  .card:hover .sp-flag,.card:focus-within .sp-flag{ animation:sp-ripple .45s var(--ease) 1 both; }
  @keyframes sp-ripple{ 0%,100%{ transform:skewX(0); } 30%{ transform:skewX(1.5deg); } 65%{ transform:skewX(-1.5deg); } }
  /* 6 · brass: the sheen sweeps across once */
  .card:hover .sp-plate::after,.card:focus-within .sp-plate::after{ animation:sp-sweep .5s var(--ease) 1 both; }
  @keyframes sp-sweep{ from{ transform:translateX(-160%); } to{ transform:translateX(320%); } }

  /* print · crop marks sharpen */
  .card:hover .sp-marks,.card:focus-within .sp-marks{ opacity:.7; }
  /* 1 · fan spreads wider */
  .card:hover .sp-bc:nth-child(1),.card:focus-within .sp-bc:nth-child(1){ transform:translateX(-12px) rotate(-19deg); }
  .card:hover .sp-bc:nth-child(3),.card:focus-within .sp-bc:nth-child(3){ transform:translateX(12px) rotate(19deg); }
  /* 2 · folded corner lifts */
  .card:hover .sp-fold,.card:focus-within .sp-fold{ border-width:0 0 12px 12px; }
  /* 3 · outer leaflet panels ease flatter */
  .card:hover .sp-panel:first-child,.card:focus-within .sp-panel:first-child{ transform:rotateY(14deg); }
  .card:hover .sp-panel:last-child,.card:focus-within .sp-panel:last-child{ transform:rotateY(-14deg); }
  /* 4 · POS gives a single nod */
  .card:hover .sp-face,.card:focus-within .sp-face{ animation:sp-nod .5s var(--ease) 1 both; }
  @keyframes sp-nod{ 0%,100%{ transform:rotateX(6deg); } 45%{ transform:rotateX(2deg); } }
  /* 5 · menu: the middle line becomes the highlighted special */
  .card:hover .sp-mline:nth-child(3),.card:focus-within .sp-mline:nth-child(3){ background:var(--amber); }
  /* 6 · floor arrow nudges up */
  .card:hover .sp-arrow,.card:focus-within .sp-arrow{ transform:translateY(-3px); }
}

/* Reduced-motion / touch resting states must look finished:
   the illuminated sign rests fully LIT and steady (never dim). */
@media (prefers-reduced-motion:reduce){
  .sp-on{ color:var(--glow); text-shadow:0 0 12px rgba(255,169,77,.85),0 0 22px rgba(255,169,77,.5); }
}

/* ============================================================
   26 · SIGNWRITTEN TESTIMONIAL (Reviews)
   The strongest quote painted on the wall above two supporting
   cards. One phrase carries a hand-drawn amber underline: fully
   drawn by default (no-JS / reduced motion); script.js sets the
   hidden dashoffset and draws it in on scroll (never CSS). Text
   stays --ink; only the stroke is amber. Static text + absolute
   SVG = zero layout shift.
   ============================================================ */
.testimonial{ margin:0 0 34px; max-width:700px; }
.testimonial-q{
  margin:0; font-family:var(--f-body); font-style:italic;
  font-size:clamp(28px,3.2vw,42px); line-height:1.35; color:var(--ink);
}
.testimonial figcaption{
  margin-top:16px;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}
/* .uline keeps the phrase + its full stop on one line (no orphaned period);
   .uline-words is what the drawn stroke tracks — the words only, not the stop */
.uline{ white-space:nowrap; }
.uline-words{ position:relative; display:inline-block; }
.uline-svg{
  position:absolute; left:0; right:0; bottom:-.14em; width:100%; height:.34em;
  overflow:visible; pointer-events:none;
}
.uline-svg path{
  fill:none; stroke:var(--amber); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:0;   /* fully drawn by default */
}
/* the two remaining quotes step back, two-up under the statement */
.quotes--support{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:760px; }
@media (max-width:760px){ .quotes--support{ grid-template-columns:1fr; } }

/* ============================================================
   27 · TRUST ROW — client names as miniature sign treatments
   Each client name reads as a job the shop did, in one of three
   quiet treatments (brass / painted / neon), assigned so adjacent
   chips differ. Names stay real text (a11y). Uniform 40px height
   = zero layout shift; wraps to multiple rows on mobile.
   ============================================================ */
.trust-names li{
  height:40px; display:inline-flex; align-items:center;
  padding:10px 16px; border:1px solid var(--line); border-radius:var(--r-btn);
  font-size:13.5px; line-height:1; white-space:nowrap;
  transition:transform .18s var(--ease);
}
/* brass — engraved brass plate, §25 sp-plate gradient with its two dark
   endpoints lightened (#c07d33) so --ink stays >=4.5:1 across the whole chip */
.trust-names .tn-brass{
  font-family:var(--f-mono); color:var(--ink); text-shadow:0 1px 0 rgba(255,246,226,.7);
  background:linear-gradient(100deg,#c07d33,#cf924b 32%,#e6bd82 50%,#cf924b 68%,#c07d33);
  border-color:rgba(107,68,35,.35);
}
/* painted — surface chip, painted serif */
.trust-names .tn-paint{
  font-family:var(--f-body); font-style:italic; font-size:15px; color:var(--walnut);
  background:var(--surface);
}
/* neon — a quiet night chip (glow kept faint for a day section) */
.trust-names .tn-neon{
  font-family:var(--f-mono); color:var(--glow);
  background:var(--night-2); border-color:var(--night-line);
  text-shadow:0 0 5px rgba(255,169,77,.3);
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .trust-names li:hover{ transform:translateY(-1px); }
}

/* ============================================================
   28 · "SEE YOUR SIGN" — live sign preview at the quote form
   Hanging plate mirrors the Business field (script.js §08b,
   aria-hidden): dim while empty/typing, lights to --glow on a
   pause/blur. FIXED height = zero CLS; no-JS rests "YOUR NAME"
   dim. Sway + halo compositor-only; reduced motion drops both.
   ============================================================ */
.sign-vignette{
  position:relative; height:170px; margin-bottom:26px; overflow:hidden;
  border-radius:var(--r-panel); border:1px solid rgba(58,46,30,.6);
  background:radial-gradient(120% 90% at 50% 6%, var(--night-2) 0%, var(--night) 78%);
}
/* halo brightens only when lit */
.sv-halo{
  position:absolute; left:50%; top:38%; width:78%; max-width:460px; height:150px;
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,169,77,.32), rgba(255,169,77,0) 70%);
  opacity:0; transition:opacity .5s var(--ease);
}
.sign-vignette.is-lit .sv-halo{ opacity:1; }
/* hang anchor: cords meet here; plate sways from a top-centre pivot */
.sv-hang{ position:absolute; left:50%; top:24px; transform:translateX(-50%); width:70%; max-width:420px; }
.sv-cord{ position:absolute; bottom:100%; width:1px; height:24px; background:rgba(242,232,214,.18); }
.sv-cord-l{ left:18%; }
.sv-cord-r{ right:18%; }
.sv-plate{
  position:relative; height:92px; padding:0 18px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-card); border:1px solid rgba(58,46,30,.85);
  background:linear-gradient(180deg,#241C13,#181209);
  box-shadow:0 10px 22px rgba(0,0,0,.45);
  transform-origin:top center; animation:sv-sway 7s ease-in-out infinite;
}
.sv-text{
  font-family:var(--f-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; white-space:nowrap; line-height:1;
  font-size:30px; color:rgba(168,152,120,.55);
  transition:color .28s var(--ease), text-shadow .28s var(--ease);
}
.sign-vignette.is-lit .sv-text{
  color:var(--glow);
  text-shadow:0 0 6px rgba(255,169,77,.9),0 0 14px rgba(255,169,77,.5),0 0 30px rgba(255,169,77,.25);
}
/* the fluorescent "catch": on-off-on ~350ms, then steady (JS-toggled) */
.sign-vignette.sv-flicker .sv-text{ animation:sv-flicker .35s var(--ease) both; }
.sv-caption{
  position:absolute; left:16px; bottom:12px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--night-muted);
}
@keyframes sv-sway{ 0%,100%{ transform:rotate(-.8deg); } 50%{ transform:rotate(.8deg); } }
@keyframes sv-flicker{ 0%{opacity:.35} 12%{opacity:1} 22%{opacity:.4} 34%{opacity:1} 100%{opacity:1} }
@media (max-width:760px){
  .sign-vignette{ height:150px; }
  .sv-plate{ height:84px; }
}
/* reduced motion: no sway, no flicker — light-up is an instant state */
@media (prefers-reduced-motion:reduce){
  .sv-plate{ animation:none; }
  .sign-vignette.sv-flicker .sv-text{ animation:none; }
  .sv-text,.sv-halo{ transition:none; }
}