/* ==========================================================================
   The scroll-scrubbed hero. Loaded on the home page only.
   ========================================================================== */

/* the header sits over the footage rather than above it. Without this the
   hero slides up by the height of the header before the stage pins, which
   reads as the picture moving up as you scroll. */
/* The scrub hero runs up behind the translucent bar. The phone and tablet
   hero does not: its photograph is portrait, with the painting near the top,
   and the header was covering 128px of it. */
.hero{margin-top:calc(-1 * var(--navh,0px))}
.hero{position:relative;height:140vh;z-index:2}

.stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:var(--canvas-deep);
}

.poster{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:opacity 1.1s var(--ease-soft);
}

.stage video,.stage .poster{
  /* anchored to the top edge, so the frame opens at its highest point and
     grows from there instead of riding upward as you scroll */
  object-position:50% 0%;
  background-position:50% 0%;
  transform-origin:50% 0%;
  transform:scale(calc(1 + .18*var(--hp,0)));
}
.stage video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.1s var(--ease-soft);
  will-change:transform;
}
.stage.video-ready video{opacity:1}
.stage.video-failed video{display:none}

/* 1. the global base scrim, always on */
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 124% 94% at 50% 45%,
    rgba(19,41,63,0) 40%,rgba(19,41,63,.50) 100%);
}
.stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(19,41,63,.5),transparent 20%,transparent 78%,rgba(19,41,63,.56));
}

/* the loading ring */
.ring{
  position:absolute;left:50%;bottom:38px;width:48px;height:48px;
  margin-left:-24px;color:var(--accent);
  opacity:.72;pointer-events:none;
  transform:rotate(-90deg);
  transition:opacity .6s var(--ease-soft);
}
.stage.video-ready .ring{opacity:0}
.ring circle{transition:stroke-dashoffset .18s linear}

/* --------------------------------------------------------------------------
   Caption bands
   -------------------------------------------------------------------------- */

.bands{position:absolute;inset:0;pointer-events:none}
/* the bands let scroll and drag pass straight through to the stage, but
   anything inside them meant to be clicked has to take events back */
.bands a,.bands button{pointer-events:auto}

.band{
  position:absolute;inset:0;
  display:flex;align-items:center;align-items:safe center;
  padding:0 clamp(24px,7vw,110px);
  /* the stage is pulled up behind the sticky bar, so centring inside the full
     height put the words under it once the window got short. Reserve the bar's
     height at the top and centre in what is left. */
  padding-top:var(--navh,0px);
  opacity:0;
  text-shadow:var(--tshadow);
}
/* The band carries the shade that makes the headline readable, so when it
   snapped straight to full the photograph appeared to darken in one step.
   For the first moments after opening it eases in instead; the class comes
   off afterwards so scrolling between beats stays immediate. */
/* an even curve, not the site's usual soft-out one - that front-loaded the
   change and the shade still arrived in the first second */
.stage.intro .band{transition:opacity 2.8s cubic-bezier(.5,.05,.5,.95)}
.band .btn{text-shadow:none}

/* 2. the per-band scrim, anchored on that band's own column */
.band::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 78% 68% at var(--sx,50%) var(--sy,50%),
    rgba(5,10,18,var(--sa,.60)) 0%,
    rgba(5,10,18,calc(var(--sa,.60)*.86)) 44%,
    rgba(5,10,18,calc(var(--sa,.60)*.46)) 68%,
    rgba(5,10,18,0) 88%);
}

.band-col{position:relative;z-index:2;width:min(40ch,42vw)}
.band.left{justify-content:flex-start}
.band.right{justify-content:flex-end}
.band.right .band-col{text-align:right}
.band.low{align-items:flex-end;padding-bottom:9vh}
/* pulls a right-hand band inward, clear of the floor lamp at the frame's edge */
.band.inset-right{padding-right:clamp(24px,16vw,250px)}

.band.center{justify-content:center;align-items:center}
.band.center .band-col{width:min(46rem,82vw);text-align:center}

.band h1,.band h2,.band p{margin:0}
/* the shortened headline broke with "forever." stranded alone on line two.
   balance splits the lines evenly instead, at every width. */
.band h1,.hs-in h1{text-wrap:balance}
.band h1,.band .bh{
  font-family:var(--display);font-weight:300;
  font-size:clamp(30px,4.4vw,60px);line-height:1.06;
  letter-spacing:-.01em;
}
.band .sub{
  margin-top:16px;font-size:clamp(18px,1.85vw,26px);
  color:#DCE5EF;line-height:1.45;
}
/* small gold text over live footage needs its own backing, or it lands on a
   bright frame and disappears. Chip, per the legibility system. */
.band .kicker{
  display:inline-block;margin-bottom:18px;
  color:var(--accent-hover);
  background:rgba(8,10,18,.7);
  border:1px solid rgba(201,161,90,.3);
  border-radius:999px;
  padding:7px 16px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  text-shadow:0 1px 3px rgba(5,10,18,.9);
}

/* --------------------------------------------------------------------------
   Text choreography. Transform and opacity only, scrubbed off --k.
   -------------------------------------------------------------------------- */

.w{display:inline-block;white-space:nowrap}
.c{display:inline-block}

/* (f) drift-down: band 1, echoing the camera's downward push */
.drift-w .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-26px));
}

/* (e) word-by-word rise: the settle */
.rise-w .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*26px));
}

/* (d) word-punch with overshoot: band 2 */
.punch .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(0.62 + (0.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)));
}
.punch .w.em{--ov:.24;--sd:.16;--ss:2.6}

/* (c) blur-to-sharp: band 3. two stacked copies, opacity crossfade only */
.b2s{position:relative}
.b2s .soft{
  position:absolute;inset:0;filter:blur(11px);
  opacity:calc(1 - var(--k,0));
  pointer-events:none;
}
.b2s .sharp{opacity:var(--k,0)}

/* (b) grid snap-align: band 4 */
.snap .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc))*var(--jx,0px)));
}

/* the settle: headline, then subline, then CTA row */
.settle .sub{
  --ks:clamp(0,(var(--k,0) - .58)*3.4,1);
  opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks))*14px));
}
.settle .btn-row{
  --kb:clamp(0,(var(--k,0) - .74)*4.2,1);
  opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb))*14px));
  justify-content:center;
}

/* --------------------------------------------------------------------------
   The static hero, a designed layout for the five gates
   -------------------------------------------------------------------------- */

.hero-static{display:none;position:relative;z-index:2}

.hero-static .hs-art{
  position:relative;min-height:min(78vh,620px);
  background-size:cover;background-position:center 78%;
  background-color:var(--canvas-deep);
  display:flex;align-items:flex-end;
}
.hero-static .hs-art::after{
  content:"";position:absolute;inset:0;
  /* A flat wash either clouded the whole room or left the headline unreadable.
     Instead: a pool of navy held under the words, and the rest of the picture
     left clear - the same device the photo page headers use. */
  background:
    radial-gradient(ellipse 128% 64% at 27% 47%,
      rgba(19,41,63,.56) 0%,rgba(19,41,63,.52) 34%,rgba(19,41,63,.38) 62%,
      rgba(19,41,63,.14) 80%,rgba(19,41,63,0) 94%),
    linear-gradient(180deg,
      rgba(19,41,63,.32) 0%,rgba(19,41,63,.08) 24%,rgba(19,41,63,.08) 58%,
      rgba(19,41,63,.50) 86%,rgba(19,41,63,.92) 100%);
}
/* the words carry their own ring of shadow, so the pool above can stay light
   and the room shows through - the same device the page headers use */
.hs-in h1,.hs-in .sub{
  text-shadow:
    0 0 3px rgba(5,8,14,.98),
    0 0 7px rgba(5,8,14,.92),
    0 0 16px rgba(5,8,14,.8),
    0 0 34px rgba(5,8,14,.6),
    0 2px 4px rgba(5,8,14,.9);
}
.hs-in{
  position:relative;z-index:2;width:100%;
  padding:clamp(34px,7vw,64px) var(--gutter) clamp(30px,6vw,52px);
  max-width:var(--maxw);margin:0 auto;
  text-shadow:var(--tshadow);
}
.hs-in .kicker{
  display:inline-block;margin-bottom:18px;
  color:var(--accent-hover);
  background:rgba(8,10,18,.7);
  border:1px solid rgba(201,161,90,.3);
  border-radius:999px;padding:7px 14px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  text-shadow:0 1px 3px rgba(5,10,18,.9);
}
/* The upright-tablet and phone hero stays anchored bottom-left. The headline
   breaks where the markup says, so no character cap and no automatic
   balancing - either would introduce a third line. */
.hs-in h1{
  max-width:100%;margin:0 0 18px;
  text-wrap:normal;
}
.hs-in h1 .hs-br{display:block}
.hs-in .sub{
  color:#DCE5EF;max-width:46ch;margin:0 auto 16px;
  font-size:clamp(16.5px,3.8vw,20px);line-height:1.62;
}
/* the phone and tablet hero centres everything, the way the desktop one has
   always done - pill, headline, subline and buttons on one middle axis */
.hs-in{text-align:center}
.hs-in h1{margin-left:auto;margin-right:auto}
.hs-in .btn{text-shadow:none}
/* the closing phrase is the point of the sentence, so it is never split
   across two lines - it moves down whole instead */
.keep{white-space:nowrap}
/* the buttons sit under left-aligned text but centred in the frame */
.hs-in .btn-row{justify-content:center}

/* --------------------------------------------------------------------------
   The five static-hero gates. These five strings must match site.js exactly.
   -------------------------------------------------------------------------- */

@media (max-width:720px){
  .hero{display:none}
  .hero-static{display:block}
}
@media (orientation:portrait) and (max-width:1024px){
  .hero{display:none}
  .hero-static{display:block}
}
@media (orientation:portrait) and (pointer:coarse){
  .hero{display:none}
  .hero-static{display:block}
}
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px){
  .hero{display:none}
  .hero-static{display:block}
}
@media (prefers-reduced-motion:reduce){
  .hero{display:none}
  .hero-static{display:block}
}

/* --------------------------------------------------------------------------
   "forever": the one word the whole argument rests on.
   A warm gold that keeps its contrast over the footage, a brass line that
   draws itself under the word about a second in, as if underlined while
   being read, and two slow sparkles at whisper level.
   -------------------------------------------------------------------------- */
.fv-w{
  position:relative;display:inline-block;
  color:#F5DCA6;
  text-shadow:0 0 20px rgba(201,161,90,.5),0 2px 4px rgba(5,10,18,.92);
  animation:fvglow 4.6s var(--ease-soft) 2s infinite alternate;
}
.fv-line{
  position:absolute;left:-.03em;right:-.05em;bottom:-.20em;
  width:auto;height:.30em;overflow:visible;color:var(--accent-hover);
  filter:drop-shadow(0 0 7px rgba(201,161,90,.55));
  pointer-events:none;
}
.fv-line path{
  stroke-dasharray:220;stroke-dashoffset:220;
  animation:fvdraw 1.05s cubic-bezier(.22,.61,.36,1) .9s forwards;
}
.fv-w::before,.fv-w::after{
  content:"";position:absolute;width:.40em;height:.40em;
  background:#F7E3B4;pointer-events:none;opacity:0;
  clip-path:polygon(50% 0%,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0% 50%,41% 41%);
}
.fv-w::before{right:-.30em;top:-.26em;animation:fvspark 5.2s var(--ease-soft) 2.1s infinite}
.fv-w::after{left:-.26em;bottom:.02em;width:.28em;height:.28em;animation:fvspark 5.2s var(--ease-soft) 3.5s infinite}

@keyframes fvdraw{to{stroke-dashoffset:0}}
@keyframes fvglow{
  from{text-shadow:0 0 14px rgba(201,161,90,.34),0 2px 4px rgba(5,10,18,.92)}
  to{text-shadow:0 0 30px rgba(201,161,90,.72),0 2px 4px rgba(5,10,18,.92)}
}
@keyframes fvspark{
  0%,100%{opacity:0;transform:scale(.35) rotate(0deg)}
  9%{opacity:.95;transform:scale(1) rotate(28deg)}
  22%{opacity:0;transform:scale(.45) rotate(52deg)}
}

/* reduced motion: the line is simply already drawn, nothing moves */
@media (prefers-reduced-motion:reduce){
  .fv-w{animation:none}
  .fv-w::before,.fv-w::after{display:none}
  .fv-line path{animation:none;stroke-dashoffset:0}
}

@media (prefers-reduced-motion:reduce){
  .stage video,.stage .poster{transform:none}
}


/* A very short window (a part-height browser, a phone held sideways) leaves
   little room once the bar takes its share. Trim the hero type so the words
   still clear it rather than sliding underneath. */
@media (max-height:470px){
  .stage .band h1{font-size:clamp(24px,7vh,40px);line-height:1.1}
  .stage .band .sub{font-size:13.5px;margin-top:10px}
  .stage .band .kicker{margin-bottom:10px}
  .stage .band .btn-row{margin-top:14px}
  .stage .band .btn{padding:11px 20px}
}