/* deck.css: the card-deck hero (loaded after the site's styles.css and themes.css). Every rule is scoped to the hero. */
.hero-3d{container-type:size}
.hero-3d canvas{opacity:0;touch-action:pan-y}

/* ---- first paint: the fallback is a transparent render of the exact rest pose (MLS in front, 1600x900 framing,
   front card and its shadow), placed where the deck fit puts the front card, so the 3D takes over without a visible
   change. Its studio light comes on in CSS (the 3D picks the ramp up where it is). The numbers come from the
   snapshot (stills/hero_review/art-direction.md, round 2): --fb-l is the deck box's left edge (the H1's ink + 56 px), --fb-w the
   deck box's width (7 % of it bleeds off the right), the deck box is centred 30 px above the hero's middle. ---- */
.hero .hero-fallback{
  --fb-l:calc(max(48px, 50cqw - 632px) + 6.02 * clamp(54px, 6.2vw, 88px) + 56px);
  --fb-w:calc((100cqw - var(--fb-l)) / .93);
  left:calc(var(--fb-l) + var(--fb-a) * var(--fb-w));
  top:calc(50cqh - 30px + var(--fb-b) * var(--fb-w));
  width:calc(var(--fb-c) * var(--fb-w));
  --fb-a:-.00644; --fb-b:-.21442; --fb-c:1.01264;
  right:auto;max-width:none;height:auto;transform:none;opacity:1;
  animation:fb-lights .7s .3s both cubic-bezier(.37,0,.63,1)}
@keyframes fb-lights{from{filter:brightness(.48)}to{filter:brightness(1)}}
.hero .hero-3d.is-3d .hero-fallback{display:block}
.hero .hero-3d.fb-off .hero-fallback{display:none}
@media (prefers-reduced-motion:reduce){ .hero .hero-fallback{animation:none;filter:none} }

/* the name tag on a peeking card */
.deck-tag{position:absolute;left:0;top:0;z-index:5;pointer-events:none;opacity:0;padding:7px 11px 8px 10px;background:#fff;border:1px solid rgba(16,48,92,.22);border-radius:3px;
  font:500 10px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:#4B545C;white-space:nowrap;box-shadow:0 8px 22px -10px rgba(16,35,60,.45)}
.deck-tag b{display:block;font:600 13px/1.1 var(--body);letter-spacing:.03em;color:#10305C;margin-bottom:2px}
/* callouts: a spec-sheet annotation, readable at arm's length */
html[data-theme=silver] .hero .callout{background:#10305C;padding:9px 13px 10px;border-radius:2px;font-size:11.5px;line-height:1.35;letter-spacing:.06em;color:#B9C6DA;box-shadow:0 10px 24px -14px rgba(10,25,45,.6)}
html[data-theme=silver] .hero .callout b{font-size:13px;letter-spacing:.05em;color:#fff;margin-bottom:1px}
html[data-theme=silver] .hero .callout-lines path{stroke:#10305C;stroke-width:1;opacity:.85}
html[data-theme=silver] .hero .callout-lines circle{fill:#fff;stroke:#10305C;stroke-width:2}
.hero .callout{margin:0!important}

/* picker: the Non-asbestos swatch is the card's dark brown; the autoplay hairline reads */
.hero .gx [data-g=na] .gx-sw{background:radial-gradient(circle at 50% 50%,transparent 5px,#dde1e5 5.5px,#9aa1a8 7.5px,#33271a 8px,#2c2115 13px);border:1px solid #1a130b}
.hero .gx button::after{height:3px}

/* phones: the pager under the deck (desktop has the picker) */
.deck-pager{display:none}

/* phones and small tablets: the deck sits straight under the headline, where it is seen first; the copy keeps its
   order around it (the grid and copy wrappers dissolve so the deck can slot between their children) */
@media (max-width:900px){
  .hero{justify-content:flex-start}
  .hero .hero-grid,.hero .hero-copy{display:contents}
  .hero-copy>*{margin-left:var(--pad);margin-right:var(--pad)}
  .hero-copy>.status{order:1;align-self:flex-start;margin-top:112px}
  .hero-copy>h1{order:2}
  .hero-3d{order:3;height:clamp(260px,74vw,460px);min-height:0;margin:2px 0 0}
  .deck-pager{order:4;display:flex;align-items:center;gap:12px;margin:0 var(--pad);padding:2px 0 4px;
    font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#4B545C}
  .deck-pager .dp-name{font:600 13px/1 var(--body);letter-spacing:.03em;color:#10305C;white-space:nowrap}
  .deck-pager .dp-name i{font:500 11px/1 var(--mono);font-style:normal;color:#4B545C;margin-left:4px}
  .deck-pager .dp-dots{display:flex;gap:2px;margin-left:auto}
  .deck-pager .dp-dots button{width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;position:relative}
  .deck-pager .dp-dots button::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;border:1.5px solid #10305C;box-sizing:border-box;transition:background .25s,transform .25s}
  .deck-pager .dp-dots button[aria-pressed=true]::before{background:#10305C;transform:scale(1.15)}
  .deck-pager .dp-hint{white-space:nowrap}
  .hero-copy>.lede{order:5;margin-top:10px}
  .hero-copy>.cta-row{order:6}
  .hero-copy>.hero-brands{order:7;align-self:flex-start}
  .hero-foot{order:8;margin-top:28px}
  .hero .hero-fallback{--fb-l:16px;--fb-w:calc((100cqw - 16px) / .95);top:calc(50cqh + var(--fb-b) * var(--fb-w))}
}
@media (max-width:760px){
  .hero-copy>.status{margin-top:92px}
  .hero h1{font-size:46px}
}
/* the picker arrives with the live deck instead of popping in */
.hero.has-3d .gx-dock{animation:gx-in .45s .1s both cubic-bezier(.2,.7,.2,1)}
@keyframes gx-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .hero.has-3d .gx-dock{animation:none} }

/* ===== hero review (2026-10-20): laptop fit, phone layout, focus, calm status ===== */
/* header: one line at laptop widths (the phone number goes before anything wraps) */
.site-header .nav a{white-space:nowrap} .site-header .btn svg{flex:none}
@media (max-width:1360px){ .site-header .bar{gap:32px} .site-header .nav{gap:24px} }
@media (max-width:1240px){ .site-header .phone{display:none} .site-header .btn{margin-left:auto} }
.phone span{color:#4B545C;font-size:11px}
/* short laptop screens (1280x720, 1366x768): the copy, picker and navy bar all fit above the fold */
@media (min-width:901px) and (max-height:820px){
  .site-header .bar{height:88px} .lockup img{height:66px}
  .hero .hero-grid{padding-top:104px}
  .hero h1{font-size:clamp(54px, min(6.2vw, 9.4vh), 88px)}
  .hero .status{margin-bottom:16px} .hero .lede{margin-top:14px} .hero .cta-row{margin-top:22px}
  .hero .hero-brands{margin-top:20px;padding-top:14px}
  .hero .hero-fallback{--fb-l:calc(max(48px, 50cqw - 632px) + 6.02 * clamp(54px, min(6.2vw, 9.4vh), 88px) + 56px)}
}
/* status: closed is a fact, not an alarm; the open dot pulses a few times, then rests */
.status.is-closed .dot{background:#8A929A}
.status.is-open .dot::after{animation-iteration-count:3}
/* focus: navy on the silver field, gold on the navy bar */
.site-header a:focus-visible,.hero a:focus-visible,.hero button:focus-visible{outline:2px solid #10305C;outline-offset:3px}
.hero .segments a:focus-visible{outline:2px solid #E3B341;outline-offset:-3px}
/* phones: the pager under the deck is the picker (the docked one repeated it, inverted on the navy foot); a tighter
   deck box brings the WhatsApp button up; the pager dots get full-size touch targets */
@media (max-width:900px){
  .hero .gx-dock{display:none}
  .hero-3d{height:clamp(240px,62vw,420px)}
  .deck-pager .dp-dots{gap:0;margin-right:-9px}
  .deck-pager .dp-dots button{width:44px;height:44px;margin:-9px -7px}
}
@media (max-width:380px){ .status-time{display:none} }
/* short phones (360x740 and the like): a smaller headline and deck so the WhatsApp button stays on the first screen */
@media (max-width:900px) and (max-height:780px){
  .hero h1{font-size:42px} .hero-3d{height:clamp(200px,56vw,380px)}
  .hero-copy>.lede{margin-top:6px} .hero .cta-row{margin-top:20px}
}
.hero .lede{text-wrap:pretty}

/* office hours (2026-10-20): a tinted badge under the WhatsApp button, where "will they answer?" is asked (no chip
   above the headline). Body face; the state word carries the colour: green when open, navy when closed */
.hero .status{display:inline-flex;align-items:center;gap:10px;width:fit-content;margin:16px 0 0;padding:9px 16px 9px 13px;border-radius:999px;
  border:1px solid rgba(16,48,92,.22);background:rgba(16,48,92,.07);font:500 15px/1.25 var(--body);letter-spacing:0;text-transform:none;color:#2A323A}
.hero .status b{font-weight:700;color:#10305C}
.hero .status.is-open{border-color:rgba(29,185,84,.5);background:rgba(29,185,84,.13)}
.hero .status.is-open b{color:#0B6B2E}
.hero .status .dot{width:10px;height:10px}
.hero .status.is-closed .dot{background:#10305C}
.hero .status-time{padding:0;border:0;color:#4B545C;font-variant-numeric:tabular-nums}
.hero .status-time::before{content:"·";margin-right:10px;color:#4B545C}
.hero .status-time:empty{display:none}
.hero .status-text{white-space:nowrap} @media (max-width:520px){ .hero .status-time{display:none} }
.hero .hero-brands{margin-top:26px}
@media (min-width:901px) and (max-height:820px){ .hero .status{margin-top:12px} .hero .hero-brands{margin-top:18px} }
/* phones: the headline opens the hero; the hours line follows the buttons */
@media (max-width:900px){
  .hero-copy>h1{margin-top:112px}
  .hero-copy>.status{order:6;margin:12px var(--pad) 0}
}
@media (max-width:760px){ .hero-copy>h1{margin-top:92px} }

/* the hero leads with the two brands we sell, at a size that can be read; the headline carries their colours: THG's indigo and the red both brands share */
.hero-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html[data-theme=silver] .hero h1{color:#10305C}
html[data-theme=silver] .hero h1 .accent{color:#E3101E;font-style:italic;font-weight:700}
.hero .hero-brands{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;column-gap:clamp(22px,2.6vw,38px);row-gap:10px;margin:0 0 clamp(16px,2.4vh,26px);padding:0;border:0}
.hero .hero-brands-label{grid-column:1/-1;margin:0;font:600 clamp(15px,1.15vw,17px)/1 var(--body);letter-spacing:.01em;text-transform:none;color:#3E4750}
.hero .hero-brands img.hb-thg{height:clamp(84px,7.4vw,108px)}
.hero .hero-brands img.hb-takoma{height:clamp(46px,4.2vw,62px)}
@media (min-width:901px) and (max-height:820px){
  .hero .hero-brands{margin:0 0 24px;row-gap:6px}
  .hero .hero-brands img.hb-thg{height:78px}
  .hero .hero-brands img.hb-takoma{height:46px}
}
/* phones: the brands open the hero, above the headline */
@media (max-width:900px){
  .hero-copy>.hero-brands{order:0;margin:112px var(--pad) 0;align-self:flex-start;column-gap:min(5vw,30px)}
  .hero .hero-brands img.hb-thg{height:min(16vw,84px)}
  .hero .hero-brands img.hb-takoma{height:min(9.6vw,50px)}
  .hero-copy>h1{margin-top:18px}
}
@media (max-width:760px){ .hero-copy>.hero-brands{margin-top:96px} .hero-copy>h1{margin-top:16px} }