*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Archivo',system-ui,sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--ink);color:var(--paper)}
input,textarea,select,button{font-family:inherit}
a{color:inherit}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

/* JS-driven scroll reveal — applied once body gets .reveal-ready */
.reveal-ready .reveal{opacity:0;transform:translateY(30px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}
.reveal-ready .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal-ready .reveal{opacity:1 !important;transform:none !important;transition:none}}

/* Patent flag — the blinking "Patent Granted" badge in the home hero eyebrow.
   Space Mono and Archivo both top out at 700, so weight alone cannot make this
   read heavier — the boldness comes from a filled --bright badge on dark ink
   plus the size jump (11px -> 16px), which carries far more than 700 does.

   TIMING IS LOAD-BEARING, do not casually retune it. Both WCAG limits are met:
   * 2.3.1 (seizures): .9s cycle = 1.11Hz, well under three flashes per second.
   * 2.2.2 (Pause/Stop/Hide, Level A): anything blinking for MORE THAN FIVE
     SECONDS needs a user control to stop it. 5 iterations x .9s = 4.5s, so it
     stops on its own inside the limit and needs no control. Raising either the
     count or the duration past ~5s total breaks Level A compliance — that is
     why this is a finite count and not `infinite`.

   No animation-fill-mode: when the 5 iterations end the element falls back to
   its own (unset) opacity of 1, i.e. it settles SOLID rather than holding the
   keyframe's dimmed .28. The near-instant 49%->50% step is what makes it read
   as a blink rather than a fade, and the .28 floor (not 0) keeps the badge from
   vanishing outright so the rule line never visibly reflows. */
@keyframes patent-blink{0%,49%{opacity:1}50%,100%{opacity:.28}}
.patent-flag{
  font-family:var(--mono),monospace;font-size:16px;font-weight:700;letter-spacing:2px;
  background:var(--bright);color:var(--ink);padding:6px 16px;border-radius:4px;
  white-space:nowrap;animation:patent-blink .9s linear 5}
@media (prefers-reduced-motion: reduce){.patent-flag{animation:none}}

/* Nav active state */
.masthead-nav a.nav-active{color:var(--ink) !important;border-bottom:1px solid var(--accent);padding-bottom:3px}

@media (max-width:860px){
  .hero-grid,.product-hero,.video-grid,.quote-grid{grid-template-columns:1fr !important;gap:40px !important}
  .shape-grid{grid-template-columns:repeat(3,1fr) !important}
  .selected-grid{grid-template-columns:1fr !important}
  .specs-grid{grid-template-columns:repeat(2,1fr) !important}
  .field-grid{grid-template-columns:1fr !important}
  h1.hero-title{font-size:48px !important;letter-spacing:-1px !important}
  .sec-h2{font-size:34px !important}
  .masthead-nav{display:none !important}
  .hero-badge{left:12px !important;bottom:-132px !important}
}

:root{
  --ink:#12314F; --paper:#F5F0E6; --accent:#B07A16; --bright:#F2B233;
  --deep:#0F2C4C; --band:#EFE8DA; --serif:'Newsreader'; --mono:'Space Mono';
  --head-weight:500; --radius:16px; --sec-pad:96px; --hero-h:560px; --label-tf:uppercase;
}

/* ===== Mobile nav (hamburger) — button + menu injected by site.js ===== */
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:1px solid var(--ink);border-radius:10px;cursor:pointer;padding:0;flex-shrink:0}
.hamburger span{display:block;width:20px;height:2px;background:var(--ink);margin:0 auto;transition:transform .25s ease,opacity .2s ease}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{position:fixed;inset:0;z-index:60;background:var(--paper);display:none;flex-direction:column;padding:92px 28px 40px;transform:translateY(-8%);opacity:0;pointer-events:none;transition:transform .3s ease,opacity .3s ease;overflow-y:auto}
.mobile-menu.open{transform:none;opacity:1;pointer-events:auto}
.mobile-menu a.mm-link{font-family:var(--serif),serif;font-size:32px;letter-spacing:-.5px;color:var(--ink);text-decoration:none;padding:15px 2px;border-bottom:1px solid #d8cfbe}
.mobile-menu a.mm-link.mm-active{color:var(--accent);font-style:italic}
.mobile-menu a.mm-cta{margin-top:26px;text-align:center;font-family:var(--mono),monospace;font-size:13px;letter-spacing:1.5px;text-transform:var(--label-tf);color:var(--paper);background:var(--ink);padding:18px;border-radius:var(--radius);text-decoration:none}
body.menu-open{overflow:hidden}

@media (max-width:860px){
  header{z-index:70 !important}
  .hamburger{display:flex}
  header > div > a:last-of-type{display:none !important}   /* header CTA moves into the menu */
  .mobile-menu{display:flex}
}
/* Quote form fields must be allowed to shrink inside their grid cells,
   otherwise their intrinsic min-width overflows on narrow screens. */
#quote-form input,#quote-form select,#quote-form textarea{width:100%;min-width:0}

@media (max-width:560px){
  :root{--sec-pad:64px;--hero-h:440px}
  header > div{padding-left:20px !important;padding-right:20px !important}
  .form-row{grid-template-columns:1fr !important}   /* stack name/email, phone/type */
}
@media (max-width:480px){
  h1.hero-title{font-size:40px !important;letter-spacing:-.8px !important}
  .sec-h2{font-size:30px !important}
}

/* ===== Sticky mobile quote bar — injected by site.js (not on the Contact page) ===== */
.quote-bar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;align-items:center;gap:14px;justify-content:space-between;background:rgba(245,240,230,.96);backdrop-filter:blur(8px);border-top:1px solid var(--ink);padding:11px 18px;box-shadow:0 -6px 20px rgba(0,0,0,.08)}
.quote-bar .qb-text{font-family:var(--serif),serif;font-size:16px;color:var(--ink);line-height:1.1;min-width:0}
.quote-bar .qb-text small{display:block;font-family:var(--mono),monospace;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#8a8271;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quote-bar a{flex-shrink:0;font-family:var(--mono),monospace;font-size:12px;letter-spacing:1.2px;text-transform:var(--label-tf);color:var(--paper);background:var(--ink);padding:13px 20px;border-radius:var(--radius);text-decoration:none}
body.menu-open .quote-bar{opacity:0;pointer-events:none}

@media (max-width:860px){
  .quote-bar{display:flex}
  body.has-quote-bar{padding-bottom:74px}
}