/* ==========================================================================
   Utah Factory Direct LLC - site stylesheet
   One stylesheet for the whole site. Sections are labeled below.

   COLOR AND TYPE ARE SET IN ONE PLACE: the ":root" block directly below.
   Change a value there and it changes everywhere on the site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS (colors, type, spacing, corner radius)
   -------------------------------------------------------------------------- */
:root {
  /* Palette. Achromatic, deliberately: every neutral below has equal red,
     green, and blue channels, so nothing on the page carries a warm cast.
     The single accent is the color of glass seen edge-on, because that is
     the one color the product actually has. It appears on the primary
     button, on links, and on the interactive states of controls: hover,
     focus rings, and selected. Nowhere else. */
  --ink:          #161616;   /* text on light backgrounds */
  --ink-soft:     #555555;   /* secondary text on light backgrounds */
  --deep:         #0B0B0B;   /* darkest ground: hero, request, footer */
  --dark:         #151515;   /* dark section background */
  --panel-dark:   #202020;   /* cards and panels on dark grounds */
  --accent:       #157782;   /* glass teal. buttons, selected states */
  --accent-d:     #0F5A63;   /* button hover, link text on light grounds */
  --accent-l:     #7FD1DC;   /* links and focus on dark grounds */
  --bg:           #FCFCFC;   /* light section background, near-white */
  --bg-2:         #F3F3F3;   /* alternate light section background, off-white */
  --line:         #E1E1E1;   /* hairline borders on light */
  --line-dark:    #2E2E2E;   /* hairline borders on dark */
  --gray-mid:     #8A8A8A;   /* list ticks, quiet marks */
  --white:        #FFFFFF;
  --error:        #B3261E;   /* form validation. semantic red, not palette */
  --text-on-dark: #EDEDED;   /* body text on dark grounds */
  --soft-on-dark: #A6A6A6;   /* secondary text on dark grounds */
  --glass:        #DCEBEE;   /* SVG glass tint, accent family */
  --glass-2:      #EDF4F6;   /* SVG lighter glass tint */

  /* Type. System UI first, so Apple renders San Francisco and Windows
     renders Segoe UI. No webfont is loaded: with system-ui in front, a
     webfont fallback would render for almost nobody, and zero font loads
     beats one. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Type scale. The clamps keep the hero genuinely large on a desktop and
     still large, but wrappable, on a 375px phone. */
  --size-hero:    clamp(2.9rem, 10.5vw, 7.5rem);
  --size-h2:      clamp(2.2rem, 5.5vw, 4rem);
  --size-h3:      clamp(1.2rem, 2vw, 1.45rem);
  --size-lede:    clamp(1.1rem, 1.6vw, 1.3rem);

  /* One corner radius for the whole site. Do not add others. */
  --radius: 6px;

  /* Layout */
  --measure: 66ch;
  --wrap: 1140px;
  --gutter: 20px;
  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. RESET AND BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 0.5em;
  letter-spacing: -0.02em;
}
h1 { line-height: 1.02; letter-spacing: -0.03em; }

h1 { font-size: var(--size-hero); }
h2 { letter-spacing: -0.025em; }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); line-height: 1.3; }
h4 { font-size: 1.05rem; font-family: var(--font-sans); font-weight: 700; }

p, li { max-width: var(--measure); }
p { margin: 0 0 1.1em; }

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

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

/* Skip link for keyboard and screen reader users */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--deep); color: var(--white);
  padding: 12px 18px; z-index: 200; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: var(--white); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* Anchor jumps land below the sticky header instead of underneath it. */
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }
.wrap-narrow { max-width: 820px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. HEADER AND WORDMARK
   Sticky on every page. JavaScript adds .is-condensed after the page scrolls,
   which tightens the padding. Without JavaScript it simply stays full height.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--deep);
  border-bottom: 1px solid var(--line-dark);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 28px; flex-wrap: wrap;
  padding-top: 18px; padding-bottom: 18px;
  transition: padding 0.25s ease;
}
.site-header.is-condensed .wrap { padding-top: 10px; padding-bottom: 10px; }

/* The wordmark is pure type. No icon, by design. */
.wordmark { text-decoration: none; color: var(--white); display: inline-block; line-height: 1; }
.wordmark:hover { color: var(--white); }
.wordmark .wm-top {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--soft-on-dark); margin-bottom: 5px;
}
.wordmark .wm-main {
  display: block;
  font-family: var(--font-sans);
  font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em;
}
.wordmark .wm-rule {
  display: block; width: 44px; height: 2px;
  background: var(--white); margin-top: 6px;
  transition: width 0.25s ease;
}
.site-header.is-condensed .wm-rule { width: 26px; }

.site-nav { display: flex; align-items: center; gap: 8px 24px; flex-wrap: wrap; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.site-nav li { max-width: none; }
.site-nav a:not(.btn) {
  text-decoration: none; color: var(--soft-on-dark);
  font-size: 0.92rem; font-weight: 600; padding: 6px 0; display: inline-block;
  border-bottom: 2px solid transparent;
}
.site-nav a:not(.btn):hover { color: var(--white); border-bottom-color: var(--white); }
.site-nav .btn { padding: 10px 18px; font-size: 0.92rem; }

/* --------------------------------------------------------------------------
   4. BANDS. Full-bleed sections, one idea each.
   .band-deep   near-black (hero, request)
   .band-dark   dark slate
   .band-light  paper
   .band-tint   darker paper
   -------------------------------------------------------------------------- */
.band { padding: clamp(84px, 12vh, 150px) 0; }
.band-deep  { background: var(--deep);  color: var(--text-on-dark); }
.band-dark  { background: var(--dark); color: var(--text-on-dark); }
.band-light { background: var(--bg); color: var(--ink); }
.band-tint  { background: var(--bg-2); color: var(--ink); }

.band-deep h1, .band-deep h2, .band-deep h3,
.band-dark h1, .band-dark h2, .band-dark h3 { color: var(--white); }
.band-deep a, .band-dark a { color: var(--accent-l); }
.band-deep a:hover, .band-dark a:hover { color: var(--white); }

.eyebrow {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 18px; max-width: none;
}
.band-deep .eyebrow, .band-dark .eyebrow { color: var(--soft-on-dark); }

.lede { font-size: var(--size-lede); color: var(--ink-soft); line-height: 1.6; }
.band-deep .lede, .band-dark .lede { color: var(--soft-on-dark); }

/* --------------------------------------------------------------------------
   5. HERO. Mostly type and space. Fills the first viewport.
   -------------------------------------------------------------------------- */
.hero {
  min-height: calc(100svh - var(--header-h));
  display: flex; align-items: center;
  padding: clamp(64px, 10vh, 120px) 0;
}
.hero h1 { max-width: 13ch; margin-bottom: 0.4em; }
.hero .lede { max-width: 54ch; }
.hero-claim {
  font-size: var(--size-lede); color: var(--text-on-dark);
  border-left: 3px solid var(--white); padding-left: 18px;
  margin: 30px 0 38px; max-width: 46ch;
}
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* --------------------------------------------------------------------------
   6. BUTTONS (one radius, no pills)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block; border: 0; cursor: pointer;
  background: var(--accent); color: var(--white);
  font-family: var(--font-sans); font-size: 1rem; font-weight: 700;
  padding: 15px 28px; border-radius: var(--radius);
  text-decoration: none; text-align: center; line-height: 1.3;
}
.btn:hover { background: var(--accent-d); color: var(--white); }
.btn:disabled, .btn[aria-disabled="true"] { background: #8F8F8F; cursor: not-allowed; }
.btn-block { display: block; width: 100%; }
.btn-quiet {
  background: transparent; color: var(--text-on-dark);
  border: 2px solid var(--line-dark); padding: 13px 26px;
}
.btn-quiet:hover { background: var(--panel-dark); color: var(--white); border-color: var(--panel-dark); }
.band-light .btn-quiet, .band-tint .btn-quiet, .thanks .btn-quiet {
  color: var(--ink); border-color: var(--ink);
}
.band-light .btn-quiet:hover, .band-tint .btn-quiet:hover, .thanks .btn-quiet:hover {
  background: var(--deep); color: var(--white); border-color: var(--deep);
}

/* --------------------------------------------------------------------------
   7. SCROLL REVEALS
   Elements with class "reveal" fade up as they enter the viewport.
   The hidden starting state only exists when BOTH are true:
     - JavaScript is running (html gets the "js" class), and
     - the visitor has not asked for reduced motion.
   With JavaScript off, or reduced motion on, everything is simply visible.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0; transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  html.js .reveal.is-in { opacity: 1; transform: none; }
  html.js .reveal-d1 { transition-delay: 0.12s; }
  html.js .reveal-d2 { transition-delay: 0.24s; }
  html.js .reveal-d3 { transition-delay: 0.36s; }
}

/* --------------------------------------------------------------------------
   8. CARDS AND THE "WHAT WE DO / DO NOT DO" PAIR
   -------------------------------------------------------------------------- */
.cols-2 { display: grid; grid-template-columns: 1fr; gap: 28px; }
.cols-3 { display: grid; grid-template-columns: 1fr; gap: 24px; }

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px;
}
.band-dark .card, .band-deep .card {
  background: var(--panel-dark); border-color: var(--line-dark);
}
.card h3 { margin-top: 0; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card-do   { border-top: 4px solid var(--deep); }
.card-dont { border-top: 4px solid var(--line); }

.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li {
  padding: 11px 0 11px 26px; position: relative;
  border-bottom: 1px solid var(--line); max-width: none;
}
.band-dark .plain-list li, .band-deep .plain-list li { border-bottom-color: var(--line-dark); }
.plain-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.plain-list li::before {
  content: ""; position: absolute; left: 0; top: 20px;
  width: 12px; height: 2px; background: var(--gray-mid);
}
.card-do .plain-list li::before { background: var(--gray-mid); }

/* --------------------------------------------------------------------------
   9. PROCESS STEPS (numbered, no images)
   -------------------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps > li {
  position: relative; padding: 0 0 38px 70px; max-width: none;
  counter-increment: step;
}
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 46px; height: 46px; border-radius: var(--radius);
  background: var(--white); color: var(--deep);
  font-family: var(--font-sans); font-size: 1.3rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.band-light .steps > li::before, .thanks .steps > li::before { background: var(--deep); color: var(--white); }
.steps > li::after {
  content: ""; position: absolute; left: 22px; top: 54px; bottom: 10px;
  width: 2px; background: var(--line-dark);
}
.band-light .steps > li::after, .thanks .steps > li::after { background: var(--line); }
.steps > li:last-child { padding-bottom: 0; }
.steps > li:last-child::after { display: none; }
.steps h3 { margin-bottom: 6px; }
.steps p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   10. FACTORY DIRECT: THE TWO PATHS (SVG)
   The drawing animates in quietly on scroll: the connecting line draws and
   the stops fade in one after another. Hidden states are gated exactly like
   the reveals in section 7, so with JavaScript off or reduced motion on the
   finished drawing simply shows.
   -------------------------------------------------------------------------- */
.paths { margin-top: 44px; display: grid; gap: 36px; max-width: 860px; }
.path-block h3 {
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--soft-on-dark); margin-bottom: 14px;
}
.path-block .path-note {
  font-size: 0.95rem; color: var(--soft-on-dark); margin: 10px 0 0;
}
.path-svg { width: 100%; height: auto; }
.path-svg .p-line { stroke: #3C3C3C; stroke-width: 2; fill: none; }
.path-svg.path-direct .p-line { stroke: var(--white); stroke-width: 3; }
.path-svg .p-stop rect { fill: var(--dark); stroke: #3C3C3C; stroke-width: 1.5; rx: 6; }
.path-svg .p-stop text { fill: var(--soft-on-dark); }
.path-svg .p-end rect { fill: var(--bg); stroke: var(--bg); rx: 6; }
.path-svg .p-end text { fill: var(--ink); font-weight: 700; }
.path-svg .p-start rect { fill: var(--panel-dark); stroke: var(--line-dark); rx: 6; }
.path-svg .p-start text { fill: var(--white); font-weight: 700; }
.path-svg.path-direct .p-mid rect { fill: var(--dark); stroke: var(--white); stroke-width: 2; rx: 6; }
.path-svg.path-direct .p-mid text { fill: var(--white); font-weight: 700; }
.path-svg text {
  font-family: var(--font-sans); font-size: 26px; letter-spacing: 0.01em;
}

@media (prefers-reduced-motion: no-preference) {
  html.js .paths .p-line {
    stroke-dasharray: 760; stroke-dashoffset: 760;
    transition: stroke-dashoffset 1.4s ease;
  }
  html.js .paths.is-in .p-line { stroke-dashoffset: 0; }
  html.js .paths .p-node { opacity: 0; transition: opacity 0.5s ease; }
  html.js .paths.scroll-driven .p-line,
  html.js .paths.scroll-driven .p-node { transition: none; }
  html.js .paths.is-in .p-node { opacity: 1; }
  html.js .paths.is-in .p-d1 { transition-delay: 0.15s; }
  html.js .paths.is-in .p-d2 { transition-delay: 0.4s; }
  html.js .paths.is-in .p-d3 { transition-delay: 0.65s; }
  html.js .paths.is-in .p-d4 { transition-delay: 0.9s; }
  html.js .paths.is-in .p-d5 { transition-delay: 1.15s; }
}

/* --------------------------------------------------------------------------
   11. WINDOW CROSS-SECTION EXPLORER (SVG)
   The diagram, its clickable hotspots, and the panel that shows one sentence
   per part. With JavaScript off the full legend list shows under the diagram
   instead, so nothing is lost.
   -------------------------------------------------------------------------- */
.xsec { margin-top: 44px; display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
.xsec-figure { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.xsec-svg { width: 100%; height: auto; }

.xsec-svg .x-glass { fill: var(--glass); stroke: var(--ink); stroke-width: 1.5; }
.xsec-svg .x-space { fill: var(--glass-2); stroke: var(--ink); stroke-width: 1; }
.xsec-svg .x-coat  { fill: var(--ink-soft); }
.xsec-svg .x-spacer { fill: var(--bg-2); stroke: var(--ink); stroke-width: 1.5; }
.xsec-svg .x-desic { fill: var(--ink-soft); }
.xsec-svg .x-sealant { fill: var(--ink); }
.xsec-svg .x-frame { fill: var(--white); stroke: var(--ink); stroke-width: 1.5; }
.xsec-svg .x-chamber { fill: var(--bg); stroke: var(--ink); stroke-width: 1; }
.xsec-svg .x-gasket { fill: var(--ink); }
.xsec-svg .x-stop { fill: var(--bg-2); stroke: var(--ink); stroke-width: 1.2; }
.xsec-svg .x-label {
  font-family: var(--font-sans); font-size: 22px; font-weight: 700;
  letter-spacing: 0.12em; fill: var(--ink-soft);
}
.xsec-svg .x-ray { stroke: var(--gray-mid); stroke-width: 2.5; fill: none; }
.xsec-svg .x-ray-head { fill: var(--gray-mid); stroke: none; }
.xsec-svg .x-leader { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 3 3; }

/* Hotspot markers: a circle with a plus. Focusable and clickable. */
.xsec-svg .hot { cursor: pointer; }
.xsec-svg .hot circle {
  fill: var(--deep); stroke: var(--white); stroke-width: 2;
  transition: fill 0.2s ease;
}
.xsec-svg .hot path { stroke: var(--white); stroke-width: 2.5; }
.xsec-svg .hot:hover circle { fill: var(--accent); }
.xsec-svg .hot:focus { outline: none; }
.xsec-svg .hot:focus-visible circle { fill: var(--accent); stroke: var(--ink); stroke-width: 3; }
.xsec-svg .hot[aria-pressed="true"] circle { fill: var(--accent); }

/* Selected part highlight, driven by data-part on the svg root */
.xsec-svg[data-part="outer"]  .r-outer,
.xsec-svg[data-part="coating"] .r-coating,
.xsec-svg[data-part="space"]  .r-space,
.xsec-svg[data-part="inner"]  .r-inner,
.xsec-svg[data-part="spacer"] .r-spacer,
.xsec-svg[data-part="frame"]  .r-frame,
.xsec-svg[data-part="seal"]   .r-seal { stroke: var(--accent); stroke-width: 3; }

/* The one-sentence panel, shown by JavaScript */
.xsec-panel {
  display: none;
  background: var(--white); border: 1px solid var(--line);
  border-left: 4px solid var(--deep);
  border-radius: var(--radius); padding: 24px 26px; min-height: 150px;
}
html.js .xsec-panel { display: block; }
.xsec-panel h3 { margin: 0 0 8px; }
.xsec-panel p { margin: 0; color: var(--ink-soft); }
.xsec-hint { font-size: 0.9rem; color: var(--ink-soft); margin: 14px 0 0; display: none; }
html.js .xsec-hint { display: block; }

/* The static legend: the full list, always present in the page. JavaScript
   hides it and shows the panel instead. Without JavaScript it is the content. */
html.js .xsec-legend { display: none; }
.xsec-legend { list-style: none; margin: 8px 0 0; padding: 0; }
.xsec-legend li { border-top: 1px solid var(--line); padding: 14px 0; max-width: none; }
.xsec-legend strong { display: block; margin-bottom: 2px; }
.xsec-legend span { color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   12. SERVICE AREA
   -------------------------------------------------------------------------- */
.counties { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 8px; }
.county { border-top: 1px solid var(--line); padding: 20px 0; }
.county:last-child { border-bottom: 1px solid var(--line); }
.county h3 { margin: 0 0 4px; font-size: 1.15rem; }
.county p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }

/* --------------------------------------------------------------------------
   13. FAQ (always expanded, no accordion, nothing hidden)
   -------------------------------------------------------------------------- */
.faq { margin-top: 8px; }
.faq-item { border-top: 1px solid var(--line); padding: 30px 0; }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item h3 { margin-bottom: 8px; }
.faq-item p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   14. LEAD FORM. One deliberate step, given room.
   -------------------------------------------------------------------------- */
.request-intro { max-width: 60ch; margin: 0 auto 40px; text-align: center; }
.request-intro .eyebrow { margin-bottom: 14px; }
.request-intro h2 { margin-bottom: 0.4em; }
.request-intro p { margin-left: auto; margin-right: auto; }

.form-shell {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(26px, 4vw, 44px);
  max-width: 640px; margin: 0 auto;
  color: var(--ink);
}
.form-shell h2, .form-shell h3 { margin-top: 0; color: var(--ink); }
.form-shell p { color: var(--ink-soft); }
.form-shell a { color: var(--accent-d); }
.form-shell a:hover { color: var(--ink); }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 0.92rem; font-weight: 700; margin-bottom: 6px; color: var(--ink); }
.field .opt { font-weight: 400; color: var(--ink-soft); }

.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-sans); font-size: 1rem;
  padding: 13px 14px; border: 1px solid #ABABAB; border-radius: var(--radius);
  background: var(--white); color: var(--ink);
}
.field textarea { min-height: 88px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent-d); outline: 3px solid rgba(21, 119, 130, 0.25); outline-offset: 0;
}
.field.has-error input, .field.has-error select { border-color: var(--error); border-width: 2px; }

.field-error {
  display: none; color: var(--error); font-size: 0.88rem;
  font-weight: 600; margin-top: 5px; max-width: none;
}
.field.has-error .field-error { display: block; }

.field-row { display: grid; grid-template-columns: 1fr; gap: 0 16px; }

/* Honeypot. Hidden from people and from assistive technology, visible to
   bots that fill everything in. Do not change this to display:none. */
.hp-field {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* The no-text-messages notice. Readable size on purpose, not fine print. */
.form-note {
  font-size: 1rem; font-weight: 600; color: var(--ink);
  background: var(--bg-2); border-left: 3px solid var(--deep);
  padding: 13px 15px; border-radius: 0 var(--radius) var(--radius) 0;
  margin: 20px 0 18px; max-width: none;
}
.form-legal { font-size: 0.9rem; color: var(--ink-soft); margin: 14px 0 0; max-width: none; }

.form-status {
  display: none; margin: 0 0 16px; padding: 12px 14px;
  border-radius: var(--radius); font-size: 0.95rem; font-weight: 600; max-width: none;
}
.form-status.is-visible { display: block; }
.form-status.is-error { background: rgba(179, 38, 30, 0.08); color: var(--error); border: 1px solid rgba(179, 38, 30, 0.35); } /* derived from --error: semantic red, not palette */

/* --------------------------------------------------------------------------
   15. LEGAL AND CONTENT PAGES
   -------------------------------------------------------------------------- */
.page-head { background: var(--deep); color: var(--text-on-dark); padding: clamp(64px, 10vh, 110px) 0 clamp(48px, 7vh, 80px); }
.page-head h1 { color: var(--white); margin-bottom: 10px; font-size: clamp(2.2rem, 5.5vw, 4rem); }
.page-head p { color: var(--soft-on-dark); margin-bottom: 0; font-size: var(--size-lede); }

.doc { padding: 64px 0 84px; }
.doc h2 { font-size: 1.5rem; margin-top: 2.1em; }
.doc h2:first-of-type { margin-top: 0; }
.doc h3 { font-size: 1.1rem; margin-top: 1.6em; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc .callout {
  background: var(--bg-2); border-left: 3px solid var(--deep);
  padding: 20px 22px; border-radius: 0 var(--radius) var(--radius) 0;
  margin: 26px 0;
}
.doc .callout p:last-child { margin-bottom: 0; }
.doc .effective {
  font-size: 0.92rem; font-weight: 700; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.08em;
  border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 30px;
  max-width: none;
}

/* --------------------------------------------------------------------------
   16. THANK YOU AND 404
   -------------------------------------------------------------------------- */
.thanks { padding: clamp(72px, 10vh, 120px) 0 96px; }
.thanks h1 { max-width: 18ch; font-size: clamp(2.4rem, 6vw, 4.5rem); }

/* --------------------------------------------------------------------------
   17. FOOTER
   This carries the legal identity of the company. It is doing real work for
   a homeowner who is checking whether this business is real. Keep it at a
   readable size and keep all four legal page links in it.
   -------------------------------------------------------------------------- */
.site-footer { background: var(--deep); color: var(--soft-on-dark); padding: 64px 0 40px; border-top: 1px solid var(--line-dark); }
.site-footer a { color: var(--accent-l); }
.site-footer a:hover { color: var(--white); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 36px; }
.site-footer h2 {
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--white);
  margin: 0 0 14px;
}
.footer-identity p { font-size: 0.97rem; margin-bottom: 0.7em; max-width: 42ch; }
.footer-identity .legal-name { color: var(--white); font-weight: 700; font-size: 1.05rem; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 10px; max-width: none; }
.footer-links a { font-size: 0.97rem; }
.footer-bottom {
  border-top: 1px solid var(--line-dark); margin-top: 40px; padding-top: 24px;
  font-size: 0.9rem;
}
.footer-bottom p { margin: 0 0 6px; max-width: none; }

/* --------------------------------------------------------------------------
   18. SPACING UTILITIES
   A small, fixed set of spacing helpers so the HTML pages carry no inline
   style attributes. Do not add more of these.
   -------------------------------------------------------------------------- */
.mt-xs { margin-top: 14px; }
.mt-sm { margin-top: 24px; }
.mt-md { margin-top: 32px; }
.mt-lg { margin-top: 40px; }
.mt-xl { margin-top: 52px; }
.mb-0  { margin-bottom: 0; }
.narrow { max-width: 640px; }
.narrower { max-width: 520px; }
.hero-copy { min-width: 0; }

/* --------------------------------------------------------------------------
   19. RESPONSIVE. Small screens are the default above. These widen it.
   -------------------------------------------------------------------------- */
/* On narrow screens the full header is three rows tall. Once the page scrolls,
   collapse it to the wordmark and the request button so the sticky header does
   not eat a third of a phone screen. The nav links are still at the top of the
   page and in the footer. */
@media (max-width: 719px) {
  .site-header.is-condensed .site-nav ul { display: none; }
  .site-header.is-condensed .wm-top { display: none; }
  .site-header.is-condensed .wm-main { font-size: 1.1rem; }
}

@media (min-width: 560px) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .field-row.row-3 { grid-template-columns: 2fr 1fr; }
}

@media (min-width: 720px) {
  body { font-size: 18px; }
  .cols-2 { grid-template-columns: 1fr 1fr; gap: 32px; }
  .cols-3 { grid-template-columns: repeat(3, 1fr); }
  .counties { grid-template-columns: 1fr 1fr; gap: 0 44px; }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 44px; }
  .xsec { grid-template-columns: 1.35fr 1fr; gap: 36px; }
  .xsec-panel { position: sticky; top: calc(var(--header-h) + 20px); }
}

@media (min-width: 980px) {
  .counties { grid-template-columns: repeat(3, 1fr); }
}

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

/* --------------------------------------------------------------------------
   20. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-nav, .form-shell, .btn { display: none; }
  body { background: #FFFFFF; font-size: 12pt; }
  .band-deep, .band-dark, .page-head, .site-footer { background: #FFFFFF; color: #000000; }
  .band-deep h1, .band-deep h2, .band-dark h2, .page-head h1 { color: #000000; }
}

/* --------------------------------------------------------------------------
   21. PHOTO BANDS
   Full-bleed atmospheric images used as section transitions. The image is a
   real <img> so it carries honest alt text, treated in advance (desaturated,
   darkened) and covered by one flat overlay so any text sits cleanly.
   These are texture, not a gallery: no captions, no pairings, no implication
   that they show this company's work.
   -------------------------------------------------------------------------- */
.band-photo {
  position: relative; overflow: hidden;
  min-height: clamp(240px, 46vh, 460px);
  background: var(--deep);
  padding: 0;
}
.band-photo .band-photo-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.band-photo::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(11, 11, 11, 0.38);
}

/* --------------------------------------------------------------------------
   22. THE 3D WINDOW
   Hidden until the page proves it can run it: JavaScript on, WebGL working,
   and no reduced-motion preference. Only then does html get "threed-on",
   which shows this block and hides the SVG explorer it replaces. In every
   other case the SVG explorer stays, so nothing is ever lost.
   -------------------------------------------------------------------------- */
.threeD { display: none; }
html.threed-on .threeD { display: block; }
/* With the 3D active, the explorer's interactive drawing gives way, but its
   seven-sentence legend stays visible below the 3D story, so every part is
   still reachable as plain text. */
html.threed-on .xsec { display: block; margin-top: 12px; }
html.threed-on .xsec-figure,
html.threed-on .xsec-panel,
html.threed-on .xsec-hint { display: none; }
html.threed-on .xsec-legend { display: block; }
html.threed-on .xsec-intro-copy { margin-bottom: 0; }

.threeD { position: relative; margin-top: 44px; }
.threeD-stage {
  position: sticky; top: calc(var(--header-h) + 8px);
  height: min(62svh, 560px);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2);
  touch-action: pan-y;
}
.threeD-stage canvas { width: 100%; height: 100%; display: block; border-radius: var(--radius); }
.threeD-hint {
  position: absolute; right: 14px; top: 14px; z-index: 2; margin: 0;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--ink-soft); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 6px 10px; max-width: none;
}
.threeD-steps { position: relative; z-index: 1; padding-top: 6vh; }
.threeD-step {
  min-height: 72svh; display: flex; flex-direction: column; justify-content: center;
  max-width: 34ch;
}
.threeD-step h3 { margin-bottom: 8px; }
.threeD-step p { color: var(--ink-soft); margin-bottom: 0.8em; }
.threeD-step { opacity: 0.35; transition: opacity 0.35s ease; }
.threeD-step.is-active { opacity: 1; }

@media (min-width: 900px) {
  .threeD { display: none; }
  html.threed-on .threeD {
    display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start;
  }
  .threeD-steps { order: 1; }
  .threeD-stage { order: 2; }
}

/* --------------------------------------------------------------------------
   23. FACTORY DIRECT, PINNED
   On wide screens the two-path drawing pins while the three paragraphs
   scroll past, and the drawing advances with the scroll. On small screens,
   with JavaScript off, or with reduced motion, the layout stays stacked and
   the drawing simply shows or plays its one quiet entrance.
   -------------------------------------------------------------------------- */
@media (min-width: 980px) {
  html.js .fd-grid {
    display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 56px; align-items: start;
  }
  html.js .fd-copy .fd-step { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; }
  html.js .fd-copy .fd-step:first-child { min-height: 34vh; }
  html.js .fd-grid .paths {
    position: sticky; top: calc(var(--header-h) + 40px);
    margin-top: 0; padding-top: 2vh;
  }
}

/* --------------------------------------------------------------------------
   24. COUNTY MAP
   A stylized map of Utah with the five served counties. Selecting a county
   shows its cities in the panel. The plain list below remains in the page
   and is what shows with JavaScript off; the map replaces it visually when
   JavaScript is available.
   -------------------------------------------------------------------------- */
/* The map only replaces the list once site.js has actually wired it (the
   cmap-on class), mirroring the 3D block's pattern. A script failure leaves
   the plain list visible, never an empty section. */
html.cmap-on .counties { display: none; }
.cmap { display: none; }
html.cmap-on .cmap { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 30px; align-items: start; }
@media (min-width: 720px) {
  html.cmap-on .cmap { grid-template-columns: 1.1fr 0.9fr; gap: 44px; }
}
.cmap-figure {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px;
}
.cmap-svg { width: 100%; height: auto; }
.cmap-svg .st-outline { fill: #F0F0F0; stroke: #BDBDBD; stroke-width: 1.5; }
.cmap-svg .cnty { fill: #DDDDDD; stroke: var(--gray-mid); stroke-width: 1.2; cursor: pointer; transition: fill 0.15s ease; }
.cmap-svg .cnty:hover { fill: #C9C9C9; }
.cmap-svg .cnty:focus { outline: none; }
.cmap-svg .cnty:focus-visible { stroke: var(--accent); stroke-width: 3; }
.cmap-svg .cnty[aria-pressed="true"] { fill: var(--accent); stroke: var(--accent-d); }
.cmap-svg .cmap-label {
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  fill: var(--ink-soft); pointer-events: none;
}
.cmap-svg .cmap-leader { stroke: var(--gray-mid); stroke-width: 1; stroke-dasharray: 3 3; }
.cmap-panel {
  background: var(--white); border: 1px solid var(--line);
  border-left: 4px solid var(--deep);
  border-radius: var(--radius); padding: 24px 26px; min-height: 150px;
}
.cmap-panel h3 { margin: 0 0 8px; }
.cmap-panel p { margin: 0; color: var(--ink-soft); }
.cmap-hint { font-size: 0.9rem; color: var(--ink-soft); margin: 14px 0 0; max-width: none; }