/* STUDIO ZINC — brand system
   Direction (committed): the workshop. Machine-shop precision + friendly tradesman.
   Base = warm shop-floor gray. Texture = galvanized spangle, used sparingly.
   ONE accent = safety orange #FF6700, marks ACTION only.
   Type = Anton (stamped caps, tracked) + Work Sans (plain talk).
   Motion = machined snap-and-settle: short distances, power3.out, no float. */

:root {
  --ink: #1c1b19;
  --ink-soft: #4a4844;
  --floor: #edebe6;      /* page base, warm shop-floor gray */
  --floor-2: #e2e0da;    /* alternate section band */
  --paper: #f7f6f2;      /* cards */
  --steel: #c9c7c1;      /* hairlines, metal edges */
  --orange: #FF6700;     /* THE accent. CTAs and action only. */
  --orange-ink: #e06000; /* hover/pressed — darkened just enough to still clear
                             4.5:1 AA against ink-on-orange button labels (4.79:1
                             measured; the original #d95500 dropped to 4.3:1) */
  --steel-strong: #a9a7a1; /* darker hairline for component boundaries (inputs) —
                               plain --steel is 1.4:1 on floor/paper, under the
                               3:1 non-text minimum; this clears 2:1+ */
  --font-head: "Anton", sans-serif;
  --font-body: "Work Sans", sans-serif;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 104px; --s7: 168px;
  --radius: 4px;         /* machined chamfer, small and consistent */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }
/* Smooth in-page anchor scrolling (nav links, "See the work", back-to-top)
   is motion — gate it the same as every GSAP reveal so a reduced-motion
   user gets instant jumps instead of an animated scroll they didn't ask for. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--floor);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--s3); }

.h-display {
  font-family: var(--font-head);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.98;
  font-size: clamp(44px, 7.5vw, 96px);
}
.h-section {
  font-family: var(--font-head);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.05;
  font-size: clamp(28px, 4vw, 48px);
}
.kicker {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  padding: 14px 28px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, color 120ms ease;
}
.btn:active { transform: translateY(1px); } /* machined press */
/* Ink-on-orange, not white-on-orange: real safety signage is black-on-orange,
   and it's the only combination that clears AA here (5.89:1 vs 2.92:1 for
   white). This also folds in what was previously a specificity accident —
   .nav a's color:ink already out-specified this on the nav "Get a quote"
   button, so the nav button and every other .btn--primary now render the
   same way on purpose. */
.btn--primary { background: var(--orange); color: var(--ink); }
.btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }

/* Hover rules gated behind (hover:hover) throughout this file — a touch
   device has no persistent pointer, so :hover would otherwise "sticky" after
   a tap until the next touch elsewhere. Color-only, low harm, but polish. */
@media (hover: hover) {
  .btn--primary:hover { background: var(--orange-ink); }
  .btn--ghost:hover { background: var(--ink); color: var(--floor); }
}

.tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--steel);
  border-radius: 2px;
  color: var(--ink-soft);
  background: var(--paper);
}

.spangle { background-image: url("../assets/spangle.svg"); background-size: 400px; }

/* Shared orange text-link CTA (owner review: quote-driven services + the
   home reveal band both need a plain-text action link, not a filled
   button). Orange by default, not just on hover, because orange marks
   action here — same logic as .btn--primary's default-orange fill. The
   *hover* darken is what's gated behind (hover:hover), per this file's
   existing convention of not letting :hover stick after a touch-tap. */
.cta-link {
  display: inline-block;
  font-weight: 600;
  font-size: 15px;
  color: var(--orange);
  text-decoration: none;
}
@media (hover: hover) {
  .cta-link:hover { color: var(--orange-ink); }
}

@media (max-width: 767px) {
  body { font-size: 16px; }
}

/* ==========================================================================
   SECTION STYLES — Task 2 (home page, all five beats)
   Header/hero/footer are structural chrome not covered by Step 2's list
   (work grid, service cards, about, form) but are styled here to the same
   token system so the page reads as one finished piece.
   ========================================================================== */

/* ---- Header / nav ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--floor);
  border-bottom: 1px solid var(--steel);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s2);
  padding-bottom: var(--s2);
}
.wordmark {
  font-family: var(--font-head);
  font-size: 22px;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink);
}
.nav {
  display: flex;
  align-items: center;
  gap: var(--s4);
}
.nav a {
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  color: var(--ink);
  transition: color 120ms ease;
}
.nav a:not(.btn):focus-visible {
  color: var(--orange);
}
@media (hover: hover) {
  .nav a:not(.btn):hover { color: var(--orange); }
}
.nav a:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.btn--small { padding: 10px 20px; font-size: 14px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--steel);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--ink);
}

@media (max-width: 767px) {
  .nav-toggle { display: flex; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--floor);
    border-bottom: 1px solid var(--steel);
    padding: var(--s2) var(--s3);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: var(--s2) 0; border-bottom: 1px solid var(--floor-2); }
  .nav a.btn { margin-top: var(--s2); text-align: center; border-bottom: none; }
}

/* ---- Hero ----
   Task 11 (owner decision): the hero-split experiment (Tasks 9/10, a live
   draggable divider between a fake 2012 site and the real hero) is retired
   — "I don't like the split hero in the end. I want just the designs
   split." The drag-to-compare interaction now lives only in #work's
   strip-reveal band. This is back to a classic static hero: min-height
   sizing kept (85svh reads as a confident full-ish-viewport open) but
   position:relative/overflow:hidden/touch-action:none are gone with it —
   nothing inside #hero is absolutely positioned or draggable anymore. */
.hero {
  min-height: 85svh;
  display: flex;
  align-items: center;
  padding-top: var(--s6);
  padding-bottom: var(--s6);
}
#hero > .wrap {
  width: 100%; /* block default would shrink to content as a flex item otherwise */
}
/* One rail: .wrap owns the left edge (176px at 1440) and does the centering.
   .hero-inner is now a plain child DIV nested *inside* .wrap (not combined
   on the same element with it — combining them re-triggers the exact
   collision this fixes, since .wrap's `margin:0 auto` and this max-width
   would still be fighting on one box). As a non-.wrap child it just hugs
   .wrap's left inner edge with its own max-width, so every section shares
   one rail. See index.html's #hero markup. */
/* 1020px (not the original 880px): the deliberate two-line rag —
   "YOUR WEBSITE SHOULD BE / BRINGING YOU CUSTOMERS." — measures ~922px
   and ~969px wide at the h-display 96px cap (desktop's clamp ceiling,
   pinned from 1280px up), so 880px caused each half to wrap AGAIN into
   an uneven 4-line stack. .hero-sub keeps its own tighter 46ch max-width
   below, so this widening only affects how much room the headline gets. */
.hero-inner { max-width: 1020px; }
.hero .kicker { margin-bottom: var(--s2); }
.hero .h-display { margin-bottom: var(--s3); }
.hero-sub {
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: var(--s4);
}
.hero-actions {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .hero { padding-top: var(--s5); padding-bottom: var(--s5); }
}

/* ---- Work ---- */
.work {
  padding-top: var(--s6);
  padding-bottom: var(--s6);
}
.work .kicker { margin-bottom: var(--s2); }
.work .h-section { margin-bottom: var(--s5); max-width: 20ch; }

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
}

.work-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--steel);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 160ms ease, border-color 160ms ease;
}
.work-card--live:focus-visible {
  transform: translateY(-4px);
  border-color: var(--orange);
}
@media (hover: hover) {
  .work-card--live:hover {
    transform: translateY(-4px);
    border-color: var(--orange);
  }
}
.work-card-media {
  aspect-ratio: 16 / 10;
  background: var(--floor-2);
  overflow: hidden;
}
.work-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.work-card-media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../assets/spangle.svg");
  background-size: 260px;
  background-color: var(--floor-2);
}
.work-card-placeholder-label {
  font-family: var(--font-head);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper);
  padding: 6px 14px;
  border: 1px solid var(--steel);
  border-radius: var(--radius);
}
.work-card-body { padding: var(--s3); }
.work-card-body .tag { margin-bottom: var(--s2); }
.work-card-body h3 {
  font-family: var(--font-head);
  font-size: 22px;
  letter-spacing: 0.01em;
  margin-bottom: var(--s1);
}
.work-card-body p {
  color: var(--ink-soft);
  font-size: 15px;
}
.work-card--bench { cursor: default; }
.work-card--bench .work-card-body h3 { color: var(--ink-soft); }

@media (max-width: 767px) {
  .work-grid { grid-template-columns: 1fr; }
}

/* Bench cards now sit below the reveal band as their own 3-col row, so they
   need their own column count instead of the 2-col .work-grid default. */
.work-grid.work-grid--bench { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) {
  .work-grid.work-grid--bench { grid-template-columns: 1fr; }
}

/* Intro line above the uniform Work grid. */
.work-lede {
  color: var(--ink-soft);
  font-size: 16px;
  max-width: 60ch;
  margin-bottom: var(--s3);
}

/* Finished "concept" cards — a mini before/after drag-compare living inside a
   bench-sized card, so every Work item reads at the same scale. The 16:10
   .work-card-media already matches the 1440x900 captures, so the reveal fills
   it with no crop; we just strip the reveal's own border/radius (the card
   already clips) and shrink the drag handle to card scale. */
.work-card--case .work-card-media { position: relative; }
.work-card--case .strip-reveal {
  border: 0;
  border-radius: 0;
  height: 100%;
  cursor: ew-resize;
}
.work-card--case .strip-reveal .sr-after {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.work-card--case .sr-handle::before {
  width: 30px;
  height: 30px;
  font-size: 13px;
}
.work-card-link { display: inline-block; margin-top: var(--s2); }

/* ---- Work reveal band (owner review: swipe moved onto the home page,
   the case study is no longer a page-jump-only experience) ----
   Full content width (unlike the 2-col work-grid cards) — sits directly in
   .wrap, same rail as every other section. Reuses the case page's exact
   .strip-reveal / .case-reveal-caption markup and CSS so the two stay
   visually identical; only .work-reveal-* is new here. */
.work-reveal { margin-bottom: var(--s5); }
.work-reveal-head { max-width: 640px; margin-bottom: var(--s3); }
.work-reveal-head .tag { margin-bottom: var(--s2); }
.work-reveal-title {
  font-family: var(--font-head);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.05;
  /* v3 micro-fix: was clamp(28px,4vw,48px) — identical to the section
     .h-section above it, flattening hierarchy. Stepped down so the band
     title reads as a sub-level of "BEFORE AND AFTER..." */
  font-size: clamp(22px, 2.6vw, 34px);
  margin-bottom: var(--s1);
}
.work-reveal-sub {
  color: var(--ink-soft);
  font-size: 16px;
  max-width: 56ch;
}
.work-reveal .strip-reveal { margin-bottom: var(--s3); }
.work-reveal-link { margin-top: var(--s1); }

/* ---- Services ---- */
.services {
  padding-top: var(--s6);
  padding-bottom: var(--s6);
}
.services .kicker { margin-bottom: var(--s2); }
.services .h-section { margin-bottom: var(--s5); }

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
}
.service-card {
  background: var(--paper);
  border: 1px solid var(--steel);
  border-radius: var(--radius);
  overflow: hidden;
}
.service-card-head {
  height: var(--s3);
  background-color: var(--floor-2);
  background-size: 200px;
  border-bottom: 1px solid var(--steel);
}
/* display:flex column + margin-top:auto on .service-link (below) keeps the
   "Get a quote" links bottom-aligned across both cards even though the two
   descriptions run different lengths — quote-driven services replaced the
   old price/fine-print lines (owner review), so this is what keeps the
   two-card row from reading gutted/uneven now that content is shorter. */
.service-card-body {
  padding: var(--s4);
  display: flex;
  flex-direction: column;
}
.service-card-body h3 {
  font-family: var(--font-head);
  font-size: 26px;
  margin-bottom: var(--s2);
}
.service-card-body > p {
  color: var(--ink-soft);
  margin-bottom: var(--s3);
}
.service-link { margin-top: auto; }

@media (max-width: 767px) {
  .service-grid { grid-template-columns: 1fr; }
}

/* ---- About ---- */
.about {
  background: var(--floor-2);
  padding-top: var(--s6);
  padding-bottom: var(--s6);
}
.about-inner { max-width: 760px; } /* one-rail fix: nested inside .wrap, see .hero-inner */
.about .kicker { margin-bottom: var(--s2); }
.about .h-section { margin-bottom: var(--s3); }
.about-body {
  font-size: 18px;
  color: var(--ink-soft);
}

/* ---- Contact ---- */
.contact {
  padding-top: var(--s6);
  padding-bottom: var(--s6);
}
.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--s5);
  align-items: start;
}
.contact-intro .h-section { margin-bottom: var(--s2); }
.contact-alt { color: var(--ink-soft); }
.contact-alt a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--steel);
  text-underline-offset: 3px;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}
@media (hover: hover) {
  .contact-alt a:hover { color: var(--orange); text-decoration-color: var(--orange); }
}

.contact-form {
  display: grid;
  gap: var(--s3);
}
.field { display: grid; gap: var(--s1); }
.field label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field input,
.field textarea {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 14px;
  border: 1px solid var(--steel-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 103, 0, 0.18);
}
.field textarea { resize: vertical; min-height: 120px; }
.contact-form .btn { justify-self: start; }

@media (max-width: 900px) {
  .contact-inner { grid-template-columns: 1fr; }
}

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--steel);
  padding-top: var(--s3);
  padding-bottom: var(--s3);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  flex-wrap: wrap;
}
.wordmark--footer {
  font-family: var(--font-head);
  font-size: 18px;
  color: var(--ink-soft);
}
.footer-copy {
  font-size: 14px;
  color: var(--ink-soft);
}
/* ===== strip-reveal component ===== */

.strip-reveal {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--steel);
  border-radius: var(--radius);
  /* drag-anywhere (strip-reveal.js) reads pointerdown/move on the whole
     container now, not just the handle — without this, touch browsers
     intercept the gesture as a page scroll/pan before JS sees it. */
  touch-action: none;
  /* Pressing and dragging across the images must move the handle, not
     select the caption/surrounding text — without this a fast drag
     highlights text alongside (or instead of) moving the divider. */
  user-select: none;
  -webkit-user-select: none;
}

.strip-reveal .sr-after {
  width: 100%;
  height: auto;
  display: block;
}

/* Belt and braces against the browser's native image ghost-drag: without
   this, pressing on either <img> and moving starts an OS-level drag
   preview that fights the JS-driven handle drag (see strip-reveal.js's
   dragstart listener for the other half of this fix). */
.strip-reveal img {
  -webkit-user-drag: none;
  user-drag: none;
}

.sr-before-wrap {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--sr-pos, 50%)) 0 0);
}

.sr-before-wrap .sr-before {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top;
}

.sr-handle {
  position: absolute;
  left: var(--sr-pos, 50%);
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--orange);
  border: none;
  padding: 0;
  cursor: ew-resize;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  /* same reasoning as .strip-reveal above — the handle sits inside it but
     needs its own declaration since it's a separate hit target. */
  touch-action: none;
}

.sr-handle::before {
  content: '◂ ▸';
  position: absolute;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--orange);
  border-radius: 50%;
  font-size: 20px;
  color: #fff;
  font-weight: bold;
  pointer-events: none;
}

.sr-handle:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .sr-handle::before { transition: transform 120ms ease; }
  .sr-handle:hover::before { transform: scale(1.06); }
}

/* ===== case page ===== */

.case-header {
  padding-top: var(--s3);
  padding-bottom: var(--s2);
}
/* One-rail fix, see .hero-inner: nested inside .wrap (not combined on it),
   so it hugs .wrap's left inner edge instead of auto-centering on its own. */
.case-header-inner { max-width: 760px; }
.case-back a {
  text-decoration: none;
  color: var(--ink-soft);
  transition: color 120ms ease;
}
.case-back a:focus-visible { color: var(--orange); }
@media (hover: hover) {
  .case-back a:hover { color: var(--orange); }
}
.tag--case { margin-top: var(--s1); margin-bottom: var(--s1); }
.case-title { margin-bottom: var(--s1); }
.case-sub {
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 56ch;
}
/* Fictional-clinic disclosure (Fernwell pivot) — small, honest, not hidden,
   but not competing with .case-sub for attention either. */
.case-disclosure {
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 56ch;
  margin-top: var(--s1);
}

.case-reveal {
  padding-bottom: var(--s6);
}
.case-reveal .strip-reveal { margin-bottom: var(--s2); }
.case-reveal-caption {
  font-size: 13px;
  color: var(--ink-soft);
  max-width: 68ch;
}
.case-reveal-caption--pre {
  margin-bottom: var(--s2);
  padding-left: var(--s2);
  border-left: 2px solid var(--steel);
}

.case-fixes {
  padding-bottom: var(--s6);
}
.case-fixes .kicker { margin-bottom: var(--s2); }
.case-fixes .h-section { margin-bottom: var(--s5); max-width: 20ch; }

.fix-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
}
.fix-card {
  background: var(--paper);
  border: 1px solid var(--steel);
  border-radius: var(--radius);
  padding: var(--s4);
}
.fix-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin-bottom: var(--s1);
}
.fix-problem {
  font-size: 17px;
  color: var(--ink-soft);
}
.fix-arrow {
  font-size: 18px;
  color: var(--ink-soft);
  margin: var(--s2) 0;
  font-weight: 700;
}
.fix-fix {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}

@media (max-width: 767px) {
  .fix-grid { grid-template-columns: 1fr; }
}

.case-honesty {
  padding-bottom: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--steel);
  text-align: center;
  max-width: 640px;
}
.case-honesty-note {
  font-size: 15px;
  color: var(--ink-soft);
  margin-bottom: var(--s3);
}

/* ==========================================================================
   TASK 9/10 (retired by Task 11) — logo mark + color-warmth pass survive
   The hero-split machinery that used to live below this banner (.hero-bad
   and every .hb-* rule, .hs-handle, .hs-caption, the #hero/.hero
   full-viewport-stage reopening, the mask feather) is gone — see the Hero
   section above for the classic static hero that replaced it, and
   zinc/_parked/bad-site-2012.html for the preserved 2012-pastiche markup.
   These three pieces from the same Task 9/10 pass are unrelated to the
   split mechanic and are explicitly kept as-is: the shared logo mark,
   and the three color-warmth touches (kicker rule, services spangle wash,
   bench-card tint).
   ========================================================================== */

/* ---- Logo mark (nav + footer + favicon share this design: orange
   square, --radius corners, bold ink "Z") ---- */
.wordmark-group {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  text-decoration: none;
}
.logo-mark-bg { fill: var(--orange); }
.logo-mark-letter {
  font-family: var(--font-head);
  font-size: 19px;
  fill: var(--ink);
}
.logo-mark--footer { width: 22px; height: 22px; }

/* ---- Color warmth (1 of 3): kickers are wayfinding, so they earn the
   ONE new orange use in the system — a short rule to their left, the same
   everywhere a .kicker appears. Re-opens .kicker (defined near the top of
   this file) rather than editing it in place. */
.kicker {
  display: flex;
  align-items: center;
  gap: var(--s1);
}
.kicker::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--orange);
  flex: none;
}

/* ---- Color warmth (2 of 3): the services band was spangle-only on the
   card head accent; extend it, low-opacity, behind the whole section so
   it reads as one textured floor instead of a stripe. ::before keeps the
   texture out of the DOM/a11y tree; .services .wrap gets stacked above it. */
.services {
  position: relative;
  overflow: hidden;
}
.services::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("../assets/spangle.svg");
  background-size: 400px;
  opacity: 0.05;
  pointer-events: none;
}
.services .wrap {
  position: relative;
  z-index: 1;
}

/* ---- Color warmth (3 of 3): "IN THE SHOP" bench cards get a warm
   --floor-2 tint band under the media, distinguishing not-yet-built work
   from the live .work-card--live cards without touching orange. */
.work-card--bench .work-card-body {
  background: var(--floor-2);
}

/* .hero-bad, all .hb-* rules, .hs-handle, .hs-caption, and the #hero/.hero
   full-viewport-stage reopening that used to follow here are removed —
   see the banner comment above and zinc/_parked/bad-site-2012.html
   (which carries a self-contained copy of the .hero-bad/.hb-* CSS so the
   parked page still renders standalone). */