/*!
 * Fieldcraft — HTML template main.scss
 * Compiles to dist/css/main.css
 *
 * Structural decomposition of the original single-file main.css into
 * ITCSS-ish partials, modeled on purchased/html/neat's src/scss layout
 * (architecture studied, no code copied — see CLAUDE.md golden rule 1).
 * Every design value stays a CSS custom property resolved from
 * settings/_settings.tokens.scss (design/tokens.json is still the single
 * source of truth per CLAUDE.md golden rule 3) — Sass here is file
 * organization and nesting only, never a second token system.
 *
 * Tokens compile to their OWN separate file (tokens.scss -> dist/css/
 * tokens.css), matching every page's markup, which links tokens.css and
 * main.css as two separate <link> stylesheets — same split the original
 * hand-authored assets/css/{tokens,main}.css pair used. This file does not
 * import settings.tokens for that reason; it only consumes the custom
 * properties tokens.css defines at :root, same as before.
 *
 * No vendor/ block: Fieldcraft has zero third-party CSS dependencies
 * (genuinely vanilla), unlike neat's Bootstrap-grid/fullcalendar/chartist
 * imports — so that layer of neat's structure doesn't apply here. No
 * tools/ @use either: the folder exists (see tools/_tools.README.scss) but
 * is currently empty — nothing to import yet.
 */
/* ==========================================================================
   #RESET
   ========================================================================== */
/**
 * Resets, unclassed (bare) elements, skip link, focus states.
 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--iron);
  color: var(--bone);
  font-family: var(--fb);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-body);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

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

/**
 * Lazy grid/photo images: fade in on load completion instead of popping in
 * solid once the browser decodes them off-screen (job-grid, trades/services
 * photo frames, team portraits, etc). main.js applies `.lazy-fade` up front
 * (opacity:0) only to lazy images it can observe loading, then adds
 * `.is-loaded` on the image's `load` event (or immediately if already
 * complete/cached) to fade it in. No-JS visitors never get `.lazy-fade`
 * applied, so the img stays at the default opacity:1 (always visible).
 */
img[loading=lazy].lazy-fade {
  opacity: 0;
  transition: opacity var(--duration-lazy) var(--ease-expo);
}

img[loading=lazy].lazy-fade.is-loaded {
  opacity: 1;
}

button {
  font: inherit;
}

::selection {
  background: var(--amber);
  color: var(--iron);
}

:focus-visible {
  outline: var(--focus-outline) solid var(--amber);
  outline-offset: var(--focus-offset);
}

.skip {
  position: absolute;
  inset-inline-start: -999px;
  inset-block-start: 0;
  z-index: var(--z-skip);
  display: inline-flex;
  align-items: center;
  min-height: var(--size-tap-min);
  background: var(--amber);
  color: var(--iron);
  font-family: var(--fm);
  font-size: var(--text-mono-lg);
  padding: var(--space-2) var(--space-4);
}

.skip:focus {
  inset-inline-start: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   #TYPOGRAPHY
   ========================================================================== */
/**
 * Type utility classes reused across every page: display/mono text
 * treatments, the amber kicker label, section headings, highlighted `em`.
 */
.d {
  font-family: var(--fd);
  font-weight: var(--weight-heading-black);
  font-optical-sizing: auto;
  text-transform: uppercase;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.m {
  font-family: var(--fm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  font-size: var(--text-mono-sm);
  font-weight: var(--weight-mono);
}

.kicker {
  font-family: var(--fm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-kicker);
  font-size: var(--text-mono-md);
  color: var(--amber);
  margin-bottom: var(--space-10);
  display: block;
}

.on-dark em {
  color: var(--amber);
  font-style: normal;
}

.on-paper em {
  background: var(--amber);
  color: var(--ink);
  font-style: normal;
  padding: 0 var(--em-pad-tight);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.sec-head {
  font-size: var(--text-display-section);
  margin-bottom: var(--head-mb);
}

.lede-38 {
  max-width: var(--measure-lede);
}

.mb-0 {
  margin-bottom: 0;
}

/* ==========================================================================
   #SECTION
   ========================================================================== */
/**
 * Base `<section>` rhythm and the two page "skins" every section can wear:
 * dark (default, on `--iron`) or `.paper` (light, on `--paper`).
 */
section {
  padding: var(--section-y) var(--gutter);
}

.paper {
  background: var(--paper);
  color: var(--ink);
}

.paper .m {
  color: var(--mute-p);
}

.paper .kicker {
  color: var(--ink);
}

.paper .kicker::before {
  content: "";
  display: inline-block;
  width: var(--size-kicker-square);
  height: var(--size-kicker-square);
  background: var(--amber);
  margin-inline-end: var(--space-3);
  vertical-align: -1px;
}

.paper .cost {
  color: var(--mute-p);
  border-color: var(--check-stroke);
}

/* section that welds to the block above (drops its top padding) */
.welds-up {
  padding-top: 0;
}

/* ==========================================================================
   #BUTTONS AND TERTIARY LINKS
   ========================================================================== */
/* tertiary link */
.tert {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-tap-min);
  font-family: var(--fm);
  font-size: var(--text-mono-md);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--mute);
  border-bottom: var(--rule-1) solid var(--hairline);
  padding-bottom: var(--space-2);
  transition: color var(--duration-base), border-color var(--duration-base);
}

.tert:hover {
  color: var(--amber);
  border-color: var(--amber);
}

.paper .tert {
  color: var(--mute-p);
  border-color: var(--hairline-p);
}

.paper .tert:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* buttons */
.btn {
  display: inline-block;
  font-family: var(--fm);
  font-size: var(--text-mono-lg);
  font-weight: var(--weight-mono-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  padding: var(--space-4) var(--space-8);
  background: var(--amber);
  color: var(--iron);
  border: var(--rule-1) solid var(--amber);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-base), transform var(--duration-base), border-color var(--duration-base);
}

.btn:hover {
  background: var(--amber-hot);
  border-color: var(--amber-hot);
  transform: var(--hover-lift);
}

.btn-ghost {
  background: transparent;
  color: var(--bone);
  border-color: var(--hairline);
}

.btn-ghost:hover {
  background: transparent;
  border-color: var(--amber);
  color: var(--amber);
  transform: var(--hover-lift);
}

.btn-compact {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-mono-2xs);
}

/* ==========================================================================
   #HEADER
   ========================================================================== */
/**
 * Topbar strip, sticky site header, logo, primary nav, and the mobile nav
 * toggle + full-screen overlay menu.
 */
.topbar {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--gutter);
  background: var(--iron-2);
  border-bottom: var(--rule-1) solid var(--hairline);
  font-family: var(--fm);
  font-size: var(--text-mono-2xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--mute);
}

.topbar b {
  font-weight: var(--weight-mono-medium);
  color: var(--amber);
}

.sitehead {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--gutter);
  background: var(--scrim-header);
  backdrop-filter: blur(var(--blur-header));
  border-bottom: var(--rule-1) solid var(--hairline);
}

.logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-tap-min);
  font-family: var(--fd);
  font-weight: var(--weight-heading-black);
  font-size: var(--text-heading-logo);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wordmark);
}

.logo em {
  color: var(--amber);
  font-style: normal;
}

.sitehead nav {
  display: flex;
  gap: var(--nav-gap);
  align-items: center;
  font-family: var(--fm);
  font-size: var(--text-mono-md);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
}

.sitehead nav a {
  color: var(--mute);
  transition: color var(--duration-fast);
}

.sitehead nav a:hover {
  color: var(--bone);
}

.sitehead nav a[aria-current=page] {
  color: var(--bone);
}

.sitehead nav .phone {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-tap-min);
  color: var(--amber);
  font-weight: var(--weight-mono-medium);
}

.sitehead nav .phone:hover {
  color: var(--amber-hot);
}

/* mobile menu toggle + overlay (build addition, §3.2) */
.navtoggle {
  display: none;
}

.menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: var(--size-tap-min);
  min-width: var(--size-tap-min);
  background: transparent;
  border: 0;
  color: var(--bone);
  font-family: var(--fm);
  font-size: var(--text-mono-md);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  cursor: pointer;
  padding: var(--space-2);
  margin-inline-end: calc(-1 * var(--space-2));
}

.navmenu {
  position: fixed;
  inset: 0;
  z-index: var(--z-header);
  background: var(--iron);
  display: none;
  flex-direction: column;
  padding: var(--space-6) var(--gutter) var(--section-y);
  opacity: 0;
  transition: opacity var(--duration-base);
}

.navmenu.open {
  display: flex;
  opacity: 1;
}

.navmenu-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navmenu-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-tap-min);
  min-width: var(--size-tap-min);
  background: transparent;
  border: 0;
  color: var(--bone);
  font-family: var(--fm);
  font-size: var(--text-mono-2xl);
  cursor: pointer;
  line-height: var(--leading-tight);
  padding: var(--space-2);
  margin-inline-end: calc(-1 * var(--space-2));
}

.navmenu ul {
  list-style: none;
  margin-top: var(--section-y);
  border-top: var(--rule-1) solid var(--hairline);
}

.navmenu li {
  border-bottom: var(--rule-1) solid var(--hairline);
}

.navmenu a {
  display: block;
  padding: var(--space-5) 0;
  font-family: var(--fd);
  font-weight: var(--weight-heading-black);
  font-size: var(--text-display-row);
  text-transform: uppercase;
  color: var(--bone);
  letter-spacing: var(--tracking-display);
}

.navmenu a.phone {
  color: var(--amber);
}

/* ==========================================================================
   #HERO
   ========================================================================== */
/**
 * Full-bleed home hero: background photo, shade gradients, stat "meta" box,
 * bottom-anchored headline with line-reveal spans, sub row, CTAs, scroll
 * hint, and the marquee band underneath.
 */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  overflow: hidden;
  /* Full-bleed breakout: a page builder (Elementor/WPBakery/Divi) always
     renders this section inside a boxed, max-width, non-full-height wrapper
     (e.g. Elementor's default `.elementor-section-boxed > .elementor-container`
     caps width at 1140px). Without breaking out, the hero's min-height:100svh
     collapses to the wrapper's shrink-to-fit content height, so the
     bottom-anchored headline and the absolutely-positioned .meta stat box
     — both sized for a full-viewport hero — end up overlapping instead of
     spanning the screen. width:100vw + negative inline margins escapes any
     ancestor's max-width regardless of nesting depth or which builder is
     active; body's overflow-x:hidden (above) prevents the resulting
     horizontal scrollbar. Native (non-builder) templates render .hero as a
     direct child of unconstrained ancestors, so this is a no-op there. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.hero .bg {
  position: absolute;
  inset: 0;
  background: center/cover no-repeat;
}

.hero .shade {
  position: absolute;
  inset: 0;
  background: var(--shade-side), var(--shade-vert);
}

.hero .meta {
  position: absolute;
  inset-block-start: var(--hero-meta-top);
  inset-inline-end: var(--gutter);
  max-width: var(--measure-stat);
  text-align: end;
  font-family: var(--fm);
  font-size: var(--text-mono-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--bone-dim);
  line-height: var(--leading-mono-list);
  background: var(--scrim-stamp);
  border: var(--rule-1) solid var(--hairline);
  padding: var(--space-2) var(--space-3);
  backdrop-filter: blur(var(--blur-stamp));
  /* stat-box sits above the hero headline (not --z-hero-fg, same layer as h1) so long
     per-variant/buyer city or coordinate strings stay legible instead of being clipped
     behind the headline's huge display type — see qa/REPORT.md Round 12 MINOR. */
  z-index: var(--z-hero-meta);
}

.hero h1 {
  position: relative;
  z-index: var(--z-hero-fg);
  font-size: var(--text-display-hero);
  padding: 0 var(--gutter);
}

.hero h1 .line {
  display: block;
  overflow: hidden;
}

.hero h1 .line > span {
  display: block;
  transform: translateY(var(--hero-line-offset));
  transition: transform var(--duration-hero) var(--ease-expo);
}

.hero.on h1 .line:nth-child(1) > span {
  transition-delay: var(--hero-delay-1);
  transform: translateY(0);
}

.hero.on h1 .line:nth-child(2) > span {
  transition-delay: var(--hero-delay-2);
  transform: translateY(0);
}

.hero .sub {
  position: relative;
  z-index: var(--z-hero-fg);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--gap-md);
  padding: var(--space-10) var(--gutter) 0;
}

.hero .sub p {
  max-width: var(--measure-lede);
  color: var(--bone-soft);
}

.ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-6);
}

.scrollhint {
  font-family: var(--fm);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--amber);
  white-space: nowrap;
  animation: blink var(--blink) infinite;
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: var(--opacity-blink-low);
  }
}
.marquee {
  position: relative;
  z-index: var(--z-hero-fg);
  border-top: var(--rule-1) solid var(--hairline);
  margin-top: var(--space-12);
  padding: var(--space-6) 0;
  overflow: hidden;
  background: var(--scrim-marquee);
  backdrop-filter: blur(var(--blur-marquee));
}

.marquee .track {
  display: flex;
  gap: 0;
  white-space: nowrap;
  width: max-content;
  animation: mq var(--marquee-loop) linear infinite;
  font-family: var(--fd);
  font-weight: var(--weight-heading-bold);
  font-size: var(--text-heading-marquee);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wordmark);
  color: var(--bone-soft);
}

.marquee .track em {
  color: var(--amber);
  font-style: normal;
  padding: 0 var(--space-3);
}

@keyframes mq {
  to {
    transform: translateX(-50%);
  }
}
/* ==========================================================================
   #PHERO — interior page hero
   ========================================================================== */
.phero {
  position: relative;
  min-height: var(--size-hero-min-h);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-bottom: var(--rule-1) solid var(--hairline);
  padding: var(--footer-y) var(--gutter) var(--head-mb);
}

.phero.compact {
  min-height: auto;
}

.phero .bg {
  position: absolute;
  inset: 0;
  background: center/cover no-repeat;
}

.phero .shade {
  position: absolute;
  inset: 0;
  background: var(--shade-side), var(--shade-vert);
}

.phero > * {
  position: relative;
  z-index: var(--z-hero-fg);
}

.phero .crumbs {
  font-family: var(--fm);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: var(--space-10);
}

.phero .crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-tap-min);
  transition: color var(--duration-fast);
}

.phero .crumbs a:hover {
  color: var(--bone);
}

.phero .kicker {
  margin-bottom: var(--space-6);
}

.phero .meta {
  position: absolute;
  inset-block-start: var(--footer-y);
  inset-inline-end: var(--gutter);
  text-align: end;
  z-index: var(--z-hero-fg);
  font-family: var(--fm);
  font-size: var(--text-mono-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--bone-dim);
  line-height: var(--leading-mono-list);
}

.phero h1 {
  font-size: var(--text-display-page);
}

.phero.hero-section h1 {
  font-size: var(--text-display-hero);
}

.phero h1.article-title {
  font-size: var(--text-display-section);
}

.phero .post-meta {
  color: var(--mute);
  margin-bottom: var(--space-6);
}

.phero h1 .line {
  display: block;
  overflow: hidden;
}

.phero h1 .line > span {
  display: block;
  transform: translateY(var(--hero-line-offset));
  transition: transform var(--duration-hero) var(--ease-expo);
}

.phero.on h1 .line:nth-child(1) > span {
  transition-delay: var(--hero-delay-1);
  transform: translateY(0);
}

.phero.on h1 .line:nth-child(2) > span {
  transition-delay: var(--hero-delay-2);
  transform: translateY(0);
}

.phero .sub {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--gap-md);
  margin-top: var(--space-10);
}

.phero .sub p {
  max-width: var(--measure-lede);
  color: var(--bone-soft);
}

.phero .ctas {
  margin-top: var(--space-6);
}

.phero .search-line {
  margin-top: var(--space-10);
  max-width: var(--measure-column);
}

/* ==========================================================================
   #TRUST STRIP
   ========================================================================== */
.trust {
  padding-block: var(--space-10);
  border-bottom: var(--rule-1) solid var(--hairline);
}

.trust ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-12);
  justify-content: space-between;
  list-style: none;
  font-family: var(--fm);
  font-size: var(--text-mono-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--mute);
}

.trust ul b {
  color: var(--bone);
  font-weight: var(--weight-mono-medium);
}

.trust .human {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: var(--rule-1) solid var(--hairline);
}

.trust .human p {
  color: var(--mute);
  font-size: var(--text-body-sm);
}

/* ==========================================================================
   #SERVICE ROWS (.svc) — numbered service list
   ========================================================================== */
.services {
  padding-bottom: 0;
}

.svc-rows {
  border-top: var(--rule-1) solid var(--hairline);
  margin: 0 calc(-1 * var(--gutter));
}

.svc {
  display: grid;
  grid-template-columns: var(--size-row-no-col) 1fr auto;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-10) var(--gutter);
  border-bottom: var(--rule-1) solid var(--hairline);
  transition: background var(--duration-slower);
}

.svc:hover {
  background: var(--iron-2);
}

.svc .no {
  font-family: var(--fm);
  font-size: var(--text-mono-xl);
  letter-spacing: var(--tracking-mono);
  color: var(--mute);
}

.svc h3 {
  font-family: var(--fd);
  font-weight: var(--weight-heading-black);
  font-size: var(--text-display-row);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  transition: transform var(--duration-lazy) var(--ease-expo), color var(--duration-slow);
}

.svc:hover h3 {
  transform: translateX(var(--space-4));
  color: var(--amber);
}

.svc .tag {
  font-family: var(--fm);
  font-size: var(--text-mono-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--mute);
  text-align: end;
}

.svc .arrow {
  font-family: var(--fm);
  color: var(--amber);
  opacity: 0;
  transform: translateX(calc(-1 * var(--space-2)));
  transition: opacity var(--duration-slow), transform var(--duration-slow);
  font-size: var(--text-mono-2xl);
}

.svc:hover .arrow {
  opacity: 1;
  transform: none;
}

.svc-foot {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-8) var(--gutter) var(--space-16);
}

/* ==========================================================================
   #TRADES ROWS (.trow) — editorial split rows + reusable photo frame/stamp
   ========================================================================== */
.trades {
  padding-block: 0;
}

.trow {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: var(--gap-xl);
  align-items: center;
  padding-block: var(--row-y);
  border-bottom: var(--rule-1) solid var(--hairline);
}

.trades .trow:last-child {
  border-bottom: 0;
}

.trow.flip .media {
  order: 2;
}

.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: var(--aspect-frame);
  background: var(--iron-2);
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: var(--img-zoom-rest);
  transition: transform var(--duration-zoom) var(--ease-expo);
}

.trow:hover .frame img, .shot:hover .frame img {
  transform: var(--img-zoom-hover);
}

.stamp {
  position: absolute;
  z-index: var(--z-base);
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  font-family: var(--fm);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono);
  color: var(--bone);
  background: var(--scrim-stamp);
  border: var(--rule-1) solid var(--hairline);
  padding: var(--space-1) var(--space-3);
  backdrop-filter: blur(var(--blur-stamp));
}

.trow .label {
  font-family: var(--fm);
  font-size: var(--text-mono-lg);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--mute);
  display: block;
  margin-bottom: var(--space-8);
}

.trow .label b {
  color: var(--amber);
  font-weight: var(--weight-body);
}

.trow h2 {
  font-family: var(--fd);
  font-weight: var(--weight-heading-black);
  font-size: var(--text-display-row-lg);
  text-transform: uppercase;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.trow .liner {
  margin-top: var(--space-8);
  max-width: var(--measure-column);
  color: var(--bone-soft);
}

.trow .spec {
  display: block;
  margin-top: var(--space-8);
  font-family: var(--fm);
  font-size: var(--text-mono-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--mute);
  line-height: var(--leading-mono-list);
}

.cost {
  display: inline-block;
  margin-top: var(--space-8);
  font-family: var(--fm);
  font-size: var(--text-mono-xs);
  font-weight: var(--weight-mono-medium);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--amber);
  border: var(--rule-1) solid var(--amber-outline);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
}

.trow .go {
  display: inline-block;
  margin-top: var(--space-10);
}

/* ==========================================================================
   #MANIFESTO / STATEMENT (paper)
   ========================================================================== */
.manifesto {
  border-top: var(--rule-1) solid var(--hairline);
}

.manifesto .grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--gap-xl);
  align-items: start;
  max-width: var(--container-content);
}

.big {
  font-family: var(--fd);
  font-weight: var(--weight-heading-bold);
  font-size: var(--text-display-statement);
  line-height: var(--leading-statement);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
}

.manifesto .side p {
  font-size: var(--text-body-md);
  color: var(--ink);
  max-width: var(--measure-column);
}

.manifesto .side .who {
  font-family: var(--fm);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--mute-p);
  margin-bottom: var(--space-10);
  display: block;
}

.statement .big {
  max-width: var(--container-statement);
}

/* wide checklist (service-single scope) with inline mono qualifier */
.checks-wide {
  max-width: var(--container-statement);
  margin-top: var(--head-mb);
}

.checks .m {
  color: var(--mute-p);
}

/* muted cost chip (neutral, on paper) */
.cost-neutral {
  color: var(--mute-p);
  border-color: var(--check-stroke);
}

/* portrait frame inside a paper split */
.frame-sm {
  aspect-ratio: var(--aspect-frame-sm);
  margin-bottom: var(--space-8);
}

/* statement footnote row */
.statement .footnote {
  margin-top: var(--space-8);
}

/* about roster (welds under profile grid) */
.crew.roster {
  margin-top: 0;
}

/* checklist (paper) */
.checks {
  list-style: none;
  margin-top: var(--space-10);
  border-top: var(--rule-1) solid var(--hairline-p);
}

.checks li {
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-4);
  border-bottom: var(--rule-1) solid var(--hairline-p);
  font-size: var(--text-body-sm);
}

.checks li::before {
  content: "■";
  color: var(--amber);
  font-size: var(--text-glyph-sm);
  flex: 0 0 auto;
  -webkit-text-stroke: var(--rule-2) var(--check-stroke);
}

/* ==========================================================================
   #LEDGER — stat rows + count-up (paper, with dark reprise)
   ========================================================================== */
.ledger {
  padding-top: 0;
}

.ledger .rows {
  border-top: var(--rule-2) solid var(--ink);
}

.ledger .stat {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-8);
  padding-block: var(--space-6);
  border-bottom: var(--rule-1) solid var(--hairline-p);
}

.ledger .n {
  font-family: var(--fd);
  font-weight: var(--weight-heading-black);
  font-size: var(--text-display-stat);
  line-height: var(--leading-tight);
  color: var(--ink);
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
}

.ledger .n sup {
  font-size: var(--scale-sup);
  color: var(--mute-p);
  vertical-align: var(--offset-sup);
  letter-spacing: var(--tracking-phone-hover);
}

.ledger .l {
  font-family: var(--fm);
  font-size: var(--text-mono-md);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--mute-p);
  text-align: end;
}

/* dark ledger reprise (about, reviews stats) */
.ledger-dark .rows {
  border-top: var(--rule-2) solid var(--bone);
}

.ledger-dark .stat {
  border-bottom-color: var(--hairline);
}

.ledger-dark .n {
  color: var(--bone);
}

.ledger-dark .l {
  color: var(--mute);
}

/* town ledger (service-areas — ledger skeleton with body copy) */
.town-ledger .stat {
  align-items: start;
}

.town-ledger .stat p {
  max-width: var(--measure-reading);
  margin-top: var(--space-3);
  font-size: var(--text-body-md);
}

/* human row detached from a hairline (welds under town ledger) */
.human.detached {
  border-top: 0;
  margin-top: var(--space-10);
}

.paper .human.detached p {
  color: var(--mute-p);
}

/* ==========================================================================
   #EMERGENCY BAND (amber, home only)
   ========================================================================== */
.emergency {
  background: var(--amber);
  color: var(--ink);
  text-align: center;
  padding-block: var(--band-y);
}

.emergency .k {
  font-family: var(--fm);
  font-size: var(--text-mono-lg);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: var(--weight-mono-medium);
  margin-bottom: var(--space-10);
  display: block;
}

.emergency h2 {
  font-family: var(--fd);
  font-weight: var(--weight-heading-black);
  font-size: var(--text-display-band);
  text-transform: uppercase;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.emergency h2 em {
  background: var(--ink);
  color: var(--amber);
  font-style: normal;
  padding: 0 var(--em-pad-tight);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.emergency .support {
  max-width: var(--measure-reading);
  margin: var(--space-10) auto 0;
  font-size: var(--text-body);
}

.emergency .phone {
  display: inline-block;
  margin-top: var(--space-12);
  font-family: var(--fd);
  font-weight: var(--weight-heading-black);
  font-size: var(--text-display-row-lg);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  border-bottom: var(--rule-4) solid var(--ink);
  padding-bottom: var(--space-2);
  transition: letter-spacing var(--duration-lazy);
}

.emergency .phone:hover {
  letter-spacing: var(--tracking-phone-hover);
}

.emergency .staffed {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
  font-family: var(--fm);
  font-size: var(--text-mono-sm);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  font-weight: var(--weight-mono-medium);
}

.emergency .dot {
  width: var(--size-dot);
  height: var(--size-dot);
  border-radius: var(--radius-full);
  background: var(--iron);
  animation: blink var(--blink-dot) infinite;
}

/* ==========================================================================
   #PROCESS — work order / numbered step list (paper)
   ========================================================================== */
.wo-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-8);
  font-family: var(--fm);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--mute-p);
  border-bottom: var(--rule-2) solid var(--ink);
  padding-bottom: var(--space-4);
  max-width: var(--container-content);
}

.steps {
  list-style: none;
  max-width: var(--container-content);
}

.step {
  display: grid;
  grid-template-columns: var(--size-row-no-col) 1fr 1.2fr;
  gap: var(--space-8);
  align-items: baseline;
  padding-block: var(--space-10);
  border-bottom: var(--rule-1) solid var(--hairline-p);
}

.step .no {
  font-family: var(--fm);
  font-size: var(--text-mono-xl);
  letter-spacing: var(--tracking-mono);
  color: var(--mute-p);
}

.step h3 {
  font-family: var(--fd);
  font-weight: var(--weight-heading-black);
  font-size: var(--text-display-step);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.step p {
  font-size: var(--text-body-md);
  max-width: var(--measure-reading);
}

/* timeline reuse (about) — event copy col */
.step .event {
  font-size: var(--text-body-md);
  max-width: var(--measure-reading);
}

.step .year {
  font-family: var(--fd);
  font-weight: var(--weight-heading-black);
  font-size: var(--text-display-step);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

/* ==========================================================================
   #JOB GRID — job-file proof grid (dark)
   ========================================================================== */
.jobs .grid, .job-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-md);
}

.shot .frame {
  aspect-ratio: var(--aspect-frame);
}

.shot .cap {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  margin-top: var(--space-4);
  font-family: var(--fm);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--mute);
}

.shot .cap b {
  color: var(--bone);
  font-weight: var(--weight-mono-medium);
}

.jobs .foot, .job-grid-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-12);
}

/* ==========================================================================
   #REVIEWS — review cards (paper, with dark-skinned reprise + reply block)
   ========================================================================== */
.reviews .grid, .review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-lg);
}

.review {
  border-top: var(--rule-2) solid var(--ink);
  padding-top: var(--space-6);
}

.review blockquote {
  font-size: var(--text-body-lg);
  line-height: var(--leading-quote);
  font-weight: var(--weight-body-medium);
}

.review figcaption {
  margin-top: var(--space-6);
  font-family: var(--fm);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--mute-p);
}

.review figcaption b {
  color: var(--ink);
  font-weight: var(--weight-mono-medium);
}

.reviews .foot {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-14);
}

/* dark-skinned review card (reviews "bad ones" band) */
.review-dark {
  border-top: var(--rule-2) solid var(--bone);
}

.review-dark blockquote {
  color: var(--bone);
}

.review-dark figcaption {
  color: var(--mute);
}

.review-dark figcaption b {
  color: var(--bone);
}

.reply-block {
  margin-top: var(--space-8);
  border-left: var(--rule-2) solid var(--amber);
  padding-left: var(--space-6);
}

.reply-block .reply-head {
  font-family: var(--fm);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--amber);
  display: block;
  margin-bottom: var(--space-3);
}

.reply-block p {
  color: var(--bone-soft);
  font-size: var(--text-body-md);
  max-width: var(--measure-reading);
}

/* a card sitting under a statement gets head-mb separation */
.statement-card {
  margin-top: var(--head-mb);
  max-width: var(--container-statement);
}

/* ==========================================================================
   #RECEIPTS — receipts strip (paper, with dark reprise) + proof split
   ========================================================================== */
.receipts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-12);
  justify-content: space-between;
  list-style: none;
  margin-top: var(--head-mb);
  border-top: var(--rule-2) solid var(--ink);
  padding-top: var(--space-6);
  font-family: var(--fm);
  font-size: var(--text-mono-md);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--mute-p);
}

.receipts b {
  color: var(--ink);
  font-weight: var(--weight-mono-medium);
  font-variant-numeric: tabular-nums;
}

/* dark receipts skin (reviews/pricing proof on iron) */
.receipts-dark {
  border-top: var(--rule-2) solid var(--bone);
  color: var(--mute);
}

.receipts-dark b {
  color: var(--bone);
}

.proof .grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--gap-xl);
  align-items: start;
}

.proof .support {
  margin-top: var(--space-10);
  max-width: var(--measure-column);
}

/* ==========================================================================
   #TEAM — team band + crew cards (dark)
   ========================================================================== */
.team .lede {
  max-width: var(--measure-column);
  color: var(--mute);
  margin-top: calc(-1 * var(--space-8));
  margin-bottom: var(--space-12);
}

.team .photo, .crew-band {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: var(--aspect-band);
  background: var(--iron-2);
}

.team .photo img, .crew-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.crew {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  border-bottom: var(--rule-1) solid var(--hairline);
  margin-top: var(--space-10);
}

.crew li {
  border-top: var(--rule-1) solid var(--hairline);
  padding: var(--space-6) var(--space-6) var(--space-6) 0;
}

.crew h3 {
  font-family: var(--fd);
  font-weight: var(--weight-heading-black);
  font-size: var(--text-heading-crew);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wordmark);
  line-height: var(--leading-tight);
}

.crew .badge {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--fm);
  font-size: var(--text-mono-2xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--mute);
}

/* profile card w/ portrait (about §4.4) */
.crew.profiles li {
  padding-inline-end: var(--space-6);
}

.crew .portrait {
  aspect-ratio: 3/4;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--iron-2);
  margin-bottom: var(--space-4);
  position: relative;
}

.crew .portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   #NOTES LIST — blog/notes list rows (paper) + dark sibling/related rail
   ========================================================================== */
.notes .list, .notes-list {
  list-style: none;
  border-top: var(--rule-2) solid var(--ink);
  max-width: var(--container-content);
}

.notes li a, .notes-list li a {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-8);
  align-items: baseline;
  padding-block: var(--space-6);
  border-bottom: var(--rule-1) solid var(--hairline-p);
  transition: padding var(--duration-slow);
}

.notes li a:hover, .notes-list li a:hover {
  padding-inline-start: var(--space-4);
}

.notes .t, .notes-list .t {
  font-size: var(--text-title-note);
  font-weight: var(--weight-body-semibold);
  line-height: var(--leading-note);
}

.notes .meta, .notes-list .meta {
  font-family: var(--fm);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--mute-p);
}

.notes .go, .notes-list .go {
  font-family: var(--fm);
  color: var(--mute-p);
  transition: color var(--duration-base), transform var(--duration-base);
}

.notes li a:hover .go, .notes-list li a:hover .go {
  color: var(--ink);
  transform: translateX(var(--space-1));
}

.notes .foot {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-12);
  max-width: var(--container-content);
}

/* dark sibling/related rail (§3.16 on iron) */
.rail-list {
  list-style: none;
  border-top: var(--rule-2) solid var(--bone);
  max-width: var(--container-content);
}

.rail-list li a {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-8);
  align-items: baseline;
  padding-block: var(--space-6);
  border-bottom: var(--rule-1) solid var(--hairline);
  transition: padding var(--duration-slow);
}

.rail-list li a:hover {
  padding-inline-start: var(--space-4);
}

.rail-list .t {
  font-size: var(--text-title-note);
  font-weight: var(--weight-body-semibold);
  line-height: var(--leading-note);
  text-transform: uppercase;
  font-family: var(--fd);
  letter-spacing: var(--tracking-display);
}

.rail-list .meta {
  font-family: var(--fm);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--mute);
}

.rail-list .go {
  font-family: var(--fm);
  color: var(--mute);
  transition: color var(--duration-base), transform var(--duration-base);
}

.rail-list li a:hover .go {
  color: var(--amber);
  transform: translateX(var(--space-1));
}

.rail-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-12);
}

/* ==========================================================================
   #CLOSER — quote form (dark)
   ========================================================================== */
.closer {
  border-top: var(--rule-1) solid var(--hairline);
}

.closer .grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--gap-2xl);
  align-items: start;
}

.closer .lede {
  color: var(--mute);
  max-width: var(--measure-lede);
  margin-top: var(--space-8);
}

.field {
  margin-bottom: var(--space-8);
}

.field label {
  display: block;
  font-family: var(--fm);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: var(--space-3);
}

.field input[type=text], .field input[type=tel], .field input[type=search], .field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: var(--rule-1) solid var(--hairline);
  color: var(--bone);
  font-family: var(--fb);
  font-size: var(--text-body);
  padding: var(--space-2) 0 var(--space-4);
  transition: border-color var(--duration-base);
}

.field textarea {
  min-height: var(--size-textarea-min);
  resize: vertical;
}

.field input:focus, .field textarea:focus {
  border-bottom-color: var(--amber);
}

.field input:focus-visible, .field textarea:focus-visible {
  outline: var(--focus-outline) solid var(--amber);
  outline-offset: var(--focus-offset);
}

.field input::placeholder, .field textarea::placeholder {
  color: var(--color-placeholder);
}

.field .help {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--fm);
  font-size: var(--text-mono-2xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--mute);
}

.field .err {
  display: none;
  margin-top: var(--space-2);
  font-size: var(--text-small);
  color: var(--amber);
}

.field input:user-invalid {
  border-bottom-color: var(--amber);
}

/* .err visibility is intentionally NOT driven by :user-invalid — the native
   pseudo-class can flip on independently of (and before) any JS that would
   set matching message text, which can race a stale/wrong message onto
   screen. The JS toggles this class atomically with the text update instead
   (see assets/js/main.js's quote-form submit handler) so text and
   visibility can never desync. */
.field .err.err-visible {
  display: block;
}

.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

fieldset {
  border: 0;
}

fieldset legend {
  font-family: var(--fm);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: var(--space-4);
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pills input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pills label {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-tap-min);
  font-family: var(--fm);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-pill);
  text-transform: uppercase;
  border: var(--rule-1) solid var(--hairline);
  color: var(--mute);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: color var(--duration-base), border-color var(--duration-base), background var(--duration-base);
}

.pills label:hover {
  border-color: var(--mute);
  color: var(--bone);
}

.pills input:checked + label {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--iron);
}

.pills input:focus-visible + label {
  outline: var(--focus-outline) solid var(--amber);
  outline-offset: var(--focus-offset);
}

.closer .btn {
  margin-top: var(--space-2);
}

.success {
  display: none;
  border: var(--rule-1) solid var(--amber);
  border-radius: var(--radius-md);
  padding: var(--space-10);
}

.success .no {
  font-family: var(--fd);
  font-weight: var(--weight-heading-black);
  font-size: var(--text-display-order);
  text-transform: uppercase;
  color: var(--amber);
  display: block;
  margin-bottom: var(--space-4);
  letter-spacing: var(--tracking-wordmark);
}

.form-done .success {
  display: block;
}

.form-done form {
  display: none;
}

/* ==========================================================================
   #SERVICE AREA — coverage ring + next-№ + night-line reference strips (dark)
   ========================================================================== */
.ring {
  padding-block: var(--space-12);
  border-top: var(--rule-1) solid var(--hairline);
  text-align: center;
}

.ring .kicker {
  margin-bottom: var(--space-6);
}

.ring .towns {
  font-family: var(--fm);
  font-size: var(--text-mono-fluid);
  letter-spacing: var(--tracking-towns);
  text-transform: uppercase;
  color: var(--bone);
  line-height: var(--leading-towns);
}

.ring .towns em {
  color: var(--amber);
  font-style: normal;
  padding: 0 var(--space-2);
}

.ring .quiet {
  color: var(--mute);
  font-size: var(--text-body-sm);
  margin-top: var(--space-4);
}

.nextno {
  padding-block: var(--space-6);
  border-top: var(--rule-1) solid var(--hairline);
  text-align: center;
  font-family: var(--fm);
  font-size: var(--text-mono-sm);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--mute);
}

.nextno b {
  color: var(--amber);
  font-weight: var(--weight-mono-medium);
}

/* night-line reference strip (dark, §3.18-style with ghost phone) */
.nightref {
  padding-block: var(--space-12);
  border-top: var(--rule-1) solid var(--hairline);
  text-align: center;
}

.nightref .line {
  font-family: var(--fm);
  font-size: var(--text-mono-sm);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: var(--space-6);
  display: block;
}

/* ==========================================================================
   #FEATURE BAND — feature image band (service-single, service-areas)
   ========================================================================== */
.feature-band {
  padding-block: var(--section-y);
}

.feature-band .frame {
  aspect-ratio: var(--aspect-band);
}

.feature-band.narrow .frame {
  aspect-ratio: var(--aspect-frame-sm);
  max-width: var(--container-statement);
  margin-inline: auto;
}

/* ==========================================================================
   #FILTER RAIL — category pill filters (gallery, blog)
   ========================================================================== */
.filter-rail {
  padding-block: var(--space-8);
  border-bottom: var(--rule-1) solid var(--hairline);
}

.filter-rail .pills {
  justify-content: flex-start;
}

.filter-rail .pill {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-tap-min);
  font-family: var(--fm);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-pill);
  text-transform: uppercase;
  border: var(--rule-1) solid var(--hairline);
  color: var(--mute);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  background: transparent;
  transition: color var(--duration-base), border-color var(--duration-base), background var(--duration-base);
}

.filter-rail .pill:hover {
  border-color: var(--mute);
  color: var(--bone);
}

.filter-rail .pill[aria-pressed=true] {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--iron);
}

.filter-hide {
  display: none;
}

/* ==========================================================================
   #PAGER — pagination (blog, gallery, reviews)
   ========================================================================== */
.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  padding-block: var(--space-8);
  border-top: var(--rule-1) solid var(--hairline);
  margin-top: var(--head-mb);
  font-family: var(--fm);
  font-size: var(--text-mono-md);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--mute);
}

.paper .pager {
  border-top-color: var(--hairline-p);
  color: var(--mute-p);
}

.pager a {
  transition: color var(--duration-base);
}

.pager a:hover {
  color: var(--amber);
}

.paper .pager a:hover {
  color: var(--ink);
}

.pager .current {
  color: var(--ink);
}

.paper .pager .current {
  color: var(--ink);
}

/* ==========================================================================
   #PRICING RATE CARD (paper §4.1)
   ========================================================================== */
.rate-rows {
  border-top: var(--rule-2) solid var(--ink);
}

.rate {
  display: grid;
  grid-template-columns: var(--size-row-no-col) 1fr auto;
  gap: var(--space-8);
  align-items: baseline;
  padding-block: var(--space-8);
  border-bottom: var(--rule-1) solid var(--hairline-p);
}

.rate.emphasis {
  background: var(--paper-2);
  padding-inline: var(--space-6);
  margin-inline: calc(-1 * var(--space-6));
}

.rate .no {
  font-family: var(--fm);
  font-size: var(--text-mono-xl);
  letter-spacing: var(--tracking-mono);
  color: var(--mute-p);
}

.rate h3 {
  font-family: var(--fd);
  font-weight: var(--weight-heading-black);
  font-size: var(--text-display-step);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.rate .note {
  font-size: var(--text-body-md);
  max-width: var(--measure-reading);
  margin-top: var(--space-3);
}

.rate .qual {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--fm);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--mute-p);
}

.rate .amount {
  font-family: var(--fd);
  font-weight: var(--weight-heading-black);
  font-size: var(--text-display-step);
  color: var(--ink);
  text-align: end;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rate .amount small {
  display: block;
  font-family: var(--fm);
  font-size: var(--text-mono-xs);
  font-weight: var(--weight-mono);
  color: var(--mute-p);
  letter-spacing: var(--tracking-mono);
}

.rate-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-10);
}

/* ==========================================================================
   #FAQ — accordion (§4.2, native <details>, dark skin variant)
   ========================================================================== */
.faq-group {
  margin-top: var(--section-y);
}

.faq-group:first-of-type {
  margin-top: 0;
}

.faq-group > .kicker {
  margin-bottom: var(--space-6);
}

.faq {
  border-bottom: var(--rule-1) solid var(--hairline-p);
  max-width: var(--container-statement);
}

.faq summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-6);
  align-items: baseline;
  padding-block: var(--space-6);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary .q {
  font-size: var(--text-title-note);
  font-weight: var(--weight-body-semibold);
  line-height: var(--leading-note);
}

.faq summary .mk {
  font-family: var(--fm);
  font-size: var(--text-mono-2xl);
  color: var(--mute-p);
  line-height: var(--leading-tight);
}

.faq[open] summary .mk {
  color: var(--ink);
}

.faq .a {
  padding-bottom: var(--space-6);
  font-size: var(--text-body-md);
  max-width: var(--measure-reading);
}

/* dark faq skin */
.faq-dark {
  border-bottom-color: var(--hairline);
}

.faq-dark summary .mk {
  color: var(--amber);
}

.faq-dark[open] summary .q {
  color: var(--amber);
}

.faq-dark .a {
  color: var(--bone-soft);
}

/* ==========================================================================
   #CONTACT INFO — info list (§4.9) + map frame (§4.10)
   ========================================================================== */
.info-list {
  list-style: none;
  border-top: var(--rule-2) solid var(--bone);
}

.info-list li {
  display: block;
  padding-block: var(--space-4);
  border-bottom: var(--rule-1) solid var(--hairline);
}

.info-list .lbl {
  font-family: var(--fm);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--mute);
  display: block;
  margin-bottom: var(--space-1);
}

.info-list .val {
  font-family: var(--fm);
  font-size: var(--text-mono-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--bone);
}

.info-list a.val {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-tap-min);
}

.info-list a.val:hover {
  color: var(--amber);
}

.map-frame {
  margin-top: var(--space-8);
  position: relative;
  background: var(--iron-2);
  border-radius: var(--radius-md);
  aspect-ratio: var(--aspect-frame-sm);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.map-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--opacity-map-overlay);
}

.map-frame .stamps {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4);
}

/* .stamp defaults to position:absolute for its single-badge use (top-left corner of
   .frame/.shot); inside .map-frame's flex .stamps row that fights the flex layout and
   collapses the badge to a shrink-to-fit auto width, forcing longer labels (e.g. the
   contact-page ring stamp, a free-text customizer field with no length cap in the WP
   port) to wrap onto a second line that gets clipped by .map-frame's fixed aspect-ratio
   + overflow:hidden — see qa/REPORT.md persona-design MAJOR "photo caption badge is
   vertically clipped". .map-frame can't grow to fit wrapped text without distorting the
   photo crop, so keep the badge in flow (not absolute) and force one line: a fluid
   font-size keeps most real-world labels fully legible at their natural width, and
   nowrap + ellipsis is a hard backstop so a pathologically long custom string truncates
   cleanly instead of ever wrapping/clipping again. */
.map-frame .stamps .stamp {
  position: static;
  max-width: var(--measure-stamp);
  font-size: var(--text-mono-stamp);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-cap {
  margin-top: var(--space-4);
  font-family: var(--fm);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--mute);
}

/* ==========================================================================
   #ARTICLE — blog single article body (§4.7)
   ========================================================================== */
.article {
  max-width: var(--measure-reading);
  margin-inline: auto;
}

.article > * + * {
  margin-top: var(--space-6);
}

.article p {
  color: var(--ink);
}

.article h2 {
  font-family: var(--fd);
  font-weight: var(--weight-heading-black);
  font-size: var(--text-display-step);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin-top: var(--space-12);
}

.article ul {
  list-style: none;
  border-top: var(--rule-1) solid var(--hairline-p);
}

.article ul li {
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-4);
  border-bottom: var(--rule-1) solid var(--hairline-p);
  font-size: var(--text-body-md);
}

.article ul li::before {
  content: "■";
  color: var(--amber);
  font-size: var(--text-glyph-sm);
  flex: 0 0 auto;
  -webkit-text-stroke: var(--rule-2) var(--check-stroke);
}

.article .pull {
  border-top: var(--rule-2) solid var(--ink);
  padding-top: var(--space-6);
  margin-block: var(--space-12);
}

.article .pull blockquote {
  font-size: var(--text-body-lg);
  line-height: var(--leading-quote);
  font-weight: var(--weight-body-medium);
}

.article .pull figcaption {
  margin-top: var(--space-6);
  font-family: var(--fm);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--mute-p);
}

.article .pull figcaption b {
  color: var(--ink);
  font-weight: var(--weight-mono-medium);
}

.article .cta-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  margin-block: var(--space-12);
}

.feature-full {
  padding: 0 var(--gutter);
}

.feature-full .frame {
  aspect-ratio: 16/9;
  max-width: var(--container-content);
  margin-inline: auto;
}

.author-card {
  border-top: var(--rule-2) solid var(--ink);
  padding-top: var(--space-6);
  max-width: var(--container-statement);
}

.author-card h3 {
  font-family: var(--fd);
  font-weight: var(--weight-heading-black);
  font-size: var(--text-heading-crew);
  text-transform: uppercase;
  line-height: var(--leading-tight);
}

.author-card .badge {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--fm);
  font-size: var(--text-mono-2xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--mute-p);
}

.author-card p {
  margin-top: var(--space-4);
  font-size: var(--text-body-sm);
  color: var(--ink);
  max-width: var(--measure-reading);
}

/* ==========================================================================
   #DOC — document / legal page body (§4.14)
   ========================================================================== */
.doc {
  max-width: var(--measure-reading);
  margin-inline: auto;
}

.doc .notice {
  font-family: var(--fm);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--mute-p);
  border: var(--rule-1) solid var(--hairline-p);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-10);
}

.doc .toc {
  list-style: none;
  margin-bottom: var(--section-y);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}

.doc .toc a {
  font-family: var(--fm);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--mute-p);
  border-bottom: var(--rule-1) solid var(--hairline-p);
  padding-bottom: var(--space-1);
  transition: color var(--duration-base), border-color var(--duration-base);
}

.doc .toc a:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.doc section.docsec {
  padding: 0;
  margin-top: var(--section-y);
}

.doc h2 {
  font-family: var(--fd);
  font-weight: var(--weight-heading-black);
  font-size: var(--text-display-step);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin-bottom: var(--space-6);
}

.doc p {
  font-size: var(--text-body-md);
  color: var(--ink);
}

.doc p + p {
  margin-top: var(--space-4);
}

/* ==========================================================================
   #404
   ========================================================================== */
.notfound h1 {
  font-size: var(--text-display-hero);
}

/* ==========================================================================
   #COMING SOON (standalone, no site chrome)
   ========================================================================== */
.coming {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--footer-y) var(--gutter);
  overflow: hidden;
}

.coming .bg {
  position: absolute;
  inset: 0;
  background: center/cover no-repeat;
}

.coming .shade {
  position: absolute;
  inset: 0;
  background: var(--shade-side), var(--shade-vert);
}

.coming > * {
  position: relative;
  z-index: var(--z-hero-fg);
}

.coming .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.coming .coords {
  font-family: var(--fm);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--bone-dim);
}

.coming .mid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  padding-block: var(--section-y);
}

.coming h1 {
  font-size: var(--text-display-page);
  max-width: var(--measure-heading);
}

.coming h1 .line {
  display: block;
  overflow: hidden;
}

.coming h1 .line > span {
  display: block;
  transform: translateY(var(--hero-line-offset));
  transition: transform var(--duration-hero) var(--ease-expo);
}

.coming.on h1 .line:nth-child(1) > span {
  transition-delay: var(--hero-delay-1);
  transform: translateY(0);
}

.coming.on h1 .line:nth-child(2) > span {
  transition-delay: var(--hero-delay-2);
  transform: translateY(0);
}

.coming .lede {
  max-width: var(--measure-lede);
  color: var(--bone-soft);
  margin-top: var(--space-6);
}

.countdown {
  display: flex;
  gap: var(--gap-md);
  margin-top: var(--space-10);
}

.countdown .unit {
  text-align: center;
}

.countdown .num {
  font-family: var(--fd);
  font-weight: var(--weight-heading-black);
  font-size: var(--text-display-step);
  color: var(--bone);
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-tight);
}

.countdown .lab {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--fm);
  font-size: var(--text-mono-2xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--mute);
}

.coming .capture {
  margin-top: var(--space-10);
  max-width: var(--measure-column);
}

.coming .capture p {
  color: var(--bone-soft);
  font-size: var(--text-body-sm);
  margin-bottom: var(--space-4);
}

.coming .foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  font-family: var(--fm);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--mute);
}

.coming .foot a[href^=tel] {
  color: var(--amber);
}

/* ==========================================================================
   #FOOTER
   ========================================================================== */
footer {
  border-top: var(--rule-1) solid var(--hairline);
  padding: var(--footer-y) var(--gutter) 0;
  overflow: hidden;
}

.fgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 2.2fr);
  gap: var(--gap-lg);
  padding-bottom: var(--head-mb);
}

.fgrid .fhead {
  font-family: var(--fm);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--mute);
  font-weight: var(--weight-mono);
  margin-bottom: var(--space-6);
}

.fgrid .brand p {
  color: var(--mute);
  font-size: var(--text-body-sm);
  max-width: var(--measure-brand);
  margin-top: var(--space-4);
}

.fgrid ul {
  list-style: none;
  font-family: var(--fm);
  font-size: var(--text-mono-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  line-height: var(--leading-footer-list);
}

.fgrid ul a {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-tap-min);
  color: var(--bone);
  opacity: var(--opacity-footer-link);
  transition: opacity var(--duration-fast), color var(--duration-fast);
}

.fgrid ul a:hover {
  opacity: 1;
  color: var(--amber);
}

.fgrid address {
  font-style: normal;
  font-family: var(--fm);
  font-size: var(--text-mono-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--bone);
  line-height: var(--leading-footer-list);
  opacity: var(--opacity-footer-address);
}

.fgrid, .fgrid address, .fgrid ul, .fgrid .brand p {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.fgrid address a {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-tap-min);
}

.fgrid address a:hover {
  color: var(--amber);
}

.fgrid .news p {
  color: var(--mute);
  font-size: var(--text-small);
  margin-bottom: var(--space-6);
}

.newsform {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.newsform input {
  flex: 1 1 100%;
  min-width: 0;
  background: transparent;
  border: var(--rule-1) solid var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--bone);
  font-family: var(--fb);
  font-size: var(--text-body-sm);
  padding: var(--space-3) var(--space-4);
}

.newsform input:focus {
  border-color: var(--amber);
}

.newsform input:focus-visible {
  outline: var(--focus-outline) solid var(--amber);
  outline-offset: var(--focus-offset);
}

.newsform .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 100%;
  min-height: var(--size-tap-min);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-mono-2xs);
  white-space: nowrap;
}

.news .done {
  display: none;
  font-family: var(--fm);
  font-size: var(--text-mono-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--amber);
}

/* checklist promo band (blog-index) — paper newsletter as a section */
.news.promo p {
  max-width: var(--measure-reading);
  color: var(--ink);
  font-size: var(--text-body-md);
  margin-bottom: var(--space-6);
}

.paper .news.promo .done {
  color: var(--ink);
}

.news.promo .newsform input {
  border-color: var(--hairline-p);
  color: var(--ink);
}

.news.promo .newsform input::placeholder {
  color: var(--mute-p);
}

.news.form-done .done {
  display: block;
}

.news.form-done .newsform, .news.form-done > p {
  display: none;
}

.botbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4) var(--space-10);
  padding-block: var(--space-6);
  border-top: var(--rule-1) solid var(--hairline);
  font-family: var(--fm);
  font-size: var(--text-mono-2xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--mute);
}

.botbar a {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-tap-min);
  margin-block: calc(-1 * (var(--size-tap-min) - var(--botbar-link-em)) / 2);
}

.botbar a:hover {
  color: var(--amber);
}

/* ==========================================================================
   #REVEALS — viewport-entry fade/translate reveal + reduced-motion overrides
   ========================================================================== */
.rv {
  opacity: 0;
  transform: translateY(var(--reveal-offset));
  transition: opacity var(--duration-reveal) var(--ease-expo), transform var(--duration-reveal) var(--ease-expo);
}

.rv.on {
  opacity: 1;
  transform: none;
}

/* Layer promoted a frame ahead of the transition (see main.js queueReveal)
   so the browser rasterizes off-screen instead of promoting mid-scroll,
   which is what stalled paint for seconds on image-heavy cards even
   though the DOM/CSS already read "on" (opacity:1, visible). Hint is
   stripped on transitionend so we don't leave permanent layers around.
   main.js observes any `.rv` that wraps an <img> (job-grid/review photo
   cards) with a much larger IntersectionObserver rootMargin than plain
   text `.rv` elements, so full-bleed photo layers — costlier to
   rasterize — get primed with more lead time, including cards deep in a
   second/later grid section that a fast scroll reaches sooner than the
   standard margin could cover. */
.rv-priming {
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html {
    scroll-behavior: auto;
  }
  .rv {
    opacity: 1;
    transform: none;
  }
  .hero h1 .line > span, .phero h1 .line > span, .coming h1 .line > span {
    transform: none;
  }
  .marquee .track {
    animation: none;
  }
}
/* ==========================================================================
   #RESPONSIVE
   ========================================================================== */
/**
 * Mobile-first breakpoint overrides, kept as one ordered block (rather than
 * inlined per-component) to preserve the exact cascade/override order of
 * the original single-file stylesheet. Breakpoints match the token scale
 * referenced in tokens.css (--bp-lg/--bp-md/--bp-sm: 1100/860/560).
 */
@media (max-width: 1100px) {
  .fgrid {
    grid-template-columns: 1fr 1fr;
  }
  .fgrid .brand {
    grid-column: 1/-1;
  }
  .jobs .grid, .job-grid, .reviews .grid, .review-grid {
    grid-template-columns: 1fr 1fr;
  }
  .crew {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 860px) {
  .hero .meta, .phero .meta {
    display: none;
  }
  .hero .sub, .phero .sub {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
  }
  .svc {
    grid-template-columns: var(--size-row-no-col-sm) 1fr;
  }
  .svc .tag, .svc .arrow {
    display: none;
  }
  .manifesto .grid, .closer .grid, .proof .grid {
    grid-template-columns: 1fr;
  }
  .step {
    grid-template-columns: var(--size-row-no-col-sm) 1fr;
    grid-template-rows: auto auto;
  }
  .step p, .step .event {
    grid-column: 2;
  }
  .jobs .grid, .job-grid, .reviews .grid, .review-grid {
    grid-template-columns: 1fr;
  }
  .notes li a, .notes-list li a, .rail-list li a {
    grid-template-columns: 1fr auto;
  }
  .notes .go, .notes-list .go, .rail-list .go {
    display: none;
  }
  .trow {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .trow.flip .media {
    order: 0;
  }
  .trow .frame, .feature-band .frame {
    aspect-ratio: var(--aspect-frame-sm);
  }
  .receipts {
    flex-direction: column;
    gap: var(--space-3);
  }
  .topbar {
    justify-content: center;
    text-align: center;
  }
  .topbar .tb-phone {
    display: none;
  }
  .sitehead nav .navlink, .sitehead nav .phone {
    display: none;
  }
  .menu-btn {
    display: inline-flex;
  }
  .two {
    grid-template-columns: 1fr;
  }
  .ledger .stat, .rate {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .ledger .l {
    text-align: start;
  }
  .rate .no {
    display: none;
  }
  .rate .amount {
    text-align: start;
  }
  .countdown {
    flex-wrap: wrap;
  }
}
@media (max-width: 560px) {
  .crew {
    grid-template-columns: 1fr;
  }
  .fgrid {
    grid-template-columns: 1fr;
  }
  .trust ul {
    flex-direction: column;
    gap: var(--space-3);
  }
  .coming .coords {
    display: none;
  }
}