/* ============================================================
   discover.css — styles unique to the Discover page.

   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-bg{
    position:absolute; inset:0;
    background:linear-gradient(160deg, var(--black-lift) 0%, var(--black) 100%);
    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;
  }
  .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);}

  /* --- 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;}
  .step{
    border:1.5px solid rgba(var(--black-rgb),0.12);
    border-radius:var(--radius);
    padding:26px 22px;
  }
  .step .num{font-family:'Barlow Condensed'; font-weight:800; font-size:1.15rem; color:var(--teal); letter-spacing:0.02em;}
  .step h4{font-family:'Barlow Condensed'; font-weight:800; font-size:1.25rem; margin:12px 0 8px 0; letter-spacing:0.01em;}
  .step p{font-size:0.92rem; color:var(--slate);}
  .icon{ width:30px; height:30px; margin-bottom:12px; }
  .step:nth-child(1) .tag, .step:nth-child(1) .icon{ color:var(--teal); stroke:var(--teal); }
  .step:nth-child(2) .tag, .step:nth-child(2) .icon{ color:var(--slate); stroke:var(--slate); }
  .step:nth-child(3) .tag, .step:nth-child(3) .icon{ color:#db4d1a; stroke:#db4d1a; }
  .step:nth-child(4) .tag, .step:nth-child(4) .icon{ color:var(--black); stroke:var(--black); }
  .test-head{max-width:520px; margin-bottom:40px;}
  .test-head h2{font-size:2.3rem;}
  .test-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  .test-card{background:var(--white); border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; gap:16px;}
  .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 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:720px; text-align:center;}
  .medano h2{font-size:2.4rem; margin-bottom:16px;}
  .medano p{color:var(--slate); font-size:1.04rem;}

  @media (max-width:860px){
    .hero-card h1{font-size:2.5rem;}
    .hero-card{padding:28px 26px;}
    .paths, .offers, .coach-grid{grid-template-columns:1fr;}
    .steps{grid-template-columns:1fr 1fr;}
    .test-grid{grid-template-columns:1fr;}
    .trust .wrap{flex-direction:column; gap:12px;}
    .coach-photo{width:100%; height:180px;}
  }

  /* --- single photo behind a page hero, art-directed via <picture> --- */
  .page-hero.has-collage{position:relative; overflow:hidden;}
  .hero-photo{
    position:absolute; inset:0;
    display:block;
    overflow:hidden;
  }
  .hero-photo img{
    width:100%; height:100%;
    object-fit:cover;
    object-position:center 45%;
    display:block;
  }
  .collage-scrim{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(var(--black-rgb),0.66) 0%, rgba(var(--black-rgb),0.76) 45%, rgba(var(--black-rgb),0.90) 100%);
  }
  .page-hero.has-collage .wrap{position:relative; z-index:2;}

  /* ============================================================
     WHAT'S INCLUDED — video background
     Source is 1080x1920 (portrait); on a wide band it covers by
     cropping top and bottom, which is the cheap direction to lose.
     Flat scrim + inverted list styling keeps every line legible.
     ============================================================ */
  .has-included-video{position:relative; overflow:hidden;}
  .has-included-video .inc-media{position:absolute; inset:0; z-index:0; pointer-events:none;}
  .has-included-video .inc-media video{
    width:100%; height:100%; object-fit:cover; object-position:center 40%;
    display:block;
  }
  .has-included-video .inc-scrim{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:rgba(var(--black-rgb),0.74);
  }
  .has-included-video .wrap{position:relative; z-index:2;}
  .has-included-video .overline{color:var(--teal);}
  .has-included-video h2{color:var(--white); text-shadow:0 2px 18px rgba(var(--black-rgb),0.55);}
  .has-included-video ul.included-grid li{
    color:#EFEFF4;
    border-color:rgba(var(--white-rgb),0.32);
    background:rgba(var(--black-rgb),0.30);
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    text-shadow:0 1px 12px rgba(var(--black-rgb),0.6);
  }
  @media (prefers-reduced-motion:reduce){
    .has-included-video .inc-media video{display:none;}
    .has-included-video .inc-scrim{background:var(--black);}
  }

  /* --- one clear price per row --- */
  table.pack-table td.price-cell{
    font-family:'Barlow Condensed'; font-weight:800; font-size:1.12rem;
    color:var(--black); white-space:nowrap;
  }
  table.pack-table .save{
    display:inline-block; margin-left:9px; vertical-align:middle;
    font-family:'Inter'; font-weight:600; font-size:0.7rem;
    letter-spacing:0.04em; text-transform:uppercase;
    color:var(--teal-ink); background:rgba(var(--teal-rgb),0.14);
    padding:3px 9px; border-radius:99px;
  }
  @media (max-width:560px){
    table.pack-table td, table.pack-table th{padding:12px 6px;}
    table.pack-table .save{display:block; margin:5px 0 0; width:max-content;}
  }

  /* --- light transition band (breaks up two dark sections) --- */
  .transition-band{background:var(--lavender); color:var(--black);}
  .transition-band h2{color:var(--black);}
  .transition-band p{color:var(--slate); font-size:1.04rem; max-width:640px; margin-bottom:14px;}
  .transition-band .go{font-family:'Barlow Condensed'; font-weight:700; font-size:0.98rem; text-transform:uppercase; color:var(--teal-ink);}

  /* --- the beginner booking CTA gets its own blue --- */
  .btn-blue{background:#2563EB; color:var(--white); border:1.5px solid #2563EB;}
  .btn-blue:hover{background:#1D4ED8; border-color:#1D4ED8;}

  /* --- session steps: same card treatment as the home page method --- */
  .steps{display:grid; grid-template-columns:repeat(3,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;}
  @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;
    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; color:var(--black);}
  .step p{font-size:0.92rem; color:var(--slate);}
  @media (max-width:860px){
    .steps{grid-template-columns:1fr 1fr;}
  }
  @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;}
    .step{transform:none; transition:opacity .5s ease;}
    .step.is-visible{transform:none;}
  }

  /* --- best-value pack row --- */
  table.pack-table tr.best-value td{background:rgba(var(--teal-rgb),0.09);}
  table.pack-table tr.best-value td:first-child{
    box-shadow:inset 3px 0 0 var(--teal);
    font-weight:600;
  }
  .best-tag{
    display:inline-block; margin-left:9px; vertical-align:middle;
    font-family:'Inter'; font-weight:700; font-size:0.68rem;
    letter-spacing:0.06em; text-transform:uppercase;
    color:var(--white); background:var(--teal-ink);
    padding:3px 9px; border-radius:99px;
  }
  @media (max-width:560px){
    .best-tag{display:block; margin:6px 0 0; width:max-content;}
  }

  /* --- final CTA with video behind it --- */
  .final.has-video{position:relative; overflow:hidden;}
  .final.has-video .cta-video{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; object-position:center 55%;
    z-index:0;
  }
  .final.has-video .cta-scrim{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(var(--black-rgb),0.82) 0%, rgba(var(--black-rgb),0.72) 50%, rgba(var(--black-rgb),0.86) 100%);
  }
  .final.has-video .wrap{position:relative; z-index:2;}
  @media (prefers-reduced-motion:reduce){
    .final.has-video .cta-video{display:none;}
    .final.has-video{background:var(--black);}
  }

  .story-photo{width:220px; height:220px; background:var(--slate); border-radius:var(--radius); flex-shrink:0;}
  .map-embed{width:100%; height:260px; background:var(--lavender); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--slate); font-family:'Barlow Condensed'; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; margin:20px 0;}

  /* ============================================================
     DISCOVER — mobile hero, concept D1
     Full-screen photo with a slow Ken Burns zoom, the qualifying
     list promoted to the main statement, and the <h1> kept in the
     DOM but restyled as the closing line above the CTA.
     Appended last so it wins over the earlier rules without
     editing them in place. Desktop (>860px) is untouched.
     ============================================================ */

  /* Ken Burns: transform only, so it never triggers layout.
     Slow on purpose — under ~20s it reads as a bug, not a drift. */
  @keyframes heroKenBurns{
    from{transform:scale(1.02) translate3d(0, 0, 0);}
    to  {transform:scale(1.13) translate3d(0, -2%, 0);}
  }
  .page-hero.has-collage .hero-photo{
    transform-origin:50% 40%;
    will-change:transform;
    animation:heroKenBurns 26s ease-in-out infinite alternate;
  }

  /* headline halves fly in from opposite edges, matching the homepage */
  @keyframes qualifyRise{
    from{opacity:0; transform:translate3d(0,14px,0);}
    to  {opacity:1; transform:translate3d(0,0,0);}
  }

  /* mobile-only blocks stay out of the desktop layout entirely */
  .page-hero .hero-qualify-title,
  .page-hero .hero-qualify-list,
  .hero-rail,
  .hero-cta .cta-meta{display:none;}

  @media (max-width:860px){

    .page-hero.has-collage{
      display:flex;
      align-items:stretch;
      min-height:calc(100svh - 104px);
      padding:0;
      overflow:hidden;
    }

    /* the <picture>'s <source media> swaps the file natively;
       only the crop position needs adjusting here */
    .page-hero.has-collage .hero-photo img{
      object-position:center 40%;
    }

    /* Legibility floor. The sky and the wing in this shot are both
       very bright, so the bands carrying text sit at ~0.80 while the
       open band at 62-76% stays light enough to read as a photograph. */
    .page-hero.has-collage .collage-scrim{
      background:linear-gradient(180deg,
        rgba(var(--black-rgb),0.84) 0%,
        rgba(var(--black-rgb),0.80) 52%,
        rgba(var(--black-rgb),0.74) 60%,
        rgba(var(--black-rgb),0.44) 70%,
        rgba(var(--black-rgb),0.68) 84%,
        rgba(var(--black-rgb),0.82) 100%);
    }

    /* copy at the top, closing line + CTA pushed to the base,
       photo breathing in the gap between them */
    .page-hero.has-collage .wrap{
      display:flex;
      flex-direction:column;
      width:100%;
      max-width:none;
      padding:20px 52px 22px 20px;   /* right padding clears the rail */
    }

    .page-hero .overline{
      order:1;
      font-size:0.58rem;
      letter-spacing:0.2em;
      margin:0 0 10px;
      text-shadow:0 1px 14px rgba(var(--black-rgb),0.6);
    }

    /* the promoted statement */
    /* Body voice, not a second headline. It used to be Barlow 800 with a
       white/teal split — the same face, weight and colour treatment as the
       h1 directly above, so it read as a demoted headline competing with
       the real one. Inter at 600 makes it a question asked of the reader
       and lets the h1 keep the display voice to itself. */
    .page-hero .hero-qualify-title{
      order:3;
      display:block;
      margin:0 0 14px;
      font-family:'Inter', sans-serif;
      font-weight:600;
      font-size:0.95rem;
      line-height:1.4;
      letter-spacing:0;
      text-transform:none;
      color:#DEDEE8;
      text-shadow:0 1px 14px rgba(var(--black-rgb),0.6);
      animation:qualifyRise .7s ease-out .3s both;
    }
    .page-hero .hero-qualify-title .l1,
    .page-hero .hero-qualify-title .l2{display:inline; color:inherit;}

    /* mobile title is just "Never tried wingfoil?" — the second line
       and the appended closing sentence are both dropped */
    .page-hero h1 .l2{display:none;}
    /* .has-collage raises specificity above the .page-hero h1 rule
       further down this block, which would otherwise win */
    .page-hero.has-collage h1::after{content:none;}
    .page-hero.has-collage h1{text-transform:uppercase;}
    .page-hero.has-collage h1 .w{color:var(--teal); font-style:normal;}
    /* the qualifying statement steps down to lowercase */
    /* the two halves no longer fly in from opposite edges — that read as
       display type; one quiet rise on the whole line suits body voice */

    /* the four statements: quiet body size, teal ticks, no rules */
    .page-hero .hero-qualify-list{
      order:4;
      display:block;
      list-style:none;
      margin:0;
      padding:0;
      animation:qualifyRise .7s ease-out .8s both;
    }
    .page-hero .hero-qualify-list li{
      position:relative;
      margin:0 0 11px;
      padding-left:22px;
      font-size:0.79rem;
      line-height:1.36;
      color:#EFEFF4;
      text-shadow:0 1px 12px rgba(var(--black-rgb),0.65);
    }
    .page-hero .hero-qualify-list li:last-child{margin-bottom:0;}
    .page-hero .hero-qualify-list li::before{
      content:"✓";
      position:absolute; left:0; top:0;
      font-size:0.8rem;
      line-height:1.36;
      color:var(--teal);
    }

    /* the <h1> sits under the overline as a visible title; the
       qualifying statement below it stays the dominant element */
    .page-hero h1{
      order:2;
      margin:0 0 16px;
      font-family:'Barlow Condensed', sans-serif;
      font-weight:700;
      font-size:clamp(1.95rem, 9.6vw, 2.5rem);
      line-height:1.18;
      letter-spacing:0.01em;
      text-transform:none;
      color:var(--white);
      text-shadow:0 1px 16px rgba(var(--black-rgb),0.75);
      animation:qualifyRise .6s ease-out .1s both;
    }
    .page-hero h1::after{
      content:" No experience needed.";
      color:var(--teal);
    }

    /* real body copy stays visible on mobile; it sits right under
       the closing line instead of ahead of the qualifying statement */
    .page-hero .hero-desc{
      order:2;
      display:block;
      margin:2px 0 16px;
      font-size:0.82rem;
      line-height:1.5;
      color:#D8D8E0;
      max-width:26rem;
      text-shadow:0 1px 14px rgba(var(--black-rgb),0.6);
    }

    /* the slab wrapper is the flex child now, so it carries the order */
    .page-hero .hero-actions{
      order:5;
      display:block;
      margin-top:auto;      /* holds the CTA at the base, photo band above */
      padding-top:24px;
    }

    /* CTA becomes a full-width lavender slab, like the homepage paths */
    .page-hero .hero-cta{
      position:relative;
      display:block;
      width:100%;
      margin:14px 0 0;
      padding:14px 46px 15px 18px;
      border-radius:0;
      border:0;
      background:var(--lavender);
      text-align:left;
      animation:qualifyRise .7s ease-out 1.05s both;
    }
    .page-hero .hero-cta .cta-meta{
      display:block;
      font-family:'Barlow Condensed', sans-serif;
      font-weight:700;
      font-size:0.56rem;
      letter-spacing:0.15em;
      text-transform:uppercase;
      white-space:nowrap;
      color:var(--slate);
    }
    .page-hero .hero-cta .cta-label{
      display:block;
      margin-top:2px;
      font-family:'Barlow Condensed', sans-serif;
      font-weight:800;
      font-size:1.26rem;
      line-height:1;
      text-transform:uppercase;
      color:var(--black);
    }
    .page-hero .hero-cta .cta-arrow{
      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);
    }
    .page-hero .hero-cta:hover{transform:none;}

    /* --- slate rail down the right edge --- */
    .page-hero .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;
    }
    .page-hero .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;
      min-height:0;
      overflow:hidden;
      flex:0 1 auto;      /* this trims first, never the scroll cue */
    }
    .page-hero .rail-scroll{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:11px;
      flex:0 0 auto;
    }
    .page-hero .rail-track{
      position:relative;
      width:14px; height:54px;
      flex:0 0 auto;
    }
    .page-hero .rail-track::before{
      content:"";
      position:absolute; left:50%; top:0;
      width:2px; height:100%;
      margin-left:-1px;
      background:rgba(var(--lavender-rgb),0.28);
    }
    .page-hero .rail-arrow{
      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:railArrow 2.6s cubic-bezier(.55,0,.35,1) infinite;
    }
    .page-hero .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;
    }
  }

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

  /* short phones: tighten so the photo keeps an open band */
  @media (max-width:860px) and (max-height:700px){
    .page-hero.has-collage .wrap{padding-top:14px; padding-bottom:16px;}
    .page-hero .hero-qualify-title{font-size:0.9rem; margin-bottom:12px;}
    .page-hero .hero-qualify-list li{font-size:0.75rem; margin-bottom:8px;}
    .page-hero h1{font-size:1.8rem; padding-top:16px;}
    .page-hero .hero-cta{padding:11px 42px 12px 15px; margin-top:10px;}
  }

  /* reduced motion: freeze the photo, the fly-in and the rail arrow */
  @media (prefers-reduced-motion:reduce){
    .page-hero.has-collage .hero-photo{animation:none; transform:scale(1.02);}
    .page-hero .hero-qualify-title,
    .page-hero .hero-qualify-list,
    .page-hero h1,
    .page-hero .hero-cta{animation:none; opacity:1; transform:none;}
    .page-hero .rail-arrow{animation:none; top:22px; opacity:1;}
  }

  /* ============================================================
     DESKTOP HERO — chrome overlay, mirroring index.html
     The header is translucent, so the hero runs underneath it
     rather than starting below it.
     ============================================================ */
  @media (min-width:861px){
    .page-hero.has-collage::before{
      content:"";
      position:absolute; left:0; right:0; top:0;
      height:clamp(150px, 24vh, 280px);
      z-index:1;
      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%);
    }
  }

  /* ============================================================
     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);}

  /* ============================================================
     DISCOVER — DESKTOP HERO, mirroring index.html
       · exactly 100dvh with the chrome overlaid
       · landscape plane (discover-hero.jpg) drifting behind
       · portrait still (discover_hero_vertical.jpg) as the bleed
         column: 2252x4000 is a 0.563 ratio, the same slot the
         homepage video occupies
       · qualifying list in the slot the homepage gives its subline
     Scoped to (min-width:861px). The phone hero is untouched.
     ============================================================ */

  @keyframes discPlaneDrift{
    from{transform:scale(1.02) translate3d(0%, 0%, 0);}
    to  {transform:scale(1.16) translate3d(-1.6%, -1.2%, 0);}
  }
  @keyframes discColumnDrift{
    /* a still has no motion of its own, so it travels a little further
       than the homepage video does */
    from{transform:scale(1.06) translate3d(-0.8%, -0.6%, 0);}
    to  {transform:scale(1.13) translate3d(0.9%, 0.8%, 0);}
  }

  .hero-column{display:none;}
  .hero-alt{display:none;}
  .page-hero .hero-rail-h{display:none;}

  @media (min-width:861px){

    /* --- exactly one screen, chrome floating on top --- */
    .page-hero.has-collage{
      display:flex;
      align-items:flex-end;
      height:100dvh;
      min-height:0;
      margin-top:calc(-1 * var(--chrome, 121px));
      padding:0;
      overflow:hidden;
    }

    /* --- the plane --- */
    .page-hero.has-collage .hero-photo{
      transform-origin:54% 46%;
      will-change:transform;
      animation:discPlaneDrift 34s ease-in-out infinite alternate;
    }
    .page-hero.has-collage .hero-photo img{
      object-position:center 46%;
    }
    .page-hero.has-collage .collage-scrim{
      background:linear-gradient(180deg,
        rgba(var(--black-rgb),0.56) 0%,
        rgba(var(--black-rgb),0.48) 34%,
        rgba(var(--black-rgb),0.54) 62%,
        rgba(var(--black-rgb),0.76) 100%);
    }

    /* --- the portrait column --- */
    .hero-column{
      display:block;
      position:absolute;
      top:0; right:0; bottom:0; left:auto;
      width:var(--railcol);
      z-index:2;
      overflow:hidden;
      -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%);
    }
    /* 
    CHANGE: removed side vertical image in desktop hero
    
    .hero-column::before{
      content:"";
      position:absolute; inset:0;
      background-image:url('/discover_hero_vertical.jpg');
      background-size:cover;
      background-position:center 42%;
      transform-origin:50% 50%;
      will-change:transform;
      animation:discColumnDrift 34s ease-in-out infinite alternate;
    } */

    /* --- copy column --- */
    .page-hero.has-collage .wrap{
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
      width:100%;
      max-width:none;
      padding-left:5vw;
      padding-right:calc(var(--railcol) + 64px);
      padding-bottom:clamp(96px, 12vh, 128px);
    }

    .page-hero .overline{
      order:1;
      font-size:0.78rem;
      letter-spacing:0.22em;
      margin-bottom:12px;
      text-shadow:0 1px 14px rgba(var(--black-rgb),0.6);
    }

    /* the <h1> is the headline again on desktop, cropped at the left
       edge exactly like the homepage */
    .page-hero h1{
      order:2;
      /* sized so the longest line clears the column; 22 characters
         against the homepage's 11 is why this is smaller than index */
      font-size:min(6.4vw, 11vh, 5.6rem);
      line-height:0.86;
      letter-spacing:-0.018em;
      text-transform:uppercase;
      font-weight:800;
      color:var(--white);
      margin:0 0 clamp(18px, 3vh, 34px);
      text-shadow:0 4px 40px rgba(var(--black-rgb),0.4);
    }
    .page-hero h1 .l1{display:block; white-space:nowrap;}
    .page-hero h1 .l2{display:block;}
    .page-hero h1 .l1{margin-left:calc(-5vw - 0.16em);}
    .page-hero h1 .l2{color:var(--teal);}
    .page-hero h1::after{content:none;}

    .page-hero .hero-desc{
      order:2;
      display:block;
      margin:0 0 clamp(14px, 2vh, 22px);
      font-size:clamp(0.86rem, 1.5vh, 0.98rem);
      line-height:1.5;
      color:#D8D8E0;
      max-width:32rem;
      text-shadow:0 1px 14px rgba(var(--black-rgb),0.55);
    }

    /* --- qualifying list, two columns --- */
    .page-hero .hero-qualify-title{
      order:3;
      display:block;
      margin:0 0 16px;
      font-family:'Inter', sans-serif;
      font-weight:600;
      font-size:1.02rem;
      line-height:1.4;
      letter-spacing:0;
      text-transform:none;
      color:#DEDEE8;
      text-shadow:0 1px 14px rgba(var(--black-rgb),0.6);
    }
    .page-hero .hero-qualify-title .l1,
    .page-hero .hero-qualify-title .l2{display:inline; color:inherit;}

    .page-hero .hero-qualify-list{
      order:4;
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      column-gap:40px;
      row-gap:9px;
      list-style:none;
      margin:0;
      padding:0;
      max-width:60rem;
    }
    .page-hero .hero-qualify-list li{
      position:relative;
      margin:0;
      padding-left:24px;
      font-size:clamp(0.84rem, 1.55vh, 0.95rem);
      line-height:1.35;
      color:#EFEFF4;
      text-shadow:0 1px 12px rgba(var(--black-rgb),0.6);
    }
    .page-hero .hero-qualify-list li::before{
      content:"✓";
      position:absolute; left:0; top:0;
      color:var(--teal);
    }

    /* --- two action slabs --- */
    .hero-actions{
      order:5;
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 360px));
      justify-content:start;
      gap:16px;
      margin-top:clamp(20px, 3.6vh, 36px);
    }
    .page-hero .hero-cta,
    .page-hero .hero-alt{
      position:relative;
      display:block;
      width:100%;
      margin:0;
      border-radius:0;
      text-align:left;
      padding:clamp(14px, 2vh, 20px) 52px clamp(15px, 2.1vh, 22px) 24px;
    }
    .page-hero .hero-cta{background:var(--lavender); border:0;}
    .page-hero .hero-alt{
      background:rgba(var(--black-rgb),0.30);
      -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
      border:1.5px solid var(--white);
    }
    .page-hero .cta-meta{
      display:block;
      font-family:'Barlow Condensed', sans-serif;
      font-weight:700; font-size:0.72rem;
      letter-spacing:0.2em; text-transform:uppercase;
      white-space:nowrap;
    }
    .page-hero .cta-label{
      display:block; margin-top:2px;
      font-family:'Barlow Condensed', sans-serif;
      font-weight:800; font-size:min(1.42rem, 2.6vh);
      line-height:1.02; text-transform:uppercase;
    }
    .page-hero .cta-arrow{
      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;
    }
    .page-hero .hero-cta .cta-meta{color:var(--slate);}
    .page-hero .hero-cta .cta-label,
    .page-hero .hero-cta .cta-arrow{color:var(--black);}
    .page-hero .hero-alt .cta-meta{color:var(--lavender);}
    .page-hero .hero-alt .cta-label,
    .page-hero .hero-alt .cta-arrow{color:var(--white);}
    .page-hero .hero-cta:hover,
    .page-hero .hero-alt:hover{transform:translateY(-2px);}

    /* --- base rail --- */
    .page-hero .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;
    }
    .page-hero .rail-data,
    .page-hero .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;
    }
    .page-hero .rail-data{color:var(--lavender); overflow:hidden; text-overflow:ellipsis;}
    .page-hero .rail-scroll-h{
      display:inline-flex; align-items:center; gap:12px;
      flex:0 0 auto; color:var(--white);
    }
    .page-hero .rail-chev{position:relative; display:block; width:16px; height:22px;}
    .page-hero .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:railArrowDisc 2.6s cubic-bezier(.55,0,.35,1) infinite;
    }

  }

  @keyframes railArrowDisc{
    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){
    .page-hero.has-collage .hero-photo{animation:none; transform:scale(1.02);}
    .hero-column::before{animation:none; transform:scale(1.06);}
    .page-hero .rail-chev::after{animation:none; top:6px; opacity:1;}
  }