/* Rain Jacket Flashing Systems 2026.
   07's manufacturer information architecture drawn as 02's architectural sheet.
   Light by commitment: a drawing set is paper.

   Two layers of tokens: immutable brand values, then semantic tokens that flip
   in dark mode. Components reference the semantic ones ONLY.
   The web fonts' @font-face lives in fonts.css, which inc/enqueues.php inlines in
   the head; their stand-ins are below. */
/* Rain Jacket. 07's manufacturer information architecture, drawn as 02's
   architectural sheet. Light by commitment: a drawing set is paper.
   Every section is deliberately a different shape. Every color explicit. */
/* Stand-ins while the web fonts load, scaled to fill the same room. Without them a slow
   phone painted the hero headline in Helvetica or Roboto two lines longer, and the page
   jumped when Barlow Condensed arrived (CLS 0.12). size-adjust is the web font's width
   over the stand-in's, measured on this site's own text (condensed: headlines in
   capitals; sans: body copy); the overrides give back Barlow's line metrics. Arial serves
   Windows, Mac and iOS (Liberation Sans and Arimo are its metric twins on Linux and
   ChromeOS), Roboto serves Android. Measures are in em, never ch: ch reads the '0' of
   whichever font is showing, so a ch width changes at the swap and the text rewraps.
   1ch is .565em in Barlow 400, .45em in Barlow Condensed 600, .453em at 700. */
@font-face{font-family:'RJF Cond Arial';font-weight:500 600;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold'),local('Arimo Bold'),local('Arimo-Bold');size-adjust:66.85%;ascent-override:149.59%;descent-override:29.92%;line-gap-override:0%}
@font-face{font-family:'RJF Cond Arial';font-weight:700;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold'),local('Arimo Bold'),local('Arimo-Bold');size-adjust:68.76%;ascent-override:145.43%;descent-override:29.09%;line-gap-override:0%}
@font-face{font-family:'RJF Sans Arial';font-weight:400;src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('LiberationSans'),local('Arimo'),local('Arimo-Regular');size-adjust:96.39%;ascent-override:103.75%;descent-override:20.75%;line-gap-override:0%}
@font-face{font-family:'RJF Sans Arial';font-weight:500;src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('LiberationSans'),local('Arimo'),local('Arimo-Regular');size-adjust:97.6%;ascent-override:102.46%;descent-override:20.49%;line-gap-override:0%}
@font-face{font-family:'RJF Sans Arial';font-weight:600 700;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold'),local('Arimo Bold'),local('Arimo-Bold');size-adjust:90.99%;ascent-override:109.9%;descent-override:21.98%;line-gap-override:0%}
@font-face{font-family:'RJF Cond Roboto';font-weight:500 600;src:local('Roboto Bold'),local('Roboto-Bold');size-adjust:72.22%;ascent-override:138.47%;descent-override:27.69%;line-gap-override:0%}
@font-face{font-family:'RJF Cond Roboto';font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold');size-adjust:74.08%;ascent-override:134.99%;descent-override:27%;line-gap-override:0%}
@font-face{font-family:'RJF Sans Roboto';font-weight:400;src:local('Roboto'),local('Roboto-Regular'),local('Roboto Regular');size-adjust:96.55%;ascent-override:103.57%;descent-override:20.71%;line-gap-override:0%}
@font-face{font-family:'RJF Sans Roboto';font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium');size-adjust:96.74%;ascent-override:103.37%;descent-override:20.67%;line-gap-override:0%}
@font-face{font-family:'RJF Sans Roboto';font-weight:600 700;src:local('Roboto Bold'),local('Roboto-Bold');size-adjust:96.82%;ascent-override:103.28%;descent-override:20.66%;line-gap-override:0%}
:root{
  --paper:#FBFBFA; --paper-2:#EFF1F0; --slate:#E2E7E6; --tint:#F6EDEF; --ink:#16191C; --ink-2:#4A5156; --ink-3:#5E666E;
  --rule:#D6DAD9; --rule-2:#E9ECEB; --accent:#8E2338; --accent-soft:#F4E7EA;
  --band:#16191C; --band-ink:#E8ECEE; --band-mute:#98A1A6; --band-rule:transparent; --band-accent:#D6798E;
  --plate:#FBFBFA; --plate-ink:#16191C; --plate-mute:#5E666E; --plate-rule:#E9ECEB;
  --on-accent:#FFFFFF; --btn:#8E2338; --btn-ink:#FFFFFF; --btn-edge:#8E2338; --sep:#8A939A;
  --cond:'Barlow Condensed','RJF Cond Arial','RJF Cond Roboto','Helvetica Neue',Arial,sans-serif;
  --sans:'Barlow','RJF Sans Arial','RJF Sans Roboto','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono','SF Mono',Menlo,monospace;
  --gutter:clamp(20px,5vw,72px);
  --air:clamp(72px,10vw,148px);
  --gap:clamp(20px,2.4vw,34px);
  --pad:clamp(20px,2.6vw,34px);
  /* Raster drawings and product photos sit on paper in BOTH themes, so these
     are deliberately not redefined in dark: inverting black line on white
     prints a negative. */
  --drw-paper:#FBFBFA; --drw-mark:#8E2338; --drw-mark-ink:#FFFFFF;
  /* Fig. 2, the assembly: existing wall layers, Rain Jacket parts, the new and old windows */
  --asm-ex:#EDF0EF; --asm-ex-edge:#DCE1E0; --asm-ex-rev:#D2D8D7; --asm-ex-line:#96A0A5;
  --asm-rj:#E9C8D0; --asm-rj-edge:#C68E9D; --asm-rj-line:#8E2338;
  --asm-win:#FCFCFB; --asm-win-edge:#E3E8E7; --asm-glass:#DCE6EA; --asm-win-line:#16191C;
  --asm-old:#D3D8DA; --asm-old-edge:#BFC6C9; --asm-old-glass:#C3CDD2; --asm-old-line:#6E787E;
  --asm-bp:#A3D2B2; --asm-bp-edge:#88C09B; --asm-bp-rev:#7AB38D; --asm-bp-line:#3D7F56;
  --asm-axis:#B6BEC1; --asm-lead:#9AA3A8;
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5156' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* dark: tokens only. the drawing plates stay paper in both themes, because a
   drawing sheet is paper, which also spares the linework any filter tricks. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#14171A; --paper-2:#1A1E22; --slate:#212629; --tint:#2E1F25;
  --ink:#E8ECEE; --ink-2:#AAB3B8; --ink-3:#98A2A8;
  --rule:#2F363B; --rule-2:#262C31; --accent:#D6798E; --accent-soft:#33202A;
  /* a near-black band is invisible on a near-black page, so in dark the band
     becomes a RAISED surface with an accent hairline instead of a dark one */
  --band:#252C31; --band-ink:#EDF1F2; --band-mute:#A3ADB3; --band-rule:#D6798E; --band-accent:#E8A0B0;
  --plate:#1B2125; --plate-ink:#DDE3E6; --plate-mute:#98A2A8; --plate-rule:#2C343A;
  --on-accent:#16191C; --btn:#B8324D; --btn-ink:#FFFFFF; --btn-edge:#D6798E; --sep:#8A939A;
  --asm-ex:#232A2E; --asm-ex-edge:#1B2124; --asm-ex-rev:#171C1F; --asm-ex-line:#7C878D;
  --asm-rj:#5E2A38; --asm-rj-edge:#46202A; --asm-rj-line:#D97F94;
  --asm-win:#2A3034; --asm-win-edge:#20262A; --asm-glass:#37454C; --asm-win-line:#E2E8EA;
  --asm-old:#3A4247; --asm-old-edge:#30373B; --asm-old-glass:#2C383E; --asm-old-line:#98A2A8;
  --asm-bp:#21402E; --asm-bp-edge:#1A3325; --asm-bp-rev:#152A1E; --asm-bp-line:#5DA57A;
  --asm-axis:#59646A; --asm-lead:#6E787E;
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AAB3B8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}}
:root[data-theme="dark"]{
  --paper:#14171A; --paper-2:#1A1E22; --slate:#212629; --tint:#2E1F25;
  --ink:#E8ECEE; --ink-2:#AAB3B8; --ink-3:#98A2A8;
  --rule:#2F363B; --rule-2:#262C31; --accent:#D6798E; --accent-soft:#33202A;
  /* a near-black band is invisible on a near-black page, so in dark the band
     becomes a RAISED surface with an accent hairline instead of a dark one */
  --band:#252C31; --band-ink:#EDF1F2; --band-mute:#A3ADB3; --band-rule:#D6798E; --band-accent:#E8A0B0;
  --plate:#1B2125; --plate-ink:#DDE3E6; --plate-mute:#98A2A8; --plate-rule:#2C343A;
  --on-accent:#16191C; --btn:#B8324D; --btn-ink:#FFFFFF; --btn-edge:#D6798E; --sep:#8A939A;
  --asm-ex:#232A2E; --asm-ex-edge:#1B2124; --asm-ex-rev:#171C1F; --asm-ex-line:#7C878D;
  --asm-rj:#5E2A38; --asm-rj-edge:#46202A; --asm-rj-line:#D97F94;
  --asm-win:#2A3034; --asm-win-edge:#20262A; --asm-glass:#37454C; --asm-win-line:#E2E8EA;
  --asm-old:#3A4247; --asm-old-edge:#30373B; --asm-old-glass:#2C383E; --asm-old-line:#98A2A8;
  --asm-bp:#21402E; --asm-bp-edge:#1A3325; --asm-bp-rev:#152A1E; --asm-bp-line:#5DA57A;
  --asm-axis:#59646A; --asm-lead:#6E787E;
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AAB3B8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;
  line-height:1.65;margin:0;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
.w{max-width:1280px;margin:0 auto;padding-inline:var(--gutter)}
a{color:inherit}
a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin:0}
.tag b{color:var(--accent);font-weight:500}
.strip{color:var(--band-mute)}
.proof .tag b,.close .tag b,.strip .tag b,.hero .tag b{color:var(--band-accent)}
.close h2 em{color:var(--band-accent)}
h1,h2,h3{margin:0;font-family:var(--cond);font-weight:600;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:clamp(40px,min(6.6vw,9.6vh),96px);line-height:.96;text-transform:uppercase}
h2{font-size:clamp(31px,4.3vw,60px);line-height:1;text-transform:uppercase}
h3{font-size:clamp(18px,1.8vw,22px);line-height:1.22}
em{font-style:normal;color:var(--accent)}
/* The button fill and its edge are separate tokens on purpose. In dark mode no
   single burgundy can both carry white text at 4.5:1 and stand 3:1 clear of the
   --band ground; darker helps the text and lighter helps the edge. So the fill
   is tuned for the label (white on #B8324D, 5.83:1) and a lighter border
   defines the shape on any ground (4.71:1 at worst). */
.btn{display:inline-block;font-family:var(--mono);font-size:12.5px;letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;padding:15px 26px;background:var(--btn);
  color:var(--btn-ink);border:1px solid var(--btn-edge)}
.btn:hover{filter:brightness(.88)}
.btn.line{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.line:hover{border-color:var(--ink)}
.acts{display:flex;flex-wrap:wrap;gap:var(--gap)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:60;background:var(--accent);color:var(--on-accent);
  padding:12px 18px;font-family:var(--mono);font-size:12px;text-decoration:none}
.skip-link:focus{left:0}

/* header: a thin credentials strip over a proper bar, the way a drawing sheet
   carries a header band. The old one was three things floating on white. */
/* scroll anchoring will fight a header that changes height above the viewport */
html{overflow-anchor:none}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;isolation:isolate;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(11px);backdrop-filter:saturate(180%) blur(11px);
  border-bottom:1px solid var(--rule);
  transition:background .26s ease, box-shadow .26s ease, border-color .26s ease}
@supports not (backdrop-filter:blur(1px)){header{background:var(--paper)}}
/* Logged in, WordPress's admin bar is fixed over the page: 32px, 46px from 782px
   down, and from 600px down it scrolls away. Without these the scrolled header
   and the pinned How It Works drawing slide half under it. */
body.admin-bar header{top:32px}
body.admin-bar .hiw-fig{top:108px}
@media (max-width:782px){body.admin-bar header{top:46px}}
@media (max-width:600px){body.admin-bar header{top:env(safe-area-inset-top,0px)}}

/* COMPACT. The reference says let the height snap, because the reflow used to
   feed back into the threshold. overflow-anchor:none above is what actually
   breaks that loop, so the height can be animated: proven with the jitter test
   below, 0 toggles across 40 oscillations on each threshold.
   --strip-h is measured in JS so a strip that wraps still animates to its real height. */
.strip{background:var(--band);color:#C9D0D3;overflow:hidden;
  height:var(--strip-h,auto);opacity:1;
  transition:height .34s cubic-bezier(.4,0,.2,1), opacity .2s ease}
header[data-compact="true"] .strip{height:0;opacity:0}
.hbar{transition:padding-block .34s cubic-bezier(.4,0,.2,1)}
.brand img{transition:width .34s cubic-bezier(.4,0,.2,1), height .34s cubic-bezier(.4,0,.2,1)}
.brand .wm b,.brand .wm span,.call b{transition:font-size .34s cubic-bezier(.4,0,.2,1), margin-top .34s cubic-bezier(.4,0,.2,1)}
header[data-compact="true"] .hbar{padding-block:9px}
header[data-compact="true"] .brand img{width:30px;height:30px}
header[data-compact="true"] .brand .wm b{font-size:20px}
header[data-compact="true"] .brand .wm span{font-size:9px;margin-top:4px}
header[data-compact="true"] .call b{font-size:19px}
header[data-compact="true"]{
  background:color-mix(in srgb, var(--paper) 94%, transparent);
  box-shadow:0 1px 14px rgba(22,25,28,.09)}
/* a short desktop window has no room for the strip; the same credentials are
   repeated in the proof band immediately below the hero */
@media (min-width:1041px) and (max-height:760px){
  .strip{display:none}
  .hbar{padding-block:10px}
  .hero .w{padding-block:clamp(36px,5vh,64px)}
}
@media (prefers-reduced-motion:reduce){
  header,.strip,.hbar,.brand img,.brand .wm b,.brand .wm span,.call b{transition:none}
}
.strip .w{display:flex;flex-wrap:wrap;align-items:center;gap:6px clamp(16px,2.4vw,32px);
  padding-block:9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase}
.strip s{text-decoration:none;color:var(--sep)}
.strip .push{margin-left:auto}
.strip a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.strip a:hover{border-bottom-color:#fff}

.hbar{display:flex;align-items:center;gap:clamp(20px,3vw,48px);padding-block:clamp(14px,1.6vw,20px)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex:0 0 auto;min-height:44px}
.brand img{width:38px;height:38px;flex:0 0 auto;display:block}
.brand .wm{display:block}
.brand .wm b{display:block;font-family:var(--cond);font-weight:700;font-size:clamp(22px,2.2vw,27px);
  line-height:.76;color:var(--ink);text-transform:uppercase;letter-spacing:.01em;white-space:nowrap}
.brand .wm span{display:block;font-family:var(--sans);font-weight:600;font-size:11px;line-height:1;
  letter-spacing:.17em;color:var(--accent);margin-top:6px;text-transform:uppercase;white-space:nowrap}
nav{margin-left:auto;display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
nav a{font-family:var(--sans);font-weight:500;font-size:15px;color:var(--ink-2);
  text-decoration:none;padding-block:6px;border-bottom:2px solid transparent;white-space:nowrap}
nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}
/* the page you are on: the hover underline, held, in the accent (Daniel, 2026-10-28) */
nav a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}
.call{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;
  min-height:44px;text-decoration:none;
  border-left:1px solid var(--rule);padding-left:clamp(18px,2.4vw,30px)}
.call small{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3)}
.call b{font-family:var(--cond);font-weight:700;font-size:clamp(20px,2vw,25px);line-height:1.05;
  color:var(--ink);margin-top:3px;white-space:nowrap}
.call:hover b{color:var(--accent)}
/* hamburger + panel: the nav has to go somewhere below the breakpoint */
.burger{display:none;margin-left:auto;flex:0 0 auto;background:transparent;border:1px solid var(--rule);
  min-width:44px;min-height:44px;padding:0 11px;cursor:pointer;line-height:0}
.burger span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0;transition:none}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.panel{display:none;border-top:1px solid var(--rule)}
.panel[data-open="true"]{display:block;overflow-y:auto;overscroll-behavior:contain}
.panel .w{display:flex;flex-direction:column;gap:0;padding-block:8px}
.panel a{padding-block:15px;border-bottom:1px solid var(--rule-2);text-decoration:none;
  font-family:var(--cond);font-weight:600;font-size:22px;text-transform:uppercase;color:var(--ink)}
.panel a:last-child{border-bottom:0}
.panel a[aria-current="page"]{color:var(--accent);box-shadow:inset 3px 0 0 var(--accent);padding-left:14px}
@media (max-width:1040px){
  nav{display:none}
  .burger{display:block}
  .brand img{width:34px;height:34px}
  .call{border-left:0;padding-left:0;margin-left:0}
  .call small{display:none}
  .call b{font-size:19px}
  .hbar{gap:16px}
}
@media (max-width:1040px){ .burger{margin-left:0} .hbar .call{margin-left:auto} }
@media (max-width:560px){
  /* On a phone the strip says "US Patented / AAMA 502-11 Tested" and the hero tag
     40px below it says the same thing larger. 56px of the first screen for a
     duplicate set at 9.5px is not worth it. Tablet keeps the strip. */
  .strip{display:none}
  .strip .w{font-size:9.5px;letter-spacing:.12em}
  .strip .hide{display:none}
  /* the wordmark, the phone and the burger will not fit inside a 320 gutter.
     the mark carries the brand; the phone is the conversion, so the wordmark goes. */
  .brand .wm{display:none}
  .brand{gap:0}
  .call b{font-size:17px}
}

/* ---- A. HERO: full-bleed photograph, text over it ---- */
.hero{position:relative;background:#20242A}
.hero .shot{position:absolute;inset:0;overflow:hidden}
.hero .shot img{width:100%;height:100%;object-fit:cover;opacity:.5}
:root[data-theme="dark"] .hero .shot img{opacity:.34}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero .shot img{opacity:.34}}
.hero .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(22,25,28,.82) 0%,rgba(22,25,28,.55) 55%,rgba(22,25,28,.3) 100%)}
.hero .w{position:relative;padding-block:clamp(44px,min(11vw,7.2vh),152px)}
.hero .tag{color:#C6CDD1}
.hero h1{color:#fff;margin-top:clamp(10px,1.6vh,18px);max-width:9em}
.hero h1 em{color:#F3A4B4}
.hero .sub{color:#DDE2E4;font-size:clamp(16px,1.7vw,20px);margin:clamp(16px,2.4vh,26px) 0 0;max-width:29.38em}
.hero .acts{margin-top:clamp(20px,3vh,40px)}
.hero .btn.line{color:#fff;border-color:rgba(255,255,255,.45)}
.hero .btn.line:hover{border-color:#fff}
.caption{position:relative;border-top:1px solid rgba(255,255,255,.16);padding-block:14px;
  display:flex;flex-wrap:wrap;gap:8px 26px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:#AEB6BA}

/* ---- B. PROOF: one flat ruled row, no boxes ---- */
.proof{background:var(--band);color:var(--band-ink);border-top:2px solid var(--band-rule)}
.proof .tag{color:var(--band-mute)}
.proof .w{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:var(--gap);
  padding-block:clamp(26px,3vw,40px)}
.proof b{display:block;font-family:var(--cond);font-weight:700;font-size:clamp(22px,2.4vw,29px);
  line-height:1;margin-top:10px;color:var(--band-ink)}
.proof span{display:block;font-size:13.5px;color:var(--band-mute);margin-top:9px;line-height:1.45}

/* ---- C. PROBLEM: oversized figures, asymmetric, no cards ---- */
.problem{padding-block:var(--air);background:var(--paper)}
.problem .intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:var(--gap) clamp(32px,6vw,96px);align-items:end}
.problem .intro p{color:var(--ink-2);margin:0}
.bigfigs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--gap);margin-top:clamp(40px,5vw,72px)}
.bigfigs div{border-top:1px solid var(--rule);padding-top:clamp(18px,2vw,26px)}
.bigfigs div:first-child{border-top-color:var(--accent);border-top-width:3px}
.bigfigs b{display:block;font-family:var(--cond);font-weight:700;font-size:clamp(56px,8vw,112px);
  line-height:.82;letter-spacing:-.02em}
.bigfigs p{margin:18px 0 0;font-size:14.5px;color:var(--ink-2);line-height:1.5}

/* ---- D. ASSEMBLY: drawing left, numbered key right ---- */
.assembly{padding-block:var(--air);background:var(--slate)}
.withkey{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr);gap:var(--gap);
  align-items:start;margin-top:clamp(32px,4vw,52px)}
.plate{border:1px solid var(--rule);background:var(--plate);color:var(--plate-ink)}
.plate .tag{color:var(--plate-mute)}
.plate-bar{display:flex;justify-content:space-between;gap:var(--gap);padding:12px 18px;
  border-bottom:1px solid var(--plate-rule)}
.plate figure{margin:0;padding:clamp(20px,3.4vw,52px);display:flex;align-items:center;justify-content:center}
.plate figure img{width:100%;height:auto;object-fit:contain}
/* inline drawing: real selectable text, themed by tokens, page webfont */
.dwg{width:100%;height:auto;display:block;overflow:visible}
.dwg-line{fill:var(--plate-ink)}
/* The client colors his materials; the trace turns them into two tones of the
   same ink (sheathing and cladding light; beads, wrap and insulation mid), so no
   client tint survives and dark mode needs no second drawing. */
.dwg-fill{fill:var(--plate-ink);fill-opacity:.14}
.dwg-tone{fill:var(--plate-ink);fill-opacity:.42}
/* Each marker sits in open paper on a hairline back to the client's own arrow
   tip, so no marker covers the part it names. */
.dwg-lead{fill:none;stroke:var(--accent);stroke-width:1.25px;vector-effect:non-scaling-stroke}
.dwg-tip{fill:var(--accent)}
.dwg-mark circle{fill:var(--accent);stroke:var(--plate);stroke-width:2.5}
/* on-accent, not white: dark mode's lighter accent needs dark digits (white was 3.0:1) */
.dwg-mark text{fill:var(--on-accent);font-family:var(--sans);font-weight:700;font-size:11.5px;text-anchor:middle}

.plate figure[data-pans="true"] + .pan,.plate .pan[data-pans="true"]{display:flex}
/* The bar stacks below 620 so the tag owns its own line. It must be allowed to
   wrap there: "Section through head and sill / NTS" is 308px unbroken, which
   at 320 forced the plate to 346 and the key beside it to match. */
@media (max-width:620px){
  .plate-bar{flex-direction:column;align-items:flex-start;gap:5px}
  .plate-bar .tag{white-space:normal;text-wrap:balance}
}
.plate .pan{margin:0;display:none;align-items:center;gap:8px;padding:0 18px 14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--plate-mute)}
.plate .pan svg{width:15px;height:15px;flex:0 0 auto}
.key{list-style:none;margin:0;padding:0;border:1px solid var(--rule);background:var(--paper)}
.key li{display:grid;grid-template-columns:42px 1fr;gap:15px;padding:13px var(--pad);
  border-bottom:1px solid var(--rule-2);align-items:baseline}
.key li:last-child{border-bottom:0}
.key li.rj{background:var(--accent-soft)}
.key b{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--accent)}
.key strong{font-weight:600;font-size:15px;line-height:1.3}
.key span{display:block;font-weight:400;font-size:13.5px;color:var(--ink-3);margin-top:3px;line-height:1.45}

/* Fig. 2 is inline (parts/fig-assembly.php) so assets/js/assembly.js can move
   its layers; every color is an --asm token, so one drawing serves both themes.
   Without the script it is the finished exploded drawing, old window hidden. */
.asm{width:100%;height:auto;display:block;overflow:hidden}
.asm .ex-f{fill:var(--asm-ex);stroke:var(--asm-ex-line);stroke-width:1.1}
.asm .ex-t,.asm .ex-s{fill:var(--asm-ex-edge);stroke:var(--asm-ex-line);stroke-width:1.1}
.asm .ex-r{fill:var(--asm-ex-rev);stroke:var(--asm-ex-line);stroke-width:.8}
/* the building paper is green, the color it comes in (Terry); the cladding is lap siding */
.asm .bp-f{fill:var(--asm-bp);stroke:var(--asm-bp-line);stroke-width:1.1}
.asm .bp-t,.asm .bp-s{fill:var(--asm-bp-edge);stroke:var(--asm-bp-line);stroke-width:1.1}
.asm .bp-r{fill:var(--asm-bp-rev);stroke:var(--asm-bp-line);stroke-width:.8}
.asm .cl-f{fill:var(--asm-ex);stroke:var(--asm-ex-line);stroke-width:.9;stroke-linejoin:round}
.asm .cl-sh{fill:var(--asm-ex-rev)}
.asm .cl-t,.asm .cl-s{fill:var(--asm-ex-edge);stroke:var(--asm-ex-line);stroke-width:.9;stroke-linejoin:round}
.asm .cl-r{fill:var(--asm-ex-rev);stroke:var(--asm-ex-line);stroke-width:.8;stroke-linejoin:round}
.asm .rj-f{fill:var(--asm-rj);stroke:var(--asm-rj-line);stroke-width:1.3;stroke-linejoin:round}
.asm .rj-t,.asm .rj-s{fill:var(--asm-rj-edge);stroke:var(--asm-rj-line);stroke-width:1.3;stroke-linejoin:round}
.asm .win-f{fill:var(--asm-win);stroke:var(--asm-win-line);stroke-width:1.3}
.asm .win-t,.asm .win-s,.asm .win-r{fill:var(--asm-win-edge);stroke:var(--asm-win-line);stroke-width:1.1}
.asm .win-g{fill:var(--asm-glass);stroke:var(--asm-win-line);stroke-width:1}
.asm .old-f{fill:var(--asm-old);stroke:var(--asm-old-line);stroke-width:1.2}
.asm .old-t,.asm .old-s,.asm .old-r{fill:var(--asm-old-edge);stroke:var(--asm-old-line);stroke-width:1}
.asm .old-g{fill:var(--asm-old-glass);stroke:var(--asm-old-line);stroke-width:1}
.asm-axis line{stroke:var(--asm-axis);stroke-width:1;stroke-dasharray:7 7}
.asm-lead{fill:none;stroke:var(--asm-lead);stroke-width:1}
.asm-num{font-family:var(--mono);font-size:15px;font-weight:600;fill:var(--accent);text-anchor:end}
.asm-num.is-win{fill:var(--ink-2);font-weight:500}
.asm-name{font-family:var(--mono);font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;fill:var(--ink-2);text-anchor:end}
.asm-old,.asm .is-off{opacity:0}
.asm.is-live .asm-old:not(.is-off){opacity:1}
.asm.is-live .asm-l{transition:transform 1.3s cubic-bezier(.65,0,.35,1),opacity .7s ease}
.asm.is-live .asm-lbl,.asm.is-live .asm-axis{transition:opacity .6s ease}
.asm.is-live{transition:opacity .6s ease}
.asm.is-gone{opacity:0}
.asm.no-tx,.asm.no-tx *{transition:none!important}
/* the player: one control and the step it is on, under the drawing */
.asm-bar{display:flex;align-items:center;gap:clamp(14px,1.6vw,20px);padding:12px 18px 16px;
  border-top:1px solid var(--plate-rule)}
.asm-bar[hidden]{display:none}
.asm-play{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px;
  border:1px solid var(--rule);background:transparent;color:var(--plate-ink);cursor:pointer;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.asm-play:hover{border-color:var(--accent);color:var(--accent)}
.asm-play:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.asm-play svg{width:14px;height:14px;flex:0 0 auto}
.asm-play .i-play,.is-playing .asm-play .i-pause{display:block}
.asm-play .i-pause,.is-playing .asm-play .i-play{display:none}
.asm-cap{margin:0;min-height:3em;display:flex;align-items:center;font-size:14.5px;line-height:1.5;color:var(--plate-ink)}
.asm-cap b{flex:0 0 auto;align-self:flex-start;font-family:var(--mono);font-size:12px;font-weight:500;
  color:var(--accent);margin:3px 12px 0 0}
.asm-key li{transition:box-shadow .35s ease,background-color .35s ease}
[data-asm="live"] .asm-key li{cursor:pointer}
[data-asm="live"] .asm-key li:hover strong{color:var(--accent)}
.asm-key li:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.asm-key li.is-on{box-shadow:inset 4px 0 0 var(--accent);background:var(--accent-soft)}
.asm-key li.is-on strong{color:var(--accent)}

/* ---- E. SECTION: full-bleed drawing, caption beneath ---- */
.detail{padding-block:var(--air);background:var(--paper)}
.detail .plate figure .dwg{max-height:none}
.detail .under{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--gap);margin-top:var(--gap)}
.detail .under p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.55}
.detail .under h3{margin-bottom:8px}

/* ---- F. SCHEDULE: a table, nothing else ---- */
.range{padding-block:var(--air);background:var(--tint)}
.sched{margin-top:clamp(32px,4vw,52px);border:1px solid var(--rule);background:var(--paper)}
.row{display:grid;grid-template-columns:70px minmax(0,1.4fr) minmax(0,1.05fr) minmax(0,2fr);
  gap:var(--gap);padding:17px var(--pad);border-bottom:1px solid var(--rule-2);align-items:baseline}
.row:last-child{border-bottom:0}
.row.hd{background:var(--paper-2);border-bottom:1px solid var(--rule)}
.row.hd span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.ref{font-family:var(--mono);font-size:12px;color:var(--accent)}
.nm{font-weight:600;font-size:16.5px;line-height:1.25}
.sp{font-family:var(--mono);font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.fn{font-size:15px;color:var(--ink-2);line-height:1.5}
.kit{margin-top:var(--gap);border:1px solid var(--accent);background:var(--paper);display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:clamp(26px,4vw,64px);align-items:center;
  padding:clamp(26px,3.4vw,46px)}
.kit ul{margin:18px 0 0;padding:0;list-style:none;columns:2;column-gap:40px;font-size:15px;color:var(--ink-2)}
.kit li{padding-left:19px;position:relative;margin-bottom:8px;break-inside:avoid}
.kit li::before{content:"";position:absolute;left:0;top:.66em;width:10px;height:1px;background:var(--accent)}
.price{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:0}
.price .from{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3)}
.price b{display:block;font-family:var(--cond);font-weight:700;font-size:clamp(40px,5vw,62px);
  line-height:.88;margin-top:10px}
.price .unit{font-size:13.5px;color:var(--ink-2);margin-top:12px;max-width:13.56em;text-align:right;text-wrap:balance}
.price .btn{margin-top:22px}
.price .ask{font-size:13.5px;color:var(--ink-2);margin-top:14px;text-decoration:none;
  border-bottom:1px solid var(--rule)}
.price .ask:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ---- G. SEQUENCE: photo beside numbered steps ---- */
.install{padding-block:var(--air);background:var(--slate)}
.seqgrid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(28px,4vw,64px);align-items:start;margin-top:clamp(32px,4vw,52px)}
.shotbox{border:1px solid var(--rule);background:var(--paper)}
/* 3/2, matching bay.jpg's own 1500x1000 and the width/height attributes on the
   tag. The CSS used to ask for 4/3 while the photo is 3/2, so the box and the
   picture disagreed and the crop fought the declared size. When the attributes,
   the CSS ratio and the file all state the same ratio there is nothing left to
   argue about, and height:auto stops any ancestor stretching it. */
.shotbox img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.shotbox .cap{margin:0;padding:16px 18px;font-family:var(--mono);font-size:11px;color:var(--ink-3);
  letter-spacing:.08em;text-transform:uppercase;border-top:1px solid var(--rule-2)}
.steps{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--rule)}
.steps > div{display:grid;grid-template-columns:62px 1fr;gap:18px;padding-block:clamp(18px,2.2vw,26px);
  border-bottom:1px solid var(--rule-2);align-items:start}
.steps b{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.1em;padding-top:4px}
.steps p{margin:8px 0 0;font-size:15px;color:var(--ink-2);line-height:1.55}

/* ---- H. CLOSE: dark band, the one inversion on the page ---- */
.close{background:var(--band);color:var(--band-ink);border-top:2px solid var(--band-rule)}
.close .w{padding-block:var(--air);display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(26px,4vw,72px);align-items:center}
.close .tag{color:var(--band-mute);max-width:26.4em}
.close h2{color:var(--band-ink);margin-top:16px}
.close h2 em{color:#F3A4B4}
.close p{color:var(--band-mute);margin:18px 0 0;max-width:24.86em}
.close .btn.line{color:#fff;border-color:rgba(255,255,255,.4)}
.phone{font-family:var(--cond);font-weight:700;font-size:clamp(34px,5vw,64px);line-height:.95;
  text-decoration:none;white-space:nowrap;color:var(--band-ink)}
.phone small{display:block;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--band-mute);margin-bottom:14px}
.phone:hover{color:#F3A4B4}

/* footer: brand column, nav columns, contact, prefs row, legal, credit */
footer{border-top:1px solid var(--rule);background:var(--paper-2)}
.fgrid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,56px);padding-block:clamp(44px,5.5vw,76px)}
.fbrand{display:flex;align-items:center;gap:14px;text-decoration:none;margin-bottom:20px}
.fbrand img{width:38px;height:38px;flex:0 0 auto;display:block}
.fbrand b{display:block;font-family:var(--cond);font-weight:700;font-size:25px;line-height:.76;
  color:var(--ink);text-transform:uppercase;letter-spacing:.01em}
.fbrand b span{display:block;font-family:var(--sans);font-weight:600;font-size:11px;line-height:1;
  letter-spacing:.17em;color:var(--accent);margin-top:6px;text-transform:uppercase}
.fabout{color:var(--ink-2);font-size:15px;margin:0;max-width:22.6em}
/* h2, not h4: after the page's own h2s an h4 skips a level. line-height undoes
   the base h2's 1, which would shrink the label box. */
.fcol h2{margin:0 0 16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500;line-height:inherit}
.fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.fcol a{color:var(--ink-2);text-decoration:none;font-size:15px}
.fcol a:hover{color:var(--accent)}
.fcol .big{font-family:var(--cond);font-weight:700;font-size:23px;color:var(--ink);line-height:1.1}
.fcol .big:hover{color:var(--accent)}
.prefs{border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;align-items:center;
  gap:16px clamp(20px,3vw,40px);padding-block:20px}
.prefs .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.themer{display:flex;border:1px solid var(--rule);background:var(--paper)}
.themer button{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  background:transparent;border:0;border-right:1px solid var(--rule);color:var(--ink-2);
  padding:9px 15px;cursor:pointer}
.themer button:last-child{border-right:0}
.themer button[aria-pressed="true"]{background:var(--btn);color:var(--btn-ink)}
.legal{margin-left:auto;display:flex;flex-wrap:wrap;gap:10px clamp(16px,2.4vw,28px)}
.legal a{font-size:13.5px;color:var(--ink-2);text-decoration:none}
.legal a:hover{color:var(--accent)}
.fbar{border-top:1px solid var(--rule-2);display:flex;flex-wrap:wrap;
  gap:10px clamp(20px,3vw,40px);padding-block:22px;font-size:13px;color:var(--ink-3)}
.fbar .credit{margin-left:auto}
.fbar .credit a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule)}
.fbar .credit a:hover{color:var(--accent);border-bottom-color:var(--accent)}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}.legal{margin-left:0;width:100%}}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}}

@media (max-width:920px){
  .problem .intro,.withkey,.seqgrid,.close .w,.kit{grid-template-columns:minmax(0,1fr)}
  .price{text-align:left}
  .kit ul{columns:1}
  .row{grid-template-columns:60px 1fr;gap:6px 16px}
  .row .sp,.row .fn{grid-column:2}
  .row.hd{display:none}
  .hero h1{max-width:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- INNER PAGES ----
   The mockup was a single front page, so these carry the paper, the measure and
   the vertical rhythm for every other template. Spacing is a RANGE and lives on
   the CONTAINER, never as a margin between siblings. */
.plain{background:var(--paper);padding-block:var(--air)}
.plain .w{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,28px)}
.plain h1{font-size:clamp(34px,5vw,64px);line-height:1.02;text-transform:uppercase;
  max-width:8.1em;margin:0}
.plain .tag{margin:0}

.lead{font-size:clamp(17px,1.9vw,21px);line-height:1.5;color:var(--ink-2);max-width:31.64em;margin:0}

/* Long-form copy. The gap sits on .prose so a new element type never needs a
   margin rule of its own, and nothing double-spaces. */
.prose{display:flex;flex-direction:column;gap:clamp(16px,1.8vw,24px);max-width:38.42em}
.prose > *{margin:0}
.prose h2{font-family:var(--cond);font-weight:700;font-size:clamp(24px,3vw,38px);
  line-height:1.08;text-transform:uppercase;margin-top:clamp(14px,1.6vw,22px)}
.prose h3{font-family:var(--cond);font-weight:600;font-size:clamp(19px,2.2vw,26px);line-height:1.14}
.prose p,.prose li{font-size:16.5px;line-height:1.62;color:var(--ink-2)}
.prose a{color:var(--accent);text-underline-offset:3px}
.prose ul,.prose ol{display:flex;flex-direction:column;gap:10px;padding-left:22px}
.prose img{max-width:100%;height:auto;display:block}
.prose blockquote{border-left:3px solid var(--accent);padding-left:clamp(16px,2vw,24px);
  font-size:clamp(17px,1.9vw,20px);color:var(--ink)}

/* Recovery navigation on 404 and an empty search. */
.crumbs{display:flex;flex-wrap:wrap;gap:clamp(12px,1.6vw,22px)}
.crumbs a{font-family:var(--mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule);padding-block:10px}
.crumbs a:hover{color:var(--accent);border-bottom-color:var(--accent)}

.results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;
  border-top:1px solid var(--rule-2)}
.results li{border-bottom:1px solid var(--rule-2)}
.results a{display:block;padding-block:15px;font-family:var(--cond);font-weight:600;
  font-size:clamp(19px,2.2vw,25px);text-transform:uppercase;color:var(--ink);text-decoration:none}
.results a:hover{color:var(--accent)}

/* ---- CATALOG PAGE ----
   Bands alternate ground on purpose: a stack of identical sections is the thing
   that makes a page read as filler. Gaps sit on the container, as ranges. */
.pagehead-band{padding-block:clamp(48px,7vw,104px) clamp(34px,5vw,64px)}
.pagehead{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px)}
.pagehead h1{font-size:clamp(34px,5vw,64px);line-height:1.02;text-transform:uppercase;
  max-width:9em;margin:0}
.pagehead .tag,.pagehead .lead{margin:0}
.lead-tight{max-width:35.03em}

.kits-band{background:var(--paper-2);padding-block:var(--air);border-block:1px solid var(--rule)}
.kits{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:clamp(18px,2.4vw,30px);margin-top:clamp(20px,2.6vw,32px)}
.kitcard{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px);
  border:1px solid var(--rule);background:var(--paper);padding:clamp(22px,2.8vw,36px)}
.kitcard-h{display:flex;flex-direction:column;gap:10px}
.kitcard h2{font-family:var(--cond);font-weight:700;font-size:clamp(23px,2.6vw,31px);
  line-height:1.08;text-transform:uppercase;margin:0;max-width:9.06em}
.kitcard .tag{margin:0}
.kitspec{margin:0;display:flex;flex-direction:column;gap:12px;
  border-top:1px solid var(--rule-2);padding-top:clamp(14px,1.8vw,20px)}
.kitspec > div{display:grid;grid-template-columns:78px 1fr;gap:16px;align-items:baseline}
.kitspec dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.kitspec dd{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.kitprice{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(14px,1.8vw,22px);border-top:1px solid var(--rule-2);
  padding-top:clamp(16px,2vw,22px)}
.kitprice b{font-family:var(--cond);font-weight:700;font-size:clamp(30px,3.6vw,42px);
  line-height:1;color:var(--ink)}
.kitnote{margin:clamp(20px,2.6vw,30px) 0 0;max-width:44.07em;font-size:15px;
  line-height:1.6;color:var(--ink-3)}
/* One kit (the least Terry sells): the card lies wide, its price and button
   beside what it is, rather than a half-empty card the width of the page. */
@media (min-width:760px){
  .kitcard:only-child{display:grid;grid-template-columns:minmax(0,1fr) auto;
    column-gap:clamp(26px,4vw,64px);row-gap:clamp(16px,2vw,24px)}
  .kitcard:only-child > .kitcard-h,.kitcard:only-child > .kitspec{grid-column:1}
  .kitcard:only-child > .kitprice{grid-column:2;grid-row:1 / span 2;align-self:center;margin:0;
    border-top:0;padding-top:0;flex-direction:column;align-items:flex-end}
}

.sched-band{padding-block:var(--air)}
.sched-band h2{font-family:var(--cond);font-weight:700;font-size:clamp(26px,3.4vw,42px);
  line-height:1.06;text-transform:uppercase;margin:clamp(12px,1.6vw,18px) 0 0;max-width:10.872em}
.sched-band .lead{margin:clamp(12px,1.6vw,18px) 0 clamp(22px,3vw,36px)}
.sched .nm a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
.sched .nm a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.schednote{margin:clamp(16px,2vw,24px) 0 0;font-size:14px;color:var(--ink-3);max-width:39.55em}

.parts-band{background:var(--paper-2);padding-block:var(--air);border-top:1px solid var(--rule)}
/* Open rows between rules, each part on a paper tile large enough to read its
   profile: a price list, not a stack of cards. */
.parts{display:flex;flex-direction:column;gap:0;margin-top:clamp(20px,2.6vw,32px);border-top:1px solid var(--rule)}
.part{display:grid;grid-template-columns:clamp(110px,13vw,176px) minmax(0,1.55fr) minmax(0,.9fr);
  gap:clamp(20px,3vw,44px);align-items:start;padding-block:clamp(26px,3vw,40px);border-bottom:1px solid var(--rule)}
.part-main{display:flex;flex-direction:column;gap:10px;min-width:0}
.part h3{font-family:var(--cond);font-weight:700;font-size:clamp(19px,2.2vw,25px);
  line-height:1.1;text-transform:uppercase;margin:0}
.part .tag{margin:0}
.part-note{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2);max-width:35.03em}
/* Ruled rows, not boxes. A filled, bordered "each / case" pair is exactly what a
   store's variant picker looks like, so contractors would click it expecting to
   choose one. Nothing here is a control, so nothing here is shaped like one. */
.part-prices{display:flex;flex-direction:column;gap:0;align-content:start;border-top:1px solid var(--rule)}
.tier{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-block:13px;border-bottom:1px solid var(--rule-2)}
.tier .unit{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.tier b{font-family:var(--cond);font-weight:700;font-size:clamp(19px,2.2vw,24px);
  line-height:1;color:var(--ink);white-space:nowrap}

/* The close band's phone link sits on the dark ground, so it needs band ink.
   .call is written for the header, where --ink on --paper is right; on the band
   the same rule printed the number in near-black on near-black. */
.close .call{border-left-color:rgba(255,255,255,.22)}
.close .call small{color:var(--band-mute)}
.close .call b{color:var(--band-ink)}
.close .call:hover b{color:#F3A4B4}
.close .call-lg b{font-size:clamp(22px,2.6vw,30px)}

@media (max-width:760px){
  .part{grid-template-columns:96px minmax(0,1fr)}
  .part-prices{grid-column:1/-1}
  .kitspec > div{grid-template-columns:1fr;gap:4px}
}

/* ---- INSTALLATION GUIDE ---- */
.tools-band{background:var(--band);color:var(--band-ink);padding-block:clamp(40px,5vw,72px)}
.tools-band .tag{color:var(--band-mute)}
.tools-band .tag b{color:var(--band-accent)}
.tools{list-style:none;margin:clamp(18px,2.4vw,26px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,164px),1fr));
  gap:clamp(12px,1.6vw,18px)}
.tools li{display:flex;align-items:baseline;gap:12px;font-size:15.5px;color:var(--band-ink)}
.tools li span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--band-accent);flex:0 0 auto}

.steps-band{padding-block:var(--air)}
.steps-band h2{font-family:var(--cond);font-weight:700;font-size:clamp(26px,3.4vw,42px);
  line-height:1.06;text-transform:uppercase;margin:clamp(12px,1.6vw,18px) 0 clamp(24px,3vw,40px)}
.proc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;
  border-top:1px solid var(--rule)}
.proc > li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:clamp(14px,2vw,26px);
  padding-block:clamp(18px,2.2vw,26px);border-bottom:1px solid var(--rule-2)}
.stepno{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--accent);
  letter-spacing:.06em}
.stepbody{display:flex;flex-direction:column;gap:12px;min-width:0}
.stepbody p{margin:0;font-size:16.5px;line-height:1.6;color:var(--ink-2);max-width:41.81em}
.steptip,.stepwarn{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;
  padding:clamp(12px,1.4vw,16px);font-size:15px!important;line-height:1.55}
.steptip{background:var(--paper-2);border-left:2px solid var(--sep)}
.stepwarn{background:var(--accent-soft);border-left:2px solid var(--accent)}
.steptip b,.stepwarn b{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;flex:0 0 auto}
.steptip b{color:var(--ink-3)}
.stepwarn b{color:var(--accent)}
.stepwarn{color:var(--ink)}

.tips-band{background:var(--paper-2);padding-block:var(--air);border-block:1px solid var(--rule)}
.tipcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:clamp(20px,2.8vw,40px);margin-top:clamp(20px,2.6vw,32px)}
.tipcol{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,18px)}
.tipcol h3{font-family:var(--cond);font-weight:700;font-size:clamp(18px,2vw,23px);
  line-height:1.1;text-transform:uppercase;margin:0;
  padding-bottom:12px;border-bottom:1px solid var(--rule)}
.tipcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.tipcol li{font-size:15px;line-height:1.55;color:var(--ink-2);padding-left:16px;position:relative}
.tipcol li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;
  background:var(--accent)}

.docs-band{padding-block:var(--air)}
.docs-band h2{font-family:var(--cond);font-weight:700;font-size:clamp(26px,3.4vw,42px);
  line-height:1.06;text-transform:uppercase;margin:clamp(12px,1.6vw,18px) 0 0}
.docs-band .lead{margin:clamp(12px,1.6vw,18px) 0 clamp(22px,3vw,34px)}
.docs{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:clamp(16px,2vw,22px)}
.docs a{display:grid;grid-template-columns:24px minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:6px 14px;
  align-items:start;text-decoration:none;color:var(--ink);
  border:1px solid var(--rule);background:var(--paper);
  padding:clamp(18px,2.2vw,26px);height:100%}
.docs a:hover{border-color:var(--accent)}
.docs .ic{grid-row:1/2;color:var(--accent);margin-top:2px}
.docname{font-family:var(--cond);font-weight:700;font-size:clamp(17px,1.9vw,21px);
  line-height:1.12;text-transform:uppercase}
.docnote{grid-column:2/3;font-size:14.5px;line-height:1.5;color:var(--ink-2);max-width:40.68em}
.docsize{grid-column:2/3;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}

@media (max-width:620px){
  .proc > li{grid-template-columns:44px minmax(0,1fr)}
}

/* ---- THE NINE DRAWN STAGES ----
   The client's own step-by-step drawings are the point of this page; the
   transcribed procedure below them is reference, not the main event.
   They are black line on white raster, so they sit on a constant paper plate in
   BOTH themes rather than glaring out of a dark page or being filter-inverted,
   which would turn the linework into a negative. A drawing set is paper. */
.stages-band{padding-block:var(--air);background:var(--paper)}
.stages-band h2{font-family:var(--cond);font-weight:700;font-size:clamp(26px,3.4vw,42px);
  line-height:1.06;text-transform:uppercase;margin:clamp(12px,1.6vw,18px) 0 0;max-width:9.966em}
.stagenote{margin:clamp(12px,1.6vw,18px) 0 0;max-width:38.42em;font-size:15px;line-height:1.55;
  color:var(--ink-3);border-left:2px solid var(--sep);padding-left:16px}
.stageno{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--accent)}

/* The procedure below is reference: two columns so it uses the page instead of
   leaving half of it empty, which is what made it read as a wall of text.
   display:block, because columns applies to a block container only: on the flex
   list it was silently ignored and the procedure stayed one long column. */
@media (min-width:1000px){
  .proc{display:block;columns:2;column-gap:clamp(32px,4vw,64px);border-top:0}
  .proc > li{break-inside:avoid;border-top:1px solid var(--rule-2);border-bottom:0}
}

/* ---- INNER PAGES II: the case, the facts, the tests, about ----
   Each band is a different shape on purpose, as on the homepage. A band's
   heading group is one stack (.bh) and the band itself is another (.stack), so
   every vertical space is a gap on a container and none is a sibling margin. */
.pagehead-band{display:flex;flex-direction:column;gap:clamp(40px,5vw,72px)}
/* A flex column centers an auto-margined child AND shrinks it to its content,
   so without this the title block sits narrow and off the page's left edge. */
.pagehead-band > .w{width:100%}
.w.stack{display:flex;flex-direction:column;gap:clamp(28px,3.6vw,48px)}
.bh{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,18px);align-items:flex-start}
.bh h2,.dp-text h2,.tear-text h2,.code-intro h2{font-family:var(--cond);font-weight:700;
  font-size:clamp(26px,3.4vw,42px);line-height:1.06;text-transform:uppercase;margin:0;max-width:10.872em}
.more{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;font-family:var(--mono);
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
  text-decoration:none;border-bottom:1px solid currentColor;padding-block:8px}
.more:hover{color:var(--ink)}
.more .ic{flex:0 0 auto}

/* Title block: the labeled grid in the corner of a drawing sheet. Ruled cells,
   label over value, no fills, so nothing in it reads as a control. */
.tblock{border:1px solid var(--rule);background:var(--paper);min-width:0;align-self:start}
.tblock-h{margin:0;padding:14px clamp(16px,1.8vw,22px);border-bottom:2px solid var(--accent);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.tblock dl{margin:0;display:flex;flex-direction:column}
.tblock dl > div{display:flex;flex-direction:column;gap:6px;
  padding:clamp(14px,1.6vw,18px) clamp(16px,1.8vw,22px);border-bottom:1px solid var(--rule-2)}
.tblock dl > div:last-child{border-bottom:0}
.tblock dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.tblock dd{margin:0;font-family:var(--cond);font-weight:600;font-size:clamp(18px,1.8vw,21px);
  line-height:1.2;color:var(--ink)}

/* Why: the argument under the title, then the benefits in three columns. */
.plain .w.argue{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:var(--gap) clamp(32px,6vw,96px);align-items:start}
.argue h2{font-size:clamp(28px,3.8vw,50px);line-height:1.02;max-width:7.2em}
.argue p{margin:0;font-size:16.5px;line-height:1.65;color:var(--ink-2);max-width:35.03em}
.bene-band{background:var(--slate);padding-block:var(--air)}
.bene{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:clamp(28px,3.6vw,52px)}
.bene-col{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px);min-width:0}
.bene-col h3{font-family:var(--cond);font-weight:700;font-size:clamp(19px,2vw,24px);line-height:1.1;
  text-transform:uppercase;margin:0;padding-bottom:14px;border-bottom:3px solid var(--accent)}
.bene-col ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bene-col li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;align-items:baseline;
  padding-block:clamp(14px,1.6vw,18px);border-bottom:1px solid var(--rule)}
.bene-col li b{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--accent);letter-spacing:.06em}
.bene-col li span{font-size:15.5px;line-height:1.55;color:var(--ink)}
.plain .w.dp{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(28px,5vw,80px);align-items:start}
.dp-text,.tear-text,.code-intro{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,20px);min-width:0}
/* :not(.tag), or this out-specifies .tag and prints the eyebrow at body size */
.dp-text p:not(.tag),.tear-text p:not(.tag),.code-intro p:not(.tag){margin:0;font-size:16.5px;line-height:1.65;
  color:var(--ink-2);max-width:33.9em}

/* Installation Facts: the figures as a dark board, three abreast, each
   number set as big as the page allows. It follows a photograph, so the page
   runs photo, dark, paper, slate and never repeats a ground. */
.facts-band{background:var(--band);color:var(--band-ink);padding-block:var(--air);border-top:2px solid var(--band-rule)}
.facts-band .tag{color:var(--band-mute)}
.facts-band .bh h2{color:var(--band-ink)}
.facts-band .bh h2 em{color:#F3A4B4}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap) clamp(24px,3.6vw,56px)}
.fact{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,30px);min-width:0;
  padding-top:clamp(22px,2.6vw,32px);border-top:1px solid rgba(255,255,255,.2)}
.fact:first-child{border-top:3px solid #F3A4B4}
.fact-stat{font-family:var(--cond);font-weight:700;font-size:clamp(84px,10.5vw,164px);line-height:.8;
  letter-spacing:-.02em;color:#F3A4B4}
.fact-body{display:flex;flex-direction:column;gap:12px;min-width:0}
.fact-body h3{font-family:var(--cond);font-weight:700;font-size:clamp(21px,2.2vw,27px);line-height:1.1;
  text-transform:uppercase;margin:0;color:var(--band-ink)}
.fact-body p{margin:0;font-size:16px;line-height:1.62;color:var(--band-mute);max-width:25.99em}
@media (max-width:900px){ .facts{grid-template-columns:minmax(0,1fr)} }
.plain .w.tear{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,80px);align-items:start}
.tear-text p.tear-close{color:var(--ink);font-weight:600}
.tear-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(18px,2.4vw,32px);border-top:1px solid var(--rule)}
.tear-list li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:baseline;
  padding-block:clamp(14px,1.6vw,18px);border-bottom:1px solid var(--rule)}
.tear-list b{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--accent)}
.tear-list span{font-family:var(--cond);font-weight:600;font-size:clamp(18px,2vw,23px);
  line-height:1.15;text-transform:uppercase}
.code-band{background:var(--slate);padding-block:var(--air)}
.code-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(28px,5vw,80px);align-items:start}
.code-doc{min-width:0}
.code-text{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,16px);padding:clamp(20px,2.8vw,36px)}
.code-text p{margin:0;font-size:15.5px;line-height:1.65;color:var(--plate-ink)}
.code-text b{font-family:var(--mono);font-weight:500;font-size:13px;color:var(--accent)}
.code-text p:first-child b{font-family:var(--cond);font-weight:700;font-size:17px;
  text-transform:uppercase;color:var(--plate-ink)}
.code-text .lvl-2{padding-left:clamp(16px,2.4vw,32px);border-left:1px solid var(--plate-rule)}
.readcard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px clamp(16px,2vw,28px);
  align-items:center;max-width:860px;text-decoration:none;color:var(--ink);
  border:1px solid var(--rule);background:var(--paper-2);padding:clamp(20px,2.6vw,32px)}
.readcard:hover{border-color:var(--accent)}
.readsrc{grid-column:1;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.readtitle{grid-column:1;font-family:var(--cond);font-weight:700;font-size:clamp(20px,2.4vw,28px);
  line-height:1.1;text-transform:uppercase}
.readby{grid-column:1;font-size:14.5px;color:var(--ink-2)}
.readcard .ic{grid-column:2;grid-row:1/4;color:var(--accent)}

/* Test Results: a schedule, the video, the two codes. */
.tests-band{background:var(--tint);padding-block:var(--air)}
.sched.tests{margin-top:0}
.tests .row{grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,2fr)}
.std{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--accent);letter-spacing:.04em}
.vidgrid{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr);gap:var(--gap);align-items:start}
.vidbox{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,20px);padding:clamp(16px,2.4vw,28px)}
.vid{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;aspect-ratio:16/9;padding:20px;text-align:center;text-decoration:none;
  background-color:var(--band);color:var(--band-ink);
  background-image:repeating-linear-gradient(0deg,transparent 0 23px,rgba(255,255,255,.05) 23px 24px),
    repeating-linear-gradient(90deg,transparent 0 23px,rgba(255,255,255,.05) 23px 24px)}
.vid.is-playing{padding:0;background-image:none;background-color:#000}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-play{display:grid;place-items:center;width:clamp(64px,8vw,88px);height:clamp(64px,8vw,88px);
  border-radius:50%;background:var(--btn);color:var(--btn-ink);border:1px solid var(--btn-edge);
  transition:transform .2s ease}
.vid-play svg{margin-left:4px}
.vid:hover .vid-play{transform:scale(1.06)}
.vid-label{font-family:var(--cond);font-weight:700;font-size:clamp(20px,2.4vw,28px);line-height:1.1;
  text-transform:uppercase}
.vid-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--band-mute)}
.vid-cap{margin:0;font-size:14.5px;line-height:1.55;color:var(--plate-mute)}
/* Two videos in one band: each set is a heading over its plate, and the sets
   stand a section's distance apart, so they never read as one block. */
.vid-band .w.vids{gap:clamp(64px,8vw,112px)}
.vid-set{display:flex;flex-direction:column;gap:clamp(28px,3.6vw,48px)}
/* The guide's band sits between two paper bands, so it takes slate to stay
   its own section rather than a gap in the middle of one. */
.guide-vids{background:var(--slate);padding-block:var(--air)}
.vidpair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:var(--gap);align-items:start}
.codes-band{background:var(--slate);padding-block:var(--air)}
.codes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:clamp(18px,2.4vw,30px)}
.codecard{display:flex;flex-direction:column;gap:clamp(16px,2vw,22px);min-width:0;
  border:1px solid var(--rule);background:var(--paper);padding:clamp(22px,2.8vw,36px)}
.codecard-h{display:flex;flex-direction:column;gap:10px}
.codecard h3{font-family:var(--cond);font-weight:700;font-size:clamp(28px,3.4vw,40px);line-height:1;
  text-transform:uppercase;margin:0}
.codespec{margin:0;display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--rule-2);
  padding-top:clamp(14px,1.8vw,20px)}
.codespec > div{display:flex;flex-direction:column;gap:5px}
.codespec dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.codespec dd{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-2)}

/* About: his own words beside the facts, then the drawing set's index. */
.bio-band{background:var(--paper-2);padding-block:var(--air);border-block:1px solid var(--rule)}
.bio{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,5vw,80px);align-items:start}
.pull{margin:0;display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px);min-width:0;
  border-top:3px solid var(--accent);padding-top:clamp(20px,2.6vw,32px)}
.pull blockquote{margin:0}
.pull p{margin:0;font-family:var(--cond);font-weight:600;font-size:clamp(26px,3.4vw,44px);
  line-height:1.12;color:var(--ink);text-wrap:balance}
.pull p::before{content:"\201C";color:var(--accent)}
.pull p::after{content:"\201D";color:var(--accent)}
.pull figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:14.5px;color:var(--ink-2)}
.pull figcaption b{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.sheets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.sheets a{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,.8fr) 22px;
  gap:clamp(12px,2vw,28px);align-items:baseline;padding-block:clamp(16px,2vw,22px);
  border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink)}
.sheets a:hover .sheet-t,.sheets a:hover .ic{color:var(--accent)}
.sheets b{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--accent);letter-spacing:.06em}
.sheet-t{font-family:var(--cond);font-weight:700;font-size:clamp(20px,2.4vw,28px);line-height:1.1;text-transform:uppercase}
.sheet-n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sheets .ic{color:var(--ink-3);align-self:center}

@media (max-width:920px){
  .plain .w.argue,.plain .w.dp,.plain .w.tear,.code-grid,.bio,.vidgrid,.fact{grid-template-columns:minmax(0,1fr)}
  .tests .row{grid-template-columns:minmax(0,1fr);gap:6px}
  .tests .row .fn{grid-column:auto}
}
@media (max-width:620px){
  .tear-list{grid-template-columns:minmax(0,1fr)}
  .sheets a{grid-template-columns:40px minmax(0,1fr) 20px}
  .sheet-n{grid-column:2;grid-row:2}
  .sheets .ic{grid-column:3;grid-row:1/3}
}

/* ---- HOW IT WORKS: nine stages on one drawing ----
   The client's nine drawings share one registration, so they stack in one
   frame and swap: the drawing builds up while the text moves on. */
.hiw-band{background:var(--paper-2);padding-block:var(--air);border-block:1px solid var(--rule)}
.hiw{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(24px,4vw,64px);align-items:start}
.hiw-fig{position:sticky;top:76px;min-width:0}
/* 512/458 = 1.118. A short screen gets a smaller drawing, never a cut one. */
.hiw-fig .plate{max-width:calc((100svh - 300px) * 1.118 + 52px)}
/* The sheet carries the margin; the frame inside it stays exactly 512:458, so
   the markers' percentages still land on the drawing. */
.hiw-sheet{padding:clamp(14px,2vw,26px);background:var(--drw-paper)}
.hiw-frame{position:relative;aspect-ratio:512/458;background:var(--drw-paper);overflow:hidden;container-type:inline-size}
.hiw-img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .35s ease}
.hiw-img.is-on{opacity:1}
.hiw-mark{position:absolute;display:grid;place-items:center;width:clamp(18px,4.6cqw,26px);height:clamp(18px,4.6cqw,26px);
  transform:translate(-50%,-50%);border-radius:50%;background:var(--drw-mark);color:var(--drw-mark-ink);
  box-shadow:0 0 0 2px var(--drw-paper);font-family:var(--sans);font-weight:700;font-size:clamp(10px,2.5cqw,13px);
  line-height:1;opacity:0;transition:opacity .3s ease}
.hiw-mark.is-on{opacity:1}
.hiw-nav{display:none;justify-content:space-between;gap:16px;padding:12px 16px;border-top:1px solid var(--plate-rule)}
.hiw.is-live .hiw-nav{display:flex}
.hiw-nav button{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 16px;
  font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--plate-ink);background:transparent;border:1px solid var(--rule);cursor:pointer}
.hiw-nav button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.hiw-nav button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hiw-nav button:disabled{opacity:.4;cursor:default}
.hiw-prev .ic{transform:rotate(180deg)}
.hiw-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px)}
/* Unboxed: a rule down the left that turns burgundy on the stage in view. */
.hiw-step{display:flex;flex-direction:column;gap:14px;min-width:0;border-left:3px solid var(--rule);
  padding:clamp(4px,.8vw,8px) 0 clamp(4px,.8vw,8px) clamp(20px,2.4vw,32px);transition:border-color .25s ease}
.hiw-step.is-on{border-left-color:var(--accent)}
.hiw-step h3{font-family:var(--cond);font-weight:700;font-size:clamp(21px,2.4vw,28px);line-height:1.08;
  text-transform:uppercase;margin:0}
.hiw-calls{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--rule-2)}
.hiw-calls li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:baseline;
  padding-block:11px;border-bottom:1px solid var(--rule-2)}
.hiw-calls b{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--accent)}
.hiw-calls span{font-size:15.5px;line-height:1.5;color:var(--ink-2)}
/* Room after the last stage, so the sticky drawing stays pinned below the header
   while stage 9 is read. With 14vh it was already 40px under the header the
   moment stage 9 took over, at 1280x800 in every engine; 40vh holds it until
   stage 9's top reaches 30% of the screen (needs 26 to 33vh at 720 to 900 tall). */
@media (min-width:921px){ .hiw-step{min-height:clamp(200px,30vh,300px)} .hiw-steps{padding-bottom:40vh} }

.parts-grid-band{background:var(--slate);padding-block:var(--air)}
.pcards{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(32px,3.6vw,52px) var(--gap)}
/* Each part on its own paper tile, big enough to read the profile, the text
   under it on the band: no card around the pair. */
.pcard{display:flex;flex-direction:column;gap:clamp(16px,1.8vw,22px);min-width:0}
/* A part tile is white (the product shots are white-ground photos, some of
   white PVC) and every tile is the same box whatever the photo's shape: the
   image is laid INSIDE the ratio box and contained. With max-height:100% in
   the flow, a tall photo pushed its tile taller than its neighbors. */
.pcard-photo,.part-photo{--tile-pad:clamp(10px,1.2vw,14px);position:relative;aspect-ratio:3/4;
  background:#fff;border:1px solid var(--rule-2)}
.pcard-photo img,.part-photo img{position:absolute;inset:var(--tile-pad);
  width:calc(100% - 2 * var(--tile-pad));height:calc(100% - 2 * var(--tile-pad));object-fit:contain}
.pcard .pcard-photo{aspect-ratio:4/3;--tile-pad:clamp(22px,2.8vw,40px)}
.pcard-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.pcard-body .tag{margin:0}
.pcard-body h3{font-family:var(--cond);font-weight:700;font-size:clamp(19px,2vw,23px);line-height:1.1;
  text-transform:uppercase;margin:0}
.pcard-body p:not(.tag){margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.pcard-body p.pcard-spec{font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.trade{display:flex;flex-direction:column;gap:12px}
.trade .tag{margin:0}
.trade ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:0 clamp(18px,2.4vw,30px);border-top:1px solid var(--rule)}
.trade li{display:flex;flex-direction:column;gap:4px;padding-block:14px;border-bottom:1px solid var(--rule)}
.trade b{font-weight:600;font-size:15.5px}
.trade span{font-size:15px;line-height:1.5;color:var(--ink-2)}
.hiw-detail .withkey{margin-top:0}

@media (max-width:920px){
  .hiw{grid-template-columns:minmax(0,1fr)}
  .hiw-fig{position:static}
  .hiw-fig .plate{max-width:none}
  .hiw.is-live .hiw-step:not(.is-on){display:none}
}

/* ---- REQUEST A QUOTE ----
   The form is the call to action, so the page carries no closing band. */
.quote-band{background:var(--paper-2);padding-block:var(--air);border-block:1px solid var(--rule)}
.qgrid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr);gap:clamp(24px,4vw,64px);align-items:start}
.qcard{display:flex;flex-direction:column;gap:clamp(22px,2.8vw,32px);min-width:0;
  border:1px solid var(--rule);background:var(--paper);padding:clamp(22px,3.4vw,44px)}
.qnote{margin:0;font-size:14px;line-height:1.55;color:var(--ink-3)}
.qnote a{color:var(--accent);text-underline-offset:3px}
.qside{display:flex;flex-direction:column;gap:clamp(22px,2.8vw,32px);min-width:0}
.qphone{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);
  border-top:3px solid var(--accent);padding-top:clamp(16px,2vw,22px)}
.qphone small{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.qphone b{font-family:var(--cond);font-weight:700;font-size:clamp(30px,3.6vw,44px);line-height:1;white-space:nowrap}
.qphone:hover b{color:var(--accent)}
.qhelp{display:flex;flex-direction:column;gap:12px}
.qhelp ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.qhelp li{position:relative;padding:12px 0 12px 18px;border-bottom:1px solid var(--rule);
  font-size:15px;line-height:1.5;color:var(--ink-2)}
.qhelp li::before{content:"";position:absolute;left:0;top:1.3em;width:8px;height:1px;background:var(--accent)}

/* The form. Square and ruled like everything else. Every field is 16px, the
   size below which iOS zooms the page on focus. Borders use --sep, the one
   neutral that clears 3:1 against the paper, which a field edge must. */
.qform{min-width:0}
.qform-off{display:flex;flex-direction:column;gap:16px}
.qform-off p{margin:0;color:var(--ink-2)}
.qf{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,28px);margin:0}
.qf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,22px) clamp(16px,2.2vw,26px)}
.qf-f{display:flex;flex-direction:column;gap:8px;min-width:0}
.qf-wide{grid-column:1/-1}
.qf-f > span:first-child{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.qf-f > span:first-child b{color:var(--accent);font-weight:500}
.qf .wpcf7-form-control-wrap{display:block}
.qf input[type=text],.qf input[type=email],.qf input[type=tel],.qf select,.qf textarea{
  display:block;width:100%;min-height:48px;margin:0;padding:12px 14px;
  font-family:var(--sans);font-size:16px;line-height:1.4;color:var(--ink);
  background-color:var(--paper);border:1px solid var(--sep);border-radius:0;
  -webkit-appearance:none;appearance:none}
.qf textarea{min-height:140px;resize:vertical}
.qf select{padding-right:44px;background-image:var(--chev);background-repeat:no-repeat;
  background-position:right 16px center;background-size:16px;cursor:pointer}
.qf ::placeholder{color:var(--ink-3);opacity:1}
.qf select:has(option[value=""]:checked){color:var(--ink-3)}
.qf select option{color:var(--ink)}
.qf input:focus,.qf select:focus,.qf textarea:focus{border-color:var(--accent);outline:none}
.qf input:focus-visible,.qf select:focus-visible,.qf textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
.qf .wpcf7-not-valid{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.qf .wpcf7-not-valid-tip{display:block;margin-top:8px;font-size:13.5px;line-height:1.4;color:var(--accent)}
.qf-send{display:flex;flex-wrap:wrap;align-items:center;gap:16px clamp(16px,2vw,24px)}
.qf-send .cf-turnstile{flex:0 1 auto;min-width:0;max-width:100%}
.qf .wpcf7-submit{font-family:var(--mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  min-height:48px;padding:15px 26px;background:var(--btn);color:var(--btn-ink);
  border:1px solid var(--btn-edge);border-radius:0;cursor:pointer}
.qf .wpcf7-submit:hover{filter:brightness(.88)}
.qf .wpcf7-submit:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.qf .wpcf7-submit:disabled{opacity:.6;cursor:wait}
.qf .wpcf7-spinner{margin:0;background-color:var(--ink-2)}
/* CF7's own sheet styles this at (0,3,1) with a colored box per state. */
.wpcf7 form.qf .wpcf7-response-output{margin:0;padding:14px 16px;border:0;
  border-left:3px solid var(--accent);background:var(--accent-soft);font-size:15px;line-height:1.5;color:var(--ink)}
.qf-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.legal-band{padding-top:0}

@media (max-width:920px){ .qgrid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:620px){ .qf-grid{grid-template-columns:minmax(0,1fr)} .qf-send .wpcf7-submit{width:100%} }

/* ---- PHOTOGRAPHS ON THE INNER PAGES ----
   Every inner page opens on a photograph and breaks its runs of text with
   more, so no two sections in a row share a shape or a ground: Terry's own
   footage where the subject is the install, job photographs where it is the
   building. Anything laid over a photograph sits on a dark scrim in BOTH
   themes, so its colors are literal, exactly as on the homepage hero. */

/* The page head: the homepage hero, shorter, its type anchored low. */
.hero-page{display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(440px,68vh,680px)}
.hero-page .shot img{opacity:.64}
:root[data-theme="dark"] .hero-page .shot img{opacity:.48}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero-page .shot img{opacity:.48}}
.hero-page .shot::after{background:
  linear-gradient(90deg,rgba(22,25,28,.86) 0%,rgba(22,25,28,.52) 58%,rgba(22,25,28,.2) 100%),
  linear-gradient(0deg,rgba(22,25,28,.7) 0%,rgba(22,25,28,0) 48%)}
/* width:100%, or each auto-margined .w in this flex column shrinks to its text
   and centers (the same trap as .pagehead-band). */
.hero-page > .w,.pband > .w{width:100%}
.hero-page .hero-in{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px);
  padding-block:clamp(128px,20vh,220px) clamp(34px,5vh,58px)}
.hero-page h1{margin:0;font-size:clamp(44px,6.8vw,100px);line-height:.93;max-width:6.75em}
.hero-page .sub{margin:0;max-width:32.77em}
.hero-page .caption{padding-block:15px 17px;justify-content:space-between}
@media (max-width:620px){ .hero-page .cap-aside{display:none} }

/* A caption laid over the foot of a photograph: a figure label, then what the
   photograph shows, like a plate title on a drawing sheet. */
.shot-cap{position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:clamp(44px,6vw,72px) clamp(18px,2.2vw,28px) 16px;
  background:linear-gradient(180deg,rgba(16,18,21,0) 0%,rgba(16,18,21,.84) 100%);
  font-family:var(--mono);font-size:11px;line-height:1.55;letter-spacing:.12em;
  text-transform:uppercase;color:#E3E8EA}
.shot-cap b{font-weight:500;color:#F3A4B4;margin-right:4px}

/* Split: a photograph that runs to the edge of the screen, the argument beside
   it on the page's own grid. .split-flip puts the photograph on the right. */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--paper);color:var(--ink)}
.split.on-slate{background:var(--slate)}
.split.on-tint{background:var(--tint)}
.split.on-band{background:var(--band);color:var(--band-ink);border-top:2px solid var(--band-rule)}
.split-shot{position:relative;margin:0;min-height:clamp(400px,48vw,720px);background:#20242A;overflow:hidden}
.split-shot > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:clamp(18px,2vw,26px);min-width:0;padding-block:var(--air);
  padding-inline:clamp(28px,5vw,88px) max(var(--gutter),calc(50vw - 640px + var(--gutter)))}
.split-flip .split-shot{order:2}
.split-flip .split-copy{padding-inline:max(var(--gutter),calc(50vw - 640px + var(--gutter))) clamp(28px,5vw,88px)}
.split-copy > *{margin:0}
.split-copy h2{font-family:var(--cond);font-weight:700;font-size:clamp(32px,4.2vw,58px);line-height:.98;
  text-transform:uppercase;max-width:6.342em}
.split-copy h2 em{font-style:normal;color:var(--accent)}
.split-copy p:not(.tag){font-size:17px;line-height:1.66;color:var(--ink-2);max-width:28.25em}
.split-copy .strong{color:var(--ink);font-weight:600}
.split-copy .codes,.split-copy .tear-list{align-self:stretch}
.codes-split .codes{grid-template-columns:minmax(0,1fr)}
.split.on-band .tag{color:var(--band-mute)}
.split.on-band .tag b{color:var(--band-accent)}
.split.on-band h2{color:var(--band-ink)}
.split.on-band h2 em{color:#F3A4B4}
.split.on-band p:not(.tag){color:var(--band-mute)}
.split.on-band .strong{color:var(--band-ink)}
.split.on-band .more{color:var(--band-ink)}
.split.on-band .more:hover{color:#F3A4B4}
@media (max-width:900px){
  .split{grid-template-columns:minmax(0,1fr)}
  .split-shot{min-height:0;aspect-ratio:4/3}
  .split-flip .split-shot{order:0}
  .split-copy,.split-flip .split-copy{padding:clamp(52px,10vw,76px) var(--gutter)}
}

/* Photo band: one photograph across the screen, carrying one sentence set as
   large as a heading. Used once per page at most, where the page needs a beat. */
.pband{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(440px,66vh,680px);background:#20242A;color:#fff;overflow:hidden}
.pband .shot{position:absolute;inset:0;overflow:hidden}
.pband .shot img{width:100%;height:100%;object-fit:cover;opacity:.56}
:root[data-theme="dark"] .pband .shot img{opacity:.44}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pband .shot img{opacity:.44}}
.pband .shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(22,25,28,.9) 0%,rgba(22,25,28,.44) 58%,rgba(22,25,28,.14) 100%)}
.pband-in{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(16px,2vw,24px);padding-block:clamp(120px,16vw,200px) clamp(40px,5vw,64px)}
.pband .tag{color:#C6CDD1}
.pband .tag b{color:#F3A4B4}
.pband .say{margin:0;font-family:var(--cond);font-weight:600;font-size:clamp(40px,6.2vw,92px);
  line-height:.93;letter-spacing:-.005em;text-transform:uppercase;max-width:6.75em;text-wrap:balance}
.pband .say em{font-style:normal;color:#F3A4B4}
.pband .note{margin:0;max-width:31.64em;color:#DDE2E4;font-size:clamp(16px,1.6vw,19px);line-height:1.55}

/* Figures that sit in the flow rather than over a band: the caption drops
   under the photograph in the page's own ink. */
.trio,.stills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.trio figure,.stills figure,.bene-shot{position:relative;margin:0;min-width:0;display:flex;flex-direction:column;gap:14px}
.trio img,.stills img,.bene-shot img{display:block;width:100%;height:auto;object-fit:cover;background:var(--slate)}
.trio img{aspect-ratio:4/5}
.stills img,.bene-shot img{aspect-ratio:3/2}
.trio .shot-cap,.stills .shot-cap,.bene-shot .shot-cap{position:static;padding:0;background:none;color:var(--ink-3)}
.trio .shot-cap b,.stills .shot-cap b,.bene-shot .shot-cap b{color:var(--accent)}
.trio figure > b{font-family:var(--cond);font-weight:700;font-size:clamp(22px,2.4vw,30px);line-height:1;
  text-transform:uppercase;color:var(--ink)}
@media (max-width:900px){ .trio{grid-template-columns:minmax(0,1fr)} .trio img{aspect-ratio:3/2} }
@media (max-width:760px){ .stills{grid-template-columns:minmax(0,1fr)} }

/* Video posters: a frame of the video itself behind the play button. */
.vid:has(.vid-shot){background-image:none;background-color:#16191C;color:#fff}
.vid-shot{position:absolute;inset:0;overflow:hidden}
.vid-shot img{width:100%;height:100%;object-fit:cover;opacity:.7;transition:opacity .25s ease}
.vid-shot::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(16,18,21,.3) 0%,rgba(16,18,21,.76) 100%)}
.vid:hover .vid-shot img{opacity:.86}
.vid > .vid-play,.vid > .vid-label,.vid > .vid-note{position:relative}
.vid:has(.vid-shot) .vid-note{color:#C6CDD1}

/* The closing band over a photograph: the same band, the building behind it. */
.close-photo{position:relative;overflow:hidden;background:#16191C;border-top:0}
.close-photo .shot{position:absolute;inset:0;overflow:hidden}
.close-photo .shot img{width:100%;height:100%;object-fit:cover;opacity:.4}
.close-photo .shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(22,25,28,.94) 0%,rgba(22,25,28,.74) 55%,rgba(22,25,28,.5) 100%)}
.close-photo .w{position:relative}
.close-photo h2,.close-photo .call b{color:#fff}
.close-photo .tag,.close-photo p,.close-photo .call small{color:#C6CDD1}

/* The Installation Guide's drawing strip: the nine stages as a row of sheets,
   each opening its stage on How It Works, where the drawing is full size. */
/* About's three kinds of work: slate, between the paper bio and the paper index. */
.plain.segs-band{background:var(--slate)}

.sheetstrip{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.8vw,22px)}
/* Ten drawings: two rows of five, or five rows of two. Never a row of one. */
@media (min-width:700px){ .sheetstrip{grid-template-columns:repeat(5,minmax(0,1fr))} }
.sheetstrip a{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink)}
.sheetstrip .ss-img{display:block;background:var(--drw-paper);border:1px solid var(--rule);padding:8px;
  transition:border-color .2s ease}
.sheetstrip img{display:block;width:100%;height:auto;aspect-ratio:512/458}
.sheetstrip .ss-no{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--accent)}
.sheetstrip .ss-t{font-family:var(--cond);font-weight:600;font-size:clamp(15px,1.4vw,17px);line-height:1.15;text-transform:uppercase}
.sheetstrip a:hover .ss-img{border-color:var(--accent)}
.sheetstrip a:hover .ss-t{color:var(--accent)}

/* ---- DRAWINGS ON A PHONE ----
   LAST in the sheet, same reason as the block below: these override .plate figure
   and .dwg declared far above at equal specificity.
   Fitted to the viewport, the callout digits measure 6.2px at 320 and 8.0px at 390
   (effective size = declared x rendered/viewBox), which is decoration, not
   information. Hold each drawing at the width that puts its markers near 10px and
   let the plate pan: section 440 viewBox @ 11.5 -> 380, exploded 860 @ 15 -> 570.
   justify-content must leave center here, or the start of a centered flex item is
   unreachable once it overflows. The hint appears only on real overflow. */
@media (max-width:700px){
  /* min-width:0 the whole chain, or the grid item sizes to the drawing's
     min-content and the PAGE widens instead of the figure scrolling. */
  .plate,.plate figure{min-width:0}
  .plate figure{overflow-x:auto;overflow-y:hidden;justify-content:flex-start;
    overscroll-behavior-x:contain}
  .plate figure > .dwg{min-width:380px;flex:0 0 auto}
  .plate figure > img{min-width:570px;flex:0 0 auto}
  /* Fig. 2 is the exception: it plays, and half the play happened off screen in a
     panned plate. It fits the width instead; its labels would be 6px there, so they
     go, and the caption under it names each part as it arrives. */
  .plate figure > .asm{min-width:0;flex:1 1 auto}
  .asm-lbls{display:none}
}

/* ---- TOUCH TARGETS ----
   LAST in the sheet on purpose. A media query adds no specificity, so while this
   lived above the components, .themer button{padding:9px 15px} further down won
   on source order alone and the theme buttons stayed 33px. Anything that has to
   beat a component rule belongs after it.
   Padding goes on the anchor, never margin on the row, so the whole strip is live
   rather than just the glyphs. */
@media (pointer:coarse){
  .fcol a{display:block;padding-block:13px}
  .fcol ul{gap:0}
  .legal a{display:block;padding-block:12px}
  .themer button{padding:15px 16px}
  .fbar .credit a{display:inline-block;padding-block:11px}
  .price .ask{display:inline-block;padding-block:11px}
  .fbrand{min-height:44px}
  .sched .nm a{display:inline-block;padding-block:12px}
  .docs a{min-height:44px}
  .more{padding-block:13px}
  .qnote a{display:inline-block;padding-block:12px}
  /* Left inline, unlike the rest: a long link in a sentence must still wrap, and
     vertical padding on an inline box grows the tap area without moving a line. */
  .prose a{padding-block:12px}
}
/* The wordmark drops out below 560, leaving the home link a 34px square. */
@media (max-width:560px){ .brand{min-width:44px} }