/* ==========================================================================
   LTTA CONNECT: Wildly Loved Tour
   Palette sampled directly from the sponsorship deck's colour-palette slide.
   ========================================================================== */

:root{
  --rust:#924F29;          /* primary block, headline fill                    */
  --rust-lift:#AC5C2B;     /* lit centre of the deck's title-slide gradient   */
  --rust-deep:#73351A;     /* gradient falloff                                */
  --rust-shadow:#603828;   /* gradient corners                                */
  --cream:#FAF5DE;         /* text on rust, light sections                    */
  --forest:#354636;        /* secondary accent, footer                        */
  --cocoa:#522A19;         /* deep contrast, hovers, overlays                 */
  --bone:#F1F1F1;          /* alternate light section background              */
  --brick:#BA604E;         /* the deck's "WILDLY" red                         */
  --brick-lift:#D7A38F;    /* the same red lifted to clear 4.5:1 on forest    */
  --night:#160C07;         /* near-black ground the florals sit in            */

  --ink:#2A1A12;           /* body copy on light                              */
  --ink-soft:#5C4A3F;      /* secondary copy on light                         */

  --display:"Poppins","Helvetica Neue",Arial,sans-serif;
  --serif:"Josefin Slab",Georgia,serif;
  --type:"Special Elite","Courier New",monospace;
  --body:"Work Sans","Helvetica Neue",Arial,sans-serif;

  --wrap:1180px;
  --gutter:clamp(1.25rem,5vw,3.5rem);
  --pad-y:clamp(4rem,10vw,7.5rem);
  --banner-max:851px;      /* native width of banner-hero.jpg, never exceed it */
  --radius:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* --- base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;           /* 17px floor on mobile */
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}   /* height:auto or the width/height attrs distort */
a{color:inherit}
h1,h2,h3,p,figure,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}

section[id]{scroll-margin-top:78px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:780px}

.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--cocoa);color:var(--cream);
  padding:.75rem 1.15rem;font-family:var(--type);font-size:.8rem;letter-spacing:.06em;
}
.skip-link:focus{left:.75rem;top:.75rem}

/* --- shared type --------------------------------------------------------- */
.eyebrow{
  font-family:var(--type);
  font-size:clamp(.7rem,1.8vw,.82rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.5;
}
.display{
  font-family:var(--display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.035em;
  word-spacing:-.06em;
  line-height:.92;
}
.display--xl{font-size:clamp(3rem,13vw,7rem)}
.display--lg{font-size:clamp(2.35rem,8vw,4.4rem)}

/* --- buttons ------------------------------------------------------------- */
.btn{
  --btn-bg:var(--cocoa);
  --btn-fg:var(--cream);
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;
  background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--type);
  font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.95rem 1.6rem;
  border:2px solid var(--btn-bg);
  border-radius:var(--radius);
  text-decoration:none;
  cursor:pointer;
  transition:background-color .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),transform .25s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn--lg{padding:1.15rem 2.1rem;font-size:.95rem}
.btn--block{width:100%}

.btn--primary:hover{--btn-bg:var(--rust)}
.btn--outline{--btn-bg:transparent;--btn-fg:var(--cocoa);border-color:var(--cocoa)}
.btn--outline:hover{--btn-bg:var(--cocoa);--btn-fg:var(--cream)}

/* on dark grounds the primary flips to cream */
.nav .btn--primary,.hero .btn--primary,.how .btn--primary,.mobile-cta .btn--primary{
  --btn-bg:var(--cream);--btn-fg:var(--cocoa);
}
.nav .btn--primary:hover,.hero .btn--primary:hover,.how .btn--primary:hover,.mobile-cta .btn--primary:hover{
  --btn-bg:#fff;--btn-fg:var(--cocoa);
}

/* --- focus --------------------------------------------------------------- */
:focus-visible{outline:3px solid var(--cocoa);outline-offset:3px}
.hero :focus-visible,.what :focus-visible,.how :focus-visible,
.foot :focus-visible,.nav :focus-visible,.mobile-cta :focus-visible,.skip-link:focus-visible{
  outline-color:var(--cream);
}

/* --- film grain over the whole page --------------------------------------
   The one detail that ties the floral treatment together. Fixed, so the
   compositor paints it once instead of on every scroll frame.              */
.grain{
  position:fixed;inset:0;z-index:90;pointer-events:none;
  opacity:.30;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:220px 220px;
}

/* ==========================================================================
   1. NAV
   ========================================================================== */
.nav{
  position:sticky;top:0;z-index:100;
  background:transparent;
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease);
}
.nav.is-stuck{background:var(--cocoa);box-shadow:0 1px 0 rgba(250,245,222,.14)}
.nav__inner{
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:.85rem var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.nav__logo{display:block;line-height:0}
.nav__logo img{
  width:auto;height:38px;
  filter:brightness(0) invert(1);opacity:.94;   /* black wordmark -> light, for rust/cocoa */
}
.nav__cta{padding:.7rem 1.25rem;font-size:.8rem}
@media (max-width:859px){ .nav__cta{display:none} }   /* replaced by the bottom bar */

/* ==========================================================================
   2. HERO
   Under 768px the banner is unreadable, so the hero is recomposed from its
   parts. From 768px up the banner itself takes over, capped at its native
   width so it never softens.
   ========================================================================== */
.hero{
  position:relative;isolation:isolate;
  display:flex;align-items:center;
  min-height:clamp(540px,88svh,880px);
  margin-top:-70px;padding-top:70px;      /* sit under the transparent nav */
  background:var(--night);
  color:var(--cream);
  overflow:hidden;
  text-align:center;
}
/* blurred, darkened carnations running past the banner on every side.
   [FLORAL ASSET NEEDED] 2400x1000, oversized bloom, deep shadow. Interim crop
   from the deck's carnation slide; fine while this blurred, but commission it. */
.hero__bg{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 42%, rgba(146,79,41,.34) 0%, rgba(22,12,7,.55) 55%, rgba(12,7,4,.9) 100%),
    url("assets/img/floral-hero-m.jpg")
      center/cover no-repeat;
}
.hero__inner{
  width:100%;min-width:0;max-width:var(--wrap);margin-inline:auto;
  padding:clamp(3rem,9vw,5rem) var(--gutter);
}
.hero__eyebrow{opacity:.92;margin-bottom:clamp(1.5rem,5vw,2.25rem)}
.hero__h1{margin:0}

/* --- the banner, desktop only -------------------------------------------- */
.hero__banner{display:none}
.hero__banner img{
  width:100%;max-width:var(--banner-max);   /* never scaled past native 851px */
  height:auto;margin-inline:auto;
  border-radius:var(--radius);
  box-shadow:0 24px 60px rgba(10,5,2,.5);
}

/* Reserved for the layered version: B. Simone as a transparent PNG over a
   separate floral plate, so the two can move independently later. */
.hero__cutout{
  display:none;
  position:absolute;left:0;bottom:0;width:min(38%,420px);height:auto;
  pointer-events:none;
}

/* --- the lockup, rebuilt in CSS: the mobile hero ------------------------- */
.lockup{
  display:block;
  font-size:clamp(2rem,10.6vw,4.2rem);
  line-height:.9;
  margin-bottom:clamp(1.4rem,4vw,2rem);
}
.lockup__line1,.lockup__line2{display:block}
.lockup__line1{
  font-family:var(--display);font-weight:800;
  text-transform:uppercase;letter-spacing:-.045em;word-spacing:-.04em;
  color:var(--cream);
  text-shadow:0 .035em .06em rgba(10,5,2,.55);
}
.lockup__line2{
  position:relative;
  margin-top:-.16em;
  white-space:nowrap;
}
.lockup__wildly{
  font-family:var(--display);font-weight:800;
  text-transform:uppercase;letter-spacing:-.045em;
  font-size:.58em;
  color:var(--brick);
  text-shadow:0 .04em .06em rgba(10,5,2,.5);
}
.lockup__loved{
  font-family:var(--serif);font-weight:300;
  text-transform:uppercase;
  font-size:.62em;
  letter-spacing:.24em;
  margin-left:.06em;margin-right:-.24em;   /* absorb the trailing track */
  color:var(--cream);
}
.lockup__tour{
  display:inline-block;
  font-family:var(--type);
  font-size:.155em;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--cream);
  background:var(--cocoa);
  padding:.5em .85em .42em;
  border-radius:3px;
  transform:rotate(-14deg);
  transform-origin:50% 50%;
  margin-left:-2em;          /* tag em, not lockup em: enough to sit over the final D */
  vertical-align:.35em;
  box-shadow:0 .12em .35em rgba(10,5,2,.45);
}

/* --- the banner's date column, rebuilt as live text on mobile ------------ */
.hero__dates{
  display:grid;gap:.42rem;
  margin:0 0 clamp(1.4rem,4vw,1.9rem);
  font-family:var(--type);
  font-size:clamp(.82rem,3.4vw,.95rem);
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream);
}
.hero__dates b{font-weight:400;color:var(--brick-lift)}

.hero__lede{
  max-width:36ch;margin-inline:auto;
  text-wrap:pretty;                   /* keeps "below." off a line of its own */
  font-size:clamp(1.0625rem,2.3vw,1.2rem);
  color:rgba(250,245,222,.93);
  margin-bottom:clamp(1.85rem,5vw,2.5rem);
}
.hero__actions{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(1rem,3vw,1.75rem);flex-wrap:wrap;
}
.hero__link{
  font-family:var(--type);font-size:.85rem;letter-spacing:.06em;
  color:var(--cream);text-decoration:none;
  border-bottom:1px solid rgba(250,245,222,.5);
  padding-bottom:.15rem;
}
.hero__link:hover{border-bottom-color:var(--cream)}

/* --- 768px and up: the official banner replaces the CSS lockup ----------- */
@media (min-width:768px){
  .hero__bg{
    /* [FLORAL ASSET NEEDED] 2400x1000 desktop floral field */
    background-image:
      radial-gradient(110% 80% at 50% 45%, rgba(146,79,41,.3) 0%, rgba(22,12,7,.58) 55%, rgba(12,7,4,.92) 100%),
      url("assets/img/floral-hero.jpg");
  }
  .lockup,.hero__dates{display:none}       /* the banner carries both */
  .hero__banner{display:block;margin-bottom:clamp(2rem,4vw,3rem)}
  .hero__eyebrow{margin-bottom:clamp(2rem,4vw,3rem)}
  .hero__inner{padding-block:clamp(3.5rem,7vw,6rem)}
}

/* ==========================================================================
   3. WHAT IS IT
   ========================================================================== */
.what{background:var(--rust);color:var(--cream);padding-top:var(--pad-y);position:relative;isolation:isolate}
/* [FLORAL ASSET NEEDED] 1800x1200, close-cropped dark carnation */
.what__floral{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.38;mix-blend-mode:multiply;
  background:
    url("assets/img/floral-whatis.jpg")
      center/cover no-repeat;
}
.what .wrap{position:relative}
/* This section is read rather than scanned, so the measure is short and the
   leading is generous. */
.what .wrap{max-width:880px}          /* a reading column, centred in the block */
.what__h{
  font-size:clamp(2.3rem,6.4vw,4.5rem);
  max-width:14ch;
  margin-bottom:clamp(1.75rem,4vw,2.5rem);
}
.what__copy{
  max-width:62ch;                       /* roughly 62 characters a line */
  font-size:clamp(1.0625rem,2.1vw,1.2rem);
  line-height:1.75;
}
.what__copy > p{margin-bottom:1.35em}
.what__copy > p:last-child{margin-bottom:0}
/* keep a single word off the last line. :not() so the pull lines keep `balance`,
   which is doing a different job. */
.what__copy > p:not(.what__pull){text-wrap:pretty}

/* The two lines people will screenshot. They step out of the body flow:
   display face, centred, and given real air on both sides so a crop of one
   still reads as a finished image. */
.what__pull{
  font-family:var(--display);font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.03em;word-spacing:-.03em;
  line-height:1.02;
  font-size:clamp(1.75rem,5.2vw,3.1rem);
  text-align:center;
  text-wrap:balance;                  /* no orphan word on the last line */
  max-width:17ch;
  margin-inline:auto;
  margin-block:clamp(2.75rem,7vw,4.25rem) !important;
  text-shadow:0 .03em .06em rgba(56,24,12,.28);
}
.what__pull--last{max-width:20ch}
/* the torn edge supplies the space below, so the last line does not double it */
.what__copy > .what__pull:last-child{margin-bottom:0 !important}
.torn{display:block;width:100%;height:clamp(22px,3.5vw,40px);margin-top:clamp(3rem,8vw,5.5rem);fill:var(--cream)}
.torn path{fill:var(--cream)}

/* --- section seams -------------------------------------------------------
   A band of blurred carnations that bleeds one section's colour into the
   next. --from and --to are set per instance in the markup.
   [FLORAL ASSET NEEDED] 2400x400, wide, heavily blurred, mid-dark.        */
.seam{
  position:relative;
  height:clamp(120px,17vw,200px);
  background:
    url("assets/img/floral-seam.jpg")
      center/cover no-repeat;
}
.seam::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,
    var(--from) 0%, color-mix(in srgb, var(--from) 55%, transparent) 22%,
    transparent 46%, transparent 54%,
    color-mix(in srgb, var(--to) 55%, transparent) 78%, var(--to) 100%);
}
/* fallback for engines without color-mix: a plain two-stop fade */
@supports not (background: color-mix(in srgb, red 50%, transparent)){
  .seam::after{background:linear-gradient(to bottom,var(--from) 0%,transparent 48%,transparent 52%,var(--to) 100%)}
}

/* ==========================================================================
   4. WHAT TO EXPECT
   ========================================================================== */
.expect{background:var(--bone);padding-block:var(--pad-y)}
.expect .eyebrow{color:var(--rust);margin-bottom:.7rem}
.expect .display{color:var(--cocoa);margin-bottom:clamp(2rem,5vw,3rem)}

.tile{position:relative;margin:0;overflow:hidden;border-radius:var(--radius);background:#d9d5cf}
/* out of flow, so a tile's height comes from its aspect-ratio or from the grid
   row, never from the image's own intrinsic size */
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile::after{           /* warm, slightly golden scrim so the caption reads */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(58,24,14,.8) 0%,
    rgba(104,50,22,.46) 11%,
    rgba(150,84,40,.16) 24%,
    rgba(172,92,43,.04) 34%,
    transparent 44%);
}
.tile .tile__cap{
  position:absolute;left:clamp(.85rem,2vw,1.25rem);bottom:clamp(.7rem,1.8vw,1.05rem);
  z-index:2;color:var(--cream);
  text-shadow:0 1px 3px rgba(30,12,6,.75),0 2px 12px rgba(30,12,6,.5);
}
/* Eight tiles. The rhythm is deliberately irregular at both breakpoints so the
   section never settles into a regular grid, the heaviest frame is plainly the
   biggest, and the quiet frames sit between the intense ones.

   Mobile is a two column grid rather than one long stack: eight photos stacked
   full width ran to about 3000px of scrolling. The important frames still span
   both columns, because a 163px wide photograph of someone crying carries
   nothing. */
.grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-auto-flow:dense;                 /* half width tiles backfill beside the full width ones */
  gap:clamp(.55rem,2vw,1rem);
}
.grid > .tile--setup  {grid-column:span 2; aspect-ratio:3/2}
.grid > .tile--room   {aspect-ratio:3/4}
.grid > .tile--bloom  {aspect-ratio:3/4}
.grid > .tile--embrace{grid-column:span 2; aspect-ratio:2/3}
.grid > .tile--circle {aspect-ratio:3/4}
.grid > .tile--prayer {aspect-ratio:3/4}
.grid > .tile--moved  {grid-column:span 2; aspect-ratio:4/5}
.grid > .tile--hands  {grid-column:span 2; aspect-ratio:5/2}

/* the half width tiles are only ~163px across on a phone, so their captions
   are set smaller to stop them running over two ragged lines */
@media (max-width:899px){
  .tile--room .tile__cap,
  .tile--bloom .tile__cap,
  .tile--circle .tile__cap,
  .tile--prayer .tile__cap{
    font-size:.6rem;
    letter-spacing:.06em;
    line-height:1.35;
  }
}

@media (min-width:900px){
  .grid{
    columns:auto;                       /* back to a grid above the breakpoint */
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:clamp(.75rem,1.6vw,1.15rem);
  }
  .grid > .tile{margin-bottom:0}

  /* The rhythm is deliberately 2, 2, 3, 1 so the section never settles into a
     regular grid, and so the heaviest frame is plainly the biggest. */

  /* row 1, wide and calm: the empty space, then the room filled */
  .grid > .tile--setup  {grid-column:1/7;   grid-row:1; aspect-ratio:3/2}
  .grid > .tile--room   {grid-column:7/13;  grid-row:1; aspect-ratio:auto}

  /* row 2, the emotional centre. The embrace is the largest tile on the page
     and keeps its native 2:3 so neither face is cropped. The flowers sit
     beside it as the quiet counterweight. */
  .grid > .tile--embrace{grid-column:1/6;   grid-row:2; aspect-ratio:2/3}
  .grid > .tile--bloom  {grid-column:6/13;  grid-row:2; aspect-ratio:auto}

  /* row 3, three shorter frames. The tears sit far from the embrace above. */
  .grid > .tile--circle {grid-column:1/5;   grid-row:3; aspect-ratio:3/4}
  .grid > .tile--prayer {grid-column:5/9;   grid-row:3; aspect-ratio:auto}
  .grid > .tile--moved  {grid-column:9/13;  grid-row:3; aspect-ratio:auto}

  /* row 4, the intimate detail closes the section as a band */
  .grid > .tile--hands  {grid-column:1/13;  grid-row:4; aspect-ratio:3/1}
}

/* ==========================================================================
   4b. RECAPS
   Three vertical recap clips, nothing captioned underneath. Three across on
   desktop, a snap-scroll reel on mobile with the next edge showing so the
   swipe is obvious.
   ========================================================================== */
.voices{
  position:relative;isolation:isolate;
  background:var(--night);color:var(--cream);
  /* no captions under the frames now, so the block closes tighter at the foot */
  padding-block:var(--pad-y) calc(var(--pad-y) * .62);
  overflow:hidden;
}
/* [FLORAL ASSET NEEDED] 1800x1200, its own bloom rather than reusing the one above */
.voices__floral{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.5;
  background:
    radial-gradient(90% 70% at 70% 12%, rgba(146,79,41,.34) 0%, transparent 62%),
    url("assets/img/floral-whatis.jpg")
      center/cover no-repeat;
}
.voices .eyebrow{color:var(--brick-lift);margin-bottom:.7rem}
/* this heading is a full sentence rather than a two word display phrase,
   so it is set smaller than the other section headings on purpose */
.voices .display{
  font-size:clamp(1.85rem,4.4vw,3rem);
  max-width:19ch;
  margin-bottom:.85rem;
}
.voices__note{
  color:var(--brick-lift);
  font-family:var(--type);
  font-size:clamp(.8rem,2vw,.9rem);
  letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:clamp(1.5rem,3.6vw,2.25rem);
}

.reel{display:grid;gap:clamp(1rem,2.5vw,1.5rem)}
@media (min-width:820px){.reel{grid-template-columns:repeat(3,1fr)}}

/* mobile: horizontal snap reel, the next card peeking so the swipe reads */
@media (max-width:819px){
  .reel{
    grid-auto-flow:column;
    grid-auto-columns:76%;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-left:var(--gutter);
    padding-inline:var(--gutter);
    margin-inline:calc(var(--gutter) * -1);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .reel::-webkit-scrollbar{display:none}
  .voice{scroll-snap-align:start}
}

.voice{position:relative;margin:0}
.voice__frame{
  position:relative;
  aspect-ratio:9/16;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--cocoa);
}
.voice__frame img,.voice__frame video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
}
.voice__frame video{z-index:1}
.voice__scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(70% 55% at 50% 62%, transparent 0%, rgba(12,6,3,.5) 100%);
}
.voice.is-started .voice__scrim{opacity:0;transition:opacity .3s var(--ease)}

/* One control over the whole frame: play before a tap, pause during. It is
   never removed from the DOM, so it stays reachable by keyboard; while playing
   it simply fades back until you hover, focus or tap. */
.voice__play{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;
  width:100%;
  background:none;border:0;cursor:pointer;
  color:var(--cream);
  font-family:var(--type);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  opacity:1;
  transition:opacity .3s var(--ease);
}
.voice__icon{
  display:grid;place-items:center;
  width:64px;height:64px;border-radius:50%;
  border:2px solid var(--cream);
  background:rgba(12,6,3,.4);
  transition:background-color .25s var(--ease),transform .25s var(--ease);
}
/* play: a triangle drawn from borders */
.voice__icon::before{
  content:"";
  border-left:17px solid var(--cream);
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
  margin-left:5px;
}
/* pause: the same element becomes two bars, the second drawn with a shadow */
.voice.is-playing .voice__icon::before{
  border:0;margin:0;
  width:6px;height:21px;
  background:var(--cream);
  box-shadow:12px 0 0 var(--cream);
  transform:translateX(-6px);
}
.voice__play:hover .voice__icon{background:rgba(12,6,3,.75);transform:scale(1.06)}

/* out of the way while it plays, back on any intent to interact */
.voice.is-playing .voice__play{opacity:0}
.voice.is-playing .voice__play:hover,
.voice.is-playing .voice__play:focus-visible{opacity:1}
@media (hover:none){
  /* no hover on touch, so keep a light hint that the frame is tappable */
  .voice.is-playing .voice__play{opacity:.28}
}

/* soft-locked state while there is no footage yet */
.voice__pending{
  position:absolute;inset:0;z-index:3;
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:clamp(1.5rem,5vw,2.5rem);
  font-family:var(--type);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(250,245,222,.9);
}

/* mute toggle, because these get watched muted first */
.voice__mute{
  position:absolute;right:.6rem;bottom:.6rem;z-index:4;
  display:none;
  padding:.45rem .7rem;
  background:rgba(12,6,3,.72);border:1px solid rgba(250,245,222,.4);
  border-radius:var(--radius);
  color:var(--cream);cursor:pointer;
  font-family:var(--type);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
}
.voice.is-started .voice__mute{display:block}
.voice__mute:hover{background:rgba(12,6,3,.9)}

.reel__hint{
  margin-top:.85rem;
  font-family:var(--type);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(250,245,222,.76);
}
@media (min-width:820px){.reel__hint{display:none}}

/* ==========================================================================
   5. TOUR STOPS
   ========================================================================== */
.stops{position:relative;isolation:isolate;background:var(--cream);padding-block:var(--pad-y);overflow:hidden}
.stops .eyebrow{color:var(--rust);margin-bottom:.7rem}
.stops .display{color:var(--cocoa)}
.stops__note{max-width:46ch;color:var(--ink-soft);margin-top:1rem;margin-bottom:clamp(2rem,5vw,3rem)}

.stops__pairs{display:grid;gap:clamp(1.5rem,4vw,2.5rem)}
@media (min-width:820px){.stops__pairs{grid-template-columns:1fr 1fr}}

.weekend{border-top:2px solid var(--rust);padding-top:1rem}
.weekend__label{color:var(--rust);margin-bottom:1rem;display:block}
.weekend__cards{display:grid;gap:clamp(.75rem,2vw,1rem);grid-auto-rows:1fr}

.stop{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--night);
  border:1px solid rgba(82,33,25,.3);
  border-radius:var(--radius);
  padding:clamp(1.15rem,3vw,1.5rem);
  display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;
  color:var(--cream);
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
/* One bloom per city, darkened at source so the date stays the loudest thing.
   [FLORAL ASSET NEEDED] five distinct flowers, 900x560 each. */
.stop::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--bloom) center/cover no-repeat;
  opacity:.9;
  transition:transform .5s var(--ease);
}
.stop:hover{border-color:var(--rust)}
.stop:hover::before{transform:scale(1.04)}
.stop__city{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:-.03em;line-height:1;
  font-size:clamp(1.5rem,4.2vw,2rem);
  color:var(--cream);
  text-shadow:0 2px 12px rgba(8,4,2,.6);
}
.stop__state{color:var(--brick-lift)}
.stop__when{font-family:var(--type);font-size:.82rem;letter-spacing:.06em;color:rgba(250,245,222,.88);margin-top:.45rem;text-transform:uppercase}
.stop__venue{font-family:var(--type);font-size:.78rem;letter-spacing:.06em;color:var(--brick-lift);margin-top:.3rem;text-transform:uppercase}
.stop .btn--outline{--btn-fg:var(--cream);border-color:rgba(250,245,222,.55)}
.stop .btn--outline:hover{--btn-bg:var(--cream);--btn-fg:var(--cocoa);border-color:var(--cream)}
.stop :focus-visible{outline-color:var(--cream)}
.stop__btn{flex-shrink:0;align-self:flex-start;padding:.75rem 1.15rem;font-size:.72rem;text-align:center}
@media (max-width:520px){
  .stop{align-items:stretch}
  .stop__btn{align-self:stretch;width:100%}
}

/* Columbus stands alone three weeks later, so it gets its own break */
.stops__solo{margin-top:clamp(2.5rem,7vw,4rem)}
.solo{
  border-top:2px solid var(--rust);
  padding-top:clamp(1.5rem,4vw,2rem);
}
.solo__label{color:var(--rust);display:block;margin-bottom:1rem}
.solo .stop{border-style:dashed;border-color:rgba(250,245,222,.35)}
.solo .stop:hover{border-color:var(--cream)}

.stops__noscript{margin:1.5rem 0;display:grid;gap:.5rem}

/* ==========================================================================
   6. HOW IT WORKS
   ========================================================================== */
.how{background:var(--forest);color:var(--cream);padding-block:var(--pad-y)}
.how .eyebrow{color:rgba(250,245,222,.75);margin-bottom:.7rem}
.how .display{margin-bottom:clamp(2rem,5vw,3rem)}
.steps{display:grid;gap:clamp(1.75rem,4vw,2.25rem)}
@media (min-width:780px){.steps{grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem)}}
.step{border-top:1px solid rgba(250,245,222,.28);padding-top:1.15rem}
.step__num{display:block;color:var(--brick-lift);margin-bottom:.65rem}
.step__h{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:-.03em;font-size:clamp(1.35rem,3.4vw,1.7rem);line-height:1;
  margin-bottom:.6rem;
}
.step p{color:rgba(250,245,222,.88);max-width:34ch}

/* Step three is a promise, not just the last step. It gets the accent rule,
   a lifted ground and the turnaround set in the brand red. */
.step--promise{
  border-top:2px solid var(--brick-lift);
  background:linear-gradient(to bottom, rgba(215,163,143,.10), transparent 68%);
  padding:1.15rem clamp(.9rem,2vw,1.15rem) 1.15rem;
  margin-inline:clamp(-1.15rem,-2vw,-.9rem);
  border-radius:0 0 var(--radius) var(--radius);
}
.step--promise .step__num{color:var(--cream)}
.step--promise .step__h{font-size:clamp(1.45rem,3.6vw,1.85rem)}
.step--promise .step__h em{
  font-style:normal;
  color:var(--brick-lift);
  white-space:nowrap;
}
@media (max-width:779px){
  .step--promise{margin-inline:0;padding-inline:0}
}
.how__cta{margin-top:clamp(2.25rem,6vw,3.25rem)}

/* ==========================================================================
   7. MEET B. SIMONE
   ========================================================================== */
.founder{background:var(--bone);padding-block:calc(var(--pad-y) * 1.15)}
.founder__grid{display:grid;gap:clamp(2.25rem,6vw,5rem);align-items:center}
@media (min-width:900px){.founder__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}}
.founder__media{margin:0}
.founder__portrait{
  width:100%;max-width:460px;margin-inline:auto;
  border-radius:var(--radius);
  box-shadow:0 22px 50px rgba(56,24,12,.16);
}
.founder .eyebrow{color:var(--rust);margin-bottom:.7rem}
.founder .display{color:var(--cocoa);margin-bottom:1.25rem}
.founder__bio{color:var(--ink-soft);max-width:48ch;margin-bottom:1.15rem;font-size:1.0625rem;line-height:1.7}
.founder__bio + .founder__bio{margin-bottom:1.85rem}

/* ==========================================================================
   8. FAQ
   ========================================================================== */
.faq{background:var(--cream);padding-block:var(--pad-y)}
.faq .eyebrow{color:var(--rust);margin-bottom:.7rem}
.faq .display{color:var(--cocoa);margin-bottom:clamp(1.75rem,4vw,2.5rem)}
.faq__list{border-top:1px solid rgba(82,33,25,.2)}
.qa{border-bottom:1px solid rgba(82,33,25,.2)}
.qa summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
  padding:1.15rem 0;
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1.15;
  font-size:clamp(1.02rem,2.7vw,1.22rem);
  color:var(--cocoa);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";flex-shrink:0;width:16px;height:16px;
  background:
    linear-gradient(var(--rust),var(--rust)) center/100% 2px no-repeat,
    linear-gradient(var(--rust),var(--rust)) center/2px 100% no-repeat;
  transition:transform .3s var(--ease);
}
.qa[open] summary::after{transform:rotate(90deg);background-size:100% 2px,0 100%}
.qa__body{padding:0 0 1.35rem}
.qa__body p{color:var(--ink-soft);max-width:62ch}

/* ==========================================================================
   9. SPONSORS
   ========================================================================== */
.sponsors{background:var(--bone);padding-block:clamp(2.25rem,5vw,3rem);text-align:center}
.sponsors__h{color:var(--rust);margin-bottom:.6rem}
.sponsors__p{color:var(--ink-soft);font-size:.98rem;max-width:52ch;margin-inline:auto}
.sponsors__p a{color:var(--cocoa);text-underline-offset:3px}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.foot{position:relative;isolation:isolate;background:var(--forest);color:var(--cream);padding-block:clamp(2.75rem,7vw,4rem)}
/* [FLORAL ASSET NEEDED] 1800x950, near-black, deeply shadowed */
.foot__floral{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.9;
  background:
    linear-gradient(to bottom, rgba(53,70,54,.92) 0%, rgba(53,70,54,.28) 34%, rgba(11,8,5,.8) 100%),
    url("assets/img/floral-footer.jpg")
      center/cover no-repeat;
}
.foot__inner{display:grid;gap:1.5rem;justify-items:start}
.foot__logo{width:auto;height:52px;filter:brightness(0) invert(1);opacity:.92}
.foot__links{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem}
.foot__links a{
  font-family:var(--type);font-size:.82rem;letter-spacing:.06em;
  color:rgba(250,245,222,.9);text-decoration:none;
  border-bottom:1px solid rgba(250,245,222,.35);padding-bottom:.1rem;
}
.foot__links a:hover{color:var(--cream);border-bottom-color:var(--cream)}
.foot__legal{color:rgba(250,245,222,.62);font-size:.74rem}

/* ==========================================================================
   MOBILE STICKY CTA
   ========================================================================== */
.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:110;
  background:var(--cocoa);
  padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom,0px));
  box-shadow:0 -6px 22px rgba(40,18,10,.28);
  transform:translateY(100%);
  transition:transform .35s var(--ease);
}
.mobile-cta.is-visible{transform:translateY(0)}
.mobile-cta .btn{padding:1rem 1.25rem}
@media (min-width:860px){.mobile-cta{display:none}}
/* keep the bar off the last section's content */
@media (max-width:859px){ .foot{padding-bottom:calc(6.5rem + env(safe-area-inset-bottom,0px))} }

/* ==========================================================================
   MOTION
   ========================================================================== */
.js .js-rise{opacity:0;transform:translateY(16px)}
.js .js-rise.is-in{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:var(--d,0ms);
}
/* one orchestrated settle on the hero lockup */
.js .js-lock{opacity:0;transform:translateY(22px) scale(.985)}
.js .hero.is-ready .js-lock{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:calc(var(--i) * 110ms);
}
.js .hero.is-ready .lockup__tour{
  transition-delay:calc(var(--i) * 110ms);
  animation:tour-settle .7s var(--ease) calc(var(--i) * 110ms) both;
}
@keyframes tour-settle{
  from{opacity:0;transform:rotate(-2deg) translateY(18px)}
  to{opacity:1;transform:rotate(-14deg) translateY(0)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .js-rise,.js .js-lock{opacity:1!important;transform:none!important;transition:none!important}
  .js .hero.is-ready .lockup__tour{animation:none;transform:rotate(-14deg)!important}
  .btn:hover{transform:none}
  .mobile-cta{transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}