/* ==========================================================================
   Marcel Avenue Studio — "Marcel" theme
   Upshift salon / barbershop template · hand-written CSS, no build step,
   no external requests.

   THE IDEA: in this trade the PRICE LIST is the design. Clients choose a salon
   on two things — can I see the work, and what will it cost me — and most
   salon sites hide both behind a booking widget. So this template sets the
   service menu like a printed menu, with dot leaders and a stated duration on
   every line, and lets the photography sit in an offset editorial grid around
   it. Didone display type, brass hairlines, a lot of air.

   COLOUR RULE, read this before re-skinning: --c-brass is 3.2:1 on bone. It is
   a RULE and ORNAMENT colour, and is only ever used for text at large display
   sizes. Body copy accents use --c-mulberry (8:1). Keep that split or the
   template quietly fails contrast.

   BARBERSHOP SKIN: link assets/skin-fade.css after this file and the whole
   site becomes the barbershop cut — same markup, different tokens.
   ========================================================================== */

:root{
  /* Ground */
  --c-bone:  #F7F2EA;   /* page ground — warm plaster                       */
  --c-paper: #FFFFFF;   /* raised surfaces                                  */
  --c-linen: #EFE7DA;   /* alternating band                                 */

  /* Ink */
  --c-sable:     #211C1A;
  --c-sableDeep: #171311;
  --c-muted:     rgba(33, 28, 26, 0.72);   /* 6.4:1 on bone                 */

  /* Accent */
  --c-mulberry:     #7B2E52;               /* 8.0:1 on bone — safe for text */
  --c-mulberryWash: rgba(123, 46, 82, 0.09);
  --c-brass:        #A9803B;               /* 3.2:1 — RULES + LARGE TYPE ONLY */
  --c-brassWash:    rgba(169, 128, 59, 0.14);

  /* On dark */
  --c-light:      #F7F2EA;
  --c-lightMuted: rgba(247, 242, 234, 0.74);
  --c-glow:       #D9AC63;                 /* 8.1:1 on sable                */

  /* Lines */
  --c-hair:       #E0D6C6;
  --c-hairOnDark: rgba(247, 242, 234, 0.20);
  --c-error:      #9B2C2C;

  /* Shape */
  --r-card: 3px;
  --r-btn:  2px;
  --r-img:  3px;

  /* Type */
  --f-display: 'Bodoni Moda', 'Didot', 'Times New Roman', Georgia, serif;
  --f-body:    'Jost', 'Futura', 'Avenir Next', system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   Reset + base
   -------------------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
/* Keep this auto — smooth scrolling makes Chrome drop cross-document #fragment
   navigation, so every "see the menu" link from another page lands at the top. */
html{scroll-behavior:auto}
body{background:var(--c-bone);color:var(--c-sable);font-family:var(--f-body);
  font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{text-decoration:none;color:inherit;transition:color 160ms ease,border-color 160ms ease,background-color 160ms ease,opacity 160ms ease}
ul,ol{list-style:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--c-mulberry);outline-offset:3px}
.on-sable :focus-visible,.site-footer :focus-visible{outline-color:var(--c-glow)}
[id]{scroll-margin-top:132px}
@media (prefers-reduced-motion: reduce){a{transition:none}}

/* --------------------------------------------------------------------------
   Type — Bodoni Moda for display, Jost for everything you read.
   The eyebrow is Jost tracked wide; it does the work small caps would.
   -------------------------------------------------------------------------- */
.t-display{font-family:var(--f-display);font-weight:400;font-size:76px;line-height:1.02;
  letter-spacing:-0.018em}
.t-display em{font-style:italic;font-weight:400}
.t-h2{font-family:var(--f-display);font-weight:400;font-size:44px;line-height:1.08;letter-spacing:-0.012em}
.t-h2 em{font-style:italic}
.t-h3{font-family:var(--f-display);font-weight:500;font-size:27px;line-height:1.15}
.t-title{font-family:var(--f-display);font-weight:500;font-size:20px;line-height:1.22}
.t-eyebrow{font-family:var(--f-body);font-weight:500;font-size:11.5px;line-height:1.4;
  letter-spacing:0.24em;text-transform:uppercase;color:var(--c-mulberry)}
.t-eyebrowQuiet{font-family:var(--f-body);font-weight:500;font-size:11.5px;line-height:1.4;
  letter-spacing:0.24em;text-transform:uppercase;color:var(--c-muted)}
.t-lead{font-size:19px;line-height:1.62;font-weight:300;color:var(--c-muted)}
.t-body{font-size:16.5px;line-height:1.68;font-weight:300;color:var(--c-muted)}
.t-bodyStrong{font-size:16.5px;line-height:1.55;font-weight:500;color:var(--c-sable)}
.t-small{font-size:14px;line-height:1.6;font-weight:300;color:var(--c-muted)}
.t-fine{font-size:12.5px;line-height:1.6;font-weight:300;color:var(--c-muted)}
.t-price{font-family:var(--f-display);font-weight:500;font-size:19px;line-height:1.2;
  font-variant-numeric:tabular-nums;color:var(--c-sable);white-space:nowrap}
.t-figure{font-family:var(--f-display);font-weight:400;font-size:52px;line-height:1;
  letter-spacing:-0.02em;color:var(--c-brass)}   /* large display only — see colour rule */
.t-quote{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:23px;
  line-height:1.42;color:var(--c-sable)}
/* on-sable */
.t-displayLight,.t-h2Light,.t-titleLight{color:var(--c-light)}
.t-displayLight{font-family:var(--f-display);font-weight:400;font-size:76px;line-height:1.02;letter-spacing:-0.018em}
.t-displayLight em{font-style:italic}
.t-h2Light{font-family:var(--f-display);font-weight:400;font-size:44px;line-height:1.08;letter-spacing:-0.012em}
.t-h2Light em{font-style:italic}
.t-titleLight{font-family:var(--f-display);font-weight:500;font-size:20px;line-height:1.22}
.t-leadLight{font-size:19px;line-height:1.62;font-weight:300;color:var(--c-lightMuted)}
.t-bodyLight{font-size:16.5px;line-height:1.68;font-weight:300;color:var(--c-lightMuted)}
.t-smallLight{font-size:14px;line-height:1.6;font-weight:300;color:var(--c-lightMuted)}
.t-fineLight{font-size:12.5px;line-height:1.6;font-weight:300;color:var(--c-lightMuted)}
.t-eyebrowLight{font-family:var(--f-body);font-weight:500;font-size:11.5px;line-height:1.4;
  letter-spacing:0.24em;text-transform:uppercase;color:var(--c-glow)}
@media (max-width:1099px){
  .t-display,.t-displayLight{font-size:58px}
  .t-h2,.t-h2Light{font-size:36px}
  .t-figure{font-size:42px}
}
@media (max-width:819px){
  .t-display,.t-displayLight{font-size:41px}
  .t-h2,.t-h2Light{font-size:29px}
  .t-h3{font-size:23px}
  .t-lead,.t-leadLight{font-size:17px}
  .t-quote{font-size:20px}
}

/* --------------------------------------------------------------------------
   Buttons + links
   -------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;border-radius:var(--r-btn);background:var(--c-sable);color:var(--c-light);
  font-family:var(--f-body);font-weight:500;font-size:13px;letter-spacing:0.16em;
  text-transform:uppercase;width:fit-content;border:1px solid var(--c-sable)}
.btn:hover{background:var(--c-mulberry);border-color:var(--c-mulberry)}
.btn-mul{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;border-radius:var(--r-btn);background:var(--c-mulberry);color:var(--c-light);
  font-family:var(--f-body);font-weight:500;font-size:13px;letter-spacing:0.16em;
  text-transform:uppercase;width:fit-content;border:1px solid var(--c-mulberry)}
.btn-mul:hover{background:#652441;border-color:#652441}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 28px;border-radius:var(--r-btn);border:1px solid var(--c-sable);color:var(--c-sable);
  font-family:var(--f-body);font-weight:500;font-size:13px;letter-spacing:0.16em;
  text-transform:uppercase;width:fit-content;background:transparent}
.btn-ghost:hover{background:var(--c-sable);color:var(--c-light)}
.btn-ghostLight{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 28px;border-radius:var(--r-btn);border:1px solid var(--c-hairOnDark);color:var(--c-light);
  font-family:var(--f-body);font-weight:500;font-size:13px;letter-spacing:0.16em;
  text-transform:uppercase;width:fit-content;background:transparent}
.btn-ghostLight:hover{border-color:var(--c-glow);color:var(--c-glow)}
.btn-sm{padding:11px 20px;font-size:11.5px;letter-spacing:0.14em}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.textlink{font-family:var(--f-body);font-weight:500;font-size:13px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--c-mulberry);border-bottom:1px solid var(--c-brass);
  padding-bottom:3px;width:fit-content}
.textlink:hover{border-bottom-color:var(--c-mulberry)}
.textlinkLight{font-family:var(--f-body);font-weight:500;font-size:13px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--c-glow);border-bottom:1px solid var(--c-hairOnDark);
  padding-bottom:3px;width:fit-content}
.textlinkLight:hover{border-bottom-color:var(--c-glow)}

/* --------------------------------------------------------------------------
   Masthead + the booking rail underneath it
   -------------------------------------------------------------------------- */
.masthead{position:sticky;top:0;z-index:100;background:var(--c-bone)}
.masthead-in{max-width:1200px;margin:0 auto;padding:26px 28px 20px;display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.wordmark{display:flex;flex-direction:column;align-items:center;gap:5px;width:fit-content;
  justify-self:center}
.wordmark-name{font-family:var(--f-display);font-weight:400;font-size:25px;line-height:1;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--c-sable)}
.wordmark-rule{width:100%;height:1px;background:var(--c-brass)}
.wordmark-sub{font-family:var(--f-body);font-weight:400;font-size:9.5px;letter-spacing:0.34em;
  text-transform:uppercase;color:var(--c-muted);line-height:1}
.site-nav{display:flex;gap:30px;align-items:center}
.site-nav a{font-family:var(--f-body);font-weight:400;font-size:12.5px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--c-sable);padding-bottom:3px;border-bottom:1px solid transparent}
.site-nav a:hover{border-bottom-color:var(--c-brass)}
.masthead-r{display:flex;justify-content:flex-end}

/* The booking rail — a hairline strip that carries the two things a salon
   visitor is looking for: when you're open, and how to book. */
.bookrail{border-top:1px solid var(--c-hair);border-bottom:1px solid var(--c-hair);
  background:var(--c-bone)}
.bookrail-in{max-width:1200px;margin:0 auto;padding:11px 28px;display:flex;align-items:center;
  justify-content:space-between;gap:22px;flex-wrap:wrap}
.bookrail p{font-family:var(--f-body);font-weight:300;font-size:13px;letter-spacing:0.05em;color:var(--c-muted)}
.bookrail b{font-weight:500;color:var(--c-sable)}
.bookrail .dot{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--c-mulberry);margin-right:8px;vertical-align:middle}
.quicknav{display:none;gap:22px;overflow-x:auto;padding:0 28px 12px;-webkit-overflow-scrolling:touch}
.quicknav a{font-family:var(--f-body);font-weight:400;font-size:12px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--c-mulberry);white-space:nowrap}
@media (max-width:979px){
  .masthead-in{grid-template-columns:1fr;padding:18px 22px 12px;gap:12px}
  .site-nav{display:none}
  .masthead-r{display:none}
  .quicknav{display:flex}
}

/* Sticky mobile bar */
.mobilebar{display:none}
@media (max-width:819px){
  .mobilebar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;bottom:0;left:0;right:0;
    z-index:110;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(247,242,234,0.97);border-top:1px solid var(--c-hair);backdrop-filter:blur(8px)}
  .mobilebar > *{width:100%;padding:13px 8px}
  body{padding-bottom:74px}
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section{padding:104px 28px;background:var(--c-bone)}
.section.tight{padding:64px 28px}
.bg-paper{background:var(--c-paper)}
.bg-linen{background:var(--c-linen)}
.bg-sable{background:var(--c-sable)}
.on-sable{color:var(--c-light)}
.inner{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:52px}
.inner.narrow{max-width:800px}
.sec-head{display:flex;flex-direction:column;gap:16px;max-width:660px}
.sec-head.centre{align-items:center;text-align:center;margin:0 auto}
.hairrule{width:56px;height:1px;background:var(--c-brass)}
.hairrule.wide{width:100%}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:38px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:38px}
.grid-2>*,.grid-3>*{min-width:0}
@media (max-width:1099px){.grid-3{grid-template-columns:1fr 1fr;gap:30px}}
@media (max-width:819px){
  .section{padding:68px 22px}
  .grid-2,.grid-3{grid-template-columns:1fr;gap:28px}
}

/* --------------------------------------------------------------------------
   HERO — an editorial spread: the photograph holds the right, a bone card
   sits over its left edge and breaks the grid.
   -------------------------------------------------------------------------- */
.hero{position:relative;background:var(--c-bone);padding:0 0 96px}
.hero-frame{position:relative;max-width:1360px;margin:0 auto;padding-left:28px}
.hero-photo{margin:0;position:relative;overflow:hidden;border-radius:0 0 0 var(--r-img)}
.hero-photo img{width:100%;height:clamp(420px,52vw,660px);object-fit:cover;object-position:50% 62%}
.hero-card{position:relative;margin:-118px 0 0 0;max-width:620px;background:var(--c-bone);
  padding:44px 52px 0 0;display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.hero-card .hairrule{margin-bottom:2px}
.hero-open{display:flex;gap:34px;flex-wrap:wrap;padding-top:6px;border-top:1px solid var(--c-hair);width:100%}
.hero-open > div{display:flex;flex-direction:column;gap:3px;padding-top:14px}
.hero-open dt{font-family:var(--f-body);font-weight:500;font-size:10.5px;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--c-muted)}
.hero-open dd{font-family:var(--f-display);font-weight:500;font-size:17px;color:var(--c-sable)}
@media (max-width:979px){
  .hero{padding-bottom:64px}
  .hero-frame{padding-left:0}
  .hero-photo img{height:clamp(300px,58vw,440px)}
  .hero-card{margin:-56px 22px 0;padding:32px 26px 0;max-width:none}
}

/* --------------------------------------------------------------------------
   THE MENU — dot leaders. This is the signature of the theme.
   The leader is a repeating-linear-gradient on a flexible middle element, so
   it stretches to whatever space is left between the name and the price and
   never wraps oddly. No JS, no tables, prints beautifully.
   -------------------------------------------------------------------------- */
.menu-block{display:flex;flex-direction:column;gap:0;width:100%}
.menu-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding-bottom:12px;border-bottom:1px solid var(--c-sable)}
.menu-line{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:10px;
  padding:17px 0 15px;border-bottom:1px solid var(--c-hair)}
.menu-line:last-child{border-bottom:none}
.menu-name{font-family:var(--f-display);font-weight:500;font-size:19px;color:var(--c-sable);line-height:1.25}
.menu-dots{height:1px;transform:translateY(-4px);
  background-image:radial-gradient(circle, var(--c-brass) 1px, transparent 1.2px);
  background-size:6px 2px;background-repeat:repeat-x;background-position:0 0;opacity:0.75}
.menu-note{grid-column:1 / -1;font-size:14px;line-height:1.6;font-weight:300;color:var(--c-muted);
  max-width:620px;margin-top:5px}
.menu-meta{grid-column:1 / -1;font-family:var(--f-body);font-weight:400;font-size:11px;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--c-muted);margin-top:7px}
@media (max-width:559px){
  .menu-line{grid-template-columns:1fr auto;gap:12px}
  .menu-dots{display:none}
}

/* --------------------------------------------------------------------------
   THE CHAIRS — the roster, staggered so it reads as a spread rather than a row
   -------------------------------------------------------------------------- */
.chairs{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;align-items:start}
.chair{display:flex;flex-direction:column;gap:16px}
.chair:nth-child(2){margin-top:56px}
.chair:nth-child(3){margin-top:26px}
.chair figure{margin:0;overflow:hidden;border-radius:var(--r-img);background:var(--c-linen);aspect-ratio:3/4}
.chair figure img{width:100%;height:100%;object-fit:cover;object-position:50% 26%}
.chair-body{display:flex;flex-direction:column;gap:9px}
.chair-role{font-family:var(--f-body);font-weight:500;font-size:11px;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--c-mulberry)}
.chair-does{display:flex;flex-wrap:wrap;gap:7px;padding-top:4px}
.chair-does li{font-family:var(--f-body);font-weight:300;font-size:12px;letter-spacing:0.04em;
  padding:5px 11px;border:1px solid var(--c-hair);border-radius:999px;color:var(--c-muted)}
@media (max-width:1099px){
  .chairs{grid-template-columns:1fr 1fr;gap:30px}
  .chair:nth-child(3){margin-top:0}
}
@media (max-width:819px){
  .chairs{grid-template-columns:1fr;gap:34px}
  .chair:nth-child(2),.chair:nth-child(3){margin-top:0}
}

/* --------------------------------------------------------------------------
   THE PLATES — an offset gallery. Columns sit at different heights on purpose.
   -------------------------------------------------------------------------- */
.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;align-items:start}
.plate{display:flex;flex-direction:column;gap:12px}
.plate:nth-child(2){margin-top:64px}
.plate figure{margin:0;overflow:hidden;border-radius:var(--r-img);background:var(--c-linen)}
.plate figure img{width:100%;height:auto;display:block}
.plate-cap{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-top:10px;border-top:1px solid var(--c-hair)}
.plate-cap .who{font-family:var(--f-body);font-weight:400;font-size:11px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--c-muted)}
@media (max-width:819px){
  .plates{grid-template-columns:1fr;gap:30px}
  .plate:nth-child(2){margin-top:0}
}

/* --------------------------------------------------------------------------
   Cards, panels, ledger
   -------------------------------------------------------------------------- */
.card{background:var(--c-paper);border:1px solid var(--c-hair);border-radius:var(--r-card);
  padding:34px 36px;display:flex;flex-direction:column;gap:14px}
.card.mul{border-color:var(--c-mulberry);background:var(--c-mulberryWash)}
.card.dark{background:var(--c-sable);border-color:var(--c-sable);color:var(--c-light)}
.ledger{display:flex;flex-direction:column;width:100%}
.ledger > div{display:grid;grid-template-columns:190px 1fr;gap:26px;padding:20px 0;
  border-top:1px solid var(--c-hair)}
.ledger dt{font-family:var(--f-display);font-weight:500;font-size:18px;color:var(--c-sable)}
.ledger dd{font-size:16px;line-height:1.65;font-weight:300;color:var(--c-muted)}
@media (max-width:819px){
  .ledger > div{grid-template-columns:1fr;gap:7px}
}
.tickline{display:flex;flex-direction:column;gap:11px}
.tickline li{display:grid;grid-template-columns:16px 1fr;gap:12px;align-items:start;
  font-size:15px;line-height:1.6;font-weight:300;color:var(--c-muted)}
.tickline li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--c-brass);
  margin-top:9px;margin-left:5px}
.card.dark .tickline li{color:var(--c-lightMuted)}
.card.dark .tickline li::before{background:var(--c-glow)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.step{display:flex;flex-direction:column;gap:11px;padding-top:20px;border-top:1px solid var(--c-brass)}
.step .n{font-family:var(--f-display);font-weight:400;font-size:34px;line-height:1;color:var(--c-brass)}
@media (max-width:819px){.steps{grid-template-columns:1fr;gap:28px}}

/* Quotes */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:38px}
.quote{display:flex;flex-direction:column;gap:16px;padding-top:22px;border-top:1px solid var(--c-hair)}
.quote-meta{font-family:var(--f-body);font-weight:400;font-size:11px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--c-muted)}
.stars{color:var(--c-brass);letter-spacing:4px;font-size:12px}
@media (max-width:819px){.quotes{grid-template-columns:1fr;gap:26px}}

/* FAQ — native details/summary with a hairline rhythm */
.faq{display:flex;flex-direction:column;width:100%}
.faq details{border-top:1px solid var(--c-hair)}
.faq details:last-child{border-bottom:1px solid var(--c-hair)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:22px 2px;cursor:pointer;list-style:none;font-family:var(--f-display);
  font-weight:500;font-size:19px;color:var(--c-sable)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:10px;height:10px;flex-shrink:0;
  border-right:1px solid var(--c-brass);border-bottom:1px solid var(--c-brass);
  transform:rotate(45deg) translate(-3px,-3px);transition:transform 160ms ease}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq .faq-a{padding:0 2px 24px;max-width:680px}
@media (prefers-reduced-motion: reduce){.faq summary::after{transition:none}}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}
.form-grid .full{grid-column:1 / -1}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--f-body);font-weight:500;font-size:11px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--c-sable)}
.field input,.field select,.field textarea{padding:14px 15px;border:1px solid var(--c-hair);
  border-radius:var(--r-btn);background:var(--c-paper);font:inherit;font-weight:300;font-size:15.5px;
  color:var(--c-sable);width:100%}
.field input::placeholder,.field textarea::placeholder{color:rgba(33,28,26,0.60)} /* 5.9:1 on white */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--c-mulberry);outline-offset:0;border-color:var(--c-mulberry)}
.checkline{display:grid;grid-template-columns:17px 1fr;gap:12px;align-items:start;
  font-size:14px;line-height:1.6;font-weight:300;color:var(--c-muted)}
.checkline input{width:17px;height:17px;margin-top:3px;accent-color:var(--c-mulberry)}
@media (max-width:819px){.form-grid{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   Page hero (interior) + prose
   -------------------------------------------------------------------------- */
.page-hero{padding:76px 28px 62px;background:var(--c-linen)}
.page-hero .inner{gap:18px}
.page-hero.sable{background:var(--c-sable)}
.prose{display:flex;flex-direction:column;gap:17px;max-width:760px}
.prose h2{font-family:var(--f-display);font-weight:500;font-size:25px;color:var(--c-sable);padding-top:15px}
.prose p,.prose li{font-size:16px;line-height:1.72;font-weight:300;color:var(--c-muted)}
.prose ul{list-style:disc;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.prose strong{font-weight:500;color:var(--c-sable)}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;
  background:var(--c-linen);padding:2px 6px;border-radius:2px;color:var(--c-sable);overflow-wrap:anywhere}
.note{border-left:2px solid var(--c-brass);background:var(--c-paper);padding:20px 24px;
  display:flex;flex-direction:column;gap:9px}
.step-row{display:grid;grid-template-columns:58px 1fr;gap:20px;padding:19px 0;border-top:1px solid var(--c-hair)}
.step-row .n{font-family:var(--f-display);font-weight:500;font-size:15px;color:var(--c-brass);white-space:nowrap}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer{background:var(--c-sableDeep);color:var(--c-lightMuted);padding:72px 28px 28px}
.footer-in{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:44px}
.footer-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px}
.footer-col{display:flex;flex-direction:column;gap:11px}
.footer-col a:hover{color:var(--c-glow)}
.site-footer .wordmark{align-items:flex-start}
.site-footer .wordmark-name{color:var(--c-light)}
.site-footer .wordmark-sub{color:var(--c-lightMuted)}
.footer-head{font-family:var(--f-body);font-weight:500;font-size:10.5px;letter-spacing:0.24em;
  text-transform:uppercase;color:var(--c-glow)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:20px;border-top:1px solid var(--c-hairOnDark);flex-wrap:wrap}
@media (max-width:819px){.footer-cols{grid-template-columns:1fr 1fr;gap:30px}}
@media (max-width:559px){.footer-cols{grid-template-columns:1fr}}