/* ==========================================================================
   CinemaBoards — design system
   Warm off-white ground, charcoal type, restrained brass accent.
   ========================================================================== */

:root {
  /* Surface */
  --paper:      #FBF9F5;
  --paper-2:    #F4F0E8;
  --paper-3:    #EDE8DE;
  --char:       #1D1B18;
  --char-2:     #2A2723;

  /* Ink */
  --ink:        #1A1815;
  --ink-2:      #4C463D;
  --ink-3:      #6D665D;
  --on-char:    #F4F0E8;
  --on-char-2:  #B3ABA0;

  /* Accent */
  --brass:      #876029;
  --brass-mid:  #B5873F;
  --brass-lt:   #CBA466;

  /* Lines */
  --line:       #E3DCD0;
  --line-2:     #D2C9BA;
  --line-dark:  #3A3630;

  /* Type */
  --display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Rhythm */
  --gut: clamp(20px, 5vw, 40px);
  --sec: clamp(64px, 9vw, 128px);
  --max: 1240px;
  --measure: 62ch;

  color-scheme: light;   /* brand is a warm off-white ground; keep form controls light */

  --radius: 3px;
  --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--brass);
}

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

/* ---------- Focus ---------- */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--char); color: var(--on-char);
  padding: 14px 20px; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: var(--sec); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--dark { background: var(--char); color: var(--on-char); }
.section--tint { background: var(--paper-2); }
.section--line { border-top: 1px solid var(--line); }
.section--dark .section--line { border-color: var(--line-dark); }

/* ---------- Type ---------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; letter-spacing: -0.021em; margin: 0; color: var(--ink); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--on-char); }

h1, .h1 { font-size: clamp(2.5rem, 5.6vw, 4.25rem); line-height: 1.04; letter-spacing: -0.03em; }
h2, .h2 { font-size: clamp(1.85rem, 3.4vw, 2.85rem); line-height: 1.12; letter-spacing: -0.026em; }
h3, .h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.25; font-weight: 500; letter-spacing: -0.014em; }
h4, .h4 { font-size: 1.0625rem; line-height: 1.35; font-weight: 600; letter-spacing: -0.006em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
.lede { font-size: clamp(1.0625rem, 1.55vw, 1.25rem); line-height: 1.6; color: var(--ink-2); max-width: var(--measure); }
.section--dark .lede { color: var(--on-char-2); }
.prose { max-width: var(--measure); color: var(--ink-2); }
.small { font-size: .875rem; line-height: 1.55; color: var(--ink-3); }
.section--dark .small { color: var(--on-char-2); }
.note {
  font-size: .8125rem; line-height: 1.55; color: var(--ink-3);
  border-left: 2px solid var(--line-2); padding-left: 14px; max-width: 60ch;
}
.section--dark .note { color: var(--on-char-2); border-color: var(--line-dark); }

.eyebrow {
  font-family: var(--display);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--brass); margin: 0 0 18px;
}
.section--dark .eyebrow { color: var(--brass-lt); }
.eyebrow--muted { color: var(--ink-3); }

.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.section--dark .rule { border-color: var(--line-dark); }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,249,245,.92);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header__bar { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex: 0 0 auto; }
.brand__mark { width: 26px; height: auto; color: var(--ink); flex: 0 0 auto; }
.brand__name {
  font-family: var(--display); font-size: 1.28rem; font-weight: 500;
  letter-spacing: -.025em; color: var(--ink); line-height: 1;
}
.brand__desc {
  display: block; font-family: var(--display); font-size: .5625rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
  margin-top: 5px; line-height: 1.1;
}

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav__link {
  display: inline-block; padding: 9px 13px; text-decoration: none;
  font-size: .9375rem; font-weight: 500; color: var(--ink-2); border-radius: var(--radius);
  transition: color .15s ease, background-color .15s ease;
}
.nav__link:hover { color: var(--ink); background: var(--paper-3); }
.nav__link[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brass); border-radius: 0; }

/* Dropdown */
.nav__group { position: relative; }
.nav__toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 13px; background: none; border: 0; cursor: pointer;
  font-size: .9375rem; font-weight: 500; color: var(--ink-2); border-radius: var(--radius);
}
.nav__toggle:hover { color: var(--ink); background: var(--paper-3); }
.nav__toggle[aria-expanded="true"] { color: var(--ink); background: var(--paper-3); }
.nav__toggle.is-current { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brass); border-radius: 0; }
.nav__chev { width: 9px; height: 9px; transition: transform .18s ease; }
.nav__toggle[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.nav__menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  min-width: 292px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 44px -18px rgba(26,24,21,.28);
  padding: 8px; margin: 0; list-style: none;
}
.nav__menu[hidden] { display: none; }
.nav__menu a {
  display: block; padding: 11px 13px; text-decoration: none; border-radius: var(--radius);
}
.nav__menu a:hover { background: var(--paper-2); }
.nav__menu strong { display: block; font-size: .9375rem; font-weight: 550; color: var(--ink); }
.nav__menu span { display: block; font-size: .8125rem; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }

.nav__cta { margin-left: 10px; }

/* Mobile toggle */
.burger {
  display: none; margin-left: auto; align-items: center; gap: 9px;
  background: none; border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 9px 13px; cursor: pointer; font-size: .875rem; font-weight: 550; color: var(--ink);
}
.burger__icon { width: 15px; height: 11px; position: relative; }
.burger__icon i {
  position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.burger__icon i:nth-child(1) { top: 0; }
.burger__icon i:nth-child(2) { top: 4.75px; }
.burger__icon i:nth-child(3) { top: 9.5px; }
.burger[aria-expanded="true"] .burger__icon i:nth-child(1) { transform: translateY(4.75px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__icon i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__icon i:nth-child(3) { transform: translateY(-4.75px) rotate(-45deg); }

.mobilenav { display: none; border-top: 1px solid var(--line); background: var(--paper); }
.mobilenav[hidden] { display: none !important; }
.mobilenav ul { list-style: none; margin: 0; padding: 12px 0 28px; }
.mobilenav a {
  display: block; padding: 14px 0; text-decoration: none; font-size: 1.0625rem;
  font-weight: 500; border-bottom: 1px solid var(--line);
}
.mobilenav .sub a { padding-left: 18px; font-size: .9688rem; color: var(--ink-2); font-weight: 400; }
.mobilenav .btn { margin-top: 22px; width: 100%; }
.mobilenav__label {
  font-family: var(--display); font-size: .6875rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3); padding: 20px 0 6px;
}

/* The quote button belongs in the header at every width. On desktop it sits at
   the end of the nav; below 960px the nav is replaced by the menu button, so a
   compact copy appears beside it rather than being buried one tap deep. */
.header__bar > .header__cta { display: none; margin-left: auto; white-space: nowrap; gap: .3em; }

@media (max-width: 960px) {
  .nav { display: none; }
  .header__bar > .header__cta { display: inline-flex; }
  .burger { display: inline-flex; margin-left: 0; }
  .mobilenav { display: block; }
  .header__bar { gap: 16px; }
}
/* At 320px the brand, the quote button and the menu button no longer fit side
   by side. Collapse the menu button to its icon — the label stays in the
   accessibility tree, so its name and the open/close state are unchanged. */
@media (max-width: 400px) {
  .burger [data-burger-label] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  .burger { gap: 0; padding: 9px 10px; }
  .brand__name { font-size: 1.0625rem; }
  .header__bar { gap: 8px; }
}

@media (max-width: 560px) {
  /* "Request a Quote" will not fit beside the brand and the menu button on a
     phone, so the button reads "Quote". aria-label keeps the full name. */
  .header__cta-long { display: none; }
  .header__bar > .header__cta { padding: 9px 14px; }
  .header__bar { min-height: 64px; gap: 10px; }
  .brand__desc { display: none; }
  .brand__name { font-size: 1.125rem; }
  .brand { gap: 9px; }
  .brand__mark { width: 22px; }
  .burger { padding: 8px 11px; font-size: .8125rem; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 26px; border-radius: var(--radius);
  font-family: var(--display); font-size: .9375rem; font-weight: 550; letter-spacing: -.005em;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--char); color: var(--paper); border-color: var(--char); }
.btn--primary:hover { background: var(--brass); border-color: var(--brass); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(26,24,21,.03); }
.btn--sm { padding: 10px 17px; font-size: .875rem; }
.section--dark .btn--primary { background: var(--brass); border-color: var(--brass); color: #fff; }
.section--dark .btn--primary:hover { background: var(--brass-mid); border-color: var(--brass-mid); }
.section--dark .btn--ghost { color: var(--on-char); border-color: var(--line-dark); }
.section--dark .btn--ghost:hover { border-color: var(--on-char-2); background: rgba(255,255,255,.04); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

.tlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 550; font-size: .9375rem;
  text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--line-2); padding-bottom: 3px;
  transition: color .15s ease, border-color .15s ease;
}
.tlink:hover { color: var(--brass); border-color: var(--brass); }
.tlink svg { width: 13px; height: 13px; }
.section--dark .tlink { color: var(--on-char); border-color: var(--line-dark); }
.section--dark .tlink:hover { color: var(--brass-lt); border-color: var(--brass-lt); }

/* ---------- Figures ---------- */
figure { margin: 0; }
.fig img { width: 100%; border-radius: var(--radius); background: var(--paper-3); }
.fig--plate > picture > img {
  background: #fff; border: 1px solid var(--line);
  padding: clamp(16px, 2.6vw, 36px); border-radius: var(--radius);
}
.fig figcaption, .caption {
  margin-top: 12px; font-size: .75rem; letter-spacing: .04em;
  color: var(--ink-3); display: flex; gap: 8px; align-items: baseline;
}
.section--dark .fig figcaption, .section--dark .caption { color: var(--on-char-2); }
.tag {
  flex: 0 0 auto; font-family: var(--display); font-size: .625rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brass);
  border: 1px solid var(--line-2); border-radius: 2px; padding: 2px 7px;
}
.section--dark .tag { color: var(--brass-lt); border-color: var(--line-dark); }

/* ---------- Hero ----------
   Grid areas so the mobile order is headline, lede, button, image, note.    */
.hero { padding-top: clamp(40px, 6vw, 84px); padding-bottom: clamp(48px, 7vw, 92px); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  grid-template-areas: "copy media" "note media";
  column-gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.hero__copy { grid-area: copy; max-width: 620px; align-self: center; }
.hero__media { grid-area: media; align-self: center; }
.hero__note  { grid-area: note; margin-top: 28px; align-self: start; }
.hero h1 { margin-bottom: 24px; }
.hero .lede { margin-bottom: 32px; }
@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "media" "note";
  }
  .hero__copy { max-width: none; }
  .hero__media { margin-top: 36px; }
  .hero__note { margin-top: 24px; }
}

/* ---------- Grids ---------- */
.grid { display: grid; gap: clamp(24px, 3vw, 40px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid--split { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); align-items: start; gap: clamp(32px, 5vw, 72px); }
.grid--split-r { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); align-items: center; gap: clamp(32px, 5vw, 72px); }
/* Installation photographs: a lead frame, then a supporting pair.
   No fixed aspect ratio and no cropping — the photographs differ in shape and
   are left that way, so nothing important is cut off a board edge. The lead is
   capped rather than full-bleed so a 1280px original is never stretched thin.
   On a phone the three simply stack in DOM order, strongest first, no carousel. */
.shots__lead { max-width: 860px; }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid--2, .grid--split, .grid--split-r { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) { .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } }

.sechead { max-width: 760px; margin-bottom: clamp(36px, 4.5vw, 60px); }
.sechead h2 { margin-bottom: 18px; }

/* ---------- Route cards ---------- */
.route {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line-2); padding-top: 22px;
}
.route__img { margin-bottom: 22px; border-radius: var(--radius); overflow: hidden; background: var(--paper-3); }
.route__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.route:hover .route__img img { transform: scale(1.028); }
.route h3 { margin-bottom: 12px; }
.route p { color: var(--ink-2); font-size: .9688rem; margin-bottom: 20px; }
.route ul { margin: 0 0 22px; padding-left: 18px; color: var(--ink-2); font-size: .9375rem; }
.route ul li { margin-bottom: 5px; }
.route .tlink { margin-top: auto; align-self: flex-start; }

/* ---------- Feature list ---------- */
.feats { list-style: none; margin: 0; padding: 0; }
.feats li { padding: 22px 0; border-top: 1px solid var(--line); }
.feats li:first-child { border-top: 0; padding-top: 0; }
.section--dark .feats li { border-color: var(--line-dark); }
.feats h3, .feats h4 { margin-bottom: 5px; }
.feats p { color: var(--ink-2); font-size: .9375rem; margin: 0; }
.section--dark .feats p { color: var(--on-char-2); }

/* ---------- Spec table ---------- */
.spec { width: 100%; border-collapse: collapse; text-align: left; }
.spec caption {
  text-align: left; font-family: var(--display); font-weight: 600; font-size: .75rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--brass);
  padding-bottom: 14px;
}
.spec th, .spec td { padding: 15px 16px 15px 0; border-top: 1px solid var(--line); vertical-align: top; font-size: .9375rem; }
.spec thead th { border-top: 0; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; padding-bottom: 10px; }
.spec tbody th { font-weight: 550; color: var(--ink); width: 34%; }
.spec td { color: var(--ink-2); }
.spec td:last-child, .spec th:last-child { padding-right: 0; }
.section--dark .spec th, .section--dark .spec td { border-color: var(--line-dark); }
.section--dark .spec tbody th { color: var(--on-char); }
.section--dark .spec td { color: var(--on-char-2); }
.pending { color: var(--ink-3); font-style: italic; }
@media (max-width: 620px) {
  .spec--kv tbody th, .spec--kv tbody td { display: block; width: auto; padding-right: 0; }
  .spec--kv tbody td { border-top: 0; padding-top: 0; padding-bottom: 16px; }
}

/* ---------- Steps ---------- */
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: clamp(24px,3vw,40px); grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.steps li { counter-increment: s; border-top: 1px solid var(--line-dark); padding-top: 22px; }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  display: block; font-family: var(--display); font-size: .8125rem; font-weight: 600;
  letter-spacing: .1em; color: var(--brass-lt); margin-bottom: 14px;
}
.steps h3 { margin-bottom: 9px; }
.steps p { color: var(--on-char-2); font-size: .9375rem; margin: 0; }

/* ---------- Config cards ---------- */
.config {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); padding: clamp(22px, 2.6vw, 32px);
  display: flex; flex-direction: column;
}
.config__diagram {
  background: var(--paper-2); border-radius: 2px; padding: 16px;
  margin-bottom: 22px; display: flex; align-items: center; justify-content: center;
}
.config__diagram svg { width: 100%; height: auto; }
.config h3 { margin-bottom: 8px; }
.config__dim {
  font-family: var(--display); font-size: .8125rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--brass); margin-bottom: 16px;
}
.config dl { margin: 0 0 20px; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: .875rem; }
.config dt { color: var(--ink-3); }
.config dd { margin: 0; color: var(--ink); text-align: right; }
.config .tlink { margin-top: auto; align-self: flex-start; }

/* ---------- Logo strip ---------- */
.studios { display: flex; flex-wrap: wrap; gap: 14px 0; align-items: center; margin: 0; padding: 0; list-style: none; }
.studios li {
  font-family: var(--display); font-size: clamp(.9375rem, 1.5vw, 1.125rem); font-weight: 500;
  letter-spacing: -.012em; color: var(--ink);
  padding: 0 clamp(16px, 2.2vw, 28px);
  border-left: 1px solid var(--line-2); line-height: 1.2;
}
.studios li:first-child { padding-left: 0; border-left: 0; }
.section--dark .studios li { color: var(--on-char); border-color: var(--line-dark); }

/* Supplied brand assets. Heights are set per logo (--logo-h) rather than shared,
   so the marks balance by eye instead of by pixel. Colours are the studios' own
   and are not altered.

   To render the row in monochrome instead, uncomment the filter below. Check
   each studio's brand guidelines first — several prohibit recolouring.
   .studios--logos img { filter: grayscale(1); opacity: .78; }                */
.studios--logos {
  gap: clamp(26px, 4vw, 54px);          /* spacing instead of rules: a wrapped
                                           row must not start with a divider */
  align-items: center;
}
.studios--logos li {
  display: flex; align-items: center; min-height: 48px;
  padding: 0; border-left: 0;
}
.studios--logos img { height: var(--logo-h, 28px); width: auto; max-width: 100%; }
.studios__tail { margin: 16px 0 0; font-size: .875rem; color: var(--ink-3); }
@media (max-width: 620px) {
  .studios--logos { gap: 20px 34px; }
  .studios--logos li { min-height: 42px; }
  .studios--logos img { height: calc(var(--logo-h, 28px) * .84); }
}
/* Below this width the row wraps; this gap makes it break 3 + 2 rather than
   leaving a single logo stranded on its own line. */
@media (max-width: 480px) { .studios--logos { gap: 20px 40px; } }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 24px 40px 24px 0; position: relative;
  font-family: var(--display); font-size: 1.0625rem; font-weight: 500; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px;
  border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq summary:hover { color: var(--brass); }
.faq__body { padding: 0 clamp(0px, 6vw, 80px) 26px 0; color: var(--ink-2); max-width: 66ch; }

/* ---------- CTA band ---------- */
.cta__grid { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: clamp(28px,4vw,64px); align-items: center; }
@media (max-width: 820px) { .cta__grid { grid-template-columns: 1fr; } }

/* ---------- Form ---------- */
.form { max-width: 620px; }
.field { margin-bottom: 24px; }
.field > label {
  display: block; font-family: var(--display); font-size: .875rem; font-weight: 550;
  color: var(--ink); margin-bottom: 7px;
}
.field .req { color: var(--brass); margin-left: 3px; }
.field .hint { display: block; font-size: .8125rem; color: var(--ink-3); font-weight: 400; margin-top: 3px; }
.field input[type=text], .field input[type=email], .field input[type=url],
.field select, .field textarea {
  width: 100%; padding: 13px 15px; font: inherit; font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237B7369' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 12px; padding-right: 40px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(145,103,44,.14); }
.field[data-invalid] input, .field[data-invalid] select, .field[data-invalid] textarea { border-color: #A3341F; }
.field__error { display: none; margin-top: 7px; font-size: .8125rem; color: #A3341F; font-weight: 500; }
.field[data-invalid] .field__error { display: block; }
.grid--form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 24px; }
@media (max-width: 620px) { .grid--form { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formstatus { margin-bottom: 26px; padding: 18px 20px; border-radius: var(--radius); font-size: .9375rem; border: 1px solid; }
.formstatus[hidden] { display: none; }
.formstatus--err { background: #FCF2EF; border-color: #E3B8AC; color: #7E2917; }
.formstatus--ok { background: #F1F5EE; border-color: #BFCFB2; color: #33502A; }
.formstatus--warn { background: #FBF5E8; border-color: #E0CE9F; color: #6B5218; }
.formstatus__title { font-family: var(--display); font-size: 1rem; font-weight: 600; margin: 0 0 5px; color: inherit; }
.formstatus p { margin: 0; }
.formsubmit { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; }

/* ---------- Footer ---------- */
.footer { background: var(--char); color: var(--on-char-2); padding-block: clamp(56px, 7vw, 88px) 40px; }
.footer a { color: var(--on-char-2); text-decoration: none; }
.footer a:hover { color: var(--on-char); }
.footer__grid { display: grid; grid-template-columns: minmax(0,1.5fr) repeat(3, minmax(0,1fr)); gap: clamp(28px,4vw,56px); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer .brand__name { color: var(--on-char); }
.footer .small, .footer .brand__desc { color: var(--on-char-2); }
.footer .brand__mark { color: var(--on-char); }
.footer__label {
  font-family: var(--display);
  font-size: .6875rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--on-char-2); margin: 0 0 18px; line-height: 1.3;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 11px; font-size: .9375rem; }
.footer__bottom {
  margin-top: clamp(44px, 6vw, 72px); padding-top: 26px; border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; font-size: .8125rem;
}
.footer__contact { font-size: .9375rem; line-height: 1.9; }
.footer__contact a { color: var(--on-char); }

/* ---------- Utilities ---------- */
.stack > * + * { margin-top: 20px; }
.mt-s { margin-top: 18px; } .mt-m { margin-top: 30px; } .mt-l { margin-top: 48px; }
.mb-m { margin-bottom: 30px; } .mb-l { margin-bottom: 48px; }
.center { text-align: center; }
.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; }
.nowrap { white-space: nowrap; }

/* ---------- Feature cells (image-free construction grid) ---------- */
.featcell { border-top: 1px solid var(--line-2); padding-top: 20px; }
.featcell h3 { margin-bottom: 8px; }
.featcell p { color: var(--ink-2); font-size: .9375rem; margin: 0; }

/* ---------- Feature cells (image-free benefit grid) ---------- */
.featcell { border-top: 1px solid var(--line-2); padding-top: 20px; }
.featcell h3 { margin-bottom: 8px; }
.featcell p { color: var(--ink-2); font-size: .9375rem; margin: 0; }

/* ---------- Configuration card note ---------- */
.config__note { font-size: .875rem; color: var(--ink-2); margin-bottom: 18px; }

/* ---------- Contact-first block on the quote page ---------- */
.contactfirst {
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--paper-2); padding: 20px 22px; margin-bottom: 34px;
}
.contactfirst h2 { margin-bottom: 8px; }
.contactfirst p { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }

/* ---------- Quote page sidebar ---------- */
.quoteaside { border-left: 1px solid var(--line); padding-left: clamp(20px, 3vw, 40px); }
@media (max-width: 900px) {
  .quoteaside { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 36px; margin-top: 8px; }
}

/* ---------- Wide tables scroll inside their own box, never the page ------- */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.tablewrap .spec { min-width: 460px; }
.tablewrap + .note { margin-top: 18px; }

/* Long headings must never widen their container */
h1, h2, h3, h4, .lede, p, td, th, dd, dt { overflow-wrap: break-word; }

/* ---------- Text-only hero (pages with no honest photograph yet) ---------- */
.hero--text .wrap { max-width: 900px; margin-inline: 0; }
.hero--text h1 { max-width: 15ch; }
.hero--text .lede { max-width: 58ch; }

/* ---------- Portrait hero image ---------- */
.hero__media--portrait { max-width: 430px; margin-inline: auto; }
@media (max-width: 900px) { .hero__media--portrait { max-width: 340px; margin-inline: 0; } }

/* ---------- Measured drawings ---------- */
.drawing { margin: 0; }
.drawing > svg {
  width: 100%; height: auto; display: block;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(10px, 1.6vw, 18px);
}
.section--tint .drawing > svg { background: var(--paper); }
.drawing figcaption {
  margin-top: 12px; font-size: .75rem; letter-spacing: .04em;
  color: var(--ink-3); display: flex; gap: 8px; align-items: baseline;
}

/* ---------- Invitation row ---------- */
/* A quote prompt placed directly after the installation photographs, where the
   evidence has just landed. Deliberately not a dark full-width band: three of
   those on one page stop registering. */
.invite {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px 32px;
  padding: clamp(22px, 3vw, 30px) clamp(24px, 3.4vw, 36px);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
}
.invite h3 { margin-bottom: 6px; }
.invite p { color: var(--ink-2); max-width: 52ch; }