/* How it Works — "Descend Into the Adventure" (page-scoped).
     Flattened from the Claude Design export: template bindings resolved to
     CSS custom properties, desktop/mobile toggle re-expressed as a media
     query, oversized display type dialed down, mockup scaffolding removed. */
  .hiw-root{background:#F4E9D2}
  .hiw-root a{color:#0B6E66;text-decoration:none}
  .hiw-root a:hover{color:#E8623F}

  #hiw-descent{
    --descent-cols:minmax(0,1fr) 160px minmax(0,1fr);
    --ladder-col:2; --content-odd:1; --content-even:3;
    --num-size:clamp(56px,9vw,120px);
    --row-min:298px; --hero-min:360px;
    --justify-odd:flex-end; --justify-even:flex-start;
  }
  @media (max-width:768px){
    #hiw-descent{
      --descent-cols:56px minmax(0,1fr);
      --ladder-col:1; --content-odd:2; --content-even:2;
      --num-size:64px; --row-min:218px; --hero-min:360px;
      --justify-odd:flex-start;
    }
    /* Life-ring is a desktop-only right-column anchor; on the narrow single
       column it would crowd the hero title, so drop it. */
    #hiw-descent [data-hero-ring]{display:none}
  }

  @keyframes hiwCaustic{0%{transform:translate3d(-5%,0,0) scale(1)}50%{transform:translate3d(5%,3%,0) scale(1.15)}100%{transform:translate3d(-5%,0,0) scale(1)}}
  @keyframes hiwCaustic2{0%{transform:translate3d(4%,2%,0) scale(1.1)}50%{transform:translate3d(-6%,-2%,0) scale(1)}100%{transform:translate3d(4%,2%,0) scale(1.1)}}
  @keyframes hiwFloat{0%,100%{transform:translate(-50%,-50%) rotate(var(--nr,0deg))}50%{transform:translate(-50%,calc(-50% - 9px)) rotate(var(--nr,0deg))}}
  @keyframes hiwShimmer{0%{transform:translateX(0)}100%{transform:translateX(-64px)}}
  @keyframes hiwNeedle{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}
  @media (prefers-reduced-motion: reduce){
    [data-caustic],[data-shimmer],[data-needle],[data-float]{animation:none !important}
  }

  /* CTA press (replaces the export hover behaviour) */
  #hiw-descent a[href="book-your-cabin-form.html"],
  #hiw-descent a[href="setting-up-expectations.html"]{transition:transform .12s ease, box-shadow .12s ease}
  #hiw-descent a[href="book-your-cabin-form.html"]:hover,
  #hiw-descent a[href="setting-up-expectations.html"]:hover{transform:translate(1.5px,1.5px)}

  /* Card ↔ rung connector (desktop only): a short dashed rope "leader" runs
     from each card's ladder-facing edge to its rung, ending in a knot dot —
     so every step card reads as tied to its numbered rung. Tan above the
     waterline, light-teal below it. Hidden on mobile (single-column stack),
     where the card already sits right beside its rung. */
  @media (min-width:769px){
    #hiw-descent [data-content] > div{--tie:#b0863f}
    #hiw-descent [data-zone="below"] [data-content] > div{--tie:#bfeee4}
    #hiw-descent [data-content] > div::before,
    #hiw-descent [data-content] > div::after{content:"";position:absolute;top:50%;transform:translateY(-50%);pointer-events:none}
    #hiw-descent [data-content] > div::before{width:66px;height:0;border-top:3px dashed var(--tie);opacity:.75}
    #hiw-descent [data-content] > div::after{width:12px;height:12px;border-radius:50%;background:var(--tie);box-shadow:0 0 0 3px rgba(252,246,236,.5)}
    #hiw-descent [data-content][data-side="left"] > div::before{left:100%}
    #hiw-descent [data-content][data-side="left"] > div::after{left:calc(100% + 56px)}
    #hiw-descent [data-content][data-side="right"] > div::before{right:100%}
    #hiw-descent [data-content][data-side="right"] > div::after{right:calc(100% + 56px)}
  }

  /* FAQ accordion */
  .hiw-faq{margin:0 0 13px;position:relative}
  .hiw-faq-btn{width:100%;text-align:left;display:flex;align-items:center;gap:14px;background:#0F5551;border:1px solid rgba(190,235,226,.2);padding:15px 18px;cursor:pointer;border-radius:4px;box-shadow:0 14px 28px -18px rgba(3,26,30,.85)}
  .hiw-faq-log{flex:0 0 auto;font:800 9px/1.25 'Nunito Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#8fd3c7;background:rgba(190,235,226,.1);border:1px solid rgba(190,235,226,.25);padding:6px 7px;border-radius:3px;text-align:center}
  .hiw-faq-q{flex:1 1 auto;font:700 23px/1.15 'Caveat',cursive;color:#F3EEDF}
  .hiw-faq-mark{flex:0 0 auto;width:30px;height:30px;border-radius:50%;color:#06302f;font:800 19px/30px 'Nunito Sans',sans-serif;text-align:center}
  .hiw-faq-panel{overflow:hidden;max-height:0;opacity:0;margin-top:0;transition:max-height .55s cubic-bezier(.4,0,.2,1),opacity .4s ease,margin-top .4s ease}
  .hiw-faq.is-open .hiw-faq-panel{max-height:1600px;opacity:1;margin-top:12px}
  .hiw-faq-panelinner{background:#FBF3E0;border-radius:4px;padding:20px 24px;background-image:repeating-linear-gradient(#0000 0 27px,rgba(11,110,102,.09) 27px 28px);box-shadow:0 16px 30px -18px rgba(3,26,30,.6)}
  .hiw-faq-loud{font:700 clamp(34px,7vw,56px)/.86 var(--font-display);text-transform:uppercase;margin:2px 0 14px;transform:rotate(-2deg);text-shadow:2px 3px 0 rgba(58,46,34,.14)}
  .hiw-faq-a{font:500 16px/1.72 'Nunito Sans',sans-serif;color:#3A2E22;margin:0}

  /* Keyboard focus — two-tone so the ring stays visible in BOTH the warm
     (dark outline) and the submerged teal (cream halo) zones; no single
     colour clears 3:1 against both. Scoped to this page's interactive
     elements (incl. the shared nav, on this page only). */
  .hiw-root a:focus-visible,
  .hiw-root button:focus-visible,
  .site-header a:focus-visible,
  .site-header .burger:focus-visible{
    outline:2px solid #06302f;
    outline-offset:2px;
    box-shadow:0 0 0 3px #FCF6EC;
    border-radius:2px;
  }