/* ============================================================
   parawing.css — styles unique to the Parawing 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.
   ============================================================ */
  /* --- trust band (why Tenerife) --- */
  .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;}

  /* --- pricing --- */
  .pricing-head{max-width:560px; margin-bottom:48px;}
  .pricing-head h2{font-size:2.6rem;}

  @media (max-width:860px){
    .trust .wrap{flex-direction:column; gap:12px;}
  }

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

  /* --- 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){
    table.pack-table td, table.pack-table th{padding:12px 6px;}
    table.pack-table .save{display:block; margin:5px 0 0; width:max-content;}
    .best-tag{display:block; margin:6px 0 0; width:max-content;}
  }

  /* ============================================================
     PARAWING — HERO, the system settled on coaching.html
       · exactly 100dvh with the chrome overlaid on it
       · landscape plane (parawing-hero.jpg) drifting behind
       · portrait plane (parawing_hero_vertical.jpg) on phones,
         swapped by <picture>, not by CSS background
       · the "who is it for" list lives IN the hero; the standalone
         section is gone, as on coaching and discover

     Both planes are crops of homecarousel4.jpg — the only photograph
     on the site that shows an actual parawing rather than a wingfoil
     wing. The source is 2252x4000 portrait and the rider, canopy and
     board together fill 34% of its height, so NO landscape crop can
     hold all three AND leave headroom above the canopy for the 113px
     of chrome. The loss is taken at the TOP: the canopy's upper arc
     runs off the frame edge, and the rider, the board and the
     waterline all stay in shot above the base rail. Cutting the
     board instead left a rider with no equipment under them.
     When a landscape parawing photo exists, swap parawing-hero.jpg
     for it and re-check the framing at 1280x700 as well as 1440x900.

     Keyframes are named hero* rather than para*: this whole block is
     now the third near-identical copy (discover, coaching, here) and
     is the obvious next component once week/about/contact are ported.
     ============================================================ */

  /* A gentle drift on purpose: the subject stands nearly as tall as
     the frame, so a coaching-sized zoom walks the canopy up behind
     the chrome and the board down behind the base rail. */
  @keyframes heroPlaneDrift{
    from{transform:scale(1.02) translate3d(0%, 0%, 0);}
    to  {transform:scale(1.06) translate3d(-0.8%, 0.4%, 0);}
  }
  @keyframes heroRailArrow{
    0%{top:0px; opacity:0;} 22%{opacity:1;}
    70%{top:34px; opacity:1;} 100%{top:38px; opacity:0;}
  }
  @keyframes heroRailArrowH{
    0%{top:0px; opacity:0;} 22%{opacity:1;}
    70%{top:10px; opacity:1;} 100%{top:13px; opacity:0;}
  }
  @keyframes heroQualifyRise{
    from{opacity:0; transform:translate3d(0,14px,0);}
    to  {opacity:1; transform:translate3d(0,0,0);}
  }

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

  /* both rails are opt-in; each width switches its own on */
  .page-hero .hero-rail,
  .page-hero .hero-rail-h{display:none;}

  .page-hero h1 em{font-style:normal; color:var(--teal);}

  /* ---------- phones ---------- */
  @media (max-width:860px){
    .page-hero.has-collage{
      min-height:calc(100vh - 104px);
      min-height:calc(100svh - 104px);
      padding:0;
      display:flex;
      align-items:stretch;         /* the wrap fills the hero so the slab can sit at its base */
    }
    /* The portrait plane is the whole screen. The copy sits at the
       TOP, so the scrim is dark there and opens up over the canopy
       and the water below — a legibility floor, not decoration.
       Re-tuned from coaching's: this hero carries four list items
       rather than seven, so the copy ends higher and the fade has
       to start higher with it, or the gradient blankets the canopy
       (the one bright thing in the frame) in black. */
    .page-hero.has-collage .hero-photo img{object-position:center center;}
    .page-hero.has-collage .collage-scrim{
      background:linear-gradient(180deg,
        rgba(var(--black-rgb),0.82) 0%,
        rgba(var(--black-rgb),0.74) 34%,
        rgba(var(--black-rgb),0.46) 56%,
        rgba(var(--black-rgb),0.30) 78%,
        rgba(var(--black-rgb),0.52) 100%);
    }
    .page-hero.has-collage .wrap{
      padding:18px 52px 22px 20px;   /* right padding clears the rail */
      width:100%;
      display:flex;
      flex-direction:column;         /* copy at the top, slab pushed to the base */
    }
    .page-hero .hero-cta{
      margin-top:auto;               /* holds the slab at the base, photo band above */
      padding:13px 44px 14px 16px;
    }
    .page-hero .cta-meta{font-size:0.58rem;}
    .page-hero .cta-label{font-size:1.2rem;}
    .page-hero .cta-arrow{right:16px; font-size:1.3rem;}
    .page-hero .overline{font-size:0.6rem; letter-spacing:0.2em; margin-bottom:10px;}
    .page-hero h1{
      font-size:clamp(2rem, 9vw, 2.7rem);
      line-height:0.92;
      text-transform:uppercase;
      letter-spacing:-0.01em;
      margin:0 0 12px;
      text-shadow:0 2px 22px rgba(var(--black-rgb),0.45);
    }
    /* 0.86rem, not coaching's 0.9rem: this desc is three sentences
       where coaching's is one, and at 0.9 it ran to five lines and
       pushed the CTA slab past the fold on a 640px-tall phone. */
    .page-hero .hero-desc{
      font-size:0.86rem; line-height:1.42; color:#DEDEE8;
      max-width:20rem; margin-bottom:16px;
      text-shadow:0 1px 14px rgba(var(--black-rgb),0.5);
    }

    /* --- slate rail down the right edge (design system 4) --- */
    .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;   /* location trims, never the 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:heroRailArrow 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;
    }
  }

  /* ---------- desktop ---------- */
  @media (min-width:861px){

    .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;
    }

    /* top scrim so the chrome never sits on bare sky */
    .page-hero.has-collage::before{
      content:"";
      position:absolute; left:0; right:0; top:0;
      /* shallower and lighter than coaching's: the canopy sits in
         this band, and coaching's 280px at 0.62 turned it grey */
      height:clamp(130px, 19vh, 220px);
      z-index:2; pointer-events:none;
      background:linear-gradient(180deg,
        rgba(var(--black-rgb),0.56) 0%, rgba(var(--black-rgb),0.24) 55%, rgba(var(--black-rgb),0) 100%);
    }

    /* The plane is cropped to 1.6:1, the same ratio as a 1440x900
       hero, so cover leaves no overflow there and object-position
       does nothing. It bites on shorter windows (1280x700 crops
       100px): take that trim off the TOP, where the frame holds
       only sky and the canopy's upper arc, and never off the base,
       which is where the rider and the board are. The drift is
       anchored low for the same reason — a centred origin walks the
       board down behind the base rail as it zooms. */
    .page-hero.has-collage .hero-photo{
      transform-origin:52% 62%;
      will-change:transform;
      animation:heroPlaneDrift 34s ease-in-out infinite alternate;
    }
    .page-hero.has-collage .hero-photo img{object-position:center 65%;}
    /* Two layers, not coaching's one. The 90deg layer is a floor
       under the copy column: the left of the frame is hard sunlight
       on chop, bright enough to swallow the qualify list, and it
       fades out by 78% so the rider and the canopy on the right
       keep their contrast. It also covers the headline in the
       narrow windows where the canopy drops into its band — teal
       type over yellow-green is the one pairing this palette
       cannot survive. */
    .page-hero.has-collage .collage-scrim{
      background:
        linear-gradient(90deg,
          rgba(var(--black-rgb),0.50) 0%,
          rgba(var(--black-rgb),0.40) 46%,
          rgba(var(--black-rgb),0) 78%),
        linear-gradient(180deg,
          rgba(var(--black-rgb),0.40) 0%,
          rgba(var(--black-rgb),0.38) 30%,
          rgba(var(--black-rgb),0.54) 62%,
          rgba(var(--black-rgb),0.78) 100%);
    }

    .page-hero.has-collage .wrap{
      display:flex; flex-direction:column; justify-content:flex-end;
      width:100%; max-width:none;
      padding-left:5vw;
      padding-right:5vw;
      padding-bottom:clamp(104px, 13vh, 140px);   /* clears the base rail */
    }
    .page-hero .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: a short window shrinks the type rather
       than overflowing a fixed-height hero */
    .page-hero.has-collage h1{
      font-size:min(7vw, 13vh, 5.4rem);
      line-height:0.9;
      letter-spacing:-0.02em;
      text-transform:uppercase;
      /* 26ch, not coaching's 20ch: this headline is one sentence and
         20ch breaks it after "the", orphaning "FOIL." on its own
         line. It still holds at 1280 wide. */
      max-width:26ch;
      margin:0 0 14px;
      text-shadow:0 4px 40px rgba(var(--black-rgb),0.4);
    }
    .page-hero .hero-desc{
      font-size:clamp(0.95rem, 1.6vh, 1.06rem);
      max-width:38rem; color:#DEDEE8; margin-bottom:26px;
      text-shadow:0 1px 14px rgba(var(--black-rgb),0.6);
    }
    .page-hero .hero-cta{
      max-width:360px;
      margin:0;
      padding:clamp(14px, 2vh, 20px) 52px clamp(15px, 2.1vh, 22px) 24px;
    }
    .page-hero .cta-meta{font-size:0.72rem;}
    .page-hero .cta-label{font-size:min(1.42rem, 2.6vh);}
    .page-hero .cta-arrow{right:22px; font-size:1.5rem;}

    /* --- 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:heroRailArrowH 2.6s cubic-bezier(.55,0,.35,1) infinite;
    }
  }

  /* --- hero CTA: the action slab from the design system (4), the
         same treatment discover and coaching use. Square, lavender,
         eyebrow over a condensed label, arrow pinned right. --- */
  .page-hero .hero-cta{
    position:relative;
    display:block;
    width:100%;
    border-radius:0;
    border:0;
    background:var(--lavender);
    text-align:left;
    animation:heroQualifyRise .7s ease-out .9s both;
  }
  .page-hero .cta-meta{
    display:block;
    font-family:'Barlow Condensed', sans-serif;
    font-weight:700;
    letter-spacing:0.2em;
    text-transform:uppercase;
    white-space:nowrap;
    color:var(--slate);
  }
  .page-hero .cta-label{
    display:block;
    margin-top:2px;
    font-family:'Barlow Condensed', sans-serif;
    font-weight:800;
    line-height:1.02;
    text-transform:uppercase;
    color:var(--black);
  }
  .page-hero .cta-arrow{
    position:absolute; top:50%;
    transform:translateY(-50%);
    font-family:'Barlow Condensed', sans-serif;
    font-weight:700; line-height:1;
    color:var(--black);
  }

  /* --- the qualifying block, as settled on coaching.html: body
         voice, not a second headline. Inter 600 makes it a question
         asked of the reader and lets the h1 keep the display voice
         to itself. --- */
  .page-hero .hero-qualify-title{
    font-family:'Inter', sans-serif;
    font-weight:600;
    line-height:1.4;
    letter-spacing:0;
    text-transform:none;
    color:#DEDEE8;
    text-shadow:0 1px 14px rgba(var(--black-rgb),0.6);
    animation:heroQualifyRise .7s ease-out .3s both;
  }
  .page-hero .hero-qualify-title .l1,
  .page-hero .hero-qualify-title .l2{color:inherit;}

  .page-hero .hero-qualify-list{
    list-style:none; margin:0; padding:0;
    animation:heroQualifyRise .7s ease-out .5s both;
  }
  .page-hero .hero-qualify-list li{
    position:relative;
    padding-left:22px;
    color:#EFEFF4;
    text-shadow:0 1px 12px rgba(var(--black-rgb),0.65);
  }
  .page-hero .hero-qualify-list li::before{
    content:"\2713";
    position:absolute; left:0; top:0;
    color:var(--teal);
  }

  @media (max-width:860px){
    .page-hero .hero-qualify-title{font-size:0.95rem; margin:0 0 12px;}
    .page-hero .hero-qualify-list li{font-size:0.76rem; line-height:1.34; margin-bottom:6px;}
    .page-hero .hero-qualify-list li::before{font-size:0.76rem; line-height:1.34;}
    .page-hero .hero-qualify-list{margin-bottom:14px;}
  }

  @media (min-width:861px){
    .page-hero .hero-qualify-title{
      font-size:1.02rem;
      margin:0 0 16px;
    }
    /* four items, not coaching's seven: two columns still beat one
       long ladder here, and keep the block clear of the CTA slab */
    .page-hero .hero-qualify-list{
      column-count:2; column-gap:44px;
      max-width:58rem;
      margin-bottom:22px;
    }
    .page-hero .hero-qualify-list li{
      font-size:clamp(0.8rem, 1.5vh, 0.92rem);
      line-height:1.4;
      margin-bottom:9px;
      break-inside:avoid;
    }
    .page-hero .hero-qualify-list li::before{
      font-size:clamp(0.8rem, 1.5vh, 0.92rem);
      line-height:1.4;
    }
    /* the headline gives room back to the list */
    .page-hero.has-collage h1{font-size:min(5.4vw, 9vh, 3.9rem); margin:0 0 16px;}
    .page-hero .hero-desc{margin-bottom:20px; max-width:44rem;}
  }

  @media (prefers-reduced-motion:reduce){
    .page-hero .hero-qualify-title,
    .page-hero .hero-qualify-list,
    .page-hero .hero-cta{animation:none; opacity:1; transform:none;}
    .page-hero.has-collage .hero-photo{animation:none; transform:scale(1.06);}
    .page-hero .rail-arrow{animation:none; top:22px; opacity:1;}
    .page-hero .rail-chev::after{animation:none; top:6px; opacity:1;}
  }