:root {
  --motion-fast: 150ms;
  --motion-normal: 300ms;
  --motion-slow: 650ms;
  --motion-ease: cubic-bezier(.2,.75,.25,1);
}
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.offer-preview { margin:28px 0 15px; padding:21px 24px; border:1px solid #cbd5c1; border-radius:8px; background:#edf1e6; }
.offer-preview strong { display:block; font-size:20px; font-weight:600; line-height:1.3; }
.offer-preview p { font-size:15px; color:#56654e; margin-top:7px; line-height:1.6; }
.routine-link { display:inline-flex; align-items:center; gap:16px; min-height:44px; font-size:15px; font-weight:600; }
.routine-link:hover { text-decoration:underline; text-underline-offset:5px; }
.preview-controls { display:flex; align-items:center; justify-content:center; gap:12px; }
.motion-toggle { display:flex; align-items:center; gap:7px; padding:6px 9px; min-height:32px; border:1px solid #c4cbbd; border-radius:5px; background:transparent; font-size:11px; white-space:nowrap; }
.motion-toggle[aria-pressed=false] { background:#f9f8ef; }
.motion-toggle:disabled { opacity:.8; }
.view-switch { position:relative; isolation:isolate; }
.view-switch button { min-height:32px; }
.view-switch:before { content:""; position:absolute; z-index:-1; top:0; left:0; height:100%; width:var(--pill-width,0); transform:translateX(var(--pill-x,0)); background:var(--ink); border-radius:4px; transition:transform var(--motion-normal) var(--motion-ease),width var(--motion-normal) var(--motion-ease); }
.experience-ready .view-switch button.active { background:transparent; }
.site-header { height:88px; }
.fur-brand .brand-logo { width:190px; height:auto; max-width:none; }
.site-footer .fur-brand .brand-logo { width:144px; }
.shop-nav a { padding-block:8px; }
.cinematic-hero {
  width:min(1540px,calc(100% - 32px));
  max-width:none;
  margin-inline:auto;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  grid-template-rows:1fr auto;
  align-items:center;
  gap:0 10px;
  min-height:620px;
  padding:30px clamp(28px,5vw,80px) 0;
  border-radius:18px;
  color:#f6f0df;
  background:#203d30;
}
.cinematic-hero:before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at 76% 35%,#70916660,transparent 60%),linear-gradient(105deg,#142b2466,transparent 65%);
  transition:background var(--motion-slow) var(--motion-ease);
}
.cinematic-hero[data-scene="1"] { background:#253d3a; }
.cinematic-hero[data-scene="2"] { background:#394634; }
.cinematic-hero { transition:background var(--motion-slow) var(--motion-ease); }
.cinematic-hero .hero-copy { padding:20px 0 42px; position:relative; z-index:2; }
.cinematic-hero .eyebrow { color:#d2dbc0; font-size:11px; letter-spacing:1.8px; max-width:400px; }
.cinematic-hero .tiny-star { color:#ecb78b; }
.cinematic-hero h1 { font-family:var(--sans); font-weight:800; font-size:clamp(62px,6.8vw,100px); line-height:.96; letter-spacing:-.065em; text-transform:uppercase; }
.cinematic-hero h1 em { display:inline-block; margin-top:13px; font-family:var(--serif); font-size:.65em; text-transform:none; color:#e9b58b; font-weight:400; letter-spacing:-.05em; line-height:1.08; }
.cinematic-hero .hero-lead { color:#d4ddcb; max-width:320px; font-size:17px; margin-top:25px; line-height:1.65; }
.cinematic-hero .hero-cta { background:#f1ecd9; color:#203d30; margin-top:26px; border-radius:40px; min-width:220px; padding:17px 22px; font-size:15px; }
.cinematic-hero .hero-cta:hover { background:#fffcef; }
.hero-visual { min-width:0; position:relative; }
.hero-stage { position:relative; }
.scene-canvas { position:relative; min-width:0; overflow:hidden; }
.hero-stage>.scene-canvas { width:calc(100% + 60px); margin-left:-30px; height:470px; }
.scene-canvas canvas { width:100%; height:100%; position:absolute; inset:0; display:block; opacity:0; transition:opacity 450ms ease; }
.scene-fallback { width:100%; height:100%; object-fit:contain; display:block; border-radius:16px; transition:opacity 250ms ease; }
.scene-canvas[data-render-state=ready] canvas { opacity:1; }
.scene-canvas[data-render-state=ready]>.scene-fallback { opacity:0; pointer-events:none; }
.scene-canvas[data-render-state=fallback] canvas { opacity:0; }
.hero-stage figcaption { font-size:11px; color:#c8d4bd; text-align:center; margin:0 auto 25px; line-height:1.6; max-width:420px; }
.scene-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-column:1/-1; border-top:1px solid #9fae9255; width:100%; }
.scene-nav button { min-height:62px; display:flex; justify-content:center; gap:10px; align-items:center; padding:15px 18px; border:0; background:transparent; color:#cbd6c0; text-align:left; position:relative; font-size:14px; transition:color 250ms,background 250ms; }
.scene-nav button:hover { color:#fff5e6; background:#a3b68e0d; }
.scene-icon { width:23px; height:23px; flex:0 0 23px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; opacity:.85; }
.scene-nav button[aria-pressed=true] .scene-icon { color:#e9b58b; opacity:1; }
.scene-nav button+button { border-left:1px solid #9fae9233; }
.scene-nav button[aria-pressed=true] { color:#fff5e6; background:#a3b68e14; }
.scene-nav button:after { content:""; position:absolute; height:2px; bottom:0; left:18px; right:18px; background:#e6ac7b; transform:scaleX(0); transform-origin:left; transition:transform 350ms var(--motion-ease); }
.scene-nav button[aria-pressed=true]:after { transform:scaleX(1); }
.cinematic-hero a:focus-visible,.scene-nav button:focus-visible { outline-color:#f3c69f; }
.product-section { padding-block:80px; grid-template-columns:1fr 1fr; gap:70px; }
.product-art { border-radius:18px; max-width:490px; width:100%; transform-origin:center; }
.product-art img { max-height:440px; object-fit:contain; }
.product-copy { max-width:450px; }
.product-copy h2 { font-family:var(--sans); font-size:44px; font-weight:650; line-height:1.1; letter-spacing:-1.7px; max-width:410px; }
.check-list { font-size:16px; gap:12px; margin-block:24px; }
.button { transition:background var(--motion-fast),transform var(--motion-fast),box-shadow var(--motion-fast); }
.button:hover { transform:translateY(-2px); }
.button:active { transform:translateY(0) scale(.985); }
.hero-cta>span:last-child { transition:transform 180ms var(--motion-ease); }
.hero-cta:hover>span:last-child { transform:translate(3px,-2px); }
.how-section { background:#e9eddf; padding-block:70px; }
.how-section .section-heading { margin-bottom:42px; }
.how-section h2 { font-family:var(--sans); font-size:40px; font-weight:600; line-height:1.15; letter-spacing:-1.5px; }
.routine-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px; list-style:none; padding:0; margin:0; }
.routine-steps .step-card { border-color:#b7c5aa; padding-top:20px; }
.step-number { color:#566e49; font-size:12px; letter-spacing:1px; }
.routine-steps h3 { font-size:25px; font-weight:600; letter-spacing:-.6px; margin-top:14px; }
.routine-steps p { font-size:16px; max-width:30ch; color:#526349; line-height:1.65; margin-top:10px; }
.faq-section { padding-block:78px; align-items:start; gap:60px; }
.faq-intro h2 { font-family:var(--sans); font-size:40px; font-weight:600; line-height:1.15; letter-spacing:-1.5px; margin-top:12px; }
.faq-list summary { font-size:16px; padding-block:22px; }
.faq-list p { font-size:15px; line-height:1.7; }
.faq-list summary:after { content:""; width:8px; height:8px; flex:0 0 8px; border-right:1.5px solid; border-bottom:1.5px solid; transform:rotate(45deg); transition:transform 220ms var(--motion-ease); margin:7px 4px 0 0; }
.faq-list details[open] summary:after { content:""; transform:rotate(225deg); }
.site-footer { border-top:1px solid var(--line); padding-block:28px; }
.site-footer small { font-size:11px; }
.scene-canvas canvas { touch-action:pan-y; }
.hero-stage { contain:layout style; }
html[data-motion=off] { scroll-behavior:auto; }
html[data-motion=off] *,html[data-motion=off] *:before,html[data-motion=off] *:after { animation:none!important; transition:none!important; }
@media(max-width:1100px) {
  .cinematic-hero { padding-inline:32px; grid-template-columns:.92fr 1.08fr; min-height:570px; }
  .cinematic-hero h1 { font-size:clamp(58px,7vw,78px); }
  .hero-stage>.scene-canvas { height:410px; width:calc(100% + 50px); margin-left:-25px; }
  .product-section { gap:40px; }
  .product-copy h2 { font-size:38px; }
  .routine-steps { gap:32px; }
}
@media(max-width:760px) {
  .preview-controls { gap:7px; flex-wrap:wrap; }
  .motion-toggle { font-size:11px; padding:5px 8px; }
  .view-switch button { font-size:11px; }
  .concept-bar { min-height:70px; gap:6px; }
  .site-header { height:76px; }
  .fur-brand .brand-logo { width:174px; }
  .cinematic-hero { width:calc(100% - 20px); border-radius:14px; padding:31px 22px 0; display:flex; flex-direction:column; gap:0; min-height:0; }
  .cinematic-hero .hero-copy { padding:0; text-align:center; width:100%; }
  .cinematic-hero .hero-copy .eyebrow { font-size:10px; letter-spacing:1.3px; max-width:none; margin-bottom:20px; }
  .cinematic-hero h1 { font-size:clamp(56px,13vw,85px); line-height:.95; letter-spacing:-.065em; max-width:550px; margin:auto; }
  .cinematic-hero h1 em { margin-top:9px; font-size:.66em; }
  .cinematic-hero .hero-lead { font-size:16px; max-width:290px; margin-top:22px; }
  .cinematic-hero .hero-cta { min-width:230px; min-height:49px; margin-top:21px; font-size:15px; padding:14px 20px; }
  .hero-visual { width:100%; }
  .hero-stage { min-height:0; }
  .hero-stage>.scene-canvas { height:305px; width:calc(100% + 36px); margin-left:-18px; margin-top:4px; }
  .hero-stage figcaption { font-size:11px; max-width:280px; margin:0 auto 20px; }
  .scene-nav { width:calc(100% + 44px); margin-inline:-22px; }
  .scene-nav button { min-height:55px; padding:11px 12px; gap:7px; font-size:12px; }
  .scene-icon { width:19px; height:19px; flex-basis:19px; }
  .scene-nav button:after { left:12px; right:12px; }
  .product-section { padding-block:54px; grid-template-columns:1fr; gap:30px; }
  .product-art img { max-height:330px; }
  .product-copy h2 { font-size:36px; }
  .check-list { font-size:15px; }
  .offer-preview { padding:19px 20px; }
  .how-section { padding-block:50px; }
  .how-section .section-heading { margin-bottom:32px; }
  .how-section h2 { font-size:32px; letter-spacing:-1px; }
  .routine-steps { grid-template-columns:1fr; gap:25px; padding-inline:5px; }
  .routine-steps .step-card { display:grid; grid-template-columns:35px 1fr; gap:0 15px; padding-top:22px; }
  .step-number { grid-row:1/3; margin-top:6px; }
  .routine-steps h3 { font-size:23px; margin:0; }
  .routine-steps p { font-size:15px; max-width:none; margin-top:7px; }
  .faq-section { padding-block:50px; gap:24px; }
  .faq-intro h2 { font-size:32px; margin-top:0; }
  .faq-list summary { font-size:15px; }
  .faq-list p { font-size:15px; }
  .site-footer small { font-size:10px; }
}
@media(max-width:360px) {
  .cinematic-hero { padding-inline:18px; }
  .cinematic-hero h1 { font-size:48px; }
  .cinematic-hero .hero-copy .eyebrow { font-size:9px; }
  .hero-stage>.scene-canvas { height:275px; }
  .scene-nav { width:calc(100% + 36px); margin-inline:-18px; }
  .scene-nav button { padding:11px 9px; gap:5px; font-size:11px; }
  .scene-icon { width:17px; height:17px; flex-basis:17px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*:before,*:after { animation:none!important; transition:none!important; }
}