/* Hero v3: a real video of two roller blinds coming down over a big window. Scrolling scrubs it (desktop), the bead
   chain and the bottom bar can be dragged, and when the blinds are down the visitor can change their colour.
   Phones and desktops without the video draw the blind in CSS over the still frame.
   Default (no JS, reduced motion) = the composed last frame with the headline. .hero-live (added by hero.js) = pinned scroll experience.
   Transform and opacity only. The assistant (bot.css) floats above. */

.hero{position:relative;z-index:1;--tshadow:0 1px 2px rgba(5,5,10,.85),0 3px 14px rgba(5,5,10,.6),0 10px 44px rgba(5,5,10,.55)}
.hero-track{position:relative}
.hero-live .hero-track{height:560vh}
/* the end sentinel sits where the sticky stage starts to leave, so the nav turns solid and the assistant card folds into its launcher
   before the next section slides under them (the offers follow the hero directly) */
.hero-live #hero-end{position:absolute;left:0;bottom:100vh;bottom:100svh;width:1px;height:0;pointer-events:none}
.hero-stage{position:relative;height:100vh;height:100svh;overflow:hidden;background:#17130f;isolation:isolate;
  --b:1;--k:1;--dim:1;--fl:20%;--fr:80%;--ft:12%;--fb:80%;--bar:26px;--fab:#514236;--fab2:#483a2f;--bw:1}
.hero-live .hero-stage{position:sticky;top:0;--b:0;--k:0;--dim:0;--bw:0}

/* ---------- picture layers (all share the same cover transform) ---------- */
.hero-poster,.hero-video,.hero-ends picture,.hero-ends img{position:absolute;inset:0;width:100%;height:100%}
.hero-poster{background:#17130f url("../video/hero-v3-end-bronze.jpg") 50% 50%/cover no-repeat}
.hero-live .hero-poster{background-image:url("../video/hero-v3-start.jpg")}
.hero-video{object-fit:cover;object-position:50% 50%;opacity:0;transition:opacity .9s var(--ease-soft);background:transparent}
.video-ready .hero-video{opacity:1}
.video-failed .hero-video{display:none}
.hero-ends{position:absolute;inset:0;pointer-events:none}
.hero-ends picture{display:block;opacity:0;transition:opacity .7s var(--ease-soft)}
.hero-ends img{object-fit:cover;object-position:50% 50%}
/* a colour still is visible only when the blinds are down (or always without JS / with reduced motion) */
.hero:not(.hero-live) .hero-ends picture[data-c="bronze"]{opacity:1}
.hero:not(.hero-live) [data-color="navy"] .hero-ends picture[data-c="navy"],
.hero:not(.hero-live) [data-color="grey"] .hero-ends picture[data-c="grey"],
.hero:not(.hero-live) [data-color="cream"] .hero-ends picture[data-c="cream"]{opacity:1}
.hero-live .at-end .hero-ends picture[data-c="bronze"]{opacity:1}
.hero-live .at-end[data-color="navy"] .hero-ends picture[data-c="navy"],
.hero-live .at-end[data-color="grey"] .hero-ends picture[data-c="grey"],
.hero-live .at-end[data-color="cream"] .hero-ends picture[data-c="cream"]{opacity:1}
.hero-live .hero-stage:not(.at-end) .hero-ends picture{opacity:0}
.hero-live .hero-stage:not(.video-on) .hero-ends picture{transition-duration:.35s}
/* the footage is only for big screens; everything else gets the still frames and the drawn blind */
@media (max-width:899.98px),(orientation:portrait) and (max-width:1024px),(orientation:portrait) and (pointer:coarse),(orientation:landscape) and (pointer:coarse) and (max-height:560px),(prefers-reduced-motion:reduce){
  .hero-video{display:none}
}
@media (max-width:899.98px){
  .hero-poster{background-image:url("../video/hero-v3-end-bronze-m.jpg")}
  .hero-live .hero-poster{background-image:url("../video/hero-v3-start-m.jpg")}
}

/* ---------- drawn blind (phones and no-video): extends the filmed fabric downward to the bar ---------- */
.blind{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;opacity:0}
.hero-live .video-off .blind{opacity:1}
.blind-fabric{position:absolute;left:var(--fl);width:calc(var(--fr) - var(--fl));top:var(--ft);height:calc(var(--fb) - var(--ft));-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 64px);mask-image:linear-gradient(180deg,transparent 0,#000 64px);
  background:linear-gradient(90deg,rgba(18,10,4,0) 0,rgba(18,10,4,.22) 100%),linear-gradient(180deg,var(--fab) 0,var(--fab2) 100%);will-change:transform;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.5)}
.blind-bar{position:absolute;left:0;right:0;bottom:0;height:var(--bar);background:linear-gradient(#5e4d3a 0,#463829 40%,#2c2218 100%);box-shadow:0 1px 0 rgba(255,238,200,.28) inset}
/* the room darkens as the sun is blocked (the footage does this by itself) */
.hero-dim{position:absolute;inset:0;z-index:3;pointer-events:none;background:#0b0805;opacity:calc(var(--dim) * .5)}
.video-on .hero-dim{display:none}

/* ---------- headline, on the lowered blind ---------- */
.hero-vignette{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse 120% 100% at 50% 45%,transparent 50%,rgba(5,4,3,.5) 100%);opacity:.7}
.hero-scrim{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:var(--k);
  background:radial-gradient(ellipse 46% 60% at var(--tx,68%) 50%,rgba(8,6,4,.55),rgba(8,6,4,.28) 52%,rgba(8,6,4,0) 78%)}
[data-tone="light"] .hero-scrim{background:radial-gradient(ellipse 46% 60% at var(--tx,68%) 50%,rgba(247,243,232,.62),rgba(247,243,232,.3) 52%,rgba(247,243,232,0) 78%)}

.hero-title{position:absolute;z-index:5;top:50%;left:var(--tl,50%);right:var(--gutter);max-width:640px;transform:translate3d(0,-50%,0);
  color:var(--text-primary);text-shadow:var(--tshadow);pointer-events:none}
.hero-title>*{--kk:clamp(0,(var(--k) - var(--d,0)) * 3.2,1);opacity:var(--kk);transform:translate3d(0,calc((1 - var(--kk)) * 18px),0)}
.hero-title .kicker{--d:0;margin-bottom:1.1rem}
.hero-h{--d:.05;font-weight:400}
.h-a{display:block;font:400 clamp(2.8rem,5.4vw,5.6rem)/.98 var(--font-display);letter-spacing:-.012em}
.h-b{display:block;margin-top:.3em;font:400 clamp(1.4rem,2.5vw,2.5rem)/1.12 var(--font-display)}
.hero-sub{--d:.25;margin-top:1.3rem;max-width:42ch;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.6}
.hero-cta{--d:.38;margin-top:1.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.hero-cta .btn{text-shadow:none}
.hero-note{--d:.5;margin-top:1rem;font-size:.9375rem;color:var(--text-secondary)}
/* the combo link inside the sub line: underlined in gold, the text keeps the tone of the line */
.hero-sub-a{color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.24em;transition:color .3s}
.hero-sub-a:hover{color:var(--accent-hover)}
[data-tone="light"] .hero-sub-a{text-decoration-color:rgba(10,16,48,.7)}
[data-tone="light"] .hero-sub-a:hover{color:#3a2a06}
.hero-live .at-end .hero-title{pointer-events:auto}
.hero:not(.hero-live) .hero-title{pointer-events:auto}
.hero:not(.hero-live) .hero-title>*{opacity:1;transform:none}
/* cream blinds are light: the type turns navy */
[data-tone="light"] .hero-title{color:#0A1030;text-shadow:0 1px 0 rgba(255,255,255,.3)}
[data-tone="light"] .hero-title .kicker{color:#6a5016}
[data-tone="light"] .hero-title .link-u{color:#0A1030}
[data-tone="light"] .hero-note{color:rgba(10,16,48,.85)}

/* ---------- colour choice (appears when the blinds are down) ---------- */
.hero-colors{position:absolute;z-index:6;right:calc(var(--gutter) + 92px);bottom:clamp(22px,5svh,44px);padding:12px 16px 10px;border-radius:18px;background:rgba(10,8,6,.62);border:1px solid rgba(245,239,224,.14);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);--kc:clamp(0,(var(--k) - .5) * 4,1);opacity:var(--kc);transform:translate3d(0,calc((1 - var(--kc)) * 12px),0);pointer-events:none}
.hero-colors[hidden]{display:block;visibility:hidden}
.js .hero-colors:not([hidden]){visibility:visible}
.hero-live .at-end .hero-colors{pointer-events:auto}
.hero:not(.hero-live) .hero-colors{opacity:1;transform:none;pointer-events:auto}
.hero-colors-t{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:8px}
.hero-colors-row{display:flex;gap:8px}
.swatch{display:grid;justify-items:center;gap:6px;min-width:56px;padding:4px 4px 2px;border:0;border-radius:12px;background:none;color:var(--text-secondary);cursor:pointer;font:500 .75rem/1.2 var(--font-body)}
.swatch i{width:36px;height:36px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(245,239,224,.3) inset,0 3px 8px rgba(0,0,0,.4);transition:box-shadow .3s var(--ease-soft),transform .3s var(--ease-out)}
.swatch[data-c="bronze"]{--c:#6E5A45}.swatch[data-c="navy"]{--c:#1E2A55}.swatch[data-c="grey"]{--c:#8E9196}.swatch[data-c="cream"]{--c:#E8E0CF}
.swatch:hover i{transform:scale(1.07)}
.swatch[aria-pressed="true"]{color:var(--text-primary)}
.swatch[aria-pressed="true"] i{box-shadow:0 0 0 2px var(--accent),0 0 0 4px rgba(10,8,6,.9),0 3px 8px rgba(0,0,0,.4)}
.swatch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (pointer:coarse){.swatch{min-width:60px;min-height:62px}.swatch i{width:40px;height:40px}}

/* ---------- grips: the bead chain and the bottom bar can be pulled ---------- */
.chain-grip,.rail-grip{position:absolute;z-index:7;display:none;touch-action:none;-webkit-tap-highlight-color:transparent}
.hero-live .chain-grip,.hero-live .rail-grip{display:block}
.chain-grip{left:calc(var(--cx,-100px) - 24px);top:var(--ct,0px);width:48px;height:max(48px,calc(var(--cb,0px) - var(--ct,0px)));border-radius:24px;cursor:grab}
.rail-grip{left:var(--rx0,0px);width:calc(var(--rx1,0px) - var(--rx0,0px));top:calc(var(--ry,-100px) - 6px);height:34px;cursor:ns-resize}
.chain-grip:active,.rail-grip:active{cursor:grabbing}
.chain-grip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.at-end .rail-grip{display:none}

.cue{position:absolute;z-index:6;left:50%;bottom:clamp(18px,4svh,36px);transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:9px 16px 9px 18px;border-radius:999px;background:rgba(8,8,15,.58);border:1px solid rgba(96,96,126,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text-primary);pointer-events:none;transition:opacity .5s var(--ease-soft)}
.cue-text{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.cue-t{display:none}
@media (pointer:coarse){.cue-m{display:none}.cue-t{display:inline}}
.cue-chev{width:20px;height:20px;animation:cue 2.4s var(--ease-soft) -.6s infinite}
@keyframes cue{0%,100%{transform:translate3d(0,0,0);opacity:.5}50%{transform:translate3d(0,6px,0);opacity:1}}
.cue.gone{opacity:0}
.hero:not(.hero-live) .cue{display:none}

/* nav sits on the footage: a soft dark gradient keeps its links readable until it turns solid */
.nav::after{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--nav-h) + 56px);background:linear-gradient(rgba(5,8,28,.82),rgba(5,8,28,.68) 36%,rgba(5,8,28,.3) 66%,rgba(5,8,28,0));z-index:-1;pointer-events:none;transition:opacity .4s var(--ease-soft)}
.nav.solid::after{opacity:0}

/* ---------- narrow screens: the headline goes to the top, the assistant keeps the bottom ---------- */
@media (max-width:899.98px){
  .hero-live .hero-track{height:500vh}
  .hero-title{left:var(--gutter);right:var(--gutter);top:calc(var(--nav-h) + 22px);max-width:none;transform:none}
  .h-a{font-size:clamp(2.4rem,11vw,3.4rem)}
  .h-b{font-size:clamp(1.2rem,5.2vw,1.7rem)}
  .hero-sub{margin-top:.9rem;font-size:.9375rem}
  .hero-cta{margin-top:1.1rem}
  .hero-note{display:none}
  .hero-scrim{background:radial-gradient(ellipse 130% 50% at 40% 16%,rgba(8,6,4,.7),rgba(8,6,4,.36) 52%,rgba(8,6,4,0) 80%)}
  [data-tone="light"] .hero-scrim{background:radial-gradient(ellipse 130% 50% at 40% 16%,rgba(247,243,232,.72),rgba(247,243,232,.36) 52%,rgba(247,243,232,0) 80%)}
  .hero-colors{right:auto;left:var(--gutter);bottom:clamp(14px,3svh,26px)}
  .hero-live .cue{display:none}
}
@media (max-height:560px){.cue{display:none}}
@media (prefers-reduced-motion:reduce){.cue-chev{animation:none}.hero-ends picture{transition:none}}