/* ============================================================
   home.css — styles unique to the home page (index.html).

   Loads LAST, after base.css / pages.css and the component
   stylesheets, so it can still override them exactly as the
   inline <style> it replaces did. Keep it that way.
   ============================================================ */
  /* --- hero --- */
  .hero{
    position:relative;
    min-height:88vh;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    background:var(--black);
  }
  .hero-video{display:none;}
  .hero-bg{
    position:absolute; inset:0;
    background-image:url('/hero-bg.jpg');
    background-size:cover;
    background-position:center 62%;
  }
  .hero-scrim{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(var(--black-rgb),0.15) 0%, rgba(var(--black-rgb),0.35) 55%, rgba(var(--black-rgb),0.82) 100%);
  }
  .hero-inner{
    position:relative; z-index:2;
    width:100%;
    padding-bottom:64px;
  }
  .hero-card{
    max-width:660px;
    background:rgba(var(--black-rgb),0.42);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(var(--white-rgb),0.14);
    border-radius:var(--radius);
    padding:40px 44px;
    color:var(--white);
  }
  .hero-card h1{font-size:3.6rem; color:var(--white); margin:12px 0 16px 0;}
  .hero-card p{font-size:1.08rem; color:#D8D8E0; max-width:520px;}

  .paths{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:56px;}
  .path-card{
    background:var(--lavender);
    border-radius:var(--radius);
    padding:36px 32px;
    border:1.5px solid transparent;
    transition:border-color .15s ease, transform .15s ease;
    display:flex; flex-direction:column; gap:14px;
    cursor:pointer;
  }
  .path-card, .path-card *{cursor:pointer;}
  .path-card:hover{border-color:var(--teal); transform:translateY(-2px);}
  .path-card .tag{font-family:'Barlow Condensed'; font-weight:700; font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate);}
  .path-card h3{font-size:1.9rem; font-weight:800; color:var(--black); line-height:1.05;}
  .path-card p{color:var(--slate); font-size:0.96rem; flex-grow:1;}
  .path-card .go{font-family:'Barlow Condensed'; font-weight:700; font-size:0.98rem; text-transform:uppercase; color:var(--teal-ink); display:flex; align-items:center; gap:6px;}

  /* second path card: deep slate lavender, flipped to light text */
  .path-card--slate{background:var(--slate);}
  .path-card--slate .tag{color:var(--lavender);}
  .path-card--slate h3{color:var(--white);}
  .path-card--slate p{color:#D6D6E4;}
  .path-card--slate .go{color:var(--white);}
  .path-card--slate:hover{border-color:var(--teal);}

  /* --- home section 2: full-bleed photo band after the trust strip --- */
  .home-photo-band{
    width:100%;
    max-height:640px;
    overflow:hidden;
  }
  .home-photo-band img{
    width:100%;
    height:100%;
    aspect-ratio:4608 / 3072;   /* reserves space up front: no CLS */
    object-fit:cover;
    object-position:center 42%;
    display:block;
  }
  @media (max-width:720px){
    .home-photo-band{max-height:none;}
    .home-photo-band img{aspect-ratio:4 / 5; object-position:center 38%;}
  }

  /* --- trust strip --- */
  .trust{background:var(--black); color:var(--white); padding:32px 0;}
  .trust .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
  .trust .stat{display:flex; align-items:center; gap:10px; font-size:0.94rem; color:#B9B9C6; line-height:1.3;}
  .trust .stat strong{font-family:'Barlow Condensed'; font-weight:800; color:var(--white); font-size:1.3rem; line-height:1;}

  /* --- method --- */
  .method-head{max-width:560px; margin-bottom:48px;}
  .method-head h2{font-size:2.6rem;}
  .method-head p{color:var(--slate); margin-top:12px; font-size:1.02rem;}
  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; perspective:1400px;}
  .step{
    opacity:0;
    transform:rotateY(-90deg);
    transform-origin:left center;
    transition:transform .7s cubic-bezier(.22,.75,.25,1), opacity .5s ease;
  }
  .step.is-visible{opacity:1; transform:rotateY(0deg);}
  .step:nth-child(1){transition-delay:0s;}
  .step:nth-child(2){transition-delay:.14s;}
  .step:nth-child(3){transition-delay:.28s;}
  .step:nth-child(4){transition-delay:.42s;}
  @media (prefers-reduced-motion:reduce){
    .step{opacity:1; transform:none; transition:none;}
  }
  .step{
    border:1.5px solid rgba(var(--black-rgb),0.12);
    border-radius:var(--radius);
    padding:0;
    overflow:hidden;
    background:var(--white);
    display:flex; flex-direction:column;
  }
  .step-img{
    position:relative;
    aspect-ratio:3 / 2;
    background:var(--lavender);
    overflow:hidden;
    flex-shrink:0;
  }
  .step-img img{
    width:100%; height:100%;
    object-fit:cover;
    object-position:center center;   /* subjects are pre-centred in the crops */
    display:block;
  }
  .step .num{
    position:absolute; top:10px; left:10px; z-index:2;
    font-family:'Barlow Condensed'; font-weight:800; font-size:0.9rem;
    letter-spacing:0.08em; color:var(--white);
    background:rgba(var(--black-rgb),0.60);
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    padding:3px 9px; border-radius:var(--radius-sm);
  }
  .step-body{padding:20px 20px 24px;}
  .step h4{font-family:'Barlow Condensed'; font-weight:800; font-size:1.25rem; margin:0 0 8px 0; letter-spacing:0.01em;}
  .step p{font-size:0.92rem; color:var(--slate);}

  /* ============================================================
     TESTIMONIALS WATER VIDEO
     el-hierro-water.mp4 is 1080x1080 (square), which is the whole
     design problem: on a wide desktop band, object-fit:cover would
     throw away ~58% of the frame.

     Mobile  -> full-bleed cover (asked for), dark scrim for contrast.
     Desktop -> the square is anchored right at its NATIVE 1:1 ratio
                (height = section height, so zero crop) and dissolved
                into the lavender field with a mask. Nothing is cut.
     Scoped to .has-water because .testimonials is reused on
     discover.html for the session-steps section.
     ============================================================ */
  .testimonials.has-water{position:relative; overflow:hidden;}
  .tw-media{position:absolute; inset:0; z-index:0; pointer-events:none;}
  .tw-media video{
    width:100%; height:100%;
    object-fit:cover; object-position:center;
    display:block;
  }
  .tw-scrim{position:absolute; inset:0; z-index:1; pointer-events:none;}
  .testimonials.has-water .wrap{position:relative; z-index:2;}

  /* --- mobile: video covers everything, text goes light --- */
  @media (max-width:860px){
    .tw-scrim{background:rgba(var(--black-rgb),0.72);}
    .testimonials.has-water .test-head h2{color:var(--white);}
    .testimonials.has-water .test-head .overline{color:var(--teal);}
  }

  /* --- desktop: video fills the whole background, no colour fade --- */
  @media (min-width:861px){
    .tw-media{inset:0; width:100%; height:100%;}
    .tw-media video{object-fit:cover;}   /* fills edge to edge */
    /* flat scrim instead of the old lavender gradient: the only job
       left is keeping the cards and headline legible */
    .tw-scrim{background:rgba(var(--black-rgb),0.62);}
    .testimonials.has-water .test-head h2{color:var(--white);}
    .testimonials.has-water .test-head .overline{color:var(--teal);}
  }

  @media (prefers-reduced-motion:reduce){
    .tw-media video{display:none;}
  }
  .test-head{max-width:520px; margin-bottom:40px;}
  .test-head h2{font-size:2.3rem;}

  /* The strip is the shared carousel component (carousel.css +
     carousel.js), so it drifts, pauses under the finger and is
     drag-scrollable exactly like "Coaching in action". Only the cell
     styling differs — these are quote cards, not photos.
     It is a sibling of .wrap rather than a child, so it runs to both
     screen edges; z-index lifts it over .tw-scrim. */
  .test-strip{position:relative; z-index:2;}
  .test-strip .ag-track{align-items:stretch;}
  .test-card{
    flex:0 0 320px;
    background:var(--white);
    border-radius:0;                       /* square, like every other strip */
    padding:28px;
    display:flex; flex-direction:column; gap:16px;
  }
  .test-card + .test-card{margin-left:2px;}   /* the component's hairline gap */
  .test-card q{font-size:1.04rem; font-weight:500; line-height:1.5;}
  .test-card .who{font-size:0.86rem; color:var(--slate); font-weight:500;}

  /* --- pricing --- */
  .pricing-head{max-width:560px; margin-bottom:48px;}
  .pricing-head h2{font-size:2.6rem;}
  .offers{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
  .offer{
    border:1.5px solid rgba(var(--black-rgb),0.12);
    border-radius:var(--radius);
    padding:36px;
    display:flex; flex-direction:column; gap:16px;
  }
  .offer{transition:transform .25s ease, box-shadow .25s ease;}
  .offer:hover{transform:scale(1.03); box-shadow:0 14px 34px rgba(var(--black-rgb),0.14);}
  .offer h3{font-size:1.7rem; font-weight:800;}
  .offer p{color:var(--slate); font-size:0.96rem; flex-grow:1;}
  .offer .price{font-family:'Barlow Condensed'; font-weight:800; font-size:1.3rem;}
  .offer .price span{font-family:'Inter'; font-weight:400; font-size:0.85rem; color:var(--slate);}
  .coach-grid{display:grid; grid-template-columns:220px 1fr; gap:36px; align-items:center;}
  .coach-photo{width:220px; height:220px; border-radius:var(--radius); background:var(--slate); overflow:hidden; flex-shrink:0;}

  /* --- el medano --- */
  .medano{background:var(--white);}
  .medano .wrap{max-width:780px; text-align:center;}
  .medano h2{font-size:2.4rem; margin-bottom:16px;}
  .medano p{color:var(--slate); font-size:1.04rem;}
  .wind-chart{margin-top:44px; text-align:left;}
  .wind-chart .overline{margin-bottom:14px;}
  .wind-chart-legend{display:flex; gap:28px; flex-wrap:wrap; margin-bottom:18px;}
  .wind-chart-legend .item{display:flex; align-items:center; gap:8px; font-size:0.86rem; color:var(--slate);}
  .wind-chart-legend .swatch-bar{width:14px; height:14px; border-radius:3px; background:var(--lavender); border:1.5px solid var(--teal); flex-shrink:0;}
  .wind-chart-legend .swatch-line{width:18px; height:0; border-top:2.5px solid var(--black); position:relative; flex-shrink:0;}
  .wind-chart-legend .swatch-line::after{content:""; position:absolute; top:-3px; left:7px; width:6px; height:6px; border-radius:50%; background:var(--black);}
  .wind-chart svg{width:100%; height:auto; display:block; overflow:visible;}
  .wind-chart .bar{fill:var(--lavender);}
  .wind-chart .bar.peak{fill:var(--teal);}
  .wind-chart .gridline{stroke:rgba(var(--black-rgb),0.08); stroke-width:1;}
  .wind-chart .baseline{stroke:rgba(var(--black-rgb),0.22); stroke-width:1;}
  .wind-chart .axis-label{font-family:'Inter'; font-size:11px; fill:var(--slate);}
  .wind-chart .axis-title{font-family:'Barlow Condensed'; font-size:12px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; fill:var(--slate);}
  .wind-chart .month-label{font-family:'Barlow Condensed'; font-size:13px; font-weight:600; fill:var(--slate); text-anchor:middle;}
  .wind-chart .month-label.peak{fill:var(--teal); font-weight:800;}
  .wind-chart .speed-line{fill:none; stroke:var(--black); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round;}
  .wind-chart .speed-dot{fill:var(--black); r:4;}
  .wind-chart .speed-dot.peak{fill:var(--teal); r:5.5;}
  .wind-chart .callout-text{font-family:'Barlow Condensed'; font-weight:800; font-size:14px; fill:var(--black);}
  .wind-chart .callout-sub{font-family:'Inter'; font-weight:500; font-size:11.5px; fill:var(--slate);}
  .wind-chart-caption{margin-top:16px; font-size:0.86rem; color:var(--slate); text-align:center;}

  @media (max-width:860px){
    .hero-card h1{font-size:2.5rem;}
    .hero-card{padding:28px 26px;}
    .offers, .coach-grid{grid-template-columns:1fr;}
    .steps{grid-template-columns:1fr 1fr;}
    .test-card{flex:0 0 84vw;}
    .trust .wrap{flex-direction:column; gap:12px; align-items:center; text-align:center;}
    .trust .stat{justify-content:center;}
    .coach-photo{width:100%; height:300px;}
  }

  /* --- mobile hero: full-screen vertical video, condensed copy --- */
  @media (max-width:860px){
    /* one full phone screen, minus the sticky header + telemetry strip */
    .hero{min-height:calc(100vh - 104px); min-height:calc(100svh - 104px);padding:0px 0;}
    .hero-bg{display:none;}
    .hero-video{
      display:block;
      position:absolute; inset:0;
      width:100%; height:100%;
      object-fit:cover; object-position:center;
      z-index:0;
    }
    /* copy sits at the top of the screen, video runs on underneath it */
    .hero{align-items:flex-start;}
    .hero-scrim{
      background:linear-gradient(180deg,
        rgba(var(--black-rgb),0.74) 0%,
        rgba(var(--black-rgb),0.56) 45%,
        rgba(var(--black-rgb),0.22) 74%,
        rgba(var(--black-rgb),0.06) 100%);
    }
    .hero-inner{padding-top:22px; padding-bottom:26px;}
    .hero-card{padding:18px 20px; background:rgba(var(--black-rgb),0.46);}
    .hero-card h1{font-size:2.1rem; margin:8px 0 8px;}
    .hero-sub{font-size:0.96rem; line-height:1.45;}
    .paths{margin-top:12px; gap:10px;}
    .path-card{padding:15px 18px; gap:5px;}
    .path-card h3{font-size:1.2rem;}
    .path-card p{font-size:0.86rem;}
    .path-card .tag{font-size:0.7rem;}
    .path-card .go{font-size:0.85rem;}
  }
  @media (max-width:860px) and (prefers-reduced-motion:reduce){
    .hero-video{display:none;}
    .hero-bg{display:block;}
  }

  /* --- 4-step method: keep image AND text readable on phones --- */
  @media (max-width:560px){
    .steps{grid-template-columns:1fr; gap:12px;}
    .step{flex-direction:row; align-items:stretch;}
    .step-img{flex:0 0 42%; aspect-ratio:auto; min-height:118px;}
    .step-body{padding:16px 16px 16px 18px; display:flex; flex-direction:column; justify-content:center;}
    .step h4{font-size:1.15rem;}
    .step p{font-size:0.88rem;}
    /* the flip-in reveal reads badly on a single column; fade instead */
    .step{transform:none; transition:opacity .5s ease;}
    .step.is-visible{transform:none;}
  }

  /* --- the two offers read as two different things --- */
  .offer--light{background:var(--lavender); border-color:transparent;}
  .offer--light .price{color:var(--black);}
  .offer--dark{background:var(--slate); border-color:transparent;}
  .offer--dark h3{color:var(--white);}
  .offer--dark p{color:#D9D9E6;}
  .offer--dark .price{color:var(--white);}
  .offer--dark .price span{color:var(--lavender);}

  /* --- coach portrait: keep the rider centred at every crop --- */
  .coach-photo img, .story-photo img{object-position:center center;}

  /* --- El Médano section: photo background, content stays legible --- */
  .medano{position:relative; overflow:hidden; background:var(--black); color:var(--white);}
  .medano::before{
    content:""; position:absolute; inset:0;
    background-image:url('/elmedano-bg.jpg');
    background-size:cover; background-position:center 55%;
  }
  .medano::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(var(--black-rgb),0.62) 0%, rgba(var(--black-rgb),0.78) 45%, rgba(var(--black-rgb),0.90) 100%);
  }
  .medano .wrap{position:relative; z-index:2;}
  .medano h2{color:var(--white);}
  .medano .lede{color:#DEDEE8; font-size:1.04rem;}
  /* the chart sits on its own white card so it never fights the photo */
  .medano .wind-chart{
    background:var(--white);
    border-radius:var(--radius);
    padding:28px 30px 24px;
    box-shadow:0 18px 44px rgba(0,0,0,0.28);
  }
  .medano .wind-chart-legend{margin:0 0 22px;}
  .wind-chart-legend .swatch-bar{background:var(--teal); border:0;}
  .wind-chart-legend .swatch-strong{
    width:14px; height:14px; flex-shrink:0; border-radius:3px;
    background:var(--wind-strong);
  }

  /* horizontal bars, readable at any width, no month singled out */
  .wind-bars{display:flex; flex-direction:column; gap:9px;}
  .wb-row{display:grid; grid-template-columns:38px 1fr 66px; gap:14px; align-items:center;}
  .wb-month{font-family:'Barlow Condensed'; font-weight:700; font-size:0.92rem; color:var(--slate); letter-spacing:0.04em; text-transform:uppercase;}
  .wb-track{
    position:relative; height:18px; border-radius:3px;
    background:
      linear-gradient(90deg, rgba(var(--black-rgb),0.10) 0 1px, transparent 1px 100%) 0 0 / 33.3333% 100%,
      rgba(var(--black-rgb),0.05);
  }
  /* two stacked segments: high-wind days sit inside the foil-ready bar */
  .wb-fill, .wb-fill-strong{
    position:absolute; left:0; top:0; height:100%;
    border-radius:3px;
  }
  .wb-fill{background:var(--teal);}
  .wb-fill-strong{background:var(--wind-strong); z-index:1;}
  .wb-val{font-family:'Barlow Condensed'; font-weight:800; font-size:0.98rem; color:var(--black); text-align:right; white-space:nowrap;}
  .wb-axis{display:grid; grid-template-columns:38px 1fr 66px; gap:14px; margin-top:6px;}
  .wb-ticks{display:flex; justify-content:space-between; font-size:0.72rem; color:var(--slate);}
  @media (max-width:560px){
    .wb-row, .wb-axis{grid-template-columns:30px 1fr 58px; gap:8px;}
    .wb-month{font-size:0.82rem;}
    .wb-val{font-size:0.88rem;}
  }
  @media (max-width:560px){
    .medano .wind-chart{padding:20px 16px 18px;}
  }

  .wind-chart-title{font-family:'Barlow Condensed'; font-weight:800; font-size:1.35rem; margin:2px 0 18px; color:var(--black);}

  /* ============================================================
     HERO — concept 14a-i
     Full-bleed looping video, demoted headline, slate scroll rail.
     This block is appended last so it wins over the earlier
     mobile-hero rules without editing them in place.
     ============================================================ */

  /* --- looping video background ---------------------------------
     Runs at every width. hero-bg.jpg underneath acts as the poster:
     it is painted BEHIND the video and fades out only once the video
     has actually decoded a frame, so a missing or blocked file
     degrades to the photo instead of to black. ------------------- */
  .hero-bg{
    display:block;
    z-index:0;                       /* explicitly the bottom layer */
    transition:opacity .5s ease;
  }
  .hero-video{
    display:block;
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; object-position:center;
    z-index:1;                       /* explicitly above the poster */
    background:transparent;
  }
  .hero.video-live .hero-bg{opacity:0;}

  /* --- intro: the two headline lines fly in from opposite edges --- */
  .hero-title .l1,
  .hero-title .l2{display:inline-block;}
  /* the gap is a real space in the markup, not a margin — a margin looks
     right but makes screen readers and copy-paste read "What bringsyou here?" */

  @keyframes heroFlyInLeft{
    from{opacity:0; transform:translate3d(-115%,0,0);}
    to  {opacity:1; transform:translate3d(0,0,0);}
  }
  @keyframes heroFlyInRight{
    from{opacity:0; transform:translate3d(115%,0,0);}
    to  {opacity:1; transform:translate3d(0,0,0);}
  }
  @keyframes heroRise{
    from{opacity:0; transform:translate3d(0,14px,0);}
    to  {opacity:1; transform:translate3d(0,0,0);}
  }

  .hero-title .l1{animation:heroFlyInLeft  .9s cubic-bezier(.16,.84,.3,1) .15s both;}
  .hero-title .l2{animation:heroFlyInRight .9s cubic-bezier(.16,.84,.3,1) .28s both;}
  .hero-card .overline{animation:heroRise .6s ease-out .05s both;}
  .hero-card .hero-sub{animation:heroRise .6s ease-out .75s both;}
  .hero .paths{animation:heroRise .7s ease-out .95s both;}

  /* --- the scroll rail (mobile only, shown further down) --- */
  .hero-rail{display:none;}

  @media (max-width:860px){

    .hero{align-items:stretch; overflow:hidden;}

    /* dark at the top for the headline, dark at the base for the
       two action slabs, and open through the middle so the rider
       is fully visible */
    .hero-scrim{
      background:linear-gradient(180deg,
        rgba(var(--black-rgb),0.70) 0%,
        rgba(var(--black-rgb),0.38) 30%,
        rgba(var(--black-rgb),0.30) 50%,
        rgba(var(--black-rgb),0.58) 78%,
        rgba(var(--black-rgb),0.80) 100%);
    }

    /* copy at the top, paths pinned to the base, video breathing between */
    .hero-inner{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      padding:20px 52px 22px 20px;   /* right padding clears the rail */
    }

    /* the glass card is gone: type sits straight on the footage */
    .hero-card{
      position:relative;
      max-width:none;
      background:none;
      backdrop-filter:none; -webkit-backdrop-filter:none;
      border:0;
      padding:0;
    }
    /* legibility floor under the headline + subline: a soft tint that
       bleeds past the copy on all four sides and fades to nothing, so
       it darkens the type without ever reading as a card edge */
    .hero-card::before{
      content:"";
      position:absolute;
      left:-20px; right:-52px;      /* out through .hero-inner's padding */
      top:-24px; bottom:-40px;
      z-index:-1;
      pointer-events:none;
      background:linear-gradient(180deg,
        rgba(var(--black-rgb),0.46) 0%,
        rgba(var(--black-rgb),0.42) 52%,
        rgba(var(--black-rgb),0.26) 78%,
        rgba(var(--black-rgb),0.00) 100%);
    }
    /* a touch of edge definition where the sky behind is brightest */
    .hero-card h1{text-shadow:0 2px 22px rgba(var(--black-rgb),0.45);}
    .hero-card .overline,
    .hero-card .hero-sub{text-shadow:0 1px 14px rgba(var(--black-rgb),0.5);}
    .hero-card .overline{
      font-size:0.58rem;
      letter-spacing:0.2em;
      margin-bottom:9px;
    }
    .hero-card h1{
      font-size:clamp(2rem, 10.2vw, 2.8rem);
      line-height:0.86;
      letter-spacing:-0.005em;
      text-transform:uppercase;
      margin:0 0 12px;
    }
    .hero-title .l1,
    .hero-title .l2{display:block; margin-right:0;}
    .hero-title .l2{color:var(--teal);}

    .hero-card .hero-sub{
      font-size:0.88rem;
      line-height:1.45;
      color:#DEDEE8;
      max-width:17rem;
    }

    /* --- two full-width action slabs --- */
    .paths{
      grid-template-columns:1fr;
      gap:10px;
      margin-top:0;
    }
    .path-card{
      position:relative;
      border-radius:0;
      padding:14px 46px 15px 18px;
      gap:3px;
    }
    .path-card p{
      display:block;
      font-size:0.74rem;
      opacity:0.85;
      margin-top:2px;
    }
    .path-card .go{display:none;}
    .path-card .tag{
      font-size:0.62rem;
      letter-spacing:0.22em;
    }
    .path-card h3{
      font-size:clamp(1.02rem, 4.5vw, 1.26rem);
      font-weight:800;
      line-height:1.02;
      text-transform:uppercase;
    }
    .paths > .path-card:nth-child(1) .tag::before{content:"01 · ";}
    .paths > .path-card:nth-child(2) .tag::before{content:"02 · ";}
    .path-card::after{
      content:"→";
      position:absolute; right:16px; top:50%;
      transform:translateY(-50%);
      font-family:'Barlow Condensed', sans-serif;
      font-weight:700; font-size:1.3rem; line-height:1;
      color:var(--black);
    }
    /* second slab is an outline, not a solid, so the video reads through it.
       A light tint + blur keeps the white type legible over bright water. */
    .path-card--slate{
      background:rgba(var(--black-rgb),0.30);
      -webkit-backdrop-filter:blur(3px);
      backdrop-filter:blur(3px);
      border-color:var(--white);
    }
    .path-card--slate::after{color:var(--white);}
    .path-card:hover{transform:none;}

    /* --- slate rail down the right edge --- */
    .hero-rail{
      position:absolute; top:0; right:0; bottom:0;
      z-index:3;
      width:34px;
      background:var(--slate);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:space-between;
      padding:16px 0 18px;
      pointer-events:none;
    }
    .hero-rail .rail-place{
      writing-mode:vertical-rl;
      font-family:'Barlow Condensed', sans-serif;
      font-weight:600;
      font-size:9.5px;
      letter-spacing:0.3em;
      text-transform:uppercase;
      color:var(--lavender);
      white-space:nowrap;
      /* if the phone is short, THIS is what gets trimmed, never the
         scroll cue below */
      min-height:0;
      overflow:hidden;
      flex:0 1 auto;
    }
    .hero-rail .rail-scroll{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:11px;
      flex:0 0 auto;          /* never compressed, never clipped */
    }
    /* guide line + the arrow that travels down it */
    .hero-rail .rail-track{
      position:relative;
      width:14px; height:54px;
      flex:0 0 auto;
    }
    .hero-rail .rail-track::before{
      content:"";
      position:absolute; left:50%; top:0;
      width:2px; height:100%;
      margin-left:-1px;
      background:rgba(var(--lavender-rgb),0.28);
    }
    .hero-rail .rail-arrow{
      position:absolute; left:50%; top:0;
      width:9px; height:9px;
      margin-left:-4.5px;              /* the rotated V centres on the box centre */
      border-right:2px solid var(--teal);
      border-bottom:2px solid var(--teal);
      transform:rotate(45deg);
      animation:railArrow 2.6s cubic-bezier(.55,0,.35,1) infinite;
    }
    .hero-rail .rail-label{
      writing-mode:vertical-rl;
      font-family:'Barlow Condensed', sans-serif;
      font-weight:700;
      font-size:10.5px;
      letter-spacing:0.26em;
      text-transform:uppercase;
      color:var(--white);
      white-space:nowrap;
      flex:0 0 auto;
    }
  }

  /* short phones: tighten everything so the video keeps an open band
     between the headline and the two slabs */
  @media (max-width:860px) and (max-height:680px){
    .hero-inner{padding-top:14px; padding-bottom:16px;}
    .hero-card h1{font-size:1.85rem; margin-bottom:9px;}
    .hero-card .hero-sub{font-size:0.8rem; max-width:15rem;}
    .path-card{padding:11px 42px 12px 15px;}
    .paths{gap:8px;}
  }

  @keyframes railArrow{
    0%   {top:0px;  opacity:0;}
    22%  {opacity:1;}
    70%  {top:34px; opacity:1;}
    100% {top:38px; opacity:0;}
  }

  /* --- reduced motion: still image, no fly-in, no rail ticker --- */
  @media (prefers-reduced-motion:reduce){
    .hero-video{display:none;}
    .hero-bg{display:block;}
    .hero.video-live .hero-bg{opacity:1;}
    .hero-title .l1,
    .hero-title .l2,
    .hero-card .overline,
    .hero-card .hero-sub,
    .hero .paths{animation:none; opacity:1; transform:none;}
    .hero-rail .rail-arrow{animation:none; top:22px; opacity:1;}
  }

  /* ============================================================
     DESKTOP HERO — Option B revision
       · hero is exactly 100dvh, with the header and wind bar
         overlaid on it rather than stacked above it
       · the video is a full-height column bleeding off the right
         edge, masked to nothing at top and bottom: no frame, no
         chip, no corners to read as a pasted-on tile
       · the still drifts behind it; the column counter-drifts at
         a third of the speed, which is what reads as depth
     Scoped to (min-width:861px). The phone hero is untouched.
     ============================================================ */

  /* --chrome is measured at runtime (header + wind bar) so the hero
     can sit under it without hardcoding a height that breaks when
     the font loads or the nav wraps */
  :root{--chrome:121px;}

  /* the wrapper lets one <video> be a full-bleed background on phones
     and a bleed column on desktop; the base rail is desktop-only */
  .hero-rail-h{display:none;}
  .hero-clip{position:absolute; inset:0; z-index:1;}
  .hero-clip .hero-video{position:absolute; inset:0; width:100%; height:100%;}
  .hero-live{display:none;}

  @media (max-width:860px){
    .hero.video-live .hero-bg{opacity:0;}
  }

  @keyframes heroPlaneDrift{
    from{transform:scale(1.06) translate3d(1.2%, 0.6%, 0);}
    to  {transform:scale(1.16) translate3d(-1.3%, -1%, 0);}
  }
  @keyframes heroColumnDrift{
    from{transform:scale(1.05) translate3d(-0.4%, -0.3%, 0);}
    to  {transform:scale(1.09) translate3d(0.5%, 0.4%, 0);}
  }

  @media (min-width:861px){   /* the regression fix: it is back */

    /* --- exactly one screen --- */
    .hero{
      height:100dvh;
      min-height:0;
      margin-top:calc(-1 * var(--chrome));
      align-items:flex-end;
      overflow:hidden;
    }

    /* top scrim: guarantees header contrast wherever the photo is bright */
    .hero::before{
      content:"";
      position:absolute; left:0; right:0; top:0;
      height:clamp(150px, 24vh, 280px);
      z-index:5;
      pointer-events:none;
      background:linear-gradient(180deg,
        rgba(var(--black-rgb),0.62) 0%,
        rgba(var(--black-rgb),0.28) 55%,
        rgba(var(--black-rgb),0) 100%);
    }

    /* --- the plane --- */
    .hero-bg{
      opacity:1 !important;
      transform-origin:54% 46%;
      will-change:transform;
      animation:heroPlaneDrift 34s ease-in-out infinite alternate;
    }
    .hero-scrim{
      background:linear-gradient(180deg,
        rgba(var(--black-rgb),0.56) 0%,
        rgba(var(--black-rgb),0.48) 34%,
        rgba(var(--black-rgb),0.52) 62%,
        rgba(var(--black-rgb),0.74) 100%);
    }

    /* --- the column --- */
    .hero-clip{
      inset:0 0 0 auto;
      left:auto;
      width:var(--railcol);
      height:100%;
      z-index:3;
      border:0;
      box-shadow:none;
      overflow:hidden;
      /* no top or bottom edge: it fades into the plane */
      -webkit-mask-image:linear-gradient(180deg,
        transparent 0%, #000 20%, #000 78%, transparent 100%);
      mask-image:linear-gradient(180deg,
        transparent 0%, #000 20%, #000 78%, transparent 100%);
    }
    .hero-clip .hero-video{
      transform-origin:50% 50%;
      will-change:transform;
      animation:heroColumnDrift 34s ease-in-out infinite alternate;
    }
    .hero-live{display:none;}

    /* --- copy --- */
    .hero-inner{
      max-width:none;
      padding-left:5vw;
      padding-right:calc(var(--railcol) + 64px);
      padding-bottom:clamp(96px, 12vh, 128px);
    }
    .hero-card{
      max-width:none;
      background:none;
      backdrop-filter:none; -webkit-backdrop-filter:none;
      border:0;
      padding:0;
    }
    .hero-card .overline{
      font-size:0.78rem;
      letter-spacing:0.22em;
      margin-bottom:12px;
      text-shadow:0 1px 14px rgba(var(--black-rgb),0.6);
    }
    /* sized against BOTH axes so a short window shrinks the type
       instead of overflowing a fixed-height hero */
    .hero-card h1{
      font-size:min(9.5vw, 16.5vh, 9rem);
      line-height:0.82;
      letter-spacing:-0.02em;
      text-transform:uppercase;
      margin:0 0 10px;
      text-shadow:0 4px 40px rgba(var(--black-rgb),0.4);
    }
    .hero-title .l1,
    .hero-title .l2{display:block; white-space:nowrap; margin-right:0;}
    .hero-title .l1{margin-left:calc(-5vw - 0.16em);}
    .hero-title .l2{color:var(--teal);}
    .hero-card .hero-sub{
      font-size:clamp(0.92rem, 1.6vh, 1.02rem);
      max-width:34rem;
      color:#DEDEE8;
      text-shadow:0 1px 14px rgba(var(--black-rgb),0.6);
    }

    /* --- action slabs --- */
    .paths{
      grid-template-columns:repeat(2, minmax(0, 340px));
      justify-content:start;
      gap:16px;
      margin-top:clamp(18px, 3.4vh, 34px);
    }
    .path-card{
      position:relative;
      border-radius:0;
      padding:clamp(14px, 2vh, 20px) 52px clamp(15px, 2.1vh, 22px) 24px;
      gap:4px;
    }
    .path-card p{
      display:block;
      font-size:0.82rem;
      opacity:0.85;
    }
    .path-card .go{display:none;}
    .path-card .tag{font-size:0.72rem; letter-spacing:0.2em;}
    .path-card h3{
      font-size:min(1.6rem, 2.9vh);
      font-weight:800;
      line-height:1.02;
      text-transform:uppercase;
    }
    .paths > .path-card:nth-child(1) .tag::before{content:"01 · ";}
    .paths > .path-card:nth-child(2) .tag::before{content:"02 · ";}
    .path-card::after{
      content:"→";
      position:absolute; right:22px; top:50%;
      transform:translateY(-50%);
      font-family:'Barlow Condensed', sans-serif;
      font-weight:700; font-size:1.5rem; line-height:1;
      color:var(--black);
    }
    .path-card--slate{
      background:rgba(var(--black-rgb),0.30);
      -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
      border-color:var(--white);
    }
    .path-card--slate::after{color:var(--white);}
    .path-card:hover{transform:translateY(-2px);}

    /* --- base rail: no longer carries conditions (the wind bar is
           back at the top), so it carries standing proof instead --- */
    .hero-rail{display:none;}
    .hero-rail-h{
      position:absolute; left:0; right:0; bottom:0;
      z-index:4;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
      padding:0 5vw;
      height:clamp(62px, 8.4vh, 78px);
      background:var(--slate);
      pointer-events:none;
    }
    .hero-rail-h .rail-data,
    .hero-rail-h .rail-scroll-h{
      font-family:'Barlow Condensed', sans-serif;
      font-weight:700;
      font-size:clamp(0.8rem, 1.5vh, 0.92rem);
      letter-spacing:0.2em;
      text-transform:uppercase;
      white-space:nowrap;
    }
    .hero-rail-h .rail-data{
      color:var(--lavender);
      overflow:hidden; text-overflow:ellipsis;
    }
    .hero-rail-h .rail-scroll-h{
      display:inline-flex; align-items:center; gap:12px;
      flex:0 0 auto;
      color:var(--white);
    }
    .hero-rail-h .rail-chev{
      position:relative; display:block;
      width:16px; height:22px;
    }
    .hero-rail-h .rail-chev::after{
      content:"";
      position:absolute; left:50%; top:0;
      width:9px; height:9px;
      margin-left:-4.5px;
      border-right:2px solid var(--teal);
      border-bottom:2px solid var(--teal);
      transform:rotate(45deg);
      animation:railArrowH 2.6s cubic-bezier(.55,0,.35,1) infinite;
    }
  }

  @keyframes railArrowH{
    0%   {top:0px;  opacity:0;}
    22%  {opacity:1;}
    70%  {top:10px; opacity:1;}
    100% {top:13px; opacity:0;}
  }

  @media (min-width:861px) and (prefers-reduced-motion:reduce){
    .hero-bg{animation:none; transform:scale(1.06);}
    .hero-clip .hero-video{animation:none;}
    .hero-rail-h .rail-chev::after{animation:none; top:6px; opacity:1;}
  }

  /* ============================================================
     DESKTOP HEADER — revision
       · chrome stays legible over the hero at every scroll position
       · "Book a session" sits centred over the right-hand column
       · logo / nav / button distributed on a three-track grid
     Scoped to (min-width:861px).
     ============================================================ */

  :root{--railcol:clamp(260px, 24vw, 380px);}