/* ==========================================================================
   LaRosa Woodworks LLC — site.css
   Design direction: "Shop Ticket"
   Dark planed-oak ground, kraft paper inset panels, shellac-amber accent.
   Signature element: the tape-measure rail (.rail) used as a section divider.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THEME TOKENS  —  CLIENT-SPECIFIED BRAND PALETTE
   --------------------------------------------------------------------------
   Supplied by the client, used exactly as given:

     Deep Forest Blue-Green  #173F3F   main brand colour
     Warm Cedar / Terracotta #A65335   accent
     Natural Cream           #F3EBDD   background
     Charcoal                #252625   text
     Muted Sage              #718477   secondary accent

   Two separate tokens matter here: --brand (#173F3F) drives dark bands,
   header, footer and hero; --text (#252625) is body copy. They are NOT the
   same colour, which is why --ink and --text are distinct below.

   Accessibility note: muted sage on cream is 3.37:1 — fine for large text,
   rules and fills, but never used for small body copy.
   -------------------------------------------------------------------------- */
:root,
[data-theme="timber"] {
  --brand:      #173F3F;   /* Deep Forest Blue-Green — main brand */
  --ink:        #173F3F;   /* dark bands, header, footer, hero */
  --ink-2:      #1E5150;   /* raised surface on dark */
  --ink-3:      #2C6462;   /* border on dark */
  --text:       #252625;   /* Charcoal — body copy */
  --paper:      #F3EBDD;   /* Natural Cream — background */
  --paper-2:    #E9DFCC;   /* recessed cream */
  --line:       #D8CAB2;   /* hairline on cream */
  --accent:     #A65335;   /* Warm Cedar / Terracotta — CTAs, links, rules */
  --accent-2:   #D98F6E;   /* lighter cedar, for text on dark */
  --deep:       #7E3D26;   /* deeper cedar for hover */
  --sage:       #718477;   /* Muted Sage — secondary accent */
  --muted:      #6A6A64;   /* muted body text on cream (AA) */
  --muted-dark: #A9BDB5;   /* muted text on dark (sage-tinted) */
  --ok:         #718477;
  --warn:       #A65335;
}

/* Same palette, cream swapped for a brighter paper */
[data-theme="timberlight"] { --brand:#173F3F; --ink:#173F3F; --ink-2:#1E5150; --ink-3:#2C6462; --text:#252625; --paper:#FAF6EE; --paper-2:#F0E8DA; --line:#DED2BE; --accent:#A65335; --accent-2:#D98F6E; --deep:#7E3D26; --sage:#718477; --muted:#6A6A64; --muted-dark:#A9BDB5; --ok:#718477; --warn:#A65335; }
/* Sage-forward: secondary accent promoted */
[data-theme="sage"]        { --brand:#173F3F; --ink:#1D3B34; --ink-2:#274B42; --ink-3:#355C52; --text:#252625; --paper:#F3EBDD; --paper-2:#E7DFCE; --line:#D5C9B4; --accent:#5F7A66; --accent-2:#9DB8A4; --deep:#425A48; --sage:#718477; --muted:#6A6A64; --muted-dark:#A9BDB5; --ok:#718477; --warn:#A65335; }
/* Charcoal-forward: near-neutral with cedar accent */
[data-theme="charcoal"]    { --brand:#252625; --ink:#252625; --ink-2:#333433; --ink-3:#454644; --text:#252625; --paper:#F3EBDD; --paper-2:#E8DFCD; --line:#D6CAB4; --accent:#A65335; --accent-2:#D98F6E; --deep:#7E3D26; --sage:#718477; --muted:#6A6A64; --muted-dark:#B2B0A8; --ok:#718477; --warn:#A65335; }
/* Cedar-forward: terracotta as the dominant surface */
[data-theme="cedar"]       { --brand:#5E2F1D; --ink:#3A1F14; --ink-2:#4C2A1B; --ink-3:#5F3724; --text:#252625; --paper:#F5EDE0; --paper-2:#EBE0CE; --line:#DCCDB5; --accent:#A65335; --accent-2:#DE9A78; --deep:#7E3D26; --sage:#718477; --muted:#6A6A64; --muted-dark:#C4AC9B; --ok:#718477; --warn:#8E3F22; }
/* Deepest forest, highest contrast */
[data-theme="forest"]      { --brand:#0F2C2C; --ink:#0F2C2C; --ink-2:#173F3F; --ink-3:#245050; --text:#252625; --paper:#F3EBDD; --paper-2:#E7DECB; --line:#D5C8B1; --accent:#A65335; --accent-2:#D98F6E; --deep:#7E3D26; --sage:#718477; --muted:#6A6A64; --muted-dark:#9FB8B0; --ok:#718477; --warn:#A65335; }
/* Cream-heavy, minimal */
[data-theme="linen"]       { --brand:#173F3F; --ink:#2E3B38; --ink-2:#3C4A46; --ink-3:#4D5B57; --text:#252625; --paper:#FBF7EF; --paper-2:#F1EADC; --line:#E0D6C2; --accent:#A65335; --accent-2:#D98F6E; --deep:#7E3D26; --sage:#718477; --muted:#6A6A64; --muted-dark:#B4B8B0; --ok:#718477; --warn:#A65335; }

/* --------------------------------------------------------------------------
   2. TYPE SCALE + RESET
   Display: Bebas Neue (truck lettering). Body: Archivo. Utility: Space Mono.
   -------------------------------------------------------------------------- */
:root {
  --font-display: "Bebas Neue", "Oswald", "Haettenschweiler", Impact, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step--1: clamp(.78rem, .76rem + .1vw, .84rem);
  --step-0:  clamp(1rem, .97rem + .16vw, 1.08rem);
  --step-1:  clamp(1.2rem, 1.13rem + .34vw, 1.42rem);
  --step-2:  clamp(1.5rem, 1.36rem + .68vw, 1.95rem);
  --step-3:  clamp(2rem, 1.7rem + 1.5vw, 3rem);
  --step-4:  clamp(2.7rem, 2rem + 3.4vw, 5.5rem);
  --step-5:  clamp(3.4rem, 2.2rem + 6vw, 8rem);

  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --wrap: 1240px;
  --wrap-narrow: 800px;
  --radius: 3px;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 28px -12px rgba(0,0,0,.28);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.08; font-weight: 700; }
.display, h1.display, .hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .012em;
  line-height: .92;
  text-transform: uppercase;
}
h2 { font-size: var(--step-2); letter-spacing: -.015em; }
h3 { font-size: var(--step-1); letter-spacing: -.01em; }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

/* Utility label — the "shop ticket" voice used for eyebrows and data */
.tick {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .9rem;
}
.tick::before { content: ""; width: 1.6rem; height: 1px; background: currentColor; opacity: .7; }
.tick.plain::before { display: none; }
.on-dark .tick { color: var(--accent-2); }

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--deep); font-weight: 500; }
.on-dark .lede { color: var(--paper-2); }
.small { font-size: var(--step--1); color: var(--muted); }
.on-dark .small { color: var(--muted-dark); }
.mono { font-family: var(--font-mono); }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container { width: min(var(--wrap), 100% - (var(--gutter) * 2)); margin-inline: auto; }
.container.narrow { width: min(var(--wrap-narrow), 100% - (var(--gutter) * 2)); }
.section { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.section.tight { padding: clamp(2.4rem, 5vw, 4rem) 0; }
.on-dark { background: var(--ink); color: var(--paper); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--paper); }
.on-paper-2 { background: var(--paper-2); }

.grid { display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.split { display: grid; gap: clamp(1.8rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr .95fr; } .split.wide-left { grid-template-columns: 1.4fr 1fr; } .split.wide-right { grid-template-columns: 1fr 1.4fr; } }

/* --------------------------------------------------------------------------
   4. SIGNATURE: THE TAPE-MEASURE RAIL
   A hairline ruler with tick marks. Used to divide major sections. It is the
   one decorative element on the site, so everything else stays quiet.
   -------------------------------------------------------------------------- */
.rail {
  position: relative;
  height: 26px;
  border-top: 1px solid var(--line);
  background-image:
    repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(to right, var(--accent) 0 1px, transparent 1px 100px);
  background-size: 100% 7px, 100% 13px;
  background-repeat: repeat-x;
  background-position: top left, top left;
  opacity: .85;
}
.on-dark .rail, .rail.dark {
  border-top-color: var(--ink-3);
  background-image:
    repeating-linear-gradient(to right, var(--ink-3) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(to right, var(--accent) 0 1px, transparent 1px 100px);
}
.rail-label {
  position: absolute; top: 15px; left: 0;
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.on-dark .rail-label { color: var(--muted-dark); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.55rem;
  font-family: var(--font-body); font-weight: 700; font-size: .93rem;
  letter-spacing: .02em;
  border: 1px solid var(--ink); border-radius: var(--radius);
  background: transparent; color: var(--ink);
  text-decoration: none; cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .16s ease, border-color .16s ease;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--deep); border-color: var(--deep); color: #fff; }
.btn.ghost-light { border-color: var(--paper); color: var(--paper); }
.btn.ghost-light:hover { background: var(--paper); color: var(--ink); }
.btn.sm { padding: .55rem 1rem; font-size: .82rem; }
.btn.block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   6. HEADER + NAV  (grouped mega-menu, root-relative links)
   -------------------------------------------------------------------------- */
.skip {
  position: absolute; left: -9999px; z-index: 999;
  background: var(--accent); color: #fff; padding: .7rem 1.1rem;
  border-radius: var(--radius); font-weight: 700; text-decoration: none;
}
.skip:focus { left: 8px; top: 8px; }

.topbar {
  background: var(--ink); color: var(--muted-dark);
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid var(--ink-3);
}
.topbar .container { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: center; justify-content: space-between; min-height: 34px; padding-block: .3rem; }
.topbar a { color: var(--accent-2); text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar .badge { color: var(--paper); }
@media (max-width: 700px) { .topbar .badge { display: none; } }

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--ink-3);
  transition: box-shadow .25s ease, background .25s ease;
}
@supports not (backdrop-filter: blur(4px)) { .site-header { background: var(--ink); } }
.site-header.scrolled { box-shadow: 0 10px 30px -18px rgba(0,0,0,.9); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; }

.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--paper); flex: none; }
.brand svg, .brand img { width: 42px; height: 42px; flex: none; transition: transform .3s ease; }
.brand:hover svg { transform: rotate(-4deg); }
.brand-name { font-family: var(--font-display); font-size: 1.62rem; line-height: .9; letter-spacing: .02em; text-transform: uppercase; }
.brand-tag { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-2); }
@media (max-width: 420px) { .brand-name { font-size: 1.3rem; } .brand-tag { font-size: .52rem; } }

.nav { display: flex; align-items: center; gap: .1rem; }
.nav-item { position: relative; display: flex; }

.nav-link {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem .8rem; text-decoration: none; color: var(--paper);
  font-family: var(--font-body); font-size: .87rem; font-weight: 600;
  background: none; border: 0; cursor: pointer; white-space: nowrap;
  border-radius: var(--radius); position: relative;
  transition: color .15s ease, background .15s ease;
}
.nav-link::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .32rem;
  height: 2px; background: var(--accent); transform: scaleX(0);
  transform-origin: left; transition: transform .22s ease;
}
.nav-link:hover { color: var(--accent-2); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.active { color: var(--accent-2); }

.caret { width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .22s ease; opacity: .75; }
.nav-trigger[aria-expanded="true"] .caret { transform: rotate(-135deg) translateY(-2px); }

.nav-cta { display: flex; align-items: center; gap: .7rem; margin-left: .6rem; }
.nav-phone {
  font-size: .8rem; color: var(--accent-2); text-decoration: none;
  letter-spacing: .02em; white-space: nowrap;
}
.nav-phone:hover { text-decoration: underline; }
@media (max-width: 1240px) { .nav-phone { display: none; } }

/* ---- Mega menu ---- */
.megamenu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-8px);
  width: min(820px, 92vw);
  background: var(--ink-2); border: 1px solid var(--ink-3);
  border-radius: var(--radius); box-shadow: 0 30px 70px -30px rgba(0,0,0,.95);
  padding: .9rem; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 70;
}
.megamenu::before {
  content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px;
}
.nav-item.open .megamenu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.megamenu-inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.mega-card {
  display: block; padding: .85rem .95rem; border-radius: var(--radius);
  text-decoration: none; color: var(--paper);
  border: 1px solid transparent; transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.mega-card:hover { background: var(--ink); border-color: var(--accent); transform: translateY(-1px); }
.mega-tag {
  display: block; font-family: var(--font-mono); font-size: .56rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: .3rem;
}
.mega-card b { display: block; font-size: .96rem; margin-bottom: .18rem; }
.mega-blurb { display: block; font-size: .8rem; line-height: 1.45; color: var(--muted-dark); }
.mega-all { grid-column: 1 / -1; background: rgba(194,118,42,.09); border-color: var(--ink-3); }

/* ---- Hamburger ---- */
.nav-toggle {
  display: none; align-items: center; gap: .55rem;
  background: none; border: 1px solid var(--ink-3); color: var(--paper);
  padding: .5rem .8rem; border-radius: var(--radius); cursor: pointer;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
}
.nav-bars { display: inline-flex; flex-direction: column; gap: 3.5px; width: 17px; }
.nav-bars i { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ---- Mobile ---- */
@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 110px 0 0 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink); border-top: 1px solid var(--ink-3);
    padding: .6rem var(--gutter) 3rem;
    overflow-y: auto; display: none;
  }
  .nav.open { display: flex; animation: navIn .22s ease both; }
  @keyframes navIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

  .nav-item { display: block; }
  .nav-link {
    width: 100%; justify-content: space-between;
    padding: 1rem .2rem; font-size: 1.02rem;
    border-bottom: 1px solid var(--ink-3); border-radius: 0;
  }
  .nav-link::after { display: none; }
  .nav-link.active { color: var(--accent-2); }

  .megamenu {
    position: static; transform: none; width: auto;
    opacity: 1; visibility: visible; pointer-events: auto;
    background: none; border: 0; box-shadow: none; padding: 0;
    display: none;
  }
  .nav-item.open .megamenu { display: block; transform: none; }
  .megamenu-inner { grid-template-columns: 1fr; gap: 0; }
  .mega-card { border-bottom: 1px solid var(--ink-3); border-radius: 0; padding: .85rem .2rem .85rem 1rem; }
  .mega-card:hover { transform: none; }
  .mega-all { background: none; }

  .nav-cta { flex-direction: column; align-items: stretch; gap: .7rem; margin: 1.4rem 0 0; }
  .nav-phone { display: block; text-align: center; font-size: 1rem; padding: .6rem; border: 1px solid var(--ink-3); border-radius: var(--radius); }
  .nav-cta .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero { position: relative; background: var(--ink); color: var(--paper); overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .34; filter: grayscale(.35) contrast(1.05); }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, var(--ink) 12%, rgba(23,20,15,.86) 48%, rgba(23,20,15,.42) 100%);
}
.hero-inner { position: relative; padding: clamp(4rem, 11vw, 9rem) 0 clamp(3rem, 7vw, 5rem); }
.hero h1 { font-size: var(--step-5); margin: 0 0 .18em; max-width: 15ch; }
.hero h1 .amber { color: var(--accent-2); display: block; }
.hero .hero-sub { font-size: var(--step-1); max-width: 44ch; color: var(--paper-2); font-weight: 500; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 0; margin-top: clamp(2rem, 5vw, 3.4rem); border-top: 1px solid var(--ink-3); }
.hero-stat { padding: 1.1rem 1.6rem 1.1rem 0; margin-right: 1.6rem; border-right: 1px solid var(--ink-3); }
.hero-stat:last-child { border-right: 0; }
.hero-stat b { display: block; font-family: var(--font-display); font-size: 2.1rem; line-height: 1; color: var(--accent-2); font-weight: 400; }
.hero-stat span { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted-dark); }

/* Page banner for interior pages */
.pagehead { background: var(--ink); color: var(--paper); padding: clamp(2.8rem, 6vw, 4.6rem) 0 clamp(2rem, 4vw, 3rem); position: relative; }
.pagehead h1 { font-size: var(--step-4); margin: 0 0 .3em; max-width: 20ch; }
.pagehead p { max-width: 62ch; color: var(--paper-2); font-size: var(--step-1); line-height: 1.5; }
.crumbs { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dark); margin-bottom: 1.1rem; }
.crumbs a { color: var(--accent-2); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.6rem; display: flex; flex-direction: column;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card:hover { border-color: var(--accent); }
a.card { text-decoration: none; color: inherit; }
a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.on-dark .card { background: var(--ink-2); border-color: var(--ink-3); }
.card .tag {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .8rem; display: block;
}
.card h3 { margin-bottom: .45rem; }
.card p { color: var(--muted); font-size: .95rem; }
.on-dark .card p { color: var(--muted-dark); }
.card .more { margin-top: auto; padding-top: 1rem; font-weight: 700; font-size: .85rem; color: var(--accent); }
.card .more::after { content: " →"; }

.spec-list { list-style: none; margin: 0; padding: 0; }
.spec-list li {
  display: flex; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid var(--line);
  font-size: .93rem;
}
.spec-list li:last-child { border-bottom: 0; }
.spec-list li::before { content: "▸"; color: var(--accent); flex: none; font-size: .8rem; line-height: 1.7; }
.on-dark .spec-list li { border-bottom-color: var(--ink-3); }

/* Numbered process — order genuinely matters here, so numbers earn their place */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  counter-increment: step; display: grid; gap: .4rem 1.4rem;
  grid-template-columns: auto 1fr; padding: 1.5rem 0; border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 1.5rem; color: var(--accent);
  grid-row: span 2; line-height: 1;
}
.step h3 { margin: 0; align-self: center; }
.step p { color: var(--muted); margin: 0; }
.on-dark .step { border-color: var(--ink-3); }
.on-dark .step p { color: var(--muted-dark); }

/* --------------------------------------------------------------------------
   9. GALLERY
   -------------------------------------------------------------------------- */
.gallery { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.shot {
  position: relative; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--paper-2);
  aspect-ratio: 4 / 3; margin: 0;
}
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.shot:hover img { transform: scale(1.035); }
.shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem .9rem .7rem;
  background: linear-gradient(to top, rgba(10,8,6,.88), transparent);
  color: #fff; font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase;
}
.shot.tall { aspect-ratio: 3 / 4; }
.shot.wide { grid-column: span 2; aspect-ratio: 16 / 9; }
@media (max-width: 640px) { .shot.wide { grid-column: span 1; } }
.gallery-empty {
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 2.4rem 1.5rem; text-align: center; color: var(--muted);
  font-family: var(--font-mono); font-size: .8rem;
}

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(8,7,5,.94); display: none; align-items: center; justify-content: center; padding: 2rem 1rem; }
.lb.open { display: flex; }
.lb img { max-width: min(1200px, 94vw); max-height: 88vh; object-fit: contain; border-radius: var(--radius); }
.lb-close { position: absolute; top: 1rem; right: 1.2rem; background: none; border: 1px solid rgba(255,255,255,.4); color: #fff; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em; padding: .5rem .9rem; border-radius: var(--radius); cursor: pointer; }
.lb-cap { position: absolute; bottom: 1.2rem; left: 0; right: 0; text-align: center; color: #ddd; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; }

/* --------------------------------------------------------------------------
   10. FORMS
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.05rem; }
.form .row2 { display: grid; gap: 1.05rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .form .row2 { grid-template-columns: 1fr 1fr; } }
.field label, .form > div > label {
  display: block; font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--muted);
  margin-bottom: .4rem;
}
.form input[type=text], .form input[type=email], .form input[type=tel], .form input[type=number],
.form input[type=date], .form select, .form textarea, .inp {
  width: 100%; padding: .78rem .9rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--ink);
  font-family: var(--font-body); font-size: 1rem;
}
.form textarea { min-height: 150px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.checks { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.checks label {
  display: flex; align-items: center; gap: .6rem; padding: .65rem .8rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  font-size: .9rem; cursor: pointer; text-transform: none; letter-spacing: 0;
  font-family: var(--font-body); color: var(--ink); margin: 0;
}
.checks label:hover { border-color: var(--accent); }
.checks input { accent-color: var(--accent); width: 17px; height: 17px; flex: none; }

.note {
  border-left: 3px solid var(--accent); background: var(--paper-2);
  padding: 1rem 1.15rem; border-radius: 0 var(--radius) var(--radius) 0; font-size: .93rem;
}
.status-ok  { border-left: 3px solid var(--ok);   background: #EDF2ED; padding: .85rem 1.1rem; margin-bottom: .6rem; font-size: .92rem; color: #24402D; }
.status-err { border-left: 3px solid var(--warn); background: #FAEDE9; padding: .85rem 1.1rem; margin-bottom: .6rem; font-size: .92rem; color: #6B2312; }

/* --------------------------------------------------------------------------
   11. FAQ / DETAILS
   -------------------------------------------------------------------------- */
.faq details { border-bottom: 1px solid var(--line); padding: .3rem 0; }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.05rem 2rem 1.05rem 0;
  font-weight: 700; font-size: 1.04rem; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .2rem; top: .95rem; font-family: var(--font-mono); color: var(--accent); font-size: 1.3rem; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 1.2rem; color: var(--muted); max-width: 72ch; }

/* --------------------------------------------------------------------------
   12. BIO CARDS (About)
   -------------------------------------------------------------------------- */
.bio { display: grid; gap: 1.6rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 760px) { .bio { grid-template-columns: 230px 1fr; } }
.bio-portrait {
  aspect-ratio: 1; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--paper-2);
  display: flex; align-items: center; justify-content: center;
}
.bio-portrait img { width: 100%; height: 100%; object-fit: cover; }
.bio-role { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .17em; text-transform: uppercase; color: var(--accent); margin-bottom: .35rem; }
.bio h3 { font-family: var(--font-display); font-weight: 400; font-size: 2.2rem; letter-spacing: .015em; text-transform: uppercase; margin-bottom: .5rem; }

/* --------------------------------------------------------------------------
   13. CTA BAND + FOOTER
   -------------------------------------------------------------------------- */
.cta-band { position: relative; background: var(--ink); color: var(--paper); overflow: hidden; }
.cta-band .bg { position: absolute; inset: 0; }
.cta-band .bg img { width: 100%; height: 100%; object-fit: cover; opacity: .22; filter: grayscale(.4); }
.cta-band .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 25%, rgba(23,20,15,.6)); }
.cta-band .inner { position: relative; padding: clamp(3rem, 7vw, 5.5rem) 0; }
.cta-band h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--step-4); max-width: 18ch; letter-spacing: .015em; }

.site-footer { background: var(--ink); color: var(--muted-dark); padding: clamp(2.8rem, 6vw, 4.5rem) 0 1.6rem; border-top: 1px solid var(--ink-3); }
.site-footer h4 { color: var(--paper); font-family: var(--font-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1rem; font-weight: 400; }
.site-footer a { color: var(--muted-dark); text-decoration: none; }
.site-footer a:hover { color: var(--accent-2); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: .28rem 0; font-size: .9rem; }
.foot-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.foot-brand .brand-name { color: var(--paper); }
.foot-bottom {
  margin-top: 2.6rem; padding-top: 1.3rem; border-top: 1px solid var(--ink-3);
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between;
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
}

/* Mobile sticky call bar */
.callbar { display: none; }
@media (max-width: 760px) {
  .callbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
    background: var(--ink-3);
  }
  .callbar a {
    background: var(--ink); color: var(--paper); text-decoration: none;
    padding: .85rem .5rem; text-align: center; font-weight: 700; font-size: .88rem;
  }
  .callbar a.primary { background: var(--accent); color: #fff; }
  body { padding-bottom: 52px; }
}

/* --------------------------------------------------------------------------
   14. THEME SWITCHER
   -------------------------------------------------------------------------- */
.themebar { position: fixed; right: 12px; bottom: 12px; z-index: 100; font-family: var(--font-mono); }
@media (max-width: 760px) { .themebar { bottom: 62px; } }
.themebar summary {
  list-style: none; cursor: pointer; background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink-3); border-radius: var(--radius);
  padding: .5rem .8rem; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
}
.themebar summary::-webkit-details-marker { display: none; }
.themebar .panel {
  position: absolute; right: 0; bottom: 40px; width: 190px;
  background: var(--ink); border: 1px solid var(--ink-3); border-radius: var(--radius);
  padding: .7rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem;
}
.themebar button {
  aspect-ratio: 1; border: 1px solid var(--ink-3); border-radius: 2px; cursor: pointer;
  padding: 0; overflow: hidden; position: relative;
}
.themebar button span { position: absolute; inset: 0; }
.themebar button span:nth-child(2) { left: 50%; }
.themebar .hint { grid-column: 1 / -1; color: var(--muted-dark); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; text-align: center; padding-top: .3rem; }

/* --------------------------------------------------------------------------
   15. TABLES (staff tools + service areas)
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; font-size: .92rem; background: #fff; }
table.data th, table.data td { padding: .7rem .85rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); background: var(--paper-2); }
table.data tr:last-child td { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; font-family: var(--font-mono); }

.chip-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em;
  padding: .38rem .7rem; border: 1px solid var(--line); border-radius: 100px; color: var(--muted);
}
.on-dark .chip { border-color: var(--ink-3); color: var(--muted-dark); }

/* --------------------------------------------------------------------------
   16. PRINT (quotes / invoices / receipts)
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .topbar, .site-footer, .themebar, .callbar, .no-print, .rail { display: none !important; }
  body { background: #fff; color: #000; padding: 0; font-size: 12pt; }
  .section { padding: 0; }
  .container { width: 100%; }
  a { text-decoration: none; color: #000; }
  .doc-sheet { border: 0 !important; box-shadow: none !important; padding: 0 !important; }
}

/* ==========================================================================
   17. MODERNIZATION PASS
   Additive refinements. Kept at the end so specificity is predictable.
   ========================================================================== */

/* Softer, deeper cards with a hairline accent on hover */
.card {
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: 0 auto auto 0;
  width: 100%; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
a.card:hover::before { transform: scaleX(1); }
a.card:hover { box-shadow: 0 22px 45px -28px rgba(0,0,0,.55); }

/* Buttons: subtle lift, crisper radius */
.btn { border-radius: 5px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary { box-shadow: 0 10px 24px -14px var(--accent); }

/* Hero: stronger type, cleaner gradient, animated entrance */
.hero-media img { opacity: .38; }
.hero-media::after {
  background:
    linear-gradient(100deg, var(--ink) 8%, rgba(23,20,15,.9) 42%, rgba(23,20,15,.35) 100%),
    linear-gradient(to top, var(--ink), transparent 45%);
}
.hero h1 { text-wrap: balance; }
.hero-inner > * { animation: riseIn .7s cubic-bezier(.2,.7,.3,1) both; }
.hero-inner > *:nth-child(1) { animation-delay: .04s; }
.hero-inner > *:nth-child(2) { animation-delay: .10s; }
.hero-inner > *:nth-child(3) { animation-delay: .17s; }
.hero-inner > *:nth-child(4) { animation-delay: .24s; }
.hero-inner > *:nth-child(5) { animation-delay: .31s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-inner > * { animation: none; } }

.hero-stat b { transition: color .2s ease; }
.hero-stat:hover b { color: var(--accent); }

/* Headings: balanced wrapping everywhere */
h1, h2, h3 { text-wrap: balance; }
.lede, p { text-wrap: pretty; }

/* Section headers get a quiet accent bar */
.section > .container > .tick { position: relative; }

/* Gallery: rounder, nicer hover, caption always legible */
.shot { border-radius: 6px; }
.shot::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  pointer-events: none; border-radius: inherit;
}
.shot:hover { border-color: var(--accent); }

/* Spec lists: tighter, with hover feedback */
.spec-list li { transition: padding-left .18s ease, color .18s ease; }
.spec-list li:hover { padding-left: .3rem; color: var(--ink); }
.on-dark .spec-list li:hover { color: var(--paper); }

/* FAQ: card-like rows */
.faq details { transition: background .18s ease; padding-inline: .6rem; border-radius: 4px; }
.faq details[open] { background: var(--paper-2); }
.on-dark .faq details[open] { background: var(--ink-2); }

/* Forms: modern focus ring */
.form input, .form select, .form textarea, .inp {
  border-radius: 5px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.form input:focus, .form select:focus, .form textarea:focus, .inp:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  outline: none;
}
.checks label { border-radius: 5px; transition: border-color .16s ease, background .16s ease; }
.checks label:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, #fff); }

/* Stat / figure band used on the new content pages */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.figure { background: var(--paper); padding: 1.4rem 1.2rem; }
.on-dark .figures { background: var(--ink-3); border-color: var(--ink-3); }
.on-dark .figure { background: var(--ink-2); }
.figure b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 2.4rem; line-height: 1; letter-spacing: .02em; color: var(--accent); }
.figure span { display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: .35rem; }
.on-dark .figure span { color: var(--muted-dark); }

/* Two-column prose blocks for the long-form content pages */
.prose-cols { columns: 2; column-gap: 2.4rem; }
@media (max-width: 760px) { .prose-cols { columns: 1; } }
.prose-cols p { break-inside: avoid; }

/* Callout used throughout the new carpentry content */
.callout {
  border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 0 6px 6px 0; padding: 1.2rem 1.3rem; background: var(--paper);
}
.on-dark .callout { background: var(--ink-2); border-color: var(--ink-3); border-left-color: var(--accent); }
.callout h4 { margin: 0 0 .4rem; font-size: 1rem; }
.callout p { margin: 0; color: var(--muted); font-size: .93rem; }
.on-dark .callout p { color: var(--muted-dark); }

/* Comparison table for materials page */
table.data tbody tr { transition: background .14s ease; }
table.data tbody tr:hover { background: var(--paper-2); }

/* Anchor offset so in-page links clear the sticky header */
[id] { scroll-margin-top: 110px; }

/* ---- Owner cards with portraits (homepage) ------------------------------- */
.owner-card { padding-top: 1.5rem; }
.owner-photo {
  width: 96px; height: 96px; border-radius: 50%;
  overflow: hidden; border: 2px solid var(--accent);
  margin-bottom: 1rem; flex: none; background: var(--paper-2);
}
.owner-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.owner-card:hover .owner-photo img { transform: scale(1.06); }
.owner-name {
  font-family: var(--font-display); font-weight: 400; font-size: 2.1rem;
  text-transform: uppercase; letter-spacing: .015em; margin-bottom: .5rem;
}

/* Bio portraits on the About page: give them a warmer frame */
.bio-portrait { box-shadow: 0 18px 40px -26px rgba(0,0,0,.55); }
.bio-portrait img { transition: transform .5s ease; }
.bio:hover .bio-portrait img { transform: scale(1.03); }

/* ==========================================================================
   18. LIGHT-FIRST REDESIGN LAYER
   The header, hero and cards were built for a dark ground. This layer moves
   them to the bone paper ground and modernises spacing, depth and motion.
   ========================================================================== */

/* ---- Header: bone, not black -------------------------------------------- */
.site-header {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(4px)) { .site-header { background: var(--paper); } }
.site-header.scrolled {
  box-shadow: 0 8px 30px -22px rgba(18,33,28,.55);
  border-bottom-color: var(--line);
}
.brand { color: var(--ink); }
.brand-name { color: var(--ink); }
.brand-tag { color: var(--accent); }
.nav-link { color: var(--ink); }
.nav-link:hover, .nav-link.active { color: var(--accent); }
.nav-phone { color: var(--accent); font-weight: 600; }
.nav-toggle { border-color: var(--line); color: var(--ink); }

/* Mega menu becomes a light floating card */
.megamenu {
  background: var(--paper);
  border-color: var(--line);
  box-shadow: 0 34px 70px -34px rgba(18,33,28,.42);
  border-radius: 10px;
  padding: 1rem;
}
.mega-card { color: var(--ink); border-radius: 8px; }
.mega-card:hover { background: var(--paper-2); border-color: var(--accent); }
.mega-blurb { color: var(--muted); }
.mega-all { background: color-mix(in srgb, var(--accent) 8%, transparent); }

@media (max-width: 1080px) {
  .nav { background: var(--paper); border-top-color: var(--line); }
  .nav-link { border-bottom-color: var(--line); }
  .mega-card { border-bottom-color: var(--line); }
  .nav-phone { border-color: var(--line); }
}

/* Topbar stays dark as a thin contrast band */
.topbar { background: var(--ink); border-bottom: 0; }
.topbar a, .topbar .badge { color: var(--accent-2); }
.topbar .badge { color: var(--paper); }

/* ---- Hero: green-tinted overlay ----------------------------------------- */
.hero { background: var(--ink); }
.hero-media img { opacity: .3; filter: grayscale(.5) contrast(1.06); }
.hero-media::after {
  background:
    linear-gradient(100deg, var(--ink) 6%, color-mix(in srgb, var(--ink) 88%, transparent) 45%, color-mix(in srgb, var(--ink) 40%, transparent) 100%),
    linear-gradient(to top, var(--ink), transparent 50%);
}
.hero h1 .amber { color: var(--accent-2); }
.hero-stat b { color: var(--accent-2); }

/* ---- Cards: lighter, rounder, softer depth ------------------------------ */
.card {
  border-radius: 10px;
  background: var(--paper);
  border-color: var(--line);
}
.on-dark .card { background: var(--ink-2); border-color: var(--ink-3); }
a.card:hover { box-shadow: 0 26px 50px -32px rgba(18,33,28,.4); }
.card .tag { color: var(--accent); }

/* ---- Buttons ------------------------------------------------------------ */
.btn { border-radius: 7px; font-weight: 700; }
.btn.primary { background: var(--accent); border-color: var(--accent); }
.btn.primary:hover { background: var(--deep); border-color: var(--deep); }
.btn.primary { box-shadow: 0 12px 26px -16px var(--accent); }

/* ---- Rail: recolour the tick marks to the new accent -------------------- */
.rail {
  background-image:
    repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(to right, var(--accent) 0 1px, transparent 1px 100px);
}

/* ---- Forms -------------------------------------------------------------- */
.form input, .form select, .form textarea, .inp { border-radius: 7px; }
.checks label { border-radius: 7px; }

/* ---- Gallery ------------------------------------------------------------ */
.shot { border-radius: 10px; }

/* ---- Figures & callouts ------------------------------------------------- */
.figures { border-radius: 10px; }
.figure b { color: var(--accent); }
.callout { border-radius: 0 10px 10px 0; }

/* ---- Tables ------------------------------------------------------------- */
.table-wrap { border-radius: 10px; }
table.data th { background: var(--paper-2); }

/* ---- More air between sections ------------------------------------------ */
.section { padding: clamp(4rem, 9vw, 8rem) 0; }
.section.tight { padding: clamp(2.6rem, 5vw, 4.5rem) 0; }

/* ---- Owner + bio portraits get the green ring --------------------------- */
.owner-photo { border-color: var(--accent); }
.bio-portrait { border-radius: 10px; }

/* ---- Page head: lighter treatment --------------------------------------- */
.pagehead { background: var(--ink); }
.pagehead p { color: var(--paper-2); }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { background: var(--ink); border-top: 0; }

/* ---- Theme bar ---------------------------------------------------------- */
.themebar summary { background: var(--ink); color: var(--paper); border-color: var(--ink-3); }

/* ---- Mobile call bar ---------------------------------------------------- */
@media (max-width: 760px) {
  .callbar a.primary { background: var(--accent); }
}

/* ---- Focus ring --------------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ==========================================================================
   19. CRISP LAYER
   Earth palettes go muddy if execution is soft. Comfort comes from the
   colour; crispness has to come from structure — hairlines, generous white
   space, tight type, restrained shadow. Warm neutrals, never grey.
   ========================================================================== */

/* Sharper corners than the previous round: crisp, not bubbly */
.card, .megamenu, .shot, .table-wrap, .figures, .callout { border-radius: 4px; }
.btn { border-radius: 4px; }
.form input, .form select, .form textarea, .inp, .checks label { border-radius: 4px; }
.owner-photo { border-radius: 50%; }
.bio-portrait { border-radius: 4px; }

/* Shadows: barely there, warm-tinted rather than grey */
a.card:hover { box-shadow: 0 14px 30px -22px rgba(43,36,32,.35); }
.megamenu { box-shadow: 0 26px 56px -30px rgba(43,36,32,.3); }
.site-header.scrolled { box-shadow: 0 1px 0 var(--line), 0 10px 24px -22px rgba(43,36,32,.3); }
.btn.primary { box-shadow: none; }
.btn.primary:hover { box-shadow: 0 8px 18px -12px var(--accent); }
.bio-portrait { box-shadow: none; border: 1px solid var(--line); }

/* Hairline discipline — crisp edges everywhere */
.card { border: 1px solid var(--line); }
.table-wrap { border: 1px solid var(--line); }
table.data th {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

/* Tighter, more confident type */
h2 { letter-spacing: -.02em; }
h3 { letter-spacing: -.012em; }
.lede { font-weight: 450; color: var(--deep); }
.tick { letter-spacing: .2em; font-weight: 700; }

/* More air: the single biggest contributor to "clean" */
.section { padding: clamp(4.5rem, 10vw, 9rem) 0; }
.section.tight { padding: clamp(2.8rem, 5vw, 4.5rem) 0; }
.grid { gap: clamp(1.3rem, 2.8vw, 2.2rem); }
.card { padding: 1.7rem 1.7rem 1.8rem; }

/* Hero: warm, comforting, still high contrast */
.hero-media img { opacity: .26; filter: grayscale(.35) sepia(.12) contrast(1.04); }
.hero-media::after {
  background:
    linear-gradient(102deg, var(--ink) 4%, color-mix(in srgb, var(--ink) 90%, transparent) 44%, color-mix(in srgb, var(--ink) 45%, transparent) 100%),
    linear-gradient(to top, var(--ink), transparent 52%);
}

/* Rail reads as a drawn measure, not a texture */
.rail { opacity: .7; height: 22px; }

/* Selection + scrollbar picked up the warm tone */
::selection { background: var(--accent); color: #fff; }

/* Links inside prose get a warm underline rather than a colour-only cue */
.section p a:not(.btn):not(.more) {
  color: var(--deep);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.section p a:not(.btn):not(.more):hover { color: var(--accent); }

/* ==========================================================================
   20. BRAND PALETTE BINDING
   The client specifies charcoal for TEXT and deep forest for the BRAND.
   They are different colours, so body copy binds to --text while dark
   bands, header, footer and hero bind to --ink (= --brand).
   ========================================================================== */
body { color: var(--text); }
h1, h2, h3, h4 { color: var(--text); }
.lede { color: var(--brand); }
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--paper); }
.on-dark .lede { color: var(--paper-2); }
.pagehead h1, .hero h1 { color: var(--paper); }

/* Buttons: outline uses brand, solid uses cedar */
.btn { border-color: var(--brand); color: var(--brand); }
.btn:hover { background: var(--brand); color: var(--paper); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--deep); border-color: var(--deep); }

/* Muted sage as the secondary accent: rules, fills and large marks only —
   it is 3.37:1 on cream, so never small body copy. */
.rail {
  background-image:
    repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(to right, var(--sage) 0 1px, transparent 1px 100px);
}
.figures { border-color: var(--line); }
.figure b { color: var(--brand); }
.card .tag { color: var(--accent); }
.tick { color: var(--accent); }
.on-dark .tick { color: var(--accent-2); }
.spec-list li::before { color: var(--sage); }
.owner-photo { border-color: var(--accent); }
.status-ok { border-left-color: var(--sage); background: #EAEFE9; color: #2E3D32; }
.callout { border-left-color: var(--accent); }
.brand-tag { color: var(--accent-2); }
.site-header .brand-tag { color: var(--accent); }
.hero h1 .amber { color: var(--accent-2); }
.hero-stat b { color: var(--accent-2); }
::selection { background: var(--accent); color: #fff; }

/* Header sits on cream; topbar and footer carry the forest brand */
.site-header { background: color-mix(in srgb, var(--paper) 90%, transparent); }
@supports not (backdrop-filter: blur(4px)) { .site-header { background: var(--paper); } }
.brand, .brand-name, .nav-link { color: var(--text); }
.nav-link:hover, .nav-link.active { color: var(--accent); }
.topbar { background: var(--brand); }
.site-footer { background: var(--brand); }
.megamenu { background: var(--paper); border-color: var(--line); }
.mega-card { color: var(--text); }
.mega-card:hover { background: var(--paper-2); border-color: var(--accent); }
@media (max-width: 1080px) { .nav { background: var(--paper); } }

/* ==========================================================================
   21. TECHNICAL ILLUSTRATIONS
   Hand-drawn SVG cross-sections. All colours come from the brand tokens so
   the drawings re-tint with the active theme.
   ========================================================================== */
.ill {
  margin: 2rem 0 0;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.2rem 1.2rem .3rem;
  overflow: hidden;
}
.ill svg { width: 100%; height: auto; display: block; }
.ill figcaption {
  font-size: .9rem;
  color: var(--muted);
  padding: .9rem .2rem 1rem;
  border-top: 1px solid var(--line);
  margin-top: .9rem;
  line-height: 1.55;
}
.ill figcaption b { color: var(--text); }
.on-dark .ill { background: var(--ink-2); border-color: var(--ink-3); }
.on-dark .ill figcaption { color: var(--muted-dark); border-top-color: var(--ink-3); }
.on-dark .ill figcaption b { color: var(--paper); }

/* Materials ---------------------------------------------------------------- */
.ill .lumber      { fill: var(--accent); opacity: .85; }
.ill .lumber2     { fill: var(--deep); opacity: .8; }
.ill .beam        { fill: var(--deep); }
.ill .deckboard   { fill: var(--sage); }
.ill .tread       { fill: var(--sage); }
.ill .riser       { fill: var(--accent); opacity: .7; }
.ill .stringer    { fill: none; stroke: var(--brand); stroke-width: 4; stroke-linejoin: round; }
.ill .house       { fill: var(--brand); opacity: .9; }
.ill .siding line { stroke: var(--paper); stroke-width: 1; opacity: .25; }
.ill .concrete    { fill: var(--muted); opacity: .55; }
.ill .slab        { fill: var(--muted); opacity: .45; }
.ill .ground      { fill: var(--sage); opacity: .18; }
.ill .grade       { stroke: var(--sage); stroke-width: 2.5; fill: none; }
.ill .frost       { stroke: var(--accent); stroke-width: 2; opacity: .8; }
.ill .flash       { fill: var(--brand); }
.ill .foam        { fill: var(--sage); opacity: .5; }
.ill .board       { fill: var(--line); }
.ill .membrane    { fill: var(--accent); }
.ill .tile        { fill: var(--brand); opacity: .75; }
.ill .drain       { fill: var(--brand); }
.ill .screw       { stroke: var(--brand); stroke-width: 3; }
.ill .tenon       { fill: var(--sage); }
.ill .carve       { fill: var(--brand); }
.ill .finishcoat  { fill: var(--sage); }
.ill .tent        { fill: var(--paper); stroke: var(--brand); stroke-width: 3; }
.ill .strip0      { fill: var(--accent); opacity: .8; }
.ill .strip1      { fill: var(--deep); opacity: .75; }
.ill .strip2      { fill: var(--sage); opacity: .8; }
.ill .grain       { fill: none; stroke: var(--text); stroke-width: 1; opacity: .3; }

/* Annotation --------------------------------------------------------------- */
.ill .note {
  font-family: var(--font-mono);
  font-size: 13px;
  fill: var(--text);
}
.on-dark .ill .note { fill: var(--paper-2); }
.ill .lead   { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.ill .dim line   { stroke: var(--accent); stroke-width: 1.5; }
.ill .dim circle { fill: var(--accent); }
.ill .dim text   { font-family: var(--font-mono); font-size: 13px; font-weight: 700; fill: var(--accent); }

@media (max-width: 640px) {
  .ill .note, .ill .dim text { font-size: 17px; }
}


/* ==========================================================================
   22. MOBILE NAV — FLAT, NOT A DROPDOWN
   The dropdown depended on JS toggling a class. On a phone that is a failure
   point for no benefit: there is no hover, and vertical space is cheap. The
   service links are simply always visible inside the drawer.
   ========================================================================== */
@media (max-width: 1080px) {
  /* the trigger button is pointless on mobile — the list is already open */
  .nav-trigger { display: none !important; }

  .megamenu {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    width: auto !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  .megamenu-inner { display: block !important; }

  .nav-item.has-menu::before {
    content: "What We Build";
    display: block;
    font-family: var(--font-mono);
    font-size: .64rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
    padding: 1.1rem .2rem .5rem;
    border-bottom: 1px solid var(--line);
  }
  .mega-card {
    display: block;
    padding: .95rem .2rem .95rem 1rem;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: none !important;
  }
  .mega-card b { font-size: 1rem; }
  .mega-blurb { display: none; }          /* keep the drawer scannable */
  .mega-tag { display: none; }
  .mega-card::after { content: " →"; color: var(--accent); }

  .nav { padding-bottom: 4rem; }
}