/* ==========================================================================
   GRAND ARCHITECT — design system
   Concept: a drafting document. Construction rules, plate numbers, compass
   geometry. Colour is sampled from real objects: the shop's slate stucco,
   the oxidised brass of a compass, the red of the sign over the door.
   ========================================================================== */

/* --- 1. Fonts (self-hosted, latin subset, variable) ---------------------- */
@font-face{font-family:'Big Shoulders';src:url('../fonts/big-shoulders-display.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Inter Tight';src:url('../fonts/inter-tight.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono.woff2') format('woff2');font-weight:100 800;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('../fonts/instrument-serif.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

/* --- 2. Tokens ---------------------------------------------------------- */
:root{
  --ink:#0C0E11;
  --slate:#171B21;
  --slate-2:#1E242C;
  --graphite:#2B323B;
  --graphite-2:#3B444F;

  --bone:#E6E1D7;
  --bone-dim:#A7A497;
  --bone-faint:#767468;

  --brass:#B98B3C;
  --brass-lo:#8A6729;
  --brass-glow:rgba(185,139,60,.13);
  --ember:#C4372A;
  /* Blueprint blue — the one cool colour on the sheet, used for the
     announcement bar so it reads as a notice rather than as chrome. */
  --blueprint:#1E3348;
  --blueprint-lo:#2C4A66;
  --ember-lo:#9A2A20;
  --focus:#E8C87A;

  --f-display:'Big Shoulders','Haettenschweiler','Arial Narrow',sans-serif;
  --f-body:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --f-quote:'Instrument Serif',Georgia,serif;

  --t-hero:clamp(2.6rem,10.5vw,9rem);
  --t-h1:clamp(2.9rem,7vw,6.2rem);
  --t-h2:clamp(2.1rem,4.6vw,3.9rem);
  --t-h3:clamp(1.45rem,2.4vw,2.1rem);
  --t-lead:clamp(1.06rem,1.55vw,1.32rem);
  --t-body:1.0125rem;
  --t-sm:.9rem;
  --t-mono:.72rem;

  --measure:66ch;
  --rail:88px;
  --gutter:clamp(1.25rem,4vw,3.5rem);
  --max:1440px;
  --sec-y:clamp(4.5rem,9vw,9rem);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* --- 3. Reset ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--f-body);
  font-size:var(--t-body);line-height:1.65;font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video,iframe{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit;text-decoration-color:color-mix(in srgb,var(--brass) 55%,transparent);text-underline-offset:.22em}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:inherit}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1.1em;padding-left:1.15em}
li{margin-bottom:.4em}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
::selection{background:var(--brass);color:var(--ink)}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--bone);color:var(--ink);
  padding:.8rem 1.2rem;font-family:var(--f-mono);font-size:var(--t-sm)}
.skip:focus{left:.5rem;top:.5rem}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- 4. Type roles ------------------------------------------------------ */
.display,h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:.9;
  letter-spacing:-.005em;text-transform:uppercase;text-wrap:balance;overflow-wrap:break-word}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);line-height:.95}

/* The annotation voice. Every label on this site is a drafting note. */
.note{font-family:var(--f-mono);font-size:var(--t-mono);font-weight:500;
  letter-spacing:.19em;text-transform:uppercase;color:var(--brass);margin:0}
.note--dim{color:var(--bone-faint)}
.note--bone{color:var(--bone-dim)}
.lead{font-size:var(--t-lead);line-height:1.55;color:var(--bone-dim);max-width:54ch}
.prose{max-width:var(--measure)}
.prose>p,.prose li{color:var(--bone-dim)}
.prose strong{color:var(--bone);font-weight:600}
.prose h2{margin:2.3em 0 .5em;font-size:var(--t-h3)}
.prose h3{margin:2em 0 .45em;font-size:1.2rem;font-family:var(--f-body);font-weight:650;
  text-transform:none;letter-spacing:0;line-height:1.35;color:var(--bone)}
.prose a{color:var(--bone);text-decoration:underline}
.prose a:hover{color:var(--brass)}
.prose blockquote{margin:2em 0;padding-left:1.4rem;border-left:2px solid var(--brass)}

.quote{font-family:var(--f-quote);font-style:italic;font-size:clamp(1.5rem,3.2vw,2.7rem);
  line-height:1.24;color:var(--bone);max-width:24ch;letter-spacing:-.01em}

/* --- 5. Layout: the drafting sheet -------------------------------------- */
.sheet{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr)}
.sheet__rail{position:relative;border-right:1px solid var(--graphite)}
.sheet__body{padding-left:clamp(1.25rem,3.2vw,3rem);min-width:0}
.rail__plate{position:sticky;top:6.5rem;writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.24em;
  text-transform:uppercase;color:var(--brass);padding:1rem 0}
.rail__ticks{position:absolute;top:0;bottom:0;right:-1px;width:9px;pointer-events:none;
  background:repeating-linear-gradient(to bottom,var(--graphite) 0 1px,transparent 1px 34px)}
@media (max-width:860px){
  .sheet{grid-template-columns:minmax(0,1fr)}
  .sheet__rail{border-right:0;border-bottom:1px solid var(--graphite);display:flex;
    align-items:center;gap:1rem;padding-bottom:.7rem;margin-bottom:1.6rem}
  .sheet__body{padding-left:0}
  .rail__plate{position:static;writing-mode:horizontal-tb;transform:none;padding:0;flex:none}
  .rail__ticks{position:static;height:1px;width:auto;flex:1;
    background:repeating-linear-gradient(to right,var(--graphite) 0 1px,transparent 1px 12px)}
}

.section{padding-block:var(--sec-y);position:relative}
.section--tight{padding-block:clamp(3rem,6vw,5.5rem)}
.section--rule{border-top:1px solid var(--graphite)}
/* The film plate reads as one thing with what sits either side of it, so the
   usual section rhythm is pulled in around it: its own padding, the padding
   of whatever follows, and the hero's bottom when the hero is what precedes. */
.section--hug{padding-block:clamp(1.75rem,3.5vw,3rem)}
.section--hug + .section{padding-top:clamp(2rem,4vw,3.5rem)}
.hero:has(+ .section--hug){padding-bottom:clamp(1.75rem,3.5vw,3rem)}
.section__head{margin-bottom:clamp(2rem,4vw,3.4rem)}
.section__head .note{display:block;margin-bottom:1.1rem}
.section__head .lead{margin-top:1.4rem}

.grid{display:grid;gap:clamp(1rem,2vw,1.75rem)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)}}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.75rem,5vw,5rem);align-items:start}
.split--wide{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
@media (max-width:900px){.split,.split--wide{grid-template-columns:minmax(0,1fr)}}
.stack>*+*{margin-top:var(--stack,1.25rem)}

/* --- 5b. Backdrop: the architect's instruments -------------------------- */
/* Fixed behind everything: California as the sheet it all sits on, cubit
   rods, dividers, try square, plumb, balance and setting-out geometry, drawn
   as mass rather than line. The gradients do the feathering and the filters
   keep every edge soft; opacity here sets how much of it surfaces at all. */
.backdrop{
  position:fixed; inset:0;
  z-index:0; pointer-events:none;
  color:var(--brass);
  opacity:.6;
}
/* Everything else sits above it. Without these the opaque body background
   would bury the backdrop entirely. */
.hdr,main,.ftr,.bot,.bot-open{position:relative;z-index:1}
.hdr{z-index:80}
.bot-open{z-index:90}
.bot{z-index:95}

@media (max-width:860px){
  /* A phone crops hard into the figure, so ease it back further. */
  .backdrop{opacity:.48}
}
@media (prefers-contrast:more){
  .backdrop{display:none}
}

/* --- 6. Signature: the struck compass arc ------------------------------- */
/* A construction line, not an ornament. Drawn once on load, then it rests. */
.arc{position:absolute;top:-1px;left:0;right:0;height:120px;overflow:hidden;
  pointer-events:none;z-index:1}
.arc svg{width:100%;height:100%;display:block;overflow:visible}
.arc path{fill:none;stroke:var(--brass);stroke-width:.75;opacity:.38;
  stroke-dasharray:var(--len,2000);stroke-dashoffset:var(--len,2000)}
.arc circle{fill:var(--brass);opacity:0}
.is-struck .arc path{animation:strike 1.5s var(--ease-out) forwards}
.is-struck .arc circle{animation:pivot .5s var(--ease-out) .95s forwards}
@keyframes strike{to{stroke-dashoffset:0}}
@keyframes pivot{to{opacity:.6}}
@media (prefers-reduced-motion:reduce){
  .arc path{stroke-dashoffset:0}
  .arc circle{opacity:.6}
  .is-struck .arc path,.is-struck .arc circle{animation:none}
}

/* --- 7. Header ---------------------------------------------------------- */
.hdr{position:sticky;top:0;background:color-mix(in srgb,var(--ink) 88%,transparent);
  backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.hdr.is-stuck{border-bottom-color:var(--graphite);background:color-mix(in srgb,var(--ink) 96%,transparent)}
.hdr__in{max-width:var(--max);margin-inline:auto;padding:0 var(--gutter);
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);min-height:76px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
/* When the studio uploads a logo it replaces the wordmark entirely. */
.brand img,.brand .custom-logo{max-height:44px;width:auto}
.brand__txt--sm{font-size:.9rem}
.brand__txt{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  line-height:.86;font-size:1.16rem;letter-spacing:.01em}
.brand__txt small{display:block;font-family:var(--f-mono);font-size:.54rem;font-weight:500;
  letter-spacing:.28em;color:var(--brass);margin-top:.28em}

.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(.9rem,1.8vw,1.7rem)}
.nav a{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:var(--bone-dim);
  padding:.45rem 0;position:relative;transition:color .2s}
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover,.nav a[aria-current]{color:var(--bone)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav__has{position:relative}
.nav__panel{position:absolute;top:calc(100% + .9rem);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:290px;background:var(--slate);border:1px solid var(--graphite);padding:.5rem;
  z-index:70;
  opacity:0;visibility:hidden;transition:opacity .22s var(--ease),transform .22s var(--ease);
  box-shadow:0 24px 60px rgba(0,0,0,.6)}
/* The panel is offset .9rem below the link so it does not crowd it, which
   leaves a strip of nothing between the two. Crossing that strip takes the
   pointer off .nav__has, hover goes false, and the menu shuts before it can be
   reached. This bridges the gap with a transparent extension of the panel —
   invisible, but part of the panel's hit area, so the pointer never leaves.
   It inherits the panel's visibility, so it cannot swallow clicks while the
   menu is closed. */
.nav__panel::before{content:'';position:absolute;left:0;right:0;top:-.9rem;height:.9rem}
.nav__has:hover .nav__panel,.nav__has:focus-within .nav__panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav__panel a{display:block;padding:.62rem .8rem;letter-spacing:.1em}
.nav__panel a::after{display:none}
.nav__panel a:hover{background:var(--slate-2);color:var(--brass)}
.hdr__cta{flex:none}
.burger{display:none;flex:none;background:none;border:1px solid var(--graphite);
  width:44px;height:44px;cursor:pointer;padding:0;align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:1px;background:var(--bone);position:relative}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:18px;height:1px;background:var(--bone)}
.burger span::before{top:-5px}.burger span::after{top:5px}

@media (max-width:1080px){
  .nav{display:none}
  .burger{display:flex}
  /* The header sets backdrop-filter, which makes it a containing block for
     position:fixed children — a fixed menu here gets trapped inside the 76px
     bar instead of covering the screen. Anchored to the header instead. */
  .nav.is-open{display:flex;position:absolute;top:100%;left:0;right:0;
    background:var(--ink);border-top:1px solid var(--graphite);
    flex-direction:column;align-items:stretch;gap:0;
    padding:.5rem var(--gutter) 1.5rem;
    max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);
    overflow-y:auto;overscroll-behavior:contain;
    box-shadow:0 26px 60px rgba(0,0,0,.65)}
  .nav.is-open a{padding:1rem 0;border-bottom:1px solid var(--graphite);
    font-size:.82rem;text-align:left}
  .nav.is-open .nav__has{position:static}
  .nav.is-open .nav__panel::before{display:none}
  .nav.is-open .nav__panel{position:static;transform:none;opacity:1;visibility:visible;
    min-width:0;background:none;border:0;box-shadow:none;padding:0 0 .4rem 1rem}
  .nav.is-open .nav__panel a{border-bottom:0;padding:.62rem 0;color:var(--bone-dim)}
  /* Keep the booking CTA reachable on a phone — it is the primary action. */
  .hdr__cta{display:inline-flex;margin-left:auto;padding:.62rem 1rem}
  .hdr__in{gap:.7rem}
}
@media (max-width:420px){
  .hdr__cta{display:none}
}

/* --- 8. Buttons --------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.7rem;
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;border:1px solid var(--graphite-2);background:transparent;color:var(--bone);
  cursor:pointer;transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease)}
.btn:hover{border-color:var(--brass);color:var(--brass)}
/* Ember appears once per screen and only ever means "book". */
.btn--book{background:var(--ember);border-color:var(--ember);color:#FCEFEC;font-weight:500}
.btn--book:hover{background:var(--ember-lo);border-color:var(--ember-lo);color:#fff}
.btn--brass{border-color:var(--brass);color:var(--brass)}
.btn--brass:hover{background:var(--brass);color:var(--ink)}
.btn--sm{padding:.7rem 1.2rem}
.btn__arw{width:12px;height:12px;flex:none;transition:transform .25s var(--ease)}
.btn:hover .btn__arw{transform:translateX(3px)}
.btns{display:flex;flex-wrap:wrap;gap:.8rem}

/* --- 9. Media grade & frames ------------------------------------------- */
/* Earlier this forced grayscale on everything to unify mixed phone photos.
   That was wrong for this shop: a lot of Danny's work carries colour, and the
   colour is the craft. So the grade now only evens out exposure and warmth —
   it never removes information. */
.media{position:relative;overflow:hidden;background:var(--slate);isolation:isolate}
.media img{width:100%;height:100%;object-fit:cover;
  filter:contrast(1.04) saturate(.94) brightness(.97);
  transition:filter .5s var(--ease),transform .7s var(--ease)}
.media::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(185,139,60,.10),transparent 55%),
    linear-gradient(180deg,transparent 55%,rgba(12,14,17,.42));
  transition:opacity .5s var(--ease)}
.media:hover img,a:hover .media img{filter:contrast(1) saturate(1) brightness(1);transform:scale(1.03)}
.media:hover::after,a:hover .media::after{opacity:.4}
.media--full img{filter:none}
.media--full::after{display:none}
.r-1x1{aspect-ratio:1/1}
.r-4x5{aspect-ratio:4/5}
.r-3x2{aspect-ratio:3/2}
.r-16x9{aspect-ratio:16/9}
.media--ph{display:grid;place-items:center;
  background:
    repeating-linear-gradient(45deg,rgba(43,50,59,.5) 0 1px,transparent 1px 11px),
    var(--slate)}
.media--ph span{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-faint)}

/* The frame: a stele set into the wall.
   Stone panel, a brass hairline held off the edge, raking light from above to
   match the backdrop, and the work recessed behind it. Drafting registration
   ticks sit in the corners. No hard outer border anywhere. */
.frame{position:relative;padding:clamp(8px,1vw,13px);
  background:linear-gradient(180deg,var(--slate-2) 0%,var(--slate) 55%,#12161B 100%);
  box-shadow:
    inset 0 1px 0 rgba(230,225,215,.055),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 18px 44px rgba(0,0,0,.42);
  transition:box-shadow .45s var(--ease),transform .45s var(--ease)}
.frame .media{box-shadow:inset 0 0 0 1px rgba(0,0,0,.55)}
.frame::before{content:'';position:absolute;inset:clamp(4px,.5vw,7px);z-index:3;
  pointer-events:none;border:1px solid color-mix(in srgb,var(--brass) 34%,transparent);
  transition:border-color .45s var(--ease)}
.frame::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(168deg,rgba(185,139,60,.10),transparent 42%)}
.frame:hover,a:hover .frame{transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(230,225,215,.08),inset 0 -1px 0 rgba(0,0,0,.5),0 26px 60px rgba(0,0,0,.55)}
.frame:hover::before,a:hover .frame::before{border-color:color-mix(in srgb,var(--brass) 62%,transparent)}

.frame__tick{position:absolute;z-index:4;width:9px;height:9px;pointer-events:none;
  border:0 solid color-mix(in srgb,var(--brass) 48%,transparent)}
.frame__tick--tl{top:clamp(4px,.5vw,7px);left:clamp(4px,.5vw,7px);border-top-width:1px;border-left-width:1px}
.frame__tick--tr{top:clamp(4px,.5vw,7px);right:clamp(4px,.5vw,7px);border-top-width:1px;border-right-width:1px}
.frame__tick--bl{bottom:clamp(4px,.5vw,7px);left:clamp(4px,.5vw,7px);border-bottom-width:1px;border-left-width:1px}
.frame__tick--br{bottom:clamp(4px,.5vw,7px);right:clamp(4px,.5vw,7px);border-bottom-width:1px;border-right-width:1px}

.frame__plate{margin-top:.7rem;display:flex;gap:.6rem;align-items:baseline;
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.15em;
  text-transform:uppercase;color:var(--bone-faint)}
.frame__plate b{color:var(--brass);font-weight:500}

/* --- 10. Cards ---------------------------------------------------------- */
.card{position:relative;display:block;text-decoration:none;background:var(--slate);
  border:1px solid var(--graphite);transition:border-color .3s var(--ease),transform .3s var(--ease)}
.card:hover{border-color:var(--brass-lo);transform:translateY(-3px)}
.card__body{padding:clamp(1.2rem,2.2vw,1.9rem)}
.card__no{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.2em;color:var(--brass);
  display:block;margin-bottom:.85rem}
.card__t{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.3rem,2vw,1.7rem);line-height:.92;margin-bottom:.6rem}
.card__d{color:var(--bone-dim);font-size:var(--t-sm);line-height:1.6;margin:0}
.card__link{margin-top:1.1rem;display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass)}
.card:hover .card__link .btn__arw{transform:translateX(3px)}

/* Service cards carry a value ramp — a nod to black and grey shading. */
.card--svc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--ink),var(--brass-lo) 45%,var(--bone) 100%);
  opacity:.35;transition:opacity .3s var(--ease)}
.card--svc:hover::before{opacity:1}

/* A framed card is the frame; the outer card chrome would double the border. */
.card--framed{background:transparent;border:0}
.card--framed:hover{transform:none}
.card--framed .card__body{padding:.85rem .1rem 0}
.card--framed .card__t{margin-bottom:.25rem}

/* --- 11. Hero ----------------------------------------------------------- */
.hero{position:relative;padding-block:clamp(3.5rem,8vw,7rem) clamp(3rem,6vw,5.5rem);overflow:hidden}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:940px){.hero__grid{grid-template-columns:minmax(0,1fr)}}
.hero__title{font-family:var(--f-display);font-weight:800;font-size:var(--t-hero);
  line-height:.84;text-transform:uppercase;letter-spacing:-.012em;margin:1.4rem 0 0}
.hero__title em{font-style:normal;color:var(--brass);display:block}
/* Kicker inside the H1: the same mono treatment as the .note it replaces above
   the display line, and deliberately the same metrics, so the hero sits where
   it always did. line-height returns to the body 1.65 the old note inherited
   (.hero__title sets .84 for the big type, which would crush a small
   letterspaced line), and the 1.4rem below it reproduces the top margin the
   title used to carry. Same three lines, same positions, new words. */
.hero__kicker{display:block;font-family:var(--f-mono);font-size:var(--t-mono);
  font-weight:500;letter-spacing:.19em;text-transform:uppercase;color:var(--brass);
  line-height:1.65;margin:0 0 1.4rem}
/* The note this replaced sat flush to the top of the column, so the title it
   now lives inside gives up its own top margin to keep the hero unmoved. */
.hero__title--stacked{margin-top:0}
.hero__lead{margin-top:1.7rem;max-width:46ch}
.hero__btns{margin-top:2.2rem}
.hero__specs{margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem;
  padding-top:1.6rem;border-top:1px solid var(--graphite)}
.spec dt{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone-faint);margin-bottom:.35rem}
.spec dd{margin:0;font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:1.5rem;line-height:1}

/* The wipe: graphite line drawing resolving into finished realism. */
.wipe{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--graphite)}
.wipe__layer{position:absolute;inset:0}
.wipe__layer img{width:100%;height:100%;object-fit:cover}
.wipe__draft img{filter:grayscale(1) brightness(1.5) contrast(2.4) invert(1) opacity(.9)}
.wipe__final{clip-path:inset(0 0 0 var(--wipe,60%))}
.wipe__final img{filter:contrast(1.04) saturate(.96)}
.wipe__rule{position:absolute;top:0;bottom:0;left:var(--wipe,60%);width:1px;
  background:var(--brass);box-shadow:0 0 14px 1px var(--brass-glow);z-index:3}
.wipe__tag{position:absolute;bottom:.9rem;z-index:4;font-family:var(--f-mono);
  font-size:var(--t-mono);letter-spacing:.18em;text-transform:uppercase;
  background:color-mix(in srgb,var(--ink) 80%,transparent);padding:.35rem .6rem}
.wipe__tag--l{left:.9rem;color:var(--bone-faint)}
.wipe__tag--r{right:.9rem;color:var(--brass)}

/* --- 12. Bands & callouts ---------------------------------------------- */
.band{background:var(--slate);border-block:1px solid var(--graphite);position:relative;overflow:hidden}
.band--cta{background:linear-gradient(180deg,var(--slate),var(--ink))}
.cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center}
@media (max-width:800px){.cta{grid-template-columns:minmax(0,1fr)}}
.cta__t{font-size:var(--t-h2)}

.callout{border:1px solid var(--graphite);border-left:2px solid var(--brass);
  background:var(--slate);padding:clamp(1.1rem,2vw,1.6rem)}
.callout .note{margin-bottom:.6rem}
.callout p{font-size:var(--t-sm);color:var(--bone-dim)}

/* --- 13. Process (a real sequence, so it gets real numbers) ------------- */
.steps{counter-reset:step;list-style:none;padding:0;margin:0;display:grid;
  gap:clamp(1rem,2vw,1.5rem)}
.step{counter-increment:step;position:relative;padding:1.5rem 0 1.5rem 4.2rem;
  border-top:1px solid var(--graphite);margin:0}
.step::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:1.5rem;
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.16em;color:var(--brass)}
.step h3{font-size:1.22rem;font-family:var(--f-body);font-weight:650;text-transform:none;
  letter-spacing:0;line-height:1.3;margin-bottom:.45rem}
.step p{color:var(--bone-dim);font-size:var(--t-sm);margin:0}

/* --- 14. FAQ (native disclosure — keyboard and SEO safe) ---------------- */
.faq{border-top:1px solid var(--graphite)}
.faq details{border-bottom:1px solid var(--graphite)}
.faq summary{list-style:none;cursor:pointer;padding:1.35rem 2.5rem 1.35rem 0;position:relative;
  font-family:var(--f-body);font-weight:600;font-size:1.06rem;line-height:1.4;color:var(--bone)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:.35rem;top:1.75rem;width:11px;height:11px;
  border-right:1px solid var(--brass);border-bottom:1px solid var(--brass);
  transform:rotate(45deg);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--brass)}
.faq__a{padding:0 2.5rem 1.5rem 0;color:var(--bone-dim);max-width:70ch}
.faq__a p{font-size:var(--t-sm)}

/* --- 15. Reviews -------------------------------------------------------- */
.rev{border:1px solid var(--graphite);background:var(--slate);padding:clamp(1.4rem,2.5vw,2.1rem);
  display:flex;flex-direction:column;gap:1.05rem}
.rev__stars{color:var(--brass);letter-spacing:.18em;font-size:clamp(1.22rem,1.8vw,1.5rem);
  line-height:1;white-space:nowrap}
.rev p{font-size:clamp(1.02rem,1.25vw,1.16rem);line-height:1.7;color:var(--bone-dim);margin:0;flex:1}
.rev__by{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.15em;
  text-transform:uppercase;color:var(--bone-faint);display:flex;flex-direction:column;gap:.3rem}
/* The name carries the weight; the provenance sits under it, quieter — a
   verbatim quote is only worth as much as the attribution beneath it. */
.rev__name{color:var(--bone);font-size:.8rem;letter-spacing:.16em}
.rev__meta{color:var(--bone-faint);letter-spacing:.12em;font-size:.7rem}

/* --- 16. Directory table (the full service list) ------------------------ */
.dir{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:0;border-top:1px solid var(--graphite)}
.dir a,.dir span{display:flex;align-items:center;gap:.7rem;padding:.95rem .4rem;
  border-bottom:1px solid var(--graphite);text-decoration:none;font-size:var(--t-sm);
  color:var(--bone-dim);transition:color .2s,padding-left .25s var(--ease)}
.dir a:hover{color:var(--brass);padding-left:.9rem}
.dir a::before{content:'';width:5px;height:5px;flex:none;background:var(--brass);opacity:.5}
.dir span::before{content:'';width:5px;height:5px;flex:none;border:1px solid var(--graphite-2)}

/* --- 16b. Embedded Square booking calendar ------------------------------ */
/* Square serves a white page, so it is set into the same stone frame the
   portfolio uses rather than dropped onto the dark ground as a bright slab. */
.sqbook{position:relative}
.sqbook__frame{position:relative;background:#fff;border:1px solid var(--graphite);
  box-shadow:inset 0 1px 0 rgba(230,225,215,.06),0 20px 48px rgba(0,0,0,.45);
  padding:clamp(6px,.7vw,10px);overflow:hidden}
.sqbook__frame::before{content:'';position:absolute;inset:clamp(3px,.35vw,5px);z-index:2;
  pointer-events:none;border:1px solid color-mix(in srgb,var(--brass) 30%,transparent)}
.sqbook__frame iframe{display:block;width:100%;border:0;
  height:clamp(760px,88vh,1120px);background:#fff}
@media (max-width:640px){
  /* Phones need the full run of the flow without a nested scrollbar fighting
     the page scroll, so give it more room rather than less. */
  .sqbook__frame iframe{height:clamp(820px,120vh,1400px)}
  .sqbook__frame{padding:4px}
}
.sqbook__out{margin-top:.9rem}

/* --- 16c. Map ----------------------------------------------------------- */
.mapblock{display:grid;gap:clamp(1rem,2vw,1.6rem)}
.mapblock__frame{position:relative;background:var(--slate);border:1px solid var(--graphite);
  padding:clamp(6px,.7vw,10px);
  box-shadow:inset 0 1px 0 rgba(230,225,215,.05),0 18px 44px rgba(0,0,0,.42)}
.mapblock__frame::before{content:'';position:absolute;inset:clamp(3px,.35vw,5px);z-index:3;
  pointer-events:none;border:1px solid color-mix(in srgb,var(--brass) 30%,transparent)}
.mapblock__frame iframe{display:block;width:100%;border:0;background:var(--slate-2);
  height:clamp(300px,42vh,460px);
  /* Google's tiles are bright white; pull them toward the site's palette
     without making the labels unreadable. */
  filter:grayscale(.55) contrast(1.05) brightness(.82) sepia(.18)}
.mapblock--wide .mapblock__frame iframe{height:clamp(340px,52vh,560px)}
.mapblock__meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.75rem)}
.mapblock__meta .note{display:block;margin-bottom:.6rem}
.mapblock__meta p,.mapblock__meta address{color:var(--bone-dim);font-size:var(--t-sm);
  line-height:1.7;margin:0}
.mapblock__meta strong{color:var(--bone)}
@media (max-width:760px){
  .mapblock__meta{grid-template-columns:minmax(0,1fr);gap:1.2rem}
  .mapblock__frame iframe{height:clamp(260px,44vh,380px)}
}
@media (prefers-reduced-motion:no-preference){
  .mapblock__frame iframe{transition:filter .5s var(--ease)}
  .mapblock__frame:hover iframe{filter:grayscale(0) contrast(1) brightness(1) sepia(0)}
}

/* --- 16d. Native booking flow ----------------------------------------- */
/* The one place on the site where the visitor does something irreversible, so
   it is drawn as the title block of a drawing: numbered stages down the side,
   hairline rules, and a specification panel that fills in as they decide. */
.bkg{border:1px solid var(--graphite);background:var(--slate);position:relative}
.bkg::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(90deg,transparent 0 33px,rgba(43,50,59,.28) 33px 34px)}
.bkg>*{position:relative;z-index:2}

.bkg__rail{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;
  border-bottom:1px solid var(--graphite)}
.bkg__railitem{display:flex;align-items:center;gap:.6rem;margin:0;padding:.85rem clamp(.6rem,1.6vw,1.2rem);
  border-right:1px solid var(--graphite);color:var(--bone-faint);min-width:0}
.bkg__railitem:last-child{border-right:0}
.bkg__plate{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.1em;
  border:1px solid var(--graphite-2);padding:.15rem .4rem;flex:none;transition:border-color .3s,color .3s}
.bkg__raillabel{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.16em;
  text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bkg__railitem.is-on{color:var(--bone)}
.bkg__railitem.is-on .bkg__plate{border-color:var(--brass);color:var(--brass)}
.bkg__railitem.is-done{color:var(--bone-dim)}
.bkg__railitem.is-done .bkg__plate{border-color:var(--brass-lo);color:var(--brass-lo)}
@media (max-width:640px){
  /* Four labels will not fit; the numbers still tell you where you are. */
  .bkg__raillabel{display:none}
  .bkg__railitem{justify-content:center;padding:.7rem .4rem}
  .bkg__railitem.is-on .bkg__raillabel{display:inline}
}

.bkg__body{padding:clamp(1.2rem,3vw,2.2rem)}
.bkg__ask{font-family:var(--f-display);font-size:var(--t-h3);line-height:1.05;
  text-transform:uppercase;letter-spacing:.01em;margin:0 0 1.3rem}
.bkg__pane[hidden]{display:none}

.bkg__opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.8rem}
.bkg__opt{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;text-align:left;
  padding:1.05rem 1.15rem;background:var(--ink);border:1px solid var(--graphite);color:var(--bone);
  cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease)}
.bkg__opt:hover{border-color:var(--brass)}
/* display:flex above outbids the UA stylesheet's [hidden], so say it here. */
.bkg__opt[hidden]{display:none}
.bkg__opt:focus-visible{outline:1px solid var(--focus);outline-offset:2px}
.bkg__opt.is-sel{border-color:var(--brass);background:var(--brass-glow)}
.bkg__optname{font-family:var(--f-display);font-size:1.28rem;text-transform:uppercase;line-height:1.05}
.bkg__optsub{font-size:var(--t-sm);color:var(--bone-dim)}
.bkg__optmeta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.45rem;
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--brass)}
.bkg__face{width:52px;height:52px;object-fit:cover;filter:grayscale(1) contrast(1.05);
  border:1px solid var(--graphite-2);margin-bottom:.35rem}
.bkg__opt.is-sel .bkg__face{filter:none;border-color:var(--brass)}

/* Days run as a rail because a month grid promises availability we do not
   have — Square only answers 30 days out. */
.bkg__days{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.7rem;
  scrollbar-width:thin;scroll-snap-type:x proximity}
.bkg__day{flex:none;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:.1rem;
  min-width:72px;padding:.65rem .5rem;background:var(--ink);border:1px solid var(--graphite);
  color:var(--bone-dim);cursor:pointer;transition:border-color .2s,color .2s}
.bkg__day:hover{border-color:var(--brass-lo);color:var(--bone)}
.bkg__day.is-sel{border-color:var(--brass);color:var(--bone);background:var(--brass-glow)}
.bkg__dayname{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}
.bkg__daynum{font-family:var(--f-display);font-size:1.5rem;line-height:1}
.bkg__daymon{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-faint)}

.bkg__slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:.5rem;margin-top:1.2rem}
.bkg__slot{display:flex;flex-direction:column;gap:.12rem;align-items:center;padding:.7rem .4rem;
  background:var(--ink);border:1px solid var(--graphite);color:var(--bone);cursor:pointer;
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.1em;text-transform:uppercase;
  transition:border-color .2s,background .2s}
.bkg__slot:hover{border-color:var(--brass)}
.bkg__slot.is-sel{border-color:var(--brass);background:var(--brass-glow);color:var(--brass)}
.bkg__slotwho{font-size:.62rem;letter-spacing:.1em;color:var(--bone-faint);text-transform:none}

/* The specification panel: what has been decided, in drawing-sheet form. */
.bkg__block{border:1px solid var(--graphite);border-left:2px solid var(--brass);
  background:var(--ink);margin-bottom:1.6rem}
.bkg__row{display:grid;grid-template-columns:minmax(90px,26%) 1fr;gap:1rem;
  padding:.7rem clamp(.8rem,1.6vw,1.15rem);border-bottom:1px solid var(--graphite)}
.bkg__row:last-child{border-bottom:0}
.bkg__rowk{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-faint)}
.bkg__rowv{font-size:var(--t-sm);color:var(--bone)}
.bkg__rowv strong{font-family:var(--f-display);font-size:1.15rem;text-transform:uppercase;font-weight:600}

.bkg__nav{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem;align-items:center}
.bkg__nav .js-bkg-submit{margin-left:auto}
@media (max-width:520px){.bkg__nav .js-bkg-submit{margin-left:0;width:100%;justify-content:center}}
.bkg__msg{margin-top:1rem;font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--bone-dim);min-height:1.2em}
.bkg__msg.is-err{color:var(--ember)}
.bkg__fine{font-size:.78rem;color:var(--bone-faint);margin:0}
.bkg__foot{border-top:1px solid var(--graphite);margin:0;
  padding:1rem clamp(1.2rem,3vw,2.2rem);font-size:.82rem;color:var(--bone-faint)}
.bkg__foot a{color:var(--bone-dim)}
.bkg__foot a:hover{color:var(--brass)}

.bkg__pane--done{text-align:left}
.bkg__done .bkg__ask{color:var(--brass)}
.bkg__wait{display:inline-block;width:9px;height:9px;border:1px solid var(--brass);
  border-top-color:transparent;border-radius:50%;animation:bkgspin .7s linear infinite;
  margin-right:.6rem;vertical-align:-1px}
@keyframes bkgspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.bkg__wait{animation:none}}

/* --- 16f. Service marks ------------------------------------------------- */
/* A large brass diagram filling the card, with the text sitting over it. The
   mark is the drawing; the words are the annotation on top of it. Anchored
   bottom-right and allowed to run off the sheet edge, the way a detail does
   on a real drawing. */
.card--svc{overflow:hidden;min-height:clamp(232px,25vw,290px);display:flex}
.card--svc .card__body{position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:flex-start;width:100%}
.card--svc .card__d{flex:1}
.svcmark{position:absolute;right:-9%;bottom:-11%;z-index:0;pointer-events:none;
  width:clamp(150px,64%,260px);height:auto;color:var(--brass);opacity:.3;
  /* The stroke scales with the box, so it is thinned here to stay a drawn
     line rather than becoming a slab at this size. */
  stroke-width:.95;
  transition:opacity .4s var(--ease),transform .55s var(--ease)}
.card--svc:hover .svcmark,.card--svc:focus-visible .svcmark{opacity:.5;transform:scale(1.07) rotate(-3deg)}
@media (max-width:620px){
  .svcmark{width:clamp(140px,52%,210px);right:-6%;bottom:-9%}
  .card--svc{min-height:200px}
}
@media (prefers-reduced-motion:reduce){
  .svcmark{transition:opacity .3s}
  .card--svc:hover .svcmark{transform:none}
}

/* --- 16g. Film plate ---------------------------------------------------- */
/* The video sits in a drawn frame: hairline border, brass inner rule, and
   corner registration ticks of the kind you set a drawing out with. The
   caption below carries the aspect ratio as a dimension note. */
.filmplate{position:relative;margin:0;padding:clamp(10px,1.1vw,16px);
  background:var(--slate);border:1px solid var(--graphite);
  box-shadow:inset 0 1px 0 rgba(230,225,215,.05),0 22px 52px rgba(0,0,0,.45)}
.filmplate::before{content:'';position:absolute;inset:clamp(5px,.55vw,8px);z-index:3;
  pointer-events:none;border:1px solid color-mix(in srgb,var(--brass) 32%,transparent)}

/* Registration ticks, drawn as two rules meeting at each corner. */
.filmplate__tick{position:absolute;width:16px;height:16px;z-index:4;pointer-events:none}
.filmplate__tick::before,.filmplate__tick::after{content:'';position:absolute;background:var(--brass)}
.filmplate__tick::before{width:100%;height:1px;top:0}
.filmplate__tick::after{height:100%;width:1px;left:0}
.filmplate__tick--tl{top:-1px;left:-1px}
.filmplate__tick--tr{top:-1px;right:-1px;transform:scaleX(-1)}
.filmplate__tick--bl{bottom:-1px;left:-1px;transform:scaleY(-1)}
.filmplate__tick--br{bottom:-1px;right:-1px;transform:scale(-1)}

.filmplate__stage{position:relative;aspect-ratio:16/9;background:var(--ink);overflow:hidden}
.filmplate__stage iframe,.filmplate__media{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.filmplate__media{object-fit:cover}

/* The click-to-play facade. Nothing from YouTube loads until this is pressed. */
.filmplate__play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;
  background:var(--ink);cursor:pointer;display:grid;place-items:center;overflow:hidden}
.filmplate__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.5) contrast(1.05) brightness(.62);
  transition:filter .5s var(--ease),transform .8s var(--ease)}
.filmplate__play:hover .filmplate__poster{filter:grayscale(.15) brightness(.75);transform:scale(1.03)}
.filmplate__btn{position:relative;z-index:2;color:var(--bone);display:block;
  width:clamp(58px,7vw,78px);transition:color .3s var(--ease),transform .3s var(--ease)}
.filmplate__btn svg{width:100%;height:auto;display:block;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.65))}
.filmplate__play:hover .filmplate__btn{color:var(--brass);transform:scale(1.06)}
.filmplate__play:focus-visible{outline:2px solid var(--focus);outline-offset:-4px}
.filmplate__cue{position:absolute;z-index:2;bottom:clamp(.8rem,2vw,1.4rem);
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.22em;
  text-transform:uppercase;color:var(--bone-dim)}

/* Still-only mode: the plate holds a photograph and nothing plays. No cursor
   change, no hover lift — it must not look like a broken play button. */
.filmplate--still .filmplate__stage{cursor:default}
.filmplate__poster--only{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.35) contrast(1.05) brightness(.8)}

.filmplate__cap{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;
  margin-top:.85rem;font-family:var(--f-mono);font-size:var(--t-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone-faint)}
.filmplate__dim{border:1px solid var(--graphite-2);padding:.15rem .5rem;color:var(--brass)}
.filmplate__cap a{color:var(--bone-dim);text-decoration:none;margin-left:auto;
  display:inline-flex;align-items:center;gap:.5rem}
.filmplate__cap a:hover{color:var(--brass)}
@media (max-width:600px){
  .filmplate__cap a{margin-left:0}
  .filmplate__tick{width:11px;height:11px}
}
@media (prefers-reduced-motion:reduce){
  .filmplate__poster,.filmplate__btn{transition:none}
  .filmplate__play:hover .filmplate__poster{transform:none}
}

/* --- 16e. Instagram wall ------------------------------------------------ */
/* Square tiles on a hairline grid, like contact prints pinned to the sheet.
   The images arrive from Instagram in every colour under the sun, so they are
   graded back toward the site's palette and only come up to full colour on
   hover — the page stays one document rather than a pinboard of strangers. */
.igwall{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  grid-template-columns:repeat(6,minmax(0,1fr));
  background:var(--graphite);border:1px solid var(--graphite)}
.igwall__cell{margin:0;position:relative;aspect-ratio:1;overflow:hidden;background:var(--ink)}
.igwall__link{display:block;width:100%;height:100%;position:relative}
.igwall__link img{display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.72) contrast(1.06) brightness(.86);
  transform:scale(1.01);transition:filter .45s var(--ease),transform .45s var(--ease)}
.igwall__link:hover img,.igwall__link:focus-visible img{filter:none;transform:scale(1.05)}
.igwall__link:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
/* A plate number in the corner of each cell, drawn only on hover so the grid
   stays quiet until someone reaches for it. */
.igwall__cell::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  border:1px solid transparent;transition:border-color .35s var(--ease)}
.igwall__cell:hover::after{border-color:color-mix(in srgb,var(--brass) 55%,transparent)}
.igwall__play{position:absolute;right:.5rem;bottom:.5rem;width:0;height:0;z-index:3;
  border-style:solid;border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent var(--bone);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
@media (max-width:1100px){.igwall{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:600px){.igwall{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){
  .igwall__link img{transition:none}
  .igwall__link:hover img{transform:none}
}

/* --- 16h. Promo bar ----------------------------------------------------- */
/* Brass on ink, one hairline under it. The track holds four copies of the
   message and travels exactly one copy's width before resetting, which is
   what makes the loop seamless rather than a slide-and-snap. */
.promobar{position:relative;z-index:60;background:var(--blueprint);
  border-bottom:1px solid var(--blueprint-lo);
  display:flex;align-items:center}
.promobar[hidden]{display:none}
.promobar__hit{display:block;flex:1;min-width:0;text-decoration:none}
.promobar__viewport{overflow:hidden;flex:1;min-width:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.promobar__track{display:flex;width:max-content;
  animation:barroll var(--bar-speed,32s) linear infinite}
.promobar__item{display:block;padding-block:.66rem;padding-inline:2.6rem;white-space:nowrap;
  font-family:var(--f-mono);font-size:var(--t-mono);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#fff}
/* One copy's width is 25% of a four-copy track. */
@keyframes barroll{from{transform:translateX(0)}to{transform:translateX(-25%)}}
.promobar:hover .promobar__track,.promobar:focus-within .promobar__track{animation-play-state:paused}
.promobar__x{flex:none;background:none;border:0;cursor:pointer;line-height:1;
  padding:.5rem .9rem;font-size:1.15rem;color:rgba(255,255,255,.62)}
.promobar__x:hover{color:#fff}
@media (prefers-reduced-motion:reduce){
  /* Hold still and centre the single visible copy rather than scrolling. */
  .promobar__track{animation:none;width:100%;justify-content:center}
  .promobar__item+.promobar__item{display:none}
  .promobar__viewport{-webkit-mask-image:none;mask-image:none}
}

/* --- 16i. Offer ---------------------------------------------------------- */
.offer{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1.2rem}
.offer[hidden]{display:none}
.offer__scrim{position:absolute;inset:0;background:rgba(6,8,10,.78);
  backdrop-filter:blur(3px);animation:offerfade .35s var(--ease-out) both}
.offer__panel{position:relative;z-index:1;width:min(640px,100%);max-height:92vh;overflow:auto;
  background:var(--slate);border:1px solid var(--graphite);
  border-top:2px solid var(--brass);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:offerin .4s var(--ease-out) both}
.offer__x{position:absolute;top:.35rem;right:.55rem;z-index:2;background:none;border:0;
  color:var(--bone-dim);font-size:1.5rem;line-height:1;cursor:pointer;padding:.35rem .5rem}
.offer__x:hover{color:var(--brass)}
.offer__art{position:relative;aspect-ratio:16/7;overflow:hidden;background:var(--ink);
  border-bottom:1px solid var(--graphite)}
.offer__art img{width:100%;height:100%;object-fit:cover;display:block}
.offer__body{padding:clamp(1.4rem,3.5vw,2.4rem)}
.offer__t{font-family:var(--f-display);font-size:clamp(1.9rem,4.5vw,2.9rem);line-height:1.02;
  text-transform:uppercase;margin:.7rem 0 0}
.offer__d{color:var(--bone-dim);font-size:var(--t-sm);margin:.9rem 0 0;line-height:1.65}
.offer__form{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.5rem}
.offer__form .input{flex:1;min-width:200px}
.offer__fine{font-size:.76rem;color:var(--bone-faint);margin:.9rem 0 0}
.offer__no{display:block;margin-top:1.1rem;background:none;border:0;cursor:pointer;padding:0;
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-faint);text-decoration:underline}
.offer__no:hover{color:var(--bone-dim)}
@keyframes offerfade{from{opacity:0}to{opacity:1}}
@keyframes offerin{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .offer__scrim,.offer__panel{animation:none}
}

/* --- 16j. Cookie notice -------------------------------------------------- */
/* A notice along the foot of the screen, not a gate across the page. Both
   buttons are the same size and equally reachable — a decline buried behind
   a settings panel is the pattern regulators actually pursue. */
.ckie{position:fixed;left:0;right:0;bottom:0;z-index:180;
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;
  padding:clamp(.9rem,2vw,1.15rem) clamp(1rem,4vw,2.4rem);
  background:color-mix(in srgb,var(--ink) 96%,transparent);
  border-top:1px solid var(--graphite);
  box-shadow:0 -14px 40px rgba(0,0,0,.45);
  animation:ckiein .45s var(--ease-out) both}
.ckie[hidden]{display:none}
.ckie__t{margin:0;flex:1;min-width:260px;font-size:.86rem;line-height:1.6;color:var(--bone-dim)}
.ckie__t a{color:var(--bone);text-decoration:underline;text-underline-offset:3px}
.ckie__t a:hover{color:var(--brass)}
.ckie__btns{display:flex;gap:.6rem;flex-wrap:wrap}
@keyframes ckiein{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ckie{animation:none}}
@media (max-width:560px){
  .ckie__btns{width:100%}
  .ckie__btns .btn{flex:1;justify-content:center}
}

/* --- 16k. Collapsible service rows -------------------------------------- */
/* Each group is a drawer on a hairline rule, with its item count set as a
   plate number on the right. Native <details>, so it is keyboard-operable and
   the links stay in the DOM when shut — collapsing must not hide them from
   indexing. */
.svcrow{border-top:1px solid var(--graphite)}
.svcrow:last-of-type{border-bottom:1px solid var(--graphite)}
.svcrow__head{cursor:pointer;list-style:none;display:flex;align-items:center;gap:1rem;
  padding-block:clamp(.95rem,1.8vw,1.3rem)}
.svcrow__head::-webkit-details-marker{display:none}
.svcrow__head .note{flex:1;min-width:0;color:var(--bone);transition:color .25s var(--ease)}
.svcrow:hover .svcrow__head .note,.svcrow[open] .svcrow__head .note{color:var(--brass)}
.svcrow__head:focus-visible{outline:1px solid var(--focus);outline-offset:3px}
.svcrow__n{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.14em;
  color:var(--bone-faint);border:1px solid var(--graphite-2);padding:.1rem .45rem}
/* The chevron, drawn rather than a glyph, so it matches the hairline weight. */
.svcrow__head::after{content:'';width:8px;height:8px;flex:none;
  border-right:1px solid var(--brass);border-bottom:1px solid var(--brass);
  transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--ease)}
.svcrow[open] .svcrow__head::after{transform:rotate(-135deg) translateY(-2px)}
.svcrow__body{padding-bottom:clamp(1.1rem,2.2vw,1.6rem)}
@media (prefers-reduced-motion:reduce){
  .svcrow__head::after,.svcrow__head .note{transition:none}
}

/* --- 17. Forms & email capture ----------------------------------------- */
.field{display:block;margin-bottom:1.05rem}
.field>span{display:block;font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-faint);margin-bottom:.5rem}
.input,.field input,.field textarea,.field select{width:100%;background:var(--ink);
  border:1px solid var(--graphite);color:var(--bone);padding:.85rem 1rem;font-size:var(--t-sm);
  transition:border-color .2s}
.input:focus,.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--brass);outline:none}
.field textarea{min-height:140px;resize:vertical}
.ga-card-field{background:var(--ink);border:1px solid var(--graphite);
  padding:.45rem .7rem;min-height:54px}
.ga-card-field:focus-within{border-color:var(--brass)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--brass) 50%),
  linear-gradient(135deg,var(--brass) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.4rem}

.capture{background:var(--slate);border:1px solid var(--graphite);
  padding:clamp(1.5rem,3.5vw,2.75rem);position:relative;overflow:hidden}
.capture::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 33px,rgba(43,50,59,.4) 33px 34px)}
.capture>*{position:relative}
.capture__t{font-size:var(--t-h3);margin-bottom:.7rem}
.capture__form{display:flex;gap:.6rem;margin-top:1.4rem;flex-wrap:wrap}
.capture__form .input{flex:1;min-width:220px}
.capture__fine{margin-top:.9rem;font-size:.78rem;color:var(--bone-faint)}
.form-msg{margin-top:.9rem;font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.12em;
  text-transform:uppercase}
.form-msg.is-ok{color:var(--brass)}
.form-msg.is-err{color:var(--ember)}

/* --- 18. Breadcrumbs ---------------------------------------------------- */
.crumbs{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-faint);padding-block:1.4rem 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0}
.crumbs li{margin:0;display:flex;gap:.5rem;align-items:center}
.crumbs li+li::before{content:'/';color:var(--graphite-2)}
.crumbs a{text-decoration:none;color:var(--bone-faint)}
.crumbs a:hover{color:var(--brass)}

/* --- 19. Blog ----------------------------------------------------------- */
.post-card{display:grid;gap:1rem;text-decoration:none}
.post-card__meta{display:flex;gap:1rem;flex-wrap:wrap}
.post-card__t{font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:.95}
.post-card:hover .post-card__t{color:var(--brass)}
.post-card__x{color:var(--bone-dim);font-size:var(--t-sm);margin:0}
.entry-hero{padding-block:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,3vw,2.5rem)}
.entry-meta{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1.6rem;padding-top:1.2rem;
  border-top:1px solid var(--graphite)}
.pager{display:flex;justify-content:space-between;gap:1rem;padding-top:2.5rem;
  border-top:1px solid var(--graphite);margin-top:3rem}
.pagination{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:3rem;padding-top:2rem;
  border-top:1px solid var(--graphite)}
.pagination .page-numbers{display:grid;place-items:center;min-width:42px;height:42px;
  border:1px solid var(--graphite);font-family:var(--f-mono);font-size:var(--t-mono);
  text-decoration:none;color:var(--bone-dim)}
.pagination .page-numbers:hover{border-color:var(--brass);color:var(--brass)}
.pagination .current{background:var(--brass);border-color:var(--brass);color:var(--ink)}

/* --- 20. Footer --------------------------------------------------------- */
.ftr{border-top:1px solid var(--graphite);background:var(--slate);margin-top:0}
.ftr__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));
  gap:clamp(1.75rem,3.2vw,2.8rem);padding-block:clamp(3rem,6vw,5rem)}
@media (max-width:1180px){.ftr__grid{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}}
@media (max-width:960px){.ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ftr__grid{grid-template-columns:minmax(0,1fr)}}
.ftr__open{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);margin:1rem 0 0}

/* The twelve service-area links are for crawlers and for the handful of
   people who want them — collapsed by default so they stop dominating the
   foot of every page. <details> rather than JS: it is keyboard-operable and
   findable by in-page search for free, and the links stay in the DOM whether
   it is open or shut, so nothing is lost to indexing. */
.ftr__areas{border-top:1px solid var(--graphite);padding-block:1.35rem}
.ftr__areas summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.7rem}
.ftr__areas summary::-webkit-details-marker{display:none}
.ftr__areas summary::after{content:'';width:7px;height:7px;flex:none;
  border-right:1px solid var(--brass);border-bottom:1px solid var(--brass);
  transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--ease)}
.ftr__areas[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.ftr__areas summary:hover .note{color:var(--brass)}
.ftr__areas summary:focus-visible{outline:1px solid var(--focus);outline-offset:3px}
.ftr__areas .dir{padding-bottom:1.4rem}

/* Inline in the base row, alongside the copyright — the credit belongs on
   the same line as the notices, not as a strip of its own underneath. */
.ftr__by{font-size:inherit;letter-spacing:inherit;color:var(--bone-dim);
  text-decoration:none;white-space:nowrap}
.ftr__by:hover{color:var(--brass)}
.ftr h4{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.19em;
  text-transform:uppercase;color:var(--brass);margin-bottom:1.1rem;font-weight:500}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{margin-bottom:.6rem}
.ftr a{text-decoration:none;color:var(--bone-dim);font-size:var(--t-sm);transition:color .2s}
.ftr a:hover{color:var(--brass)}
.ftr__base{border-top:1px solid var(--graphite);padding-block:1.6rem;display:flex;
  flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
.ftr__nap{font-size:var(--t-sm);color:var(--bone-dim);line-height:1.75}
.ftr__nap strong{color:var(--bone);font-weight:600}
.social{display:flex;gap:.6rem;margin-top:1.2rem}
.social a{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--graphite)}
.social a:hover{border-color:var(--brass);color:var(--brass)}
.social svg{width:16px;height:16px}

/* --- 21. Assistant ------------------------------------------------------ */
.bot-open{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);
  display:flex;align-items:center;gap:.6rem;padding:.85rem 1.25rem;background:var(--slate);
  border:1px solid var(--brass-lo);color:var(--bone);cursor:pointer;font-family:var(--f-mono);
  font-size:var(--t-mono);letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 16px 44px rgba(0,0,0,.55);transition:border-color .25s,transform .25s var(--ease)}
.bot-open:hover{border-color:var(--brass);transform:translateY(-2px)}
.bot-open svg{width:15px;height:15px;color:var(--brass)}
.bot{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);
  width:min(390px,calc(100% - 2rem));
  height:min(560px,calc(100vh - 4rem));height:min(560px,calc(100dvh - 4rem));
  background:var(--ink);border:1px solid var(--graphite);display:none;flex-direction:column;
  box-shadow:0 30px 80px rgba(0,0,0,.7)}
.bot.is-open{display:flex}
.bot__hd{display:flex;align-items:center;gap:.75rem;padding:1rem 1.1rem;
  border-bottom:1px solid var(--graphite);background:var(--slate)}
.bot__hd b{font-family:var(--f-display);text-transform:uppercase;font-size:1rem;
  font-weight:700;line-height:1}
.bot__hd small{display:block;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;
  color:var(--bone-faint);text-transform:uppercase;margin-top:.2em}
.bot__x{margin-left:auto;background:none;border:0;color:var(--bone-dim);cursor:pointer;
  font-size:1.3rem;line-height:1;padding:.2rem .4rem}
.bot__x:hover{color:var(--ember)}
.bot__log{flex:1;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:.85rem;
  scrollbar-width:thin;scrollbar-color:var(--graphite) transparent}
.msg{max-width:88%;padding:.75rem .95rem;font-size:.875rem;line-height:1.55;border:1px solid var(--graphite)}
.msg--bot{background:var(--slate);align-self:flex-start;color:var(--bone-dim)}
.msg--bot strong{color:var(--bone)}
.msg--bot a{color:var(--brass)}
.msg--me{background:transparent;border-color:var(--brass-lo);align-self:flex-end;color:var(--bone)}
.msg--typing{display:flex;gap:.3rem;align-items:center}
.msg--typing i{width:5px;height:5px;background:var(--brass);border-radius:50%;
  animation:blip 1.1s infinite ease-in-out}
.msg--typing i:nth-child(2){animation-delay:.16s}
.msg--typing i:nth-child(3){animation-delay:.32s}
@keyframes blip{0%,60%,100%{opacity:.25}30%{opacity:1}}
.bot__chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1.1rem .8rem}
.chip{background:none;border:1px solid var(--graphite);color:var(--bone-dim);cursor:pointer;
  padding:.45rem .7rem;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;transition:border-color .2s,color .2s}
.chip:hover{border-color:var(--brass);color:var(--brass)}
.bot__form{display:flex;gap:.5rem;padding:.85rem 1.1rem;border-top:1px solid var(--graphite);
  background:var(--slate)}
.bot__form input{flex:1;background:var(--ink);border:1px solid var(--graphite);color:var(--bone);
  padding:.7rem .85rem;font-size:.85rem}
.bot__form input:focus{border-color:var(--brass);outline:none}
.bot__form button{background:var(--brass);border:0;color:var(--ink);padding:0 1rem;cursor:pointer;
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.12em;text-transform:uppercase}
.bot__form button:hover{background:var(--bone)}

/* --- 22. Scroll reveal (opt-in, honours reduced motion) ----------------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}

/* --- 23. Utilities ------------------------------------------------------ */
.mt-0{margin-top:0}.mt-1{margin-top:.9rem}.mt-2{margin-top:1.6rem}.mt-3{margin-top:2.4rem}
.mt-4{margin-top:3.2rem}.mb-2{margin-bottom:1.6rem}.mb-3{margin-bottom:2.4rem}
.tc{text-align:center}.rel{position:relative}
.hr{height:1px;background:var(--graphite);border:0;margin:0}
.wrap-narrow{max-width:78ch}