/* ============================================================
   Nightingale Architectural Doors — stylesheet (Redesign Take 2)
   Plain CSS, no build step. Mobile-first, responsive.
   Design source: figma-export/Redesign Take 2 (Figma Make prototype,
   2026-09) — "evolved Modern Craftsmanship" moodboard.
   Aesthetic: bold, editorial, industrial-modern. Squared edges,
   charcoal + cobalt + orange, Archivo display type, full-bleed bands.
   Previous design archived in legacy-design/styles.css.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Moodboard palette */
  --charcoal: #24252a;        /* BASE — Dark Charcoal: text + dark bands */
  --charcoal-soft: #3a3b40;   /* secondary text on light */
  --canvas: #ffffff;          /* CANVAS — Pure White: light bands, cards */
  --antique: #dbd4c8;         /* SURFACE — Antique White: page ground, warm bands */
  --antique-2: #ccc4b6;       /* deeper antique — image mattes, placeholders */
  /* Cobalt: tokens.ts value (#0072C6) — the prototype's index.css #0b5ed7 was
     superseded (user decision 2026-09-09: "go with the blue in the screenshots"). */
  --cobalt: #0072c6;          /* PRIMARY — links, CTAs, focus, diagram highlights */
  --cobalt-dark: #005da3;     /* cobalt hover */
  --orange: #fd7e14;          /* ACCENT — Bright Orange */
  --orange-light: #ffa94d;    /* orange lifted for dark surfaces */
  --brick: #cd3b29;           /* ALERT — Brick Red: fire-fail, errors */
  --brick-light: #ff6a4f;     /* ALERT on dark surfaces (result values, error text) */
  --line: rgba(36, 37, 42, 0.12);       /* hairlines on light */
  --line-dark: rgba(255, 255, 255, 0.14); /* hairlines on dark */
  --text-on-dark: rgba(219, 212, 200, 0.8);   /* body text on charcoal */
  --text-on-dark-soft: rgba(219, 212, 200, 0.7);

  --radius: 0px;              /* architectural: squared edges */
  --shadow-md: 0 18px 50px rgba(20, 20, 24, 0.18);
  --container: 1180px;
  --space: clamp(2.5rem, 4vw, 3.75rem);

  /* Typography — Archivo headings, Inter body, IBM Plex Mono for all small
     uppercase labels (eyebrows, nav, buttons, captions, form controls). */
  --font-head: "Archivo", "Arial Black", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 92px; /* clear the sticky header on anchor jumps */ }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--charcoal);
  background: var(--antique);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* Sticky footer: on short pages (Warranty) the white content section grows
   to fill the viewport, so the footer sits at the bottom and no antique
   ground peeks out beneath it. No effect on pages taller than the screen. */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; display: flex; flex-direction: column; }
main > .section--canvas { flex-grow: 1; }

input, select, textarea, button { font-family: var(--font-mono); }

a { color: var(--cobalt); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--orange); }

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.05;
  color: var(--charcoal);
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 600; }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1rem; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.2rem, 5vw, 2.5rem); }

.section { padding-block: var(--space); }
.section--canvas { background: var(--canvas); }

/* Eyebrow label with cobalt lead rule (orange-light on dark bands) */
.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cobalt);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
  display: inline-block;
  flex-shrink: 0;
}
/* Eyebrow accent system (design-library rule): cobalt on light grounds
   (canvas/antique), orange-light on dark (charcoal) — the accent is part
   of the component, never overridden by contextual paragraph colors
   (those rules use p:not(.eyebrow)). Dark contexts flip automatically;
   .eyebrow--dark remains for markup outside a known dark container. */
.eyebrow--dark,
.split-section--dark .eyebrow,
.work .eyebrow,
.cat--charcoal .eyebrow,
.gallery-hero .eyebrow,
.page-banner .eyebrow { color: var(--orange-light); }

.section-head { max-width: 60ch; margin-bottom: 2rem; }
.section-lead { color: var(--charcoal-soft); font-size: 1.05rem; }

/* ---------- Accessibility helpers ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--charcoal);
  color: var(--canvas);
  padding: 0.7rem 1.1rem;
  z-index: 1000;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.85rem 2rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn-primary { background: var(--cobalt); color: var(--canvas); }
.btn-primary:hover { background: var(--cobalt-dark); color: var(--canvas); }
.btn-ghost { background: transparent; color: var(--charcoal); border-color: var(--charcoal); }
.btn-ghost:hover { background: var(--charcoal); color: var(--canvas); }
.btn-block { width: 100%; }
.btn-sm { padding: 0.6rem 1rem; font-size: 0.7rem; }

/* Arrow link — "See our work →" */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cobalt);
  border-bottom: 1px solid var(--cobalt);
  padding-bottom: 0.2rem;
  transition: color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}
.link-arrow:hover { color: var(--cobalt-dark); border-color: var(--cobalt-dark); }
.link-arrow--light { color: var(--canvas); border-color: rgba(255, 255, 255, 0.5); }
.link-arrow--light:hover { color: var(--canvas); border-color: rgba(255, 255, 255, 0.5); opacity: 0.65; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; min-height: 76px; gap: 1.5rem; }

.brand { display: flex; align-items: center; gap: 0.15rem; flex: 0 0 auto; }
.brand-logo { width: 56px; height: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; color: var(--cobalt); white-space: nowrap; text-transform: uppercase; letter-spacing: -0.01em; }
.brand-sub { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--charcoal-soft); white-space: nowrap; margin-top: 0.2em; }

.main-nav { display: flex; align-items: center; }
.nav-menu { display: flex; flex-wrap: nowrap; align-items: center; gap: 1.7rem; list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.nav-menu a {
  /* inline-block so the underline padding counts toward the box height —
     keeps the links level with the Specifications <button> */
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8rem;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--charcoal);
  padding-bottom: 0.25rem;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-menu a:hover { color: var(--cobalt); border-bottom-color: var(--cobalt); }
.nav-menu a[aria-current="page"] { color: var(--cobalt); border-bottom-color: var(--cobalt); }

/* "Get a Quote" filled CTA */
.nav-cta,
.nav-menu a.nav-cta {
  font-weight: 600;
  color: var(--canvas);
  background: var(--cobalt);
  padding: 0.6rem 1.2rem;
  border-bottom: none;
  transition: background 0.18s ease;
}
.nav-menu a.nav-cta:hover { background: var(--cobalt-dark); color: var(--canvas); border-bottom: none; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--canvas);
  cursor: pointer;
  position: relative;
}
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 20px; height: 1.5px;
  background: var(--charcoal);
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle-bar::before { transform: translate(-50%, -7px); }
.nav-toggle-bar::after  { transform: translate(-50%, 5px); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translate(-50%, 0) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after  { transform: translate(-50%, 0) rotate(-45deg); }

/* ---------- Nav dropdown (Specifications) ---------- */
.has-dropdown { position: relative; }
.dropdown-toggle {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8rem;
  line-height: 1.6; /* match the sibling links' inherited line-height */
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--charcoal);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 0.25rem;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.dropdown-toggle:hover { color: var(--cobalt); border-bottom-color: var(--cobalt); }
.has-dropdown.current > .dropdown-toggle { color: var(--cobalt); border-bottom-color: var(--cobalt); }
.caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.2s ease;
}
.has-dropdown:hover .caret,
.dropdown-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.7rem);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 230px;
  background: var(--canvas);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  opacity: 0;
  visibility: hidden;
  /* Forgiving close: grace period + hover bridge (see ::before) so the pointer
     can cross the gap below the toggle without the menu vanishing. */
  transition: opacity 0.18s ease 0.22s, transform 0.18s ease 0.22s, visibility 0s linear 0.4s;
  z-index: 200;
}
.dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.8rem;
  height: 0.8rem;
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu,
.dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear; /* open instantly */
}
.dropdown-menu li { display: block; }
.dropdown-menu a {
  font-family: var(--font-mono);
  display: block;
  padding: 0.65rem 1.3rem;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: var(--charcoal);
  border-bottom: none;
}
/* Same interaction language as the top-level links: cobalt + underline
   (text-decoration spans only the label, not the full row width). */
.dropdown-menu a:hover,
.dropdown-menu a[aria-current="page"] {
  background: none;
  color: var(--cobalt);
  border-bottom: none;
  text-decoration: underline 2px;
  text-underline-offset: 6px;
}

/* ---------- Homepage hero ---------- */
.home-hero { background: var(--canvas); overflow: hidden; }
.home-hero-copy {
  text-align: center;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  padding-inline: clamp(1.2rem, 5vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}
.home-hero h1 { max-width: 22ch; margin-inline: auto; margin-bottom: 0.4em; }
.home-hero-lead {
  font-size: 1.05rem;
  color: var(--charcoal-soft);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: 1.2rem;
}
.home-hero-photo { width: 100%; height: clamp(340px, 52vw, 620px); overflow: hidden; }
.home-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 47%; }

/* ---------- Door-type split sections ---------- */
.split-section { background: var(--canvas); }
.split-section--dark { background: var(--charcoal); }
.split-section--antique { background: var(--antique); }
.split-section .container { padding-inline: 0; }
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: min(58vh, 460px);
}
.split-copy {
  display: flex;
  align-items: center;
  padding-block: clamp(3rem, 5vw, 4rem);
  padding-inline: clamp(1.2rem, 5vw, 2.5rem);
}
.split-copy p:not(.eyebrow) {
  color: var(--charcoal-soft);
  line-height: 1.7;
  max-width: 44ch;
  margin-bottom: 1.8rem;
}
.split-section--dark h2 { color: var(--canvas); }
.split-section--dark .split-copy p:not(.eyebrow) { color: var(--text-on-dark); }
.split-media { overflow: hidden; height: 100%; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; min-height: unset; }
  .split-media { height: clamp(220px, 45vw, 340px); order: -1; }
}

/* ---------- Gallery preview band (homepage) ---------- */
.work { background: var(--charcoal); padding-block: clamp(3rem, 5vw, 4.5rem); }
.work-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.work-head h2 { margin: 0; color: var(--canvas); }
.work-link { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--orange-light); }
.work-link:hover { color: var(--orange); }
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.work-tile {
  margin: 0;
  background: var(--charcoal-soft);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s ease;
}
.work-tile:hover { border-color: var(--orange-light); }
.work-tile-media { aspect-ratio: 3 / 4; overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.work-tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.work-tile:hover .work-tile-media img { transform: scale(1.04); }
/* Tiles deep-link to their door in the gallery, so they are focusable: warm ring on the dark band */
.work-tile-media:focus-visible { outline-color: var(--orange-light); }
.work-tile:focus-within { border-color: var(--orange-light); }
.work-tile figcaption {
  padding: 0.9rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-on-dark-soft);
  text-align: center;
}
@media (max-width: 860px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- About ---------- */
.about {
  background: var(--canvas);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.5rem, 4vw, 4rem);
}
.about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.8rem, 4vw, 3.25rem); align-items: center; }
.about-media img { width: 100%; max-height: 560px; object-fit: cover; object-position: center; }
.about-copy p:not(.eyebrow) { color: var(--charcoal-soft); }
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  border-top: 2px solid var(--line);
}
.about-stats li { display: flex; flex-direction: column; padding: 1.1rem 1rem 0.8rem; border-left: 1px solid var(--line); }
.about-stats li:first-child { border-left: none; padding-left: 0; }
.about-stats strong { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; color: var(--charcoal); }
.about-stats span { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; color: var(--charcoal-soft); text-transform: uppercase; margin-top: 0.25rem; }

@media (max-width: 820px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-media { order: -1; max-width: 520px; }
}

/* ---------- Contact ---------- */
.contact { background: var(--antique); padding-block: clamp(3rem, 5vw, 4.5rem); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.contact-copy p:not(.eyebrow) { color: var(--charcoal-soft); }
.contact-details { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem 2rem; }
.contact-details li { display: grid; gap: 0.2rem; align-content: start; padding-bottom: 1.3rem; border-bottom: 1px solid var(--line); }
.contact-details .contact-span { grid-column: 1 / -1; }
.contact-label { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.65rem; font-weight: 600; color: var(--cobalt); }
.contact-details a, .contact-details address, .contact-plain { font-size: 1.1rem; font-style: normal; color: var(--charcoal); font-weight: 500; }
.contact-details a:hover { color: var(--cobalt); }

@media (max-width: 780px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .contact-details { grid-template-columns: 1fr; }
  .contact-details li { grid-column: 1 / -1; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--charcoal); color: var(--text-on-dark); padding-block: 1.5rem; }
.footer-inner { display: grid; gap: 1rem; }
.footer-name { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: var(--canvas); margin: 0; text-transform: uppercase; letter-spacing: 0.08em; }
.footer-contact { display: flex; flex-wrap: wrap; gap: 0.4rem 2rem; font-size: 0.95rem; }
.footer-contact a, .footer-contact span { color: rgba(219, 212, 200, 0.9); }
.footer-contact a:hover { color: var(--orange-light); }
.footer-copy { font-size: 0.82rem; color: rgba(219, 212, 200, 0.6); margin: 0; border-top: 1px solid var(--line-dark); padding-top: 1rem; }

@media (min-width: 760px) {
  .footer-inner { grid-template-columns: 1fr auto; align-items: center; }
  .footer-copy { grid-column: 1 / -1; }
}

/* ---------- Responsive nav collapse ---------- */
@media (max-width: 940px) {
  .nav-toggle { display: block; }
  .nav-menu {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    background: var(--canvas);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: 0.5rem 1.2rem 1.2rem;
    display: none;
    white-space: normal;
  }
  .nav-menu.open { display: flex; }
  .nav-menu li { border-top: 1px solid var(--line); }
  .nav-menu li:first-child { border-top: none; }
  .nav-menu a { display: block; padding: 0.95rem 0.2rem; border-bottom: none; }
  .nav-menu a:hover,
  .nav-menu a[aria-current="page"] { border-bottom: none; }
  .nav-menu a.nav-cta { text-align: center; margin-top: 0.7rem; padding: 0.85rem 1.2rem; }

  .has-dropdown { position: static; }
  .dropdown-toggle {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0.95rem 0.2rem;
    font-size: 0.8rem;
    border-bottom: none;
  }
  .dropdown-menu {
    position: static;
    transform: none;
    min-width: 0;
    box-shadow: none;
    border: none;
    padding: 0 0 0.6rem;
    opacity: 1;
    visibility: visible;
    display: none;
  }
  .dropdown-menu::before { content: none; } /* hover bridge is desktop-only */
  /* Neutralize desktop hover/focus/open transforms WITHOUT touching display —
     only the JS-toggled .open class controls visibility on mobile. */
  .has-dropdown:hover .dropdown-menu,
  .has-dropdown:focus-within .dropdown-menu,
  .dropdown-menu.open { transform: none; }
  .dropdown-menu.open { display: block; }
  .dropdown-menu a { padding: 0.7rem 0.2rem 0.7rem 1.3rem; color: var(--charcoal-soft); }
}

/* ============================================================
   Gallery page
   ============================================================ */
.gallery-hero {
  background: var(--charcoal);
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
  border-bottom: 1px solid var(--line-dark);
}
.gallery-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.gallery-hero h1 { color: var(--canvas); margin: 0; }
.gallery-hero .eyebrow { margin-bottom: 0.5rem; }
.gallery-hero-intro p { color: var(--text-on-dark); font-size: 1rem; line-height: 1.7; margin: 0 0 0.85rem; max-width: 44ch; }
.gallery-hero-intro p:last-child { color: rgba(219, 212, 200, 0.6); margin-bottom: 0; }
.back-link {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(219, 212, 200, 0.6);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  transition: color 0.15s ease;
}
.back-link:hover { color: rgba(219, 212, 200, 0.9); }

@media (max-width: 720px) {
  .gallery-hero-grid { grid-template-columns: 1fr; }
}

/* ---------- Category sections ---------- */
.cat { padding-block: clamp(2.25rem, 3.5vw, 3rem); }
.cat--canvas { --cat-bg: var(--canvas); background: var(--canvas); }
.cat--charcoal { --cat-bg: var(--charcoal); background: var(--charcoal); }
.cat--antique { --cat-bg: var(--antique); background: var(--antique); }
.cat-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}
.cat-head-copy { max-width: 52ch; }
.cat-head h2 { margin: 0 0 0.75rem; }
.cat--charcoal h2 { color: var(--canvas); }
.cat-desc { font-size: 1rem; line-height: 1.65; margin: 0; color: var(--charcoal-soft); }
.cat--charcoal .cat-desc { color: rgba(219, 212, 200, 0.75); }
.cat-count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cobalt);
  white-space: nowrap;
}
.cat--charcoal .cat-count { color: var(--orange-light); }

@media (max-width: 720px) {
  .cat-head { grid-template-columns: 1fr; align-items: start; }
}

/* ---------- Door card carousel ---------- */
.carousel { position: relative; }
.carousel-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > .gallery-item { scroll-snap-align: start; }
/* Right-edge fade into the section background */
.carousel::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0.5rem;
  width: 80px;
  background: linear-gradient(to right, transparent, var(--cat-bg, var(--canvas)));
  pointer-events: none;
}

.gallery-item {
  margin: 0;
  flex-shrink: 0;
  height: 420px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease;
}
.gallery-item:hover { transform: translateY(-4px); }
/* Card widths (prototype sm/md/lg/xl) */
.gallery-item.w-sm { width: 220px; }
.gallery-item.w-md { width: 280px; }
.gallery-item.w-lg { width: 340px; }
.gallery-item.w-xl { width: 420px; }

.gallery-trigger {
  all: unset;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.gallery-trigger:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.cat--charcoal .gallery-trigger:focus-visible { outline-color: var(--orange-light); }

.gallery-item-media {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--antique-2);
  min-height: 0;
}
.cat--charcoal .gallery-item-media { background: rgba(255, 255, 255, 0.04); }
.gallery-item-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.gallery-item:hover .gallery-item-media img { transform: scale(1.04); }
/* Hover name overlay */
.gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: rgba(36, 37, 42, 0.72);
  display: flex;
  align-items: flex-end;
  padding: 1.25rem;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.gallery-item:hover .gallery-item-overlay,
.gallery-trigger:focus-visible .gallery-item-overlay { opacity: 1; }
.gallery-item-overlay span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--canvas);
  line-height: 1.4;
}
.gallery-item figcaption {
  padding: 0.75rem 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  line-height: 1.4;
  flex-shrink: 0;
}
.cat--charcoal .gallery-item figcaption { color: var(--text-on-dark-soft); }

/* Scroll arrows (desktop) */
.carousel-arrows { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.625rem; }
.carousel-arrows button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--charcoal-soft);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.cat--charcoal .carousel-arrows button { border-color: rgba(255, 255, 255, 0.2); color: rgba(219, 212, 200, 0.7); }
.carousel-arrows button:hover { border-color: var(--cobalt); color: var(--cobalt); }

@media (max-width: 640px) {
  .carousel-arrows { display: none; }
  .gallery-item.w-sm, .gallery-item.w-md, .gallery-item.w-lg, .gallery-item.w-xl { width: 72vw; }
}

/* ---------- Core-type items (core-types.html) ----------
   Gallery-item cards with the description visible on the card
   (no modal): fixed image matte, mono caption, body text below. */
.core-item { height: auto; }
.core-item .gallery-item-media { flex: 0 0 auto; height: 240px; }
/* Core cutaways read as diagrams — show them in full on the matte, no cropping */
.core-item .gallery-item-media img { object-fit: contain; padding: 1rem; }
.core-item figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: 0.85rem; }
.core-rating {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cobalt);
  white-space: nowrap;
}
.cat--charcoal .core-rating { color: var(--orange-light); }
.core-desc { font-size: 0.92rem; line-height: 1.6; color: var(--charcoal-soft); }
.cat--charcoal .core-desc { color: var(--text-on-dark); }
.core-desc p { margin: 0 0 0.6rem; }
.core-desc p:last-child { margin-bottom: 0; }


/* ---------- Pre-footer CTA band ----------
   The standard close on every non-home page: antique ground, two columns —
   header left, copy + emphasized contact links right. No filled button:
   the sticky nav already carries "Get a Quote"; the band's job is direct
   contact (mailto/tel), styled in the nav's cobalt-underline language. */
/* Padding mirrors the page banner (2.25–3.25rem) so pages open and close
   with the same vertical weight — airier than the doc sections, but well
   short of the homepage's tallest bands. */
.cta-band { background: var(--antique); padding-block: clamp(2.25rem, 4vw, 3.25rem); }
/* Gallery exception: its banner and carousel sections run much taller, so
   the closing band gets extra height to hold its own between the dark
   category band above and the footer below. */
.cta-band--tall { padding-block: clamp(3rem, 4.5vw, 4rem); }
.cta-band-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.cta-band h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.1; max-width: 22ch; }
.cta-band-body p { color: var(--charcoal-soft); max-width: 46ch; margin: 0 0 0.5rem; }
.cta-band .cta-contact { margin: 0; font-size: 1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0; }
.cta-band .cta-contact a { color: var(--cobalt); font-weight: 500; text-decoration: underline 1px; text-underline-offset: 4px; }
.cta-band .cta-contact a:hover { color: var(--cobalt-dark); }
.cta-contact .sep { color: var(--charcoal-soft); padding-inline: 0.6rem; }
@media (max-width: 720px) {
  .cta-band-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* ---------- Door detail modal (dark lightbox) ---------- */
.door-modal {
  border: 1px solid var(--line-dark);
  padding: 0;
  background: var(--charcoal);
  color: var(--text-on-dark);
  width: min(1040px, calc(100vw - 2rem));
  /* Fixed height so prev/next stay put while paging (user request 2026-08-25) */
  height: min(680px, calc(100vh - 2rem));
  height: min(680px, calc(100dvh - 2rem));
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.door-modal::backdrop { background: rgba(20, 20, 24, 0.93); }
.door-modal-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  height: 100%;
  position: relative;
}
.door-modal-media {
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  min-height: 0;
}
.door-modal-media img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
.door-modal-media img[hidden] { display: none; }
.door-modal-body {
  padding: 2.5rem 2.4rem 2rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.door-modal-body .eyebrow { color: var(--orange-light); font-size: 0.68rem; letter-spacing: 0.2em; margin-bottom: 0.6rem; }
.door-modal-body .eyebrow::before { content: none; }
.door-modal-body h2 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); color: var(--canvas); margin-bottom: 0.8rem; }
.door-modal-text p { color: var(--text-on-dark); }
.door-modal-text p:last-child { margin-bottom: 0; }
.door-modal-nav {
  margin-top: auto;
  padding-top: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  border-top: 1px solid var(--line-dark);
}
.door-modal-nav .btn-ghost { color: var(--text-on-dark); border-color: rgba(255, 255, 255, 0.25); }
.door-modal-nav .btn-ghost:hover { background: rgba(255, 255, 255, 0.12); color: var(--canvas); }
.door-modal-count { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-on-dark-soft); }
.door-modal-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 2;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--canvas);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s ease;
}
.door-modal-close:hover { background: rgba(255, 255, 255, 0.16); }
body.modal-open { overflow: hidden; }

@media (max-width: 760px) {
  .door-modal { width: calc(100vw - 1rem); height: auto; max-height: calc(100dvh - 1rem); }
  .door-modal-inner { height: auto; grid-template-columns: 1fr; max-height: calc(100dvh - 1rem); overflow-y: auto; display: block; }
  .door-modal-media { padding: 1.2rem; min-height: 0; }
  .door-modal-media img { max-height: 55vh; }
  .door-modal-body { padding: 1.5rem 1.3rem 1.4rem; overflow: visible; }
  .door-modal-nav { margin-top: 1.4rem; padding-top: 1.2rem; }
}

/* ============================================================
   Inner page banner (Specifications pages)
   Mirrors the gallery hero: dark charcoal band, generous vertical
   space, eyebrow-style breadcrumb, h1 left / intro copy right.
   ============================================================ */
.page-banner {
  background: var(--charcoal);
  border-bottom: 1px solid var(--line-dark);
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
}
.page-banner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.page-banner h1 { margin: 0; color: var(--canvas); }
.page-intro { font-size: 1rem; line-height: 1.7; color: var(--text-on-dark); max-width: 44ch; margin: 0; }
@media (max-width: 720px) {
  .page-banner-grid { grid-template-columns: 1fr; }
}
/* Quiet supplementary note in the banner's right column (Core Types
   "Good to know"): labeled but unboxed — less weight than a callout. */
.banner-note { margin-top: 1.25rem; max-width: 44ch; }
.banner-note-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange-light);
  margin: 0 0 0.3rem;
}
.banner-note p:not(.banner-note-label) { font-size: 0.9rem; line-height: 1.6; color: rgba(219, 212, 200, 0.65); margin: 0; }
.banner-note strong { color: var(--text-on-dark); font-weight: 600; }
/* Breadcrumb styled like the eyebrow: mono uppercase with an orange lead rule */
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(219, 212, 200, 0.6);
  margin: 0 0 1.5rem;
}
.breadcrumb::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--orange-light);
  margin-right: 0.75rem;
  vertical-align: 0.32em;
}
.breadcrumb a { color: rgba(219, 212, 200, 0.6); }
.breadcrumb a:hover { color: rgba(219, 212, 200, 0.9); }
.breadcrumb span { color: var(--orange-light); }
.breadcrumb .crumb-ancestor { color: rgba(219, 212, 200, 0.6); }

/* ============================================================
   Spec groups & core-type cards
   ============================================================ */
.spec-group { margin-top: clamp(2.5rem, 4vw, 3.25rem); }
.spec-group:first-of-type { margin-top: 0; }
.spec-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--charcoal);
}
.spec-group-head h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.spec-group-head .count { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cobalt); }
.spec-note { color: var(--charcoal-soft); max-width: 68ch; }
.spec-note strong { color: var(--charcoal); }
/* Group header with a certification badge beside the count (Cut Sheets fire group).
   On wide screens the badge steps outside the 56rem group block into the free
   right-hand space — level with the subheader, at double the inline size. */
.spec-group-head--badge { align-items: center; }
.group-head-right { display: flex; align-items: center; gap: 0.9rem; }
.group-badge { height: 34px; width: auto; opacity: 0.9; }
@media (min-width: 1120px) {
  .compact .spec-group { position: relative; }
  .group-badge {
    position: absolute;
    left: calc(100% + 2.5rem);
    top: 0;
    height: 80px; /* bottom stays above the first row's hairline */
  }
}

.core-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.6rem; }
.core-card {
  border: 1px solid var(--line);
  background: var(--canvas);
  display: flex;
  flex-direction: column;
}
.core-card img {
  width: 100%;
  height: 200px;
  object-fit: contain;          /* diagrams/cutaways — show in full, don't crop labels */
  padding: 0.9rem;
  background: var(--antique-2);
  border-bottom: 1px solid var(--line);
}
.core-card .core-body { padding: 1.5rem; }
.core-card h3 { margin-bottom: 0.3rem; }
.core-card .core-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--cobalt); font-weight: 600; margin-bottom: 0.8rem;
}
.core-card p { color: var(--charcoal-soft); margin: 0 0 0.8rem; font-size: 0.95rem; }
.core-card p:last-child { margin-bottom: 0; }

/* ============================================================
   Document links (cut sheets, warranty, forms)
   ============================================================ */
.doc-actions { flex: 0 0 auto; display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.doc-link {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.6rem 1rem;
  border: 1px solid var(--charcoal);
  color: var(--charcoal);
  white-space: nowrap;
}
.doc-link:hover { background: var(--charcoal); color: var(--canvas); }
/* Primary doc action: cobalt outlined chip (subtler than a fill — the
   cobalt border/text alone marks it as the row's main action) */
.doc-link--primary { background: transparent; color: var(--cobalt); border-color: var(--cobalt); }
.doc-link--primary:hover { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }

/* ---------- Linked title rows (Cut Sheets / Forms & Calculators) ----------
   The document title IS the link: one slim hairline row per document,
   format+size as a single mono chip on the right. */
a.doc-row {
  /* Title column capped just past the longest title; the size chips
     left-align into their own column instead of drifting to the far
     right edge (closes the dead space, keeps chips scannable). */
  display: grid;
  grid-template-columns: minmax(0, 42rem) auto;
  justify-content: start;
  column-gap: 2.5rem;
  align-items: baseline;
  padding: 0.75rem 0.2rem;
  border-bottom: 1px solid var(--line);
  color: var(--charcoal);
  font-weight: 500;
  font-size: 0.98rem;
  transition: color 0.15s ease;
}
a.doc-row:hover { color: var(--cobalt); }
a.doc-row:hover .doc-chip { color: var(--cobalt); }
.doc-chip {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  white-space: nowrap;
  transition: color 0.15s ease;
}
/* Standalone download links in the same quiet treatment (Forms rows) */
a.doc-chip { padding: 0.45rem 0; }
a.doc-chip:hover { color: var(--cobalt); }
/* Multiple downloads side by side get a "|" divider so they don't run together
   (fixed color, so it doesn't tint on the link's own hover) */
.doc-actions .doc-chip + .doc-chip::before {
  content: "|";
  color: var(--charcoal-soft);
  opacity: 0.4;
  padding-right: 0.7rem;
}

/* Tool rows (Forms & Calculators): title + one-line description left,
   action buttons/chips right. */
.tool-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.tool-copy { flex: 1 1 32ch; min-width: 0; }
.tool-title { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; line-height: 1.15; margin: 0; }
.tool-desc { font-size: 0.9rem; color: var(--charcoal-soft); margin: 0.25rem 0 0; }

/* ---------- Interactive calculator widget ---------- */
.calc {
  border: 1px solid var(--line);
  background: var(--canvas);
  padding: clamp(1.4rem, 3.5vw, 2rem);
  margin-bottom: 1.6rem;
}
.calc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.calc-title { margin: 0; font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
.calc-form { margin: 0; }
.calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.1rem 1.4rem;
}
/* align-content: end keeps input boxes on a shared baseline even when a
   neighboring field's label wraps to two lines */
.calc-field { display: grid; align-content: end; }
.calc-field label,
.calc-check span {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--charcoal-soft);
  margin-bottom: 0.4rem;
}
.calc-field input,
.calc-field select {
  width: 100%;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(219, 212, 200, 0.32); /* --antique at 32% — on-palette input wash */
  color: var(--charcoal);
}
.calc-field input:focus,
.calc-field select:focus {
  outline: none;
  border-color: var(--cobalt);
  box-shadow: 0 0 0 2px rgba(0, 114, 198, 0.22);
}
/* Inline violation flagging (JS toggles .is-bad + aria-invalid on the fields
   behind a fire / ADA failure): brick border + wash, label turns brick */
.calc-field.is-bad input,
.calc-field.is-bad select {
  border-color: var(--brick);
  box-shadow: 0 0 0 2px rgba(205, 59, 41, 0.28);
  background: rgba(205, 59, 41, 0.08);
}
.calc-field.is-bad label,
.calc-field.is-bad .fracdim-cap,
.calc-field.is-bad .calc-hint { color: var(--brick); }
/* Inline error strip under the fire / ADA input groups */
.calc-inline-err {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 1rem 0 0;
  padding: 0.7rem 0.9rem;
  background: var(--brick);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
  max-width: 70ch;
}
.calc-inline-err::before { content: "\26A0"; flex: 0 0 auto; font-size: 1.05rem; line-height: 1.2; }
.calc-inline-err[hidden] { display: none; }
.dim-input { display: flex; gap: 0.5rem; }
.dim-input input { flex: 1 1 auto; min-width: 0; }
.dim-input select { flex: 0 0 5.5rem; }

/* Fraction-aware dimension input: [ whole inches ] [ labeled fraction ] in */
.fracdim { display: flex; align-items: flex-end; gap: 0.45rem; }
.fracdim-whole { flex: 1 1 auto; min-width: 0; }
.fracdim-frac { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.2rem; }
.fracdim-cap {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cobalt);
  padding-left: 0.1rem;
}
.fracdim-frac select { width: 4.9rem; }
.fracdim-unit {
  flex: 0 0 auto;
  padding-bottom: 0.7rem;
  font-size: 0.88rem;
  color: var(--charcoal-soft);
}
.fracdim-whole:disabled,
.fracdim .frac:disabled { opacity: 0.45; cursor: not-allowed; }
/* 70ch matches .calc-note so the two text blocks share one reading measure;
   slightly bold so the entry instructions register (user request 2026-09-10) */
.calc-grid-hint { margin: 0 0 1rem; max-width: 70ch; font-weight: 500; }

/* Calculators on their own pages (door-weight.html, lock-to-lite.html):
   borderless and flush — on the white band the card chrome is unnecessary */
.calc--narrow, .calc--split { border: none; padding: 0 !important; }
.calc--narrow { max-width: 760px; }
/* Download link parked bottom-right beneath the results box */
.calc-dl { display: flex; justify-content: flex-end; margin: 0.8rem 0 0; }

/* ---------- Split calculator layout (header / inputs | output plate) ---------- */
.calc--split { display: grid; gap: 1.4rem clamp(2rem, 5vw, 3.5rem); }
.calc-main .calc-grid-hint { margin: 0 0 1.6rem; }
.calc-main { min-width: 0; }
.calc-out { min-width: 0; }
.calc-figure { margin: 0; min-width: 0; }
/* The plate fills its column: drawing + results band as one framed unit */
.calc-plate { border: 1px solid var(--line); }
.calc-plate .ll-svg { max-width: none; border: none; }
.calc-plate .calc-result { margin-top: 0; }
/* Checkbox row with an info flag on the right */
.calc-checkrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  position: relative; /* the flag card anchors to the whole row */
}
.calc-checkrow .calc-check { margin-top: 0; }
/* Info flag: a <details> chip that floats an explainer card. */
.calc-flag { position: static; flex: 0 0 auto; }
.calc-flag summary {
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cobalt);
  cursor: pointer;
  border-bottom: 1px dotted currentColor;
  padding-bottom: 1px;
  white-space: nowrap;
}
.calc-flag summary::-webkit-details-marker { display: none; }
/* Info icon drawn in CSS (the old ⓘ glyph rendered blurry from fallback
   fonts at this size) — a crisp ring + "i" in currentColor */
.calc-flag summary::before {
  content: "i";
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  line-height: 1.35em;
  text-align: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.95em;
  letter-spacing: 0;
  margin-right: 0.45em;
  vertical-align: -0.3em;
}
.calc-flag[open] summary { color: var(--charcoal); }
.calc-flag-card {
  position: absolute;
  left: 4.5rem;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 5;
  background: var(--canvas);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  padding: 0.9rem 1rem;
  font-size: 0.88rem;
  color: var(--charcoal-soft);
}
.calc-flag-card p { margin: 0 0 0.5rem; }
.calc-flag-card p:last-child { margin-bottom: 0; }
.calc-flag-card .calc-notes { margin: 0 0 0.5rem; }
.calc-flag-card .calc-notes:last-child { margin-bottom: 0; }
.calc-flag-card strong { color: var(--charcoal); font-weight: 600; }
@media (max-width: 640px) {
  .calc-flag-card { left: 0; }
}
/* Desktop: the card spreads wide (bleeding over the plate column while
   hovered) and lays its bullets in two columns, so it runs short enough
   to read without scrolling. */
@media (min-width: 880px) {
  .calc-flag-card { left: 0; right: -14rem; }
  .calc-flag-card .calc-notes { columns: 2; column-gap: 1.8rem; }
  .calc-flag-card .calc-notes li { break-inside: avoid; }
}
.ll-svg {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
  margin-inline: auto;
  background: rgba(0, 114, 198, 0.05); /* pale blueprint ground */
  border: 1px solid var(--line);
}
/* Notes under the output plate: span the full column, left-aligned bullets */
.calc-figcap {
  font-size: 0.88rem;
  color: var(--charcoal-soft);
  margin: 0.9rem 0 0;
  text-align: left;
}
.calc-figcap .calc-subhead { margin: 0 0 0.35rem; }
.calc-notes { list-style: disc; margin: 0; padding-left: 1.15rem; display: grid; gap: 0.3rem; }
.calc-notes li { margin: 0; }
@media (min-width: 880px) {
  .calc--split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    /* auto + 1fr: the tall output column's extra height all lands in the
       notes row — without this, grid stretches the form row and a gap
       opens between the last field and the notes */
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "main  out"
      "notes out";
    align-items: start;
  }
  .calc-main { grid-area: main; }
  /* Notes flow directly under the last field group (top-aligned) — the
     leftover space falls below them, which reads more natural than a
     trapped gap between form and notes */
  .calc--split > .calc-figcap { grid-area: notes; align-self: start; margin-top: 0.25rem; }
  /* Sticky offset clears the sticky site header (76px min-height + 1px border) */
  .calc-out { grid-area: out; position: sticky; top: calc(77px + 1rem); }
}

/* SVG diagram — "cobalt drafting" theme (user choice 2026-09-10):
   shop-drawing ink on pale blueprint ground; ORANGE is reserved for
   interaction (active-field highlight, clearance arrow); brick = fire-fail;
   brick dashed = the 43" ADA limit marker. */
.svg-door { fill: var(--canvas); stroke: var(--cobalt); stroke-width: 2; }
.svg-cutout { fill: var(--canvas); stroke: var(--cobalt); stroke-width: 1.2; }
.svg-glass { fill: rgba(0, 114, 198, 0.12); stroke: rgba(0, 114, 198, 0.55); stroke-width: 1; }
.svg-lock { fill: var(--canvas); stroke: var(--cobalt); stroke-width: 1.5; }
.svg-floor { stroke: var(--cobalt-dark); stroke-width: 2; }
.svg-floorhatch { stroke: rgba(0, 114, 198, 0.5); stroke-width: 1; }
.svg-centerline { stroke: rgba(0, 114, 198, 0.55); stroke-width: 1; stroke-dasharray: 5 3; }
/* Diagram annotations are IBM Plex Mono — the system's voice for small
   technical labels (and the drafting-plate convention) */
.svg-part-label { fill: var(--cobalt-dark); font: 600 9.5px var(--font-mono); letter-spacing: 0.04em; }
.lldim line { stroke: rgba(0, 114, 198, 0.7); stroke-width: 1; }
.lldim line.ext { stroke: rgba(0, 114, 198, 0.3); stroke-width: 1; }
.lldim-label { fill: rgba(0, 93, 163, 0.85); font: 500 8px var(--font-mono); }
.lldim.is-active line { stroke: var(--orange); stroke-width: 1.8; }
.lldim.is-active line.ext { stroke: rgba(253, 126, 20, 0.5); }
.lldim.is-active .lldim-label { fill: #e06b00; font-weight: 700; }
/* Part-highlight variants (door outline / floor) used by the ADA fields */
.lldim.is-active .svg-door { stroke: var(--orange); stroke-width: 3; }
.lldim.is-active .svg-floor { stroke: var(--orange); }
.lldim.is-active .svg-floorhatch { stroke: rgba(253, 126, 20, 0.5); }
.lldim.is-active .svg-part-label { fill: #e06b00; }
/* 43" ADA visible-glass maximum marker — a limit line, so alert brick */
.svg-ada43 { stroke: var(--brick); stroke-width: 1; stroke-dasharray: 2 3; }
.svg-clear { stroke: var(--orange); stroke-width: 1.8; }
.llval { fill: #e06b00; font: 700 10.5px var(--font-mono); }
.svg-clear-cap { fill: #e06b00; font: 600 7.5px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }

.calc-check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.3rem;
  cursor: pointer;
}
.calc-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--cobalt); flex: 0 0 auto; }
/* Checkbox label inherits the field-label treatment (mono uppercase,
   charcoal-soft) so it doesn't compete with body text */
.calc-check span { margin-bottom: 0; }
.calc-result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
  padding: 0.85rem 1.15rem;
  background: var(--charcoal);
  color: var(--canvas);
}
.calc-result-label {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  /* Neutral, not orange: status color belongs to the pass/fail chips alone
     (the old orange labels matched the fail chip and drowned it out) */
  color: rgba(219, 212, 200, 0.75);
}
.calc-result-value { font-family: var(--font-head); font-size: 1.1rem; color: var(--canvas); }
.calc-result-value strong { font-size: 1.5rem; font-weight: 700; }
/* Measurements never wrap mid-value; error sentences (.calc-err) wrap freely. */
.calc-result-value strong:not(.calc-err) { white-space: nowrap; }
.calc-note { font-size: 0.9rem; color: var(--charcoal-soft); margin: 1rem 0 0; max-width: 70ch; }
.calc-field--wide { max-width: 22rem; margin-bottom: 1.3rem; }
.calc-hint { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--charcoal-soft); }

/* Lock-type gating: show only the active lock's fields, results + diagram parts */
#lock-lite-calc[data-lock="cyl"] .ll-mort,
#lock-lite-calc[data-lock="cyl"] .svg-mort { display: none; }
#lock-lite-calc[data-lock="mort"] .ll-cyl,
#lock-lite-calc[data-lock="mort"] .svg-cyl { display: none; }
/* ADA and fire checks are opt-in (checkboxes drive data-ada / data-fire) */
#lock-lite-calc[data-ada="off"] .ll-ada { display: none; }
#lock-lite-calc[data-fire="off"] .ll-fire { display: none; }
/* Wood-kit dimension fields appear only for the matching lite kit (data-kit) */
#lock-lite-calc:not([data-kit="3"]) .ll-kit3,
#lock-lite-calc:not([data-kit="4"]) .ll-kit4 { display: none; }
/* Their labels are deliberately two-line: name on top, the offset hint on
   its own line — the pair only ever appears together, so a consistent second
   line beats a ragged wrap (user decision 2026-09-22) */
.ll-kit3 .calc-hint,
.ll-kit4 .calc-hint { display: block; }
/* Wood-kit section figure: a small cut through the cutout bottom that shows
   what the Width / Lip size fields measure (port of the workbook's two
   sketches). Spans the ADA grid under the kit fields; shown for kits 3-4. */
.ll-kitfig { grid-column: 1 / -1; margin: 0; max-width: 24rem; }
#lock-lite-calc:not([data-kit="3"]):not([data-kit="4"]) .ll-kitfig { display: none; }
.ll-kitsvg {
  display: block;
  width: 100%;
  height: auto;
  background: rgba(0, 114, 198, 0.05); /* same blueprint ground as the plate */
  border: 1px solid var(--line);
}
/* Cut moulding: hatched section (drafting convention) on an antique wash */
.svg-wood { fill: url(#ll-wood-hatch); stroke: var(--cobalt-dark); stroke-width: 1.2; }
.svg-woodhatch { stroke: rgba(0, 93, 163, 0.5); stroke-width: 1; }
.svg-woodwash { fill: rgba(219, 212, 200, 0.75); }
.svg-kit-note { fill: var(--charcoal-soft); font: 500 7.5px var(--font-mono); letter-spacing: 0.03em; }
.svg-kit-tick { stroke: rgba(36, 37, 42, 0.45); stroke-width: 0.8; }
/* Guidance-only disclaimer closing the fire / ADA info cards */
.calc-disclaimer {
  margin-top: 0.6rem !important;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--charcoal-soft);
}
#lock-lite-calc .calc-checkrow { margin-top: 1.1rem; }
#lock-lite-calc .calc-checkrow + .calc-grid { margin-top: 1rem; }
/* Clearance arrow + value flagged when under the fire-listing minimum:
   brick, dashed (a non-color cue), and the caption becomes a bold callout */
.svg-clear.is-fire-bad { stroke: var(--brick); stroke-dasharray: 4 3; }
.llval.is-fire-bad { fill: var(--brick); }
.svg-clear-cap.is-fire-bad { fill: var(--brick); font: 700 8.5px var(--font-mono); }
/* ADA violation: the same treatment on the visible-glass AFF dimension —
   brick, dashed, bold callout label — plus the glass itself and the 43" limit
   line go brick. Declared after .is-active so it holds while hovering. */
.lldim.is-ada-bad line { stroke: var(--brick); stroke-width: 1.8; stroke-dasharray: 4 3; }
.lldim.is-ada-bad line.ext { stroke: rgba(205, 59, 41, 0.6); stroke-dasharray: none; }
.lldim.is-ada-bad .lldim-label { fill: var(--brick); font: 700 8.5px var(--font-mono); }
.svg-glass.is-ada-bad { fill: rgba(205, 59, 41, 0.22); stroke: var(--brick); stroke-width: 1.5; stroke-dasharray: 4 3; }
.svg-ada43.is-ada-bad { stroke-width: 2; stroke-dasharray: 4 3; }

/* Stacked multi-row result panel */
.calc-result--stack { flex-direction: column; align-items: stretch; gap: 0.85rem; }
.calc-result-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.calc-result--stack .calc-result-label { color: rgba(219, 212, 200, 0.75); }
.calc-result--stack .calc-result-value strong { font-size: 1.5rem; }
.calc-result .calc-err { font-family: var(--font-body); font-size: 0.92rem; font-weight: 700; color: var(--brick-light); }
.calc-result .calc-err::before { content: "\26A0  "; white-space: pre; }
/* A failing verdict row: the measured value goes alert red too */
.calc-result-row.is-bad .calc-result-value strong { color: var(--brick-light); }
.calc-result-row.is-bad .calc-result-label { color: var(--brick-light); }
/* Result computed from placeholder example values */
.calc-result-value .is-default { opacity: 0.55; }
.llval.is-default { opacity: 0.6; }

/* ADA subsection heading inside the calculator form */
.calc-subhead {
  font-family: var(--font-mono);
  margin: 1.2rem 0 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cobalt);
}
.calc-field--span { grid-column: 1 / -1; max-width: 22rem; }

/* ADA verdict chips in the result panel */
.calc-result-row--ada { border-top: 1px solid var(--line-dark); padding-top: 0.85rem; }
.calc-result-value--ada { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.calc-result-req { text-transform: none; letter-spacing: 0.02em; opacity: 0.75; }
.ada-chip {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.18rem 0.55rem;
  border: 1px solid currentColor;
  text-align: right;
}
/* Semantic status colors on charcoal: vibrant green outline for pass; fail is
   a solid ALERT-brick badge with a warning icon so it can't be missed */
.ada-chip--ok { color: #86d18f; }
.ada-chip--bad {
  color: #fff;
  background: var(--brick);
  border-color: var(--brick-light);
  font-weight: 700;
}
.ada-chip--bad::before { content: "\26A0  "; white-space: pre; }
.ada-chip--bad.is-default { opacity: 0.8; }

/* (The callout, key-list, badges, footnote, and page-foot components from
   earlier iterations were retired 2026-09-10 — acronyms are now inline,
   the NFPA mark lives in its group header, and Good-to-know is a banner
   note. See git history if a page needs one back.) */

/* ============================================================
   Compact document pages (Forms & Calculators, Cut Sheets, Warranty)
   Applied via class="compact" on <main>.
   ============================================================ */
/* Compact banners keep the smaller title but share the standard banner
   rhythm (padding/breadcrumb spacing unified 2026-09-10 — the calculator
   pages read squished with their own tighter values). */
.compact .page-banner h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); }
.compact .page-intro { font-size: 1rem; }
.compact .section { padding-block: clamp(1.8rem, 3vw, 2.5rem); }
/* Category differentiation is geometric (user decision 2026-09-10):
   headers hang left with no rule of their own, rows indent beneath them,
   and generous space separates the groups. */
/* Cap the group block to the row content's width so the hairlines end
   near the chip column and the count/badge tuck in instead of hanging
   at the container's far right edge. */
.compact .spec-group { margin-top: 3.25rem; max-width: 56rem; }
.compact .spec-group:first-of-type { margin-top: 0; }
.compact .spec-group-head {
  padding-bottom: 0;
  margin-bottom: 0.5rem;
  border-bottom: none;
}
.compact .spec-group-head .count { font-size: 0.68rem; }
.compact .spec-group .doc-row { margin-left: 1.25rem; }

/* Calculator card on the compact pages: roomier than the old tile look
   now that it sits alone on the white band */
.compact .calc { padding: clamp(1.4rem, 3vw, 2rem); margin-bottom: 0.65rem; }
.compact .calc-title { font-size: clamp(1.4rem, 3vw, 1.8rem); }
.compact .calc-grid { gap: 1rem 1.4rem; }
.compact .calc-grid-hint { font-size: 0.92rem; }

/* Door Weight: fixed two-column field grid — Width | Length on the first
   row, Core | Thickness on the second (user request 2026-09-10) */
#door-weight-calc .calc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#door-weight-calc .calc-grid-hint { margin-bottom: 1.6rem; }
@media (max-width: 560px) {
  #door-weight-calc .calc-grid { grid-template-columns: 1fr; }
}

/* Single consolidated instruction block above the input grid */
.calc-instructions { margin: 0.3rem 0 1.1rem; }
.calc-instructions .calc-intro { margin: 0; }

/* Mobile: tool-row actions wrap below the text */
@media (max-width: 940px) {
  .doc-actions { width: 100%; justify-content: flex-start; }
}