/* Pro Building Solutions. Tokens mirror DESIGN.md. 2026-10-16. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --zinc: #f1f3f6;        /* galvanized ground, brightened 2026-10-16 (was #e8eaec, read dull) */
  --paper: #fcfdfe;       /* header, dock and drawer: the brightest surface */
  --zinc-2: #e4e8ed;      /* recessed zinc */
  --zinc-3: #cfd6de;      /* rules on zinc */
  --ink: #111d2b;         /* text, linework: navy-black from the logo */
  --ink-2: #43505f;       /* secondary text on zinc (7.0:1) */
  --band: #0d2238;        /* deep steel navy from the logo badge */
  --band-2: #173352;      /* inputs and wells on the band */
  --band-ink: #eef3f8;    /* text on the band (15:1) */
  --band-ink-2: #b3c1d1;  /* secondary text on the band (9:1) */
  --cta: #ff7a1c;         /* safety orange from the logo. The ONE accent: primary actions only */
  --cta-deep: #f0670c;    /* pressed / hover CTA */
  --cta-ink: #0b1a2c;     /* text on the CTA: navy (6.6:1 on cta, 5.6:1 on cta-deep) */
  --err: #9b1c1c;         /* form errors only, a separate crimson so errors never read as actions */
  --white: #f7f8f7;

  --wide: 118%;
  --step--1: clamp(0.9rem, 0.88rem + 0.1vw, 0.95rem);  /* 2026-10-16: floor raised to 14.4px, no squinting */
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.32rem + 0.9vw, 2rem);
  --step-3: clamp(1.9rem, 1.55rem + 1.75vw, 2.9rem);
  --step-4: clamp(2.3rem, 1.7rem + 3vw, 4.1rem);

  --s1: 0.5rem; --s2: 0.75rem; --s3: 1rem; --s4: 1.5rem; --s5: 2rem; --s6: 3rem; --s7: 4.5rem; --s8: 7rem;
  --radius: 10px;          /* controls; 2026-10-16 softened from 6px */
  --line: 1.5px;
  --max: 76rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --z-header: 20; --z-menu: 30; --z-dock: 32;
  --dock-h: 4.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--zinc);
  font-variant-numeric: tabular-nums;
  min-height: 100dvh;
  display: flex; flex-direction: column;
}
main { flex: 1; }
::selection { background: var(--ink); color: var(--zinc); }
.band ::selection { background: var(--band-ink); color: var(--band); }
html { scrollbar-color: var(--ink-2) var(--zinc-2); }
input, select, textarea { caret-color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.band :focus-visible { outline-color: var(--band-ink); }
img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: text-decoration-color 150ms var(--ease); }
a:hover { text-decoration-color: currentColor; }

h1, h2, h3 { font-stretch: var(--wide); line-height: 1.08; letter-spacing: -0.025em; margin: 0; text-wrap: balance; font-weight: 700; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.015em; font-weight: 650; }
p { margin: 0; max-width: 68ch; text-wrap: pretty; }
.lede { font-size: var(--step-1); line-height: 1.5; max-width: 52ch; color: var(--ink-2); }

.wrap { width: min(100% - 3rem, var(--max)); margin-inline: auto; }  /* 24px gutters on a phone (was 20) */
/* html prefix: beats single-class components that reset margin (.photo, .ticks), which silently
   collapsed the gap between a photo and its list (2026-10-16) */
html .stack > * + * { margin-top: var(--s3); }
html .stack-l > * + * { margin-top: var(--s5); }
section { padding-block: var(--s8) var(--s7); }
@media (max-width: 640px) { section { padding-block: var(--s7) var(--s6); } }  /* phones: 72/48px, the desktop 112px top read as a gap */
section > .wrap > h2 + * { margin-top: var(--s4); }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--white); padding: var(--s2) var(--s3); z-index: 99; }
.skip:focus { left: var(--s3); top: var(--s3); }

/* draft notice */
.draft { background: var(--ink); color: var(--zinc); font-size: var(--step--1); padding: 0.45rem 0; }
.draft p { max-width: none; }
.draft strong { font-weight: 650; }

/* header */
.site-head { position: sticky; top: 0; z-index: var(--z-header); background: var(--paper); border-bottom: 1px solid var(--zinc-3); transition: box-shadow 250ms var(--ease); }
.site-head.solid { box-shadow: 0 1px 0 rgb(13 34 56 / 0.04), 0 12px 28px -22px rgb(13 34 56 / 0.55); }
.site-head .wrap { display: flex; align-items: center; gap: var(--s5); min-height: 4.75rem; }
.mark { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; font-weight: 800; font-stretch: 125%; letter-spacing: -0.02em; font-size: 1.12rem; line-height: 1.05; flex: none; }
.mark svg { width: 40px; height: 25px; flex: none; }
.mark img { width: auto; height: 54px; flex: none; filter: drop-shadow(0 2px 3px rgb(9 24 40 / 0.25)); }
.mark span small { display: block; font-weight: 500; font-stretch: 100%; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.875rem; margin-top: 0.2rem; color: var(--ink-2); }
.nav { margin-left: auto; display: flex; align-items: center; gap: 0.15rem; }
.nav a { white-space: nowrap; text-decoration: none; padding: 0.55rem 0.8rem; border-radius: var(--radius); font-weight: 560; font-size: 0.95rem; color: var(--ink-2); transition: background-color 150ms var(--ease), color 150ms var(--ease); }
.nav a:hover { background: var(--zinc); color: var(--ink); }
.nav a[aria-current="page"]:not(.btn) { color: var(--ink); background: var(--zinc-2); }
.nav .btn { margin-left: var(--s3); padding: 0.7rem 1.15rem; color: var(--cta-ink); }
/* 2026-10-16: between the dock breakpoint and 1320px the bar is tight, so links pull in rather than wrap */
@media (max-width: 1320px) { .nav a { padding-inline: 0.6rem; } .nav .btn { margin-left: var(--s2); padding-inline: 1rem; } }
.menu-btn { display: none; }

/* Buttons (2026-10-16, second pass): bright, solid and clean. The orange is the surface; a faint top sheen
   and one soft shadow tinted with the accent give it lift without the glossy plate, dark rim or text
   shadow that read dated. Hover lifts 1px and deepens the shadow; :active settles in. Only transform,
   box-shadow and background-color animate. Built from the tokens, so a new accent re-tints it. */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; font: inherit; font-weight: 650; font-stretch: 108%; letter-spacing: -0.005em; line-height: 1.2; min-height: 48px; padding: 0.8rem 1.35rem; border-radius: var(--radius); border: var(--line) solid transparent; cursor: pointer; text-decoration: none; transition: background-color 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease), transform 160ms var(--ease), box-shadow 220ms var(--ease); }
.btn svg { width: 20px; height: 20px; flex: none; transition: transform 200ms var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-cta { background-color: var(--cta); background-image: linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 55%); color: var(--cta-ink);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), 0 1px 2px rgb(13 34 56 / 0.16), 0 8px 20px -8px color-mix(in srgb, var(--cta) 75%, transparent); }
.btn-cta:hover { transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 2px 4px rgb(13 34 56 / 0.16), 0 14px 28px -10px color-mix(in srgb, var(--cta) 85%, transparent); }
.btn-cta:active { transform: translateY(0) scale(0.985); background-color: var(--cta-deep); background-image: none;
  box-shadow: inset 0 2px 4px rgb(110 40 0 / 0.25), 0 1px 2px rgb(13 34 56 / 0.16); transition-duration: 60ms; }
.btn-line { color: inherit; border-color: color-mix(in srgb, currentColor 32%, transparent); background-color: color-mix(in srgb, currentColor 3%, transparent); }
.btn-line:hover { transform: translateY(-1px); border-color: color-mix(in srgb, currentColor 65%, transparent); background-color: color-mix(in srgb, currentColor 7%, transparent); box-shadow: 0 10px 22px -14px rgb(13 34 56 / 0.5); }
.btn-line:active { transform: scale(0.985); background-color: color-mix(in srgb, currentColor 11%, transparent); box-shadow: none; transition-duration: 60ms; }
.band .btn-line { border-color: rgb(238 243 248 / 0.38); background-color: rgb(238 243 248 / 0.06); }
.band .btn-line:hover { border-color: rgb(238 243 248 / 0.75); background-color: rgb(238 243 248 / 0.12); box-shadow: 0 10px 22px -14px rgb(0 0 0 / 0.7); }
.band .btn-cta { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 26px -10px color-mix(in srgb, var(--cta) 60%, transparent); }
/* The light button (2026-10-16): the hero's first step on the dark band. Solid paper so it leads, but not
   orange, so it never competes with Get a quote, which owns the accent. */
.btn-light { background: var(--paper); color: var(--ink); box-shadow: inset 0 -1px 0 rgb(13 34 56 / 0.12), 0 1px 2px rgb(0 0 0 / 0.25), 0 10px 24px -12px rgb(0 0 0 / 0.6); }
.btn-light:hover { transform: translateY(-1px); background: #fff; box-shadow: 0 2px 4px rgb(0 0 0 / 0.25), 0 16px 30px -12px rgb(0 0 0 / 0.65); }
.btn-light:active { transform: scale(0.985); background: var(--band-ink); box-shadow: inset 0 2px 3px rgb(13 34 56 / 0.2); transition-duration: 60ms; }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active { transform: none; } }

/* Icons (build/icons.py, 2026-10-16): one drawn set, stroke 2 on a 32 grid, fine lines at 1.25. */
.ic { display: block; flex: none; }
.ic .f { stroke-width: 1.25; }
.picker button { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.picker button .ic { width: 36px; height: 36px; opacity: 0.85; }
.picker button[aria-pressed="true"] .ic { opacity: 1; }
.choice label .ic { width: 24px; height: 24px; color: var(--ink); }
.guides { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0 var(--s5); }
.guides a { display: flex; align-items: center; gap: 0.85rem; min-height: 64px; text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--zinc-3); transition: color 150ms var(--ease); }
.guides .gi { width: 32px; height: 32px; color: var(--ink); transition: transform 300ms var(--ease); }
.guides .ga { width: 18px; height: 18px; margin-left: auto; color: var(--ink-2); transition: transform 200ms var(--ease); }
.guides a:hover .gi { transform: translateY(-2px); }
.guides a:hover .ga { transform: translateX(3px); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .guides a:hover .gi, .guides a:hover .ga { transform: none; } }

/* Phone and tablet chrome (2026-10-16, second pass): the actions moved to a bottom dock, where the thumb
   is. The top bar keeps only the mark and scrolls away, so content gets the screen. The dock holds Menu,
   Prices (the cost guide, the first thing buyers ask) and Get a quote. Menu opens a bottom sheet that
   rises out of the dock; the dock stays above the scrim so Menu turns into Close in place. The sheet is
   `inert` while closed. The dock tucks away while a text field is focused, so it never rides the keyboard. */
.dock, .drawer, .drawer-scrim { display: none; }
@media (max-width: 1180px) {
  .nav { display: none; }
  .site-head { position: relative; }
  .site-head .wrap { min-height: 4rem; }
  .mark img { height: 46px; }
  .mark { font-size: 1.05rem; }
  body { padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom)); }
  .dock { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 0.35rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-dock); height: calc(var(--dock-h) + env(safe-area-inset-bottom)); padding: 0.6rem max(0.75rem, env(safe-area-inset-right)) calc(0.6rem + env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left)); background: var(--paper); border-top: 1px solid var(--zinc-3); box-shadow: 0 -10px 30px -18px rgb(13 34 56 / 0.4); transition: transform 280ms var(--ease); }
  html.typing .dock { transform: translateY(105%); }
  .dock-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; min-width: 4.25rem; height: 100%; padding: 0 0.5rem; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink); font: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: background-color 150ms var(--ease), transform 120ms var(--ease); }
  .dock-btn svg { width: 22px; height: 22px; }
  .dock-btn:hover { background: var(--zinc); }
  .dock-btn:active { transform: scale(0.94); }
  .dock-btn[aria-current="page"] { background: var(--zinc-2); }
  .dock .btn-cta { justify-self: stretch; height: 100%; min-height: 0; padding: 0 1rem; margin-left: 0.25rem; font-size: 1.05rem; white-space: nowrap; }
  .menu-btn { display: flex; }
  .burger { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 22px; height: 22px; }
  .burger span { display: block; width: 20px; height: 2px; margin: 0 auto; background: currentColor; border-radius: 2px; transition: transform 300ms var(--ease), opacity 200ms; }
  .menu-btn[aria-expanded="true"] { background: var(--zinc-2); }
  .menu-btn[aria-expanded="true"] .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] .burger span:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .drawer-scrim { display: block; position: fixed; inset: 0; z-index: calc(var(--z-menu) - 1); background: rgb(9 24 40 / 0.5); opacity: 0; transition: opacity 300ms var(--ease); }
  .drawer-scrim[hidden] { display: block; pointer-events: none; }
  .drawer-scrim.open { opacity: 1; pointer-events: auto; }
  .drawer { display: block; position: fixed; left: 0; right: 0; bottom: calc(var(--dock-h) + env(safe-area-inset-bottom)); z-index: var(--z-menu); background: var(--paper); border-radius: 20px 20px 0 0; box-shadow: 0 -24px 60px -24px rgb(9 24 40 / 0.55); padding: 0.6rem 1.5rem 1.25rem; max-height: calc(100dvh - var(--dock-h) - env(safe-area-inset-bottom) - 4.5rem); overflow-y: auto; overscroll-behavior: contain; transform: translateY(calc(100% + var(--dock-h) + 2rem)); transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1); }
  .drawer.open { transform: none; }
  /* 2026-10-16: the handle row is the drag-to-close grip (portfolio pattern). Full width, tall enough for a thumb,
     sticky so it stays reachable when the sheet is scrolled; touch-action none so the drag never scrolls the page. */
  .drawer-grab { position: sticky; top: -0.6rem; z-index: 1; margin: -0.6rem -1.5rem 0.4rem; padding: 0.85rem 0 0.7rem; background: var(--paper); border-radius: 20px 20px 0 0; touch-action: none; cursor: grab; }
  .drawer-grab:active { cursor: grabbing; }
  .drawer-handle { display: block; width: 40px; height: 5px; border-radius: 5px; background: var(--zinc-3); margin: 0 auto; transition: background-color 150ms var(--ease), width 150ms var(--ease); }
  .drawer.dragging .drawer-handle { background: var(--ink-2); width: 48px; }
  .drawer a { display: flex; align-items: center; gap: 0.7rem; min-height: 52px; text-decoration: none; font-weight: 600; font-size: 1.08rem; border-bottom: 1px solid var(--zinc-2); transition: transform 120ms var(--ease), color 150ms; }
  .drawer a:active { transform: translateX(4px); }
  .drawer a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--ink); padding-left: 0.75rem; }
  .drawer-label { margin: var(--s5) 0 0.25rem; font-size: var(--step--1); color: var(--ink-2); font-weight: 600; }
  .drawer-main, .drawer-more { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s4); }
  .drawer a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .drawer-more a { font-weight: 500; font-size: 1rem; min-height: 48px; line-height: 1.2; }
  .drawer a .ic { width: 26px; height: 26px; color: var(--ink-2); }
  .drawer a[aria-current="page"] .ic { color: var(--ink); }
  /* On phones the dock owns the orange, so a hero's own CTA steps down to the light button and the two
     never shout at each other. The estimator's sized CTA and closing bands keep theirs. */
  .hero .actions .btn-cta, .page-hero .actions .btn-cta { background: var(--paper); background-image: none; color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 10px 24px -12px rgb(0 0 0 / 0.6); }
  .hero .actions .btn-cta::after, .page-hero .actions .btn-cta::after { display: none; }
}
@media (max-width: 380px) { .mark span { font-size: 0.95rem; } .dock-btn { min-width: 3.75rem; padding: 0 0.3rem; } .dock .btn-cta { font-size: 1rem; padding: 0 0.75rem; } }

/* back to top: a scroll-progress ring, shown after most of a screen (pattern from surfstudios.co) */
.to-top { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 15; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgb(13 34 56 / 0.86); box-shadow: 0 8px 24px -10px rgb(9 24 40 / 0.7); opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none; transition: opacity 400ms var(--ease), transform 400ms var(--ease), background-color 200ms; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top.show:active { transform: scale(0.9); transition-duration: 100ms; }
.to-top:hover { background: var(--band); }
.to-top:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.to-top svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top .tt-track { fill: none; stroke: rgb(238 243 248 / 0.22); stroke-width: 2.5; }
.to-top .tt-prog { fill: none; stroke: var(--band-ink); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 119.38; stroke-dashoffset: 119.38; }
.to-top .tt-arr { position: absolute; left: 50%; top: 54%; width: 9px; height: 9px; border-left: 2px solid var(--band-ink); border-top: 2px solid var(--band-ink); transform: translate(-50%, -50%) rotate(45deg); }
html.menu-open .to-top { opacity: 0; pointer-events: none; }
@media (max-width: 1180px) { .to-top { bottom: calc(var(--dock-h) + 14px + env(safe-area-inset-bottom)); right: 14px; } html.typing .to-top { opacity: 0; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer-scrim, .to-top, .menu-btn span { transition-duration: 0.01ms; } }

/* the steel band: dark field for photos and texture */
.band { background: var(--band); color: var(--band-ink); position: relative; isolation: isolate; }
.band .lede, .band .muted { color: var(--band-ink-2); }
.band a:not(.btn) { color: var(--band-ink); }

/* hero */
.hero { padding-block: var(--s7) var(--s6); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: var(--s6); align-items: center; }
.hero h1 { font-size: clamp(2rem, 1.35rem + 2.1vw, 3.2rem); font-stretch: 112%; }
.page-hero h1 { max-width: 22ch; }
@media (min-width: 1100px) { .hero .wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } .hero h1 { font-size: clamp(2.6rem, 1.2rem + 1.9vw, 3.1rem); } }
@media (max-width: 520px) { h1, .hero h1 { font-size: 2rem; font-stretch: 104%; } }
.hero .lede { margin-top: var(--s4); }
.hero .actions { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s2); }
@media (max-width: 520px) { .hero .actions, .page-hero .actions { flex-direction: column; } .hero .actions .btn, .page-hero .actions .btn { width: 100%; } }
.hero-facts { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-size: var(--step--1); color: var(--band-ink-2); padding: 0; list-style: none; }
.hero-facts li { display: flex; align-items: center; gap: 0.45rem; }
.hero-facts svg { width: 22px; height: 22px; flex: none; }
.page-hero { padding-block: var(--s7) var(--s6); }
.page-hero .lede { margin-top: var(--s4); }
.page-hero .actions { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s2); }

/* the profile drawing + selector */
.profile { position: relative; }
.picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border: 1px solid rgb(238 243 248 / 0.22); border-radius: calc(var(--radius) + 4px); background: rgb(4 14 26 / 0.45); box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.35), 0 1px 0 rgb(255 255 255 / 0.06); }
.picker button { font: inherit; font-weight: 600; font-stretch: 108%; font-size: 1rem; padding: 0.7rem 0.5rem; background: transparent; color: var(--band-ink); border: 0; border-radius: var(--radius); cursor: pointer; transition: background-color 180ms var(--ease), color 180ms var(--ease), box-shadow 180ms var(--ease); line-height: 1.2; }
.picker button:hover { background: rgb(255 255 255 / 0.08); }
.picker button[aria-pressed="true"] { background: linear-gradient(180deg, #fff, var(--band-ink)); color: var(--band); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 14px -6px rgb(0 0 0 / 0.55); }
.drawing { margin-top: var(--s4); aspect-ratio: 16 / 9.4; width: 100%; }
.drawing svg { width: 100%; height: 100%; overflow: visible; }
.drawing .ln { fill: none; stroke: var(--band-ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.drawing .fine { stroke-width: 1; opacity: 0.6; }
.drawing .dim { fill: none; stroke: var(--band-ink-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.drawing text { fill: var(--band-ink); font-family: "Archivo", sans-serif; font-size: calc(16px * var(--u, 1)); font-weight: 600; font-stretch: 108%; }
.drawing text.sm { font-size: calc(14px * var(--u, 1)); font-weight: 500; fill: var(--band-ink-2); letter-spacing: 0.04em; text-transform: uppercase; }
.drawing .shape { display: none; }
.drawing .shape.on { display: inline; }
.js .drawing .shape.drawing-in .ln { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 600ms var(--ease) forwards; }
.js .drawing .shape.drawing-in .fine { animation-duration: 600ms; animation-delay: 120ms; }
.js .drawing .shape.drawing-in text, .js .drawing .shape.drawing-in .dim { opacity: 0; animation: fadein 300ms var(--ease) 380ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .js .drawing .shape.drawing-in .ln { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .js .drawing .shape.drawing-in text, .js .drawing .shape.drawing-in .dim { animation: fadein 200ms linear forwards; animation-delay: 0ms; }
}

/* estimator */
.est { margin-top: var(--s4); border-top: var(--line) solid var(--band-ink); padding-top: var(--s4); display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s3) var(--s5); align-items: start; }
.est label { display: block; font-size: var(--step--1); font-weight: 550; color: var(--band-ink-2); margin-bottom: 0.3rem; }
.est input[type=number] { width: 4.6rem; font: inherit; font-weight: 700; font-size: 1.1rem; text-align: right; padding: 0.35rem 0.5rem; -moz-appearance: textfield; border-radius: var(--radius); border: var(--line) solid rgb(179 193 209 / 0.6); background: var(--band-2); color: var(--band-ink); box-shadow: inset 0 2px 5px rgb(0 0 0 / 0.35), 0 1px 0 rgb(255 255 255 / 0.06); }
.est input[type=number]:hover { border-color: var(--band-ink); }
.est input[type=number]:focus-visible { outline-color: var(--band-ink); border-color: var(--band-ink); }
.est input[type=number][aria-invalid="true"] { border-color: #ffb4a3; box-shadow: 0 0 0 2px #ffb4a3; }
.est-out { font-size: 0.98rem; line-height: 1.45; }
.est-out b { font-weight: 700; font-stretch: 104%; font-size: 1.08rem; display: inline-block; white-space: nowrap; text-align: right; }
.est-out .row { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.1rem var(--s3); border-bottom: 1px solid rgb(238 243 248 / 0.18); padding-block: 0.5rem; }
.est-out .row span { color: var(--band-ink-2); }
.est-note { grid-column: 1 / -1; font-size: var(--step--1); color: var(--band-ink-2); }
.est-note[data-tone="warn"] { color: #ffd2c6; font-weight: 600; }
.est-cta { grid-column: 1 / -1; }

@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; gap: var(--s5); }
  .hero { padding-top: var(--s6); }
}
@media (max-width: 520px) {
  .est { grid-template-columns: 1fr; }
  .picker button { font-size: 0.9rem; font-stretch: 100%; padding: 0.55rem 0.25rem; }
}

/* product rows: one per type, profile + catalogue facts */
.types { display: grid; gap: 0; border-top: var(--line) solid var(--ink); }
.type { display: grid; grid-template-columns: 15rem minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s5); padding-block: var(--s5); border-bottom: var(--line) solid var(--ink); align-items: start; text-decoration: none; transition: background-color 200ms var(--ease); }
.type:hover { background: var(--zinc-2); }
.type:hover .go svg { transform: translateX(4px); }
.type .mini { width: 100%; height: auto; }
.type .mini .ln { fill: none; stroke: var(--ink); stroke-width: 1.75; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.type .mini .fine { stroke-width: 1; opacity: 0.55; }
.type h3 { font-size: var(--step-2); }
.type p { margin-top: var(--s2); color: var(--ink-2); }
.go { margin-top: var(--s3); display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 650; color: var(--ink); text-decoration: underline; text-decoration-color: var(--zinc-3); text-underline-offset: 0.25em; }
.go svg { width: 18px; height: 18px; transition: transform 200ms var(--ease); }
@media (max-width: 860px) { .type { grid-template-columns: 1fr; gap: var(--s3); } .type .mini { max-width: 13rem; } }

/* spec tables: catalogue density */
.spec { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.spec caption { text-align: left; font-weight: 650; font-stretch: 110%; padding-bottom: var(--s2); }
.spec th, .spec td { text-align: left; padding: 0.55rem 0.75rem 0.55rem 0; border-bottom: 1px solid var(--zinc-3); vertical-align: top; }
.spec th { font-weight: 600; color: var(--ink-2); font-size: var(--step--1); letter-spacing: 0.02em; }
.spec thead th { border-bottom: var(--line) solid var(--ink); }
.spec td.num, .spec th.num { text-align: right; white-space: nowrap; }
.type .spec { font-size: 0.9rem; }
.table-scroll { overflow-x: auto; }

/* dimension string, the drawing-set raise */
.dimstr { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 650; white-space: nowrap; }
.dimstr::before, .dimstr::after { content: ""; width: 1px; height: 0.9em; background: currentColor; opacity: 0.6; }

/* two column prose + aside */
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s7); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: var(--s5); } }
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { position: relative; padding: 0.8rem 0 0.8rem 2rem; border-bottom: 1px solid var(--zinc-3); }
.ticks li::before { content: ""; position: absolute; left: 0.15rem; top: 1.3rem; width: 0.95rem; height: 0.5rem; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg) translateY(-0.35rem); }
.band .ticks li::before { border-color: var(--band-ink); }

/* process: a real sequence */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0; border-top: var(--line) solid currentColor; }
.steps li { counter-increment: step; padding: var(--s4) var(--s4) var(--s4) 0; border-bottom: 1px solid var(--zinc-3); }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: var(--radius); font-weight: 800; font-stretch: 125%; font-size: 1.2rem; line-height: 1; margin-bottom: var(--s3);
  color: var(--band-ink); background: linear-gradient(180deg, #2a4a70, var(--band-2) 60%, #10263f); border: 1px solid rgb(4 14 26 / 0.6); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 1px 2px rgb(4 14 26 / 0.4), 0 8px 16px -8px rgb(4 14 26 / 0.6); }
.steps h2, .steps h3 { font-size: var(--step-0); font-weight: 700; }
.steps p { margin-top: 0.35rem; font-size: 0.95rem; }
.on-zinc .steps li { border-bottom-color: var(--zinc-3); }
.on-zinc .steps li::before { color: var(--band-ink); }
.band .steps p { color: var(--band-ink-2); }
.on-zinc .steps p { color: var(--ink-2); }

/* faq */
.faq details { border-bottom: 1px solid var(--zinc-3); }
.faq details:first-child { border-top: var(--line) solid var(--ink); }
.faq summary { cursor: pointer; list-style: none; padding: var(--s3) 2.5rem var(--s3) 0; font-weight: 650; font-stretch: 106%; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 0.4rem; top: 50%; width: 0.6rem; height: 0.6rem; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-70%) rotate(45deg); transition: transform 220ms var(--ease); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:hover { color: var(--ink-2); }
.faq details > div { padding: 0 0 var(--s4); color: var(--ink-2); }

/* closing CTA band */
.close { padding-block: var(--s7); }
.close .wrap { display: flex; justify-content: space-between; align-items: end; gap: var(--s5); flex-wrap: wrap; }
.close h2 { max-width: 20ch; }

/* forms */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s4); }
.form .full { grid-column: 1 / -1; }
.field label, .field legend { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.35rem; }
.field .hint { font-size: var(--step--1); color: var(--ink-2); margin-top: 0.3rem; }
.field input, .field select, .field textarea { width: 100%; font: inherit; padding: 0.7rem 0.8rem; border-radius: var(--radius); border: var(--line) solid var(--ink-2); background: var(--white); color: var(--ink); transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 18%, transparent); }
.field [aria-invalid="true"] { border-color: var(--err); }
.field .err { color: var(--err); font-weight: 600; font-size: var(--step--1); margin-top: 0.3rem; display: none; }
.field .err.show { display: block; }
.field fieldset { border: 0; margin: 0; padding: 0; }
.choice { display: flex; flex-wrap: wrap; gap: var(--s2); }
.choice label { display: inline-flex; align-items: center; gap: 0.5rem; border: var(--line) solid var(--ink-2); border-radius: var(--radius); padding: 0.55rem 0.8rem; font-weight: 550; margin: 0; cursor: pointer; background: var(--white); transition: border-color 150ms var(--ease), background-color 150ms var(--ease); }
.choice label:hover { border-color: var(--ink); }
.choice input { accent-color: var(--ink); width: auto; margin: 0; }
.choice label:has(input:checked) { border-color: var(--ink); background: var(--zinc-2); box-shadow: inset 0 0 0 1px var(--ink); }
.form-msg { grid-column: 1 / -1; padding: var(--s3) var(--s4); border-radius: var(--radius); border: var(--line) solid var(--ink); background: var(--white); }
.form-msg[hidden] { display: none; }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }

/* footer */
.site-foot { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: var(--zinc); padding-block: var(--s6) var(--s5); font-size: 1rem; }
.site-foot .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s5); }
.site-foot a { color: var(--zinc); }
.site-foot ul { list-style: none; padding: 0; margin: var(--s2) 0 0; }
.site-foot li + li { margin-top: 0.3rem; }
.site-foot h2 { font-size: 0.95rem; font-stretch: 110%; letter-spacing: 0; }
.site-foot .muted { color: var(--band-ink-2); }
.site-foot .base { grid-column: 1 / -1; border-top: 1px solid rgb(238 243 248 / 0.16); padding-top: var(--s3); margin-top: var(--s3); font-size: var(--step--1); color: var(--band-ink-2); }
/* 2026-10-16: the Surf Studios credit, same heartbeat as surfstudios.co */
.site-foot .credit { grid-column: 1 / -1; margin: 0; font-size: var(--step--1); color: var(--band-ink-2); }
.site-foot .credit a { display: inline-flex; align-items: center; white-space: pre; color: inherit; text-decoration: none; padding-block: 0.4rem; }
.site-foot .credit a:hover, .site-foot .credit a:focus-visible { color: var(--zinc); text-decoration: underline; text-underline-offset: 0.2em; }
.site-foot .heart { width: 1em; height: 1em; margin-inline: 0.3em; fill: #e25563; transform-origin: center; animation: heartbeat 2.4s ease-in-out infinite; }
@keyframes heartbeat { 0%, 40%, 100% { transform: scale(1); } 8% { transform: scale(1.18); } 16% { transform: scale(1); } 24% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .site-foot .heart { animation: none; } }
@media (max-width: 760px) { .site-foot .wrap { grid-template-columns: 1fr 1fr; } .site-foot .wrap > :first-child { grid-column: 1 / -1; } }

.muted { color: var(--ink-2); }
.note { font-size: var(--step--1); color: var(--ink-2); }
.mt-4 { margin-top: var(--s4); } .mt-5 { margin-top: var(--s5); } .mt-6 { margin-top: var(--s6); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* photo bands: generated steel photography under a dark scrim, text always on the dark side */
.photo-band { --bg-layers: linear-gradient(90deg, rgb(13 34 56 / 0.94) 0%, rgb(13 34 56 / 0.84) 42%, rgb(13 34 56 / 0.55) 100%), var(--img); background-size: cover; background-position: center; }
.hero.photo-band { --bg-layers: linear-gradient(90deg, rgb(13 34 56 / 0.93) 0%, rgb(13 34 56 / 0.82) 50%, rgb(13 34 56 / 0.72) 100%), var(--img); }
/* each band carries 800w / 1400w / 2400w copies; a phone never downloads the desktop photo */
@media (max-width: 1400px) { .photo-band { --bg-layers: linear-gradient(90deg, rgb(13 34 56 / 0.94) 0%, rgb(13 34 56 / 0.84) 42%, rgb(13 34 56 / 0.55) 100%), var(--img-md, var(--img)); }
  .hero.photo-band { --bg-layers: linear-gradient(90deg, rgb(13 34 56 / 0.93) 0%, rgb(13 34 56 / 0.82) 50%, rgb(13 34 56 / 0.72) 100%), var(--img-md, var(--img)); } }
@media (max-width: 860px) { .photo-band, .hero.photo-band { --bg-layers: linear-gradient(rgb(13 34 56 / 0.86), rgb(13 34 56 / 0.9)), var(--img-sm, var(--img)); } }
.photo-band { background-image: var(--bg-layers); }
/* Hero photo drift (2026-10-16): the photo lives on a ::before layer that eases in from 6% scale over
   ~2s on load, then breathes very slowly, so the page feels alive without moving the type. Transform only,
   its own compositor layer, off for reduced motion. --bg-layers carries the same gradient + responsive photo. */
.hero.photo-band, .page-hero.photo-band { background-image: none; overflow: hidden; }
.hero.photo-band::before, .page-hero.photo-band::before { content: ""; position: absolute; inset: -2%; z-index: -1; background-image: var(--bg-layers); background-size: cover; background-position: center; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .hero.photo-band::before, .page-hero.photo-band::before { animation: settle 2200ms var(--ease) both, drift 26s ease-in-out 2200ms infinite alternate; }
}
@keyframes settle { from { transform: scale(1.07); opacity: 0.6; } to { transform: scale(1); opacity: 1; } }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.045) translate3d(-0.8%, -0.6%, 0); } }
/* texture bands: galvanized panel ribs, deep enough that it reads as material, not pattern */
.band.tex { background-image: linear-gradient(rgb(13 34 56 / 0.8), rgb(13 34 56 / 0.88)), url("/assets/img/tex-corrugated-1400.webp"); background-size: cover; background-position: center; }
.photo { margin: 0; border-radius: 4px; overflow: hidden; box-shadow: 0 18px 40px -24px rgb(13 34 56 / 0.55); }
.photo img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.band .steps li { border-bottom-color: rgb(238 243 248 / 0.18); }
.band .ticks li { border-color: rgb(238 243 248 / 0.18); }

/* spec tables stack into labelled rows on phones, so no column hides off-screen */
@media (max-width: 640px) {
  .spec.stacks thead { display: none; }
  .spec.stacks tr { display: block; padding-block: 0.6rem; border-bottom: 1px solid var(--zinc-3); }
  .spec.stacks th[scope=row] { display: block; border: 0; padding: 0 0 0.25rem; font-size: 1rem; color: var(--ink); }
  .spec.stacks td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: 0.2rem 0; text-align: right; white-space: normal; }
  .spec.stacks td::before { content: attr(data-label); color: var(--ink-2); font-size: var(--step--1); font-weight: 600; text-align: left; }
  /* 2026-10-16: prose cells (not numbers) read left, under their label, instead of a ragged right edge */
  .spec.stacks td:not(.num) { display: block; text-align: left; }
  .spec.stacks td:not(.num)::before { display: block; margin-bottom: 0.1rem; }
}
.dimrange { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.4rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg[data-tone="err"] { border-color: var(--err); color: var(--err); }
.form-msg[data-tone="ok"] { border-color: var(--ink); }
.btn[disabled] { opacity: 0.7; cursor: progress; }

/* touch targets, from the mobile QA pass (2026-10-16): 44px for every standalone control on touch screens */
.picker button { min-height: 44px; }
@media (max-width: 960px), (pointer: coarse) {
  .mark { min-height: 44px; }
  .site-foot li + li { margin-top: 0; }
  .site-foot li a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* 3D hero prototype (/lab/3d-hero/, 2026-10-16) */
.hero-3d .wrap { align-items: center; }
.scene3d { position: relative; margin: 0; aspect-ratio: 5 / 4; min-height: 300px; }
@media (min-width: 861px) { .hero-3d { min-height: min(88vh, 860px); display: grid; align-content: center; } .hero-3d .wrap { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.scene3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 600ms var(--ease); }
.scene3d.ready canvas { opacity: 1; }
.scene-steps { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 0.85rem; list-style: none; margin: 0; padding: 0; font-size: var(--step--1); color: var(--band-ink-2); }
.scene-steps li { opacity: 0.45; transition: opacity 300ms var(--ease), color 300ms; }
.scene-steps li::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.4rem; border: 1.5px solid currentColor; border-radius: 50%; vertical-align: 0.05em; }
.scene-steps li.on { opacity: 1; color: var(--band-ink); }
.scene-steps li.on::before { background: currentColor; }
@media (max-width: 860px) { .hero-3d { padding-top: var(--s3); } .scene3d { order: -1; aspect-ratio: 5 / 4; min-height: 0; margin: 0 -0.5rem; } .scene-steps { gap: 0.2rem 0.7rem; font-size: 0.78rem; } }

/* ---- Interaction and reveal layer (2026-10-16) ----
   Every control answers: CTAs catch a light sweep on hover, product rows lift into a plate, the logo tips.
   Each section has its own moment instead of one fade everywhere: product drawings draw themselves,
   process steps rise in sequence, photos wipe open. Hidden start states exist only with JS and motion
   allowed, so nothing is ever invisible to a reader with reduced motion or no JS. */
.btn-cta { overflow: hidden; isolation: isolate; }
.btn-cta::after { content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.38) 48%, rgb(255 255 255 / 0.1) 56%, transparent 70%); transform: translateX(-110%); }
.btn-cta:hover::after { transform: translateX(110%); transition: transform 750ms var(--ease); }
.mark img { transition: transform 400ms var(--ease); }
.mark:hover img { transform: rotate(-6deg) scale(1.06); }
.type { position: relative; isolation: isolate; }
.type::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--s4)); z-index: -1; border-radius: 10px; background: linear-gradient(180deg, #fff, var(--white)); box-shadow: 0 1px 2px rgb(9 24 40 / 0.08), 0 18px 40px -22px rgb(9 24 40 / 0.4); opacity: 0; transform: scale(0.985); transition: opacity 250ms var(--ease), transform 350ms var(--ease); }
.type:hover { background: transparent; }
.type:hover::before { opacity: 1; transform: none; }
.type .mini { transition: transform 400ms var(--ease); }
.type:hover .mini { transform: translateY(-3px); }
.photo img { transition: transform 900ms var(--ease); }
.photo:hover img { transform: scale(1.03); }
.est-out.tick b { animation: tick 380ms var(--ease); }
@keyframes tick { from { opacity: 0.35; transform: translateY(4px); } }
.est-out b { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal-draw .ln[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1300ms var(--ease) calc(var(--i, 0) * 140ms); }
  .js .reveal-draw.in .ln[pathLength] { stroke-dashoffset: 0; }
  .js .reveal-steps > li { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease), transform 800ms var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
  .js .reveal-steps.in > li { opacity: 1; transform: none; }
  .js .reveal-steps > li::before { transform: scale(0.6) rotate(-8deg); transition: transform 700ms cubic-bezier(0.34, 1.4, 0.64, 1); transition-delay: calc(var(--i, 0) * 110ms + 120ms); }
  .js .reveal-steps.in > li::before { transform: none; }
  .js .reveal-photo img { clip-path: inset(0 100% 0 0); transform: scale(1.08); transition: clip-path 1100ms var(--ease), transform 1500ms var(--ease); }
  .js .reveal-photo.in img { clip-path: inset(0 0 0 0); transform: none; }
  .js .reveal-photo.in:hover img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { .btn-cta::after, .mark img, .type::before, .type .mini, .photo img { transition: none; } .mark:hover img, .type:hover .mini, .photo:hover img { transform: none; } }
@media (max-width: 860px) { .type::before { inset: 0 calc(-1 * var(--s2)); } }

/* ---- Brand texture (2026-10-16): the logo's hex, used as material, never as wallpaper ----
   Footer: the hex tiling at low opacity, faded out toward the copy with a mask, plus the badge itself.
   Closing CTA bands: a large stencil of the badge (frame knocked out) sits cropped off the right edge. */
.site-foot::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/assets/hex-grid.svg") center / 48.5px 84px; opacity: 0.07;
  -webkit-mask-image: radial-gradient(ellipse 70% 120% at 100% 0%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 70% 120% at 100% 0%, #000 0%, transparent 75%); }
.foot-mark { display: flex; align-items: center; gap: 0.75rem; font-size: 1.15rem; font-stretch: 120%; }
.foot-mark img { height: 60px; width: auto; filter: drop-shadow(0 0 1px rgb(238 243 248 / 0.7)) drop-shadow(0 6px 14px rgb(0 0 0 / 0.4)); }
.foot-mark svg { width: 48px; height: 30px; }
.band.close { overflow: hidden; }
.band.close::after { content: ""; position: absolute; z-index: -1; right: -6rem; top: 50%; width: 26rem; aspect-ratio: 0.874; transform: translateY(-50%) rotate(-8deg); background: url("/assets/logo-stencil.webp") center / contain no-repeat; opacity: 0.08; pointer-events: none; }
.band.close .wrap { position: relative; }
.band.tex::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/assets/hex-grid.svg") center / 48.5px 84px; opacity: 0.045; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%); mask-image: linear-gradient(90deg, transparent 0%, #000 60%); }
@media (max-width: 1180px) { .mark img { height: 46px; } .mark { font-size: 1.05rem; } }
@media (max-width: 380px) { .mark img { height: 40px; } }
@media (max-width: 860px) { .band.close::after { width: 16rem; right: -5rem; opacity: 0.07; } }
.draft-short { display: none; }
@media (max-width: 960px) { .draft-long { display: none; } .draft-short { display: inline; } }
/* drawing labels knock out the linework behind them (drafting-style), so larger type never collides */
.drawing text { paint-order: stroke; stroke: var(--band); stroke-width: calc(5px * var(--u, 1)); stroke-linejoin: round; }

/* Live 3D model in the estimator (2026-10-16, building3d.js). The SVG drawing is the fallback and only
   hides once the canvas is ready. The canvas allows vertical page scroll (pan-y) so dragging sideways
   turns the building without trapping the thumb. */
.drawing { position: relative; }
.drawing.has3d { aspect-ratio: 16 / 11; }
.drawing.has3d .shape { display: none; }
.scene3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; border-radius: var(--radius); animation: fadein 700ms var(--ease) both; opacity: 0; }
.scene3d-canvas:active { cursor: grabbing; }
.scene3d-canvas:focus-visible { outline: 2px solid var(--band-ink); outline-offset: 4px; }
.scene3d-hint { position: absolute; right: 0.5rem; top: 0.5rem; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.7rem; border-radius: 999px; font-size: 0.9rem; font-weight: 600; color: var(--band-ink); background: rgb(4 14 26 / 0.6); border: 1px solid rgb(238 243 248 / 0.2); pointer-events: none; transition: opacity 400ms var(--ease); }
.scene3d-hint::before { content: ""; width: 1.1rem; height: 0.7rem; border: 2px solid currentColor; border-top: 0; border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.drawing:not(.has3d) .scene3d-hint, .drawing.touched .scene3d-hint { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .scene3d-canvas { animation: none; opacity: 1; } }
/* the quote form's preview (2026-10-16): same model on a navy plate, shown once a type and a size are set */
.quote-model .qm-label { font-weight: 600; margin: 0; }
.quote-model .drawing { margin-top: var(--s2); background: var(--band); border-radius: var(--radius); aspect-ratio: 16 / 9; max-width: 40rem; }
.quote-model .hint { margin-top: var(--s2); }

/* Size sliders (2026-10-16): the thumb is a raised steel plate, the track fills with the value (--p), the
   whole row is a 44px touch target, and the exact number stays editable beside the label. */
.sl + .sl { margin-top: var(--s3); }
.sl-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.est .sl-head label { margin: 0; font-size: 1rem; font-weight: 650; color: var(--band-ink); }
.sl-num { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--band-ink-2); font-weight: 600; }
.sl-num input::-webkit-outer-spin-button, .sl-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0.2rem 0 0; background: transparent; cursor: pointer; touch-action: pan-y; --p: 50%; }
.range:focus { outline: none; }
.range::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--band-ink) var(--p), rgb(4 14 26 / 0.55) var(--p)); box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.5), 0 1px 0 rgb(255 255 255 / 0.08); }
.range::-moz-range-track { height: 8px; border-radius: 8px; background: rgb(4 14 26 / 0.55); box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.5); }
.range::-moz-range-progress { height: 8px; border-radius: 8px; background: var(--band-ink); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff, #d5dde6 70%); border: 1px solid rgb(4 14 26 / 0.5); box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgb(0 0 0 / 0.45), 0 6px 14px -4px rgb(0 0 0 / 0.5); transition: transform 150ms var(--ease), box-shadow 150ms var(--ease); }
.range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff, #d5dde6 70%); border: 1px solid rgb(4 14 26 / 0.5); box-shadow: 0 2px 4px rgb(0 0 0 / 0.45), 0 6px 14px -4px rgb(0 0 0 / 0.5); }
.range:hover::-webkit-slider-thumb { transform: scale(1.08); }
.range:active::-webkit-slider-thumb { transform: scale(1.15); box-shadow: inset 0 1px 0 #fff, 0 0 0 8px rgb(238 243 248 / 0.14), 0 6px 14px -4px rgb(0 0 0 / 0.5); }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--band), 0 0 0 5px var(--band-ink); }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--band), 0 0 0 5px var(--band-ink); }
.presets { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--s3); }
.presets button { font: inherit; font-size: 0.95rem; font-weight: 650; font-variant-numeric: tabular-nums; min-height: 44px; padding: 0 0.9rem; border-radius: 999px; cursor: pointer; color: var(--band-ink); background: rgb(238 243 248 / 0.06); border: 1px solid rgb(238 243 248 / 0.28); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08); transition: background-color 150ms var(--ease), transform 120ms var(--ease), border-color 150ms; }
.presets button:hover { background: rgb(238 243 248 / 0.12); border-color: rgb(238 243 248 / 0.5); }
.presets button:active { transform: scale(0.96); }
.presets button[aria-pressed="true"] { background: linear-gradient(180deg, #fff, var(--band-ink)); color: var(--band); border-color: transparent; box-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 14px -6px rgb(0 0 0 / 0.55); }
@media (prefers-reduced-motion: reduce) { .range::-webkit-slider-thumb, .presets button { transition: none; } }
/* 2026-10-16: on narrow phones the main menu is one column so "Pre-engineered" and "Structural steel" never break */
@media (max-width: 429px) { .drawer-main { grid-template-columns: 1fr; } .drawer-main a { min-height: 50px; } }