/* bodaq.us: partial rolls of Bodaq interior film, in the main Bodaq branding.
   Numbered sections and animated line icons. Layout and motion are this site's own; the colours are bodaq.com's (the --bq-* tokens below): white and warm grey
   surfaces, Bodaq teal as the working accent, charcoal as the only dark surface, and the logo amber only
   in the logo and in the accent part of the line icons (as bodaq.com's icons do).
   Filled buttons and fills that carry white text use --accent-fill (#07806e): white on brand teal is
   only 3.6:1. Single light theme by design. Tokens first; everything below uses them.
   Typography is NOT set here: assets/css/bodaq-type.css (the shared Bodaq type kit, loaded before
   this file) sets the font, sizes, weights, line heights and case, matched to bodaq.com. Rules below
   only set colour, spacing and layout; where a role has no kit class they use the kit's --t-* tokens.
   Do not add font-family, letter-spacing or raw px font sizes here. */
:root{
  /* Bodaq brand tokens: the same values as bodaq.com */
  --bq-teal:#099883;--bq-teal-text:#07806e;--bq-charcoal:#222021;--bq-amber:#de992a;
  --bq-heading:#333333;--bq-body:#5c5b5b;--bq-body-2:#656565;
  --bq-surface:#ffffff;--bq-warm:#f6f5f4;--bq-border:#e4e2e2;--bq-mint:#c8faeb;--bq-tint:#dfede9;
  /* two shades the token file does not have, derived from it (contrast checked): teal-deep for hovers,
     teal surfaces under dimmed white text, and teal text where the background is not plain white (warm
     grey 6.0:1, mint 5.7:1; #07806e is only 4.46:1 on the warm grey); amber-light for the icon accent on
     teal and charcoal (amber 40% on white, as bodaq.com's light icons) */
  --bq-teal-deep:#066a5c;--bq-amber-light:#f2d6aa;

  /* this site's colour roles, mapped to the tokens */
  --paper:var(--bq-surface);--white:#ffffff;--wash:var(--bq-warm);--wash2:#edebeb;
  --ink:var(--bq-heading);--soft:var(--bq-body);--mute:var(--bq-body-2);
  --line:var(--bq-border);--line2:#d4d2d2;--dark:var(--bq-charcoal);--dark2:#2e2c2d;
  --accent:var(--bq-teal);--accent-fill:var(--bq-teal-text);--accent-hover:var(--bq-teal-deep);--accent-ink:var(--bq-teal-text);--accent-soft:var(--bq-mint);
  --accent-t:rgba(9,152,131,.10);--accent-t2:rgba(9,152,131,.18);
  --ico-accent:var(--bq-amber);--glow2:rgba(223,237,233,.35);
  --maxw:1320px;--px:clamp(16px,4vw,40px);--py:clamp(56px,7vw,96px);
  --r:10px;--shadow:0 30px 70px -40px rgba(34,32,33,.35);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0}
p{margin:0;color:var(--soft)}
p+p{margin-top:14px}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--bq-mint);color:var(--bq-heading)}
.sec.dark :focus-visible,.site-foot :focus-visible,.clbar :focus-visible{outline-color:var(--bq-mint)}
/* teal text on the warm grey and on the hero glow takes the deeper teal (AA); on plain white it is #07806e */
.sec.wash,.hero,.calc-out,.cutlist,.card.here,.navmobpanel{--accent-ink:var(--bq-teal-deep)}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px}
.skip:focus{top:12px}
.wrap{max-width:var(--maxw);margin:0 auto}
.ulink{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(7,128,110,.35)}
.ulink:hover{text-decoration-color:currentColor}

/* sections: warm radial washes, alternating */
.sec{position:relative;padding:var(--py) var(--px);background-color:var(--paper);background-image:radial-gradient(ellipse at 88% 8%,var(--accent-t),transparent 42%),radial-gradient(ellipse at 6% 96%,var(--glow2),transparent 40%)}
.sec.wash{background-color:var(--wash);background-image:radial-gradient(ellipse at 10% 10%,var(--accent-t),transparent 42%),radial-gradient(ellipse at 92% 92%,var(--glow2),transparent 40%)}
.sec.dark{background-color:var(--dark);color:#fff;background-image:radial-gradient(ellipse at 85% 15%,rgba(9,152,131,.30),transparent 45%),radial-gradient(ellipse at 10% 90%,rgba(200,250,235,.08),transparent 45%)}
.sec.dark h2,.sec.dark h3,.sec.dark b{color:#fff}
.sec.dark p{color:rgba(255,255,255,.74)}
.sec>.wrap{position:relative}
.kicker{margin:0 0 14px;color:var(--accent-ink);display:flex;align-items:center;gap:12px}
.kicker .no{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 5px;border-radius:999px;border:1px solid var(--accent);font-variant-numeric:tabular-nums}
.sec.dark .kicker{color:var(--accent-soft)}.sec.dark .kicker .no{border-color:var(--accent-soft)}
.lede{color:var(--soft);max-width:66ch}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.sec-head>div{max-width:780px}
.sec-head p.lede{margin-top:14px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
@media(max-width:940px){.two{grid-template-columns:1fr}}
.note{color:var(--mute)}
.mt{margin-top:28px}
.nw{white-space:nowrap}

/* buttons */
.btn{display:inline-block;vertical-align:middle;padding:15px 28px;border-radius:999px;white-space:nowrap;border:1px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s;text-align:center}
.btn:hover{transform:translateY(-1px)}
.btn-teal{background:var(--accent-fill);color:#fff;border-color:var(--accent-fill)}.btn-teal:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-dark{background:var(--dark);color:#fff;border-color:var(--dark)}.btn-dark:hover{background:#000}
.btn-outline{background:rgba(255,255,255,.7);color:var(--accent-ink);border-color:var(--accent)}.btn-outline:hover{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff}
.btn-light{background:#fff;color:var(--ink);border-color:#fff}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}.btn-ghost:hover{background:var(--accent-fill);border-color:var(--accent-fill)}
.btn-sm{padding:11px 18px}
.btn-xs{padding:8px 13px}
.btn-lg{padding:20px 40px;font-size:var(--t-body-size)}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
@media(max-width:420px){.btns .btn{flex:1 1 100%}}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:13px var(--px);display:flex;align-items:center;gap:24px}
/* logo lockup: the official Bodaq logo (img/brand/bodaq-logo.svg, the same file bodaq.com uses; never
   redraw or recolour it) and the site name, "Partial Rolls", in Proxima Semibold at the kit's h4 size,
   after a hairline. Logo 148px as in the bodaq.com header, 128px on phones; the footer uses the white logo */
.brand{margin-right:auto;display:flex;align-items:center;gap:12px;white-space:nowrap;flex:none}
.brand-logo{display:block;width:148px;height:auto;flex:none}
.brand-name{display:block;padding:3px 0 3px 12px;border-left:1px solid var(--line2);font-size:var(--t-h4-size);font-weight:var(--t-semibold);line-height:1.2;color:var(--bq-charcoal)}
.site-head nav{display:flex;align-items:center;gap:22px}
.nav-link{color:var(--ink);transition:color .15s;white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent}
.nav-link:hover{color:var(--accent-ink)}
.nav-link.on{border-bottom-color:var(--accent)}
.head-count{display:inline-flex;align-items:center;gap:8px;color:var(--accent-ink);white-space:nowrap}
.head-count i{font-style:normal;display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--accent-fill);color:#fff;font-size:var(--t-small-size);line-height:var(--t-small-lh)}
.navmob{display:none;position:relative}
.navmob>summary{list-style:none;cursor:pointer;width:44px;height:44px;border:1px solid var(--line2);border-radius:999px;display:flex;align-items:center;justify-content:center;background:#fff}
.navmob>summary::-webkit-details-marker{display:none}
.navmob .burger{display:flex;flex-direction:column;gap:4px;width:18px}
.navmob .burger i{display:block;height:2px;background:var(--ink);border-radius:1px}
.navmobpanel{position:absolute;right:0;top:54px;width:min(84vw,300px);max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);overflow-y:auto;overscroll-behavior:contain;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 26px 60px rgba(0,0,0,.14);padding:10px;display:flex;flex-direction:column;z-index:70}
.navmobpanel a{padding:12px 14px;border-radius:6px}
.navmobpanel a:hover{background:var(--wash);color:var(--accent-ink)}
.navmobpanel .btn{margin-top:8px}
/* The desktop row (logo, seven links, the cut list count and the button) needs about 1255px with the wide
   gaps and 1171px with the tight ones, so the phone menu takes over at 1180px and below. */
@media(max-width:1280px){.nav-inner{gap:16px}.site-head nav{gap:12px}}
@media(max-width:1180px){.site-head nav,.head-cta,.head-count{display:none}.navmob{display:block}}
@media(max-width:560px){.brand-logo{width:128px}.brand{gap:10px}.brand-name{padding-left:10px}}
@media(max-width:360px){.nav-inner{gap:10px}.brand{gap:8px}.brand-logo{width:104px}.brand-name{padding-left:8px;font-size:var(--t-body-size)}}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--wash);border-bottom:1px solid var(--line)}
.hero-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 18% 25%,var(--accent-t2),transparent 46%),radial-gradient(ellipse at 80% 85%,var(--glow2),transparent 42%),radial-gradient(ellipse at 95% 5%,var(--accent-t),transparent 30%)}
.hero-inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(48px,7vw,104px) var(--px) clamp(48px,6vw,88px);display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,5vw,72px);align-items:center}
.hero-kick{margin:0 0 18px;color:var(--accent-ink);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hero-kick img{height:15px;width:auto;opacity:.9}
.hero h1{margin:0 0 20px;max-width:17ch}
.hero-sub{color:var(--soft);max-width:56ch;margin:0 0 30px}
.hero-points{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--soft)}
.hero-points li{display:flex;align-items:center;gap:8px}
.hero-points li::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--accent);transform:rotate(45deg)}
.rise{animation:rise .8s ease-out both}
.hero-copy>.rise:nth-child(2){animation-delay:.08s}.hero-copy>.rise:nth-child(3){animation-delay:.16s}.hero-copy>.rise:nth-child(4){animation-delay:.24s}.hero-copy>.rise:nth-child(5){animation-delay:.32s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:980px){.hero-inner{grid-template-columns:1fr}.hero h1{max-width:20ch}}

/* the cutter: film coming off a roll, measured, cut. Signature visual for bodaq.us */
.cutter{margin:0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:clamp(16px,2.4vw,26px);animation:rise .9s .2s ease-out both}
.cut-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:14px;color:var(--mute)}
.cut-top b{color:var(--ink)}
.cut-stage{display:grid;grid-template-columns:auto 1fr;gap:0;align-items:end}
.cut-roll{width:clamp(40px,4.4vw,56px);height:calc(var(--sheet-h) + 18px);display:block;margin:0 -1px -9px 0;position:relative;z-index:2;border-radius:50% / 10px;background:linear-gradient(90deg,#b99e74 0%,#e9dac0 22%,#fff8ec 46%,#ead9bb 70%,#c3a97f 100%);box-shadow:6px 10px 18px -10px rgba(34,32,33,.45)}
.cut-roll::before{content:"";position:absolute;left:0;right:0;top:0;height:20px;border-radius:50%;background:radial-gradient(ellipse at center,#4a4036 0 16%,#f3e8d4 17% 22%,transparent 23%),repeating-radial-gradient(ellipse at center,#d6c29c 0 1.4px,#f7eedd 1.4px 3px);border:1px solid #c9b187}
.cut-roll::after{content:"";position:absolute;left:12%;right:12%;bottom:6px;height:calc(100% - 26px);border-radius:3px;background:repeating-linear-gradient(180deg,transparent 0 9px,rgba(160,130,90,.12) 9px 10px)}
.cut-area{position:relative;--sheet-h:clamp(132px,15vw,196px)}
.cut-stage{--sheet-h:clamp(132px,15vw,196px)}
.cut-ruler{position:relative;height:30px;margin-bottom:6px;background:repeating-linear-gradient(90deg,var(--line2) 0 1px,transparent 1px calc(100% / 24)) bottom/100% 8px no-repeat,repeating-linear-gradient(90deg,var(--mute) 0 1px,transparent 1px calc(100% / 6)) bottom/100% 14px no-repeat;border-bottom:1px solid var(--line2)}
.cut-ruler span{position:absolute;top:0;white-space:nowrap;left:calc(var(--x) / 24 * 100%);transform:translateX(-50%);font-size:var(--t-small-size);line-height:var(--t-small-lh);color:var(--mute);font-variant-numeric:tabular-nums}
.cut-ruler span:first-child{transform:none}.cut-ruler span:last-child{transform:translateX(-100%)}
.cut-sheet{position:relative;height:var(--sheet-h);background:repeating-linear-gradient(135deg,var(--wash) 0 8px,#fff 8px 16px);border-radius:0 4px 4px 0;overflow:hidden}
.cut-piece{position:absolute;left:0;top:0;bottom:0;width:calc(var(--len) / 24 * 100%);background-size:cover;background-position:left center;opacity:0;clip-path:inset(0 100% 0 0);animation:piece 16s linear infinite;animation-delay:var(--d);box-shadow:inset -10px 0 18px -12px rgba(0,0,0,.35)}
.cut-piece::after{content:"";position:absolute;right:0;top:0;bottom:0;width:0;border-right:2px dashed var(--ink);transform-origin:top;animation:cutline 16s linear infinite;animation-delay:var(--d)}
.cut-piece .sc{position:absolute;right:-13px;top:-4px;width:26px;height:26px;animation:scissor 16s linear infinite;animation-delay:var(--d);filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
@keyframes piece{0%{opacity:0;clip-path:inset(0 100% 0 0);transform:none}1%{opacity:1}11%{clip-path:inset(0 0 0 0)}19%{opacity:1;transform:none;clip-path:inset(0 0 0 0)}24%{opacity:0;transform:translateX(18px);clip-path:inset(0 0 0 0)}25%,100%{opacity:0;clip-path:inset(0 100% 0 0)}}
@keyframes cutline{0%,11%{transform:scaleY(0)}17%,24%{transform:scaleY(1)}25%,100%{transform:scaleY(0)}}
@keyframes scissor{0%,11%{transform:translateY(0);opacity:0}12%{opacity:1}17%{transform:translateY(calc(var(--sheet-h) - 18px));opacity:1}19%,100%{transform:translateY(calc(var(--sheet-h) - 18px));opacity:0}}
.cut-dim{position:absolute;right:-2px;top:0;bottom:0;display:flex;align-items:center;pointer-events:none}
.cut-list{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cut-list li{position:relative;display:flex;flex-direction:column;gap:2px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:#fff;animation:cutchip 16s linear infinite;animation-delay:var(--d)}
.cut-list li b{color:var(--mute)}
.cut-list li span{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cut-list li em{font-style:normal;font-weight:var(--t-semibold);color:var(--accent-ink);font-variant-numeric:tabular-nums}
@keyframes cutchip{0%,24%{border-color:var(--accent);box-shadow:0 10px 24px -16px rgba(9,152,131,.7);background:#ecfdf8}25%,100%{border-color:var(--line);box-shadow:none;background:#fff}}
.cut-cap{margin:12px 0 0;color:var(--mute)}
@media(max-width:560px){.cut-list{grid-template-columns:1fr 1fr}.cut-top span:last-child{display:none}}

/* stat bar */
.specbar{border-bottom:1px solid var(--line);background:#fff}
.grid-stats{max-width:var(--maxw);margin:0 auto;padding:28px var(--px);display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.grid-stats>div{text-align:center;display:grid;justify-items:center;gap:6px}
.grid-stats .ico{width:40px;height:40px;margin-bottom:4px}
.grid-stats b{display:block;white-space:nowrap}
.grid-stats>div>span{display:block;color:var(--mute);margin-top:2px}
@media(max-width:940px){.grid-stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.grid-stats{grid-template-columns:repeat(2,1fr);gap:22px 12px}}

/* icons (inline SVG) */
.ico{width:52px;height:52px;display:block;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ico .fill{fill:var(--accent);fill-opacity:.1;stroke:none}
.ico .brass{stroke:var(--ico-accent)}
.ico .bfill{fill:var(--ico-accent);fill-opacity:.16;stroke:none}
.ico .dash{stroke-dasharray:3 3}
.sec.dark .ico{stroke:var(--accent-soft)}.sec.dark .ico .fill{fill:var(--accent-soft)}.sec.dark .ico .brass{stroke:var(--bq-amber-light)}

/* icon badge: a circular frame for an icon, the timeline dot's language (.tstep .dot) reused wherever
   a bare line icon needs more presence: panel headers, the lead time callout, the request page's
   contact cards */
.ico-badge{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;background:var(--accent-t);border:1.5px solid var(--accent)}
.ico-badge .ico{width:24px;height:24px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cards.three{grid-template-columns:repeat(3,1fr)}
.cards.five{grid-template-columns:repeat(5,1fr)}
.card{display:block;position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 24px;transition:border-color .2s,transform .2s,box-shadow .2s,background-color .25s,color .25s;color:inherit}
.card .ico{width:60px;height:60px;margin-bottom:18px;transform-origin:center bottom;animation:icofloat 5s ease-in-out infinite;transition:transform .35s cubic-bezier(.2,.8,.2,1),stroke .25s}
.cards .card:nth-child(2n) .ico{animation-delay:-1.6s}.cards .card:nth-child(3n) .ico{animation-delay:-3.1s}
@keyframes icofloat{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-4px) rotate(-2.5deg)}65%{transform:translateY(-2px) rotate(2deg)}}
.card:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff;transform:translateY(-3px);box-shadow:0 22px 44px -28px rgba(34,32,33,.45)}
.card:hover p{color:rgba(255,255,255,.88)}
.card:hover .go,.card:hover .num{color:#fff}
.card:hover .ico{stroke:#fff;transform:translateY(-6px) scale(1.12) rotate(-3deg);animation-play-state:paused}
.card:hover .ico .fill{fill:#fff;fill-opacity:.22}
.card:hover .ico .brass{stroke:var(--bq-amber-light)}
.card:hover .ico .bfill{fill:var(--bq-amber-light);fill-opacity:.35}
.card:hover .ico .draw,.card:hover .ico .bob,.card:hover .ico .pulse,.card:hover .ico .slide,.card:hover .ico .grow,.card:hover .ico .blink{animation-duration:1.8s}
.card b{display:block;margin-bottom:8px}
.card .go{display:inline-block;margin-top:14px;color:var(--accent-ink)}
.card .num{position:absolute;top:18px;right:20px;color:var(--mute);font-variant-numeric:tabular-nums}
.cards.five .card{padding:24px 20px}
.cards.five .card .ico{width:52px;height:52px;margin-bottom:14px}
.card.here{background:var(--wash);border-style:dashed}
.card.here:hover{background:var(--wash);border-color:var(--line2);color:inherit;transform:none;box-shadow:none}
.card.here:hover p{color:var(--soft)}.card.here:hover .go{color:var(--accent-ink)}.card.here:hover .num{color:var(--mute)}
.card.here:hover .ico{stroke:var(--accent);transform:none}.card.here:hover .ico .fill{fill:var(--accent);fill-opacity:.1}.card.here:hover .ico .brass{stroke:var(--ico-accent)}.card.here:hover .ico .bfill{fill:var(--ico-accent);fill-opacity:.16}
@media(max-width:1100px){.cards.five{grid-template-columns:repeat(3,1fr)}}
@media(max-width:940px){.cards,.cards.three{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cards,.cards.three,.cards.five{grid-template-columns:1fr}
  .cards.five .card{display:grid;grid-template-columns:44px 1fr;gap:2px 14px;padding:18px}
  .cards.five .card .ico{grid-row:1/4;width:44px;height:44px;margin:0}
  .cards.five .card b{margin-bottom:2px}.cards.five .card .go{margin-top:8px}
  .cards:not(.five) .card{padding:22px 20px}.cards:not(.five) .card .ico{width:48px;height:48px;margin-bottom:12px}}

/* small jobs gallery */
.jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.jobs figure{margin:0;position:relative;border-radius:var(--r);overflow:hidden;background:var(--wash2);aspect-ratio:16/10}
.jobs img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.jobs figure:hover img{transform:scale(1.04)}
.jobs figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;background:linear-gradient(180deg,rgba(34,32,33,0),rgba(34,32,33,.82));color:#fff;display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
/* photo caption title: the main site's photo caption (16 to 17px Semibold), from the kit's body size token */
.jobs figcaption b{display:block;font-size:var(--t-body-size);font-weight:var(--t-semibold)}
.jobs figcaption a{color:#fff;border-bottom:1px solid rgba(255,255,255,.5);white-space:nowrap}
.jobs figcaption a:hover{border-color:#fff}
@media(max-width:940px){.jobs{grid-template-columns:1fr 1fr}}
/* phones: the photos become a swipeable strip instead of six stacked images */
@media(max-width:560px){
  .jobs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:32px calc(-1 * var(--px)) 0;padding:0 var(--px) 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .jobs::-webkit-scrollbar{display:none}
  .jobs figure{flex:0 0 84%;scroll-snap-align:center}
  .jobs figcaption{flex-direction:column;align-items:flex-start;gap:6px}
}

/* timeline */
.timeline{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:8px}
.timeline::before{content:"";position:absolute;left:26px;right:26px;top:26px;height:2px;background:var(--line2)}
.timeline::after{content:"";position:absolute;left:26px;top:26px;height:2px;width:calc(100% - 52px);background:var(--accent);transform-origin:left;animation:tl 6s ease-in-out infinite}
@keyframes tl{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
.timeline::before,.timeline::after{z-index:0}
.tstep{position:relative;padding-top:70px}
.tstep .dot{position:absolute;z-index:1;left:0;top:0;width:52px;height:52px;border-radius:50%;background:#fff;border:2px solid var(--line2);display:grid;place-items:center}
.tstep .dot .ico{width:26px;height:26px}
.tstep .dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:ping 6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes ping{0%,8%{opacity:0;transform:scale(.8)}12%{opacity:.85;transform:scale(1)}30%,100%{opacity:0;transform:scale(1.25)}}
.tstep em{display:block;font-style:normal;color:var(--mute)}
.tstep b{display:block;margin:6px 0 8px}
@media(max-width:940px){.timeline{grid-template-columns:1fr;gap:10px}.timeline::before,.timeline::after{left:26px;right:auto;top:0;bottom:0;width:2px;height:auto;transform-origin:top;animation-name:tlv}.tstep{padding:8px 0 20px 72px}}
@keyframes tlv{0%{transform:scaleY(0)}70%,100%{transform:scaleY(1)}}

/* ordering: calculator + terms */
.order-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,3vw,36px);margin-top:52px;align-items:start}
@media(max-width:980px){.order-grid{grid-template-columns:1fr}}
.panel{background-color:#fff;background-image:radial-gradient(ellipse at 100% 0%,var(--accent-t),transparent 56%);border:1px solid var(--line);border-radius:14px;padding:clamp(18px,2.6vw,30px);box-shadow:var(--shadow)}
.panel-h{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.calc-rows{display:grid;gap:10px;margin-top:18px;counter-reset:calcrow}
.calc-row{counter-increment:calcrow;display:grid;grid-template-columns:24px 1.3fr .8fr .8fr .6fr auto;gap:8px;align-items:end;padding:10px 10px 10px 8px;background:var(--wash);border:1px solid var(--line);border-radius:10px;transition:border-color .2s,box-shadow .2s}
.calc-row:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-t2)}
/* the row number: a small counter badge, purely decorative (counter-reset/increment above), so it
   tracks added and removed rows with no script of its own */
.calc-row::before{content:counter(calcrow);align-self:center;justify-self:center;width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid var(--line2);color:var(--mute);font-size:12px;font-weight:var(--t-semibold);line-height:1;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.calc-row .x{align-self:end;height:46px;width:40px;border-radius:8px;border:1px solid var(--line2);background:#fff;cursor:pointer;font-size:18px;color:var(--mute)}
.calc-row .x:hover{border-color:var(--ink);color:var(--ink)}
.calc-opts{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:end;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.calc-out{margin-top:20px;padding:18px 20px;border-radius:10px;background:var(--dark);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.calc-out-fig{display:flex;align-items:center;gap:14px;flex:1 1 240px}
.calc-out .ico-badge{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
.calc-out .ico-badge .ico{stroke:var(--accent-soft)}
.calc-out .ico-badge .ico .fill{fill:var(--accent-soft)}
.calc-out .big{color:#fff}
.calc-out .big small{color:rgba(255,255,255,.55);margin-left:4px}
.calc-out p{margin-top:6px;color:rgba(255,255,255,.74)}
@media(max-width:620px){.calc-row{grid-template-columns:1fr 1fr 1fr auto;padding:10px}.calc-row::before{display:none}.calc-row .f-label{grid-column:1/-1}}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:999px;padding:3px;background:#fff}
/* segmented toggle: pill type from the kit (13px Regular, sentence case) */
.seg button{border:0;background:transparent;border-radius:999px;padding:8px 12px;font-size:var(--t-small-size);line-height:var(--t-small-lh);color:var(--soft);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--dark);color:#fff}
.seg-wrap{display:flex;flex-direction:column;gap:6px}
.seg-wrap>span{color:var(--mute)}
/* lead time callout (How ordering works, request): .lt-k is .t-eyebrow and .lt-s is .t-small in the HTML */
.leadtime{display:flex;align-items:center;gap:14px;width:fit-content;max-width:100%;margin-top:22px;padding:12px 22px 12px 16px;background:#fff;border:1px solid var(--line2);border-left:3px solid var(--accent);border-radius:12px;box-shadow:0 18px 40px -28px rgba(34,32,33,.35)}
.leadtime p{margin:0}
.leadtime .lt-k{display:block;color:var(--accent-ink)}
.leadtime b{display:block;font-size:var(--t-h4-size);font-weight:var(--t-semibold);line-height:1.3;color:var(--ink);margin-top:2px}
.leadtime .lt-s{display:block;color:var(--soft)}
.spec-list{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:0}
.spec-list>div{background:#fff;padding:14px 16px}
/* dt is .t-eyebrow in the HTML; dd is the main site's spec value (16px Regular, line height 1.375) */
.spec-list dt{color:var(--mute)}
.spec-list dd{margin:5px 0 0;line-height:1.375}
.spec-list dd small{display:block;color:var(--mute);margin-top:3px}
.spec-list .wide{grid-column:1/-1}
@media(max-width:560px){.spec-list{grid-template-columns:1fr}.spec-list.keep2{grid-template-columns:1fr 1fr}.spec-list.keep2>div{padding:12px}}

/* pattern browser */
.finder{display:grid;gap:16px;margin-bottom:26px}
.search{display:grid;grid-template-columns:1fr auto;gap:10px;max-width:760px}
.search input{min-width:0;padding:14px 20px;border:1px solid var(--line2);border-radius:999px;background:#fff;color:var(--ink)}
.search input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-t2)}
.search button{padding:14px 20px;border-radius:999px;border:1px solid var(--line2);background:#fff;cursor:pointer;color:var(--ink)}
.filter-rows{display:grid;gap:10px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip-row .lbl{color:var(--mute);margin-right:4px;min-width:58px}
/* chips and pills: the kit's small size at Regular, no tracking, sentence case */
.chip{display:inline-flex;gap:6px;align-items:center;color:var(--ink);border:1px solid var(--line2);border-radius:999px;padding:6px 14px;font-size:var(--t-small-size);font-weight:var(--t-regular);line-height:var(--t-small-lh);background:#fff;cursor:pointer}
.chip:hover{border-color:var(--accent);color:var(--accent-ink)}
/* selected: bodaq.com's pill (mint fill, teal line), text in teal-deep (5.7:1 on mint) */
.chip[aria-pressed="true"]{background:var(--bq-mint);border-color:var(--accent);color:var(--bq-teal-deep)}
.chip em{font-style:normal;color:var(--mute)}
.chip[aria-pressed="true"] em{color:var(--bq-teal-deep)}
.chip .dot{width:10px;height:10px;border-radius:50%;border:1px solid rgba(0,0,0,.15)}
.find-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;color:var(--mute)}
.pgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px 16px}
.pcard{position:relative;display:flex;flex-direction:column;min-width:0}
.pcard .im{position:relative;display:block;aspect-ratio:240/318;border-radius:8px;overflow:hidden;background:var(--wash2);transition:transform .3s,box-shadow .3s}
.pcard .im img{width:100%;height:100%;object-fit:cover}
.pcard .im:hover{transform:translateY(-3px);box-shadow:0 18px 30px -20px rgba(34,32,33,.45)}
.pcard .flag{position:absolute;left:8px;top:8px;padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.92);font-size:var(--t-small-size);line-height:var(--t-small-lh);color:var(--ink)}
.pcard .flag.new{background:var(--accent-fill);color:#fff}
.pcard .meta{display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin-top:9px}
/* pattern name: the main site's film card (16px Semibold, truncated), SKU and collection are .t-small */
.pcard strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .sku{color:var(--accent-ink);flex:none;font-variant-numeric:tabular-nums}
.pcard .col{display:block;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .acts{display:flex;gap:6px;margin-top:8px}
.pcard .add{flex:1;border:1px solid var(--line2);background:#fff;border-radius:999px;padding:4px 10px;font-size:var(--t-small-size);line-height:var(--t-small-lh);cursor:pointer;color:var(--ink);transition:background .15s,border-color .15s}
.pcard .add:hover{border-color:var(--accent)}
.pcard .add[aria-pressed="true"]{background:var(--bq-mint);border-color:var(--accent);color:var(--bq-teal-deep)}
.pcard .ext{display:inline-grid;place-items:center;width:32px;border:1px solid var(--line2);border-radius:999px;color:var(--soft)}
.pcard .ext:hover{border-color:var(--ink);color:var(--ink)}
.more{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:30px}
.empty{padding:40px 0;text-align:center;color:var(--mute)}
@media(max-width:1200px){.pgrid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:940px){.pgrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:700px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.pgrid{grid-template-columns:repeat(2,1fr);gap:16px 12px}.search button{padding:14px 16px}
  .chip-row{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * var(--px));padding:2px var(--px) 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .chip-row::-webkit-scrollbar{display:none}
  .chip-row .lbl{min-width:auto;flex:none}.chip{flex:none}}

/* samples (dark) */
.samples-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center}
@media(max-width:940px){.samples-grid{grid-template-columns:1fr}}
.fan{position:relative;height:clamp(240px,26vw,320px);display:flex;align-items:center;justify-content:center}
.fan img{position:absolute;width:clamp(110px,12vw,150px);aspect-ratio:240/318;object-fit:cover;border-radius:8px;border:4px solid #fff;box-shadow:0 24px 40px -20px rgba(0,0,0,.6);transform-origin:50% 120%;transform:rotate(calc(var(--i) * 11deg - 22deg)) translateY(-6px);animation:fan 7s ease-in-out infinite;animation-delay:calc(var(--i) * -.6s)}
@keyframes fan{0%,100%{transform:rotate(calc(var(--i) * 11deg - 22deg)) translateY(-6px)}50%{transform:rotate(calc(var(--i) * 13deg - 26deg)) translateY(-14px)}}
.fan figcaption{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:var(--t-small-size);color:rgba(255,255,255,.6)}

/* installers: "50+" over the coverage map, a dotted US drawn on a canvas by assets/js/coverage-map.js (dots and
   cities precomputed in coverage-data.js by scripts/build-coverage.mjs). Decoration, not installer data */
.map-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(18px,2.6vw,28px);box-shadow:var(--shadow)}
.map-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.map-head .t-stat-label{display:block;color:var(--mute);margin-top:6px}
.inst-n{font-size:var(--t-hero-size);font-weight:var(--t-semibold);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.inst-cover{margin:0;max-width:24ch;text-align:right;color:var(--soft)}
/* the card is the map's warm background; --cov-bg must stay the card colour (the city halos use it) */
.inst-map{--cov-bg:#fbf7f1;--cov-dot:#cdbba2;--cov-accent:var(--accent);background:var(--cov-bg);border-color:#ede3d3;border-radius:28px;overflow:hidden}
.inst-map .map-head,.inst-map>.note{position:relative;z-index:1}
.inst-map .cov{margin:2% 0 1%}
.cov-canvas{display:block;width:100%;height:auto;aspect-ratio:800/600;opacity:0;transition:opacity .4s ease}
.cov.is-ready .cov-canvas{opacity:1}
@media(max-width:560px){.map-head{flex-direction:column;align-items:flex-start;gap:6px}.inst-cover{max-width:none;text-align:left}}
.checks{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.checks li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;color:var(--soft)}
.checks li .ico{width:26px;height:26px}
.checks b{color:var(--ink)}

/* technical */
.matgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.matfig{margin:0;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.matfig img{width:100%;height:auto}
.matfig figcaption{padding:12px 18px;border-top:1px solid var(--line);color:var(--mute);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.layers-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.layer-row{display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:start;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;animation:layerhi 10s ease-in-out infinite;animation-delay:calc(var(--i) * 2s)}
.layer-row .n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--accent);color:var(--accent-ink)}
.layer-row b{display:block}
.layer-row p{margin:3px 0 0}
@keyframes layerhi{0%,16%,100%{border-color:var(--line);box-shadow:none;transform:none}5%,12%{border-color:var(--accent);box-shadow:0 16px 34px -22px rgba(9,152,131,.7);transform:translateX(8px)}}
/* construction diagram reveal: the rows fade up once on scroll-in (layerhi above keeps its own
   unrelated ambient highlight loop on the row itself, so the reveal animates the row's children
   instead, on --i, the same index the rows already carry); the leader dots overlaid on the image
   ping in step, reusing the site's own ping keyframe (used elsewhere for the step timeline).
   site.js adds mat-armed only when it is actually going to run the reveal (motion allowed,
   IntersectionObserver supported), so the rows stay in their normal state with no JS and under
   reduced motion, and only drop to the pre-reveal state once something will bring them back */
.matimg{position:relative;line-height:0}
.matimg img{display:block}
.mdots{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mdot{fill:none;stroke:var(--accent);stroke-width:2.5;vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:center}
.matgrid.mat-armed:not(.in-view) .layer-row>*{opacity:0;transform:translateY(10px)}
.matgrid.in-view .mdot{animation:ping .8s ease-out calc(var(--i) * 80ms)}
.matgrid.in-view .layer-row>*{animation:layerin .5s ease-out both calc(var(--i) * 80ms)}
@keyframes layerin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tech-below{margin-top:40px}
/* the spec list runs the full width: five across (ten specs, two even rows), two across below 1100px */
.spec-list.tech-specs{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.spec-list.tech-specs{grid-template-columns:1fr 1fr}}
.docs{display:grid;gap:10px}
.doc{display:grid;grid-template-columns:40px 1fr auto;gap:14px;align-items:center;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:12px;transition:border-color .2s,transform .2s}
.doc:hover{border-color:var(--accent);transform:translateX(3px)}
.doc .ico{width:34px;height:34px}
/* document rows: the main site's download list (title 16 to 17px Semibold, detail 15px Light), PDF tag is .t-link */
.doc b{display:block;font-size:var(--t-body-size);font-weight:var(--t-semibold);line-height:1.375}
.doc span{display:block;margin-top:2px;font-size:var(--t-body-sm-size);font-weight:var(--t-light);line-height:1.375;color:var(--soft)}
.doc em{font-style:normal;color:var(--accent-ink);white-space:nowrap}
/* documents: their own section, stretched across the full width */
.docs-wide{grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:1100px){.docs-wide{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.docs-wide{grid-template-columns:1fr}}
@media(max-width:940px){.matgrid{grid-template-columns:1fr}}

/* faq */
.faq{border-top:1px solid var(--line);max-width:900px}
.faq details{border-bottom:1px solid var(--line)}
/* question: the main site's FAQ summary (17 to 18px Semibold, line height 1.375); answers are .t-body */
.faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;font-size:var(--t-intro-size);font-weight:var(--t-semibold);line-height:1.375;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:15px;font-size:24px;font-weight:300;color:var(--accent-ink)}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 44px 22px 0;max-width:76ch;display:grid;gap:10px}
.faq .a ul{margin:0;padding-left:20px;color:var(--soft)}
.faq .src{color:var(--mute)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,64px);align-items:start}
.faq-grid>div:first-child{position:sticky;top:110px}
@media(max-width:940px){.faq-grid{grid-template-columns:1fr}.faq-grid>div:first-child{position:static}}

/* form */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.legend{color:var(--mute)}
.field label .req{color:var(--accent-ink)}
.field input,.field select,.field textarea{padding:10px 14px;border:1px solid var(--line2);border-radius:8px;background:#fff;color:var(--ink);min-width:0;width:100%;height:46px;transition:border-color .15s}
.field textarea{height:auto;min-height:110px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--mute)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-t2)}
/* a labelled break between the form's field groups: a kicker-weight line, not a new fieldset, so the
   required fields it introduces stay exactly as they were */
.form-divider{grid-column:1/-1;margin-top:8px;padding-top:18px;border-top:1px solid var(--line);color:var(--mute)}
.field .err{font-size:var(--t-small-size);line-height:var(--t-small-lh);color:#a0331a;min-height:0}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#c2461f}
.field .hint{font-size:var(--t-small-size);line-height:var(--t-small-lh);color:var(--mute)}
.cutlist{grid-column:1/-1;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;background:var(--wash);padding:18px 18px 18px 20px;margin:0;min-width:0}
.cutlist legend{padding:0 6px;margin-left:-6px}
.cl-rows{display:grid;gap:10px;margin-top:10px}
.cl-row{display:grid;grid-template-columns:44px 1fr 120px 44px;gap:10px;align-items:start}
.cl-row .sw{width:44px;height:46px;border-radius:6px;background:var(--wash2) center/cover;border:1px solid var(--line)}
.cl-row .x{height:46px;width:44px;border-radius:8px;border:1px solid var(--line2);background:#fff;cursor:pointer;font-size:18px;color:var(--mute)}
.cl-row .x:hover{border-color:var(--ink);color:var(--ink)}
/* pattern picker: combobox with a swatch per option */
.cl-row .cb{position:relative}
.cl-opts{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;max-height:min(336px,52vh);overflow:auto;overscroll-behavior:contain;list-style:none;margin:0;padding:6px;background:#fff;border:1px solid var(--line2);border-radius:10px;box-shadow:0 24px 50px -20px rgba(34,32,33,.4)}
.cl-opt{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center;padding:6px 8px;border-radius:7px;cursor:pointer}
.cl-opt img{width:30px;height:40px;object-fit:cover;border-radius:4px;background:var(--wash2)}
.cl-opt span{min-width:0}
.cl-opt b{display:block;font-size:var(--t-body-sm-size);font-weight:var(--t-semibold);line-height:1.3;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-opt small{display:block;font-size:var(--t-small-size);line-height:var(--t-small-lh);color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-opt[aria-selected="true"]{background:var(--wash);box-shadow:inset 0 0 0 1.5px var(--accent)}
.cl-none{padding:10px;font-size:var(--t-small-size);line-height:var(--t-small-lh);color:var(--mute)}
@media(forced-colors:active){.cl-opt[aria-selected="true"]{outline:2px solid Highlight}}
.cl-hint{grid-column:2/-1;margin:-4px 0 2px;font-size:var(--t-small-size);font-weight:var(--t-regular);line-height:var(--t-small-lh);color:var(--accent-ink)}
.cl-hint:empty{display:none}
.cl-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.cl-total{color:var(--soft)}
.cl-total b{color:var(--ink);font-variant-numeric:tabular-nums}
@media(max-width:560px){.cl-row{grid-template-columns:40px 1fr 44px}.cl-row .f-len{grid-column:2/3}.cl-row .sw{width:40px}}
.checkline{display:flex;gap:12px;align-items:flex-start;color:var(--soft);cursor:pointer}
.checkline input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent-fill);flex:none}
.checkline b{color:var(--ink)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-state{color:#a0331a}
.form-note{grid-column:1/-1;color:var(--mute);padding:12px 14px;border-left:3px solid var(--accent);background:#fff}
.form-note b{color:var(--ink)}
.done{grid-column:1/-1;border:1px solid var(--line);border-radius:14px;background:#fff;padding:clamp(18px,2.6vw,28px);box-shadow:var(--shadow)}
.done .ico{width:56px;height:56px;margin-bottom:12px}
.done h3{margin-bottom:8px}
.done pre{margin:16px 0 0;padding:14px 16px;border:1px dashed var(--line2);border-radius:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-small-size);line-height:var(--t-small-lh);color:var(--soft);white-space:pre-wrap;word-break:break-word;max-height:320px;overflow:auto;background:var(--wash)}
.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.contact-cards .ico-badge{margin-bottom:14px}
.contact-cards .ico-badge .ico{width:24px;height:24px;margin:0}
.contact-cards .card:hover .ico-badge{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.55)}
.contact-cards .wide{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:2px 18px;align-items:center}
.contact-cards .wide .ico-badge{grid-row:1/3;margin:0}
.contact-cards .wide b{margin:0}
address{font-style:normal}
.card address{color:var(--soft)}
.card:hover address{color:rgba(255,255,255,.88)}
@media(max-width:700px){.form{grid-template-columns:1fr}.contact-cards{grid-template-columns:1fr}}

/* pattern pages (/patterns/<slug>/) */
.crumbs ol{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px;color:var(--mute)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--line2)}
.crumbs a{color:var(--accent-ink)}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.pp-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:start}
.pp-swatch{margin:0;position:sticky;top:100px}
.pp-swatch img{width:100%;max-width:460px;aspect-ratio:400/531;object-fit:cover;border-radius:12px;background:var(--wash2);box-shadow:var(--shadow)}
.pp-swatch figcaption{margin-top:12px;max-width:460px;color:var(--mute)}
.pp-info .kicker{margin-bottom:10px}
.pp-code{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:8px;color:var(--mute);font-variant-numeric:tabular-nums}
.pp-flag{padding:1px 10px;border-radius:999px;border:1px solid var(--accent);background:var(--bq-mint);color:var(--bq-teal-deep)}
.pp-flag.new{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff}
.pp-desc{margin-top:22px;max-width:62ch}
.pp-add{margin-top:28px;display:grid;grid-template-columns:150px auto;justify-content:start;gap:12px 14px;align-items:end}
.pp-add .btn{height:46px;padding-top:0;padding-bottom:0;justify-self:start}
.pp-add .note{grid-column:1/-1;margin:0}
.pp-links{margin-top:18px}
.pp-specs{margin-top:28px}
.pp-more .pgrid{margin-top:4px}
@media(max-width:860px){.pp-grid{grid-template-columns:1fr}.pp-swatch{position:static}.pp-swatch img{max-width:380px}}
@media(max-width:560px){.pp-swatch img{max-width:280px}}
@media(max-width:420px){.pp-add{grid-template-columns:1fr}.pp-add .btn{justify-self:stretch}}

/* sticky cut list bar */
.clbar{position:fixed;left:50%;bottom:16px;transform:translate(-50%,140%);opacity:0;visibility:hidden;z-index:60;display:flex;align-items:center;gap:14px;padding:10px 10px 10px 18px;border-radius:999px;background:var(--dark);color:#fff;box-shadow:0 24px 50px -18px rgba(0,0,0,.55);transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s,visibility .35s;max-width:calc(100vw - 24px)}
.clbar.show{transform:translate(-50%,0);opacity:1;visibility:visible}
.clbar .sws{display:flex}
.clbar .sws i{width:22px;height:22px;border-radius:50%;border:2px solid var(--dark);background:var(--wash2) center/cover;margin-left:-8px}
.clbar .sws i:first-child{margin-left:0}
.clbar span{font-size:var(--t-small-size);line-height:var(--t-small-lh);white-space:nowrap}
.clbar span b{color:var(--accent-soft)}
.clbar .btn{padding:10px 16px}
@media(max-width:420px){.clbar .sws{display:none}}
body.has-clbar{padding-bottom:84px}

/* toast */
.toast{position:fixed;left:50%;top:84px;transform:translate(-50%,-20px);opacity:0;z-index:90;background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 18px;box-shadow:0 18px 40px -20px rgba(0,0,0,.4);transition:opacity .2s,transform .2s;pointer-events:none;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* contact form: the note shown when the chat assistant has put the visitor's questions in the message */
.form-handoff{margin:0;color:var(--ink);padding:12px 14px;border-left:3px solid var(--accent);background:#fff}

/* chat assistant (assets/js/assistant.js). The launcher sits bottom right, rises above the cut list bar when
   the two would meet (--bqa-lift, set by the script) and steps aside while a form field elsewhere is being
   filled in. It stays below the sticky header (z-index 50), so the open phone menu always covers it.
   The window is a modal dialog: a panel on wide screens, the full screen on phones. */
.bqa-open{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));z-index:45;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px 0 18px;border-radius:999px;border:1px solid var(--accent-fill);background:var(--accent-fill);color:#fff;cursor:pointer;box-shadow:0 18px 40px -16px rgba(34,32,33,.55);transform:translateY(calc(-1 * var(--bqa-lift,0px)));transition:transform .35s cubic-bezier(.2,.8,.2,1),background-color .15s,border-color .15s,opacity .2s,visibility .2s}
.bqa-open:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.bqa-open svg{flex:none}
.bqa-open.away{opacity:0;visibility:hidden;pointer-events:none}
/* while the phone menu is open, the floating launcher and cut list bar step aside so every menu item shows */
@media(max-width:1180px){html:has(.navmob[open]) .bqa-open,html:has(.navmob[open]) .clbar{opacity:0;visibility:hidden;pointer-events:none}}
.has-bqa .foot-inner{padding-bottom:110px}
@media(max-width:560px){
  .bqa-open{width:56px;height:56px;min-height:0;padding:0;justify-content:center}
  .bqa-open .bqa-open-l{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}
.bqa-dlg{position:fixed;inset:auto max(16px,env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) auto;margin:0;padding:0;width:min(400px,calc(100vw - 32px));height:min(640px,calc(100vh - 32px));height:min(640px,calc(var(--bqa-vh,100dvh) - 32px));max-width:none;max-height:none;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);box-shadow:0 30px 80px -24px rgba(34,32,33,.5);overflow:hidden;overflow:clip;container-type:size}
.bqa-dlg[open]{display:block;animation:bqa-in .22s ease-out}
.bqa-dlg::backdrop{background:rgba(34,32,33,.32)}
@keyframes bqa-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.bqa-in{display:flex;flex-direction:column;height:100%}
.bqa-head{flex:none;display:flex;align-items:center;gap:12px;padding:12px 10px 12px 16px;border-bottom:1px solid var(--line);background:var(--wash)}
.bqa-badge{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--line2);color:var(--bq-teal-deep)}
.bqa-ttl{flex:1;min-width:0}
.bqa-ttl h2{color:var(--ink)}
.bqa-ttl p{color:var(--mute)}
.bqa-x{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--ink);cursor:pointer;font-size:26px;font-weight:300;line-height:1}
.bqa-x:hover{background:#fff;border-color:var(--line2)}
.bqa-log{position:relative;flex:1 1 0;min-height:88px;overflow-y:auto;overscroll-behavior:contain;padding:16px;display:flex;flex-direction:column;gap:12px}
.bqa-log:focus-visible{outline-offset:-3px}
.bqa-msg{display:flex}
.bqa-me{justify-content:flex-end}
.bqa-bubble{max-width:88%;padding:10px 14px;border-radius:14px;font-size:var(--t-body-sm-size);font-weight:var(--t-regular);line-height:1.5}
.bqa-bot .bqa-bubble{background:var(--wash);color:var(--ink);border-top-left-radius:4px}
.bqa-me .bqa-bubble{background:var(--accent-hover);color:#fff;border-top-right-radius:4px;overflow-wrap:anywhere}
.bqa-bubble p{color:inherit}
.bqa-bubble>p:not(.bqa-src),.bqa-bubble li{font-size:inherit;font-weight:inherit;line-height:inherit}
.bqa-bubble p+p{margin-top:8px}
.bqa-bubble ol,.bqa-bubble ul{margin:8px 0 0;padding-left:20px}
.bqa-bubble li+li{margin-top:4px}
.bqa-bubble .bqa-src{margin-top:8px;color:var(--mute)}
.bqa-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.bqa-act{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:999px;border:1px solid var(--accent);background:#fff;color:var(--bq-teal-deep);font-size:var(--t-body-sm-size);font-weight:var(--t-regular);line-height:1.3;text-align:left;cursor:pointer}
.bqa-act:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.bqa-typing .bqa-bubble{display:flex;gap:5px;align-items:center;padding:15px 16px}
.bqa-typing i{width:7px;height:7px;border-radius:50%;background:var(--mute);opacity:.6;animation:bqa-dot 1.1s ease-in-out infinite}
.bqa-typing i:nth-child(2){animation-delay:.15s}.bqa-typing i:nth-child(3){animation-delay:.3s}
@keyframes bqa-dot{0%,80%,100%{opacity:.35;transform:none}40%{opacity:1;transform:translateY(-3px)}}
.bqa-sugs{flex:0 1 auto;min-height:0;overflow-y:auto;display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px}
.bqa-sug{min-height:44px;padding:8px 14px;border-radius:999px;border:1px solid var(--line2);background:#fff;color:var(--ink);font-size:var(--t-small-size);font-weight:var(--t-regular);line-height:var(--t-small-lh);text-align:left;cursor:pointer}
.bqa-sug:hover{border-color:var(--accent);color:var(--bq-teal-deep)}
.bqa-form{flex:none;display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.bqa-form input{flex:1;min-width:0;height:46px;padding:10px 16px;border:1px solid var(--line2);border-radius:999px;background:#fff;color:var(--ink)}
.bqa-form input::placeholder{color:var(--mute);opacity:1}
.bqa-form input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-t2)}
.bqa-send{flex:none;min-width:76px;height:46px;padding:0 18px;border-radius:999px;border:1px solid var(--accent-fill);background:var(--accent-fill);color:#fff;cursor:pointer}
.bqa-send:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.bqa-foot{flex:none;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0 12px;padding:0 16px 8px}
.bqa-foot p{flex:1 1 220px;color:var(--mute)}
.bqa-team{min-height:44px;padding:0 2px;border:0;background:none;color:var(--bq-teal-deep);text-decoration:underline;text-underline-offset:3px;font-size:var(--t-small-size);line-height:var(--t-small-lh);cursor:pointer}
.bqa-team:hover{color:var(--ink)}
@media(max-width:560px){
  .bqa-dlg{inset:0;top:var(--bqa-vt,0px);width:100%;height:100vh;height:var(--bqa-vh,100dvh);border:0;border-radius:0}
  .bqa-bubble{max-width:92%}
  .bqa-sugs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .bqa-sug{flex:none;white-space:nowrap}
}
/* Short windows (phones turned sideways, or the on-screen keyboard up, which shrinks the window through
   --bqa-vh): the conversation keeps its room. The suggestions become one row that scrolls sideways, the
   note under the box goes, then the suggestions, then the "Message the team" row. */
@container (max-height:560px){
  .bqa-head{padding:6px 8px 6px 16px}
  .bqa-badge{display:none}
  .bqa-log{padding:12px 16px}
  .bqa-sugs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;-webkit-overflow-scrolling:touch;padding-bottom:8px}
  .bqa-sug{flex:none;white-space:nowrap}
  .bqa-form{padding:8px 16px}
  .bqa-foot{justify-content:flex-end;padding-bottom:2px}
  .bqa-foot p{display:none}
}
@container (max-height:340px){.bqa-sugs{display:none}.bqa-log{min-height:64px}}
@container (max-height:280px){.bqa-foot{display:none}.bqa-log{min-height:0}}
@media print{.bqa-open,.bqa-dlg{display:none!important}}

/* footer */
.site-foot{background:var(--dark);color:#fff}
.foot-inner{max-width:var(--maxw);margin:0 auto;padding:64px var(--px) 34px}
.grid-footer{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;margin-bottom:44px}
.grid-footer>div{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.foot-brand{display:flex;align-items:center;gap:14px;margin:0}
.foot-brand .brand-logo{width:168px}
.foot-brand .brand-name{color:#fff;border-left-color:rgba(255,255,255,.28)}
.foot-blurb{margin:12px 0 0;color:rgba(255,255,255,.6);max-width:36ch}
.foot-addr{margin:6px 0 0;color:rgba(255,255,255,.6)}
.foot-h{color:rgba(255,255,255,.5)}
.footer-link{color:rgba(255,255,255,.82)}
.footer-link:hover{color:#fff;text-decoration:underline}
.footer-family{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;margin-bottom:22px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.footer-family .footer-link{color:rgba(255,255,255,.7)}
.footer-family .here{color:var(--accent-soft)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;display:flex;justify-content:space-between;gap:18px;color:rgba(255,255,255,.5);flex-wrap:wrap}
.foot-hy{height:16px;width:auto;opacity:.75;margin-top:14px;filter:invert(1) brightness(1.4)}
@media(max-width:940px){.grid-footer{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid-footer{grid-template-columns:1fr 1fr;gap:30px 18px}.grid-footer>div:first-child{grid-column:1/-1}}

/* icon motion */
.ico .draw{stroke-dasharray:80;stroke-dashoffset:80;animation:draw 4s ease-in-out infinite}
.ico .d2{animation-delay:.3s}.ico .d3{animation-delay:.6s}
@keyframes draw{0%,15%{stroke-dashoffset:80}45%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:80}}
.ico .spin{transform-box:fill-box;transform-origin:center;animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ico .bob{transform-box:fill-box;transform-origin:center;animation:bob 3.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.ico .pulse{transform-box:fill-box;transform-origin:center;animation:pulse 3.6s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.75}}
.ico .slide{animation:slide 4s ease-in-out infinite}
@keyframes slide{0%,20%,100%{transform:translateX(0)}50%,70%{transform:translateX(5px)}}
.ico .grow{transform-box:fill-box;transform-origin:bottom;animation:grow 4s ease-in-out infinite}
.ico .g2{animation-delay:.2s}.ico .g3{animation-delay:.4s}
@keyframes grow{0%,15%{transform:scaleY(.35)}45%,80%{transform:scaleY(1)}100%{transform:scaleY(.35)}}
.ico .blink{animation:blink 4s ease-in-out infinite}.ico .b2{animation-delay:.4s}.ico .b3{animation-delay:.8s}.ico .b4{animation-delay:1.2s}
@keyframes blink{0%,60%,100%{fill-opacity:.12}20%,40%{fill-opacity:.55}}
.ico .unroll{transform-box:fill-box;transform-origin:left;animation:unroll 4s ease-in-out infinite}
@keyframes unroll{0%,10%{transform:scaleX(.3)}45%,80%{transform:scaleX(1)}100%{transform:scaleX(.3)}}
.ico .snip{transform-box:fill-box;transform-origin:center;animation:snip 1.6s ease-in-out infinite}
@keyframes snip{0%,100%{transform:rotate(0)}50%{transform:rotate(-9deg)}}
.count{font-variant-numeric:tabular-nums}
.count.counting{display:inline-block;text-align:right}

/* reduced motion: every animation stops, drawings shown complete */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .ico .draw{stroke-dashoffset:0}
  .timeline::after{transform:none}
  .cut-piece{opacity:0;clip-path:none}
  .cut-piece:first-child{opacity:1}
  .cut-piece:first-child::after{transform:none}
  .cut-piece .sc{display:none}
  .cut-list li:first-child{border-color:var(--accent);background:#ecfdf8}
}