/* =============================================================================
   Premier Procurement Partners — Visual system
   -----------------------------------------------------------------------------
   DIRECTION: "White room with a single blue switch."

   A near-white canvas, generous breathing room, and one vivid blue accent that
   makes every action feel deliberate. Typography is the primary voice — set with
   negative tracking that tightens as size grows, giving headlines architectural
   clarity without weight. Photography carries all the chromatic information and
   runs full-bleed; chrome recedes into hairline rules and surface shifts.

   THE TWO RULES THAT HOLD IT TOGETHER
   1. #0071e3 is a BUTTON FILL. Never text, never a border, never decoration.
   2. There are exactly two radii: 980px (anything you can press) and 8px
      (cards, images, inputs). Nothing else.

   NO SHADOWS. Hierarchy comes from scale, surface colour and 1px hairlines.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Blues. Three of them, and they never mix inside one element. -------- */
  --apple-blue:  #0071e3;   /* filled action buttons, selected states — FILL ONLY */
  --link-blue:   #0066cc;   /* outlined action borders, inline links */
  --signal-blue: #2997ff;   /* decorative only — dots, icon strokes, image outlines */

  /* --- Neutrals ----------------------------------------------------------- */
  --onyx:     #000000;      /* dark image backgrounds, maximum-contrast promo */
  --carbon:   #1d1d1f;      /* primary ink — near-black with a whisper of warmth */
  --smoke:    #333333;      /* borders on dark surfaces, nav rules */
  --graphite: #474747;      /* tertiary hierarchy */
  --ash:      #707070;      /* muted body, footer text, captions */
  --mist:     #858585;      /* hairline rules on light surfaces, index numerals */
  --hairline: #d2d2d7;      /* the structural 1px */
  --pebble:   #e2e2e5;      /* button fills, tags, disabled surfaces */
  --frost:    #f5f5f7;      /* page canvas — the signature light grey */
  --ice:      #f4f8fb;      /* elevated wash — barely-blue */
  --white:    #ffffff;

  /* Alias kept so legacy inline colours on dark bands keep resolving. */
  --vapor: #f5f5f7;

  /* --- Type --------------------------------------------------------------- */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --font-text:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;

  --text-caption:     12px;
  --text-body-sm:     14px;
  --text-body:        17px;
  --text-subheading:  21px;
  --text-heading-sm:  28px;
  --text-heading:     40px;
  --text-heading-lg:  44px;
  --text-display:     56px;

  /* --- Spacing. Base unit 4px, comfortable density. ----------------------- */
  --sp-4: 4px;   --sp-8: 8px;   --sp-12: 12px; --sp-16: 16px; --sp-20: 20px;
  --sp-24: 24px; --sp-32: 32px; --sp-40: 40px; --sp-45: 48px; --sp-48: 48px;
  --sp-56: 56px; --sp-60: 64px; --sp-64: 64px; --sp-90: 96px;

  --section-y: clamp(56px, 7vw, 104px);   /* vertical rhythm between sections */
  --page-max:  1440px;                    /* page shell */
  --text-max:  980px;                     /* text blocks centre internally here */
  --gutter:    clamp(20px, 4vw, 40px);

  /* --- Shape. Two values. Only two. --------------------------------------- */
  --r-pill: 980px;
  --r-card: 8px;
}

/* -----------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--carbon);
  font-family: var(--font-text);
  font-size: var(--text-body);
  line-height: 1.47;
  letter-spacing: -0.016em;      /* the tracking is what makes the type feel precise */
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; border-radius: var(--r-card); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--link-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Focus ring — 2px #0071e3, the one place the fill colour appears as an outline. */
:focus-visible {
  outline: 2px solid var(--apple-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: 50%;
  top: -80px;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--apple-blue);
  color: var(--white);
  padding: 11px 21px;
  border-radius: var(--r-pill);
  font-size: var(--text-body-sm);
  transition: top .18s ease;
}
.skip:focus { top: 12px; text-decoration: none; }

/* -----------------------------------------------------------------------------
   3. LAYOUT SHELL
   Full-bleed page model: sections stretch edge to edge, text centres internally.
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main > section,
main > div.offer { padding-block: var(--section-y); }

section { position: relative; }

.sec-veil { background: var(--frost); }                     /* canvas shift */
.sec-mid  { background: var(--ice); }                       /* elevated wash */
.sec-dark { background: var(--carbon); color: var(--frost); }
.sec-dark p, .sec-dark .muted { color: rgba(245,245,247,.72); }
.sec-dark h1, .sec-dark h2, .sec-dark h3 { color: var(--frost); }

.muted { color: var(--ash); }

/* -----------------------------------------------------------------------------
   4. TYPE ROLES
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-size: clamp(38px, 6vw, var(--text-display));
  line-height: 1.07;
  letter-spacing: -0.015em;
  font-weight: 600;
}

/* Hero titles set in caps. Applied in CSS rather than typed into the markup so
   screen readers and search engines still receive normal sentence case, and so
   the tracking can open up — caps need positive letter-spacing where the
   lowercase display size wants negative. */
h1.display {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.006em;
  line-height: 1.04;
  /* Caps carry more optical weight per character, so the size steps back a
     little from the lowercase display scale and the measure opens up — that
     keeps every hero headline to two lines at desktop. */
  font-size: clamp(32px, 5.4vw, 52px);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.2vw, var(--text-heading));
  line-height: 1.1;
  letter-spacing: -0.014em;
  font-weight: 600;
}

/* Weight 300 is the signature whisper-voice: subheads and editorial descriptors. */
.subhead {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.24;
  letter-spacing: -0.009em;
  font-weight: 300;
  color: var(--carbon);
}
.sec-dark .subhead { color: var(--frost); }

.hero-body { font-size: var(--text-body); color: var(--ash); }

/* 12px caption — nav, footer links, eyebrows, form labels, metadata. */
.label {
  font-family: var(--font-text);
  font-size: var(--text-caption);
  line-height: 1.33;
  letter-spacing: -0.022em;
  font-weight: 400;
  color: var(--carbon);
}
.label--muted { color: var(--ash); }
.sec-dark .label { color: var(--frost); }
.sec-dark .label--muted { color: rgba(245,245,247,.62); }

/* The single decorative use of Signal Blue in the whole system. */
.led {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--signal-blue);
  margin-right: 7px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--pebble);
  color: var(--carbon);
  font-size: var(--text-caption);
  letter-spacing: -0.022em;
  line-height: 1.4;
}
.sec-dark .badge { background: rgba(245,245,247,.14); color: var(--frost); }

.tlink { color: var(--signal-blue); }
.sec-dark a:not(.btn):not(.label) { color: var(--signal-blue); }

/* Utility rhythm helpers carried over from the content markup. */
.mt-15 { margin-top: var(--sp-16); }
.mt-20 { margin-top: var(--sp-20); }
.mt-30 { margin-top: var(--sp-32); }
.mt-45 { margin-top: var(--sp-48); }
.mt-60 { margin-top: var(--sp-64); }

/* -----------------------------------------------------------------------------
   5. BUTTONS
   Every pressable thing is a 980px pill. Filled blue primary is always paired
   with an outlined secondary — never two filled buttons side by side.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  padding: 11px 21px;
  border-radius: var(--r-pill);
  border: 1px solid var(--link-blue);
  background: transparent;
  color: var(--link-blue);
  font-family: var(--font-text);
  font-size: var(--text-body);
  font-weight: 400;
  letter-spacing: -0.016em;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;   /* a long email label wraps rather than overflowing */
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { background: var(--link-blue); color: var(--white); text-decoration: none; }

.btn--light {                      /* the filled primary — one colour, one job */
  background: var(--apple-blue);
  border-color: var(--apple-blue);
  color: var(--white);
}
.btn--light:hover { background: #0077ed; border-color: #0077ed; color: var(--white); }

.btn--lg { padding: 13px 27px; }

/* On a dark band the outlined pill switches to frost — the blues are reserved
   for the light canvas, and #2997ff is decorative only. */
.sec-dark .btn { border-color: rgba(245,245,247,.55); color: var(--frost); }
.sec-dark .btn:hover { background: var(--frost); color: var(--carbon); border-color: var(--frost); }
.sec-dark .btn--light { background: var(--apple-blue); border-color: var(--apple-blue); color: var(--white); }
.sec-dark .btn--light:hover { background: #0077ed; border-color: #0077ed; color: var(--white); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-16);
  align-items: center;
}

/* -----------------------------------------------------------------------------
   6. GLOBAL NAV
   Full-width carbon bar, 12px links, hairline bottom rule, no shadow.
   The primary CTA is a filled pill and never collapses into a menu.
   -------------------------------------------------------------------------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--carbon);
  border-bottom: 1px solid var(--smoke);
}
.site-head.is-solid { background: var(--carbon); }

.head-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-24);
  min-height: 56px;
  padding-block: var(--sp-8);
}

.wordmark { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.wordmark:hover { text-decoration: none; }
.wordmark .mark {
  font-size: var(--text-body-sm);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--frost);
}
.wordmark .sub { color: rgba(245,245,247,.55); }

.head-right {
  display: flex;
  align-items: center;
  gap: var(--sp-20);
  margin-left: auto;
  min-width: 0;
}

.head-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-24);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.head-nav::-webkit-scrollbar { display: none; }
.head-nav a {
  color: rgba(245,245,247,.82);
  font-size: var(--text-caption);
  font-weight: 400;
  letter-spacing: -0.022em;
  white-space: nowrap;
  transition: color .15s ease;
}
.head-nav a:hover { color: var(--frost); text-decoration: none; }

/* Selected state — the current page reads brighter and heavier rather than
   coloured, because the blues never appear as text. */
.head-nav a[aria-current="page"] { color: var(--frost); font-weight: 600; }

/* Home sits first in the nav and is separated by a hairline, so it reads as a
   way back rather than as one more audience destination. */
.head-nav .nav-home {
  padding-right: var(--sp-16);
  border-right: 1px solid var(--smoke);
}

.head-cta {
  flex: 0 0 auto;
  padding: 8px 17px;
  font-size: var(--text-body-sm);
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   7. HERO
   Centred stack on the light canvas, then the photograph full-bleed beneath it.
   The image IS the surface — it is never boxed into the content column.
   -------------------------------------------------------------------------- */
.hero {
  background: var(--frost);
  display: flex;
  flex-direction: column;
  padding-block: clamp(48px, 6.5vw, 88px) 0;
}
.hero-inner {
  order: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-20);
  padding-bottom: clamp(40px, 5vw, 64px);
}
.hero-inner > * { max-width: var(--text-max); margin-inline: auto; }
.hero-inner .display { max-width: 26ch; }
.hero-inner .subhead { max-width: 46ch; }
.hero-inner .hero-body { max-width: 66ch; }
.hero-inner .btn-row { justify-content: center; }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-12);
}

/* The photograph. Full viewport width, no radius, no scrim — it is a
   photograph, not a background texture. Degrades to the frost canvas if the
   file is missing, so the page is never broken. */
.hero-photo {
  order: 2;
  width: 100%;
  height: clamp(200px, 28vw, 400px);
  background-color: var(--pebble);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Where the hero photograph is of a single object rather than a room, the
   short letterbox crop cuts the subject in half. This variant drives the band
   off an aspect ratio instead of a fixed height, so the whole piece stays in
   frame, and biases the crop slightly low because the subject sits below
   centre. */
.hero--wide .hero-photo {
  /* Rebuilt from the 6240px original with the canvas extended, so the file is
     already framed the way it should sit. A 2.8:1 band shows 88% of it, which
     puts the sofa centred and filling roughly half the strip. */
  height: auto;
  aspect-ratio: 2.8 / 1;
  max-height: 900px;
  background-position: center 51%;
}

/* A 2.8:1 file on a phone is either a thin strip or side-cropped. A second,
   tighter crop of the same shot solves both: the piece still reads at a small
   size, and nothing is cut. */
@media (max-width: 700px) {
  .hero--wide .hero-photo {
    /* Phones get a bespoke-joinery interior instead of the lifestyle shot -
       it argues "built to your drawings" rather than decorating the page. */
    background-image: url('images/hero-architects-sm.jpg?v=1') !important;
    aspect-ratio: 1.47 / 1;
    background-position: center 55%;
  }
}

/* Retired: the old system's hairline grid overlay has no place here. */
.hero-grid, .band-grid { display: none; }

/* Six-part chain strip under the hero copy. Hairline separators, 12px caption. */
.spec-strip {
  order: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-8) 0;
  margin-top: var(--sp-16);
  color: var(--ash);
}
.spec-strip span {
  padding: 0 var(--sp-16);
  border-left: 1px solid var(--hairline);
  white-space: nowrap;
}
.spec-strip span:first-child { border-left: 0; }
.sec-dark .spec-strip { color: rgba(245,245,247,.7); }
.sec-dark .spec-strip span { border-left-color: var(--smoke); }

/* -----------------------------------------------------------------------------
   8. SECTION HEADS
   -------------------------------------------------------------------------- */
.sec-head {
  max-width: var(--text-max);
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-16);
}
.sec-head p { color: var(--ash); max-width: 68ch; }
.sec-head .section-title { max-width: 24ch; }
.rule { display: none; }   /* the whitespace does this job now */

/* -----------------------------------------------------------------------------
   9. AUDIENCE SELECTOR
   Four tiles directly under the hero — cold traffic self-selects without
   scrolling. Tiles sit on the WHITE canvas, so a surface fill is legitimate
   here; inside a frost section it would not be.
   -------------------------------------------------------------------------- */
.audience { background: var(--white); }
.audience .eyebrow {
  display: block;
  text-align: center;
  margin-bottom: var(--sp-32);
}

.aud-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-16);
}

.aud-cell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-24);
  border-radius: var(--r-card);
  background: var(--frost);
  color: var(--carbon);
  transition: background-color .2s ease;
}
.aud-cell:hover { background: var(--pebble); text-decoration: none; }
.aud-cell .t {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  line-height: 1.19;
  letter-spacing: -0.012em;
  font-weight: 600;
  margin-top: var(--sp-4);
}
.aud-cell .d { font-size: var(--text-body-sm); color: var(--ash); letter-spacing: -0.016em; }
.aud-cell .go {
  margin-top: auto;
  padding-top: var(--sp-16);
  color: var(--link-blue);
  font-size: var(--text-body-sm);
}
.aud-cell .go::after { content: " \2192"; }

/* -----------------------------------------------------------------------------
   10. OFFER BAND
   Typography-only CTA block: centred stack, generous air, two-value hierarchy.
   -------------------------------------------------------------------------- */
.offer { background: var(--ice); }
.offer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-24);
}
.offer-inner > div:first-child { max-width: var(--text-max); }
.offer-inner p { color: var(--ash); max-width: 70ch; margin-inline: auto; }
.offer-inner .section-title { max-width: 22ch; margin-inline: auto; }

/* -----------------------------------------------------------------------------
   11. SUPPLY CHAIN
   Nine stages as a typographic row with hairline separators. No boxes.
   -------------------------------------------------------------------------- */
.chain {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--smoke);
}
.chain .link-step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-20) var(--sp-12) var(--sp-20) 0;
}
.chain .n { color: var(--mist); }
.chain .t { color: var(--frost); font-size: var(--text-body-sm); letter-spacing: -0.02em; }
.sec-dark .chain { border-top-color: var(--smoke); }

/* -----------------------------------------------------------------------------
   12. FEATURE GRIDS
   Flat typographic columns separated by 1px hairlines. Never card containers —
   the section canvas itself is the surface.
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 0 var(--sp-40); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.matrix .cell {
  border-top: 1px solid var(--hairline);
  padding: var(--sp-24) 0 var(--sp-40);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.matrix .cell .idx { color: var(--mist); }
.matrix .cell h3 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.24;
  letter-spacing: -0.011em;
  font-weight: 600;
}
.matrix .cell p { color: var(--ash); }
.matrix .cell.last-row { padding-bottom: 0; }

/* Capability list carrying headings alone — tighten the rhythm so the rows do
   not float in the space a missing paragraph left behind. */
.matrix--bare .cell { padding: var(--sp-20) 0; }
.matrix--bare .cell.last-row { padding-bottom: var(--sp-20); }
.sec-dark .matrix .cell { border-top-color: var(--smoke); }
.sec-dark .matrix .cell .idx { color: var(--graphite); }

/* -----------------------------------------------------------------------------
   13. FULL-BLEED FEATURE BAND
   The image is the surface. Caption sits on the photograph, never in a card.
   -------------------------------------------------------------------------- */
.band {
  position: relative;
  width: 100%;
  min-height: clamp(280px, 40vw, 520px);
  background: var(--pebble);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.band-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.band-cap {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--gutter);
  color: var(--frost);
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
}
.band-cap .t { font-size: var(--text-body-sm); font-weight: 600; letter-spacing: -0.02em; }
.band-cap .m { color: rgba(245,245,247,.75); }

/* -----------------------------------------------------------------------------
   14. PRODUCT CATEGORIES
   Two category groups side by side, each running its items in two sub-columns —
   four columns across and six rows deep instead of one long eleven-row list.
   Hairline rules per item, no container, no fill.
   -------------------------------------------------------------------------- */
.cat-groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-40) var(--sp-56);
  max-width: 1040px;
  margin-inline: auto;
}

.cat-h {
  font-family: var(--font-text);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--ash);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--carbon);
}

.cat-list {
  columns: 2;
  column-gap: var(--sp-40);
}
.cat-list li {
  break-inside: avoid;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--text-body);
  letter-spacing: -0.016em;
}

/* Legacy wrapper: kept so any table still in the markup cannot overflow. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* -----------------------------------------------------------------------------
   15. PLATE — disclosure, confidentiality, suitability notes
   On the white canvas it takes a soft ice fill at 8px. Inside a frost or ice
   section it flattens to hairline rules, because a panel inside a tinted
   section breaks the spatial logic.
   -------------------------------------------------------------------------- */
.plate {
  background: var(--ice);
  border-radius: var(--r-card);
  padding: clamp(24px, 3vw, 40px);
  max-width: var(--text-max);
}
.plate p { color: var(--ash); }
.plate em { color: var(--mist); font-style: italic; }

.sec-veil .plate,
.sec-mid .plate,
.audience .plate {
  background: transparent;
  border-radius: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding-inline: 0;
}
.sec-dark .plate { background: rgba(245,245,247,.06); }
.sec-dark .plate p { color: rgba(245,245,247,.72); }

/* -----------------------------------------------------------------------------
   16. PROCESS STEPS
   -------------------------------------------------------------------------- */
.steps { max-width: 1120px; margin-inline: auto; }
.steps li {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.35fr);
  gap: var(--sp-24) var(--sp-40);
  align-items: start;
  border-top: 1px solid var(--hairline);
  padding: var(--sp-24) 0;
}
.steps li:last-child { border-bottom: 1px solid var(--hairline); }
.steps .n { color: var(--mist); padding-top: 6px; }
.steps .t {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.24;
  letter-spacing: -0.011em;
  font-weight: 600;
}
.steps .d { color: var(--ash); }

/* -----------------------------------------------------------------------------
   17. PROOF SLOTS
   8px radius on every image. A missing file leaves a labelled frame rather than
   a broken image — the placeholder is honest, and it never collapses the grid.
   -------------------------------------------------------------------------- */
.slot { display: flex; flex-direction: column; gap: var(--sp-12); }
.slot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-card);
  background: var(--pebble);
}
/* The empty state: the <img> removes itself onerror, so style the bare slot.
   A labelled frame, never a broken image and never a collapsed grid. */
.slot::before {
  content: "Image slot — awaiting photography";
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-16);
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-card);
  background: var(--pebble);
  border: 1px solid var(--hairline);
  color: var(--ash);
  font-size: var(--text-caption);
  letter-spacing: -0.022em;
  order: -1;
}
.slot:has(img)::before { display: none; }
.slot .cap { color: var(--ash); }

/* -----------------------------------------------------------------------------
   18. FAQ
   Hairline-separated disclosure rows. No borders around, no fills, no chevron
   graphics beyond a rotating 1px glyph.
   -------------------------------------------------------------------------- */
.faq { max-width: var(--text-max); margin-inline: auto; }
.faq details { border-top: 1px solid var(--hairline); }
.faq details:last-child { border-bottom: 1px solid var(--hairline); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-24);
  padding: var(--sp-24) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, var(--text-subheading));
  line-height: 1.3;
  letter-spacing: -0.009em;
  font-weight: 400;
  color: var(--carbon);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 11px; height: 11px;
  margin-top: 7px;
  border-right: 1.5px solid var(--ash);
  border-bottom: 1.5px solid var(--ash);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--link-blue); }
.faq .ans { padding: 0 0 var(--sp-32); max-width: 76ch; }
.faq .ans p { color: var(--ash); }

/* -----------------------------------------------------------------------------
   19. FORM
   8px radius, hairline border, 2px #0071e3 focus ring.
   -------------------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-24);
  /* A name or an email is a short value — at the full page measure the inputs
     stretch far past anything anyone types into them. */
  max-width: 780px;
  margin-inline: auto;
}
.field { display: flex; flex-direction: column; gap: var(--sp-8); }
.field.full { grid-column: 1 / -1; }
.field > label {
  font-size: var(--text-body-sm);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--carbon);
}
.req { color: var(--ash); }
.hint { font-size: var(--text-caption); letter-spacing: -0.022em; color: var(--ash); }

input[type="text"], input[type="email"], input[type="tel"],
input[type="date"], input[type="file"], select, textarea {
  width: 100%;
  font-family: var(--font-text);
  font-size: var(--text-body);
  letter-spacing: -0.016em;
  color: var(--carbon);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 12px 14px;
  appearance: none;
  transition: border-color .15s ease;
}
textarea { min-height: 150px; resize: vertical; line-height: 1.47; }

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

input:hover, select:hover, textarea:hover { border-color: var(--mist); }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--apple-blue);
  outline-offset: 0;
  border-color: var(--apple-blue);
}

select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23707070' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

input[type="file"] { padding: 10px 14px; color: var(--ash); font-size: var(--text-body-sm); }
input[type="file"]::file-selector-button {
  font-family: var(--font-text);
  font-size: var(--text-body-sm);
  letter-spacing: -0.016em;
  color: var(--link-blue);
  background: transparent;
  border: 1px solid var(--link-blue);
  border-radius: var(--r-pill);
  padding: 7px 15px;
  margin-right: 12px;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--link-blue); color: var(--white); }

/* -----------------------------------------------------------------------------
   20. FOOTER
   Flat, typographic, structural. No card surfaces.
   -------------------------------------------------------------------------- */
.site-foot {
  background: var(--frost);
  border-top: 1px solid var(--hairline);
  padding-block: var(--sp-48) var(--sp-32);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--sp-40);
}
.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-col .h { font-weight: 600; color: var(--carbon); margin-bottom: var(--sp-4); }
.foot-col a { color: var(--ash); }
.foot-col a:hover { color: var(--carbon); text-decoration: underline; }
.foot-col > span:first-child { font-weight: 600; }

.foot-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-12);
  margin-top: var(--sp-40);
  padding-top: var(--sp-20);
  border-top: 1px solid var(--hairline);
  color: var(--ash);
}

/* -----------------------------------------------------------------------------
   21. RESPONSIVE
   No horizontal overflow at any width. The CTA never hides behind a menu.
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .chain { grid-template-columns: repeat(3, 1fr); }
  .chain .link-step { border-top: 1px solid var(--smoke); }
  .chain { border-top: 0; }
  .steps li { grid-template-columns: 100px minmax(0, 1fr); }
  .steps .d { grid-column: 2; }
}

@media (max-width: 980px) {
  .head-inner { flex-wrap: wrap; row-gap: var(--sp-8); }
  .wordmark { order: 1; }
  .head-right { order: 2; margin-left: auto; }
  .head-nav {
    order: 3;
    width: 100%;
    flex-basis: 100%;
    gap: var(--sp-20);
    padding-top: var(--sp-8);
    border-top: 1px solid var(--smoke);
  }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Between tablet and small desktop the four columns get tight, so the type
   steps down one notch rather than the layout collapsing to eleven rows. */
@media (max-width: 980px) {
  .cat-list { column-gap: var(--sp-20); }
  .cat-list li { font-size: 15px; }
}

/* Narrower again: stack the two groups so each gets the full width back, which
   lets the type return to 17px while staying six rows deep per group. */
@media (max-width: 700px) {
  .cat-groups { grid-template-columns: 1fr; gap: var(--sp-32); }
  .cat-list { column-gap: var(--sp-40); }
  .cat-list li { font-size: var(--text-body); }
}

@media (max-width: 760px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .matrix .cell.last-row { padding-bottom: var(--sp-40); }
  .matrix .cell:last-child { padding-bottom: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .chain { grid-template-columns: repeat(2, 1fr); }
  .steps li { grid-template-columns: 1fr; gap: var(--sp-8); }
  .steps .n { padding-top: 0; }
  .btn-row .btn { flex: 1 1 auto; }
}

@media (max-width: 560px) {
  .wordmark .sub { display: none; }
  /* Two sub-columns of category names on a phone: step the type down so the
     longer labels stay on one line instead of every row going double-height. */
  .cat-list li { font-size: 15px; }
  .cat-list { column-gap: var(--sp-20); }
  .btn, .btn--lg { padding-inline: var(--sp-16); font-size: var(--text-body-sm); }
  .aud-grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .spec-strip { flex-direction: column; align-items: center; gap: var(--sp-8); }
  .spec-strip span { border-left: 0; padding: 0; }
  .foot-grid { grid-template-columns: 1fr; gap: var(--sp-32); }
  .chain { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   22. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .site-head, .hero-photo, .band, .skip { display: none !important; }
  body { color: #000; background: #fff; }
  .sec-dark { background: #fff; color: #000; }
}

/* -----------------------------------------------------------------------------
   23. CLOSING CTA BAND
   The one dark surface per page. Centred typographic stack, filled blue primary
   paired with an outlined frost secondary — the promotional lockup pattern.
   -------------------------------------------------------------------------- */
.sec-cta .wrap {
  max-width: var(--text-max);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}
.sec-cta .display { max-width: 20ch; }
.sec-cta p { max-width: 62ch; }
.sec-cta .btn-row { justify-content: center; }
.sec-cta .spec-strip { margin-top: var(--sp-32); }

@media (max-width: 360px) {
  .cat-list li { font-size: 14px; }
  .cat-list { column-gap: var(--sp-12); }
}

/* =============================================================================
   24. MOBILE & TABLET REFINEMENT
   -----------------------------------------------------------------------------
   Everything below is scoped to <=900px. Nothing here can reach the desktop
   layout, typography, spacing, navigation, form or imagery — those stay exactly
   as they were. The goal is a shorter, faster-to-read page for paid traffic.
   ========================================================================== */

/* Paired hero paragraphs: one wording for desktop, a shorter one for phones. */
.only-mobile { display: none; }

@media (max-width: 900px) {

  /* --- 1. Header: less vertical space, fewer links ----------------------- */
  /* `display: contents` lifts the CTA and the nav out of their wrapper so the
     header can lay out as two real rows: branding + CTA, then the two audience
     links. Previously the first row held the wordmark alone and wasted its
     right-hand half. */
  .head-right { display: contents; }
  .head-inner {
    min-height: 44px;
    padding-block: var(--sp-4);
    gap: var(--sp-12);          /* 24px pushed branding + CTA onto separate rows at 360px */
    row-gap: var(--sp-4);
  }
  .wordmark { order: 1; }
  .wordmark .mark { font-size: 13px; }
  .head-cta {
    order: 2;
    margin-left: auto;
    font-size: 13px;
    padding: 9px 14px;          /* keeps a ~35px tap target while fitting one row */
  }
  .head-nav {
    order: 3;
    width: 100%;
    flex-basis: 100%;
    gap: var(--sp-24);
    padding-top: var(--sp-4);
    border-top: 0;
  }
  .head-nav .nav-home,
  .head-nav .nav-faq { display: none; }        /* Builders + Architects remain */
  .head-cta { padding: 7px 15px; }
  html { scroll-padding-top: 84px; }

  /* --- 17. Tighter section rhythm --------------------------------------- */
  :root { --section-y: clamp(40px, 7vw, 56px); }

  /* --- 2 & 3. Heroes: the whole pitch inside a screen or two ------------- */
  .hero { padding-block: var(--sp-32) 0; }
  .hero-inner { gap: var(--sp-12); padding-bottom: var(--sp-32); }
  .hero-inner .subhead { max-width: 34ch; }
  .hero-inner .hero-body { max-width: 46ch; }
  .hero-meta { margin-bottom: var(--sp-4); }

  /* --- 14. One dominant, thumb-sized CTA -------------------------------- */
  .hero .btn-row { width: 100%; }
  .hero .btn--lg,
  .sec-cta .btn--lg,
  .offer .btn--lg {
    width: 100%;
    max-width: 420px;
    padding-block: 15px;
    font-size: var(--text-body);
  }

  /* --- 8. Process: one step per row, number and title first -------------- */
  .steps li {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    padding: var(--sp-20) 0;
  }
  .steps .n { padding-top: 0; color: var(--mist); }
  .steps .t { font-size: 20px; }
  .steps .d { grid-column: 1; margin-top: var(--sp-4); }

  /* --- 9. FAQ: question clearly above the answer, less air --------------- */
  .faq summary { padding: var(--sp-20) 0; font-weight: 600; font-size: 17px; }
  .faq .ans { padding-bottom: var(--sp-24); }
  .faq .ans p { font-size: 16px; line-height: 1.55; }

  /* --- 16. Readable measures -------------------------------------------- */
  .sec-head { margin-bottom: var(--sp-32); gap: var(--sp-12); }
  .sec-head p, .offer-inner p { max-width: 46ch; }
  .matrix .cell { padding: var(--sp-20) 0; }

  /* --- 13. Touch-friendly form ------------------------------------------ */
  /* One column right through tablet, not just phones. */
  .form-grid { grid-template-columns: 1fr; }

  input[type="text"], input[type="email"], input[type="tel"],
  input[type="date"], select, textarea {
    font-size: 16px;              /* at or above 16px stops iOS zooming on focus */
    padding: 14px;
  }
  textarea { min-height: 128px; }
  .form-grid { gap: var(--sp-20); }
  .field > label { font-size: 15px; }

  /* --- 12. Upload control big enough to hit with a thumb ----------------- */
  input[type="file"] { padding: 14px; font-size: 16px; }
  input[type="file"]::file-selector-button { padding: 11px 18px; font-size: 15px; }

  .form-grid .btn--lg { width: 100%; max-width: none; }
}

/* --- 7. Category lists: one column before they get cramped -------------- */
@media (max-width: 430px) {
  .cat-list { columns: 1; }
  .cat-list li { font-size: 16px; padding: 8px 0; }
}

/* --- 4. Swap in the shorter mobile paragraph --------------------------- */
@media (max-width: 700px) {
  .only-desktop { display: none; }
  .only-mobile { display: block; }
}

/* The longest CTA ("Send Us Your Drawings") needs a fraction more room than a
   360px screen allows, so the header pair steps down once more. */
@media (max-width: 380px) {
  .wordmark .mark { font-size: 12px; }
  .head-cta { font-size: 12.5px; padding: 9px 12px; }
}