/* ==========================================================================
   ProjectCalc — styles
   --------------------------------------------------------------------------
   Editorial utility system: warm paper ground, dark charcoal ink, one muted
   olive accent, hairline rules instead of heavy shadows, serif display type
   over a steady sans for controls and body copy.

   Structure:
     1. Tokens
     2. Base & typography
     3. Layout utilities
     4. Header / navigation
     5. Buttons, links, badges
     6. Hero & section heads
     7. Cards (calculator, guide, category)
     8. Calculator workspace (form + results)
     9. Long-form prose & article furniture
    10. Footer
    11. Responsive
    12. Print
   ========================================================================== */

/* ---------- 1. Tokens ---------- */

:root {
  /* Warm paper ground */
  --paper: #f8f4ec;
  --paper-2: #f2ecdf;
  --surface: #fffdf8;
  --surface-2: #fbf7ee;

  /* Ink */
  --ink: #22201a;
  --ink-2: #3b382f;
  --muted: #6b6558;
  --muted-2: #857e6e;

  /* Warm hairlines */
  --line: #e4ddce;
  --line-2: #d2c8b5;

  /* Accent — muted olive */
  --accent: #4d6136;
  --accent-dark: #374828;
  --accent-soft: #edf0e3;
  --accent-border: #cbd5b8;

  /* Secondary accent — clay, used sparingly for labels */
  --clay: #9a4f2b;
  --clay-soft: #f8ece3;

  /* Status */
  --success: #2c6644;
  --success-bg: #e9f1ea;
  --success-border: #bcd4c2;
  --warn-bg: #fbf3e2;
  --warn-border: #e6d3a3;
  --warn-ink: #76560f;
  --error: #9a382c;
  --error-bg: #fbeeeb;
  --error-border: #e5b7ae;

  /* Elevation — barely there on purpose */
  --shadow-sm: 0 1px 1px rgba(34, 32, 26, 0.03);
  --shadow: 0 1px 2px rgba(34, 32, 26, 0.04), 0 6px 18px rgba(34, 32, 26, 0.035);

  /* Radii — modest rounding only */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;

  /* Type */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Iowan Old Style", Georgia, "Palatino Linotype", "Times New Roman", serif;

  /* Measure */
  --container: 1140px;
  --measure: 700px;
}

/* ---------- 2. Base & typography ---------- */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.15rem, 4.6vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0 0 20px;
}

h2 {
  font-size: clamp(1.5rem, 2.7vw, 2.05rem);
  line-height: 1.18;
  letter-spacing: -0.014em;
  margin: 0 0 12px;
}

h3 {
  font-size: 1.18rem;
  line-height: 1.3;
  letter-spacing: -0.006em;
  margin: 0 0 8px;
}

p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-dark); text-underline-offset: 3px; }
a:hover { color: var(--accent); }

img, svg { max-width: 100%; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 40px 0;
}

.hidden { display: none !important; }

/* Available to screen readers, not to the eye. Used for the workspace
   heading: the page H1 above already names the calculator, so repeating it
   as a second visible title adds noise without adding information. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* One visible focus treatment for everything interactive. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent-dark);
  color: #fff;
  padding: 10px 18px;
  z-index: 200;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
  margin: 0 0 12px;
}
.eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.eyebrow a:hover { color: var(--accent-dark); }
.eyebrow--muted { color: var(--muted); }

/* ---------- 3. Layout utilities ---------- */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}
.container--narrow { max-width: 820px; }

.section { padding: 76px 0; }
.section--tight { padding: 52px 0; }
.section-alt {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-head { margin-bottom: 38px; max-width: 720px; }
.section-head h2 { margin-bottom: 10px; }
.section-sub {
  color: var(--muted);
  font-size: 1.02rem;
  max-width: 62ch;
  margin: 0;
}

.rule {
  border: 0;
  border-top: 1px solid var(--line-2);
  margin: 0 0 24px;
  width: 64px;
}

.stack > * + * { margin-top: 16px; }

/* ---------- 4. Header / navigation ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 68px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.26rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.logo:hover { color: var(--accent-dark); }
.logo-mark { color: var(--accent); flex-shrink: 0; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  flex: 1;
}
.site-nav a {
  position: relative;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.935rem;
  font-weight: 500;
  padding: 22px 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.site-nav a:hover,
.site-nav a:focus-visible { color: var(--ink); }
.site-nav a.active {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.855rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--accent-dark);
  border: 1px solid var(--accent-border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  min-height: 38px;
  white-space: nowrap;
}
.header-cta:hover { background: var(--accent-soft); color: var(--accent-dark); }
.header-cta .arrow { font-size: 1em; line-height: 1; }

.unit-toggle {
  display: inline-flex;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}
.unit-btn {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.815rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  padding: 7px 13px;
  min-height: 38px;
}
.unit-btn + .unit-btn { border-left: 1px solid var(--line); }
.unit-btn:hover { color: var(--ink); background: var(--surface-2); }
.unit-btn.active { background: var(--accent); color: #fff; }
.unit-btn.active:hover { background: var(--accent-dark); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 9px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 5. Buttons, links, badges ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.945rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  border-radius: var(--radius-sm);
  padding: 13px 24px;
  min-height: 46px;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
}
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn-outline {
  background: var(--surface);
  color: var(--accent-dark);
  border: 1px solid var(--line-2);
}
.btn-outline:hover { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-dark); }
.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line-2);
}
.btn-ghost:hover { color: var(--ink); background: var(--surface-2); }
.btn-sm {
  padding: 9px 14px;
  min-height: 40px;
  font-size: 0.86rem;
}
.btn:disabled,
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent-dark);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.link-arrow:hover { border-bottom-color: var(--accent); color: var(--accent-dark); }
.link-arrow .arrow { transition: transform 0.15s ease; }
.link-arrow:hover .arrow { transform: translateX(2px); }

.card-link {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent-dark);
  text-decoration: none;
}
.card-link:hover { text-decoration: underline; }

.tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 3px 9px;
  border-radius: var(--radius-xs);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn-ink);
  vertical-align: middle;
}
.tag--category {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--muted);
}
.tag--accent {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent-dark);
}

/* ---------- 6. Hero & page heads ---------- */

.hero {
  padding: 92px 0 64px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.hero .container { max-width: 1140px; }
.hero h1 { max-width: 17ch; }
.hero-text {
  max-width: 56ch;
  font-size: 1.16rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 10px;
}
.hero-sub {
  max-width: 58ch;
  color: var(--muted);
  font-size: 1rem;
  margin-bottom: 30px;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}
.hero-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
  margin: 26px 0 0;
  font-size: 0.83rem;
  color: var(--muted-2);
  letter-spacing: 0.01em;
}
/* Each fact stays on one line, and the gap lets the row wrap cleanly. */
.hero-note span { white-space: nowrap; }

/* Compact category jump bar — the fastest route to a calculator. */
.hero-cats {
  margin: 40px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  align-items: baseline;
}
.hero-cats .hero-cats-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0;
}
.hero-cats a {
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 1px;
}
.hero-cats a:hover { color: var(--accent-dark); border-bottom-color: var(--accent); }

.page-hero {
  padding: 52px 0 40px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.page-hero h1 {
  font-size: clamp(1.85rem, 3.6vw, 2.6rem);
  margin-bottom: 14px;
  max-width: 22ch;
}
.page-hero p {
  max-width: 68ch;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.62;
  margin: 0;
}
.page-hero .tag { margin-left: 10px; vertical-align: middle; }
.page-hero--article { padding: 44px 0 34px; }
.page-hero--article h1 {
  font-size: clamp(1.75rem, 3.2vw, 2.35rem);
  max-width: 28ch;
  margin-bottom: 0;
}

/* ---------- 7. Cards ---------- */

/* Featured calculator groups (homepage + directory) */
.calc-group {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 28px 48px;
  padding: 40px 0 0;
  border-top: 1px solid var(--line);
}
.calc-group + .calc-group { margin-top: 44px; }
.group-head { min-width: 0; }
.group-head .eyebrow { margin-bottom: 8px; color: var(--muted-2); }
.group-title {
  font-size: 1.24rem;
  line-height: 1.28;
  margin: 0 0 8px;
}
.group-note {
  font-size: 0.89rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 14px;
}
.group-body { min-width: 0; }

.calc-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.calc-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.calc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 22px 20px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.calc-card:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow);
}
.calc-card:focus-within {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.calc-card .tag {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 0.62rem;
  padding: 2px 7px;
}
.calc-card h3 {
  font-size: 1.26rem;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.calc-card h3 a { color: inherit; text-decoration: none; }
.calc-card h3 a:hover { color: var(--accent-dark); }
.calc-card p {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
  flex: 1;
  margin-bottom: 18px;
}
.calc-card .card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-border);
  padding-bottom: 2px;
}
.calc-card .card-cta:hover { border-bottom-color: var(--accent); }
.calc-card .card-cta .arrow { transition: transform 0.15s ease; }
.calc-card:hover .card-cta .arrow { transform: translateX(2px); }

.card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 16px;
  flex-shrink: 0;
}
.card-icon svg { width: 24px; height: 24px; }

/* Guide & category cards */
.mini-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 4px;
}
.mini-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.guide-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 22px 20px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.guide-card:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.guide-card .eyebrow { margin-bottom: 10px; font-size: 0.66rem; }
.guide-card h3 {
  font-size: 1.1rem;
  line-height: 1.34;
  margin: 0 0 8px;
  letter-spacing: -0.006em;
}
.guide-card h3 a { color: inherit; text-decoration: none; }
.guide-card h3 a:hover { color: var(--accent-dark); }
.guide-card p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
  flex: 1;
  margin-bottom: 16px;
}
.guide-card .card-link {
  align-self: flex-start;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.guide-card .card-link:hover { text-decoration: none; border-bottom-color: var(--accent); }

/* Category index rows */
.cat-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
  border-top: 1px solid var(--line);
}
.cat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.cat-row .cat-name {
  font-family: var(--font-heading);
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.008em;
}
.cat-row .cat-meta {
  display: block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--muted);
  margin-top: 3px;
  letter-spacing: 0;
}
.cat-row .arrow { color: var(--muted-2); font-size: 1rem; flex-shrink: 0; }
.cat-row:hover .cat-name { color: var(--accent-dark); }
.cat-row:hover .arrow { color: var(--accent); }

/* Steps — editorial numerals, no card chrome */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 36px;
}
.step { padding-top: 20px; border-top: 1px solid var(--line-2); }
.step-num {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--clay);
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 1.1rem; margin-bottom: 6px; }
.step p { color: var(--muted); font-size: 0.93rem; margin: 0; }

/* Benefits — quiet two-column list */
.benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
}
.benefit {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.benefit h3 {
  font-size: 1.05rem;
  margin: 0 0 6px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.benefit p { color: var(--muted); font-size: 0.92rem; margin: 0; max-width: 46ch; }

.planned-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.planned-list span {
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 0.85rem;
  color: var(--muted);
  background: transparent;
}

/* ---------- 8. Calculator workspace ---------- */

/* The workspace sits directly under the page hero, so it needs less air
   above than a standalone section. */
#workspace { padding-top: 44px; }

.workspace-head {
  margin-bottom: 26px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.workspace-head h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  margin-bottom: 6px;
}
.workspace-head p {
  color: var(--muted);
  font-size: 0.865rem;
  margin: 0;
  max-width: 78ch;
}
.estimate-tag { font-style: normal; }

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(320px, 1fr);
  gap: 32px;
  align-items: start;
}
.forms-col { min-width: 0; }

.calc-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 28px 26px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}

/* Section headers inside the form: small caps with a hairline that runs out */
.calc-form h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 0.735rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ink-2);
  margin: 30px 0 14px;
}
.calc-form h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.calc-form h3:first-child { margin-top: 0; }
.calc-form h3 .optional {
  color: var(--muted-2);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8rem;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 16px;
  margin-bottom: 4px;
}
.field { min-width: 0; }
.field label {
  display: block;
  font-size: 0.855rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 6px;
  letter-spacing: 0.002em;
}

.input-wrap {
  display: flex;
  align-items: stretch;
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.input-wrap:hover { border-color: var(--muted-2); }
.input-wrap:focus-within {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(77, 97, 54, 0.14);
}
.input-wrap input,
.input-wrap select {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.975rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  padding: 11px 12px;
  width: 100%;
  min-width: 0;
  min-height: 46px;
}
/* Selects keep a visible dropdown chevron so they never read as text inputs. */
.input-wrap select {
  padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b6558' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  cursor: pointer;
}
.input-wrap input:focus,
.input-wrap select:focus { outline: none; }
.input-wrap input::placeholder { color: var(--muted-2); }
.input-wrap input::-webkit-outer-spin-button,
.input-wrap input::-webkit-inner-spin-button { margin-left: 6px; }
.input-wrap .unit {
  display: flex;
  align-items: center;
  padding: 0 11px;
  font-size: 0.785rem;
  font-weight: 500;
  color: var(--muted);
  background: var(--paper-2);
  border-left: 1px solid var(--line);
  white-space: nowrap;
}
.input-wrap .prefix {
  display: flex;
  align-items: center;
  padding: 0 2px 0 12px;
  color: var(--muted);
  font-size: 0.92rem;
}
.input-wrap .prefix + input { padding-left: 4px; }
.input-split select {
  width: auto;
  flex-shrink: 0;
  border-left: 1px solid var(--line);
  background: var(--paper-2);
  font-size: 0.84rem;
  cursor: pointer;
}

/* Invalid state: colour + a solid left marker, never colour alone */
.input-wrap.invalid,
input.invalid {
  border-color: var(--error);
  background: var(--error-bg);
  box-shadow: inset 3px 0 0 var(--error);
}
.input-wrap.invalid:focus-within { box-shadow: inset 3px 0 0 var(--error), 0 0 0 3px rgba(154, 56, 44, 0.14); }

.field-note, .room-count {
  font-size: 0.83rem;
  color: var(--muted);
  margin: 8px 0 0;
}
.field-hint {
  display: block;
  font-size: 0.795rem;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 6px;
}
.hint { font-size: 0.85rem; color: var(--muted); margin: 8px 0 12px; line-height: 1.55; }
.hint-inline { color: var(--muted); font-weight: 400; font-size: 0.86em; }

.field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.79rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--error);
  margin-top: 6px;
}
.field-error::before {
  content: "!";
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--error);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
}

.warning-note {
  font-size: 0.87rem;
  line-height: 1.58;
  color: var(--warn-ink);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-left: 3px solid var(--warn-border);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  margin-top: 22px;
}

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 4px;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  line-height: 1.5;
}
.checkbox-field input[type="checkbox"] {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

/* Toggles */
.mode-toggle {
  display: inline-flex;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--surface);
}
.mode-btn {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  padding: 10px 16px;
  min-height: 44px;
}
.mode-btn + .mode-btn { border-left: 1px solid var(--line); }
.mode-btn:hover { color: var(--ink); background: var(--surface-2); }
.mode-btn.active { background: var(--accent); color: #fff; }
.mode-btn.active:hover { background: var(--accent-dark); }

/* Dynamic rows and room cards */
.row-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.row-item {
  display: grid;
  grid-template-columns: minmax(110px, 1.2fr) 1fr 1fr 0.7fr auto;
  gap: 10px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.row-item .field label { font-size: 0.765rem; color: var(--muted); }
.row-item.openings-row { grid-template-columns: minmax(100px, 1fr) 1fr 1fr 0.6fr auto; }
.remove-row {
  appearance: none;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--muted);
  border-radius: var(--radius-sm);
  width: 42px;
  height: 46px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}
.remove-row:hover { color: var(--error); border-color: var(--error-border); background: var(--error-bg); }

.room-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.room-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 14px;
}
.room-card-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  margin-bottom: 10px;
}
.room-name {
  font: inherit;
  font-size: 0.93rem;
  font-weight: 600;
  padding: 10px 12px;
  min-height: 46px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  min-width: 0;
}
.room-name:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(77, 97, 54, 0.14);
}
.room-card select { min-height: 46px; min-width: 112px; }
.room-card-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.room-preview {
  font-size: 0.83rem;
  color: var(--muted);
  margin: 10px 0 0;
  font-variant-numeric: tabular-nums;
}
.room-preview strong { color: var(--accent-dark); }
.room-summary {
  font-size: 0.89rem;
  color: var(--muted);
  margin-top: 10px;
  font-variant-numeric: tabular-nums;
}
.room-summary strong { color: var(--accent-dark); }

.room-row { display: flex; gap: 10px; margin-bottom: 10px; }
.room-row .input-wrap { flex: 1; }
.room-row .remove-room {
  appearance: none;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--muted);
  border-radius: var(--radius-sm);
  width: 46px;
  cursor: pointer;
  font-size: 1.1rem;
}
.room-row .remove-room:hover { color: var(--error); border-color: var(--error-border); }

#f-add-room { margin-top: 2px; }

.formula-box {
  margin-top: 26px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.formula-box summary {
  display: inline-block;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent-dark);
  padding: 7px 0;
  list-style-position: outside;
}
.formula-body {
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--muted);
  padding-top: 10px;
}
.formula-body p { margin-bottom: 8px; }

/* ---------- Results panel ---------- */

.results-panel {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 24px 24px 22px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.results-panel h3 {
  font-size: 1.34rem;
  letter-spacing: -0.01em;
  margin: 0 0 3px;
}
.results-sub {
  color: var(--muted);
  font-size: 0.815rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.result-rows { display: flex; flex-direction: column; }
.result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.905rem;
  line-height: 1.45;
}
.result-row:last-child { border-bottom: 0; }
.result-row .r-label { color: var(--muted); min-width: 0; }
.result-row .r-value {
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.result-row .r-sub {
  display: block;
  font-size: 0.755rem;
  color: var(--muted-2);
  font-weight: 400;
  letter-spacing: 0.01em;
  margin-top: 2px;
}

/* The answer itself: label and note stack above a large, left-aligned number
   so the quantity reads as the conclusion of the panel. */
.result-row.highlight {
  display: block;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  padding: 16px;
  margin-top: 14px;
}
.result-row.highlight .r-label {
  display: block;
  color: var(--accent-dark);
  font-weight: 700;
  font-size: 0.83rem;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.result-row.highlight .r-value {
  display: block;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-dark);
}
.result-row.highlight .r-sub { margin-top: 7px; }
.result-row.cost .r-value { font-size: 1.22rem; font-family: var(--font-body); font-weight: 700; }
.result-row.highlight.cost .r-value { font-family: var(--font-heading); font-size: 1.55rem; }

.result-note {
  font-size: 0.805rem;
  line-height: 1.55;
  color: var(--warn-ink);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 14px 0 0;
}
.result-error {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--error);
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-left: 3px solid var(--error);
  border-radius: var(--radius-sm);
  padding: 14px;
}

.results-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.results-actions .btn { width: 100%; }
.results-actions #btn-copy { grid-column: 1 / -1; }
.results-disclaimer {
  font-size: 0.755rem;
  line-height: 1.55;
  color: var(--muted-2);
  margin: 14px 0 0;
}

/* Shopping list */
.shopping-list {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
}
.shopping-list h4 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.shopping-list ul { list-style: none; margin: 0; padding: 0; }
.shopping-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.865rem;
  line-height: 1.45;
}
.shopping-list .sl-label { color: var(--muted); min-width: 0; }
.shopping-list .sl-value {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.shopping-list li.buy {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  margin: 10px 0;
}
.shopping-list li.buy .sl-label { color: var(--accent-dark); font-weight: 700; }
.shopping-list li.buy .sl-value { font-size: 1.05rem; color: var(--accent-dark); }
.shopping-list li.total {
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  margin: 10px 0;
}
.shopping-list li.total .sl-label { color: var(--ink-2); font-weight: 600; }
.shopping-list li.total .sl-value { font-family: var(--font-heading); font-size: 1.12rem; color: var(--ink); }
.sl-note {
  font-size: 0.79rem;
  line-height: 1.5;
  color: var(--warn-ink);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  margin: 10px 0 0;
}

#btn-copy:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- 9. Long-form prose & article furniture ---------- */

.prose {
  max-width: var(--measure);
  font-size: 1.055rem;
  line-height: 1.75;
  color: var(--ink-2);
}
.prose > p { margin: 0 0 1.15em; }
.prose .lead {
  font-size: 1.19rem;
  line-height: 1.62;
  color: var(--ink);
  margin-bottom: 1.4em;
}
.prose h2 {
  font-size: clamp(1.35rem, 2.3vw, 1.65rem);
  line-height: 1.25;
  margin: 2.4em 0 0.6em;
  padding-top: 1.1em;
  border-top: 1px solid var(--line);
  letter-spacing: -0.012em;
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 {
  font-size: 1.16rem;
  margin: 1.9em 0 0.45em;
  color: var(--ink);
}
.prose p + h3 { margin-top: 1.7em; }
.prose ul, .prose ol {
  margin: 0 0 1.15em;
  padding-left: 1.3em;
  color: var(--ink-2);
}
.prose li { margin-bottom: 0.5em; padding-left: 0.15em; }
.prose li::marker { color: var(--muted-2); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a { color: var(--accent-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.prose a:hover { color: var(--accent); text-decoration-thickness: 2px; }
.prose em { font-style: italic; }

/* A button inside prose keeps its own colours and no underline — the
   generic article link rule must not win over the button variant. */
.prose a.btn,
.callout a.btn,
.prose a.btn:hover,
.callout a.btn:hover { text-decoration: none; }
.prose a.btn-primary,
.callout a.btn-primary,
.prose a.btn-primary:hover,
.callout a.btn-primary:hover { color: #fff; }
.prose a.btn-outline,
.callout a.btn-outline,
.prose a.btn-outline:hover,
.callout a.btn-outline:hover { color: var(--accent-dark); }
.prose a.btn-ghost,
.callout a.btn-ghost { color: var(--muted); }

.prose .formula-inline {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 13px 16px;
  font-size: 0.97rem;
  line-height: 1.55;
  margin: 1.3em 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow-x: auto;
}

.prose table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.4em 0;
  font-size: 0.93rem;
  font-variant-numeric: tabular-nums;
}
.prose th, .prose td {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 10px 14px 10px 0;
  text-align: left;
  vertical-align: top;
}
.prose thead th {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 8px;
}
.prose tbody tr:last-child td { border-bottom: 1px solid var(--line-2); }

.prose .warning-note { margin: 1.6em 0; }
.prose .faq-item { max-width: 100%; }

/* Article header */
.article-header {
  max-width: 760px;
  padding-bottom: 26px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--line);
}
.article-header h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.12;
  margin-bottom: 16px;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: 0.83rem;
  color: var(--muted);
  margin: 0;
}
.article-meta .dot { color: var(--line-2); }
.article-meta a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.article-meta a:hover { color: var(--accent-dark); border-bottom-color: var(--accent); }

/* Callouts — related calculator, note, accuracy */
.callout {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 0 0 34px;
  background: var(--surface);
  max-width: var(--measure);
}
.callout .eyebrow { margin-bottom: 6px; }
.callout p {
  font-size: 0.925rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 12px;
}
.callout p:last-child { margin-bottom: 0; }
.callout .callout-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
  line-height: 1.3;
}
.callout--related {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}
.callout--related p { color: var(--ink-2); }
.callout--note {
  background: var(--surface-2);
  border-left: 3px solid var(--line-2);
}
.callout--wide { max-width: 100%; }

/* FAQ — hairline rows, not boxes */
.faq-list {
  max-width: 760px;
  margin-top: 8px;
  border-top: 1px solid var(--line-2);
}
.faq-item {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  margin: 0;
  padding: 0;
  background: transparent;
}
.faq-item summary {
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1.005rem;
  font-weight: 600;
  color: var(--ink);
  padding: 18px 42px 18px 0;
  list-style: none;
  position: relative;
  line-height: 1.5;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--accent);
  line-height: 1;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { color: var(--accent-dark); }
.faq-item p {
  padding: 0 42px 20px 0;
  color: var(--muted);
  font-size: 0.945rem;
  line-height: 1.65;
  margin: 0;
}

/* Breadcrumbs */
.crumbs {
  background: transparent;
  border-bottom: 1px solid var(--line);
}
.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 12px 0;
  font-size: 0.815rem;
}
.crumbs li { color: var(--muted-2); }
.crumbs li + li::before {
  content: "/";
  margin-right: 6px;
  color: var(--line-2);
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--accent-dark); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink-2); font-weight: 500; }

/* Section link rows at the end of articles */
.related-block {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--line-2);
  max-width: var(--measure);
}
.related-block h2 {
  font-size: 1.15rem;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}
.related-block h2:not(:first-child) { margin-top: 28px; }
.related-block ul { list-style: none; margin: 0; padding: 0; }
.related-block li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.94rem;
}
.related-block li:last-child { border-bottom: 0; }
/* The FAQ's own last row already draws a rule, so skip the second one. */
.faq-item + .related-block {
  border-top: 0;
  padding-top: 0;
  margin-top: 30px;
}
/* The hairline already separates the rows, so links stay un-underlined. */
.related-block a { color: var(--accent-dark); text-decoration: none; }
.related-block a:hover { text-decoration: underline; }

.guides-more { margin-top: 30px; }

/* Compact title index under the featured guide cards */
.guide-index {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.guide-index .eyebrow { margin-bottom: 10px; color: var(--muted-2); }
.guide-index ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
}
.guide-index li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  line-height: 1.45;
}
.guide-index a { color: var(--ink-2); text-decoration: none; }
.guide-index a:hover { color: var(--accent-dark); text-decoration: underline; }

/* ---------- 10. Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  padding: 52px 0 30px;
  color: var(--muted);
  font-size: 0.88rem;
}
.site-footer p { margin: 0; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(4, 1fr);
  gap: 30px;
  margin-bottom: 34px;
}
.footer-brand p {
  color: var(--muted);
  font-size: 0.87rem;
  line-height: 1.6;
  max-width: 34ch;
}
.footer-brand p:first-child { margin-bottom: 10px; }
.footer-brand strong {
  font-family: var(--font-heading);
  font-size: 1.16rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.footer-col h3 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ink-2);
  margin: 0 0 12px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 8px; font-size: 0.865rem; line-height: 1.45; }
.footer-col a { color: var(--muted); text-decoration: none; }
.footer-col a:hover, .footer-col a:focus-visible { color: var(--accent-dark); text-decoration: underline; }
.footer-note {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  font-size: 0.795rem;
  color: var(--muted-2);
  margin: 0;
}

/* ---------- 11. Responsive ---------- */

/* The results panel is deliberately NOT sticky. A filled-in estimate runs
   900–1500px tall (every result row, the shopping list, three actions and a
   disclaimer), so pinning it inside a 740px column would bury the Copy and
   Print buttons behind an inner scroll area. In normal flow every result and
   every action stays reachable by ordinary page scrolling, and keyboard order
   matches visual order. */

@media (max-width: 1100px) {
  .header-cta { display: none; }
  .footer-grid { grid-template-columns: 1.6fr repeat(2, 1fr); row-gap: 34px; }
}

@media (max-width: 1024px) {
  .workspace-grid { grid-template-columns: 1fr; }
  .results-panel { position: static; max-height: none; overflow: visible; }
  .calc-group { grid-template-columns: 1fr; gap: 18px; }
  .group-head { max-width: 60ch; }
  .mini-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-list { grid-template-columns: 1fr; }
  .section { padding: 60px 0; }
  .hero { padding: 64px 0 52px; }
}

@media (max-width: 900px) {
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 6px 28px 18px;
    box-shadow: var(--shadow);
  }
  .site-nav.open { display: flex; }
  .site-nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    border-left: 0;
    font-size: 1rem;
    margin-bottom: 0;
  }
  .site-nav a.active { border-bottom-color: var(--line); padding-left: 0; }
  .site-nav a.active::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 0.9em;
    background: var(--accent);
    margin-right: 9px;
    vertical-align: -0.08em;
    border-radius: 2px;
  }
  .site-nav a:last-child { border-bottom: 0; }
  .nav-toggle { display: flex; }
}

@media (max-width: 820px) {
  .container { padding: 0 22px; }
  .header-inner { min-height: 62px; gap: 14px; }
  .hero { padding: 52px 0 44px; }
  .hero h1 { max-width: none; }
  .hero-text { font-size: 1.08rem; }
  .section { padding: 52px 0; }
  .page-hero { padding: 40px 0 32px; }
  .calc-form { padding: 22px 20px; }
  .steps { grid-template-columns: 1fr; gap: 22px; }
  .benefits { grid-template-columns: 1fr; gap: 0; }
  .results-actions { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { max-width: none; }
  .prose { font-size: 1rem; }
  .workspace-grid { gap: 24px; }
  .row-item, .row-item.openings-row { grid-template-columns: 1fr 1fr; }
  .row-item .field-type { grid-column: 1 / -1; }
  .remove-row { width: 46px; height: 46px; }
  .room-card-head { grid-template-columns: 1fr auto; }
  .room-card-head .remove-row { grid-column: 2; }
  .workspace-grid > * { min-width: 0; }
  .result-row .r-label, .shopping-list .sl-label { min-width: 0; }
  .result-row .r-value, .shopping-list .sl-value { white-space: normal; }
}

@media (max-width: 620px) {
  .container { padding: 0 18px; }
  .site-nav { padding: 6px 18px 16px; }
  .calc-cards,
  .calc-cards--3,
  .mini-cards,
  .mini-cards--2 { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr 1fr; }
  .cta-row { gap: 14px; align-items: flex-start; }
  .cta-row .btn { width: 100%; }
  .cta-row .link-arrow { padding: 4px 0; }
  .hero-cats { gap: 10px 18px; }
  .hero-cats .hero-cats-label { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .guide-index ul { grid-template-columns: 1fr; }
  .result-row.highlight .r-value { font-size: 1.75rem; }
  .article-header { padding-bottom: 22px; margin-bottom: 26px; }
  .prose h2 { margin-top: 2em; }
  .page-hero p { font-size: 1rem; }
}

@media (max-width: 420px) {
  .container { padding: 0 16px; }
  .field-row { grid-template-columns: 1fr; }
  .unit-btn { padding: 7px 10px; }
  .calc-form { padding: 18px 16px; }
  .results-panel { padding: 20px 18px; }
  .room-card-body { grid-template-columns: 1fr; }
  .results-actions { grid-template-columns: 1fr; }
  .results-actions #btn-copy { grid-column: auto; }
}

/* ---------- 12. Print: results + shopping list only ---------- */

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .site-header, .hero, .page-hero, #calculators, #how-it-works, #faq, #about,
  .site-footer, .forms-col, .results-actions, .skip-link, .crumbs,
  .workspace-head .estimate-tag, .prose, .no-print, .callout,
  .article-header, .related-block, .hero-cats { display: none !important; }
  .section, .section-alt { padding: 0; border: 0; background: #fff; }
  #workspace { border: 0; background: #fff; padding: 0; }
  .workspace-grid { display: block; margin-top: 12px; }
  .results-panel {
    position: static;
    box-shadow: none;
    border: 1px solid #999;
    border-top: 3px solid #333;
    max-height: none;
    overflow: visible;
    page-break-inside: avoid;
  }
  h1, h2, h3, h4 { color: #000; }
  .btn { display: none !important; }
  .shopping-list { break-inside: avoid; }
  .shopping-list li.buy, .shopping-list li.total {
    background: #fff;
    border: 2px solid #333;
    font-weight: 700;
  }
  .result-row.highlight { background: #fff; border: 2px solid #333; }
  .result-row.highlight .r-value { color: #000; }
  .result-note, .sl-note { background: #fff; border: 1px solid #999; color: #333; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .link-arrow:hover .arrow,
  .calc-card:hover .card-cta .arrow { transform: none; }
}