/* ============================================================================
   BASE — identical on every Pittsburgh IT build. The visitor never sees any of it.
   Token NAMES are fixed; only the VALUES change per client. Everything below the
   token block is structural: the accessibility floor, the form skeleton, tap
   targets, the motion contract. Roughly 20 lines get rewritten per client and
   several hundred lines of quality are inherited.
   MOBILE FIRST — every rule here is the small-screen rule. Breakpoints add.
   ========================================================================== */
:root{
  --surface:#0E0D0C;
  --surface-2:#171512;
  --band:#E9E2D6;
  --band-ink:#14120F;
  --band-ink-2:#4E483E;
  --accent-on-band:#7A4A18;
  --ink:#F0EAE0;
  --ink-2:#B8AE9E;
  --ink-3:#948B7C;
  --accent:#E0913C;
  --accent-2:#F2B571;
  --accent-ink:#17120A;
  --line:#2E2A25;
  --maxw:1180px;
  --gutter:22px;
  --radius:3px;
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--surface);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;line-height:1.08;
  font-weight:600;letter-spacing:-.024em}
p{margin:0 0 1em}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}

/* --- container ------------------------------------------------------------ */
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
@media(min-width:760px){:root{--gutter:34px}}
@media(min-width:1180px){:root{--gutter:48px}}

/* --- accessibility floor -------------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);
  color:var(--accent-ink);padding:12px 18px;border-radius:0 0 var(--radius) 0;
  font-weight:700;text-decoration:none}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
/* honeypot: OFF-SCREEN, never display:none — a hidden field some bots skip,
   and a screen reader is told to leave it alone. */
.hp{position:absolute!important;left:-9999px;top:-9999px;width:1px;height:1px;
  opacity:0;pointer-events:none}

/* --- tap targets ---------------------------------------------------------- */
a,button,input,select,textarea,summary{font-family:inherit}
.btn,button,input[type=submit]{min-height:48px}
nav a,footer a{display:inline-block;min-height:24px}

/* --- button skeleton (templates restyle the skin, not the mechanics) ------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:14px 26px;border:1px solid transparent;border-radius:var(--radius);
  font-weight:650;font-size:16px;line-height:1.1;text-decoration:none;cursor:pointer;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}

/* --- form skeleton -------------------------------------------------------- */
.form{display:grid;gap:16px}
.field{display:grid;gap:7px}
.field label{font-size:12.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-2)}
.field input,.field select,.field textarea{
  width:100%;min-height:50px;padding:13px 15px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);color:var(--ink);
  font-size:16px;/* 16px stops iOS zooming the page on focus */
  font-family:inherit;transition:border-color .18s ease,box-shadow .18s ease}
.field textarea{min-height:140px;resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(224,145,60,.26)}
.field ::placeholder{color:var(--ink-3);opacity:1}
.frow{display:grid;gap:16px}
@media(min-width:680px){.frow{grid-template-columns:1fr 1fr}}
.thanks{display:none;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;background:var(--surface-2)}
.thanks.show{display:block}
.thanks h3{font-size:24px;margin-bottom:10px}
.formerror{color:#F2B571;font-size:15px;font-weight:600;margin-top:10px}

/* --- MOTION CONTRACT ------------------------------------------------------
   Nothing starts hidden unless JavaScript has already run. The `js` class is set
   by an inline <head> script, and ONLY when prefers-reduced-motion is not set.
   No JS, blocked JS, old browser, or reduced motion => the page is simply visible.
   This is the inverse of how most sites do it, and it is why a script failure
   here cannot produce a blank page on a lead-generating site. */
html.js .reveal{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
html.js .reveal.in{opacity:1;transform:none}
html.js .reveal.d1{transition-delay:.08s}
html.js .reveal.d2{transition-delay:.16s}
html.js .reveal.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
  html.js .reveal,html.js .reveal.in{opacity:1!important;transform:none!important;transition:none!important}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}

/* --- nav skeleton --------------------------------------------------------- */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .25s ease,box-shadow .25s ease,border-color .25s ease}
.nav-inner{display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:70px}
.navtoggle{display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;margin-right:-10px;background:none;border:0;
  color:inherit;cursor:pointer}
@media(min-width:940px){.navtoggle{display:none}}
.nav-links{display:none}
.nav-links.open{display:flex}
.nav-links{gap:0}
/* Desktop nav reset. Deliberately scoped to #nav so its specificity (1,1,0) beats any
   later `.nav-links{position:absolute…}` a template writes for its mobile drawer —
   equal specificity later in the file wins over a media query, which silently left the
   drawer stacked at the left edge on six of seven templates before this was scoped.
   It sets ONLY the structural properties that must not leak from mobile to desktop;
   gap, colour and type stay the template's business. */
@media(min-width:940px){
  #nav .nav-links,#nav .nav-links.open{display:flex;position:static;inset:auto;
    flex-direction:row;align-items:center;padding:0;margin:0;border:0;background:none;
    width:auto;height:auto;min-height:0;max-height:none;box-shadow:none;transform:none;
    visibility:visible;opacity:1;overflow:visible;
    gap:var(--nav-gap,32px)}
}
html.menu-open,html.menu-open body{overflow:hidden}

/* --- footer skeleton ------------------------------------------------------ */
footer a{text-decoration:none}
.credit{font-size:13.5px}
.credit a{text-decoration:underline;text-underline-offset:3px}

/* --- button rows ----------------------------------------------------------
   On a phone two CTAs sitting side by side at different intrinsic widths look
   accidental, and neither is a comfortable thumb target. They go full width until
   there is room for a row. Scoped as `.btnrow > .btn` (0,2,0) so a template's own
   `.btn{}` rule later in the file cannot silently undo it — the same cascade trap
   that left the desktop nav stacked. */
.btnrow{display:flex;flex-wrap:wrap;gap:12px}
.btnrow > .btn{flex:1 1 100%}
@media(min-width:560px){.btnrow > .btn{flex:0 0 auto}}

/* --- long-string guard ----------------------------------------------------
   A client email address or a compound word set in a heavy display face at
   20px uppercase does not wrap, and pushes a 390px page sideways. Found on the
   Ironworks contact page: dispatch@vantagemechanical.com forced the document to
   462px. Plumbing, so every template inherits the fix. */
/* Headings are deliberately NOT in this guard. break-word on a display heading
   shatters a word mid-syllable the moment its container is narrower than the word —
   it turned "Everything we make," into "Everyth / ing we / make," on Marquee. A
   heading that does not fit is a LAYOUT bug; fix the column, do not hyphenate it. */
h1,h2,h3,h4{overflow-wrap:normal;word-break:normal}
a[href^="mailto:"],a[href^="tel:"]{overflow-wrap:anywhere}
.crow span,.crow b,.cinfo span,address{overflow-wrap:anywhere}

/* --- utility -------------------------------------------------------------- */
.sec{padding:64px 0}
@media(min-width:760px){.sec{padding:96px 0}}
@media(min-width:1180px){.sec{padding:124px 0}}
.eyebrow{font-size:12px;font-weight:750;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0 0 14px}
.lead{font-size:19px;line-height:1.6;color:var(--ink-2)}
@media(min-width:760px){.lead{font-size:21px}}


/* ============================================================================
   NIGHTWORK — a room after close with one lamp still on.

   ONE LIGHT, DECLARED ONCE. Everything below the token block derives its
   highlight, its shadow, its gradient angle and its falloff from four numbers:
   --dir-x, --dir-y, --throw and --hair. Ten different component types read the
   SAME composed values, so the page cannot drift out of one light by accident.
   Set --dir-x:-1 and --dir-y:-1 and every surface on the page relights from the
   bottom right in one edit. That is the test that this is a system and not ten
   hand-tuned box-shadows.

   MOBILE FIRST. Every rule here is the phone rule; breakpoints only add.
   ========================================================================== */

:root{
  /* -- THE LIGHT ---------------------------------------------------------- */
  --dir-x:1;                    /* direction light TRAVELS, x (+ = to the right) */
  --dir-y:1;                    /* direction light TRAVELS, y (+ = downward)     */
  --throw:14px;                 /* how far a surface throws its shadow           */
  --hair:1px;                   /* the width of the lit rim                      */

  --sx:calc(var(--throw) * var(--dir-x));
  --sy:calc(var(--throw) * var(--dir-y));
  --hx:calc(var(--hair) * var(--dir-x));
  --hy:calc(var(--hair) * var(--dir-y));
  --rake-deg:135deg;            /* the same vector, written for linear-gradient  */
  --lamp-x:-6%;                 /* where the source sits, for radial falloff     */
  --lamp-y:-18%;

  --lit:rgba(255,239,216,.15);          /* the rim the lamp catches   */
  --lit-2:rgba(255,239,216,.055);       /* the sheen across a surface */
  --shade:rgba(0,0,0,.60);              /* the shadow it throws       */
  --shade-edge:rgba(0,0,0,.42);         /* the far rim, turned away   */

  /* -- COMPOSED, AND READ BY EVERY COMPONENT ------------------------------ */
  --edge:inset var(--hx) var(--hy) 0 0 var(--lit),
         inset calc(var(--hx) * -1) calc(var(--hy) * -1) 0 0 var(--shade-edge);
  --cast:var(--sx) var(--sy) calc(var(--throw) * 2.4) calc(var(--throw) * -.55) var(--shade);
  --raked:var(--edge), var(--cast);
  --sheen:linear-gradient(var(--rake-deg), var(--lit-2), rgba(255,239,216,0) 56%);
  --lamp:radial-gradient(130% 120% at var(--lamp-x) var(--lamp-y),
          rgba(224,145,60,.11), rgba(224,145,60,0) 58%);

  --grade:saturate(.84) contrast(1.12) brightness(.90) sepia(.14);
  --hero-floor:#40332A;
  --nav-gap:26px;
  --nav-h:70px;
}

/* the bone panel re-declares the two COLOURS of the light and nothing else —
   same angle, same throw, same hairline, so the light band in the middle of the
   page is lit by the same lamp as the dark. */
.bone{
  --lit:rgba(255,255,255,.95);
  --lit-2:rgba(255,255,255,.55);
  --shade:rgba(74,52,26,.26);
  --shade-edge:rgba(74,52,26,.16);
}

/* ---------------------------------------------------------------- type ----- */
body{background:var(--surface)}
h1,h2,h3{font-optical-sizing:auto}
h1{font-size:clamp(44px,6.4vw,68px);line-height:1.03;letter-spacing:-.028em;
   font-weight:600;margin:0}
.h-lg{font-size:clamp(30px,5.2vw,46px);line-height:1.06;letter-spacing:-.024em}
.h-md{font-size:clamp(26px,4.4vw,36px);line-height:1.1;letter-spacing:-.02em}
h3{font-size:19px;line-height:1.25;letter-spacing:-.014em;font-weight:600}
.measure{max-width:60ch}
.eyebrow{color:var(--accent);font-size:12px;letter-spacing:.2em;font-weight:700}
.eyebrow.onshot{color:var(--accent-2)}
.eyebrow.onband{color:var(--accent-on-band)}
.mono{font-family:var(--font-display);font-weight:700;letter-spacing:.02em}

/* -------------------------------------------------------------- imagery ---- */
/* ONE grade, one rule, every photograph on the page. There is no second filter
   anywhere in this file and there must never be one. */
.heroshot img,.frame img{filter:var(--grade)}
.frame{display:block;position:relative;overflow:hidden;border-radius:var(--radius);
  aspect-ratio:1200 / 1500;background:linear-gradient(160deg,#2A211A,#100E0C);
  box-shadow:var(--raked);transition:box-shadow .34s cubic-bezier(.22,.61,.36,1)}
.frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--sheen);border-radius:inherit}
.frame img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}

/* ------------------------------------------------------------ preview bar --
   Demo-only chrome, and it has to get out of the masthead's way. In normal flow
   the fixed nav simply covers it — at 390 the brand and the toggle printed on
   top of the bar's own words. So the bar is pinned above the nav and the nav is
   given a matching padding-top, published as --tpl-h. No `top` and no `position`
   is declared on #nav: the shared floor owns those and houserules.py enforces it. */
.tplbar{position:fixed;top:0;left:0;right:0;z-index:130;
  background:var(--surface-2);color:var(--ink-3);font-size:12.5px;
  line-height:1.45;padding:8px var(--gutter);text-align:center;
  box-shadow:var(--edge)}
.tplbar b{color:var(--ink-2)}
:root:has(.tplbar){--tpl-h:58px}
@media(min-width:760px){:root:has(.tplbar){--tpl-h:36px}}
#nav{padding-top:var(--tpl-h,0px)}

/* -------------------------------------------------------------------- nav -- */
#nav.scrolled{background:rgba(14,13,12,.90);backdrop-filter:saturate(1.2) blur(10px);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);box-shadow:var(--raked)}
/* base's .nav-inner is a nowrap flex row. The drawer is the fourth child of it,
   so without wrap it opened as a column SQUEEZED beside the brand and pushed the
   name onto two lines. It wraps on the phone and goes back to one row at 940. */
.nav-inner{gap:12px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  color:var(--ink);min-height:44px}
.brand .mono{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;font-size:13px;color:var(--accent-2);
  background:var(--surface-2);box-shadow:var(--raked)}
.brandtype{font-family:var(--font-display);font-size:19px;font-weight:600;
  letter-spacing:-.02em;white-space:nowrap}
.navhours{display:none}
.navtoggle .bars{display:block;width:22px}
.navtoggle .bars i{display:block;height:1px;margin:5px 0;background:var(--ink);
  box-shadow:var(--hx) var(--hy) 0 0 rgba(0,0,0,.7);transition:opacity .2s ease}
.navtoggle .bars i:nth-child(2){width:15px}
.nav-links{flex:1 0 100%;flex-direction:column;align-items:flex-start;gap:2px;
  width:100%;padding:6px 0 16px;margin-top:6px;border-top:1px solid var(--line)}
.nav-links a{color:var(--ink-2);text-decoration:none;font-size:16px;font-weight:500;
  padding:11px 0;min-height:44px;display:flex;align-items:center;width:100%}
.nav-links a:hover{color:var(--ink)}
.drawhours{color:var(--ink-3);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;margin:8px 0 4px}
.drawtel{color:var(--accent-2)!important;font-family:var(--font-display);font-size:20px!important}
.navcta{background:var(--accent);color:var(--accent-ink)!important;
  padding:0 20px!important;justify-content:center!important;
  border-radius:var(--radius);font-weight:650;box-shadow:var(--raked);margin-top:8px}
html.menu-open #nav{background:var(--surface)}

@media(min-width:940px){
  .nav-inner{flex-wrap:nowrap}
  .nav-links{flex:0 0 auto;width:auto;padding:0;margin:0;border:0;align-items:center}
  .nav-links a{width:auto;padding:0;font-size:14.5px;letter-spacing:.01em}
  .drawhours,.drawtel{display:none}
  .navcta{height:42px;margin-top:0}
  .navhours{display:flex;align-items:center;gap:9px;margin:0;color:var(--ink-3);
    font-size:12px;letter-spacing:.11em;text-transform:uppercase}
  .navhours i{width:6px;height:6px;background:var(--accent);border-radius:50%;
    box-shadow:0 0 10px 1px rgba(224,145,60,.55)}
}

/* ------------------------------------------------------------------- hero -- */
.hero{position:relative;min-height:100svh;display:grid;align-content:start;
  background:var(--surface);isolation:isolate;overflow:hidden}
.heroshot,.heroshade{position:absolute;inset:0;z-index:0}
.heroshot picture,.heroshot img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:50% 50%}
/* Not a scrim over a bright area — this DEEPENS the shadow the photograph already
   carries. On the phone plate the light falls off below the beard into the cape;
   on the desktop plate the wedge runs away from the standing figure on the left. */
.heroshade{background:
  linear-gradient(102deg, rgba(9,8,7,.42) 0%, rgba(9,8,7,.10) 42%, rgba(9,8,7,0) 72%),
  linear-gradient(180deg, rgba(9,8,7,0) 0%, rgba(9,8,7,.26) 20%, rgba(9,8,7,.86) 33%,
                  rgba(9,8,7,.95) 62%, rgba(9,8,7,.95) 100%)}
.herowrap{position:relative;z-index:1;padding-top:252px;padding-bottom:44px}
.herosay{max-width:min(560px,100%)}
.herosay .eyebrow{margin-bottom:14px}
h1 .dim{color:var(--ink-2)}
h1 .lit{font-style:normal;color:var(--ink);font-weight:700;
  text-shadow:calc(var(--sx) * .22) calc(var(--sy) * .22) 26px rgba(224,145,60,.42),
              0 0 34px rgba(224,145,60,.18)}
.herosay .lead{margin:20px 0 0;color:var(--ink-2)}
.herosay .btnrow{margin-top:26px}
.standing{display:flex;flex-direction:column;gap:3px;margin:30px 0 0;
  padding-top:14px;font-size:13px;color:var(--ink-3);
  border-top:1px solid var(--lit);box-shadow:0 var(--hy) 0 0 rgba(0,0,0,.6)}
.standing b{color:var(--ink-2);font-weight:600;letter-spacing:.02em}
.standing a{color:var(--accent-2);text-decoration:none}

@media(min-width:860px){
  .herowrap{padding-top:clamp(196px,25vh,238px);padding-bottom:64px}
  .heroshade{background:
    linear-gradient(180deg, rgba(9,8,7,0) 0%, rgba(9,8,7,0) 54%,
                    rgba(9,8,7,.30) 78%, rgba(9,8,7,.78) 100%),
    linear-gradient(106deg, rgba(9,8,7,.95) 0%, rgba(9,8,7,.88) 30%,
                    rgba(9,8,7,.58) 46%, rgba(9,8,7,.18) 62%, rgba(9,8,7,0) 78%)}
  .standing{flex-direction:row;gap:22px;align-items:baseline;font-size:13.5px}
}

/* ------------------------------------------------------- section furniture -- */
/* base.css's mobile .sec is 64px; six sections of it put the phone page over the
   7,500px ceiling in the contract's budget. Trimmed here, and the two desktop
   steps are restated because base's media queries sit EARLIER in the built file
   and would otherwise lose to this rule on equal specificity. */
.sec{padding:46px 0;background:var(--surface)}
@media(min-width:760px){.sec{padding:96px 0}}
@media(min-width:1180px){.sec{padding:124px 0}}
.shead,.fhead,.bhead,.ahead{max-width:820px}
.shead .h-lg,.fhead .h-lg,.bhead .h-lg,.cleft .h-lg{margin-bottom:16px}
.shead .lead,.fhead .lead,.bhead .lead{margin:0;color:var(--ink-2)}

/* ------------------------------------------------- THE BOARD (dark, dense) -- */
/* Six ledges. Each one is a shelf standing in the same light: a lit rim on its
   top-left edge, the page's shadow thrown underneath. The price sits in the lit
   margin and the duration sits below it across a hairline, so the row carries a
   second axis without a chip and without a leader. */
.board .ledges{margin-top:30px;border-top:1px solid var(--line)}
.ledge{position:relative;display:grid;grid-template-columns:88px 1fr;
  column-gap:18px;row-gap:2px;padding:20px 16px 20px 12px;
  background:linear-gradient(180deg,var(--surface-2),#131110);
  box-shadow:var(--raked);margin-bottom:10px;border-radius:var(--radius);
  transition:box-shadow .34s cubic-bezier(.22,.61,.36,1),transform .34s cubic-bezier(.22,.61,.36,1)}
.ledge::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--lamp);border-radius:inherit}
.lprice{grid-column:1;grid-row:1;font-family:var(--font-display);font-size:26px;
  font-weight:600;letter-spacing:-.03em;color:var(--accent-2);line-height:1}
.ltag{grid-column:1;grid-row:2;align-self:start;margin-top:9px;padding-top:8px;
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);
  border-top:1px solid var(--lit);box-shadow:0 var(--hy) 0 0 rgba(0,0,0,.55)}
.lmain{grid-column:2;grid-row:1 / span 2}
.lmain h3{color:var(--ink)}
.lmain p{margin:7px 0 0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.bfoot{margin:26px 0 0;font-size:14px;color:var(--ink-3);max-width:60ch}
.mgroup{margin-top:34px}
.mgh{color:var(--accent);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.mrow{display:grid;grid-template-columns:1fr auto;column-gap:16px;
  padding:13px 0;border-bottom:1px solid var(--line)}
.mn{color:var(--ink);font-weight:600}
.mnote{grid-column:1;font-size:14px;color:var(--ink-3)}
.mp{grid-column:2;grid-row:1 / span 2;align-self:center;font-family:var(--font-display);
  font-size:19px;color:var(--accent-2)}

@media(min-width:760px){
  .ledge{grid-template-columns:132px 1fr;column-gap:28px;padding:24px 24px 24px 20px}
  .lprice{font-size:32px}
  .lmain h3{font-size:21px}
  .lmain p{font-size:16px}
}
@media(min-width:1060px){
  .board .ledges{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .ledge{margin-bottom:0}
}

/* -------------------------------------------------- THE FLOOR (dark, open) -- */
.floor .strip{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.floor .strip:empty{display:none;margin:0}
.plate{margin:0}
.plate:nth-child(even){margin-top:36px}
.plate figcaption{display:flex;flex-direction:column;gap:2px;margin-top:12px;
  padding-top:9px;border-top:1px solid var(--lit);
  box-shadow:0 var(--hy) 0 0 rgba(0,0,0,.6)}
.plate figcaption b{font-size:13.5px;font-weight:600;color:var(--ink)}
.plate figcaption span{font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3)}
.team{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
.team:empty{display:none;margin:0}
.member h3{margin-top:12px;color:var(--ink)}
.member p{margin:3px 0 0;font-size:14px;color:var(--ink-3)}
.facts{margin-top:32px;display:grid;gap:2px}
.fact{padding:18px 0;border-top:1px solid var(--lit);
  box-shadow:0 var(--hy) 0 0 rgba(0,0,0,.55)}
.fact h3{color:var(--ink)}
.fact p{margin:6px 0 0;font-size:15px;color:var(--ink-2)}

@media(min-width:760px){
  .floor .strip{grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
  .plate:nth-child(even){margin-top:56px}
  .team{grid-template-columns:repeat(4,1fr);gap:20px}
  .facts{grid-template-columns:repeat(3,1fr);gap:26px;margin-top:56px}
  .fact{padding:20px 0 0}
}

/* ------------------------------------ THE BONE PANEL (the full-bleed breath) -- */
.bone{background:var(--band);color:var(--band-ink)}
.bone h2,.bone h3{color:var(--band-ink)}
.bone .lead{color:var(--band-ink-2)}
.cards{display:grid;gap:14px;margin-top:32px}
.card{position:relative;padding:24px 22px;background:#F3EDE3;
  border-radius:var(--radius);box-shadow:var(--raked);
  transition:box-shadow .34s cubic-bezier(.22,.61,.36,1),transform .34s cubic-bezier(.22,.61,.36,1)}
.cnum{position:absolute;top:18px;right:20px;font-family:var(--font-display);
  font-size:34px;line-height:1;color:rgba(122,74,24,.22);font-weight:600}
.card h3{padding-right:44px}
.card p{margin:9px 0 0;font-size:15px;line-height:1.6;color:var(--band-ink-2)}
.qt{margin:34px 0 0;padding-top:24px;border-top:1px solid rgba(20,18,15,.18);
  box-shadow:0 var(--hy) 0 0 rgba(255,255,255,.85)}
.qt blockquote{margin:0;font-family:var(--font-display);font-size:clamp(19px,2.6vw,26px);
  line-height:1.42;letter-spacing:-.014em;color:var(--band-ink)}
.qt figcaption{margin-top:14px;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent-on-band)}

@media(min-width:760px){
  .cards{grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
  .card{padding:28px 26px}
  .qt{margin-top:44px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
  .qt figcaption{margin:0;text-align:right}
}

/* ---------------------------------------------- WHAT PEOPLE ASK (accordion) -- */
.asks{background:var(--surface)}
.asklist{margin-top:22px}
.ask{background:var(--surface-2);border-radius:var(--radius);box-shadow:var(--raked);
  margin-bottom:10px;overflow:hidden}
.ask summary{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:17px 18px;min-height:56px;cursor:pointer;list-style:none;
  font-weight:600;font-size:16px;color:var(--ink)}
.ask summary::-webkit-details-marker{display:none}
.ask summary i{flex:0 0 auto;width:11px;height:11px;position:relative}
.ask summary i::before,.ask summary i::after{content:"";position:absolute;
  background:var(--accent);transition:opacity .2s ease}
.ask summary i::before{left:0;top:5px;width:11px;height:1px}
.ask summary i::after{left:5px;top:0;width:1px;height:11px}
.ask[open] summary i::after{opacity:0}
.ask p{margin:0;padding:0 18px 20px;font-size:15px;line-height:1.62;color:var(--ink-2);
  max-width:70ch}
.askcall{margin:16px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-3);max-width:34ch}
.askcall a{display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--font-display);font-size:21px;color:var(--accent-2);
  text-decoration:none;letter-spacing:-.02em}
.askcall a:hover{color:var(--accent)}
/* The accordion is a NARROW band beside its own heading from 900px up. Run full
   width it was four short rows across a 1084px column with a lot of nothing under
   them — restraint that reads as unfinished, which is a D5 deduction, not
   minimalism. Beside the heading it is a compact block that fills its own row. */
@media(min-width:900px){
  .asks .container{display:grid;grid-template-columns:.78fr 1.22fr;gap:54px;align-items:start}
  .asklist{margin-top:0}
  .ask{margin-bottom:12px}
}

/* -------------------------------------------------------------- THE CLOSE -- */
.close{background:var(--surface)}
.cgrid{display:grid;gap:38px}
.cleft .lead{margin:0 0 26px;color:var(--ink-2)}
.hours{border-top:1px solid var(--line)}
.hrow{display:flex;justify-content:space-between;gap:18px;padding:12px 0;
  border-bottom:1px solid var(--line);font-size:14.5px}
.hd{color:var(--ink-2)}
.ht{color:var(--ink);font-variant-numeric:tabular-nums}
.crow{display:flex;flex-direction:column;gap:6px;margin-top:24px}
.cbig{display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--font-display);font-size:clamp(19px,3vw,24px);
  color:var(--accent-2);text-decoration:none;letter-spacing:-.02em;
  border-bottom:1px solid transparent;align-self:flex-start}
.cbig:hover{border-bottom-color:var(--accent)}
.crow address{font-style:normal;font-size:14.5px;color:var(--ink-3);margin-top:4px}
.area{margin-top:28px;padding-top:20px;border-top:1px solid var(--lit);
  box-shadow:0 var(--hy) 0 0 rgba(0,0,0,.55)}
.area h3{color:var(--ink)}
.area p{margin:8px 0 0;font-size:15px;color:var(--ink-2)}
.towns{display:flex;flex-wrap:wrap;gap:8px}
.towns span{font-size:12.5px;color:var(--ink-3);padding:5px 10px;
  background:var(--surface-2);border-radius:var(--radius);box-shadow:var(--edge)}
.formpanel{padding:24px 20px;background:linear-gradient(180deg,var(--surface-2),#131110);
  border-radius:var(--radius);box-shadow:var(--raked);position:relative}
.formpanel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--lamp);border-radius:inherit}
.formpanel > *{position:relative}
.field label{color:var(--ink-3)}
.field input,.field select,.field textarea{background:#100E0D;border-color:var(--line);
  color:var(--ink);box-shadow:var(--edge)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.fineprint{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.thanks{background:linear-gradient(180deg,var(--surface-2),#131110);
  border-color:var(--line);box-shadow:var(--raked)}
.thanks h3{font-family:var(--font-display);font-size:24px;color:var(--ink)}
.thanks p{margin:0;color:var(--ink-2)}
@media(min-width:900px){
  .cgrid{grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .formpanel{padding:32px 30px}
}
@media(min-width:1180px){
  .cgrid{grid-template-columns:1fr 1.06fr;gap:72px}
}

/* ----------------------------------------------------------------- BUTTONS -- */
.btn{border-radius:var(--radius);letter-spacing:.005em}
.btn-primary{box-shadow:var(--raked)}
.btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn-ghost{color:var(--ink);border-color:var(--line);background:rgba(23,21,18,.62);
  box-shadow:var(--raked)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-2)}

/* ------------------------------------------------------------------ FOOTER -- */
footer{background:var(--surface-2);padding:48px 0 28px;box-shadow:var(--edge)}
.fgrid{display:grid;gap:32px}
.fbrand .mono.big{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;font-size:17px;color:var(--accent-2);background:#100E0D;
  box-shadow:var(--raked)}
.fname{font-family:var(--font-display);font-size:22px;font-weight:600;
  letter-spacing:-.02em;color:var(--ink);margin:14px 0 6px}
.fabout{margin:0;font-size:14.5px;color:var(--ink-2);max-width:44ch}
.fh{font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--accent);font-family:var(--font-body);font-weight:700;margin-bottom:12px}
.fcol{display:flex;flex-direction:column;gap:6px}
.fcol a,.fplain{color:var(--ink-2);font-size:14.5px;text-decoration:none}
.fcol a{display:inline-flex;align-items:center;min-height:44px}
.fcol a:hover{color:var(--accent-2)}
.fcol address{font-style:normal;font-size:14.5px;color:var(--ink-3)}
.fnav{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:36px;padding-top:20px;
  border-top:1px solid var(--lit);box-shadow:0 var(--hy) 0 0 rgba(0,0,0,.6)}
.fnav a{display:inline-flex;align-items:center;min-height:44px;
  color:var(--ink-3);font-size:14px}
.fnav a:hover{color:var(--ink)}
.fbase{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;
  margin-top:22px;font-size:13px;color:var(--ink-3)}
.credit a{color:var(--ink-2)}
@media(min-width:760px){
  .fgrid{grid-template-columns:1.5fr 1fr 1fr;gap:40px}
  .fcol a,.fnav a{min-height:26px}
  footer{padding:72px 0 34px}
}

/* --------------------------------------------------------------------- 404 -- */
.nf{padding-top:calc(var(--nav-h,70px) + 62px)}
.nfgrid{display:grid;gap:34px;align-items:center}
.nfnum{display:block;font-family:var(--font-display);font-size:clamp(56px,13vw,104px);
  line-height:.9;font-weight:600;letter-spacing:-.05em;color:var(--ink-3);
  opacity:.55;margin-bottom:14px}
.nf h1{font-size:clamp(34px,6vw,46px)}
.nfsay .lead{margin:18px 0 26px;color:var(--ink-2)}
/* On the phone the 404's picture is a SMALL print, not a stacked backdrop: at full
   width it would read as a full-bleed hero image with the headline stacked above it,
   which is DESIGN-FLOOR A1's exact failure. At 200px it is an object on the page,
   lit and shadowed like every other object here, and A1 does not apply to it. */
.nfframe{max-width:200px;margin-left:auto}
@media(min-width:860px){
  .nf{padding-top:calc(var(--nav-h,70px) + 74px)}
  .nfgrid{grid-template-columns:1.15fr .85fr;gap:56px}
  .nfframe{max-width:420px;margin-left:0}
}

/* ------------------------------------------------------------------ MOTION -- */
/* Two moments, both saying the same thing as the layout.
   1. the lamp finding the lit half of the headline on load;
   2. anything you can act on stepping NEARER the lamp on hover — --throw grows,
      the thrown shadow lengthens along the same vector, the rim brightens.
   Both are gated behind html.js, and base.css neutralises them entirely under
   prefers-reduced-motion. */
@keyframes nwbloom{
  from{text-shadow:none}
  to{text-shadow:calc(var(--sx) * .22) calc(var(--sy) * .22) 26px rgba(224,145,60,.42),
                 0 0 34px rgba(224,145,60,.18)}
}
html.js .hero h1 .lit{animation:nwbloom 1.15s cubic-bezier(.22,.61,.36,1) .3s both}
a.plate:hover .frame,.ledge:hover,.card:hover{--throw:24px;--lit:rgba(255,239,216,.26)}
.card:hover{--lit:rgba(255,255,255,1)}
.ledge:hover,.card:hover{transform:translate(calc(var(--dir-x) * -1px),calc(var(--dir-y) * -1px))}
@media(prefers-reduced-motion:reduce){
  .frame,.ledge,.card{transition:none}
  .ledge:hover,.card:hover{transform:none}
}