/* ============================================================================
   WetWheels Auto Spa

   Direction: a two-ink printed program. Cream stock, black plate, one vermillion
   hit. Motorsport-program / trade-catalogue energy, not a website-shaped website.

   Why this and not the obvious dark-and-glowing detailer site: the AI-built site
   already on his domain is dark near-black with a glowing accent, and so was our
   first pass. Corey killed it. Three rules hold the whole look together and each
   one is the direct opposite of the default:

     1. border-radius is 0. Everywhere. No exceptions.
     2. No box-shadow. No drop shadows. Depth comes from rules and ink.
     3. No gradients. Flat color only.

   Photography is duotoned to the ink/cream ramp in build-wetwheels.assets.js, so
   fourteen stock photos by fourteen photographers read as one commissioned shoot.
   ========================================================================== */

:root {
  --paper:      #F3EFE5;   /* cream stock */
  --paper-2:    #EBE5D7;   /* second pass, for banded sections */
  --paper-3:    #E1DACA;
  --ink:        #111110;   /* black plate */
  --ink-soft:   #3A3833;
  --ink-mute:   #6E6A60;
  --rule:       #C9C2B0;
  --verm:       #D9341B;   /* the one hit of color */
  --verm-dark:  #A62612;

  --display: 'Archivo Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono: 'Courier Prime', 'Courier New', Courier, monospace;

  --shell: 1280px;
  --gut: 32px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; border-radius: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.62;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut); }
.shell.narrow { max-width: 820px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--verm); color: var(--paper); padding: 12px 18px; font-family: var(--mono); }
.skip-link:focus { left: 12px; top: 12px; }
:focus-visible { outline: 3px solid var(--verm); outline-offset: 2px; }

/* ---------- Type --------------------------------------------------------- */

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 400;           /* Archivo Black has one weight and it is heavy */
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.02em;
}
/* Poster scale, but the H1 has to carry a full keyword phrase ("Mobile Auto
   Detailing in Vancouver, WA") because title and H1 must match for SEO. At
   8vw that ran five lines and pushed the whole hero below the fold. */
h1 { font-size: clamp(36px, 4.6vw, 66px); }
h2 { font-size: clamp(28px, 3.5vw, 48px); }
h3 { font-size: clamp(19px, 1.9vw, 25px); line-height: 1.05; letter-spacing: -0.01em; }

/* The accent word goes vermillion. No italics: this face has no italic and a faked
   oblique on a face this heavy looks like a mistake. */
.em { color: var(--verm); }

/* Mono labels do the work an "eyebrow" would, but they read as a printed docket
   line instead of the standard uppercase-letterspaced website eyebrow. */
.label {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--verm);
  display: block;
}
.label-ink { color: var(--ink-mute); }

p { color: var(--ink-soft); }
.lede { font-size: clamp(19px, 1.55vw, 23px); line-height: 1.5; color: var(--ink); }
strong { font-weight: 600; color: var(--ink); }
em { font-style: italic; }

.text-link {
  font-family: var(--mono); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink); border-bottom: 2px solid var(--verm);
  padding-bottom: 2px; display: inline-block;
  transition: background .15s, color .15s;
}
.text-link:hover { background: var(--verm); color: var(--paper); border-color: var(--verm); }

/* ---------- Buttons: hard blocks, no radius, no shadow ------------------- */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 14px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 17px 28px; border: 2px solid var(--ink); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-fill { background: var(--verm); border-color: var(--verm); color: var(--paper); }
.btn-fill:hover { background: var(--ink); border-color: var(--ink); }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.btn-cream { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn-cream:hover { background: var(--verm); border-color: var(--verm); color: var(--paper); }

/* ---------- Header ------------------------------------------------------- */
/* No backdrop-filter / filter / transform on .site-header: any of them make it the
   containing block for the fixed mobile menu and collapse it into the bar. */

.topbar { height: 9px; background: var(--verm); }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}
.nav-shell { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 74px; }

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand img { height: 40px; width: 40px; }
.brand-word { display: block; font-family: var(--display); font-size: 20px; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; }
.brand-word span { display: block; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.24em; color: var(--verm); margin-top: 4px; }

.site-menu { display: flex; align-items: center; gap: 4px; }
.site-menu a {
  font-family: var(--mono); font-size: 13.5px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 9px 13px; transition: background .12s, color .12s;
}
.site-menu a:hover { background: var(--ink); color: var(--paper); }
.site-menu .nav-call { background: var(--verm); color: var(--paper); margin-left: 8px; }
.site-menu .nav-call:hover { background: var(--ink); }

.menu-toggle {
  display: none; flex-direction: column; gap: 5px; justify-content: center;
  width: 48px; height: 42px; background: var(--ink); border: 0; cursor: pointer; padding: 0 12px;
}
.menu-toggle span { display: block; height: 2px; background: var(--paper); transition: transform .22s, opacity .15s; }

@media (max-width: 1020px) {
  .menu-toggle { display: flex; }
  .site-menu {
    position: fixed; inset: 83px 0 0 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 0 0 60px;
    background-color: var(--paper);
    border-top: 2px solid var(--ink);
    overflow-y: auto;
    transform: translateX(100%); transition: transform .26s ease-out;
  }
  body.menu-open { overflow: hidden; }
  body.menu-open .site-menu { transform: translateX(0); }
  .site-menu a {
    font-family: var(--display); font-size: 30px; letter-spacing: -0.02em;
    padding: 22px var(--gut); border-bottom: 2px solid var(--ink);
  }
  .site-menu .nav-call { margin: 0; font-size: 26px; }
  body.menu-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
  body.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Hero: poster cover ------------------------------------------ */

.cover { border-bottom: 2px solid var(--ink); }
.cover-grid {
  display: grid; grid-template-columns: 1.06fr 0.94fr;
  align-items: stretch; gap: 0;
}
.cover-copy { padding: clamp(38px, 4vw, 60px) clamp(28px, 4vw, 56px) clamp(38px, 4vw, 60px) 0; display: flex; flex-direction: column; justify-content: center; }
.cover-copy > * + * { margin-top: 20px; }
.cover h1 { max-width: 17ch; }
/* the meta-description h2, set as body copy so it reads as a standfirst */
.cover-copy h2 {
  font-family: var(--body); font-size: clamp(19px, 1.6vw, 24px); font-weight: 400;
  text-transform: none; line-height: 1.45; letter-spacing: 0; color: var(--ink-soft);
  max-width: 46ch;
}
.cover-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.cover-art { position: relative; border-left: 2px solid var(--ink); min-height: 420px; }
/* object-position favours the lower half: these are car photos, and a centre crop
   on a portrait frame gives you a wall. */
.cover-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
/* Rotated letterpress stamp. This is the piece people remember. */
.stamp {
  position: absolute; left: -54px; bottom: 44px; z-index: 2;
  width: 148px; height: 148px; border-radius: 50%;
  border: 3px solid var(--paper); background: var(--verm); color: var(--paper);
  display: grid; place-content: center; text-align: center;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.5;
  transform: rotate(-13deg);
}
.stamp b { display: block; font-family: var(--display); font-size: 33px; letter-spacing: -0.02em; line-height: 1; margin: 3px 0; }

@media (max-width: 900px) {
  .cover-grid { grid-template-columns: 1fr; }
  .cover-art { border-left: 0; border-bottom: 2px solid var(--ink); min-height: 340px; order: -1; }
  .cover-copy { padding: clamp(34px, 7vw, 52px) 0; }
  .stamp { left: auto; right: 18px; bottom: 18px; width: 116px; height: 116px; font-size: 9.5px; }
  .stamp b { font-size: 25px; }
}

/* ---------- Data plate --------------------------------------------------- */
/* Replaces the "stat counter" row every AI site ships. Reads as a spec plate. */

.plate { background: var(--ink); color: var(--paper); }
.plate-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.plate-grid > div { padding: 22px 26px; border-left: 1px solid rgba(243, 239, 229, 0.22); }
.plate-grid > div:first-child { border-left: 0; }
.plate-grid dt { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--verm); }
.plate-grid dd { font-family: var(--display); font-size: clamp(17px, 1.5vw, 21px); text-transform: uppercase; margin-top: 7px; line-height: 1.05; }
@media (max-width: 760px) {
  .plate-grid { grid-template-columns: 1fr 1fr; }
  .plate-grid > div:nth-child(3) { border-left: 0; }
  .plate-grid > div:nth-child(n+3) { border-top: 1px solid rgba(243, 239, 229, 0.22); }
}

/* ---------- Sections + rules -------------------------------------------- */

.band { padding: clamp(56px, 7vw, 104px) 0; border-bottom: 2px solid var(--ink); }
.band-2 { background: var(--paper-2); }
.band-ink { background: var(--ink); color: var(--paper); }
.band-ink p { color: #C9C3B4; }
.band-ink .label { color: var(--verm); }
.band-ink .lede { color: var(--paper); }

.head { display: grid; grid-template-columns: auto 1fr; gap: 20px 30px; align-items: start; margin-bottom: clamp(34px, 4vw, 54px); }
.head-num {
  font-family: var(--display); font-size: clamp(46px, 5.5vw, 78px); line-height: 0.8;
  color: transparent; -webkit-text-stroke: 2px var(--ink); letter-spacing: -0.03em;
}
.band-ink .head-num { -webkit-text-stroke-color: var(--paper); }
.head-text > * + * { margin-top: 14px; }
.head-text h2 { max-width: 24ch; }
.head-text p { max-width: 62ch; }
@media (max-width: 640px) { .head { grid-template-columns: 1fr; } .head-num { font-size: 44px; } }

/* Diagonal vermillion cut. Pure pizazz, costs nothing, and no AI default does it. */
.slash {
  height: 46px; background: var(--verm); border-bottom: 2px solid var(--ink);
  overflow: hidden; position: relative;
}
.slash::before {
  content: ''; position: absolute; inset: -10px -20px;
  background: repeating-linear-gradient(115deg, var(--ink) 0 14px, transparent 14px 44px);
}

/* ---------- Services: numbered index, not cards ------------------------- */

.index { border-top: 2px solid var(--ink); }
.index-row {
  display: grid; grid-template-columns: 88px 1fr auto;
  align-items: center; gap: 24px;
  padding: 26px 20px 26px 8px;
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: background .14s, color .14s, padding-left .14s;
}
.index-row:hover { background: var(--ink); color: var(--paper); padding-left: 22px; }
.index-row:hover p, .index-row:hover .index-price { color: var(--paper); }
.index-row:hover .index-num { color: var(--verm); -webkit-text-stroke-color: var(--verm); }
.index-num {
  font-family: var(--display); font-size: 40px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--ink-mute); letter-spacing: -0.03em;
  transition: color .14s, -webkit-text-stroke-color .14s;
}
.index-main h3 { margin-bottom: 6px; }
.index-main p { font-size: 16.5px; max-width: 64ch; line-height: 1.45; transition: color .14s; }
.index-price { font-family: var(--mono); font-size: 15px; font-weight: 700; white-space: nowrap; text-align: right; transition: color .14s; }
.index-price small { display: block; font-size: 11px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-top: 4px; }
.index-row:hover .index-price small { color: var(--verm); }
@media (max-width: 720px) {
  .index-row { grid-template-columns: 54px 1fr; gap: 14px; padding: 20px 8px; }
  .index-num { font-size: 30px; }
  .index-price { grid-column: 2; text-align: left; margin-top: 8px; }
}

/* ---------- Printed menu: dot leaders ----------------------------------- */

.menu-block + .menu-block { margin-top: clamp(38px, 4vw, 58px); }
.menu-cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 4px;
}
.menu-cap h3 { font-size: clamp(17px, 1.5vw, 21px); }
.menu-cap span { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }

.menu-row { display: flex; align-items: baseline; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.menu-row .m-name { font-size: 17.5px; color: var(--ink); }
.menu-row .m-name small { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); margin-top: 3px; }
.menu-row .m-dots { flex: 1; border-bottom: 2px dotted var(--rule); transform: translateY(-4px); min-width: 24px; }
.menu-row .m-price { font-family: var(--mono); font-size: 16px; font-weight: 700; white-space: nowrap; }
.menu-row .m-price em { font-style: normal; color: var(--verm); }

/* Tiered price table, printed-catalogue style */
.tiers { width: 100%; border-collapse: collapse; }
.tiers caption { caption-side: bottom; text-align: left; padding-top: 16px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; color: var(--ink-mute); }
.tiers th, .tiers td { text-align: left; padding: 16px 14px; border-bottom: 1px solid var(--rule); }
.tiers thead th {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--paper); background: var(--ink);
}
.tiers tbody th { font-family: var(--display); font-size: 18px; text-transform: uppercase; letter-spacing: -0.01em; }
.tiers tbody th small { display: block; font-family: var(--body); font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--ink-mute); margin-top: 4px; line-height: 1.35; }
.tiers td { font-family: var(--mono); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tiers tbody tr:hover { background: var(--paper-3); }
.tiers .tag { display: inline-block; background: var(--verm); color: var(--paper); font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; padding: 3px 7px; margin-left: 8px; vertical-align: 2px; }
.tiers-scroll { overflow-x: auto; border: 2px solid var(--ink); }
.tiers-scroll .tiers { min-width: 620px; }
.tiers-scroll .tiers th:first-child, .tiers-scroll .tiers td:first-child { padding-left: 20px; }

/* ---------- Plates: 2x2 editorial notes --------------------------------- */

.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.note { padding: 30px 28px 34px; border-bottom: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.note:first-child { border-left: 0; }
.band-ink .notes, .band-ink .note { border-color: rgba(243, 239, 229, 0.24); }
.note-num { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--verm); }
.note h3 { margin: 14px 0 11px; }
.note p { font-size: 16.5px; line-height: 1.5; }
@media (max-width: 720px) { .note { border-left: 0; } }

/* ---------- Two-column features ---------------------------------------- */

.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(30px, 4.5vw, 64px); align-items: start; }
.split > div > * + * { margin-top: 20px; }
.split-flip > figure { order: -1; }
.split figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 2px solid var(--ink); }
.band-ink .split figure img { border-color: var(--paper); }
.split figcaption { margin-top: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.band-ink .split figcaption { color: #9A948A; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }

/* Spec list, mono keys against the rule */
.specs { border-top: 2px solid currentColor; }
.specs div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.band-ink .specs div { border-bottom-color: rgba(243, 239, 229, 0.24); }
.specs dt { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); padding-top: 3px; }
.band-ink .specs dt { color: #9A948A; }
.specs dd { font-family: var(--display); font-size: 16px; text-transform: uppercase; text-align: right; letter-spacing: -0.01em; }

/* ---------- Service detail --------------------------------------------- */

.detail { display: grid; grid-template-columns: 1.32fr 0.68fr; gap: clamp(30px, 4vw, 58px); align-items: start; }
.detail-body > * + * { margin-top: 20px; }
.detail-body h2 { margin-bottom: 4px; }
.ticket { border: 2px solid var(--ink); position: sticky; top: 92px; }
.ticket-head { background: var(--ink); color: var(--paper); padding: 16px 20px; display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.ticket-head span { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--verm); }
.ticket-head b { font-family: var(--mono); font-size: 17px; font-weight: 700; }
.ticket-body { padding: 22px 20px 24px; }
.ticket-body h3 { font-size: 15px; margin-bottom: 14px; }
.ticket-body ul { list-style: none; }
.ticket-body li { position: relative; padding: 8px 0 8px 22px; font-size: 16px; color: var(--ink-soft); border-bottom: 1px dotted var(--rule); line-height: 1.4; }
.ticket-body li::before { content: ''; position: absolute; left: 0; top: 15px; width: 10px; height: 2px; background: var(--verm); }
.ticket-add { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 15.5px; border-bottom: 1px dotted var(--rule); }
.ticket-add b { font-family: var(--mono); color: var(--verm); white-space: nowrap; }
.ticket-note { margin-top: 16px; font-family: var(--mono); font-size: 11.5px; line-height: 1.6; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-mute); }
@media (max-width: 880px) { .detail { grid-template-columns: 1fr; } .ticket { position: static; } }

/* ---------- Area directory -------------------------------------------- */

.directory { display: grid; grid-template-columns: repeat(auto-fit, minmax(292px, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.dir-item {
  display: block; padding: 22px 24px 24px; border-bottom: 1px solid var(--rule); border-left: 1px solid var(--rule);
  transition: background .14s, color .14s;
}
.dir-item:first-child { border-left: 0; }
.dir-item:hover { background: var(--verm); color: var(--paper); }
.dir-item:hover p, .dir-item:hover .dir-tag { color: var(--paper); }
.dir-item h3 { font-size: 22px; }
.dir-item p { font-size: 15.5px; margin-top: 7px; line-height: 1.45; }
.dir-tag { display: block; margin-top: 12px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
@media (max-width: 720px) { .dir-item { border-left: 0; } }

/* Chips: hard-edged tags */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em;
  padding: 9px 13px; border: 1px solid var(--ink); transition: background .12s, color .12s;
}
.chips a:hover { background: var(--ink); color: var(--paper); }
.band-ink .chips a { border-color: rgba(243, 239, 229, 0.4); }
.band-ink .chips a:hover { background: var(--paper); color: var(--ink); }

/* ---------- Photo contact sheet --------------------------------------- */

.sheet { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0; border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); }
.sheet figure { position: relative; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.sheet img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sheet figcaption {
  position: absolute; left: 0; bottom: 0; background: var(--paper); color: var(--ink);
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 6px 10px; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink);
}

/* ---------- FAQ -------------------------------------------------------- */

.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 22px 52px 22px 0;
  font-family: var(--display); font-size: clamp(17px, 1.6vw, 21px);
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.15;
  transition: color .14s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 6px; top: 20px;
  font-family: var(--mono); font-size: 26px; font-weight: 700; color: var(--verm); line-height: 1;
  transition: transform .2s;
}
.faq details[open] summary { color: var(--verm); }
.faq details[open] summary::after { content: '\2013'; }
.faq summary:hover { color: var(--verm); }
.faq details p { padding: 0 52px 24px 0; font-size: 17px; }

/* ---------- Call band -------------------------------------------------- */

.call { background: var(--verm); color: var(--paper); border-bottom: 2px solid var(--ink); }
/* padding-block only. This element is also the .shell, and a `padding: Y 0`
   shorthand here silently zeroed the shell's horizontal gutter, so the headline
   and the phone number both ran off the edges of the page. */
.call-grid {
  display: flex; align-items: center; justify-content: space-between;
  gap: 34px; flex-wrap: wrap;
  padding-top: clamp(44px, 5vw, 72px); padding-bottom: clamp(44px, 5vw, 72px);
}
.call-grid > div { flex: 1 1 380px; min-width: 0; }
.call-grid > div > * + * { margin-top: 16px; }
/* h2 is capped well below the global scale: this band also carries a nowrap phone
   number, and at the full 48px the pair overflowed the shell in both directions. */
.call h2 { font-size: clamp(26px, 2.9vw, 40px); max-width: 20ch; }
.call p { color: #FBE6E1; max-width: 54ch; }
.call .label { color: var(--paper); }
/* The global .em is vermillion, which is invisible on this band. Black instead. */
.call .em { color: var(--ink); }
.call-num { flex: 0 0 auto; font-family: var(--display); font-size: clamp(25px, 2.7vw, 38px); white-space: nowrap; border-bottom: 4px solid var(--paper); padding-bottom: 4px; transition: color .14s, border-color .14s; }
.call-num:hover { color: var(--ink); border-color: var(--ink); }
@media (max-width: 860px) { .call-grid { flex-direction: column; align-items: flex-start; } }

/* ---------- Contact / form -------------------------------------------- */

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4.5vw, 60px); align-items: start; }
.contact > div > * + * { margin-top: 20px; }
.rows { border-top: 2px solid var(--ink); }
.rows a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 17px 4px; border-bottom: 1px solid var(--rule); transition: background .14s, padding .14s; }
.rows a:hover { background: var(--paper-3); padding-left: 14px; padding-right: 14px; }
.rows dt { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.rows dd { font-family: var(--display); font-size: clamp(16px, 1.5vw, 20px); text-transform: uppercase; text-align: right; letter-spacing: -0.01em; }

.form-box { border: 2px solid var(--ink); }
.form-box iframe { width: 100%; border: 0; display: block; min-height: 720px; background: var(--paper); }
.form-fallback { padding: 34px 28px 38px; text-align: center; }
.form-fallback > * + * { margin-top: 16px; }
.form-fallback .btn { justify-content: center; }
@media (max-width: 880px) { .contact { grid-template-columns: 1fr; } }

/* ---------- Footer ---------------------------------------------------- */

.footer { background: var(--ink); color: var(--paper); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 40px; padding: clamp(48px, 5.5vw, 76px) var(--gut) clamp(32px, 4vw, 46px); }
.footer h2 { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: none; color: var(--verm); margin-bottom: 16px; line-height: 1; }
.footer a:not(.text-link):not(.footer-num) { display: block; font-family: var(--mono); font-size: 13.5px; color: #C9C3B4; padding: 6px 0; transition: color .14s, transform .14s; }
.footer a:not(.text-link):not(.footer-num):hover { color: var(--paper); transform: translateX(4px); }
.footer p { color: #9A948A; font-size: 16px; margin-bottom: 14px; }
.footer-mark { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer-mark img { width: 46px; height: 46px; }
.footer-mark b { font-family: var(--display); font-size: 21px; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; }
.footer-num { font-family: var(--display); font-size: 27px; text-transform: uppercase; border-bottom: 3px solid var(--verm); padding-bottom: 3px; }
.footer-num:hover { color: var(--verm); }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  border-top: 1px solid rgba(243, 239, 229, 0.22); padding: 20px var(--gut) 28px;
  font-family: var(--mono); font-size: 12px; color: #9A948A;
}
.footer-bottom a { color: #9A948A; margin-left: 20px; }
.footer-bottom a:hover { color: var(--verm); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- Legal / 404 ---------------------------------------------- */

.masthead { padding: clamp(44px, 5vw, 76px) 0 clamp(24px, 3vw, 34px); border-bottom: 2px solid var(--ink); }
.masthead > .shell > * + * { margin-top: 16px; }
.masthead h1 { font-size: clamp(34px, 5vw, 62px); }
.masthead h2 { font-family: var(--body); font-size: 19px; font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.5; color: var(--ink-soft); max-width: 60ch; }

.legal { max-width: 820px; }
.legal h2 { font-size: clamp(21px, 2vw, 27px); margin: 36px 0 13px; }
.legal h3 { margin: 24px 0 10px; }
.legal p, .legal li { font-size: 17px; color: var(--ink-soft); }
.legal ul, .legal ol { margin: 13px 0 13px 22px; display: grid; gap: 7px; }
.legal a { color: var(--verm); text-decoration: underline; text-underline-offset: 3px; }

.lost { padding: clamp(70px, 10vw, 150px) 0; text-align: center; }
.lost > .shell > * + * { margin-top: 20px; }
.lost h2 { font-family: var(--body); font-size: 19px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-soft); max-width: 52ch; margin-inline: auto; }
.lost .cover-actions { justify-content: center; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }