/* Heidtman Tubular
   Sister site to Heidtman Manufactured Products: same type family (Barlow) and the same drawing language
   (steel fills, gray outlines, colored dimensions), but a light galvanized page where HMP is dark.
   Two devices belong to this site only:
   - tube cross-sections drawn to one true scale (the home lineup, the product heroes, the size finder), and
   - the mill mark: the dot-matrix line a tube mill ink-jets along every length (Doto), used only where a
     tube is drawn or a size is chosen, never as body text.
   Green is the paint mills put on tube ends to mark a grade; it marks live values and dimensions.
   Red is the logo's red and is used only for the logo and the quote button. */

:root {
  --zinc:    #E4E8EA;   /* galvanized: page background */
  --zinc-2:  #D3D9DD;
  --panel:   #F6F7F7;
  --scale:   #1D2228;   /* hot-rolled mill scale: dark sections */
  --scale-2: #282F36;
  --scale-3: #36404A;
  --ink:     #15191D;
  --mute:    #535D67;   /* secondary text on zinc: 5.6:1 */
  --mute-d:  #A3ADB6;   /* secondary text on scale: 7.0:1 */
  --rule:    #B8C1C8;
  --paint:   #24785A;   /* end paint: dimensions, live values, focus on light. White on it: 5.4:1 */
  --paint-l: #6CCB9C;   /* the same green for use on dark: 8.6:1 on --scale */
  --red:     #D92027;   /* the logo's red (same as the Heidtman family red). White on it: 5.0:1 */
  --red-deep:#AE1A21;

  --display: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --body:    "Barlow", system-ui, sans-serif;
  --mono:    "Spline Sans Mono", ui-monospace, Consolas, monospace;
  --mark:    "Doto", "Spline Sans Mono", monospace;

  --gutter: clamp(16px, 4vw, 64px);
  --maxw: 1440px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* --head: the sticky header's height; anchor jumps and sticky parts sit below it */
:root { --head: 81px; }
html.has-crumbs { --head: 121px; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head) + 10px); }
body { margin: 0; font: 400 18px/1.6 var(--body); color: var(--ink); background: var(--zinc); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--paint); outline-offset: 3px; }
.dark :focus-visible { outline-color: var(--paint-l); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: #fff; padding: 10px 14px; z-index: 200; }
.skip:focus { top: 12px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(50px, 7vw, 116px); line-height: .94; letter-spacing: -.015em; }
h2 { font-size: clamp(38px, 5vw, 80px); line-height: .98; letter-spacing: -.012em; }
h3 { font-size: 26px; line-height: 1.1; }
.lead { font-size: clamp(19px, 1.45vw, 22px); line-height: 1.55; color: var(--mute); max-width: 30em; margin: 0 0 32px; }
.dark .lead { color: #CDD3D8; }
.dark { background: var(--scale); color: #fff; }
.sec { padding: clamp(88px, 11vw, 168px) 0; }
.split-head { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(44px, 6vw, 80px); }
.split-head > p { margin: 0; font-size: 19px; color: var(--mute); max-width: 30em; }
.dark .split-head > p, .panels .split-head > p { color: var(--mute-d); }

.btn { display: inline-flex; align-items: center; justify-content: center; font: 600 17px/1 var(--body); text-decoration: none; border: 0; cursor: pointer; padding: 18px 26px; background: var(--ink); color: #fff; transition: background .2s, color .2s, box-shadow .2s; }
.btn:hover { background: var(--scale-3); }
.btn.red { background: var(--red); }
.btn.red:hover { background: var(--red-deep); }
.btn.line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn.line:hover { background: var(--ink); color: #fff; }
.dark .btn.line { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.dark .btn.line:hover { background: #fff; color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.arrow { font-weight: 600; text-decoration: underline; text-decoration-color: var(--paint); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.arrow:hover { text-decoration-color: currentColor; }
.dark .arrow { text-decoration-color: var(--paint-l); }

/* ---------- header: zinc bar, logo left ---------- */
header.site { position: sticky; top: 0; z-index: 50; background: rgba(228,232,234,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.nav { display: flex; align-items: center; gap: 30px; height: 80px; }
.brand { display: block; flex: none; }
.brand img { height: 30px; width: auto; }
.nav nav { margin-left: auto; }
.nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; align-items: center; }
.nav nav a { text-decoration: none; font-weight: 600; font-size: 16px; }
.nav nav a:hover, .nav nav a[aria-current] { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; text-decoration-color: var(--paint); }
.nav-cta { padding: 14px 20px; font-size: 15.5px; }
.has-sub { position: relative; }
.sub-btn { font: 600 16px var(--body); color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.sub-btn::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }
/* ht.js puts a .sub-toggle after each link label; it carries the arrow, so the link's own is hidden */
.js a.sub-btn::after { content: none; }
.sub-toggle { color: inherit; background: none; border: 0; width: 24px; height: 24px; padding: 0; margin-left: 0; cursor: pointer; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; }
.sub-toggle::after { content: ""; display: block; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.sub-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.nav .sub { display: none; position: absolute; top: calc(100% + 26px); left: -22px; min-width: 260px; list-style: none; margin: 0; padding: 10px 0; background: var(--panel); border-top: 3px solid var(--paint); box-shadow: 0 24px 48px -20px rgba(21,25,29,.35); flex-direction: column; gap: 0; align-items: stretch; }
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 26px; }
.nav .has-sub:hover .sub, .nav .has-sub:focus-within .sub, .nav [aria-expanded="true"] ~ .sub { display: flex; }
.nav .sub a { display: block; padding: 11px 22px; }
.nav .sub a:hover { background: var(--zinc); text-decoration: none; color: var(--paint); }
/* current page: a section label is marked while any page in its dropdown is open */
.has-sub:has(.sub a[aria-current]) > .sub-btn { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; text-decoration-color: var(--paint); }
.nav .sub a[aria-current] { color: var(--paint); background: var(--zinc); box-shadow: inset 3px 0 0 var(--paint); text-decoration: none; }
/* breadcrumb bar: ht.js moves the page's breadcrumbs here, under the nav */
/* the bar hangs below the header out of the page flow, and main starts below it, so folding it moves nothing */
.crumb-bar { position: absolute; top: 100%; left: 0; right: 0; background: rgba(228,232,234,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
html.has-crumbs main { padding-top: 41px; }
/* the bar comes after the nav in the header, so the dropdowns and the open phone menu are raised above it */
.nav .sub, .nav nav.open { z-index: 2; }
.crumb-bar .wrap { display: flex; align-items: center; height: 40px; }
.crumb-bar .crumbs { margin: 0; font-size: 14px; align-items: center; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.crumb-bar .crumbs > * { flex: none; display: inline-flex; align-items: center; min-height: 40px; }
.crumb-bar .crumbs > :last-child { flex: 0 1 auto; display: block; min-height: 0; overflow: hidden; text-overflow: ellipsis; }
.crumb-bar .crumbs a { text-decoration: none; }
.crumb-bar .crumbs a:hover { color: var(--paint); }
.crumb-bar .crumbs [aria-current] { color: var(--ink); font-weight: 600; }
/* three bars that cross into an X while the menu is open; the word stays in the markup for screen readers */
.menu-btn { display: none; position: relative; width: 48px; height: 48px; font-size: 0; background: none; color: var(--ink); border: 0; padding: 0; cursor: pointer; }
.menu-btn::before, .menu-btn::after { content: ""; position: absolute; left: 12px; right: 12px; transition: transform .2s; }
.menu-btn::before { top: 15px; height: 14px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.menu-btn::after { top: 21px; height: 2px; background: currentColor; }
.menu-btn[aria-expanded="true"]::before { top: 21px; height: 2px; border: 0; background: currentColor; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"]::after { transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .menu-btn::before, .menu-btn::after { transition: none; } }
.menu-quote { display: none; }
/* inch / millimeter switch, added by ht.js above each calculator and chart */
.units { display: inline-flex; flex: none; border: 2px solid var(--ink); }
.units button { font: 600 14px var(--mono); background: none; color: var(--ink); border: 0; padding: 7px 10px; cursor: pointer; }
.units button[aria-pressed="true"] { background: var(--ink); color: var(--zinc); }
.units button:focus-visible { outline: 2px solid var(--paint); outline-offset: 2px; }
@media (max-width: 900px) { .units button { min-width: 44px; min-height: 44px; } }
.units-bar { display: flex; width: max-content; margin: 0 0 12px auto; }
.tbl-head .units { margin-left: 12px; }

/* ---------- the mill mark: dot-matrix ink line, as printed along a tube ---------- */
.mill-mark { font: 700 15px/1 var(--mark); letter-spacing: .06em; white-space: nowrap; }

/* ---------- home hero: one long square tube, cut end facing the reader ---------- */
.tube-hero { padding-top: clamp(56px, 8vh, 96px); overflow: hidden; }
.tube-copy { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px clamp(32px, 5vw, 96px); align-items: end; }
.tube-copy .lead { margin-bottom: 26px; }
/* The SVG is 1600 x 380 and anchored left (xMinYMid slice) so narrow screens keep the cut end and its callout. */
.tube-art { display: block; width: 100%; height: max(230px, 23.75vw); margin-top: clamp(20px, 3vw, 44px); }
.tube-art .dim path { stroke: var(--paint); stroke-width: 1.6; fill: none; }
.tube-art .dim .head { fill: var(--paint); stroke: none; }
.tube-art .dim text { fill: var(--paint); font: 500 17px var(--mono); }
.tube-art .ink { fill: #262C32; font: 700 22px var(--mark); letter-spacing: .08em; }
/* page-load moment: the tube runs in from the right like a length leaving the mill, then the dimensions appear */
.tube-art .tube-body { animation: tube-in 1.3s var(--ease) both; }
.tube-art .dim { animation: dim-in .6s ease 1.2s both; }
@keyframes tube-in { from { transform: translateX(1100px); } }
@keyframes dim-in { from { opacity: 0; } }
@media (max-width: 860px) {
  .tube-copy { grid-template-columns: 1fr; }
  h1 { font-size: clamp(44px, 12vw, 70px); }
}

/* ---------- lineup: every standard profile at one true scale ---------- */
.lineup { background: var(--panel); }
.lineup-groups { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 36px clamp(28px, 4vw, 64px); }
.lineup-group h3 { font-size: 20px; margin-bottom: 18px; color: var(--mute); }
/* groups wider than a phone scroll sideways rather than shrink, so the shared scale and labels hold */
.lineup-group { max-width: 100%; overflow-x: auto; padding-bottom: 4px; }
.lineup-group svg { display: block; overflow: visible; }
.lineup-groups a .prof { fill: url(#zincFill); stroke: #6E7880; stroke-width: 1; transition: fill .2s; }
.lineup-groups a .bore { fill: var(--panel); }
.lineup-groups a text { font: 500 12px var(--mono); fill: var(--mute); }
.lineup-groups a:hover .prof, .lineup-groups a:focus-visible .prof { fill: var(--paint); stroke: var(--paint); }
.lineup-groups a:hover text, .lineup-groups a:focus-visible text { fill: var(--paint); font-weight: 700; }
.lineup-groups a:focus-visible { outline: none; }
.scale-note { margin: 28px 0 0; font-size: 15px; color: var(--mute); }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); margin: clamp(56px, 7vw, 96px) 0 0; border-top: 2px solid var(--ink); }
.facts > div { padding: 22px 22px 0 0; }
.facts > div + div { padding-left: 22px; border-left: 1px solid var(--rule); }
.facts dt { font-weight: 600; font-size: 16px; color: var(--mute); margin-bottom: 8px; }
.facts dd { margin: 0; font: 700 clamp(26px, 2.4vw, 38px)/1.08 var(--display); }
.facts dd small { display: block; font: 400 15px/1.4 var(--body); color: var(--mute); margin-top: 8px; }
@media (max-width: 980px) { .facts { grid-template-columns: 1fr 1fr; } .facts > div:nth-child(3) { padding-left: 0; border-left: 0; } .facts > div { padding-bottom: 22px; } }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } .facts > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); } }

/* ---------- products: one row per product, a drawing at left ---------- */
.prod-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--scale-3); }
.prod { display: grid; grid-template-columns: 180px minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 48px); align-items: center; padding: clamp(28px, 3vw, 40px) 0; border-bottom: 1px solid var(--scale-3); text-decoration: none; }
.prod svg { width: 100%; height: auto; }
.prod svg .prof { fill: #8D979F; stroke: #C5CCD2; stroke-width: 1; }
.prod svg .bore { fill: var(--scale); }
.prod h3 { font-size: clamp(30px, 3vw, 46px); margin-bottom: 8px; }
.prod p { margin: 0; color: var(--mute-d); }
.prod .range { font: 500 15px/1.6 var(--mono); color: #DCE1E5; }
.prod .go { font-weight: 600; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--paint-l); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.prod:hover h3 { color: var(--paint-l); }
.prod:hover svg .prof { fill: var(--paint-l); stroke: var(--paint-l); }
@media (max-width: 900px) { .prod { grid-template-columns: 110px 1fr; } .prod .range, .prod .go { grid-column: 2; } }

/* ---------- coil to tube: the forming "flower", one profile per station ---------- */
.flow-art { display: block; width: 100%; height: auto; margin-bottom: clamp(36px, 5vw, 64px); }
.flow-art .prof { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: butt; stroke-linejoin: round; }
.flow-art .num { font: 700 22px var(--display); fill: var(--paint); }
.flow-art .lbl { font: 600 16px var(--body); fill: var(--ink); }
.flow-art .rail { stroke: var(--rule); stroke-width: 2; }
.flow-art .weld { fill: var(--red); }
/* phones get the six stations in three rows of two, so the labels stay readable */
.flow-art.ph { display: none; }
.flow-art.ph .lbl { font-size: 19px; }
.flow-art.ph .num { font-size: 24px; }
@media (max-width: 600px) { .flow-art.wide { display: none; } .flow-art.ph { display: block; max-width: 440px; } }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px clamp(24px, 3vw, 48px); counter-reset: s; }
.steps li { counter-increment: s; border-top: 2px solid var(--ink); padding-top: 18px; }
.steps li::before { content: counter(s); display: block; font: 700 28px/1 var(--display); color: var(--paint); margin-bottom: 10px; }
.steps h3 { font-size: 24px; margin-bottom: 8px; }
.steps p { margin: 0; color: var(--mute); font-size: 17px; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---------- finishes: a strip of each surface ---------- */
.finishes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.finish .swatch { height: 150px; margin-bottom: 22px; box-shadow: inset 0 -1px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.35); }
.finish h3 { margin-bottom: 8px; }
.finish p { margin: 0; color: var(--mute); font-size: 17px; }
.finish .spec { display: block; margin-top: 10px; font: 500 14px var(--mono); color: var(--ink); }
/* hot rolled: blue-black mill scale, mottled */
.sw-hr { background:
  radial-gradient(60% 90% at 20% 40%, rgba(80,96,112,.55), transparent 70%),
  radial-gradient(50% 80% at 75% 65%, rgba(30,36,44,.7), transparent 70%),
  linear-gradient(180deg, #3F4A55 0%, #59656F 45%, #343D46 100%); }
/* pickled and oiled: scale removed, darker even gray with an oil sheen */
.sw-po { background:
  linear-gradient(100deg, transparent 30%, rgba(255,255,255,.18) 45%, transparent 60%),
  linear-gradient(180deg, #5E666D 0%, #7C848B 48%, #565E65 100%); }
/* galvanized: smooth, bright satin zinc with a soft sheen (coil for tube has no visible spangle) */
.sw-galv { background:
  linear-gradient(100deg, transparent 25%, rgba(255,255,255,.45) 42%, transparent 62%),
  linear-gradient(180deg, #B7C0C6 0%, #E9EDEF 46%, #AEB7BE 100%); }
@media (max-width: 900px) { .finishes { grid-template-columns: 1fr; } .finish .swatch { height: 96px; } }

/* ---------- industries ---------- */
.ind-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 64px); }
.ind-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.ind-list b { font: 700 24px/1.15 var(--display); }
.ind-list span { color: var(--mute); font-size: 16px; }
@media (max-width: 900px) { .ind-list { grid-template-columns: 1fr; } .ind-list li { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- quality ---------- */
.certs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.cert { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: start; padding: 28px; background: var(--scale-2); text-decoration: none; }
.cert .seal { grid-row: span 3; width: 64px; height: 64px; border: 2px solid var(--paint-l); border-radius: 50%; display: grid; place-items: center; font: 700 15px/1 var(--display); color: var(--paint-l); text-align: center; }
.cert h3 { font-size: 28px; }
.cert p { margin: 0; color: var(--mute-d); font-size: 16px; }
.cert .file { font: 500 14px var(--mono); color: #DCE1E5; text-decoration: underline; text-decoration-color: var(--paint-l); text-underline-offset: 4px; }
.cert:hover { background: var(--scale-3); }
.doc-links { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 30px; }
@media (max-width: 760px) { .certs { grid-template-columns: 1fr; } }

/* ---------- quote form ---------- */
.quote-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px, 6vw, 96px); align-items: start; }
.quote-grid address { font-style: normal; margin: 32px 0 20px; line-height: 1.7; }
.quote-grid address a { color: inherit; }
.quote-form { display: grid; gap: 20px; }
.fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.f { display: flex; flex-direction: column; gap: 8px; font-weight: 600; font-size: 15px; }
.f input, .f select, .f textarea { font: 400 17px var(--body); color: inherit; background: transparent; border: 0; border-bottom: 2px solid currentColor; padding: 10px 2px; border-radius: 0; }
.dark .f input, .dark .f select, .dark .f textarea { border-bottom-color: #6B747D; }
.dark .f select option { color: var(--ink); }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-bottom-color: var(--paint-l); }
.quote-form .btn { justify-self: start; }
.quote-band .actions { margin-bottom: 4px; }
.quote-band .side { margin-top: 22px; }
.quote-band .quote-grid { grid-template-columns: 1.2fr .8fr; align-items: end; }
.quote-band h2 { font-size: clamp(38px, 4.6vw, 72px); }
.quote-band { border-bottom: 1px solid var(--scale-3); }
.quote-band address { color: #CDD3D8; }
@media (max-width: 900px) { .quote-grid, .quote-band .quote-grid, .fields, .two { grid-template-columns: 1fr; } }

/* ---------- site forms (forms.js posts them to /forms/<name>) ---------- */
.form-sec { background: var(--panel); }
.ct-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.ct-grid h2 { font-size: clamp(36px, 4vw, 60px); margin-bottom: 24px; }
.ct-grid > div > p { color: var(--mute); margin: 0 0 24px; max-width: 30em; }
.site-form { display: grid; gap: 20px; align-content: start; }
.site-form [data-show-when][hidden], .site-form [data-step]:not(.on), .site-form .btn[hidden] { display: none; }
.site-form .fs { border: 0; margin: 0; padding: 22px 0 0; border-top: 2px solid var(--ink); display: grid; gap: 20px; min-width: 0; }
.site-form .fs legend { float: left; width: 100%; padding: 0; margin: 0 0 4px; font: 700 30px/1.1 var(--display); }
.site-form .fs legend + * { clear: both; }
.site-form .f-break { border-top: 1px solid var(--rule); padding-top: 24px; margin-top: 8px; }
.site-form ::placeholder { color: #7D8790; opacity: 1; }
.site-form .btn { justify-self: start; }
.site-form .btn[disabled] { opacity: .6; cursor: progress; }
.site-form input[type=file] { font: 400 15px var(--body); border-bottom: 0; padding: 6px 0; }
.site-form input[type=file]::file-selector-button { min-height: 44px; padding: 0 16px; margin-right: 12px; font: 600 15px var(--body); background: var(--panel); color: var(--ink); border: 2px solid var(--ink); cursor: pointer; }
.f .opt { font-weight: 400; font-size: 14px; color: var(--mute); margin-left: 6px; }
.f .f-hint { font-size: 14px; font-weight: 400; color: var(--mute); margin: 0; }
.f .err { font-size: 14px; font-weight: 600; color: var(--red-deep); }
.f [aria-invalid="true"] { border-bottom-color: var(--red-deep); }
.step-count { margin: 0 0 -8px; font-weight: 600; font-size: 15px; color: var(--paint); }
.step-count:empty { display: none; }
.step-nav { display: flex; flex-wrap: wrap; gap: 12px; }
.site-form[data-turnstile] .ts { min-height: 65px; }
.form-status { margin: 0; font-weight: 600; color: var(--red-deep); }
.form-status:empty { display: none; }
.form-sent { align-self: start; margin: 0; padding: 28px; background: #fff; border-top: 3px solid var(--paint); font: 600 22px/1.35 var(--display); }
.form-sent:focus { outline: none; }
.calc-from { margin: 0; padding: 14px 16px; background: #fff; border-left: 4px solid var(--paint); font-size: 16px; }
.calc-from a { font-weight: 600; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ct-call { margin: clamp(40px, 5vw, 64px) 0 0; font-size: 17px; color: var(--mute); }
.ct-call a { color: var(--ink); font-weight: 600; }
.ready { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ready li { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 17px; }
.ready b { font-weight: 600; }
@media (max-width: 900px) { .ct-grid { grid-template-columns: minmax(0, 1fr); } }

.dark .ct-grid > div > p { color: var(--mute-d); }
.dark .ready, .dark .ready li { border-color: var(--scale-3); }

/* ---------- inner-page hero: copy left, a cross-section drawing right ---------- */
.draw-hero { padding: clamp(56px, 8vh, 96px) 0 clamp(56px, 7vw, 96px); }
.draw-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.draw-hero h1 { font-size: clamp(46px, 6vw, 96px); margin-bottom: 24px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 15px; margin: 0 0 22px; color: var(--mute); }
.crumbs a { color: inherit; }
.crumbs > * + *::before { content: "/"; margin-right: 8px; }
.crumbs [aria-current] small { font-size: inherit; font-weight: 400; color: var(--mute); }
.draw-art { margin: 0; }
.draw-art svg { display: block; width: 100%; height: auto; max-height: 480px; overflow: visible; }
.draw-art .prof { fill: url(#zincFill); stroke: #6E7880; stroke-width: 1.2; }
.draw-art .bore { fill: var(--zinc); }
.draw-art .ghost { fill: none; stroke: #7D8790; stroke-width: 1.2; stroke-dasharray: 6 5; }
.draw-art .cl { fill: none; stroke: #8C969E; stroke-width: 1.2; stroke-dasharray: 18 5 3 5; }
.draw-art .dim path { stroke: var(--paint); stroke-width: 1.5; fill: none; }
.draw-art .dim .head { fill: var(--paint); stroke: none; }
.draw-art .dim text { fill: var(--paint); font: 500 15px var(--mono); }
.draw-art .lbl { fill: var(--mute); font: 600 15px var(--body); }
/* a drawing's border and title block */
.draw-art .tb { fill: none; stroke: #6E7880; stroke-width: 1.2; }
.draw-art .tb-l { fill: var(--mute); font: 600 13px var(--body); }
.draw-art .tb-v { fill: var(--ink); font: 500 14px var(--mono); }
@media (max-width: 980px) { .draw-grid { grid-template-columns: 1fr; } .draw-art svg { max-height: 340px; } }

/* ---------- size tables (rendered by finder.js from tube-data.js) ---------- */
.tbl-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 26px; }
.seg { display: inline-flex; border: 2px solid var(--ink); }
.seg button { font: 600 15px var(--body); padding: 10px 16px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.tbl-scroll { overflow-x: auto; background: var(--panel); border: 1px solid var(--rule); }
table.wt { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; min-width: 860px; }
table.wt th, table.wt td { padding: 10px 12px; text-align: right; border-bottom: 1px solid #DCE1E4; white-space: nowrap; }
table.wt thead th { font: 600 14px/1.25 var(--body); color: var(--mute); background: var(--panel); position: sticky; top: 0; vertical-align: bottom; }
table.wt thead th b { display: block; font: 700 17px var(--display); color: var(--ink); }
table.wt th[scope=row] { text-align: left; font: 700 17px var(--display); position: sticky; left: 0; background: var(--panel); }
table.wt td { font: 400 15px var(--mono); }
table.wt td a { display: block; text-decoration: none; margin: -10px -12px; padding: 10px 12px; }
table.wt td a:hover, table.wt td a:focus-visible { background: var(--paint); color: #fff; outline: none; }
table.wt td.no { color: #A7B0B7; }
table.wt td.on a { background: var(--ink); color: #fff; }
.tbl-note { font-size: 15px; color: var(--mute); margin: 16px 0 0; }
table.wt.narrow { min-width: 640px; }
table.wt.narrow th[scope=row] { font: 600 16px var(--body); white-space: normal; }

/* ---------- questions and answers (ht.js turns .faq into FAQPage data) ---------- */
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font: 700 22px/1.2 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 26px; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(4px) rotate(-135deg); }
.faq summary:hover { color: var(--paint); }
.faq details > :not(summary) { margin: 0 0 18px; color: var(--mute); max-width: 42em; }
.how p { color: var(--mute); max-width: 34em; }
.how .formula { font: 500 16px/1.6 var(--mono); color: var(--ink); background: var(--panel); border-left: 3px solid var(--paint); padding: 12px 16px; }

/* ---------- document pages (terms, privacy) ---------- */
.doc { max-width: 46em; }
.doc h2 { font-size: clamp(30px, 3vw, 44px); margin: 56px 0 16px; }
.doc p { margin: 0 0 16px; }

/* ---------- product page body ---------- */
.spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.spec-card { border-top: 2px solid var(--ink); padding-top: 18px; }
.spec-card h3 { margin-bottom: 10px; }
.spec-card p { color: var(--mute); margin: 0 0 12px; font-size: 17px; }
.spec-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 16px; }
.spec-card dt { color: var(--mute); }
.spec-card dd { margin: 0; font: 500 15px var(--mono); }
.dark .spec-card { border-top-color: #fff; }
.dark .spec-card p { color: #CDD3D8; }
.uses { columns: 2; column-gap: clamp(24px, 4vw, 64px); list-style: none; margin: 0; padding: 0; }
.uses li { break-inside: avoid; padding: 14px 0; border-bottom: 1px solid var(--rule); font: 600 20px var(--display); }
.next-links { display: flex; flex-wrap: wrap; gap: 12px 36px; }
@media (max-width: 900px) { .spec-grid { grid-template-columns: 1fr; } .uses { columns: 1; } }

/* photo beside a stacked list: a full-bleed photo fills the left half, so a run of text sections gets a picture */
.photo-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--panel); }
.photo-split > img { width: 100%; height: 100%; min-height: 440px; object-fit: cover; }
.ps-body { max-width: calc(var(--maxw) / 2); padding: clamp(72px, 9vw, 140px) var(--gutter) clamp(72px, 9vw, 140px) clamp(32px, 5vw, 88px); }
.ps-body h2 { font-size: clamp(34px, 3.6vw, 58px); margin-bottom: 18px; }
.ps-body > p { margin: 0 0 32px; font-size: 19px; color: var(--mute); max-width: 30em; }
.ps-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.ps-list li { border-top: 1px solid var(--rule); padding: 18px 0; }
.ps-list h3 { font-size: 22px; margin-bottom: 6px; }
.ps-list p { margin: 0; color: var(--mute); font-size: 17px; }
.ps-list.num { counter-reset: s; }
.ps-list.num li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; }
.ps-list.num li::before { content: counter(s); font: 700 24px/1.1 var(--display); color: var(--paint); grid-row: span 2; }
@media (max-width: 900px) {
  .photo-split { grid-template-columns: minmax(0, 1fr); }
  .photo-split > img { height: 260px; min-height: 0; }
  .ps-body { max-width: none; padding-left: var(--gutter); }
}

/* the number strip (.facts) with three columns, and on a dark section */
.facts.three { grid-template-columns: repeat(3, 1fr); }
.dark .facts { border-top-color: #fff; }
.dark .facts > div + div { border-left-color: var(--scale-3); }
.dark .facts dt, .dark .facts dd small { color: var(--mute-d); }
@media (max-width: 980px) { .facts.three { grid-template-columns: 1fr; } .facts.three > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); } .dark .facts.three > div + div { border-top-color: var(--scale-3); } }

/* a shorter photo band, used as the heading of a page's technical data */
.st-band.st-short { padding: clamp(72px, 9vw, 132px) 0; }

/* ---------- size finder ---------- */
.finder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.pick { display: grid; gap: 30px; }
.pick fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.pick legend { font: 700 22px var(--display); margin-bottom: 12px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* the hidden input fills its chip, so the chip must be positioned, including a single chip that is itself the label */
.chips label, label.chips { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; min-height: 44px; font: 500 15px var(--mono); padding: 9px 12px; border: 1.5px solid var(--rule); background: var(--panel); cursor: pointer; transition: border-color .15s; }
.chips label:hover span { border-color: var(--ink); }
.chips input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chips input:focus-visible + span { outline: 3px solid var(--paint); outline-offset: 2px; }
.chips input:disabled + span { color: #A7B0B7; border-style: dashed; background: transparent; cursor: not-allowed; }
.chips.word span { font: 600 16px var(--body); }
.len-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: end; }
.len-row .f { width: 140px; }

.readout { position: sticky; top: calc(var(--head) + 24px); background: var(--scale); color: #fff; padding: clamp(24px, 3vw, 40px); }
.readout svg { display: block; width: 100%; height: auto; max-height: 360px; }
.readout .prof { fill: #8D979F; stroke: #C5CCD2; stroke-width: .02; }
.readout .bore { fill: var(--scale); }
.readout .cl { fill: none; stroke: #59636C; stroke-width: .015; stroke-dasharray: .18 .05 .03 .05; }
.readout .grid { stroke: #2C343C; stroke-width: .01; }
.readout .dim path { stroke: var(--paint-l); stroke-width: .018; fill: none; }
/* readout drawings are in inches and their viewBox width varies with the tube; calc.js and finder.js set --vbw to that
   width, so a font size in proportion to it shows at one size on screen for every tube */
.readout .dim text { fill: var(--paint-l); font: 500 calc(var(--vbw, 5.8) * .03px) var(--mono); paint-order: stroke; stroke: var(--scale); stroke-width: .35em; stroke-linejoin: round; }   /* halo keeps the 1-inch grid off the numbers */
.readout .wall-t { fill: #A3ADB6; font: 500 calc(var(--vbw, 8.4) * .026px) var(--mono); }
@media (max-width: 600px) {
  .readout .dim text { font-size: calc(var(--vbw, 5.8) * .042px); }
  .readout .wall-t { font-size: calc(var(--vbw, 8.4) * .038px); }
}
.readout .mill-mark { color: #E8ECEE; display: block; overflow: hidden; text-overflow: clip; padding: 14px 0; margin: 18px 0 22px; border-top: 1px solid var(--scale-3); border-bottom: 1px solid var(--scale-3); font-size: clamp(12px, 1.1vw, 15px); }
.ro-status { font: 700 26px/1.15 var(--display); margin: 0 0 18px; }
.ro-status.no { color: #FFB3B6; }
.ro-nums { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }
.ro-nums > div { padding-right: 16px; }
.ro-nums > div + div { padding-left: 16px; border-left: 1px solid var(--scale-3); }
.ro-nums dt { font-size: 14px; color: var(--mute-d); }
.ro-nums dd { margin: 4px 0 0; font: 700 clamp(26px, 2.6vw, 40px)/1 var(--display); font-variant-numeric: tabular-nums; color: var(--paint-l); }
.ro-nums dd small { font: 500 15px var(--body); color: var(--mute-d); margin-left: 4px; }
.ro-actions { margin-top: 26px; }
.len-row .f.wide { width: 230px; }
.pick [hidden] { display: none; }
.chip-h { margin: 14px 0 8px; font-weight: 600; font-size: 15px; color: var(--mute); }
.chip-h:first-child { margin-top: 0; }
.ro-note { margin: 14px 0 0; font-size: 16px; color: #DCE1E5; }
.ro-note:empty { display: none; }
/* calculator drawings drawn in inches: large bundles need heavier strokes and text than one section */
.readout svg.bdl .prof { stroke-width: .05; }
.readout svg.bdl .dim path { stroke-width: .06; }
.props { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid var(--scale-3); }
.props div { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--scale-3); }
.props dt { font-size: 14px; color: var(--mute-d); }
.props dd { margin: 2px 0 0; font: 700 24px/1.1 var(--display); font-variant-numeric: tabular-nums; color: var(--paint-l); }
.props dd small { font: 500 14px var(--body); color: var(--mute-d); margin-left: 4px; }
.cut-bar { display: block; width: 100%; height: 40px; margin: 6px 0 0; }
.cut-bar .part { fill: #8D979F; }
.cut-bar .drop { fill: none; stroke: var(--paint-l); stroke-width: 2; stroke-dasharray: 6 4; }
table.wt tr.on th, table.wt tr.on td { background: var(--ink); color: #fff; }
/* minmax(0, 1fr), not 1fr: the one-line mill mark would otherwise widen the column past the screen */
@media (max-width: 980px) { .finder { grid-template-columns: minmax(0, 1fr); } .readout { position: static; } }
/* results bar: ht.js shows it on narrow screens while a calculator's inputs are in view and its readout is not */
.ro-peek { display: none; }
@media (max-width: 980px) {
  .ro-peek.on { display: flex; align-items: center; gap: 12px; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; min-height: 56px; padding: 10px 16px; background: var(--scale); color: #fff; text-decoration: none; box-shadow: 0 12px 32px -12px rgba(21,25,29,.6); }
  .ro-peek.on[hidden] { display: none; }
  .ro-peek span { font-size: 14px; color: #DCE1E5; }
  .ro-peek b { font: 700 24px/1 var(--display); color: var(--paint-l); font-variant-numeric: tabular-nums; }
  .ro-peek b small { font: 500 14px var(--body); margin-left: 4px; color: #DCE1E5; }
  .ro-peek .go { margin-left: auto; font-weight: 600; color: #fff; }
}
@media (max-width: 480px) { .ro-nums { grid-template-columns: 1fr; gap: 14px; } .ro-nums > div + div { padding-left: 0; border-left: 0; } }

/* ---------- footer ---------- */
/* a step darker than the dark quote band every page ends on, so the band and the footer read as two blocks */
footer.site { background: #0F1215; color: #C9CED3; padding: 64px 0 44px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 40px 32px; padding-bottom: 44px; border-bottom: 1px solid var(--scale-3); }
footer .brand img { height: 28px; width: auto; max-width: 100%; }
.foot-brand p { margin: 18px 0 16px; }
.foot-brand address { font-style: normal; font-size: 16px; line-height: 1.7; margin-bottom: 24px; }
.foot-brand .btn { padding: 14px 20px; font-size: 16px; }
.foot-h { margin: 4px 0 14px; font: 700 19px/1 var(--display); color: #fff; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 16px; }
.foot-col a { text-decoration: none; }
.foot-col a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 1000px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
.foot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; padding-bottom: 32px; border-bottom: 1px solid var(--scale-3); }
.foot-top img { height: 28px; width: auto; }
.foot-top p { margin: 0; }
.foot-top a { color: inherit; }
.family { display: flex; flex-wrap: wrap; gap: 10px 30px; padding: 26px 0; font-size: 15.5px; }
.family a { text-decoration: none; }
.family a:hover { text-decoration: underline; }
.family a[aria-current] { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; text-decoration-color: var(--paint-l); }
/* phones: a taller tap area for links that stand alone, without moving or resizing what shows; the footer lists
   lose their gap so each link carries its own 44px row */
@media (max-width: 900px) {
  .arrow { position: relative; }
  .arrow::before { content: ""; position: absolute; inset: -12px -6px; }
  main a[href^="tel:"], .foot-brand address a, .legal a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .foot-col ul { gap: 0; }
  .foot-col a { display: block; padding: 10px 0; }
  .family { gap: 0 30px; padding: 16px 0; }
  .family a { display: inline-block; padding: 10px 0; }
  .nav .brand { padding: 12px 0; }
  .btn { min-height: 44px; }
  .foot-brand .brand { display: inline-block; padding: 8px 0; }
  b > a:only-child { display: inline-block; padding: 8px 0; margin: -8px 0; }
  .seg button { min-height: 44px; }
}
.legal { margin: 0; font-size: 14px; color: #8E959C; }
.legal a { color: inherit; }

/* ---------- statement band: one large line over a darkened plant photo, at most one per page ---------- */
.st-band { position: relative; isolation: isolate; overflow: hidden; background: var(--scale); color: #fff; padding: clamp(110px, 13vw, 200px) 0; }
.st-band > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) brightness(.5); }
.st-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20,24,28,.9) 0%, rgba(20,24,28,.55) 55%, rgba(20,24,28,.2) 100%); }
.st-band .big { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 2vw, 28px); align-items: start; margin: 0; max-width: 17ch; font: 700 clamp(40px, 5.6vw, 92px)/1 var(--display); letter-spacing: -.012em; text-wrap: balance; }
/* the green bar is the end paint a mill puts on cut tube */
.st-band .big::before { content: ""; width: clamp(10px, 1vw, 14px); height: .86em; margin-top: .08em; background: var(--paint-l); }
.st-band .sub { margin: 26px 0 0 calc(clamp(10px, 1vw, 14px) + clamp(16px, 2vw, 28px)); max-width: 34em; font-size: 19px; color: #D3D9DF; }
@media (max-width: 600px) { .st-band .big { max-width: none; } .st-band .sub { margin-left: 0; } }

/* closing links on industry pages: one row, heading then two short lists */
.rel-grid { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr; gap: 28px clamp(28px, 4vw, 64px); align-items: start; }
.rel-grid h2 { font-size: clamp(32px, 3.2vw, 48px); }
.rel-grid h3 { font-size: 18px; color: var(--mute); margin-bottom: 14px; }
@media (max-width: 900px) { .rel-grid { grid-template-columns: 1fr; } }

/* ---------- home: product panels, a photo each with the tube's cross-section drawn over it ---------- */
.panels { background: var(--scale); color: #fff; padding: clamp(88px, 11vw, 168px) 0 0; }
.panel-row { display: flex; height: min(76vh, 720px); min-height: 500px; }
.panel { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(24px, 2.6vw, 40px); color: #fff; text-decoration: none; overflow: hidden; isolation: isolate; border-right: 1px solid rgba(255,255,255,.12); transition: flex-grow .7s var(--ease); }
.panel:last-child { border-right: 0; }
.panel::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--pos, center) / cover var(--img); transform: scale(1.06); filter: grayscale(.55) brightness(.55); transition: transform 1.2s var(--ease), filter .6s; }
.panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(20,24,28,.96) 0%, rgba(20,24,28,.4) 58%, rgba(20,24,28,.12) 100%); }
.panel:hover, .panel:focus-visible { flex-grow: 1.8; }
.panel:hover::before, .panel:focus-visible::before { transform: scale(1); filter: none; }
.panel:focus-visible { outline: 3px solid var(--paint-l); outline-offset: -3px; }
/* the drawing sits on its own dark plate so it reads over any photo, also when the photo brightens on hover */
.panel-prof { position: absolute; top: clamp(24px, 2.6vw, 40px); left: clamp(24px, 2.6vw, 40px); width: min(60%, 168px); height: auto; overflow: visible; box-sizing: content-box; padding: 12px 16px; background: rgba(13,16,19,.86); border-left: 3px solid var(--paint-l); }
.panel-prof .prof { fill: rgba(20,24,28,.35); stroke: #fff; stroke-width: 2; transition: stroke .3s; }
.panel-prof .cut { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 6 5; transition: stroke .3s; }
.panel:hover .panel-prof .cut, .panel:focus-visible .panel-prof .cut { stroke: var(--paint-l); }
.panel:hover .panel-prof .prof, .panel:focus-visible .panel-prof .prof { stroke: var(--paint-l); }
.panel h3 { font-size: clamp(30px, 2.8vw, 48px); line-height: 1; margin-bottom: 12px; }
.panel p { margin: 0 0 16px; color: #D3D9DF; max-width: 26em; }
.panel .range { font: 500 14px/1.6 var(--mono); color: #DCE1E5; margin-bottom: 18px; }
.panel .go { font-weight: 600; text-decoration: underline; text-decoration-color: var(--paint-l); text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (min-width: 1001px) { .panel h3 { min-height: 2em; display: flex; align-items: flex-end; } }
@media (max-width: 1000px) {
  .panel-row { flex-direction: column; height: auto; }
  .panel { min-height: 380px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .panel::before { filter: brightness(.6); }
}
/* Quote band print: a shop drawing of a tube whose dimensions are the things a quote needs (size, wall,
   length, footage). The drawing is a link to the quote form; the footer has the red Get a Quote button, so the
   band has text links only. */
@media (min-width: 901px) { .quote-band .quote-grid:has(.qprint) { grid-template-columns: .85fr 1.15fr; } }
.qprint { display: block; color: inherit; }
.qprint svg { display: block; width: 100%; height: auto; overflow: visible; }
.qprint .prof, .qprint .tube { fill: rgba(228,232,235,.07); stroke: #C9D0D5; stroke-width: 1.4; transition: fill .3s; }
.qprint .brk { fill: none; stroke: #C9D0D5; stroke-width: 1.2; }
.qprint .ghost { fill: none; stroke: #7D8790; stroke-width: 1.1; stroke-dasharray: 6 5; }
.qprint .cl { fill: none; stroke: #6E7880; stroke-width: 1.1; stroke-dasharray: 18 5 3 5; }
.qprint .dim path { stroke: var(--paint-l); stroke-width: 1.5; fill: none; }
.qprint .dim .head { fill: var(--paint-l); stroke: none; }
.qprint .dim text { fill: var(--paint-l); font: 600 15px var(--body); }
.qprint .tb { fill: none; stroke: #56616A; stroke-width: 1.2; }
.qprint .tb-l { fill: #9AA4AC; font: 600 13px var(--body); }
.qprint .tb-v { fill: #fff; font: 500 14px var(--mono); }
.qprint:hover .prof, .qprint:hover .tube { fill: rgba(108,203,156,.14); }
.qprint + .next-links { margin-top: 18px; }

/* drawn profiles that link to the size finder: the whole shape is the target, not just its outline */
.lineup-groups a .hit, .size-row a .hit { fill: transparent; }
.size-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 18px; margin: 18px 0 14px; }
.size-row svg { display: block; overflow: visible; }
.size-row .prof { fill: url(#zincFill); stroke: #6E7880; stroke-width: 1; transition: fill .2s; }
.size-row text { font: 500 12px var(--mono); fill: var(--mute); }
.size-row a:hover .prof, .size-row a:focus-visible .prof { fill: var(--paint); stroke: var(--paint); }
.size-row a:hover text, .size-row a:focus-visible text { fill: var(--paint); font-weight: 700; }
.size-row a:focus-visible { outline: none; }
.size-note { margin: 0; color: var(--mute); font-size: 16px; }

/* ---------- technical data: size tables, specs and tolerances, closed until asked for ---------- */
.tech-data { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.tech-part { padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid var(--rule); }
.tech-part h2 { font-size: clamp(28px, 3vw, 42px); }

/* ---------- phone and tablet menu ---------- */
@media (max-width: 1440px) { .nav { gap: 24px; } .nav ul { gap: 22px; } }
@media (max-width: 1150px) {
  .nav nav { display: none; }
  .nav nav.open { display: block; position: absolute; top: 80px; left: 0; right: 0; max-height: calc(100dvh - 80px); overflow-y: auto; background: var(--panel); border-bottom: 3px solid var(--paint); }
  .nav nav.open ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 20px; }
  .nav nav.open a, .nav nav.open .sub-btn { display: block; padding: 13px 0; font-size: 19px; }
  .nav nav.open .sub-btn { display: inline-flex; }
  .nav nav.open .sub { position: static; display: none; box-shadow: none; border: 0; background: none; padding: 0 0 6px 18px; min-width: 0; }
  .nav nav.open .sub::before { display: none; }
  .nav nav.open .has-sub:hover .sub, .nav nav.open .has-sub:focus-within .sub { display: none; }
  .nav nav.open .has-sub [aria-expanded="true"] ~ .sub { display: block; }
  /* a finger-sized target: the arrow sits in a 48px box at the end of its label */
  .nav nav.open .sub-toggle { width: 48px; height: 48px; padding: 0; margin-left: 4px; display: inline-flex; align-items: center; justify-content: center; }
  .nav nav.open .sub a { padding: 9px 0; font-size: 17px; }
  .menu-btn { display: block; margin-left: auto; }
  .nav nav.open .menu-quote { display: block; margin-top: 14px; }
  .nav nav.open .menu-quote a { display: inline-flex; padding: 16px 24px; }
}
@media (max-width: 640px) {
  .nav-cta { display: none; }
  /* phones: the bar drops "Home" (the logo already goes there) and folds away once the page is scrolled */
  .crumb-bar .crumbs > :first-child { display: none; }
  .crumb-bar .crumbs > :nth-child(2)::before { content: none; }
  .crumb-bar { height: 41px; overflow: hidden; transition: height .25s, opacity .25s; }
  header.site.scrolled .crumb-bar { height: 0; opacity: 0; border-bottom: 0; }
  html.has-crumbs:has(header.site.scrolled) { --head: 81px; }
  /* the bar is 44px on phones so each crumb is a full-size tap target */
  html.has-crumbs { --head: 125px; }
  html.has-crumbs main { padding-top: 45px; }
  .crumb-bar { height: 45px; }
  .crumb-bar .wrap { height: 44px; }
  .crumb-bar .crumbs > * { min-height: 44px; }
  .brand img { height: 24px; }
  .nav { gap: 14px; }
  .split-head { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- home lead-in pieces ---------- */
.statement { font-size: clamp(38px, 5vw, 80px); max-width: 15em; margin-bottom: clamp(48px, 7vw, 96px); }
.statement span { color: var(--mute); }
.facts.big { margin-top: 0; }
.facts.big dt { order: 2; }
.facts.big > div { display: flex; flex-direction: column; gap: 14px; }   /* number first, then its label */
.facts.big dt { color: var(--ink); font-size: 18px; margin: 0; }
.facts.big dt small { display: block; font: 400 15px/1.4 var(--body); color: var(--mute); margin-top: 4px; }
.facts.big .unit { font-size: .38em; letter-spacing: 0; color: var(--mute); }
.facts.big dd { font-size: clamp(56px, 7vw, 116px); line-height: .9; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.side { margin: 0 0 22px; font-size: 19px; color: var(--mute); max-width: 30em; }
.dark .side { color: var(--mute-d); }
/* plain list of names linking to their pages (home industries, other industries) */
.name-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.dark .name-list { border-color: var(--scale-3); }
.name-list li { border-bottom: 1px solid var(--rule); }
.dark .name-list li { border-color: var(--scale-3); }
.name-list a, .name-list.plain li { display: block; padding: 14px 0; font: 600 22px/1.2 var(--display); text-decoration: none; }
.name-list a:hover { color: var(--paint); }
.dark .name-list a:hover { color: var(--paint-l); }
.ind-list b a { text-decoration: none; }
.ind-list b a:hover { color: var(--paint); }

.job { display: grid; grid-template-columns: auto 1fr; gap: 0; margin: 0; border-top: 1px solid var(--scale-3); }
.job dt, .job dd { padding: 14px 0; border-bottom: 1px solid var(--scale-3); margin: 0; }
.job dt { color: var(--mute-d); padding-right: 28px; font-size: 16px; }
.job dd { font: 600 19px var(--body); }
.job.light { border-color: var(--rule); }
.job.light dt, .job.light dd { border-color: var(--rule); }
.job.light dt { color: var(--mute); }

/* ---------- learn ---------- */
.lesson-list { list-style: none; margin: 0; padding: 0; counter-reset: l; border-top: 2px solid var(--ink); }
.lesson-list li { counter-increment: l; border-bottom: 1px solid var(--rule); }
.lesson-list a { display: grid; grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; align-items: baseline; padding: 24px 0; text-decoration: none; }
.lesson-list a::before { content: counter(l); font: 700 30px/1 var(--display); color: var(--paint); }
.lesson-list b { font: 700 clamp(26px, 2.6vw, 38px)/1.1 var(--display); }
.lesson-list span { color: var(--mute); }
.lesson-list a:hover b { color: var(--paint); }
.lesson-next { display: block; text-decoration: none; padding: 22px 0; border-top: 2px solid currentColor; border-bottom: 1px solid var(--rule); }
.lesson-next b { display: block; font: 700 clamp(28px, 3vw, 44px)/1.1 var(--display); margin-bottom: 6px; }
.lesson-next span { color: var(--mute); }
.dark .lesson-next span { color: var(--mute-d); }
.lesson-next:hover b { color: var(--paint); }
.dark .lesson-next:hover b { color: var(--paint-l); }
.gloss { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 4vw, 64px); margin: 0; }
.gloss div { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.gloss dt { font: 700 22px var(--display); margin-bottom: 4px; }
.gloss dd { margin: 0; color: var(--mute); font-size: 17px; }
.draw-art .bar-t { fill: var(--ink); }
.draw-art .bar-s { fill: #A3ADB6; }
.draw-art .dimt { fill: var(--ink); font: 500 13px var(--mono); }
.draw-art .dimt.s { fill: var(--mute); }
.draw-art .dim-line { stroke: var(--rule); stroke-width: 2; fill: none; }
table.mx td { font: 500 15px var(--body); text-align: left; white-space: normal; }
table.mx thead th { text-align: left; }
.draw-hero .flow-art { margin: clamp(28px, 4vw, 56px) 0 0; }

/* ---------- careers ---------- */
.job-rows { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.job-rows li { border-bottom: 1px solid var(--rule); }
.job-rows a { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr 1fr; gap: 20px; align-items: baseline; padding: 22px 0; text-decoration: none; }
.job-rows b { font: 700 clamp(24px, 2.4vw, 34px)/1.1 var(--display); }
.job-rows span { color: var(--mute); }
.job-rows a:hover b { color: var(--paint); }
/* Careers is mostly secondary text; the site's gray reads too faint in such long runs, so it is darker here */
.careers { --mute: #353E47; }
/* the live list (jobs.js): title / pay / Apply on one row, Job Details opening across the full width beneath */
.jobs { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.opening { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; column-gap: clamp(20px, 3vw, 40px); align-items: center; padding: 22px 0 16px; border-bottom: 1px solid var(--rule); }
.opening h3 { font-size: clamp(24px, 2.4vw, 32px); }
.job-pay { margin: 0; font-size: 18px; color: var(--ink); }
.job-apply { padding: 14px 28px; }
.job-more { grid-column: 1 / -1; margin-top: 8px; }
.job-more summary { cursor: pointer; width: max-content; font-weight: 600; font-size: 16px; color: var(--ink); padding: 4px 0; }
.job-more summary:hover { color: var(--paint); }
.job-text { max-width: 46em; padding: 8px 0 12px; font-size: 17px; line-height: 1.6; }
.job-text p, .job-text ul { margin: 0 0 12px; }
.job-text ul { padding-left: 22px; }
.job-text h4 { font: 700 20px/1.2 var(--display); margin: 20px 0 8px; }
.jobs-outage { margin: 0 0 20px; padding: 12px 16px; background: #FFF4D6; border-left: 5px solid #D9A300; color: var(--ink); }
.jobs-more { margin: 32px 0 0; text-align: center; }
.jobs-note { margin: 16px 0 0; text-align: center; font-size: 15px; color: var(--mute); }

@media (max-width: 900px) {
  .lesson-list a { grid-template-columns: 44px 1fr; }
  .lesson-list span { grid-column: 2; }
  .gloss { grid-template-columns: 1fr; }
  .job-rows a { grid-template-columns: 1fr; gap: 4px; }
  .opening { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
  .opening h3 { grid-column: 1 / -1; }
  .job-pay:empty { display: none; }
}

/* ---------- photo band under a page's hero ---------- */
.photo-band { margin: 0; background: var(--scale); overflow: hidden; }
.photo-band img { width: 100%; height: clamp(240px, 36vw, 560px); object-fit: cover; }
/* dark section with a photo behind it; the gradient keeps the text readable */
.photo-bg { position: relative; isolation: isolate; overflow: hidden; }
.photo-bg > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.photo-bg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(29,34,40,.92) 0%, rgba(29,34,40,.8) 55%, rgba(29,34,40,.6) 100%); }
/* quiet: a grayscale photo kept well back, as texture rather than a picture */
.photo-bg.quiet::before { background: linear-gradient(90deg, rgba(29,34,40,.94) 0%, rgba(29,34,40,.86) 60%, rgba(29,34,40,.78) 100%); }
.job-new { display: inline-block; margin-left: 10px; padding: 3px 8px; font: 600 13px/1.2 var(--body); vertical-align: middle; background: var(--paint); color: #fff; }
@media (max-width: 400px) { .brand img { height: 20px; } }

/* ---------- calculator pages: a short opening so the calculator and its result show on load ---------- */
.calc-hero { padding-top: clamp(36px, 4.5vw, 64px); }
.calc-hero h1 { font-size: clamp(36px, 4.2vw, 62px); }
.calc-hero.calc-split { padding-bottom: clamp(20px, 2.5vw, 32px); }
.calc-split + .sec { padding-top: clamp(24px, 3vw, 40px); }

/* ---------- home: where the tube goes. Solar leads (most of the output); the rest are rows ---------- */
.mk-title { margin-bottom: clamp(36px, 5vw, 64px); }
.mk-lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(24px, 3vw, 44px); background: var(--scale-2); border: 1px solid var(--scale-3); color: #fff; text-decoration: none; }
.mk-copy { display: block; }
.mk-name { display: block; font: 700 clamp(40px, 4.6vw, 72px)/1 var(--display); margin-bottom: 18px; transition: color .2s; }
.mk-text { display: block; color: #CDD3D8; font-size: 19px; max-width: 30em; margin-bottom: 24px; }
.mk-lead .go { font-weight: 600; text-decoration: underline; text-decoration-color: var(--paint-l); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.mk-lead:hover .mk-name, .mk-lead:focus-visible .mk-name { color: var(--paint-l); }
.mk-lead:focus-visible { outline: 3px solid var(--paint-l); outline-offset: 3px; }
/* the drawing is made for a light page, so it sits on a zinc tile */
.mk-art { display: block; background: var(--zinc); }
.mk-art svg { display: block; width: 100%; height: auto; }
.mk-list { list-style: none; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); }
.mk-list a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 4px 20px 0; border-top: 1px solid var(--scale-3); color: #fff; text-decoration: none; font: 600 clamp(20px, 1.7vw, 24px)/1.2 var(--display); }
/* chevron drawn like the FAQ's, pointing right */
.mk-list a::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--paint-l); border-bottom: 2px solid var(--paint-l); transform: rotate(-45deg); transition: transform .3s var(--ease); }
.mk-list a:hover, .mk-list a:focus-visible { color: var(--paint-l); }
.mk-list a:hover::after, .mk-list a:focus-visible::after { transform: translateX(5px) rotate(-45deg); }
@media (max-width: 900px) { .mk-lead { grid-template-columns: 1fr; } .mk-art { order: -1; } .mk-list { grid-template-columns: 1fr; } }

/* ---------- home: tighter bands where a section is short, and the four reasons under the mill teaser ---------- */
.sec.sec-tight { padding: clamp(64px, 8vw, 120px) 0; }
.reasons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 64px); border-top: 2px solid var(--ink); }
.reasons > div { padding: 22px 22px 0 0; }
.reasons > div + div { padding-left: 22px; border-left: 1px solid var(--rule); }
.reasons h3 { font-size: 22px; line-height: 1.15; margin-bottom: 10px; }
.reasons p { margin: 0; color: var(--mute); font-size: 16px; }
@media (max-width: 980px) { .reasons { grid-template-columns: 1fr 1fr; } .reasons > div:nth-child(3) { padding-left: 0; border-left: 0; } .reasons > div { padding-bottom: 22px; } }
@media (max-width: 560px) { .reasons { grid-template-columns: 1fr; } .reasons > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); } }

/* industries overview: solar, most of the output, is the heavier first row */
.ind-list li.ind-lead { grid-column: 1 / -1; padding: 28px 0 32px; border-top: 2px solid var(--ink); }
.ind-list li.ind-lead b { font-size: clamp(32px, 3.2vw, 48px); line-height: 1.05; }
.ind-list li.ind-lead span { font-size: 19px; color: var(--ink); }

/* ---------- lesson pages: the same ending on all six, previous and next with the lesson number ---------- */
.lesson-end { padding: clamp(56px, 7vw, 96px) 0; }
.lesson-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.lesson-prev, .lesson-nav .lesson-next { display: block; text-decoration: none; padding: 22px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.lesson-nav small { display: block; font: 600 15px var(--body); color: var(--mute); margin-bottom: 6px; }
.lesson-prev b { display: block; font: 700 clamp(22px, 2vw, 28px)/1.15 var(--display); }
.lesson-nav .lesson-next { text-align: right; }
.lesson-nav .lesson-next span { display: block; color: var(--mute); }
.lesson-prev:hover b { color: var(--paint); }
.lesson-use { margin: 28px 0 0; color: var(--mute); font-size: 18px; }
@media (max-width: 700px) { .lesson-nav { grid-template-columns: 1fr; } .lesson-nav .lesson-next { text-align: left; order: -1; } }

/* industry drawings: the size labels beside each profile would shrink to about 8 px on a phone, so they
   get a larger size there and the second line of each pair drops a little to clear the first */
/* every hero drawing shrinks to about half size on a phone, so its labels are set larger there to read at
   about 11 px or more */
@media (max-width: 600px) {
  .draw-art .lbl, .draw-art .dim text { font-size: 21px; }
  .draw-art .dimt { font-size: 21px; }
  .draw-art .tb-l, .draw-art .tb-v { font-size: 20px; }
  .tube-art .dim text { font-size: 20px; }
  .draw-art .lbl.tag { font-size: 22px; }
  .draw-art .lbl.tag.l2 { transform: translateY(5px); }
}