:root{
  --ink:#241f18;
  --gold:#837044;
  --gold-deep:#5f5130;
  --gold-light:#a8925e;
  --sand:#c9bb99;
  --paper:#faf8f3;
  --white:#ffffff;
  --gray:#6b6255;
  --line:#e6e0d4;
  --field:#948870;
  --mono:"IBM Plex Mono", monospace;
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
/* 17px base: Albert Sans has a small x-height, so every rem size below reads one step larger than at 16px */
html{font-size:106.25%; scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{
  margin:0;
  font-family:"Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
/* On the ink sections gold drops below 3:1, so the focus ring switches to sand */
.visit :focus-visible, #network :focus-visible, .cta-band :focus-visible, footer :focus-visible{outline-color:var(--sand);}
.wrap{max-width:1140px; margin:0 auto; padding:0 24px;}
h1,h2,h3,h4{font-family:"Albert Sans",sans-serif; margin:0 0 16px; line-height:1.2; font-weight:600; letter-spacing:-0.01em; color:var(--ink);}
h2{font-size:clamp(1.5rem,2.6vw,2.1rem);}
h3{font-size:1.2rem;}
p{margin:0 0 16px; color:var(--gray);}
.eyebrow{color:var(--gold); font-weight:600; font-size:0.78rem; letter-spacing:0.04em; margin-bottom:10px; font-family:var(--mono);}
section{padding:64px 0; border-bottom:1px solid var(--line);}
section:last-of-type{border-bottom:none;}
.btn{
  display:inline-block; padding:12px 24px; border-radius:2px; text-decoration:none;
  font-weight:600; font-size:0.92rem; border:1px solid transparent; cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.btn:active{transform:translateY(1px);}
.btn:disabled{cursor:progress; transform:none;}
.btn-primary{background:var(--gold); color:#fff;}
.btn-primary:hover, .btn-primary:disabled{background:var(--gold-deep);}
.btn-outline{background:transparent; border-color:var(--ink); color:var(--ink);}
.btn-outline:hover{border-color:var(--gold); color:var(--gold);}
.btn-soft{background:#f2ede1; color:var(--gold); border-color:#e0d7c2;}
.btn-soft:hover{background:#eae3d2; color:var(--ink);}
.btn-arrow{display:inline-flex; align-items:center; gap:10px;}
.btn-arrow span{transition:transform .2s ease;}
.btn-arrow:hover span{transform:translateX(2px);}
/* Hero secondary buttons use the nav link grey */
.hero .btn-soft{color:var(--gray);}
.hero .btn-soft:hover{color:var(--ink);}

/* Skip link: off screen until a keyboard user tabs to it */
.skip-link{
  position:absolute; left:16px; top:-100px; z-index:100; padding:10px 16px; border-radius:2px;
  background:var(--ink); color:#fff; font-weight:600; font-size:0.9rem; text-decoration:none;
}
.skip-link:focus{top:12px;}
.skip-link:focus-visible{outline-color:var(--sand);}

/* Header */
body > header{
  position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line);
}
/* Header is wider than the body wrap so logo + links + both CTAs fit on one row */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:32px; padding:18px 24px; max-width:1280px; margin:0 auto;
}
.logo{display:flex; align-items:center; text-decoration:none; flex-shrink:0;}
.logo img{height:34px; width:auto; aspect-ratio:733/138;}
.nav-links{display:flex; gap:24px; list-style:none; margin:0; padding:0; align-items:center; flex-wrap:nowrap;}
.nav-links li{flex-shrink:0;}
.nav-links a{text-decoration:none; color:var(--gray); font-size:0.96rem; font-weight:500; white-space:nowrap;}
.nav-links a:hover{color:var(--ink);}
.nav .btn-primary{padding:0 20px; font-size:0.88rem;}
.nav .btn{height:42px; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;}
.nav-cta{display:flex; align-items:center; gap:10px; flex-shrink:0;}
/* Retail is a side channel: a quiet text link, so "Request a quote" is the only filled button */
.nav-retail{padding:0 8px; font-size:0.88rem; font-weight:500; color:var(--gray); text-decoration:none; white-space:nowrap;}
.nav-retail:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px;}

/* Hero */
.hero{
  position:relative; color:var(--ink); border-bottom:none; padding:0;
  background:#f7f5f0;
  background-image:repeating-linear-gradient(
    135deg,
    #efece5 0px, #efece5 26px,
    #f9f7f3 26px, #f9f7f3 62px
  );
  overflow:hidden;
}
.hero-inner{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
  min-height:560px; padding-block:72px;
}
/* Gold falls under 4.5:1 on the darker hero stripe, so hero labels use the deep gold */
.hero .eyebrow{color:var(--gold-deep);}
.hero h1{font-size:clamp(2rem,4.2vw,3.1rem); color:var(--ink); font-weight:600; line-height:1.12; margin-bottom:22px;}
.hero h1 span{display:block;}
.hero h1 .accent{color:var(--gold);}
.hero p{color:var(--gray); font-size:1.02rem; max-width:520px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px;}
.hero-spec{
  background:var(--ink); color:#b8ac91; font-size:0.78rem; letter-spacing:0.05em;
  padding:13px 24px; text-align:center; font-family:var(--mono); text-wrap:balance;
}
/* Each claim stays on one line when the strip wraps */
.hero-spec span{white-space:nowrap;}
/* The homepage wraps its codes in one block so the entrance can feed them in */
.hero-spec .hero-spec-codes{display:block; white-space:normal;}

/* Hero product box (static) */
.box-stage{height:440px; display:flex; align-items:center; justify-content:center;}
.box-stage img{
  max-height:400px; width:auto;
  filter:drop-shadow(0 22px 34px rgba(60,50,30,0.28));
}
/* Homepage product group: tighter shadow plus a soft ground shadow so it sits on the surface */
.hero-products{position:relative; height:490px;}
.hero-products img{
  position:relative; z-index:1; max-height:480px; height:auto;
  filter:drop-shadow(0 14px 18px rgba(60,50,30,0.22));
}
.hero-products::after{
  content:""; position:absolute; z-index:0; left:14%; right:10%; bottom:10px; height:46px;
  background:radial-gradient(ellipse at center, rgba(60,50,30,0.30) 0%, rgba(60,50,30,0.12) 45%, transparent 72%);
  filter:blur(6px);
}


/* Certification section */
.cert-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:start;}
.cert-list{list-style:none; margin:20px 0 26px; padding:0; display:flex; flex-direction:column;}
.cert-list li{border-top:1px solid var(--line); padding:10px 0; font-size:0.86rem; color:var(--gray); line-height:1.45;}
.cert-list li:last-child{border-bottom:1px solid var(--line);}
.cert-list strong{display:block; font-size:1.02rem; margin-bottom:3px; font-family:var(--mono); font-weight:500; color:var(--gold); line-height:1.3;}
.cert-note{max-width:56ch; font-size:0.85rem; color:var(--gray); border-top:1px solid var(--line); padding-top:16px;}
.cert-copy .cert-note{margin-top:22px;}
.btn-cert{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--ink); color:#fff; border-color:var(--ink);
}
.btn-cert span{color:var(--sand); transition:transform .2s ease;}
.btn-cert:hover{background:var(--gold); border-color:var(--gold);}
.btn-cert:hover span{color:#fff; transform:translateX(2px);}
.cert-doc{margin:0; max-width:400px; justify-self:end; width:100%;}
.cert-doc-frame{
  display:block; background:#fff; padding:12px; border:1px solid var(--line); transition:border-color .2s ease;
}
.cert-doc-frame:hover{border-color:var(--gold);}
.cert-doc img{width:100%; aspect-ratio:749/1060; object-fit:cover; background:var(--paper);}
.cert-doc figcaption{margin-top:12px; font-size:0.78rem; color:var(--gray);}
.cert-doc figcaption span{font-family:var(--mono); color:var(--ink);}

/* Product layers */
.layers-section{background:var(--paper);}
.layers-grid{display:grid; grid-template-columns:0.8fr 1.4fr; gap:56px; align-items:stretch;}
.layers-media{margin:0; display:flex; flex-direction:column; min-height:0;}
.layers-media img{flex:1; min-height:0; width:100%; object-fit:contain; object-position:center top;}
.layer-row{display:flex; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); align-items:baseline;}
.layer-row:last-child{border-bottom:none;}
.layer-num{font-family:var(--mono); color:var(--gold); font-weight:500; min-width:18px; font-size:0.9rem;}
.layer-name{font-weight:600; min-width:110px; font-size:0.95rem;}
.layer-desc{color:var(--gray); font-size:0.92rem;}

/* Interactive layer explorer: click a layer on the photo or in the list */
.layer-stage{position:relative; width:100%; max-width:380px; margin:0 auto; aspect-ratio:620/1028;}
.layer-explorer .layer-stage img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain;}
.layer-map{position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
/* Selected layer takes a soft warm tint, the others step back in a light grey. No outlines. */
/* Tints are multiplied into the photo so the fabric texture stays visible, like a dye */
.layer-shapes{mix-blend-mode:multiply;}
.layer-shape{fill:#ffffff; stroke:none; cursor:pointer; transition:fill .5s ease;}
/* The selected layer stays clean white, the others step back into a soft grey */
.layer-shape:hover{fill:#efefed;}
.layer-map.has-active .layer-shape{fill:#cfccc6;}
.layer-map.has-active .layer-shape:hover, .layer-map.has-active .layer-shape.is-preview{fill:#e6e4e0;}
.layer-map.has-active .layer-shape.is-active{fill:#ffffff;}
.layer-badge{cursor:pointer;}
.layer-badge-dot{fill:#fff; stroke:var(--gold); stroke-width:2; transition:fill .25s ease, transform .25s ease;}
.layer-badge text{font-family:var(--mono); font-size:24px; font-weight:500; fill:var(--gold); text-anchor:middle; pointer-events:none; transition:fill .25s ease;}
.layer-badge-ring{fill:none; stroke:var(--gold); stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center; animation:layer-pulse 3.2s ease-out infinite;}
.layer-badge[data-layer="4"] .layer-badge-ring{animation-delay:.4s;}
.layer-badge[data-layer="3"] .layer-badge-ring{animation-delay:.8s;}
.layer-badge[data-layer="2"] .layer-badge-ring{animation-delay:1.2s;}
.layer-badge[data-layer="1"] .layer-badge-ring{animation-delay:1.6s;}
@keyframes layer-pulse{0%{opacity:.4; transform:scale(.85);} 80%,100%{opacity:0; transform:scale(1.3);}}
.layer-badge:hover .layer-badge-dot, .layer-badge.is-active .layer-badge-dot{fill:var(--gold);}
.layer-badge:hover text, .layer-badge.is-active text{fill:#fff;}
.layer-map.has-active .layer-badge-ring{animation:none; opacity:0;}
.layer-hint{display:block; margin-bottom:4px; font-family:var(--mono); font-size:0.78rem; letter-spacing:0.03em; color:var(--gold);}

.layer-list .layer-row{
  position:relative; width:100%; flex-wrap:wrap; padding:13px 12px 13px 16px; margin:0;
  background:transparent; border:none; border-bottom:1px solid var(--line); border-radius:0;
  font:inherit; color:inherit; text-align:left; cursor:pointer; transition:background .3s ease;
}
.layer-list .layer-row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gold);
  transform:scaleY(0); transform-origin:top; transition:transform .35s ease;
}
.layer-list .layer-row:hover{background:rgba(131,112,68,0.05);}
.layer-list .layer-row.is-active{background:#fff;}
.layer-list .layer-row.is-active::before{transform:scaleY(1);}
.layer-list .layer-row:focus-visible{outline:2px solid var(--gold); outline-offset:-2px;}
.layer-list .layer-num{
  display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; min-width:24px;
  border:1px solid var(--gold); border-radius:50%; font-size:0.8rem; align-self:center; transition:background .3s ease, color .3s ease;
}
.layer-list .layer-row.is-active .layer-num{background:var(--gold); color:#fff;}
.layer-list .layer-name, .layer-list .layer-desc{align-self:center;}
.layer-more{
  flex-basis:100%; max-height:0; overflow:hidden; opacity:0; padding-left:40px;
  font-size:0.86rem; line-height:1.5; color:var(--gray);
  transition:max-height .4s ease, opacity .3s ease, margin .3s ease;
}
.layer-list .layer-row.is-active .layer-more{max-height:80px; opacity:1; margin-top:6px;}
.layer-list .layer-row.is-flash{animation:layer-flash .7s ease;}
@keyframes layer-flash{0%{background:rgba(168,146,94,0.08);} 100%{background:#fff;}}
.layer-status{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
@media (prefers-reduced-motion: reduce){
  .layer-badge-ring, .layer-list .layer-row.is-flash{animation:none;}
}
.caption{font-size:0.8rem; color:var(--gray); margin-top:10px;}

/* Features */
.features-head{margin:32px 0 18px; font-size:1.1rem;}
.features-stack{display:flex; flex-direction:column; gap:18px;}
.feature{border-top:2px solid var(--ink); padding-top:14px;}
.feature h4{margin-bottom:6px; font-size:1rem;}
.feature p{margin:0; max-width:56ch; font-size:0.92rem;}

/* Spec + finishes */
.spec-grid{display:grid; grid-template-columns:0.82fr 1.18fr; gap:48px; align-items:start;}

/* Performance and certification */
.perf-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; margin-top:32px; align-items:start;}
.perf-grid h3{font-size:1.15rem; margin-bottom:10px;}
.perf-table{width:100%; border-collapse:collapse;}
.perf-table td{padding:9px 0; border-bottom:1px solid var(--line); font-size:0.86rem; vertical-align:top;}
.perf-table td:first-child{color:var(--gray); width:46%;}
.perf-table td:last-child{font-family:var(--mono); font-size:0.81rem; color:var(--ink);}
.perf-subhead{margin-top:32px;}
.results-table th{padding:0 0 9px; border-bottom:1px solid var(--ink); font-size:0.78rem; font-weight:600; letter-spacing:0.03em; text-align:left; color:var(--gray); white-space:nowrap;}
.results-table td{padding-right:14px;}
.results-table td:first-child{width:auto;}
.results-table td:nth-child(2){font-family:var(--mono); font-size:0.78rem; color:var(--gray); white-space:nowrap;}
.results-table td:last-child{font-weight:500; color:var(--gold-deep); white-space:nowrap; padding-right:0;}
.results-table th:last-child, .results-table td:last-child{text-align:right;}
.results-note{margin:10px 0 0; max-width:56ch; font-size:0.82rem; color:var(--gray);}
.results-table th:nth-child(2), .results-table td:nth-child(2){text-align:right;}
.results-table th:last-child{color:var(--gold-deep);}
.results-table td:last-child{padding-left:20px; font-size:0.9rem;}
/* Spec sheet: rows grouped under ruled headers, words in Albert Sans, identifiers and figures in mono */
.spec-sheet .spec-group th{padding:0 0 9px; border-bottom:1px solid var(--ink); font-size:0.78rem; font-weight:600; letter-spacing:0.03em; text-align:left; color:var(--gray);}
.spec-sheet tbody + tbody .spec-group th{padding-top:32px;}
.spec-sheet td:last-child{font-family:inherit; font-size:0.88rem;}
.spec-sheet .code{font-family:var(--mono); font-size:0.92em; white-space:nowrap;}
/* Storage and use are instructions, not features: ruled rows without ticks */
.check-list.use-list li{padding-left:0; font-size:0.88rem;}
.check-list.use-list li::before{content:none;}

/* Finishes carousel */
.finishes{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:0;}
.finish-card{background:var(--paper); padding:12px; border:1px solid var(--line);}
.finish-stage{position:relative; aspect-ratio:3/4; background:#fff; overflow:hidden;}
.finish-stage img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; opacity:0; transition:opacity .25s ease;
}
.finish-stage img.is-active{opacity:1;}
.finish-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:30px; height:30px; padding:0; border:1px solid var(--line); border-radius:2px;
  background:rgba(255,255,255,0.92); color:var(--ink); font-size:1.15rem; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.finish-nav:hover{border-color:var(--gold); color:var(--gold);}
.finish-nav.prev{left:8px;}
.finish-nav.next{right:8px;}
.finish-foot{display:flex; align-items:center; justify-content:space-between; margin-top:10px;}
.finish-card em{font-style:normal; font-size:0.88rem; font-weight:600;}
/* 24px tap targets around 6px dots; the negative margin keeps the last dot on the card edge */
.finish-dots{display:flex; margin-right:-9px;}
.finish-dots button{
  position:relative; width:24px; height:24px; padding:0; border:none;
  background:none; cursor:pointer;
}
.finish-dots button::before{
  content:""; position:absolute; top:50%; left:50%; width:6px; height:6px; margin:-3px 0 0 -3px;
  border-radius:50%; background:#d5cdbc;
}
.finish-dots button[aria-current="true"]::before{background:var(--gold);}

/* Packaging matrix */
.pack-matrix{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:32px 0; background:var(--line); border:1px solid var(--line);}
.pack-card{background:#fff; padding:24px 20px; text-align:center;}
.pack-card img{height:100px; object-fit:contain; margin:0 auto 16px;}
.pack-qty{font-family:var(--mono); font-size:1.15rem; font-weight:500; color:var(--ink);}
.pack-name{font-weight:600; margin:6px 0 2px; font-size:0.92rem;}
.pack-sub{font-size:0.82rem; color:var(--gray);}

/* Stat row: four figures, static */
.statband{background:#fff; border-bottom:1px solid var(--line);}
.statband-row{display:grid; grid-template-columns:repeat(4,1fr); list-style:none; margin:0; padding:0;}
.statfig{
  display:flex; flex-wrap:wrap; align-items:baseline; column-gap:12px; row-gap:2px;
  padding:17px 24px; border-left:1px solid var(--line);
}
.statfig:first-child{padding-left:0; border-left:none;}
.statfig-num{font-family:var(--mono); font-size:1.02rem; color:var(--gold); font-weight:500; white-space:nowrap;}
.statfig-label{font-size:0.85rem; color:var(--gray);}

/* About */
.about-head{font-size:clamp(1.45rem,2.2vw,1.95rem); margin-bottom:0;}
.about-layout{display:grid; grid-template-columns:1fr 1.3fr; gap:56px; align-items:start;}
.about-text p:last-child{margin-bottom:0;}
.about-photo{width:100%; aspect-ratio:1809/845; object-fit:cover; margin-top:28px; background:var(--paper);}

/* Testimonial / visit */
.visit{
  background:var(--ink); color:#fff; padding:88px 0; border-bottom:none; position:relative; overflow:hidden;
}
/* Photos stretch to the text column's height so top and bottom edges align */
.visit-grid{display:grid; grid-template-columns:1fr 1.08fr; gap:56px; align-items:stretch;}
.visit-copy{display:flex; flex-direction:column; align-items:flex-start;}
.visit-copy .visit-link{margin-top:auto;}
.visit p{color:#c9c1b2;}
.visit-eyebrow{color:var(--gold-light); margin-bottom:16px;}
.visit-head{
  color:#fff; font-size:clamp(1.55rem,3.1vw,2.2rem); font-weight:600; line-height:1.18; letter-spacing:-0.02em;
  margin:0; text-wrap:balance;
}
.visit-head span{color:var(--gold-light);}
.visit-head + p{margin-top:22px;}
.visit-pull{color:#fff !important; font-size:1.05rem; font-weight:500; margin:6px 0 24px;}
.visit-link{
  display:inline-flex; align-items:center; gap:10px; color:var(--sand); text-decoration:none;
  font-weight:600; font-size:0.92rem; padding-bottom:4px; border-bottom:1px solid rgba(201,187,153,0.4);
}
.visit-link span{transition:transform .2s ease;}
.visit-link:hover{color:#fff; border-bottom-color:#fff;}
.visit-link:hover span{transform:translateX(2px);}
/* Tiles stay at or below ~half the 560px source width so they render crisp */
.visit-mosaic{display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:1fr 1fr; gap:8px; min-height:0; contain:size;}
.visit-mosaic img{
  width:100%; height:100%; min-height:0; object-fit:cover; display:block;
  filter:saturate(0.92); transition:filter .3s ease;
}
.visit-mosaic img:hover{filter:saturate(1.08);}


/* Comparison table */
table.compare-table{width:100%; border-collapse:collapse; background:#fff; margin-top:24px; border:1px solid var(--line);}
.compare-table th, .compare-table td{padding:14px 16px; border-bottom:1px solid var(--line); text-align:left; font-size:0.9rem;}
.compare-table th{background:var(--ink); color:#fff; font-weight:600; font-size:0.82rem; letter-spacing:0.02em;}
.compare-table td:first-child{background:var(--paper); color:var(--ink); font-weight:600;}
.compare-table th:nth-child(2){background:var(--gold); color:#fff;}
.compare-table td:nth-child(2){background:#f3eee2; color:var(--gold-deep); font-weight:600; border-left:3px solid var(--gold); border-right:3px solid var(--gold); border-bottom-color:#e4dac3;}
.compare-table tr:last-child td:nth-child(2){border-bottom:3px solid var(--gold);}
.compare-table th:nth-child(3){background:#d9d6d0; color:#5a554d;}
.compare-table td:nth-child(3){background:#fff; color:#7a746a;}
.compare-table tr:last-child td{border-bottom:none;}

/* Network */
.network-head{
  display:grid; grid-template-columns:1.25fr 1fr; gap:56px; align-items:start;
  padding-bottom:28px; border-bottom:1px solid var(--line);
}
.network-head h2{margin:0;}
.network-head p{margin:0;}
.network-grid{display:grid; grid-template-columns:repeat(3,1fr); margin-top:36px;}
.office{padding:0 36px; border-left:1px solid var(--line);}
.office:first-child{padding-left:0; border-left:none;}
.office:last-child{padding-right:0;}
.office h3{font-size:1.15rem; margin-bottom:8px;}
.office-role{font-size:0.88rem; color:var(--gold); margin-bottom:14px;}
.office-est{font-family:var(--mono); font-size:0.8rem; color:var(--ink); margin-left:6px;}
.office-addr{font-size:0.9rem; margin-bottom:12px;}
.office p{font-size:0.9rem;}
.office-contact{display:flex; flex-direction:column; gap:5px; margin-top:16px; font-family:var(--mono); font-size:0.82rem;}
.office-contact a{color:var(--gold); text-decoration:none; overflow-wrap:anywhere;}
.office-contact a:hover{text-decoration:underline;}


/* Contact */
.contact{background:var(--paper); color:var(--ink); border-bottom:none;}
.contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px;}
.contact ul{padding-left:20px; color:var(--gray);}
.contact-info{margin-top:28px; display:flex; flex-direction:column; gap:7px; color:var(--ink); font-size:0.94rem;}
.contact-info a{color:var(--gold-deep); text-decoration:none; font-weight:500;}
.contact-info a:hover{color:var(--ink); text-decoration:underline;}
.contact form{border:1px solid var(--line);}
.contact .check-list{margin:20px 0 0;}
.contact-small{margin:22px 0 0; font-size:0.84rem; color:var(--gray);}
.contact-small a{color:var(--gold-deep); font-weight:500;}
.label-optional{font-weight:400; color:var(--gray);}
.quote-band{background:var(--paper); border-bottom:none;}
.quote-band .cta-band-inner h2{margin:0 0 10px;}
.quote-band .cta-band-inner p{margin:0; max-width:560px; color:var(--gray);}
.quote-band .hero-actions{margin-top:0;}

/* Network sits on the dark ground, alternating with the light sections around it */
#network{background:var(--ink); border-bottom:none;}
#network h2, #network h3{color:#fff;}
#network p{color:#c9c1b2;}
#network .network-head{border-bottom-color:rgba(255,255,255,0.12);}
#network .office{border-left-color:rgba(255,255,255,0.12);}
#network .office-role{color:var(--gold-light);}
#network .office-est{color:#fff;}
#network .office-contact a{color:var(--sand);}
#network .office-contact a:hover{color:#fff;}
form{background:#fff; border-radius:2px; padding:32px; color:var(--ink);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
.form-row.full{grid-template-columns:1fr;}
label{display:block; font-size:0.82rem; font-weight:600; margin-bottom:6px; color:var(--ink);}
/* Field borders use --field, not --line: form controls need 3:1 against white */
input, select, textarea{
  width:100%; padding:10px 12px; border:1px solid var(--field); border-radius:2px; font-size:1rem; font-family:inherit; background:#fff;
}
input:focus, select:focus, textarea:focus{outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold);}
textarea{resize:vertical; min-height:80px;}
.form-note{font-size:0.84rem; color:var(--gray); margin-top:12px;}
.field-hint{margin:6px 0 0; font-size:0.8rem; line-height:1.4; color:var(--gray);}
.form-type{border:0; margin:0 0 20px; padding:0; min-width:0;}
.form-type legend{padding:0; margin-bottom:8px; font-size:0.82rem; font-weight:600; color:var(--ink);}
.type-options{display:flex; flex-wrap:wrap; gap:8px;}
.type-options label{
  flex:1 1 8rem; display:flex; align-items:center; gap:10px; margin:0; padding:12px 14px;
  border:1px solid var(--field); border-radius:2px; font-size:0.92rem; font-weight:500; cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.type-options input{width:auto; margin:0; padding:0; accent-color:var(--gold);}
.type-options input:focus{outline:none;}
.type-options label:has(input:checked){border-color:var(--gold); background:#f7f3ea; box-shadow:inset 0 0 0 1px var(--gold);}
.type-options label:has(input:focus-visible){outline:2px solid var(--gold); outline-offset:2px;}
.form-sent:focus{outline:none;}
.form-sent h3{font-size:1.15rem; margin-bottom:8px;}
.form-sent textarea{font-family:var(--mono); font-size:0.84rem; line-height:1.5; background:var(--paper); margin-bottom:16px;}
.form-sent-actions{display:flex; flex-wrap:wrap; gap:10px;}
/* The website field is a trap for bots, kept out of sight and out of the tab order */
.form-trap{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden;}

/* Footer */
footer{background:var(--ink); color:#9c9384; padding:56px 0 24px; font-size:0.88rem;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,0.08);}
.footer-title{margin:0 0 14px; color:#fff; font-size:0.88rem; font-weight:600; line-height:1.55; letter-spacing:0;}
.footer-grid ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;}
.footer-grid a{text-decoration:none; color:#9c9384;}
.footer-grid a:hover{color:#fff;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:20px; flex-wrap:wrap; gap:12px; font-size:0.8rem;}
.footer-legal{display:flex; flex-wrap:wrap; gap:8px 18px; list-style:none; padding:0; margin:0;}
.footer-legal a{color:#9c9384; text-decoration:none; white-space:nowrap;}
.footer-legal a:hover{color:#fff;}
.footer-logo{height:30px; width:auto; margin-bottom:16px;}
.footer-about{color:#c9c1b2; font-size:0.9rem; max-width:280px;}


/* Product page (ffp2.html) */
.sec-head{max-width:680px;}
.sec-head h2{margin-bottom:10px;}
.sec-head p{margin:0; max-width:56ch;}
.sec-head + .layers-grid{margin-top:36px;}
.check-list{list-style:none; margin:0 0 26px; padding:0; border-top:1px solid var(--line);}
.check-list li{position:relative; padding:12px 0 12px 32px; border-bottom:1px solid var(--line); font-size:0.9rem; color:var(--ink); line-height:1.45;}
.check-list li::before{
  content:""; position:absolute; left:4px; top:17px; width:11px; height:6px;
  border-left:2px solid var(--gold); border-bottom:2px solid var(--gold); transform:rotate(-45deg);
}
#logistics .pack-matrix{margin-bottom:0;}
.bulk-table{display:grid; grid-template-columns:auto repeat(3,1fr); margin-top:24px; background:var(--ink); color:#fff;}
.bulk-label{display:flex; align-items:center; padding:22px 28px; background:var(--gold); font-family:var(--mono); font-size:0.78rem; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; white-space:nowrap;}
.bulk-cell{display:flex; flex-direction:column; gap:4px; padding:18px 24px; border-left:1px solid rgba(255,255,255,0.12);}
.bulk-label + .bulk-cell{border-left:none;}
.bulk-name{font-size:0.84rem; color:var(--gold-light);}
.bulk-qty{font-family:var(--mono); font-size:1.25rem; font-weight:500; color:#fff; white-space:nowrap;}
.table-scroll{overflow-x:auto;}

/* Product page hero: title on its own row, then copy beside the packaging carousel */
.page-hero-title{padding-top:44px; padding-bottom:8px;}
.page-hero h1{font-size:clamp(1.8rem,3.3vw,2.6rem); margin:0; text-wrap:balance;}
.page-hero h1 span{display:inline;}
.page-hero-intro{
  display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center;
  margin-top:22px; padding-top:22px; border-top:1px solid rgba(36,31,24,0.12);
}
.page-hero-intro p{margin:0; max-width:640px;}
.page-hero-intro .hero-actions{margin-top:0; flex-wrap:nowrap;}
.page-hero-plain .page-hero-title{padding-bottom:48px;}
.page-hero-intro-text{display:block;}
.page-hero-intro-text p{max-width:56ch;}

/* Certifications page */
.cert-facts{margin-top:22px;}
.cert-facts td:first-child{width:42%;}
.cert-steps{list-style:none; margin:32px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.cert-steps li{background:#fff; padding:26px 24px;}
.cert-step-num{display:block; font-family:var(--mono); font-size:0.78rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--gold); margin-bottom:12px;}
.cert-steps h3{font-size:1.05rem; margin:0 0 8px;}
.cert-steps p{margin:0; font-size:0.9rem; color:var(--gray);}
table.doc-table{width:100%; border-collapse:collapse; margin-top:28px; border-top:1px solid var(--ink);}
.doc-table th{padding:12px 16px 12px 0; font-size:0.78rem; font-weight:600; letter-spacing:0.03em; text-align:left; color:var(--gray); border-bottom:1px solid var(--line); white-space:nowrap;}
.doc-table td{padding:16px 16px 16px 0; border-bottom:1px solid var(--line); font-size:0.86rem; vertical-align:top;}
.doc-table td strong{display:block; font-weight:600; font-size:0.95rem; color:var(--ink);}
.doc-table td > span{display:block; margin-top:2px; font-size:0.8rem; color:var(--gray);}
.doc-table td:nth-child(2){font-family:var(--mono); font-size:0.82rem; white-space:nowrap;}
.doc-table td:last-child{text-align:right; white-space:nowrap; padding-right:0;}
.doc-table tr[id]{scroll-margin-top:130px;}
.doc-link{font-weight:600; font-size:0.86rem; color:var(--gold); text-decoration:none;}
.doc-link:hover{color:var(--gold-deep);}
.doc-link + .doc-link{margin-left:18px;}
.doc-link-quiet{color:var(--gray); font-weight:500;}
.check-list a{color:var(--gold-deep); font-weight:500;}
.doc-note{margin:14px 0 0; font-size:0.8rem; color:var(--gray);}
.doc-note a{color:var(--gold); font-weight:500;}
.verify-grid{margin-top:0; align-items:center;}
.verify-grid .check-list{margin:0;}

/* FAQ page: topic list left, grouped questions right */
.faq-layout{display:grid; grid-template-columns:230px 1fr; gap:64px; align-items:start;}
.faq-nav{position:sticky; top:130px;}
.faq-nav-title{font-family:var(--mono); font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); margin-bottom:14px;}
.faq-nav ul{list-style:none; margin:0; padding:0; border-left:1px solid var(--line);}
.faq-nav a{display:block; padding:8px 0 8px 16px; margin-left:-1px; border-left:2px solid transparent; font-size:0.88rem; color:var(--gray); text-decoration:none;}
.faq-nav a:hover{color:var(--ink); border-left-color:var(--gold);}
.faq-group{scroll-margin-top:130px;}
.faq-group + .faq-group{margin-top:56px;}
.faq-group h2{font-size:1.45rem; margin:0 0 14px; padding-bottom:14px; border-bottom:1px solid var(--ink);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 0; cursor:pointer; list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary h3{margin:0; font-size:1rem; font-weight:600; line-height:1.4; color:var(--ink);}
.faq-item summary::after{content:"+"; flex-shrink:0; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:2px; font-size:1.1rem; color:var(--gold); transition:background-color .2s ease, border-color .2s ease, color .2s ease;}
.faq-item[open] summary::after{content:"×"; background:var(--ink); border-color:var(--ink); color:#fff;}
.faq-item summary:hover h3{color:var(--gold-deep);}
.faq-answer{padding:0 52px 22px 0; color:var(--gray); font-size:0.94rem;}
.faq-answer > *{max-width:56ch;}
.faq-answer p{margin:0 0 10px;}
.faq-answer p:last-child{margin-bottom:0;}
.faq-answer ol, .faq-answer ul{margin:0 0 12px; padding-left:20px;}
.faq-answer li{margin-bottom:6px;}
.faq-answer a{color:var(--gold); font-weight:500;}

/* Product hero (ffp2.html): copy beside the white pouch, with the marks printed on it annotated */
.product-hero-inner{
  display:grid; grid-template-columns:minmax(0,23.5rem) minmax(0,1fr); column-gap:40px; align-items:center;
  padding-block:36px 44px;
}
.product-hero-inner .crumbs{grid-column:1 / -1; margin-bottom:26px;}
.product-hero h1{font-size:clamp(2rem, 1.2rem + 1.9vw, 2.5rem); margin-bottom:20px; text-wrap:balance;}
/* The gold sentence may only break as "Built to be worn / all day." */
.product-hero h1 span span{display:inline; white-space:nowrap;}
.product-hero-copy p{margin:0;}
.product-hero-media{container-type:inline-size;}

/* The drawing keeps the 538 x 586 grid of its SVG, so pouches, leaders and dots scale as one.
   Notes sit in a fixed column; each one's top matches the height where its leader leaves the drawing. */
.pack-marks{margin:0; display:grid; grid-template-columns:minmax(0,1fr) 12.5rem;}
.pack-marks-drawing{position:relative; aspect-ratio:538/586;}
.pack-marks-drawing img{
  position:absolute; width:67.472%; height:auto;
  filter:drop-shadow(0 18px 20px rgba(60,50,30,0.2));
}
.pack-marks-black{left:0; top:11.945%;}
.pack-marks-white{left:24.164%; top:6.826%;}
.pack-marks-lines{position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
.pack-marks-lines path{fill:none; stroke:var(--gold); stroke-width:1; vector-effect:non-scaling-stroke;}
.pack-mark{
  position:absolute; left:var(--x); top:var(--y); width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border-radius:50%; background:var(--gold); box-shadow:0 0 0 2px #fff; font-size:0;
}
.pack-marks-notes ol{position:relative; height:100%; margin:0; padding:0; list-style:none;}
/* The title's line box is 1.24rem, so pulling the note up by half puts the leader through its first line */
.pack-marks-notes li{position:absolute; left:0; right:0; top:var(--y); margin-top:-0.62rem; padding-left:22px;}
.pack-marks-notes li::before{content:""; position:absolute; left:0; top:0.62rem; width:14px; height:1px; background:var(--gold);}
.pack-marks-notes strong{display:block; font-size:0.9rem; font-weight:600; line-height:1.24rem; color:var(--ink);}
.pack-marks-notes li > span{display:block; margin-top:3px; font-size:0.82rem; line-height:1.45; color:var(--gray);}
.pack-marks-notes .code{font-family:var(--mono); font-size:0.95em; white-space:nowrap;}

/* Too narrow for notes beside the drawing: the leaders give way to numbered markers and the notes list below.
   The drawing is widened and pulled up so the pouches (the first 493 units) fill the width and the headroom drops out;
   the empty leader margin runs past the edge, where the hero's overflow hides it. */
@container (width < 36rem){
  .pack-marks{display:block;}
  .pack-marks-drawing{
    --w:min(100%, 21rem);
    width:calc(var(--w) * 538 / 493);
    margin:calc(var(--w) * -40 / 493) 0 0 calc((100% - var(--w)) / 2);
  }
  .pack-marks-lines{display:none;}
  .pack-mark, .pack-marks-notes li::before{
    display:flex; align-items:center; justify-content:center; width:1.45rem; height:1.45rem;
    border-radius:50%; background:var(--gold); color:#fff;
    font-family:var(--mono); font-size:0.78rem; font-weight:500; line-height:1;
  }
  /* Markers shrink with the drawing so they stay in the clear space beside their marks */
  .pack-mark{
    --d:clamp(1.15rem, 6.5cqi, 1.45rem);
    left:var(--nx); top:var(--ny); width:var(--d); height:var(--d); margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
    box-shadow:0 0 0 2px #fff;
  }
  .pack-marks-notes{margin-top:30px;}
  .pack-marks-notes ol{height:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 24px; counter-reset:mark;}
  .pack-marks-notes li{position:relative; top:auto; margin:0; padding-left:2.1rem; counter-increment:mark;}
  .pack-marks-notes li::before{content:counter(mark); top:-0.1rem;}
}
@container (width < 26rem){
  .pack-marks-notes ol{grid-template-columns:minmax(0,1fr); gap:14px;}
}

/* Overview: compact reasons on the left, finishes carousels on the right, one row */
.overview-grid{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr; grid-auto-flow:column; column-gap:48px; row-gap:20px;}
/* Columns dissolve into the grid so both headings share row 1 and stay level at any width */
.overview-reasons, .overview-finishes{display:contents;}
.overview-reasons .why-grid{grid-template-columns:1fr 1fr; margin-top:0;}
.overview-reasons .why-card{padding:18px 18px 16px;}
.overview-reasons .why-fig{font-size:1.05rem; margin-bottom:8px;}
.overview-reasons .why-card h3{font-size:0.9rem; margin-bottom:6px;}
.overview-reasons .why-card p{font-size:0.86rem; line-height:1.5;}
.finishes-title{font-size:clamp(1.5rem,2.6vw,2.1rem); margin-bottom:10px;}
.overview-finishes .finishes{margin-top:0; align-items:stretch;}
.overview-finishes .finish-card{display:flex; flex-direction:column;}
.overview-finishes .finish-stage{flex:1; aspect-ratio:auto; min-height:240px;}

/* Packaging: every product rendered at the same height so formats read as equal */
#logistics .pack-card{padding:28px 20px 24px;}
.pack-visual{height:210px; display:flex; align-items:flex-end; justify-content:center; margin-bottom:18px;}
.pack-visual img{height:200px; width:auto; max-width:100%; object-fit:contain; margin:0; filter:drop-shadow(0 10px 12px rgba(60,50,30,0.16));}
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:32px; background:var(--line); border:1px solid var(--line);}
.why-card{background:#fff; padding:26px 22px;}
.why-fig{display:block; font-family:var(--mono); font-size:1.35rem; font-weight:500; color:var(--gold); line-height:1.15; margin-bottom:14px; white-space:nowrap;}
.why-card h3{font-size:1.02rem; margin-bottom:8px; line-height:1.3;}
.why-card p{font-size:0.86rem; margin:0; line-height:1.55;}
.nav-links a[aria-current="page"]{color:var(--ink); box-shadow:inset 0 -2px 0 var(--gold); padding-bottom:4px;}
.crumbs{display:flex; align-items:center; gap:8px; margin-bottom:22px; font-size:0.8rem; color:var(--gray);}
.crumbs a{color:var(--gray); text-decoration:none;}
.crumbs a:hover{color:var(--gold);}
.crumbs [aria-current="page"]{color:var(--ink); font-weight:500;}
.subnav{
  position:sticky; top:78px; z-index:40;
  background:rgba(255,255,255,0.96); border-bottom:1px solid var(--line);
}
.subnav ul{display:flex; gap:30px; list-style:none; margin:0 auto; padding:0 24px; max-width:1140px; overflow-x:auto; overflow-y:hidden;}
.subnav a{
  display:block; padding:15px 0; font-size:0.85rem; font-weight:500; color:var(--gray);
  text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.subnav a:hover{color:var(--ink); border-bottom-color:var(--gold);}
/* A gold rule slides under the section being read; js/nav.js sets its position and width */
.subnav ul{position:relative;}
.subnav ul::after{
  content:""; position:absolute; left:0; bottom:0; width:1px; height:2px; background:var(--gold);
  transform-origin:0 0; transform:translateX(var(--ink-x, 0px)) scaleX(var(--ink-w, 0));
  opacity:0; pointer-events:none; transition:transform .45s cubic-bezier(.16,1,.3,1), opacity .2s ease;
}
.subnav ul.has-current::after{opacity:1;}
.subnav a[aria-current]{color:var(--ink);}
.product-page section[id]{scroll-margin-top:136px;}
.sec-head.sec-head-wide{max-width:none;}
.cta-band{background:var(--ink); color:#fff; border-bottom:none;}
.cta-band-inner{display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;}
.cta-band h2{color:#fff; margin:0 0 10px;}
.cta-band p{color:#c9c1b2; margin:0; max-width:560px;}
.cta-band .hero-actions{margin-top:0;}
.btn-cta-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,0.35);}
.btn-cta-ghost:hover{border-color:var(--sand); color:var(--sand);}

/* Below 1100px the annotated pouch no longer fits beside the copy at a size its notes can follow,
   so it moves under it, set to the right so copy and drawing read as one diagonal */
@media (max-width: 1100px){
  .product-hero-inner{grid-template-columns:minmax(0,1fr);}
  .product-hero-inner .crumbs{margin-bottom:22px;}
  .product-hero-copy{max-width:40rem;}
  .product-hero-media{width:100%; max-width:38rem; margin:36px 0 0 auto;}
}

/* Full-size links stop fitting at 976px, so tighten just above that */
@media (max-width: 985px){
  .nav-links{gap:18px;}
  .nav-links a{font-size:0.92rem;}
}

/* Menu button and the Amazon menu item only exist on small screens */
.nav-toggle, .nav-links .nav-mobile-only{display:none;}

/* Even tightened, the links need about 945px alongside both CTAs, so they move into a drop-down menu */
@media (max-width: 950px){
  .nav{position:relative;}
  .nav-cta{margin-left:auto;}
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0; padding:4px 24px 12px;
    background:#fff; border-bottom:1px solid var(--line); box-shadow:0 16px 24px -18px rgba(36,31,24,0.3);
  }
  .nav.is-open .nav-links{display:flex;}
  .nav-links li + li{border-top:1px solid var(--line);}
  .nav .nav-links a{
    display:block; height:auto; padding:14px 0; font-size:1rem; font-weight:500;
    background:none; border:none; color:var(--gray); text-align:left;
  }
  .nav-links a[aria-current="page"]{color:var(--ink); box-shadow:none; padding-bottom:14px;}
  .nav-links a:hover{color:var(--gold);}
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
    width:42px; height:42px; padding:0; border:1px solid var(--line); border-radius:2px;
    background:#fff; cursor:pointer;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    display:block; width:18px; height:1.5px; background:var(--ink); position:relative; transition:transform .2s ease, background .2s ease;
  }
  .nav-toggle span::before, .nav-toggle span::after{content:""; position:absolute; left:0;}
  .nav-toggle span::before{top:-6px;}
  .nav-toggle span::after{top:6px;}
  .nav.is-open .nav-toggle span{background:transparent;}
  .nav.is-open .nav-toggle span::before{transform:translateY(6px) rotate(45deg);}
  .nav.is-open .nav-toggle span::after{transform:translateY(-6px) rotate(-45deg);}
}

/* On phones the Amazon link moves into the menu so the header fits */
@media (max-width: 560px){
  body > header .nav{gap:10px; padding:12px 16px;}
  .logo img{height:26px;}
  .nav-cta .nav-retail{display:none;}
  .nav-links .nav-mobile-only{display:block;}
  .nav-links{padding:4px 16px 12px;}
  .nav .btn{height:38px;}
  .nav-toggle{width:38px; height:38px;}
}

/* Smallest phones */
@media (max-width: 360px){
  body > header .nav{gap:8px; padding:12px 12px;}
  .logo img{height:22px;}
  .nav-cta .btn{padding:0 10px; font-size:0.78rem;}
}

@media (max-width: 880px){
  .nav{padding:14px 20px;}
  .nav-cta .btn{height:38px; padding:0 13px; font-size:0.82rem;}
  .nav-toggle{width:38px; height:38px;}
  .nav-cta{gap:8px;}
  .pack-matrix, .footer-grid{grid-template-columns:repeat(2,1fr);}
  .visit{padding:64px 0;}
  .visit-grid{grid-template-columns:1fr; gap:36px;}
  .cert-doc{justify-self:center; max-width:340px;}
  .visit-mosaic{gap:6px; contain:none; grid-template-rows:auto;}
  .visit-mosaic img{height:auto; aspect-ratio:4/3;}
  .about-layout{grid-template-columns:1fr; gap:24px;}
  .subnav{top:66px;}
  /* Fade the right edge so the scrollable section list reads as scrollable */
  .subnav ul{
    padding-right:48px;
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 48px), transparent);
    mask-image:linear-gradient(to right, #000 calc(100% - 48px), transparent);
  }
  .product-page section[id]{scroll-margin-top:120px;}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .overview-grid{grid-template-columns:minmax(0,1fr); grid-template-rows:none; grid-auto-flow:row; row-gap:20px;}
  .overview-finishes .sec-head{margin-top:28px;}
  .overview-finishes .finish-stage{aspect-ratio:3/4; flex:none;}
  .cert-steps{grid-template-columns:1fr;}
  .faq-layout{grid-template-columns:1fr; gap:32px;}
  .faq-nav{position:static;}
  .faq-nav ul{display:flex; flex-wrap:wrap; gap:8px; border-left:none;}
  .faq-nav a{padding:7px 12px; margin:0; border:1px solid var(--line); border-radius:2px; font-size:0.82rem;}
  .faq-nav a:hover{border-color:var(--gold);}
  .faq-answer{padding-right:0;}
  .bulk-table{grid-template-columns:1fr;}
  .bulk-label{padding:12px 24px;}
  .bulk-cell{flex-direction:row; justify-content:space-between; align-items:baseline; gap:16px; border-left:none; border-top:1px solid rgba(255,255,255,0.12);}
  .bulk-label + .bulk-cell{border-top:none;}
  .page-hero-intro{grid-template-columns:1fr; gap:20px;}
  .page-hero-intro .hero-actions{flex-wrap:wrap;}
  .pack-visual{height:160px;}
  .pack-visual img{height:150px;}
  .statband-row{grid-template-columns:1fr 1fr;}
  .statfig{padding:14px 16px;}
  .statfig:nth-child(odd){padding-left:0; border-left:none;}
  .statfig:nth-child(n+3){border-top:1px solid var(--line);}
  .cert-grid, .layers-grid, .contact-grid, .spec-grid{grid-template-columns:1fr;}
  /* The form is the task on the contact page, so it comes before the benefits list */
  .contact-grid > form{order:-1;}
  .layers-media img{max-height:420px;}
  .layer-stage{max-width:260px;}
  .layer-explorer .layer-stage img{max-height:none;}
  .perf-grid{grid-template-columns:1fr; gap:32px;}
  .network-head{grid-template-columns:1fr; gap:20px;}
  .network-grid{grid-template-columns:1fr; gap:28px;}
  .office{padding:0; border-left:none;}
  .office + .office{border-top:1px solid var(--line); padding-top:28px;}
  #network .office + .office{border-top-color:rgba(255,255,255,0.12);}
  .hero-inner{grid-template-columns:1fr; gap:32px; min-height:0; padding-block:56px;}
  .box-stage{height:auto;}
  .box-stage img{max-height:320px;}
}

/* Tablet portrait: the phone stack wastes the width, so paired layouts return as two or three columns */
@media (min-width: 700px) and (max-width: 880px){
  .hero-inner{grid-template-columns:1.1fr 0.9fr; gap:28px;}
  .box-stage img{max-height:360px;}
  .statband-row{grid-template-columns:repeat(4,1fr);}
  .statfig:nth-child(n){padding-left:16px; border-left:1px solid var(--line); border-top:none;}
  .statfig:first-child{padding-left:0; border-left:none;}
  .visit-mosaic{grid-template-columns:repeat(4,1fr);}
  .cert-grid{grid-template-columns:1.4fr 1fr; gap:36px;}
  .cert-doc{justify-self:end; max-width:300px;}
  .layers-grid{grid-template-columns:0.8fr 1.2fr; gap:36px;}
  .cert-steps{grid-template-columns:repeat(3,1fr);}
  .cert-steps li{padding:22px 18px;}
  .network-grid{grid-template-columns:repeat(3,1fr); gap:0;}
  .office{padding:0 16px; border-left:1px solid var(--line);}
  .office:first-child{padding-left:0; border-left:none;}
  .office:last-child{padding-right:0;}
  .office + .office{border-top:none; padding-top:0;}
  .office-contact{font-size:0.78rem;}
  .pack-matrix{grid-template-columns:repeat(4,1fr);}
  #logistics .pack-card{padding:24px 12px 20px;}
  .pack-visual{height:130px;}
  .pack-visual img{height:120px;}
  .overview-finishes .finish-stage{aspect-ratio:1/1;}
  .office-est{display:block; margin:4px 0 0;}
  .layer-list .layer-row{row-gap:2px;}
  .layer-list .layer-desc{flex-basis:100%; padding-left:40px;}
}

@media (max-width: 560px){
  .why-grid, .overview-reasons .why-grid{grid-template-columns:1fr;}
  .finishes{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
  .finish-card{padding:8px;}
  .overview-finishes .finish-stage{min-height:0;}
  .form-row{grid-template-columns:1fr;}
  form{padding:24px 20px;}
  /* The phone header is 62px tall, so the in-page menu docks right under it */
  .subnav{top:62px;}
  /* Comparison table: tighter cells so all three columns fit a phone width */
  .compare-table th, .compare-table td{padding:10px 8px; font-size:0.82rem; hyphens:auto;}
  .product-hero-inner{padding-block:28px 36px;}
  /* Actions fill the width so they sit squarely under the thumb */
  .hero-actions .btn{flex:1 1 100%; justify-content:center; text-align:center;}
  .cert-doc{max-width:280px;}
  .type-options{flex-direction:column;}
  .type-options label{flex:none;}
  /* Carousel arrows drop to the bottom corners so they stop covering the respirator */
  .finish-nav{top:auto; bottom:6px; transform:none;}
  .finish-nav.prev{left:6px;}
  .finish-nav.next{right:6px;}
  .footer-grid > div:first-child{grid-column:1 / -1;}
  /* Layer rows: the description always drops under the name, aligned with it */
  .layer-list .layer-row{row-gap:2px;}
  .layer-list .layer-desc{flex-basis:100%; padding-left:40px;}
  /* Document table stacks so the Request and View actions stay on screen */
  .doc-table, .doc-table tbody, .doc-table tr, .doc-table td{display:block;}
  .doc-table tr:first-child{display:none;}
  .doc-table tr{padding:16px 0; border-bottom:1px solid var(--line);}
  .doc-table td{padding:0; border:none;}
  .doc-table td + td{margin-top:8px;}
  .doc-table td:nth-child(2){white-space:normal;}
  .doc-table td:last-child{text-align:left;}
  /* Spec sheet rows stack, label above value */
  .spec-sheet, .spec-sheet tbody, .spec-sheet tr, .spec-sheet th, .spec-sheet td{display:block;}
  .spec-sheet tr:not(.spec-group){padding:10px 0; border-bottom:1px solid var(--line);}
  .spec-sheet td{padding:0; border:none;}
  .spec-sheet td:first-child{width:auto; margin-bottom:2px; font-size:0.78rem;}
}

/* Touch screens: small controls grow to comfortable tap sizes */
@media (pointer: coarse){
  .finish-nav{width:44px; height:44px;}
  .finish-dots{margin-right:-13px;}
  .finish-dots button{width:32px; height:44px;}
  .footer-legal a, .office-contact a{display:inline-block; padding-block:8px;}
  .office-contact{gap:0;}
  .logo, .nav-retail{min-height:38px;}
  .nav-retail{display:inline-flex; align-items:center;}
  .footer-grid ul{gap:0;}
  .footer-grid a{display:inline-block; padding-block:11px;}
  .crumbs a, .doc-link{display:inline-block; padding-block:12px; margin-block:-12px;}
  .contact-info a{display:inline-block; padding-block:6px; margin-block:-6px;}
}

/* Phones held sideways: two sticky bars would cover a third of the screen, so the in-page menu scrolls away */
@media (max-height: 500px) and (orientation: landscape){
  .subnav{position:static;}
}

/* Motion
   One authored moment, the homepage entrance. Content below the first screen settles in as it is first seen.
   Everything else explains a state change or a navigation.
   Movement is left out under prefers-reduced-motion; colour-only feedback stays. */

/* Link colours ease instead of snapping */
.nav-links a, .nav-retail, .subnav a, .faq-nav a, .crumbs a, .doc-link, .footer-grid a, .footer-legal a, .office-contact a, .contact-info a{
  transition:color .15s ease, border-color .15s ease;
}

/* Arriving from a link on a document row or FAQ topic: a brief tint marks where it landed */
.doc-table tr:target{animation:target-tint 2s ease-out;}
@keyframes target-tint{0%, 35%{background-color:rgba(168,146,94,0.12);} 100%{background-color:transparent;}}
.faq-group:target > h2{animation:target-rule 2s ease-out;}
@keyframes target-rule{0%, 35%{color:var(--gold-deep); border-bottom-color:var(--gold);}}

@media (prefers-reduced-motion: no-preference){
  /* Page to page: the header holds still while the page content crossfades */
  @view-transition{navigation:auto;}
  body > header{view-transition-name:site-header;}
  ::view-transition-old(root){animation-duration:.12s;}
  ::view-transition-new(root){animation-duration:.22s;}

  /* Homepage entrance, first page view of a session only: the script in index.html's head sets .intro.
     The headline lines lift into place, the products come into focus,
     and the spec strip feeds in left to right like a printed label. */
  .intro .hero h1 span{animation:intro-line .6s cubic-bezier(.16,1,.3,1) backwards;}
  .intro .hero h1 span:nth-child(2){animation-delay:.06s;}
  .intro .hero h1 span:nth-child(3){animation-delay:.12s;}
  .intro .hero-inner p{animation:intro-rise .45s cubic-bezier(.16,1,.3,1) .26s backwards;}
  .intro .hero-inner .hero-actions{animation:intro-rise .45s cubic-bezier(.16,1,.3,1) .32s backwards;}
  .intro .hero-products img{animation:intro-focus .7s cubic-bezier(.16,1,.3,1) .08s backwards;}
  .intro .hero-products::after{animation:intro-fade .5s ease-out .35s backwards;}
  .intro .hero-spec-codes{animation:intro-feed .5s cubic-bezier(.65,0,.35,1) .35s backwards;}

  /* FAQ answers open to their height and close a little faster */
  .faq-item{interpolate-size:allow-keywords;}
  .faq-item::details-content{block-size:0; overflow:clip; transition:block-size .2s cubic-bezier(.16,1,.3,1), content-visibility .2s allow-discrete;}
  .faq-item[open]::details-content{block-size:auto; transition-duration:.32s;}

  /* Contact form: rows a request type brings in, and the confirmation panel, settle into place */
  .form-sent, .is-entering{animation:intro-rise .3s cubic-bezier(.16,1,.3,1);}
}
/* Small screens: the menu unrolls from the header edge and closes instantly */
@media (max-width: 950px) and (prefers-reduced-motion: no-preference){
  .nav.is-open .nav-links{animation:menu-drop .24s cubic-bezier(.16,1,.3,1);}
}
@media (prefers-reduced-motion: reduce){
  .subnav ul::after{transition:opacity .2s ease;}
}

/* Scroll entrances: js/nav.js marks content below the first screen .is-pending, then .is-revealed as it comes
   into view, with --reveal-delay staggering whatever arrives together. Text lifts a few pixels as it fades in;
   photos, the certificate, ruled rows and table rows only fade, so nothing sweeps across the page.
   Screen only, so a printed page never has hidden content. */
@media screen and (prefers-reduced-motion: no-preference){
  .is-pending{opacity:0;}
  .is-revealed{animation:reveal-rise .5s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0s) backwards;}
  /* Cells of the hairline grids stay put so the rules between them never open up; their contents rise instead */
  :is(.why-card, .cert-steps li, .pack-card).is-pending{opacity:1;}
  :is(.why-card, .cert-steps li, .pack-card).is-pending > *{opacity:0;}
  :is(.why-card, .cert-steps li, .pack-card).is-revealed{animation:none;}
  :is(.why-card, .cert-steps li, .pack-card).is-revealed > *{animation:reveal-rise .5s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0s) backwards;}
  /* A moving table row would also briefly widen the scroll box around its table */
  .is-revealed:where(.about-photo, .cert-doc-frame, .visit-mosaic img, .check-list li, .cert-list li, .layer-row, .feature, .faq-item, .bulk-table, tr){animation-name:intro-fade; animation-timing-function:ease-out;}
}
@keyframes intro-line{from{opacity:0; transform:translateY(0.15em);}}
@keyframes intro-rise{from{opacity:0; transform:translateY(4px);}}
@keyframes intro-fade{from{opacity:0;}}
@keyframes intro-focus{
  from{opacity:0; transform:scale(1.01); filter:blur(3px) drop-shadow(0 14px 18px rgba(60,50,30,0));}
  to{opacity:1; transform:none; filter:blur(0) drop-shadow(0 14px 18px rgba(60,50,30,0.22));}
}
@keyframes intro-feed{from{clip-path:inset(0 100% 0 0);} to{clip-path:inset(0 0 0 0);}}
@keyframes reveal-rise{from{opacity:0; transform:translateY(6px);}}
@keyframes menu-drop{from{clip-path:inset(0 0 100% 0);} to{clip-path:inset(0 0 -40px 0);}}