@charset "utf-8";
/* ============================================================================
   ReVolution Trailer Parts — main business website
   Navy utility surfaces · warm paper content planes · one ReVolution-orange accent
   No ecommerce: no catalogue, cards, prices, filters, cart or product search.
   ========================================================================= */

/* ---------------------------------------------------------------- fonts -- */
@font-face {
  font-family: "Oswald";
  src: url("assets/fonts/oswald-latin-var.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- tokens -- */
:root {
  /* navy — from the ReVolution logo blue (#273c73) */
  --navy-900: #101e3f;
  --navy-850: #172a55;
  --navy-800: #1e3363;
  --navy-750: #233a6d;
  --navy-700: #2b4480;

  /* steel, cooled toward the navy */
  --steel-600: #4b5566;
  --steel-500: #5f6a7c;
  --steel-400: #7d889a;
  --steel-300: #a6b0c0;
  --steel-200: #cad2de;

  /* paper */
  --paper: #f4f2ee;
  --paper-2: #faf9f7;
  --white: #ffffff;
  --line: #ddd8d0;
  --line-strong: #c6bfb4;

  /* accents — ReVolution orange */
  --orange-700: #a65908;    /* orange text and icons on light surfaces (AA) */
  --orange-600: #db9421;    /* brand orange: fills, rules, focus; navy text on top */
  --orange-500: #e8a73f;    /* hover fill */
  --orange-light: #f5b95a;  /* accent text on navy only */
  --orange-pale: #f9cf8a;   /* link hover on navy */

  /* validation stays red so errors never read as brand accent */
  --error-700: #b42318;
  --error-600: #d92d20;
  --error-bg: #fdecea;
  --tan-light: #c09a66;     /* logo tan, decorative rules on dark only */

  /* type */
  --font-display: "Oswald", "Haettenschweiler", "Arial Narrow", sans-serif;
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* geometry */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --shell: 1280px;
  --pad: 20px;
  --sticky-gap: 16px;

  /* The three header bands stay fixed. CSS carries close defaults; script.js
     writes the measured full and condensed heights. */
  --hdr-h: 148px;              /* utility, brand and navigation bands on every screen */
  --hdr-hc: 148px;

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 260ms;
}

@media (min-width: 720px)  { :root { --pad: 28px; --hdr-h: 166px; --hdr-hc: 166px; } }
@media (min-width: 1100px) { :root { --pad: 40px; } }
@media (min-width: 1024px) { :root { --hdr-h: 186px; --hdr-hc: 154px; } }

/* ----------------------------------------------------------------- base -- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* anchors land below the fixed header in its condensed state */
  scroll-padding-top: calc(var(--hdr-hc) + var(--sticky-gap));
}

body {
  margin: 0;
  padding-top: var(--hdr-h);
  background: var(--paper);
  color: var(--navy-850);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

/* component display rules must never beat the hidden attribute */
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }
a:hover { color: var(--orange-700); }

ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--orange-600);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.hero :focus-visible,
.primary-nav :focus-visible,
.utility-bar :focus-visible,
.section--escape :focus-visible,
.section--request :focus-visible,
.section--contact :focus-visible,
.site-footer :focus-visible,
.mobile-nav :focus-visible { outline-color: var(--orange-light); }
.marketplace :focus-visible,
.section--escape .escape-card :focus-visible { outline-color: var(--navy-900); }

::selection { background: var(--orange-600); color: var(--navy-900); }

/* --------------------------------------------------------------- layout -- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section { padding-block: 64px; }
@media (min-width: 720px)  { .section { padding-block: 88px; } }
@media (min-width: 1100px) { .section { padding-block: 112px; } }

.section-head {
  display: grid;
  gap: 16px 48px;
  margin-bottom: 40px;
  padding-bottom: 22px;
  border-bottom: 2px solid var(--navy-850);
}
@media (min-width: 900px) {
  .section-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    align-items: end;
    margin-bottom: 52px;
  }
}
.section-head__note {
  color: var(--steel-600);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.section-title { font-size: 2rem; }
@media (min-width: 720px)  { .section-title { font-size: 2.5rem; } }
@media (min-width: 1100px) { .section-title { font-size: 2.875rem; } }
.section-title--light { color: var(--paper-2); }

.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-700);
  margin: 0 0 10px;
}
.eyebrow--light { color: var(--orange-light); }

.lede {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--navy-800);
}
@media (min-width: 720px) { .lede { font-size: 1.125rem; } }

/* ------------------------------------------------------------ utilities -- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 200;
  transform: translateY(-160%);
  background: var(--orange-600);
  color: var(--navy-900);
  padding: 10px 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: transform 160ms var(--ease);
}
.skip-link:focus { transform: translateY(0); color: var(--navy-900); }

.u-dim { color: var(--steel-400); }

@media (max-width: 719px)  { .u-hide-sm { display: none !important; } }
@media (min-width: 720px)  { .u-show-sm { display: none !important; } }
@media (max-width: 1023px) { .u-hide-md { display: none !important; } }

/* -------------------------------------------------------------- buttons -- */
.btn {
  --btn-bg: var(--navy-850);
  --btn-fg: var(--paper-2);
  --btn-bd: var(--navy-850);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 20px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bd);
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn:hover { --btn-bg: var(--navy-700); --btn-bd: var(--navy-700); color: var(--btn-fg); }
.btn svg { flex: none; }

.btn--primary { --btn-bg: var(--orange-600); --btn-bd: var(--orange-600); --btn-fg: var(--navy-900); }
.btn--primary:hover { --btn-bg: var(--orange-500); --btn-bd: var(--orange-500); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--paper-2);
  --btn-bd: rgba(244, 242, 238, 0.55);
}
.btn--ghost:hover { --btn-bg: rgba(244, 242, 238, 0.12); --btn-bd: var(--paper-2); }

.btn--lg { min-height: 52px; padding: 0 26px; font-size: 1rem; }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 0.875rem; }
.btn--block { width: 100%; }

/* plain icon-only control — no pill, chip or decorative container */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.icon-btn:hover { color: var(--orange-700); }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--navy-850);
  border-bottom: 2px solid var(--orange-600);
  padding-bottom: 3px;
}
.arrow-link svg { flex: none; transition: transform var(--dur) var(--ease); }
.arrow-link:hover { color: var(--orange-700); }
.arrow-link:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------- header -- */
/* Three bands, fixed while the page scrolls: address and hours, the brand with
   one contact block, and the primary navigation. On wide screens the brand band
   condenses once the page moves, so the fixed stack gives back some height. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 61;
  background: var(--paper);
  box-shadow: 0 1px 0 var(--line), 0 10px 24px -18px rgba(16, 30, 63, 0.55);
}

.utility-bar {
  background: var(--navy-900);
  color: var(--steel-200);
  font-size: 0.8125rem;
}
.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  min-height: 34px;
}
@media (max-width: 719px) { .utility-bar { font-size: 0.75rem; } }
@media (max-width: 369px) {
  .utility-bar__inner { flex-wrap: wrap; justify-content: center; gap: 0 14px; padding-block: 3px; }
  .utility-bar__address { padding-block: 2px; }
}
.utility-bar .ico { color: var(--orange-light); flex: none; }
.utility-bar__address,
.utility-bar__hours {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
}
.utility-bar__address {
  padding-block: 6px;
  color: var(--paper-2);
  text-decoration: underline;
  text-decoration-color: rgba(245, 185, 90, 0.55);
  text-underline-offset: 4px;
}
.utility-bar__address:hover { color: var(--orange-pale); text-decoration-color: currentColor; }
@media (max-width: 719px) {
  .utility-bar__inner { flex-direction: column; gap: 0; padding-block: 3px; }
  .utility-bar__address { white-space: normal; text-align: center; padding-block: 2px; }
}

.header-main__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  padding-block: 10px;
  transition: padding var(--dur) var(--ease);
}
@media (min-width: 1024px) { .header-main__inner { padding-block: 12px; } }

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  text-decoration: none;
}
.brand img {
  width: 172px;
  height: auto;
  flex: none;
  transition: width var(--dur) var(--ease);
}
@media (min-width: 720px)  { .brand img { width: 236px; } }
@media (min-width: 1024px) { .brand img { width: clamp(264px, 23vw, 312px); } }
.brand__sub {
  display: none;
  padding: 6px 0 6px 16px;
  border-left: 2px solid var(--orange-600);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-800);
  white-space: nowrap;
}
@media (min-width: 560px)  { .brand__sub { display: block; } }
@media (min-width: 1024px) { .brand__sub { font-size: 1.3rem; } }
/* phones: the slogan tucks under the wordmark instead of beside it */
@media (max-width: 559px) {
  .brand { flex-direction: column; align-items: flex-start; gap: 3px; }
  .brand__sub {
    display: block;
    padding: 0 0 0 44px;
    border: 0;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: var(--orange-700);
  }
}

/* one contact block: the prominent phone number with the email under it */
.header-contact {
  display: none;
  justify-items: end;
  gap: 2px;
  text-align: right;
}
@media (min-width: 720px) { .header-contact { display: grid; } }
.header-contact__phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--navy-850);
  text-decoration: none;
  white-space: nowrap;
}
@media (min-width: 1024px) { .header-contact__phone { font-size: 1.75rem; } }
.header-contact__phone svg { color: var(--orange-700); flex: none; }
.header-contact__email {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--steel-600);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
.header-contact__phone:hover,
.header-contact__email:hover { color: var(--orange-700); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}
.header-actions__call { color: var(--navy-850); }
@media (min-width: 720px) { .header-actions__call { display: none; } }

.nav-toggle { color: var(--navy-850); }
@media (min-width: 1024px) { .header-actions { display: none; } }

.site-header.is-measuring *,
.site-header.is-measuring { transition: none !important; }

/* condensed brand band — desktop only, toggled by script.js after the page moves */
@media (min-width: 1024px) {
  .site-header.is-condensed .header-main__inner { padding-block: 7px; }
  .site-header.is-condensed .brand img { width: 204px; }
  .site-header.is-condensed .brand__sub { font-size: 1.05rem; }
  .site-header.is-condensed .header-contact__phone { font-size: 1.45rem; }
}

/* primary nav ------------------------------------------------------------- */
.primary-nav { background: var(--navy-850); color: var(--paper-2); }
.primary-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 52px;
}
.primary-nav ul { display: flex; flex-wrap: nowrap; gap: 2px; }
.primary-nav ul a { white-space: nowrap; }
.primary-nav ul a {
  display: block;
  padding: 14px 11px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.primary-nav ul li:first-child a { padding-left: 0; }
.primary-nav ul a:hover { color: #fff; border-bottom-color: var(--orange-600); }
.primary-nav ul a[aria-current="true"],
.primary-nav ul a[aria-current="page"] { color: #fff; border-bottom-color: var(--orange-600); }

.primary-nav__actions { display: flex; align-items: center; gap: 22px; flex: none; }
.primary-nav__plan { min-height: 36px; }
.primary-nav__market {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 8px 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper-2);
  border-bottom: 2px solid var(--orange-600);
  white-space: nowrap;
}
.primary-nav__market:hover { color: #fff; border-bottom-color: var(--paper-2); }
@media (max-width: 1023px) {
  .primary-nav__inner { min-height: 52px; }
  .primary-nav ul { display: none; }
  .primary-nav__actions { width: 100%; justify-content: space-between; gap: 12px; }
  .primary-nav__plan { min-height: 44px; padding: 8px 12px; font-size: 0.75rem; }
  .primary-nav__market { min-height: 44px; font-size: 0.6875rem; letter-spacing: 0.02em; gap: 4px; }
}
@media (min-width: 1024px) and (max-width: 1159px) {
  .primary-nav ul a { padding-inline: 8px; font-size: 0.8125rem; }
  .primary-nav__actions { gap: 16px; }
}

/* ----------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: max(520px, min(640px, calc(100dvh - var(--hdr-h))));
  background: var(--navy-900);
  color: var(--paper-2);
  overflow: hidden;
}
@media (min-width: 720px)  { .hero { min-height: max(560px, min(700px, calc(100dvh - var(--hdr-h)))); } }
@media (min-width: 1024px) { .hero { min-height: max(560px, min(780px, calc(100dvh - var(--hdr-h)))); } }

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img,
.hero__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Mobile is necessarily a portrait crop of the 4:3 founders photograph.
     Bias toward Megan so a face remains clear beside the left-anchored copy;
     wider screens open back out to the full two-person composition. */
  object-position: 59% 22%;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(14, 24, 52, 0.82) 0%, rgba(14, 24, 52, 0.56) 68%, rgba(14, 24, 52, 0.24) 100%),
    linear-gradient(to bottom,
      rgba(16, 30, 63, 0.12) 0%, rgba(16, 30, 63, 0.08) 48%, rgba(16, 30, 63, 0.72) 100%);
}
@media (min-width: 720px) { .hero__media img, .hero__media video { object-position: 54% 18%; } }
@media (min-width: 900px) {
  .hero__media img, .hero__media video { object-position: 50% 15%; }
  .hero::before {
    background:
      linear-gradient(100deg,
        rgba(14, 24, 52, 0.92) 0%, rgba(14, 24, 52, 0.78) 30%,
        rgba(14, 24, 52, 0.40) 49%, rgba(14, 24, 52, 0.08) 72%,
        rgba(14, 24, 52, 0.16) 100%),
      linear-gradient(to bottom,
        rgba(16, 30, 63, 0.08) 0%, rgba(16, 30, 63, 0.04) 62%,
        rgba(16, 30, 63, 0.46) 100%);
  }
}

.hero__inner {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding-block: 52px 56px;
}
@media (min-width: 900px) { .hero__inner { padding-block: 64px 72px; } }

.hero__copy { max-width: 36rem; }
.hero__eyebrow { color: var(--orange-light); }

.hero__title {
  font-size: 2.75rem;
  line-height: 0.98;
  margin-bottom: 20px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
@media (min-width: 720px)  { .hero__title { font-size: 3.75rem; } }
@media (min-width: 1100px) { .hero__title { font-size: 4.5rem; } }
.hero__title em {
  display: inline-block;
  font-style: normal;
  color: #fff;
  border-bottom: 6px solid var(--orange-600);
  padding-bottom: 2px;
}

.hero__lede {
  max-width: 32rem;
  margin-bottom: 26px;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: #e4e2de;
}
@media (min-width: 720px) { .hero__lede { font-size: 1.125rem; } }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* scroll cue — a hairline with an orange segment dropping through it. Decorative
   only (aria-hidden); it marks where the cover starts to move. */
.hero__cue {
  display: none;
  overflow: hidden;
  position: absolute;
  right: var(--pad);
  bottom: 26px;
  z-index: 1;
  margin: 0;
  padding-bottom: 62px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.62);
}
@media (min-width: 900px) and (min-height: 620px) { .hero__cue { display: block; } }
.hero__cue::before {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 0;
  width: 1px;
  height: 52px;
  background: rgba(244, 242, 238, 0.28);
  overflow: hidden;
}
.hero__cue::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 30px;
  width: 1px;
  height: 22px;
  background: linear-gradient(to bottom, rgba(219, 148, 33, 0) 0%, var(--orange-600) 55%, rgba(219, 148, 33, 0) 100%);
  animation: cue-drop 2.6s var(--ease) infinite;
}

/* ------------------------------------------------------------- sourcing -- */
.section--sourcing { background: var(--paper); }

.split { display: grid; gap: 32px; }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 64px; align-items: start; }
}
.split__copy p { color: var(--steel-600); max-width: 46rem; }
.split__copy .lede { color: var(--navy-800); }

.split__figure { margin: 0; }
.split__figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--r-md);
}
.split__figure figcaption {
  margin-top: 10px;
  padding-left: 12px;
  border-left: 3px solid var(--tan-light);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--steel-500);
}

.steps { margin-top: 34px; display: grid; }
.step {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--line-strong);
}
.step:last-child { border-bottom: 1px solid var(--line-strong); }
.step__num {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--orange-700);
  line-height: 1.2;
}
.step h3 { font-size: 1.125rem; margin-bottom: 5px; }
.step p { margin: 0; font-size: 0.9375rem; color: var(--steel-600); }

/* ------------------------------------------------------------- pathways -- */
.section--pathways { background: var(--paper-2); border-block: 1px solid var(--line); }

.pathways { display: grid; gap: 32px; }
@media (min-width: 900px) { .pathways { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }

.pathway {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-top: 20px;
  border-top: 3px solid var(--navy-850);
}
.pathway__kicker {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-700);
}
.pathway h3 { font-size: 1.375rem; }
.pathway p { margin: 0; font-size: 0.9375rem; color: var(--steel-600); }
.pathway .arrow-link { margin-top: auto; }

/* ---------------------------------------------------------- marketplace -- */
/* An orange band, so the hand-off never blends into the dark request section
   below it or the warm FAQ plane above it. */
.marketplace {
  background: var(--orange-600);
  color: var(--navy-900);
  padding-block: 40px;
}
@media (min-width: 900px) { .marketplace { padding-block: 48px; } }
.marketplace__inner { display: grid; gap: 20px 36px; align-items: center; }
@media (min-width: 900px) {
  .marketplace__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
}
.marketplace__icon {
  display: none;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--orange-light);
}
@media (min-width: 900px) { .marketplace__icon { display: grid; } }
.marketplace__eyebrow { color: var(--navy-800); }
.marketplace .section-title { margin-bottom: 10px; font-size: clamp(1.75rem, 3vw, 2.4rem); color: var(--navy-900); }
.marketplace__copy p:last-child { margin: 0; max-width: 46rem; color: var(--navy-850); }
.marketplace__action { display: grid; justify-items: start; }
@media (min-width: 900px) { .marketplace__action { justify-items: end; } }

.btn--navy { --btn-bg: var(--navy-900); --btn-bd: var(--navy-900); --btn-fg: var(--paper-2); }
.btn--navy:hover { --btn-bg: var(--navy-700); --btn-bd: var(--navy-700); }

/* ------------------------------------------------------------- workshop -- */
.section--workshop { background: var(--paper); }

.workshop { display: grid; gap: 24px; }
@media (min-width: 720px) {
  .workshop {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "main side" "copy copy";
    gap: 28px 28px;
  }
  .workshop__figure--main { grid-area: main; }
  .workshop__figure--side { grid-area: side; }
  .workshop__copy { grid-area: copy; }
}
@media (min-width: 1024px) {
  .workshop {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 0.68fr);
    grid-template-areas: "main copy side";
    gap: 40px;
    align-items: start;
  }
}

.workshop__figure { margin: 0; }
.workshop__figure img { width: 100%; border-radius: var(--r-md); object-fit: cover; }
.workshop__figure--main img { aspect-ratio: 1 / 1; }
.workshop__figure--side img { aspect-ratio: 3 / 4; }
@media (min-width: 720px) and (max-width: 1023px) {
  /* side by side in this range — matching crops keep the pair level */
  .workshop__figure--main img,
  .workshop__figure--side img { aspect-ratio: 4 / 3; }
}

.workshop__copy .lede { margin-bottom: 24px; }

.credentials { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.credentials > div { padding: 14px 16px; background: var(--white); }
.credentials dt {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.credentials dd { font-size: 0.875rem; line-height: 1.55; color: var(--steel-600); }

.capabilities { margin-top: 48px; }
@media (min-width: 1024px) { .capabilities { margin-top: 64px; } }
.capabilities__title {
  font-size: 1.375rem;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--navy-850);
  margin-bottom: 4px;
}
.capability-list { display: grid; }
.capability {
  display: grid;
  gap: 6px 40px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-strong);
}
@media (min-width: 900px) {
  .capability { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); align-items: baseline; }
}
.capability h4 { font-size: 1.0625rem; letter-spacing: 0.03em; }
.capability p { margin: 0; font-size: 0.9375rem; color: var(--steel-600); }
.capabilities__note {
  margin-top: 18px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--steel-500);
  max-width: 46rem;
}

/* -------------------------------------------------------------- request -- */
.section--request { background: var(--navy-850); color: var(--paper-2); }

.request { display: grid; gap: 40px; }
@media (min-width: 1024px) {
  .request { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: 64px; align-items: start; }
}
.request__editorial p { color: #cfd8e6; max-width: 44rem; }
.request__editorial .section-title { margin-bottom: 18px; }

.request__figure { margin: 28px 0 0; }
.request__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); }
.request__figure figcaption {
  margin-top: 10px;
  padding-left: 12px;
  border-left: 3px solid var(--orange-600);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--steel-300);
}

.request__direct { display: grid; gap: 12px; margin-top: 26px; }
.request__direct li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9375rem; color: #cfd8e6; }
.request__direct svg { flex: none; color: var(--orange-light); margin-top: 2px; }
.request__direct a { color: #fff; text-underline-offset: 3px; }
.request__direct a:hover { color: var(--orange-light); }

.request__panel {
  position: relative;
  padding: 24px;
  background: var(--paper-2);
  color: var(--navy-850);
  border-radius: var(--r-md);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
}
@media (min-width: 1024px) {
  .request__panel {
    position: sticky;
    top: calc(var(--hdr-hc) + var(--sticky-gap));
    padding: 28px;
  }
}
.request__panel-title {
  font-size: 1.375rem;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--navy-850);
}

/* ---------------------------------------------------------------- forms -- */
.field { margin-bottom: 16px; }
/* only the field's own caption gets the uppercase treatment — never a .control */
.field > label:not(.control),
.field--split > div > label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--steel-600);
}
.field .req { color: var(--orange-700); }
.field__optional {
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--steel-400);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
}
.field textarea { min-height: 108px; resize: vertical; line-height: 1.55; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline-offset: 0; }

.field--split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }

.field--choice { border: 0; padding: 0; margin-bottom: 18px; min-width: 0; }
.field--check { margin-bottom: 20px; }
.field--choice legend {
  padding: 0 0 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--steel-600);
}

.control {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy-850);
  cursor: pointer;
}
.control input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--orange-700);
  flex: none;
}
.control:hover { color: var(--orange-700); }

.field__hint {
  margin: 6px 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--steel-500);
}
.field__hint--escape {
  margin-top: 8px;
  padding: 9px 12px;
  border-left: 3px solid var(--orange-600);
  background: #fdf2e2;
  color: var(--navy-850);
  font-size: 0.8125rem;
}
.field__hint--escape a { font-weight: 600; color: var(--navy-850); }
.field__error {
  margin: 6px 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--error-700);
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: var(--error-600); box-shadow: inset 0 0 0 1px var(--error-600); }

.form-error-summary {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--error-bg);
  border-left: 4px solid var(--error-600);
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--error-700);
}

.form-smallprint {
  margin: 12px 0 0;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--steel-500);
}

.form-success {
  position: relative;
  padding: 22px 22px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange-600);
  border-radius: var(--r-sm);
}
.form-success__close { position: absolute; top: 8px; right: 8px; color: var(--steel-500); }
.form-success__flag {
  margin: 0 0 8px;
  padding-right: 40px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-700);
}
.form-success__title { font-size: 1.25rem; margin-bottom: 10px; }
.form-success__body { font-size: 0.875rem; line-height: 1.6; color: var(--steel-600); }
.form-success__body strong { color: var(--navy-850); }
.form-success__body a { font-weight: 600; }

/* ---------------------------------------------------------------- story -- */
.section--story { background: var(--paper-2); border-top: 1px solid var(--line); }
.story { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) {
  .story { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: 64px; }
}
.story__intro p { color: var(--steel-600); max-width: 42rem; }
.story__intro .lede { color: var(--navy-800); }
.story__intro .section-title { margin-bottom: 18px; }
.story__portrait { margin: 0; }
.story__portrait img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); }
.story__portrait figcaption {
  margin-top: 10px;
  padding-left: 12px;
  border-left: 3px solid var(--tan-light);
  font-size: 0.8125rem;
  color: var(--steel-500);
}

/* ------------------------------------------------------------- projects -- */
.section--projects { background: var(--paper); }
.project-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
}
.project { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--navy-850); }
.project__open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: zoom-in;
}
.project__open:focus-visible { outline: 3px solid var(--orange-600); outline-offset: -3px; }
.project img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 620ms var(--ease), opacity var(--dur) var(--ease);
}
.project:hover img { transform: scale(1.04); opacity: 0.9; }
.project__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 20px;
  color: var(--paper-2);
  background: linear-gradient(to top, rgba(16, 30, 63, 0.94) 22%, rgba(16, 30, 63, 0) 100%);
}
.project__body h3 { font-size: 1.1875rem; margin-bottom: 6px; }
.project__body p { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: #d5d8da; }
.project__hint {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border-radius: 4px;
  background: rgba(16, 30, 63, 0.86);
  color: var(--paper-2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.project:hover .project__hint,
.project__open:focus-visible .project__hint { opacity: 1; transform: none; }

.project-strip--full { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.project-strip--full .project img { aspect-ratio: 4 / 5; }
.project__count {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  background: rgba(16, 30, 63, 0.82);
  color: var(--paper-2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.projects-more { display: flex; justify-content: center; margin-top: 32px; }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--navy-850); --btn-bd: var(--navy-850); }
.btn--outline:hover { --btn-bg: var(--navy-850); --btn-fg: var(--paper-2); --btn-bd: var(--navy-850); }

.section-head__note > p { margin-bottom: 12px; }
.section-head__note .arrow-link { margin-top: 0; }

/* ------------------------------------------------------ all projects page -- */
.page-intro { padding-block: clamp(48px, 7vw, 96px) clamp(32px, 4vw, 48px); background: var(--navy-850); color: var(--paper-2); }
.page-intro__inner { display: grid; gap: 18px 64px; }
@media (min-width: 900px) { .page-intro__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); align-items: end; } }
.page-intro h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1; }
.page-intro p { margin: 0; color: #cfd8e6; }
.page-intro__crumb { margin-bottom: 14px; font-size: 0.8125rem; }
.page-intro__crumb a { color: var(--orange-light); }

.project-list { display: grid; gap: clamp(36px, 5vw, 64px); }
.project-row { display: grid; gap: 20px 48px; padding-bottom: clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--line-strong); }
.project-row:last-child { padding-bottom: 0; border-bottom: 0; }
@media (min-width: 900px) {
  .project-row { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); align-items: center; }
  .project-row:nth-child(even) .project-row__media { order: 2; }
}
.project-row__media { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--navy-850); }
.project-row__media .project__open img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 620ms var(--ease); }
@media (min-width: 900px) { .project-row__media .project__open img { aspect-ratio: 4 / 4.2; } }
.project-row__media:hover .project__open img { transform: scale(1.03); }
.project-row__copy h2 { margin: 6px 0 14px; font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.project-row__copy p { color: var(--steel-600); max-width: 40rem; }
.project-row__copy .btn { margin-top: 10px; }

/* ------------------------------------------------------ business services -- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
}
.service-card {
  position: relative;
  min-height: 300px;
  padding: 28px;
  background: var(--paper-2);
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.service-card--feature { background: var(--white); }
.service-card__num {
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  color: var(--steel-400);
}
.service-card__icon {
  display: block;
  width: 48px;
  height: 48px;
  margin-top: 24px;
  fill: none;
  stroke: var(--navy-900);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.service-card__icon .icon-accent { stroke: var(--orange-600); stroke-width: 2.25; }
.service-card h3 { max-width: 18rem; margin: 16px 0 12px; font-size: 1.45rem; }
.service-card > p:not(.pathway__kicker) { color: var(--steel-600); font-size: 0.9375rem; }
.service-card .arrow-link { margin-top: 22px; }

.workshop--services { margin-top: clamp(48px, 6vw, 84px); }
.workshop-heading { margin: 12px 0 16px; font-size: clamp(1.7rem, 3vw, 2.65rem); }

/* ------------------------------------------------------------- Escape RVs -- */
.section--escape { background: var(--navy-850); color: var(--paper-2); }
.escape-intro { display: grid; gap: 24px; margin-bottom: clamp(36px, 5vw, 60px); align-items: end; }
@media (min-width: 900px) { .escape-intro { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; } }
.escape-intro p { color: #cfd8e6; }

.subsection-title { font-size: clamp(1.45rem, 2.4vw, 1.9rem); letter-spacing: 0.02em; }
.section--escape .subsection-title { color: var(--paper-2); }

/* trailers physically on the lot — kept apart from the order path below */
.escape-lot__head {
  display: grid;
  gap: 8px 40px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(244, 242, 238, 0.2);
}
@media (min-width: 900px) { .escape-lot__head { grid-template-columns: auto minmax(0, 34rem); justify-content: space-between; align-items: end; } }
.escape-lot__head p { margin: 0; color: #cfd8e6; font-size: 0.9375rem; }

.escape-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 22px; }
.escape-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper-2);
  color: var(--navy-850);
  border-radius: var(--r-md);
}
.escape-card .carousel { aspect-ratio: 16 / 10; }
.escape-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px 22px 22px; }
.escape-card h4 { margin: 8px 0 16px; font-size: 1.6rem; }
.escape-card__desc { margin: -4px 0 16px; color: var(--steel-600); font-size: .875rem; line-height: 1.55; }
.escape-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  margin-top: auto;
  padding-top: 18px;
}
.escape-card__price { margin: 0; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.escape-card__price s { margin-right: 10px; color: var(--steel-400); font-size: 1rem; font-weight: 500; }
.escape-card .arrow-link { margin-top: 0; }
.escape-empty { grid-column: 1 / -1; padding: 28px; border: 1px solid rgba(244, 242, 238, .18); border-radius: var(--r-md); color: #cfd8e6; }
/* Empty lists on light sections (lot, projects) */
.list-empty { grid-column: 1 / -1; margin: 0; padding: 28px; border: 1px dashed var(--line); border-radius: var(--r-md); color: var(--steel-600); list-style: none; }
.inventory-note a { color: var(--paper-2); font-weight: 600; }
.inventory-note { margin: 20px 0 0; max-width: 58rem; color: var(--steel-300); font-size: .78rem; line-height: 1.6; }

/* labelled specification rows, shared by the Escape cards */
.spec-table { display: grid; border-top: 1px solid var(--line); }
.spec-table > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.spec-table dt { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-500); white-space: nowrap; }
.spec-table dd { font-size: .875rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* the separate route for ordering a new Escape: Escape's ReVolution partner page */
.escape-order {
  display: grid;
  gap: 22px 56px;
  margin-top: clamp(44px, 6vw, 72px);
  padding: clamp(24px, 3.4vw, 40px);
  background: var(--navy-900);
  border: 1px solid rgba(244, 242, 238, 0.14);
  border-left: 4px solid var(--orange-600);
  border-radius: var(--r-md);
}
@media (min-width: 960px) { .escape-order { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.escape-order .subsection-title { margin-bottom: 12px; }
.escape-order__copy p:last-child { max-width: 44rem; margin: 0; color: #cfd8e6; }
.escape-order__action { display: grid; gap: 10px; justify-items: start; }
@media (min-width: 960px) { .escape-order__action { justify-items: end; } }
.escape-order__action p { margin: 0; color: var(--steel-300); font-size: .75rem; }

/* ------------------------------------------------------- photo carousels -- */
/* Inline photo browsing on inventory cards; the photo itself opens the full
   gallery. Arrows appear only when there is more than one photo. */
.carousel {
  position: relative;
  overflow: hidden;
  background: var(--navy-900);
}
.carousel__open {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.carousel__open img { width: 100%; height: 100%; object-fit: cover; transition: opacity 180ms var(--ease); }
.carousel__open:focus-visible { outline: 3px solid var(--orange-600); outline-offset: -3px; }
.carousel__nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(16, 30, 63, 0.72);
  color: var(--paper-2);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.carousel__nav:hover { background: var(--orange-600); color: var(--navy-900); }
.carousel__nav:focus-visible { outline: 3px solid var(--orange-light); outline-offset: 2px; }
.carousel__nav--prev { left: 10px; }
.carousel__nav--next { right: 10px; }
.carousel__count {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  background: rgba(16, 30, 63, 0.8);
  color: var(--paper-2);
  font-size: .72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* ------------------------------------------------------------ on the lot -- */
.section--lot { background: var(--paper); }
.lot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr)); gap: 20px; }
.lot-grid.is-collapsed > li:nth-child(n + 9) { display: none; }
.lot-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.lot-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #e7e1d8; }
.lot-card__media img { width: 100%; height: 100%; object-fit: cover; }
.lot-card .carousel { aspect-ratio: 4 / 3; }
.lot-card__flag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  background: var(--orange-600);
  color: var(--navy-900);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
}
.lot-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 18px 18px; }
.lot-card__year { margin: 0 0 2px; font-size: .75rem; font-weight: 700; letter-spacing: .14em; color: var(--orange-700); }
.lot-card h3 { font-size: 1.35rem; }
.lot-card__model { margin: 3px 0 0; color: var(--steel-600); font-size: .9rem; }
.lot-card__desc { margin: 10px 0 0; color: var(--steel-600); font-size: .84rem; line-height: 1.5; }
.lot-card__price { margin: 0 0 12px; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; }
/* specs, price and the enquiry link share a baseline across the row */
.lot-card__foot { margin-top: auto; padding-top: 12px; }
.lot-card__specs { display: flex; gap: 22px; margin: 0 0 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.lot-card__specs dt { font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--steel-500); }
.lot-card__specs dd { font-size: .9rem; font-weight: 600; }
.lot-card .arrow-link { margin-top: 0; font-size: .875rem; }
.lot-more { display: flex; justify-content: center; margin-top: 28px; }
.lot-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 40px;
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: 24px;
  border-top: 2px solid var(--navy-850);
}
.lot-band p { max-width: 46rem; margin: 0; color: var(--steel-600); }
.lot-band p a { color: var(--navy-850); font-weight: 600; }
.lot-band .arrow-link { margin-top: 0; }

/* ------------------------------------------------------------------ FAQ -- */
.section--faq { background: #e8e2d8; }
.faq-layout { display: grid; gap: 36px; }
@media (min-width: 900px) { .faq-layout { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 80px; align-items: start; } .faq-heading { position: sticky; top: calc(var(--hdr-hc) + 28px); } }
.faq-heading > p:last-child { color: var(--steel-600); }
.faq-list { border-top: 1px solid var(--line-strong); }
.faq-list details { border-bottom: 1px solid var(--line-strong); }
.faq-list summary { position: relative; padding: 22px 44px 22px 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; text-transform: uppercase; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 19px; font-family: var(--font-ui); font-size: 1.5rem; font-weight: 300; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 48rem; padding: 0 44px 22px 0; color: var(--steel-600); }

@media (max-width: 480px) {
  .service-card { min-height: 0; }
}

.detail-strip {
  display: grid;
  gap: 20px;
  margin: 28px 0 0;
  align-items: center;
}
@media (min-width: 900px) {
  .detail-strip { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; }
}
.detail-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); }
.detail-strip figcaption {
  padding-left: 16px;
  border-left: 3px solid var(--orange-600);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--steel-600);
}
.detail-strip__kicker {
  display: block;
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-700);
}

/* -------------------------------------------------------------- contact -- */
.section--contact { background: var(--navy-900); color: var(--paper-2); }
.contact { display: grid; gap: 36px; }
@media (min-width: 1024px) {
  .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: 64px; align-items: start; }
}
.contact__copy p { color: #cfd8e6; max-width: 40rem; }
.contact__copy .section-title { margin-bottom: 16px; }
.contact__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.contact-list {
  display: grid;
  gap: 1px;
  background: rgba(244, 242, 238, 0.16);
  border: 1px solid rgba(244, 242, 238, 0.16);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (min-width: 560px) { .contact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contact-list > div { padding: 16px 18px; background: var(--navy-900); }
.contact-list dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-300);
  margin-bottom: 5px;
}
.contact-list dd { font-size: 0.9375rem; line-height: 1.5; }
.contact-list a { display: inline-block; padding-block: 3px; text-underline-offset: 3px; }
.contact-list a:hover { color: var(--orange-light); }

/* --------------------------------------------------------------- footer -- */
.site-footer { background: var(--navy-850); color: var(--steel-200); padding-block: 52px 32px; }
.site-footer__inner { display: grid; gap: 36px; }
@media (min-width: 900px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: 40px 64px;
  }
  .site-footer__social { grid-column: 1; }
  .site-footer__legal { grid-column: 1 / -1; }
}
.site-footer__brand img { width: 230px; margin-bottom: 12px; }
.site-footer__brand .site-footer__slogan {
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-light);
}
.site-footer__brand p { font-size: 0.875rem; line-height: 1.6; color: var(--steel-300); }
.site-footer__partner {
  margin-top: 14px;
  padding-left: 12px;
  border-left: 3px solid var(--tan-light);
}
.site-footer__partner span { font-size: 0.8125rem; line-height: 1.55; }
.site-footer__partner b { color: var(--paper-2); font-weight: 600; }

.site-footer__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 28px; }
.site-footer__nav h2 {
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  color: var(--paper-2);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(244, 242, 238, 0.18);
}
.site-footer__nav li { margin-bottom: 9px; font-size: 0.875rem; line-height: 1.5; }
.site-footer__nav a { display: inline-block; padding-block: 4px; text-decoration: none; }
.site-footer__nav a:hover { color: var(--orange-pale); }

.site-footer__social { display: flex; gap: 18px; }
.site-footer__social a {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--steel-300);
}
.site-footer__social a:hover { color: var(--orange-pale); }

.site-footer__legal {
  padding-top: 22px;
  border-top: 1px solid rgba(244, 242, 238, 0.16);
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--steel-400);
}
.site-footer__legal strong { color: var(--steel-200); }
.site-footer__legal a { text-underline-offset: 3px; }
.site-footer__copy { margin-top: 10px; }

/* ----------------------------------------------------------- mobile nav -- */
dialog {
  padding: 0;
  border: 0;
  color: inherit;
  background: var(--paper-2);
  max-width: none;
  max-height: none;
}
dialog::backdrop { background: rgba(12, 22, 48, 0.62); }
dialog:not([open]) { display: none; }

/* ------------------------------------------------------- project gallery -- */
.project-lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  margin: 0;
  padding: clamp(64px, 8vh, 88px) clamp(18px, 3vw, 48px) clamp(24px, 4vh, 42px);
  overflow: auto;
  background: transparent;
  color: var(--paper-2);
}
.project-lightbox[open] { display: grid; place-items: center; }
.project-lightbox::backdrop {
  background: rgba(9, 17, 38, 0.82);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.project-lightbox__stage {
  --photo-ratio: 0.8;           /* updated by script.js from each photo, so the panel fits it */
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, min(calc(76dvh * var(--photo-ratio)), 960px)) 58px;
  grid-template-areas: "prev panel next";
  gap: clamp(14px, 2vw, 24px);
  align-items: center;
  justify-content: center;
  width: min(100%, 1140px);
}
.project-lightbox__panel {
  grid-area: panel;
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(244, 242, 238, 0.18);
  border-radius: 20px;
  background: transparent;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.52);
  animation: lightbox-enter 260ms var(--ease) both;
}
.project-lightbox__image-wrap { display: block; }
.project-lightbox__image-wrap img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78dvh;
  object-fit: contain;
}
.project-lightbox__caption {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: 7px;
  padding: clamp(72px, 12vh, 128px) clamp(20px, 3vw, 30px) clamp(20px, 3vw, 30px);
  background: linear-gradient(to top, rgba(10, 19, 42, 0.94) 0%, rgba(10, 19, 42, 0.66) 48%, rgba(10, 19, 42, 0) 100%);
}
.project-lightbox__count {
  margin: 0;
  color: var(--orange-light);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.project-lightbox__caption h2 { max-width: 30rem; font-size: clamp(1.35rem, 2.5vw, 2rem); line-height: 1.05; }
.project-lightbox__caption > p:last-child {
  margin: 0;
  max-width: 38rem;
  color: #e0e2e3;
  font-size: 0.875rem;
  line-height: 1.55;
}
.project-lightbox__arrow {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 1px solid rgba(244, 242, 238, 0.42);
  border-radius: 50%;
  background: rgba(16, 30, 63, 0.72);
  color: var(--paper-2);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.project-lightbox__arrow:hover { color: var(--navy-900); border-color: var(--orange-600); background: var(--orange-600); }
.project-lightbox__arrow:focus-visible { outline: 3px solid var(--orange-light); outline-offset: 4px; }
.project-lightbox__arrow--prev { grid-area: prev; }
.project-lightbox__arrow--next { grid-area: next; }
.project-lightbox__close {
  position: absolute;
  z-index: 2;
  top: -50px;
  right: calc(58px + clamp(14px, 2vw, 24px));
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--paper-2);
  cursor: pointer;
}
.project-lightbox__close:hover { color: var(--orange-light); }
.project-lightbox__close:focus-visible { outline: 2px solid var(--orange-light); outline-offset: 2px; }
@keyframes lightbox-enter {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 720px) {
  .project-lightbox { padding: 62px 14px 20px; }
  .project-lightbox__stage {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "panel panel" "prev next";
    gap: 14px 18px;
  }
  .project-lightbox__panel { border-radius: 16px; }
  .project-lightbox__image-wrap img { width: 100%; height: auto; max-height: 72dvh; }
  .project-lightbox__caption { gap: 6px; padding: 80px 18px 18px; }
  .project-lightbox__caption > p:last-child { font-size: 0.8125rem; }
  .project-lightbox__arrow { width: 52px; height: 52px; }
  .project-lightbox__arrow--prev { justify-self: end; }
  .project-lightbox__arrow--next { justify-self: start; }
  .project-lightbox__close { top: -50px; right: 0; }
}

.mobile-nav {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(88vw, 360px);
  height: 100dvh;
  flex-direction: column;
  background: var(--navy-850);
  color: var(--paper-2);
  margin: 0;
}
.mobile-nav[open] { display: flex; animation: slide-in-left 300ms var(--ease); }
.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(244, 242, 238, 0.16);
}
.mobile-nav__head h2 { font-size: 1.125rem; letter-spacing: 0.1em; }
.mobile-nav > nav { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.mobile-nav__list { padding: 8px 0; }
.mobile-nav__list a {
  display: block;
  padding: 14px 18px;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 242, 238, 0.08);
}
.mobile-nav__list a:hover { color: var(--orange-pale); background: rgba(244, 242, 238, 0.05); }
.mobile-nav__ext { color: var(--orange-light); }
.mobile-nav__ext svg { display: inline-block; vertical-align: -3px; margin-left: 8px; }
.mobile-nav__ext-note {
  display: block;
  margin-top: 4px;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel-400);
}
.mobile-nav__list a.mobile-nav__plan { color: var(--orange-light); }
.mobile-nav__foot { padding: 18px; border-top: 1px solid rgba(244, 242, 238, 0.16); }
.mobile-nav__foot p { margin: 12px 0 0; font-size: 0.8125rem; line-height: 1.6; color: var(--steel-300); }
.mobile-nav__foot p a { color: var(--paper-2); }

/* --------------------------------------------------------------- motion -- */
@keyframes slide-in-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }

.js .reveal { opacity: 0; transform: translateY(20px); }
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}

.js .hero [data-hero] { opacity: 0; transform: translateY(16px); }
.js .hero.is-ready [data-hero] {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.js .hero.is-ready [data-hero="1"] { transition-delay: 60ms; }
.js .hero.is-ready [data-hero="2"] { transition-delay: 140ms; }
.js .hero.is-ready [data-hero="3"] { transition-delay: 250ms; }
.js .hero.is-ready [data-hero="4"] { transition-delay: 350ms; }

.js .hero__media img, .js .hero__media video { transform: scale(1.06); transition: transform 1400ms var(--ease); }
.js .hero.is-ready .hero__media img, .js .hero.is-ready .hero__media video { transform: none; }

/* ------------------------------------------------- hero cover transition -- */
/* The hero is a full-viewport cover that holds the first screen, then lifts
   away faster than the page scrolls, uncovering the recent-build plane as it
   rises in normal flow. Nothing is counter-translated against the scroll, so
   the page below can never lag a frame behind and jump.

   Baseline (no JS, no scroll-timeline support, reduced motion, short viewport):
   the hero is an ordinary section, the spacer is not rendered and the page is a
   plain document. Nothing below depends on script for its content — the script
   only measures the header so the pin lands flush under the sticky bar. */
.hero-spacer { display: none; }
.page-body { position: relative; background: var(--paper); }

@keyframes cue-drop {
  0%   { transform: translateY(-28px); opacity: 0; }
  22%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(30px); opacity: 0; }
}

/* the cover itself travels one viewport; the tail keeps its rounded, shadowed
   bottom edge off screen until it starts to move. It stops with its edge at the
   bottom of the fixed header — exactly where the page lands — so the edge stays
   on the page content all the way up instead of vanishing under the header early. */
@keyframes hero-cover-lift {
  0%   { transform: translate3d(0, 0, 0); }
  16%  { transform: translate3d(0, calc(-7% + var(--hdr-hc) * 0.07), 0); }
  58%  { transform: translate3d(0, calc(-52% + var(--hdr-hc) * 0.52), 0); }
  100% { transform: translate3d(0, calc(-100% + var(--hdr-hc)), 0); }
}
/* the first plane eases up out of the cover's shadow as it is uncovered —
   opacity and transform only, both compositor-friendly */
@keyframes hero-cover-settle {
  from { opacity: 0.35; transform: translate3d(0, 36px, 0); }
  to   { opacity: 1;    transform: translate3d(0, 0, 0); }
}
/* photograph lags the cover, copy leads it — two planes, not one sliding box */
@keyframes hero-cover-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, 10%, 0); }
}
@keyframes hero-cover-recede {
  0%   { opacity: 1;    transform: translate3d(0, 0, 0); }
  55%  { opacity: 0.58; transform: translate3d(0, -16px, 0); }
  100% { opacity: 0;    transform: translate3d(0, -38px, 0); }
}
@keyframes hero-cover-fade {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-height: 620px) {
    /* `.js` gates the whole mechanism: script.js measures the header and keeps
       in-page anchors landing correctly while the page below is held. */
    .js body {
      /* scroll over which the cover lifts: the spacer, plus the height the fixed
         header gives back when it condenses, so the page lands flush under it */
      --cover-run: calc(68svh + var(--hdr-h) - var(--hdr-hc));
      --cover-drag: 68svh;                                   /* spacer between the header and the page body */
      --hero-tail: 40px;
      --hero-cover-r: clamp(28px, 3.2vw, 44px);              /* lower corners only */
      --hero-photo-shift: clamp(40px, 5.4vw, 78px);          /* keep Stu below the fixed chrome */
    }
    @media (max-width: 1023px) { .js body { --hero-tail: 7svh; } }

    .js .hero {
      position: fixed;
      inset: 0 0 auto;
      z-index: 20;
      width: 100%;
      height: calc(100svh + var(--hero-tail));
      min-height: 0;
      /* The one place on this site that breaks the 8px geometry cap: a moving
         cover needs a lower edge you can read as an edge. Top corners stay
         square — the cover meets the top of the window flush. */
      border-radius: 0 0 var(--hero-cover-r) var(--hero-cover-r);
      /* the shop's orange rule, carried on the leaving edge. As a border it
         follows the curve exactly, and `overflow: hidden` clips the photograph
         and its scrim to the padding box — a concentric curve 3px inside — so
         nothing squares off the corner or leaks past it. */
      border-bottom: 3px solid var(--orange-600);
      box-shadow: 0 30px 54px -20px rgba(6, 12, 28, 0.72);
      will-change: transform;
      animation: hero-cover-lift linear both;
      animation-range: 0 var(--cover-run);
      animation-timeline: scroll(root);
    }
    /* hero content keeps clear of the fixed header */
    .js .hero__inner { padding-block: calc(var(--hdr-h) + 34px) 56px; }
    @media (min-width: 900px) { .js .hero__inner { padding-block: calc(var(--hdr-h) + 40px) 64px; } }
    .js .hero__cue { bottom: calc(var(--hero-tail) + 26px); }

    .js .hero-spacer { display: block; height: var(--cover-drag); }

    .js .page-body { z-index: 10; }
    .js .page-body > .section:first-child { padding-top: clamp(76px, 8vw, 128px); }

    .js .cover-settle {
      transform-origin: top center;
      animation: hero-cover-settle linear both;
      animation-range: 0 var(--cover-run);
      animation-timeline: scroll(root);
    }

    .js .hero__media {
      inset: -2% 0 -12%;
      animation: hero-cover-drift linear both;
      animation-range: 0 var(--cover-run);
      animation-timeline: scroll(root);
    }
    .js .hero__media img,
    .js .hero__media video {
      transform: translateY(var(--hero-photo-shift)) scale(1.06);
    }
    .js .hero.is-ready .hero__media img,
    .js .hero.is-ready .hero__media video {
      transform: translateY(var(--hero-photo-shift));
    }
    .js .hero__copy {
      animation: hero-cover-recede linear both;
      animation-range: 0 62svh;
      animation-timeline: scroll(root);
    }
    .js .hero__cue {
      animation: hero-cover-fade linear both;
      animation-range: 0 18svh;
      animation-timeline: scroll(root);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal, .js .hero [data-hero] { opacity: 1; transform: none; }
  .js .hero__media img, .js .hero.is-ready .hero__media img,
  .js .hero__media video, .js .hero.is-ready .hero__media video { transform: none; }
  .project:hover img { transform: none; }
  .arrow-link:hover svg { transform: none; }
  /* no cover lift, no drift, no settle: the hero stays an ordinary section and
     the dropping segment of the scroll cue is simply not drawn */
  .hero__cue::after { display: none; }
}

/* ------------------------------------------------ floating parts button -- */
/* Always one tap from the separate parts marketplace. Sits above the hero
   cover; dialogs open in the top layer, so it never covers a menu. */
.parts-fab {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 8px 8px;
  border: 1px solid rgba(244, 242, 238, 0.14);
  border-radius: 999px;
  background: var(--navy-850);
  color: var(--paper-2);
  text-decoration: none;
  box-shadow: 0 14px 34px -10px rgba(6, 12, 28, 0.6);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease),
              background-color var(--dur) var(--ease), visibility 0s linear 0s;
}
.parts-fab:hover { background: var(--navy-800); color: var(--paper-2); transform: translateY(-2px); }
.parts-fab:focus-visible { outline: 2px solid var(--orange-light); outline-offset: 3px; }
.parts-fab__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--orange-600);
  color: var(--navy-900);
}
.parts-fab__copy { display: grid; line-height: 1.15; }
.parts-fab__copy small { color: var(--steel-300); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.parts-fab__copy b { font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.parts-fab__arrow { color: var(--orange-light); font-weight: 700; }
/* steps aside while the footer (which has its own marketplace links) is on screen */
.parts-fab.is-tucked {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
@media (max-width: 719px) {
  .parts-fab { gap: 10px; padding: 6px 14px 6px 6px; }
  .parts-fab__icon { width: 36px; height: 36px; }
  .parts-fab__copy b { font-size: 0.9rem; }
}

/* --------------------------------------------------------- narrow tweaks -- */
@media (max-width: 480px) { .field--split { grid-template-columns: 1fr; } }
@media (max-width: 400px) { .hero__title { font-size: 2.375rem; } }

/* Email questions sit directly below the published FAQ list. */
.faq-question { border-top: 1px solid var(--line-strong); padding-top: 28px; }
.faq-question h3 { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 8px; }
.faq-question > p { color: var(--steel-600); margin-bottom: 20px; }
.faq-question__fields { display: grid; gap: 16px; margin-bottom: 20px; }
.faq-question label { display: grid; gap: 7px; font-size: .875rem; font-weight: 600; }
.faq-question input, .faq-question textarea { width: 100%; min-height: 44px; border: 1px solid var(--line-strong); background: white; border-radius: 4px; padding: 12px; font: inherit; }
.faq-question textarea { resize: vertical; }
#website-question-status { margin-top: 16px; }
.faq-category { margin-bottom: 28px; }
.faq-category h3 { font-family: var(--font-display); font-size: 1.15rem; text-transform: uppercase; margin-block: 18px 0; }
@media (min-width: 900px) { .faq-question { grid-column: 2; } }