/* ============================================================
   TOKENS: light is the base; dark redefines tokens only.
   ============================================================ */
:root {
  --paper:      #EDEFF2;
  --surface:    #FFFFFF;
  --surface-2:  #E3E7EB;
  --ink:        #101519;
  --ink-2:      #4A5560;
  --ink-3:      #6E7A85;
  --line:       #CFD6DC;
  --line-soft:  #DFE4E9;
  --blue:       #16386B;
  --blue-hi:    #1E4E93;
  --amber:      #B87503;
  --amber-mark: #E8A916;
  --closed:     #5C6873;
  --win-bg:     #DCEFDF;
  --win-line:   #2F7D4A;

  --display: "Helvetica Neue", "Arial Nova", Arial, "Liberation Sans", sans-serif;
  --body:    Charter, "Bitstream Charter", Georgia, "Times New Roman", serif;
  --mono:    ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "DejaVu Sans Mono", monospace;

  --fs-hero:  clamp(2.35rem, 7.2vw, 5.25rem);
  --fs-h2:    clamp(1.45rem, 3.1vw, 2.15rem);
  --fs-h3:    1.0625rem;
  --fs-body:  1.0625rem;
  --fs-sm:    0.9rem;
  --fs-label: 0.7rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:     #0C1116;
    --surface:   #131A21;
    --surface-2: #1B242D;
    --ink:       #E2E7EC;
    --ink-2:     #9DA9B4;
    --ink-3:     #77838E;
    --line:      #26313B;
    --line-soft: #1D262F;
    --blue:      #8FB2E0;
    --blue-hi:   #A9C6EC;
    --amber:     #E9AE2E;
    --amber-mark:#F0B93F;
    --closed:    #98A3AE;
    --win-bg:    #15301E;
    --win-line:  #5FBE81;
  }
}
:root[data-theme="dark"] {
  --paper:     #0C1116;
  --surface:   #131A21;
  --surface-2: #1B242D;
  --ink:       #E2E7EC;
  --ink-2:     #9DA9B4;
  --ink-3:     #77838E;
  --line:      #26313B;
  --line-soft: #1D262F;
  --blue:      #8FB2E0;
  --blue-hi:   #A9C6EC;
  --amber:     #E9AE2E;
  --amber-mark:#F0B93F;
  --closed:    #98A3AE;
  --win-bg:    #15301E;
  --win-line:  #5FBE81;
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.62;
}

a { color: var(--blue); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-hi); }
:focus-visible { outline: 2px solid var(--amber-mark); outline-offset: 3px; border-radius: 2px; }

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
  line-height: 1.05;
}

p { margin: 0; }

.label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}

.num { font-variant-numeric: tabular-nums; }

/* ============================================================
   HEADER
   ============================================================ */
.spine {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
}

.spine-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem clamp(1.1rem, 4vw, 2rem);
}

.mark {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-decoration: none;
  color: inherit;
  margin-right: auto;
}
.mark b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -0.025em;
  line-height: 1;
}
.mark span {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.nav { display: none; }
.nav a {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--amber-mark); }

.call {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--blue);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.6rem 0.95rem;
  border-radius: 2px;
  white-space: nowrap;
}
.call:hover { background: var(--blue-hi); color: var(--paper); }
.call svg { width: 14px; height: 14px; fill: currentColor; flex: none; }

/* Theme toggle. Shows the icon of the theme you will GET, not the one you are in. */
.themetog {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  flex: none;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-2);
  border-radius: 2px;
  cursor: pointer;
}
.themetog:hover { border-color: var(--ink-3); color: var(--ink); }
.themetog svg { width: 16px; height: 16px; fill: currentColor; }

/* light is the base: offer the moon */
.themetog .ico-sun  { display: none; }
.themetog .ico-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .themetog .ico-sun  { display: block; }
  :root:not([data-theme="light"]) .themetog .ico-moon { display: none; }
}
:root[data-theme="dark"]  .themetog .ico-sun  { display: block; }
:root[data-theme="dark"]  .themetog .ico-moon { display: none; }
:root[data-theme="light"] .themetog .ico-sun  { display: none; }
:root[data-theme="light"] .themetog .ico-moon { display: block; }

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
main { display: flex; flex-direction: column; }

.wrap {
  max-width: 74ch;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
  width: 100%;
}
.wrap-wide { max-width: 1200px; }
/* Tool pages (pay scales, apply card, application form) are operated, not read,
   so they take the width a desktop actually has. Prose inside them stays capped. */
.wrap-max  { max-width: 1440px; }

.band {
  padding-block: clamp(3rem, 8vw, 5.5rem);
  border-top: 1px solid var(--line-soft);
}
.band-flush { border-top: 0; padding-block: 0; }
.band-alt { background: var(--surface); }

.stack { display: flex; flex-direction: column; gap: 1.15rem; }
.stack-lg { display: flex; flex-direction: column; gap: 2.25rem; }

.eyebrow-rule { display: flex; align-items: center; gap: 0.75rem; }
.eyebrow-rule::after { content: ""; height: 1px; flex: 1; background: var(--line); }

/* ============================================================
   HERO
   ============================================================ */
/* Top padding kept tight so the whole headline clears the fold on a laptop.
   It was 104px at desktop, which pushed the last line under the viewport. */
.hero { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.25rem, 6vw, 3.5rem); border-top: 0; }

.hero h1 {
  font-size: var(--fs-hero);
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.95;
  max-width: 16ch;
}
.hero h1 .dim { color: var(--ink-3); font-weight: 700; }
/* The three payoff words carry the accent as type colour. A marker band behind
   uppercase at this weight never sat right across the line break. */
.hero h1 .hit { color: var(--amber); }

.hero-sub { max-width: 52ch; color: var(--ink-2); font-size: 1.15rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0.6rem 0.95rem;
  border-radius: 2px;
}
.btn-ghost:hover { border-color: var(--ink-3); color: var(--ink); }

.hero-line { animation: rise .6s cubic-bezier(.2,.7,.3,1) backwards; }
.hero-line:nth-child(1) { animation-delay: .02s; }
.hero-line:nth-child(2) { animation-delay: .10s; }
.hero-line:nth-child(3) { animation-delay: .18s; }
.hero-line:nth-child(4) { animation-delay: .26s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

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

/* Shop photo as a keyhole: the band is as wide as the window, but the photo
   inside it is pinned to its natural 1080x600 and never scaled. A narrow
   window crops it from both sides instead of shrinking it. */
.bleed {
  position: relative;
  overflow: hidden;
  height: clamp(13rem, 30vw, 23.5rem);
  /* Never wider than the photo itself, so a big monitor shows the full frame
     rather than bars of empty ground beside it. */
  /* width:100% is load-bearing here. As a flex item with auto side margins
     the stretch is cancelled, so without it this sizes to the 1080px photo
     and overflows any viewport narrower than that. */
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
}
.bleed img {
  width: 1080px;
  height: 600px;
  max-width: none;
  flex: none;
}
.bleed figcaption {
  position: absolute;
  left: 0; bottom: 0;
  background: var(--surface);
  border-top: 2px solid var(--amber-mark);
  padding: 0.5rem 0.85rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ============================================================
   SPEC STRIP
   ============================================================ */
.spec {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  margin: 0;
}
.spec > div {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: var(--surface);
}
.spec dt { margin: 0; }
.spec dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.45;
}
.spec dd a { text-decoration: none; }
.spec .hint { color: var(--ink-3); font-size: 0.78rem; }
.spec .todo { color: var(--amber); }

/* ============================================================
   SERVICE CARDS
   ============================================================ */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.card {
  background: var(--surface);
  padding: 1.4rem 1.35rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
  transition: background .18s ease;
}
.card:hover { background: var(--surface-2); color: inherit; }
/* Locksmith card carries its whole story, so it is a panel rather than a link. */
.card-static { cursor: default; }
.card-static:hover { background: var(--surface); }
.more-static { color: var(--ink-3); }
.card h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; }
.card p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
.card .more {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  padding-top: 0.4rem;
}
.card-new { box-shadow: inset 0 3px 0 var(--amber-mark); }
.tag-new {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #101519;
  background: var(--amber-mark);
  padding: 0.15rem 0.4rem;
  border-radius: 2px;
  align-self: flex-start;
  font-weight: 700;
}

/* ============================================================
   THE MATH
   ============================================================ */
.math {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(1.25rem, 4vw, 2rem);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.bar-row { display: flex; flex-direction: column; gap: 0.4rem; }
.bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-2);
}
.bar-head strong { color: var(--ink); font-size: 0.95rem; font-weight: 700; }
.bar-track { height: 10px; background: var(--surface-2); border-radius: 1px; overflow: hidden; }
/* Width comes from --bar so each comparison can carry its own ratio without a
   one-off inline style. The neglected bar is always the 100% reference. */
.bar-fill { height: 100%; width: var(--bar, 100%); }
.bar-good { background: var(--blue); }
.bar-bad  { background: var(--amber-mark); }
.bar-18t  { --bar: 28.3%; }   /* 1667 / 5900, turbo 1.8T */
.bar-20l  { --bar: 33.5%; }   /* 1142 / 3410, 2.0L 8v   */
.math figcaption { font-size: var(--fs-sm); color: var(--ink-2); }

/* ============================================================
   PULL QUOTE
   ============================================================ */
.pull {
  border-left: 3px solid var(--amber-mark);
  padding-left: clamp(1rem, 3vw, 1.75rem);
  margin: 0;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  line-height: 1.35;
  font-style: italic;
}
.pull cite {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--ink-3);
}

/* ============================================================
   CREW
   ============================================================ */
.crew { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; }
.crew img { width: 100%; border: 1px solid var(--line); }
.crew-copy h2 { font-size: clamp(1.3rem, 2.6vw, 1.75rem); }
/* :not(.label) so this doesn't outrank .label and restyle the eyebrow, which
   is also a <p> in this block. */
.crew-copy p:not(.label) { color: var(--ink-2); font-size: var(--fs-sm); }

/* ============================================================
   GUIDE INDEX
   ============================================================ */
.guides { display: flex; flex-direction: column; }
.guide {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 0 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: inherit;
  align-items: start;
}
.guide:first-child { border-top: 1px solid var(--line-soft); }
.guide:hover { color: inherit; }
.guide:hover .g-title { color: var(--blue); }
.guide img {
  grid-row: 1 / span 3;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
}
.g-cat { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.g-title { font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; line-height: 1.25; margin-top: 0.15rem; }
.g-desc { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 0.2rem; }

/* ============================================================
   HOURS
   ============================================================ */
.hours {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(1.25rem, 4vw, 1.85rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.week { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
.week-group { display: flex; flex-direction: column; gap: 0.5rem; }
.week-head {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
}
.days { display: grid; gap: 4px; }
.days-4 { grid-template-columns: repeat(4, 1fr); }
.days-3 { grid-template-columns: repeat(3, 1fr); }
.day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 0.3rem;
  min-height: 4rem;
  padding: 0.6rem 0.3rem;
  border-radius: 2px;
  background: var(--surface-2);
  font-family: var(--mono);
}
.day b { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--ink-3); }
.day span { font-size: 0.66rem; font-weight: 700; color: var(--closed); letter-spacing: 0.01em; line-height: 1.3; }
.day-open { background: var(--blue); }
.day-open b { color: var(--paper); }
.day-open span { color: var(--paper); opacity: .85; }
.hours-line {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.35rem, 3.4vw, 1.9rem);
  letter-spacing: -0.025em;
}
.hours-note { font-size: var(--fs-sm); color: var(--ink-2); }

/* ============================================================
   ADDRESS + MAP LINKS
   ============================================================ */
.addr {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(1.25rem, 4vw, 1.85rem);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.addr-lead { display: flex; flex-direction: column; gap: 0.6rem; }
.addr address {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
}

.warn {
  border-left: 3px solid var(--amber-mark);
  background: var(--surface-2);
  padding: 0.9rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.warn b { font-family: var(--display); font-size: 0.95rem; letter-spacing: -0.01em; }
.warn p { font-size: var(--fs-sm); color: var(--ink-2); }

.maplinks { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.maplink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 0.58rem 0.9rem;
  border-radius: 2px;
  white-space: nowrap;
}
.maplink:hover { border-color: var(--ink-3); color: var(--ink); background: var(--surface-2); }
.maplink svg { width: 13px; height: 13px; fill: currentColor; flex: none; }

/* ============================================================
   CALL TWICE CALLOUT
   ============================================================ */
.twice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber-mark);
  background: var(--surface);
  padding: clamp(1.15rem, 3.5vw, 1.6rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.twice h3 { font-size: 1.1rem; }
.twice p { font-size: var(--fs-sm); color: var(--ink-2); }
.twice ol {
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  counter-reset: step;
}
/* Flex, not grid: a grid container promotes each run of loose text and each
   inline child to its own grid item, which split "Dial" from the phone link
   and squeezed the number into the 1.5rem counter column. The inner <span>
   keeps each step as one item either way. */
.twice li {
  counter-increment: step;
  display: flex;
  gap: 0.65rem;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--ink);
}
.twice li > span { flex: 1; min-width: 0; }
.twice li a { white-space: nowrap; }
.twice li::before {
  content: counter(step);
  flex: none;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--paper);
  background: var(--ink-2);
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  align-self: start;
}

/* ============================================================
   ARTICLE PAGES
   ============================================================ */
.crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.crumb a { color: var(--ink-3); text-decoration: none; }
.crumb a:hover { color: var(--blue); }
.crumb span { color: var(--line); }

.art-head { padding-block: clamp(2.25rem, 6vw, 3.75rem) clamp(1.5rem, 4vw, 2.25rem); border-top: 0; }
.art-head h1 {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  max-width: 20ch;
}
.art-standfirst { font-size: 1.12rem; color: var(--ink-2); max-width: 54ch; }

.prose { display: flex; flex-direction: column; gap: 1.2rem; }
.prose h2 {
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  margin-top: 1rem;
}
.prose p { max-width: 68ch; }
.prose strong { font-weight: 700; }

/* Requirement / skill lists on the job pages */
.prose ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 1.5rem;
  max-width: 68ch;
}
.prose ul li {
  position: relative;
  padding-left: 1.35rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--amber-mark);
  border-radius: 1px;
}

.terms {
  border: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  overflow: hidden;
}
.terms > div {
  background: var(--surface);
  padding: 0.9rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  box-shadow: 0 1px 0 var(--line);
}
.terms dd { margin: 0; font-family: var(--mono); font-size: 0.88rem; line-height: 1.45; }
.terms .todo { color: var(--amber); }

/* Photo grid. Thumbnails open the full-resolution original. */
.shots {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0.5rem 0;
}
.shot { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.shot button {
  padding: 0;
  border: 1px solid var(--line);
  background: var(--surface-2);
  cursor: zoom-in;
  display: block;
  width: 100%;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.shot button:hover { border-color: var(--ink-3); }
.shot img { width: 100%; height: auto; }
.shot figcaption { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.shot .zoomtag {
  position: absolute;
  right: 0; bottom: 0;
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25rem 0.45rem;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.art-cta {
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber-mark);
  background: var(--surface);
  padding: clamp(1.15rem, 3.5vw, 1.6rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.art-cta h2 { font-size: 1.1rem; margin-top: 0; }
.art-cta p { font-size: var(--fs-sm); color: var(--ink-2); }

.art-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line-soft);
  padding-top: 1.25rem;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.art-foot a { text-decoration: none; }

/* Lightbox */
.lb {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(6, 9, 12, .93);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2.5rem);
}
.lb[open] { display: flex; }
.lb img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  border: 1px solid #2A3540;
}
.lb-inner { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; max-width: 100%; }
.lb-cap {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: #C6CFD8;
  text-align: center;
  max-width: 70ch;
  line-height: 1.5;
}
.lb-close {
  position: absolute;
  top: clamp(0.6rem, 2vw, 1.25rem);
  right: clamp(0.6rem, 2vw, 1.25rem);
  background: #1B242D;
  color: #E2E7EC;
  border: 1px solid #38434F;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 0.8rem;
  border-radius: 2px;
  cursor: pointer;
}
.lb-close:hover { background: #26313B; }

/* ============================================================
   PAY SCALE WIDGET
   One rectangle per level. Rate bars drag vertically on the left and right,
   hour bars drag horizontally across the top and bottom. The two totals sit
   inside; whichever is greater turns green.
   ============================================================ */
.scale {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(1rem, 3vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.scale-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.75rem; }
.scale-head h3 { font-size: 1.15rem; }
.scale-head .rate {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.scale-def {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 76ch;
}

.disclaimer {
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-3);
  background: var(--surface);
  padding: 1rem 1.15rem;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 76ch;
}
.disclaimer b {
  display: block;
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

/* mobile first: everything stacks, all bars horizontal */
.scale-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }

.ax { display: flex; flex-direction: column; gap: 0.25rem; }
.ax label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ax output { font-size: 0.85rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; }
.ax input[type="range"] { width: 100%; height: 1.5rem; accent-color: var(--blue); cursor: grab; margin: 0; }
.ax input[type="range"]:active { cursor: grabbing; }

.panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  min-height: 8.5rem;
}
.half {
  background: var(--surface-2);
  padding: 0.85rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  justify-content: center;
  transition: background .18s ease;
}
.half.win { background: var(--win-bg); box-shadow: inset 0 3px 0 var(--win-line); }
.half-lbl {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.half.win .half-lbl { color: var(--win-line); }
.half-amt {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.25rem, 3.4vw, 1.7rem);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.half-work { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-2); line-height: 1.5; }

.scale-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem 1rem;
  border-top: 1px solid var(--line-soft);
  padding-top: 0.8rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-2);
}
.scale-foot b { font-family: var(--display); font-size: 1.15rem; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.scale-apply { display: flex; }
.scale-apply .call { width: 100%; justify-content: center; }

/* ============================================================
   APPLY CONFIRMATION CARD
   ============================================================ */
.confirm {
  border: 1px solid var(--line);
  border-top: 3px solid var(--amber-mark);
  background: var(--surface);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 1100px;
}
/* Give the card its width back as columns rather than as longer lines. */
.confirm-cols { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
.confirm p { max-width: 62ch; }
.confirm .lead { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.confirm h2 {
  font-size: clamp(1.5rem, 4vw, 2.15rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.confirm h2 .lvl { color: var(--amber); }
.confirm .recap {
  border: 1px solid var(--line);
  background: var(--surface-2);
  padding: 0.9rem 1rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.confirm .recap b { color: var(--ink); }
.confirm p { font-size: var(--fs-sm); color: var(--ink-2); }
.confirm-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; }
.confirm-pick { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.terms-list {
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber-mark);
  background: var(--surface-2);
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.terms-list b {
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.terms-list ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.45rem; }
.terms-list li {
  position: relative;
  padding-left: 1.35rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-2);
}
.terms-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--amber-mark);
  border-radius: 1px;
}

/* desktop: bars move to the four edges of the rectangle */
@media (min-width: 46rem) {
  .scale-grid {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr auto;
    gap: 0.6rem;
    align-items: stretch;
  }
  .ax-top    { grid-column: 2; grid-row: 1; }
  .ax-bottom { grid-column: 2; grid-row: 3; }
  .panel     { grid-column: 2; grid-row: 2; }
  .ax-left   { grid-column: 1; grid-row: 2; }
  .ax-right  { grid-column: 3; grid-row: 2; }

  .ax-left, .ax-right { flex-direction: row; align-items: stretch; gap: 0.3rem; }
  .ax-left label, .ax-right label {
    writing-mode: vertical-rl;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
  }
  .ax-left label { transform: rotate(180deg); }
  .ax-left input[type="range"], .ax-right input[type="range"] {
    writing-mode: vertical-lr;
    direction: rtl;
    -webkit-appearance: slider-vertical;
    width: 1.5rem;
    height: auto;
    min-height: 8.5rem;
  }
}

/* ============================================================
   APPLICATION FORM
   ============================================================ */
.appform { display: flex; flex-direction: column; gap: 1.5rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fs {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(1rem, 3vw, 1.5rem);
  margin: 0;
}
.fs legend {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  padding: 0 0.5rem;
}
.fsec { font-size: 1.15rem; margin-top: 0.5rem; }

.fgrid { display: grid; grid-template-columns: 1fr; gap: 0.9rem; }
.f { display: flex; flex-direction: column; gap: 0.3rem; margin: 0; }
.f label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-2); }
.f label i { font-style: normal; color: var(--amber); }
.f-hint { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-3); line-height: 1.45; }

.f input, .f textarea {
  font: inherit;
  font-size: 0.95rem;
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.55rem 0.65rem;
  width: 100%;
}
.f input:focus, .f textarea:focus { border-color: var(--blue); outline: 2px solid var(--amber-mark); outline-offset: 1px; }
.f input.bad, .f textarea.bad { border-color: var(--amber); background: color-mix(in srgb, var(--amber-mark) 8%, var(--paper)); }
.f textarea { resize: vertical; line-height: 1.5; }

.checks { display: grid; grid-template-columns: 1fr; gap: 0.55rem; margin-bottom: 1rem; }
.chk {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.45;
  cursor: pointer;
}
.chk input { margin: 0.2rem 0 0; accent-color: var(--blue); flex: none; width: 1rem; height: 1rem; }

.fsubmit { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.fsubmit button { border: 0; cursor: pointer; font-size: 0.85rem; padding: 0.8rem 1.4rem; }
.ferr {
  border-left: 3px solid var(--amber-mark);
  background: var(--surface-2);
  padding: 0.75rem 1rem;
  font-size: var(--fs-sm);
  color: var(--ink);
}

/* ============================================================
   SECTION INDEX
   ============================================================ */
.seclist { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.secitem {
  background: var(--surface);
  padding: 1.25rem 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
  transition: background .18s ease;
}
.secitem:hover { background: var(--surface-2); color: inherit; }
.secitem img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--line); }
.secitem h3 { font-size: var(--fs-h3); }
.secitem p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
.secitem .more {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  padding-top: 0.3rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 6vw, 4rem) 6rem;
}
.foot-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.foot h3 { font-size: 0.95rem; margin-bottom: 0.6rem; }
.foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.foot a { font-size: var(--fs-sm); text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.colophon {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  line-height: 1.7;
}

.callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: var(--blue);
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-decoration: none;
  color: var(--paper);
  font-family: var(--mono);
}
.callbar:hover { color: var(--paper); background: var(--blue-hi); }
.callbar b { font-size: 0.95rem; white-space: nowrap; }
.callbar span { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: .82; flex: 1 1 auto; min-width: 0; }

.note {
  border: 1px dashed var(--line);
  padding: 1.15rem 1.25rem;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.note b { color: var(--ink); font-family: var(--display); letter-spacing: -0.01em; }

/* ============================================================
   RESPONSIVE STEPS
   ============================================================ */
@media (min-width: 34rem) {
  .spec { grid-template-columns: 1fr 1fr; }
  .cards { grid-template-columns: 1fr 1fr; }
  .shots { grid-template-columns: 1fr 1fr; }
  .seclist { grid-template-columns: 1fr 1fr; }
  .prose ul { grid-template-columns: 1fr 1fr; }
  .terms { grid-template-columns: 1fr 1fr; }
  .dials { grid-template-columns: 1fr 1fr; }
  .paths { grid-template-columns: 1fr 1fr; }
  .tiers { grid-template-columns: repeat(3, 1fr); }
  .confirm-cols { grid-template-columns: 1fr 1fr; }
  .fgrid { grid-template-columns: 1fr 1fr; }
  .f-2 { grid-column: 1 / -1; }
  .checks { grid-template-columns: 1fr 1fr; }
  .guide { grid-template-columns: 8rem 1fr; gap: 0 1.35rem; }
  .crew { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .week { grid-template-columns: 4fr 3fr; gap: 0.9rem; }
  .foot-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 78rem) {
  .fgrid  { grid-template-columns: repeat(3, 1fr); }
  .checks { grid-template-columns: repeat(3, 1fr); }
  .f-2    { grid-column: 1 / -1; }
}

@media (min-width: 60rem) {
  .nav { display: flex; gap: 1.5rem; align-items: center; }
  .spec { grid-template-columns: repeat(4, 1fr); }
  .callbar { display: none; }
  .foot { padding-bottom: clamp(2.5rem, 6vw, 4rem); }
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}