/* ==========================================================================
   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;
  --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(3.6rem,11vw,10rem);
  --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}
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)}
.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: Kemetic forms in silhouette -------------------------- */
/* Fixed behind everything. Mass and shadow rather than line — the forms are
   lit faintly from above and dissolve upward, so nothing in it ever resolves
   into an edge. The gradients do the feathering; opacity here sets how much
   of it surfaces at all. */
.backdrop{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:0; pointer-events:none;
  color:var(--brass);
  opacity:.5;
}
/* 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){
  /* Narrow viewports crop hard into the figure, so pull it back further. */
  .backdrop{opacity:.34}
}
@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;z-index:80;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;
  opacity:0;visibility:hidden;transition:opacity .22s var(--ease),transform .22s var(--ease);
  box-shadow:0 24px 60px rgba(0,0,0,.6)}
.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,.hdr__cta{display:none}
  .burger{display:flex}
  .nav.is-open{display:flex;position:fixed;inset:76px 0 0;background:var(--ink);
    flex-direction:column;align-items:stretch;gap:0;padding:1.5rem var(--gutter);
    overflow-y:auto;border-top:1px solid var(--graphite)}
  .nav.is-open a{padding:1rem 0;border-bottom:1px solid var(--graphite);font-size:.82rem}
  .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 0 1rem}
}

/* --- 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)}
/* brass hairline, inset off the edge so it reads as inlay not border */
.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)}
/* the light falling across the stone */
.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)}

/* registration ticks — the drafting language, at 1/3 length on each corner */
.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}

/* caption plate beneath the work */
.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 & gray 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}
.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.2rem,2.2vw,1.8rem);
  display:flex;flex-direction:column;gap:.9rem}
.rev__stars{color:var(--brass);letter-spacing:.14em;font-size:.82rem}
.rev p{font-size:var(--t-sm);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)}

/* --- 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)}

/* --- 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{border-color:var(--brass);outline:none}
.field textarea{min-height:140px;resize:vertical}

.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.4fr) repeat(3,minmax(0,1fr));
  gap:clamp(1.75rem,4vw,3.5rem);padding-block:clamp(3rem,6vw,5rem)}
@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 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);z-index:90;
  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);z-index:95;
  width:min(390px,calc(100vw - 2rem));height:min(560px,calc(100vh - 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}