@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Archivo:wght@400;500;600;700&display=swap');

/* =========================================================================
   Baker Roofing — extracted from bakerroofing.com, 2026-07-23
   WordPress + custom baker-roofing-theme (Gutenberg blocks + Tailwind utils).
   Every token is frequency-ranked from the live DOM AND transcribed from the
   theme's own block stylesheets (20 block-*.css files) — not eyeballed. See
   brand-spec.md "CSS rule sweep" for provenance counts.

   The brand's whole visual grammar, in three moves:
   1. Charcoal (#3b3835) panels on a near-white (#f5f5f5) page, laid in grids
      with a 3px "mortar-line" gap so the paper shows between panels.
   2. Huge condensed uppercase Oswald headings with sub-1.0 line-heights.
   3. A single red-orange (#fd3a20) reserved for overlines, CTAs and arrows —
      never a headline word, with ONE transcribed exception (the location
      sales-title; see .loc-accent).
   ========================================================================= */

:root {
  /* colour — extracted, with live-CSS occurrence counts in comments */
  --ink:          #3b3835;   /* 97 — body ink AND the charcoal panel ground */
  --ink-deep:     #3b3835;   /* headings are the same charcoal, never black  */
  --ink-muted:    #6f6a64;   /* 4.7:1 on paper — body-adjacent muted copy    */
  --ink-quiet:    #8a847d;   /* 3.4:1 — doc chrome only, never client copy   */

  --paper:        #f5f5f5;   /* 124 — page ground and text-on-charcoal       */
  --bg-warm:      #f1efec;   /* 5   — warm alt ground                        */
  --grey:         #dad5d1;   /* 19  — hairline dividers, empty thumbs        */

  --accent:       #fd3a20;   /* 117 — overlines, CTAs, arrows, hovers        */
  --accent-deep:  #d42f1a;   /* 19  — the hover/pressed state                */
  --location-red: #fd3a20;   /* the ONE headline accent, transcribed verbatim */

  --sand:         #d0ba95;   /* 16  — infobox labels, program lead line      */
  --pop:          #165051;   /* 10  — the National Accounts teal panel       */
  --navy:         #1c1f2a;   /* 14  — deepest ground, footer legal           */

  --paper-72:     rgba(245,245,245,.72);  /* muted copy on charcoal          */
  --paper-60:     rgba(245,245,245,.60);

  /* type — field-gothic-xcondensed -> Oswald, trade-gothic-next -> Archivo
     (both originals are paid Adobe Typekit; see font-substitution table) */
  --font-display: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'Archivo', system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* shape — the theme radius is 4px almost everywhere (58 uses), 3px for tight */
  --radius:       4px;
  --radius-sm:    3px;
  --gap-mortar:   3px;       /* the signature panel-to-panel gap             */

  /* the cut top-right corner — the site's signature shape, verbatim from
     theme.css (--service-intro-cut-size / --gallery-cut-size). Mobile 66/42,
     desktop 108/69. */
  --cut-x: 66px;  --cut-y: 42px;

  --shadow-card:  0 10px 34px rgba(59,56,53,.10);
  --shadow-lift:  0 16px 44px rgba(59,56,53,.16);

  --container: 1296px;
  --container-narrow: 900px;
  --gutter: 20px;
  --section: 88px;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink-deep); margin: 0 0 16px; font-weight: 600; }
/* Line-heights: the source sets these at .776–.84, but those are tuned to
   Field Gothic X-Condensed. Oswald's vertical metrics sit tighter, so the same
   numbers stack multi-line uppercase headings until the lines nearly touch.
   Loosened to ~.9–.92 for the substitute — keeps the monumental stacked look,
   gives the lines air. (Jarrett, 2026-07-23.) */
h1, .display { font-size: clamp(3rem, 2rem + 5vw, 6.125rem); line-height: .9; }
h2, .h2      { font-size: clamp(2.25rem, 1.7rem + 2.6vw, 4rem); line-height: .92; letter-spacing: -.01em; }
h3, .h3      { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); line-height: 1.08; }
h4           { font-size: 1.15rem; line-height: 1.2; }
.display-xl  { font-family: var(--font-display); font-weight: 600; line-height: 1;
               font-size: clamp(3rem, 2rem + 6vw, 7.5rem); letter-spacing: -.01em; }
.u           { text-transform: uppercase; }
p { margin: 0 0 16px; }
a { color: var(--accent); }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container.narrow { max-width: var(--container-narrow); }
.lede { font-size: 1.05rem; color: var(--ink); max-width: 62ch; }
.muted { color: var(--ink-muted); }
.mt-40 { margin-top: 40px; } .mt-28 { margin-top: 28px; } .mt-16 { margin-top: 16px; }

.section { padding: var(--section) 0; }
.section.tight { padding: 44px 0; }
.section.bg-warm { background: var(--bg-warm); }
.section.on-ink  { background: var(--ink);  color: var(--paper); }
.section.on-ink h1, .section.on-ink h2, .section.on-ink h3, .section.on-ink h4 { color: var(--paper); }
.section.on-ink p { color: var(--paper-72); }

/* ---------- the cut top-right corner — signature shape ------------------
   Transcribed from theme.css: mobile 66x42, desktop 108x69. Applied to
   feature images (banner, quote, gallery) exactly as the source does. */
.cut { clip-path: polygon(0 0, calc(100% - var(--cut-x)) 0, 100% var(--cut-y), 100% 100%, 0 100%); }

/* ---------- section label / overline ------------------------------------
   The source puts a small red uppercase overline above section heads
   (.baker-page-hero__overline, 104 pages): red, .9375rem, 700, uppercase.
   Industry-taxonomy strings. This is the site's own kicker, transcribed
   verbatim — not the mono-dash AI kicker the house rule bans. */
.sec-label {
  font-family: var(--font-body); font-weight: 700;
  font-size: .9375rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--accent); margin: 0 0 14px;
}
.sec-label.spaced { letter-spacing: .1875rem; }          /* .baker-history__overline */
.on-ink .sec-label, .on-pop .sec-label { color: var(--accent); }

/* ---------- buttons: 4px rectangle, Oswald uppercase --------------------
   Primary #fd3a20 -> #d42f1a on hover; secondary paper ground with ink text
   that goes red on hover; both verbatim from .baker-cta-button. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1;
  padding: 14px 26px; border-radius: var(--radius);
  text-decoration: none; cursor: pointer; border: 2px solid var(--accent);
  background: var(--accent); color: var(--paper);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-secondary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-secondary:hover { color: var(--accent); border-color: var(--paper); background: var(--paper); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--paper); }
.btn-outline.on-ink { color: var(--paper); border-color: var(--paper); }
.btn-outline.on-ink:hover { background: var(--paper); color: var(--ink); }
.btn-sm { padding: 10px 18px; font-size: .92rem; }

/* arrow link — the "See All Projects ›" pattern; arrow nudges on hover */
.arrow-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  color: var(--accent); text-decoration: none; font-size: 1.15rem;
}
.arrow-link .caret { transition: transform .18s ease; }
.arrow-link:hover .caret { transform: translateX(3px); }

/* =========================================================================
   Site chrome (demo pages)
   ========================================================================= */
.utility-bar {
  background: var(--ink); color: var(--paper-72);
  font-size: .82rem; padding: 8px var(--gutter);
}
.utility-bar > .container { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.utility-bar a { color: var(--paper); text-decoration: none; }
.utility-bar a:hover { color: var(--accent); }
.utility-bar .phone { font-family: var(--font-display); font-weight: 600; letter-spacing: .02em; margin-right: auto; }

.nav { background: var(--paper); border-bottom: 1px solid var(--grey); position: sticky; top: 0; z-index: 60; }
.nav > .container { display: flex; align-items: center; gap: 30px; min-height: 74px; }
.nav .brand-mark { display: flex; align-items: center; flex-shrink: 0; }
.nav .brand-mark img { height: 46px; width: auto; }
.nav .links { display: flex; gap: 26px; margin-right: auto; flex-wrap: wrap; }
.nav .links a {
  color: var(--ink-deep); text-decoration: none; font-family: var(--font-display);
  font-weight: 500; font-size: .95rem; text-transform: uppercase; letter-spacing: .01em; padding: 6px 0;
}
.nav .links a:hover { color: var(--accent); }
.nav .actions { display: flex; align-items: center; gap: 14px; }

/* mega dropdown (static demo of the hover panel) */
.mega { background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: 32px; }
.mega .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; }
.mega h4 { color: var(--sand); font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 14px; }
.mega a { display: block; color: var(--paper); text-decoration: none; padding: 6px 0; font-size: .95rem; }
.mega a:hover { color: var(--accent); }

/* ---------- page hero (charcoal, overline, giant title, stat infobox) ---- */
.page-hero { position: relative; background: var(--ink); color: var(--paper); overflow: hidden; }
.page-hero .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .34; z-index: 0; }
.page-hero::after { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(120deg, rgba(59,56,53,.92) 30%, rgba(59,56,53,.55)); }
.page-hero > .container { position: relative; z-index: 2; padding-top: 102px; padding-bottom: 96px; }
.page-hero .overline { color: var(--accent); font-weight: 700; font-size: .9375rem;
  text-transform: uppercase; letter-spacing: .04em; margin: 0 0 14px; }
.page-hero h1 { color: var(--paper); text-transform: uppercase; max-width: 588px; line-height: .9; }
.page-hero .sub { color: var(--paper); max-width: 500px; margin: 22px 0 0; }
.page-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.infobox { background: var(--ink); border-radius: var(--radius); margin-top: 46px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.infobox .item { padding: 34px 40px; border-left: 1px solid rgba(245,245,245,.14); }
.infobox .item:first-child { border-left: 0; }
.infobox .k { color: var(--sand); font-size: .9375rem; font-weight: 700; letter-spacing: .1875rem;
  text-transform: uppercase; margin: 0 0 8px; }
.infobox .v { color: var(--paper); font-size: 1.25rem; line-height: 1.5; margin: 0; }

/* ---------- legacy banner (big statement + supporting copy) -------------- */
.legacy { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px 60px; align-items: start; }
.legacy h2 { text-transform: uppercase; margin: 0; }
.legacy p { margin: 0; }

/* ---------- history banner (charcoal panel, tight title) ----------------- */
.history-panel { background: var(--ink); color: var(--paper); border-radius: var(--radius);
  padding: 96px 72px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 60px; align-items: center; }
.history-panel h2 { color: var(--paper); text-transform: uppercase; line-height: .92; max-width: 12ch; margin: 0; }
.history-panel p { color: var(--paper-72); margin: 0 0 22px; max-width: 46ch; }
.history-panel .actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- services grid (3px-mortar card grid, charcoal cards) --------- */
.svc-grid { display: grid; gap: var(--gap-mortar); grid-template-columns: 475fr 955fr; }
.svc-intro { background: var(--paper); border: 1px solid var(--grey); border-radius: var(--radius); padding: 48px 40px; }
.svc-intro h2 { text-transform: uppercase; line-height: .9; letter-spacing: -.04em; margin: 0 0 18px; }
.svc-cards { display: grid; gap: var(--gap-mortar); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.svc-card { background: var(--ink); color: var(--paper); border-radius: var(--radius);
  padding: 32px; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between;
  text-decoration: none; transition: background .18s ease; }
.svc-card h3 { color: var(--paper); text-transform: uppercase; line-height: .9; margin: 0; }
.svc-card .go { color: var(--accent); font-size: 1.6rem; align-self: flex-end; margin-top: 24px; transition: transform .18s ease; }
.svc-card:hover .go { transform: translateX(3px); }
.svc-card:hover h3 { color: var(--accent); }

/* ---------- quote (giant uppercase pull-quote + cut-corner portrait) ----- */
.quote-block { display: grid; grid-template-columns: minmax(0,470px) minmax(0,775px); gap: 51px; align-items: center; }
.quote-block .portrait { aspect-ratio: 775/464; width: 100%; object-fit: cover; border-radius: 0; }
.quote-body .mark { color: var(--accent); font-family: var(--font-display); font-weight: 700; font-size: 3.4rem; line-height: .6; }
.quote-body .text { font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.75rem, 1rem + 3vw, 3.4rem); line-height: .95; color: var(--ink); margin: 8px 0 24px; }
.quote-body .source { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--ink); margin: 0; }
.quote-body .byline { color: var(--ink-muted); font-size: 1rem; margin: 2px 0 0; }

/* ---------- program info (teal panel + sand lead + stat infobox) --------- */
.program { background: var(--pop); color: var(--paper); border-radius: var(--radius); padding: 96px 72px; }
.program h2 { color: var(--paper); text-transform: uppercase; line-height: .92; margin: 0 0 22px; }
.program .lead { color: var(--sand); font-size: 1.5rem; font-weight: 700; line-height: 1.33; max-width: 40ch; margin: 0 0 20px; }
.program p { color: var(--paper-72); max-width: 54ch; margin: 0 0 30px; }
.program .infobox { background: var(--ink); margin-top: 0; }
.on-pop .sec-label { color: var(--sand); }

/* ---------- featured projects / insights (giant head + card grid) -------- */
.feature-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 34px; }
.feature-head h2 { color: var(--ink-deep); text-transform: uppercase; line-height: 1; letter-spacing: -.01em; margin: 0; }
.proj-grid { display: grid; gap: var(--gap-mortar); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* charcoal base, not grey: the overlaid .label is paper-white, so the card must
   stay dark behind the photo — legible even if the image never paints. */
.proj-card { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 715/452;
  display: block; text-decoration: none; background: var(--ink); }
.proj-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.proj-card::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(59,56,53,0) 40%, rgba(59,56,53,.82)); }
.proj-card .label { position: absolute; left: 24px; bottom: 20px; right: 24px; z-index: 2;
  color: var(--paper); font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: -.01em; line-height: 1; font-size: clamp(1.25rem, .9rem + 1vw, 1.75rem); }
.proj-card:hover img { transform: scale(1.04); }

.insight-grid { display: grid; gap: var(--gap-mortar); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.insight-card { border-radius: var(--radius); overflow: hidden; background: var(--paper);
  border: 1px solid var(--grey); text-decoration: none; display: block; transition: box-shadow .18s ease; }
.insight-card .thumb { aspect-ratio: 476/286; background: var(--grey); overflow: hidden; }
.insight-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.insight-card .body { padding: 22px 24px 26px; }
.insight-card h3 { color: var(--ink-deep); font-size: 1.4rem; line-height: 1.1; text-transform: none; margin: 0 0 8px; }
.insight-card p { color: var(--ink-muted); font-size: .92rem; margin: 0; }
.insight-card:hover { box-shadow: var(--shadow-card); }
.insight-card:hover h3 { color: var(--accent); }

/* ---------- banner (cut-corner image + charcoal copy panel) -------------- */
.banner { display: grid; grid-template-columns: 40fr 60fr; border-radius: var(--radius); overflow: visible; }
.banner .media { position: relative; min-height: 320px; }
.banner .media img { width: 100%; height: 100%; object-fit: cover; }
.banner .copy { background: var(--ink); color: var(--paper); padding: 100px 72px;
  display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.banner .copy h2 { color: var(--paper); text-transform: uppercase; line-height: .92; letter-spacing: -.01em; margin: 0; }
.banner .copy p { color: var(--paper-72); margin: 0; max-width: 46ch; }
.banner .copy .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }

/* ---------- gallery (cut-corner image band + caption) -------------------- */
.gallery { display: grid; gap: var(--gap-mortar); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.gallery .stage { aspect-ratio: 4/3; overflow: hidden; }
.gallery .stage img { width: 100%; height: 100%; object-fit: cover; }
.gallery-caption { font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); line-height: 1; max-width: 26ch; color: var(--ink-deep); }

/* ---------- icon grid (course/service columns) --------------------------- */
.icon-grid { display: grid; gap: var(--gap-mortar); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.icon-col { background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: 32px; }
.icon-col h3 { color: var(--paper); text-transform: uppercase; font-size: 1.5rem; line-height: 1; margin: 0 0 16px; }
.icon-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.icon-col li { color: var(--paper-72); font-size: .95rem; padding-left: 18px; position: relative; }
.icon-col li::before { content: '›'; position: absolute; left: 0; color: var(--accent); }

/* ---------- media-text (image + copy split) ------------------------------ */
.media-text { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.media-text.flip .media { order: 2; }
.media-text .media img { width: 100%; border-radius: var(--radius); }
.media-text h2 { text-transform: uppercase; margin: 0 0 18px; }

/* ---------- image-offset-text (overlapping image + panel) ---------------- */
.offset { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: center; }
.offset .media img { width: 100%; border-radius: var(--radius); }
.offset .panel { background: var(--ink); color: var(--paper); border-radius: var(--radius);
  padding: 56px; margin-left: -60px; z-index: 2; position: relative; }
.offset .panel h2 { color: var(--paper); text-transform: uppercase; margin: 0 0 16px; }
.offset .panel p { color: var(--paper-72); margin: 0; }

/* ---------- image + hanging text (overlaid headline) --------------------- */
/* charcoal base so the hung paper-white headline is legible over the scrim
   even before the photo paints (the .over gradient is transparent at the top). */
.hanging { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--ink); }
.hanging img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hanging .over { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 56px; background: linear-gradient(180deg, rgba(59,56,53,0) 45%, rgba(59,56,53,.85)); }
.hanging .over h2 { color: var(--paper); text-transform: uppercase; max-width: 18ch; margin: 0 0 12px; }
.hanging .over p { color: var(--paper); max-width: 52ch; margin: 0; }

/* ---------- accordion (repair-services list) ----------------------------- */
.accordion { max-width: 820px; }
.accordion .row { border-bottom: 1px solid var(--grey); }
.accordion .q { display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0; cursor: pointer; font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase; font-size: 1.4rem; color: var(--ink-deep); }
.accordion .q .plus { color: var(--accent); font-size: 1.6rem; line-height: 1; }
.accordion .a { padding: 0 0 24px; color: var(--ink-muted); max-width: 62ch; }

/* ---------- five steps (numbered process) -------------------------------- */
.steps { display: grid; gap: var(--gap-mortar); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); counter-reset: s; }
.step { background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: 30px; }
.step .n { font-family: var(--font-display); font-weight: 700; font-size: 3rem; line-height: 1; color: var(--accent); }
.step h3 { color: var(--paper); text-transform: uppercase; font-size: 1.4rem; line-height: 1; margin: 12px 0 10px; }
.step p { color: var(--paper-72); font-size: .92rem; margin: 0; }

/* ---------- people grid (leadership) ------------------------------------- */
.people { display: grid; gap: var(--gap-mortar); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.person { background: var(--paper); border: 1px solid var(--grey); border-radius: var(--radius); overflow: hidden; }
.person .photo { aspect-ratio: 3/4; background: var(--grey); overflow: hidden; }
.person .photo img { width: 100%; height: 100%; object-fit: cover; }
.person .body { padding: 20px 22px 24px; }
.person h3 { font-size: 1.5rem; text-transform: uppercase; line-height: 1; margin: 0 0 6px; color: var(--ink-deep); }
.person .role { color: var(--ink-muted); font-size: .92rem; margin: 0; }

/* ---------- history timeline (year markers) ------------------------------ */
.timeline { border-left: 3px solid var(--accent); margin-left: 8px; padding-left: 32px; display: grid; gap: 44px; }
.timeline .era .year { font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--accent); }
.timeline .era h3 { text-transform: uppercase; margin: 8px 0 8px; }
.timeline .era p { color: var(--ink-muted); max-width: 60ch; margin: 0; }

/* ---------- location CTA banner ------------------------------------------ */
.loc-cta { background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: 72px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.loc-cta h2 { color: var(--paper); text-transform: uppercase; line-height: .9; margin: 0; }
.loc-cta .actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

/* ---------- location sales-title — the ONE mirrored red headline ----------
   Transcribed VERBATIM from the location template:
   <h2>Looking for a <span class="loc-accent">Charlotte</span> roofing
   contractor you can trust?</h2>. The red word is the source's own treatment,
   carried across intact per the user's explicit instruction ("I like the red
   city name. Mirror it.") — a documented exception to the headline-ink-only
   rule, not a licence to colour other headings. See brand-spec.md. */
.loc-intro { text-align: center; max-width: 20ch; margin: 0 auto; }
.loc-intro .loc-accent { color: var(--location-red); }

/* ---------- news / insight index cards (category + title + date) -------- */
.news-grid { display: grid; gap: var(--gap-mortar); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.news-card { background: var(--paper); border: 1px solid var(--grey); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: box-shadow .18s ease; }
.news-card .thumb { aspect-ratio: 16/10; background: var(--grey); overflow: hidden; }
.news-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-card .body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.news-card .cat { font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.news-card h3 { font-size: 1.35rem; line-height: 1.12; text-transform: none; color: var(--ink-deep); margin: 0; }
.news-card .date { color: var(--ink-muted); font-size: .82rem; margin-top: auto; }
.news-card:hover { box-shadow: var(--shadow-card); }
.news-card:hover h3 { color: var(--accent); }

/* ---------- project index cards (category tag + name + Baker office) ----- */
.projcard-grid { display: grid; gap: var(--gap-mortar); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.projcard { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3;
  display: block; text-decoration: none; background: var(--ink); }
.projcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.projcard::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(59,56,53,0) 35%, rgba(59,56,53,.86)); }
.projcard .info { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 2; }
.projcard .cat { display: inline-block; background: var(--accent); color: var(--paper);
  font-weight: 700; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-sm); margin-bottom: 10px; }
.projcard h3 { color: var(--paper); font-size: 1.3rem; line-height: 1.05; text-transform: uppercase; margin: 0 0 4px; }
.projcard .office { color: var(--paper-72); font-size: .84rem; }
.projcard:hover img { transform: scale(1.04); }

/* ---------- job listings (careers open positions) ----------------------- */
.jobs { display: grid; gap: var(--gap-mortar); }
.job-row { display: grid; grid-template-columns: 1fr auto auto; gap: 20px; align-items: center;
  background: var(--paper); border: 1px solid var(--grey); border-radius: var(--radius);
  padding: 22px 26px; text-decoration: none; transition: background .18s ease; }
.job-row .role { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; text-transform: uppercase; color: var(--ink-deep); }
.job-row .loc { color: var(--ink-muted); font-size: .92rem; }
.job-row .go { color: var(--accent); font-size: 1.4rem; }
.job-row:hover { background: var(--bg-warm); }
.job-row:hover .role { color: var(--accent); }

/* ---------- locations index (directory of markets) ---------------------- */
.loc-index { display: grid; gap: var(--gap-mortar); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.loc-tile { background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: 26px 28px;
  text-decoration: none; transition: background .18s ease; }
.loc-tile h3 { color: var(--paper); font-size: 1.5rem; text-transform: uppercase; line-height: 1; margin: 0 0 6px; }
.loc-tile p { color: var(--paper-72); font-size: .86rem; margin: 0; }
.loc-tile:hover { background: var(--pop); }

/* ---------- content with a sticky table of contents --------------------- */
.toc-layout { display: grid; grid-template-columns: 260px 1fr; gap: 60px; align-items: start; }
.toc { position: sticky; top: 100px; border-left: 3px solid var(--accent); padding-left: 22px; }
.toc .jump { font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 14px; }
.toc a { display: block; color: var(--ink-deep); text-decoration: none; padding: 6px 0; font-size: .95rem; }
.toc a:hover { color: var(--accent); }
.toc-body h2 { text-transform: uppercase; margin: 0 0 14px; }
.toc-body h3 { text-transform: none; margin: 30px 0 10px; }
.toc-body p { color: var(--ink); max-width: 64ch; }

/* ---------- taxonomy filter bar ----------------------------------------- */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 20px 24px;
  background: var(--bg-warm); border: 1px solid var(--grey); border-radius: var(--radius); }
.filter-bar .fl-label { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; color: var(--ink-deep); margin-right: 6px; }
.filter-chip { font-weight: 600; font-size: .86rem; padding: 8px 16px; border: 1px solid var(--grey);
  border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); text-decoration: none; cursor: pointer; }
.filter-chip:hover { border-color: var(--ink); }
.filter-chip.on { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.filter-clear { color: var(--ink-muted); font-size: .84rem; text-decoration: underline; margin-left: auto; }

/* =========================================================================
   Footer
   ========================================================================= */
.footer { background: var(--ink); color: var(--paper-72); padding: 70px 0 0; }
.footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; }
.footer .brand-block img { height: 54px; margin-bottom: 18px; }
.footer .brand-block p { font-size: .9rem; margin: 0 0 6px; }
.footer h4 { color: var(--paper); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 16px; }
.footer a { color: var(--paper-72); text-decoration: none; display: block; padding: 4px 0; font-size: .9rem; }
.footer a:hover { color: var(--accent); }
.footer .legal { margin-top: 56px; background: var(--navy); color: var(--paper-60);
  font-size: .8rem; padding: 18px 0; }
.footer .legal .container { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; }

/* =========================================================================
   Doc chrome — ds-nav, sections catalog, page gallery
   ========================================================================= */
.ds-nav { background: var(--ink); padding: 14px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ds-nav .lockup-text { margin: 0; color: var(--paper); font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em; }
.ds-nav .lockup-text small { display: block; font-family: var(--font-body); font-weight: 400;
  font-size: .74rem; letter-spacing: .04em; text-transform: none; color: var(--paper-60); }
.ds-nav .tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.ds-nav .tab { color: var(--paper-72); text-decoration: none; font-size: .86rem; padding: 7px 14px; border-radius: var(--radius); }
.ds-nav .tab:hover { color: var(--paper); }
.ds-nav .tab.active { background: var(--paper); color: var(--ink); }

.ds-hero { background: var(--bg-warm); padding: 74px 0 56px; border-bottom: 1px solid var(--grey); }
.ds-hero .meta { display: flex; flex-wrap: wrap; gap: 14px 44px; margin-top: 30px; }
.ds-hero .meta > div { font-size: .8rem; color: var(--ink-muted); }
.ds-hero .meta strong { display: block; color: var(--ink-deep); font-size: .96rem; }
.ds-section { padding: 66px 0; border-bottom: 1px solid var(--grey); }

.door-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap-mortar); }
.door { display: block; text-decoration: none; padding: 26px 24px; background: var(--paper);
  border: 1px solid var(--grey); border-radius: var(--radius);
  transition: box-shadow .18s ease, transform .18s ease; }
.door:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.door h3 { margin-bottom: 6px; font-size: 1.4rem; text-transform: uppercase; }
.door p { margin: 0; font-size: .9rem; color: var(--ink-muted); }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap-mortar); }

.swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--gap-mortar); }
.swatch { border: 1px solid var(--grey); border-radius: var(--radius); overflow: hidden; }
.swatch .chip-color { height: 84px; }
.swatch .meta { padding: 12px 14px; }
.swatch .t { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-deep); }
.swatch .v { font-size: .74rem; color: var(--ink-muted); }

.type-spec { display: grid; grid-template-columns: 210px 1fr; gap: 30px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--grey); }
.type-spec .spec { font-family: var(--font-mono); font-size: .76rem; color: var(--ink-muted); line-height: 1.6; }

.asset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--gap-mortar); }
.asset-card { border: 1px solid var(--grey); border-radius: var(--radius); overflow: hidden; }
.asset-card .thumb { aspect-ratio: 4/3; background: var(--bg-warm); display: grid; place-items: center; overflow: hidden; }
.asset-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.asset-card .thumb img.contain { object-fit: contain; padding: 14px; }
.asset-card .thumb.ink { background: var(--ink); }
.asset-card .meta { padding: 11px 14px; font-size: .74rem; color: var(--ink-muted); }
.asset-card .meta strong { display: block; font-family: var(--font-mono); font-size: .76rem; color: var(--ink-deep); }

.sx-header { background: var(--bg-warm); padding: 70px 0 46px; }
.sx-header .meta { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 28px; }
.sx-header .meta > div { font-size: .8rem; color: var(--ink-muted); }
.sx-header .meta strong { display: block; color: var(--ink-deep); font-size: .96rem; }
.sx-index { border-bottom: 1px solid var(--grey); background: var(--paper); }
.sx-index .grid { max-width: var(--container); margin: 0 auto; padding: 20px var(--gutter);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2px 14px; }
.sx-index a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px;
  font-size: .82rem; color: var(--ink-muted); text-decoration: none; border-radius: 6px; }
.sx-index a:hover { background: var(--bg-warm); color: var(--accent); }
.sx-index a .num { color: var(--ink-quiet); }

.sx-pattern { border-bottom: 1px solid var(--grey); }
.pattern-meta { max-width: var(--container); margin: 0 auto; padding: 40px var(--gutter) 18px;
  display: flex; gap: 26px; align-items: baseline; flex-wrap: wrap; }
.pattern-meta .id { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-quiet);
  display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.pattern-meta .id .num { font-weight: 600; color: var(--accent); }
.pattern-meta .id .signature { background: var(--accent); color: var(--paper);
  font-size: .64rem; letter-spacing: 1px; padding: 3px 8px; border-radius: var(--radius); }
.pattern-meta .name { margin: 0; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; color: var(--ink-deep); }
.pattern-meta .purpose { margin: 2px 0 0; font-size: .86rem; color: var(--ink-muted); }
.sx-demo { position: relative; border-top: 1px dashed var(--grey); padding: 44px var(--gutter); }
.sx-demo .demo-label { position: absolute; top: 0; right: var(--gutter); transform: translateY(-50%);
  background: var(--paper); padding: 0 10px; font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: 1px; color: var(--ink-quiet); z-index: 5; }
.sx-demo > .container { max-width: 1180px; }

.page-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; }
.page-card { border: 1px solid var(--grey); border-radius: var(--radius); overflow: hidden;
  background: var(--paper); text-decoration: none; display: block; transition: box-shadow .18s ease; }
.page-card:hover { box-shadow: var(--shadow-card); }
.page-card .preview { aspect-ratio: 16/10; overflow: hidden; background: var(--bg-warm); position: relative; }
.page-card .preview iframe { width: 200%; height: 200%; transform: scale(.5); transform-origin: 0 0; border: 0; pointer-events: none; }
.page-card .preview::after { content: ""; position: absolute; inset: 0; }
.page-card .body { padding: 20px 24px 24px; }
.page-card .body h3 { margin-bottom: 6px; font-size: 1.5rem; text-transform: uppercase; }
.page-card .body p { margin: 0; font-size: .87rem; color: var(--ink-muted); }

/* =========================================================================
   Responsive contract — desktop cut, then every fixed track collapses
   ========================================================================= */
@media (min-width: 900px) {
  :root { --cut-x: 108px; --cut-y: 69px; }         /* the desktop cut size */
}
@media (max-width: 980px) {
  .banner { grid-template-columns: 1fr; }
  .offset { grid-template-columns: 1fr; }
  .offset .panel { margin-left: 0; }
  .footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
  :root { --section: 60px; }
  .legacy, .history-panel, .svc-grid, .quote-block, .media-text, .loc-cta, .toc-layout { grid-template-columns: 1fr; gap: 34px; }
  .toc { position: static; border-left: 0; padding-left: 0; }
  .job-row { grid-template-columns: 1fr; gap: 8px; }
  .media-text.flip .media { order: 0; }
  .history-panel, .program, .banner .copy, .loc-cta { padding: 56px 32px; }
  .quote-block .portrait { max-width: 420px; }
  .type-spec { grid-template-columns: 1fr; gap: 10px; }
  .pattern-meta { flex-direction: column; gap: 10px; }
  .pattern-meta .id { white-space: normal; flex-wrap: wrap; }
}
@media (max-width: 768px) {
  .nav .actions, .utility-bar .util-links { display: none; }
  .nav .links { display: none; }
  .footer .cols { grid-template-columns: 1fr; }
  .page-hero > .container { padding-top: 72px; padding-bottom: 72px; }
  .infobox { grid-template-columns: 1fr; }
  .infobox .item { border-left: 0; border-top: 1px solid rgba(245,245,245,.14); }
  .infobox .item:first-child { border-top: 0; }
}