/* Follow the Tide -- built by build.py from the single-page master.
   Edit the master, not this file. */
:root{
    /* ------------------------------------------------------------------
       BRAND COLOURS, taken out of the logo file:
         navy  #16262E     teal  #2E8F9A     cream #FAF8F4

       Two things worth knowing if you ever change these.

       1. --accent-fill is the logo teal at full strength and is only ever
          used as a BACKGROUND, with a near-black label on it. --coral is a
          deeper version of the same teal and is used for TEXT, because the
          logo teal on a pale background measures only 3.3 to 1 and text
          needs 4.5 to 1 to be readable.
       2. --lagoon is deliberately a GREEN-teal, so the information panels
          stay visibly different from the blue-teal of links and buttons.

       Every colour pair on the site was contrast-tested, in both light and
       dark mode. If you change one, check it still passes.
       ------------------------------------------------------------------ */
    --ink:#16262E;
    --ink-soft:#42626C;
    --surface:#FFFDF8;
    --surface-raised:#FFFFFF;
    --bg:#F1EEE4;
    --tide:#15505E;
    --tide-ink:#FBFAF6;
    --lagoon:#1D7169;
    --lagoon-soft:#DBE8E2;
    --coral:#266A74;
    --coral-ink:#FBFAF6;
    --coral-soft:#CDE3E1;
    --accent-fill:#2E8F9A;
    --accent-fill-ink:#101C22;
    --line:#D6D2C5;
    --dune:#5A686C;
    --amber:#7A5A14;
    --amber-soft:#FAEFD4;
    --focus:#266A74;
    --shadow: 0 18px 40px -22px rgba(22,38,46,0.28);
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ink:#EDF4F5;
      --ink-soft:#AFC6CB;
      --surface:#16303A;
      --surface-raised:#1E3E49;
      --bg:#0D2129;
      --tide:#2B7C8A;
      --tide-ink:#F4FBFC;
      --lagoon:#6FD0BF;
      --lagoon-soft:#143F3A;
      --coral:#6AD0DB;
      --coral-ink:#06222A;
      --coral-soft:#1F4D56;
      --accent-fill:#55C3D0;
      --accent-fill-ink:#06222A;
      --line:#265059;
      --dune:#A6BBBF;
      --amber:#F0C266;
      --amber-soft:#3C3115;
      --focus:#7FC0C8;
      --shadow: 0 18px 40px -18px rgba(0,0,0,0.6);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --ink:#EDF4F5;
    --ink-soft:#AFC6CB;
    --surface:#16303A;
    --surface-raised:#1E3E49;
    --bg:#0D2129;
    --tide:#2B7C8A;
    --tide-ink:#F4FBFC;
    --lagoon:#6FD0BF;
    --lagoon-soft:#143F3A;
    --coral:#6AD0DB;
    --coral-ink:#06222A;
    --coral-soft:#1F4D56;
    --accent-fill:#55C3D0;
    --accent-fill-ink:#06222A;
    --line:#265059;
    --dune:#A6BBBF;
    --amber:#F0C266;
    --amber-soft:#3C3115;
    --focus:#7FC0C8;
    --shadow: 0 18px 40px -18px rgba(0,0,0,0.6);
    color-scheme: dark;
  }

  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:"Inter", ui-sans-serif, system-ui, sans-serif;
    padding-inline: max(16px, calc((100vw - 1120px)/2));
    line-height:1.55;
  }
  h1,h2,h3,h4{
    font-family:"Fraunces", Georgia, serif;
    font-weight:600;
    line-height:1.1;
    text-wrap:balance;
    margin:0;
    color:var(--ink);
  }
  a{color:inherit;}
  p{margin:0;}
  .mono{font-family:"IBM Plex Mono", ui-monospace, monospace;}
  .eyebrow{
    font-family:"IBM Plex Mono", ui-monospace, monospace;
    font-size:12px;
    letter-spacing:.11em;
    text-transform:uppercase;
    color:var(--dune);
  }
  .wrap{max-width:1120px; margin-inline:auto;}
  section{padding-block: clamp(48px,7vw,92px);}
  section + section{border-top:1px solid var(--line);}
  .lede{font-size:clamp(16px,1.7vw,19px); color:var(--ink-soft); max-width:62ch;}
  button{font:inherit;}
  :focus-visible{outline:2.5px solid var(--focus); outline-offset:2px;}

  /* ---------- nav ---------- */
  .nav{
    position:sticky; top:0; z-index:40;
    display:flex; align-items:center; justify-content:space-between;
    padding-block:14px;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom:1px solid var(--line);
  }
  .brand{display:flex; align-items:center; gap:10px; font-family:"Fraunces",serif; font-weight:600; font-size:19px;}
  .brand svg{flex:none;}
  /* The logo is a picture, so it cannot take its colour from the theme the
     way text can. Two versions are loaded and the wrong one is hidden: the
     navy wordmark would vanish against a dark background. */
  .brand-logo{display:block; height:34px; width:auto;}
  .brand-dark{display:none;}
  @media (max-width:420px){ .brand-logo{height:26px;} }
  .nav-links{display:flex; gap:22px; font-size:14px; font-weight:500;}
  .nav-links a{text-decoration:none; color:var(--ink-soft);}
  .nav-links a:hover{color:var(--coral);}
  .nav-cta{
    background:var(--accent-fill); color:var(--accent-fill-ink); border:none; border-radius:999px;
    padding:9px 18px; font-weight:600; font-size:14px; cursor:pointer;
  }
  .brand{text-decoration:none; color:var(--ink);}
  .btn-primary, .btn-ghost, .link-btn{text-decoration:none;}
  a.btn-primary, a.btn-ghost{display:inline-block; text-align:center;}
  .nav-links a{position:relative; padding-block:3px;}
  .nav-links a[aria-current="page"]{color:var(--coral); font-weight:600;}
  .nav-links a[aria-current="page"]::after{content:""; position:absolute; left:0; right:0; bottom:-2px;
    height:2px; border-radius:2px; background:var(--coral);}
  .nav-cta{display:inline-block; text-decoration:none; text-align:center;}

  @media (max-width:760px){
    .nav{flex-wrap:wrap; row-gap:10px;}
    .nav-links{order:3; width:100%; overflow-x:auto; gap:18px; padding-bottom:3px;
      scrollbar-width:none; -webkit-overflow-scrolling:touch;}
    .nav-links::-webkit-scrollbar{display:none;}
    .nav-links a{white-space:nowrap;}
  }
  .page[hidden]{display:none!important;}
  .page > section:first-child, .page > header:first-child{border-top:none;}
  .next-dates{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-top:22px;}
  .nd{border:1px solid var(--line); border-radius:13px; padding:15px 17px; background:var(--surface-raised);}
  .nd .nd-pkg{font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--dune);
    font-family:"IBM Plex Mono",monospace;}
  .nd .nd-date{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:15px; margin-top:5px;}
  .nd .nd-sub{font-size:12.5px; color:var(--ink-soft); margin-top:3px;}

  /* ---------- home: cinematic hero ---------- */
  .home-hero{position:relative; border-radius:22px; overflow:hidden; margin-block:8px 0;
    min-height:clamp(470px,72vh,690px); display:flex; align-items:flex-end;
    background:var(--tide); box-shadow:var(--shadow); border-top:none;}
  .home-hero .hero-media{position:absolute; inset:0; overflow:hidden;
    background-size:cover; background-position:50% 45%; background-repeat:no-repeat;}
  .home-hero .hero-media video{width:100%; height:100%; object-fit:cover; display:block;
    object-position:50% 45%; animation:heroFade 1.2s ease both;}
  @keyframes heroFade{from{opacity:0}to{opacity:1}}
  @media (prefers-reduced-motion: reduce){
    .home-hero .hero-media video{display:none;}
  }
  /* Wash: on wide screens it leans left so the headline reads while the ocean
     side of the footage stays bright. On phones the text sits over the whole
     frame, so it goes back to a full top-to-bottom darkening. */
  .home-hero .hero-wash{position:absolute; inset:0;
    background:
      linear-gradient(90deg, rgba(10,28,34,.78) 0%, rgba(10,28,34,.34) 42%, rgba(10,28,34,.04) 72%, rgba(10,28,34,0) 100%),
      linear-gradient(180deg, rgba(10,28,34,.04) 0%, rgba(10,28,34,0) 38%, rgba(10,28,34,.58) 100%);}
  @media (max-width:860px){
    .home-hero .hero-wash{
      background:linear-gradient(180deg, rgba(10,28,34,.12) 0%, rgba(10,28,34,.44) 45%, rgba(10,28,34,.76) 100%);}
  }
  .home-hero .hero-inner{position:relative; padding:clamp(26px,4.5vw,52px); width:100%;}
  .home-hero .eyebrow{color:rgba(251,250,246,.92); text-shadow:0 1px 10px rgba(8,22,27,.6);}
  .home-hero h1{color:#FFFDF8; font-size:clamp(34px,6vw,68px); letter-spacing:-.015em; max-width:15ch;
    text-shadow:0 2px 18px rgba(8,22,27,.55), 0 1px 3px rgba(8,22,27,.5);}
  .home-hero .hero-sub{color:#FBFAF6; text-shadow:0 1px 12px rgba(8,22,27,.6), 0 1px 2px rgba(8,22,27,.55); font-size:clamp(16px,1.75vw,19px);
    max-width:58ch; margin-top:16px; line-height:1.55;}
  .home-hero .hero-actions{margin-top:26px;}
  .home-hero .btn-ghost{color:#F7F3E8; border-color:rgba(247,243,232,.45);}
  .tide-lines{position:absolute; inset:0; opacity:.5;}
  @media (prefers-reduced-motion: no-preference){
    .tide-lines path{animation:drift 14s ease-in-out infinite alternate;}
    .tide-lines path:nth-child(2){animation-duration:19s;}
    .tide-lines path:nth-child(3){animation-duration:24s;}
  }
  @keyframes drift{ from{transform:translateX(-14px);} to{transform:translateX(14px);} }

  /* ---------- home: the photo panel ----------
     Laid out in columns rather than a grid, on purpose. A grid forces every
     photograph into the same shaped box, which means cropping: a standing-up
     photograph loses its top and bottom. Columns let each photograph keep its
     own shape at its own height, so nothing is cut off, and the browser
     evens up the column heights by itself however many photographs there
     are. No captions, by design. */
  .gallery{column-count:3; column-gap:10px; margin-top:26px;}
  @media (max-width:900px){ .gallery{column-count:2;} }
  /* two columns still on a phone: one column made the panel nine screens
     long and people stopped scrolling before they reached the rest of the
     page. Tapping any photograph opens it full size anyway. */
  @media (max-width:560px){ .gallery{column-count:2; column-gap:8px;} }
  @media (max-width:360px){ .gallery{column-count:1; column-gap:0;} }

  .gtile{position:relative; margin:0 0 10px; padding:0; overflow:hidden;
    border-radius:12px; background:var(--tide); break-inside:avoid;
    -webkit-column-break-inside:avoid; cursor:zoom-in; line-height:0;}
  .gtile img{width:100%; height:auto; display:block; transition:transform .5s ease;}
  .gtile:hover img{transform:scale(1.04);}

  /* A clip is given its shape by the w and h in the GALLERY list, because a
     video has no natural height until it has loaded and the column would
     jump about when it arrived. The still sits behind it meanwhile. */
  .gtile.gclip{aspect-ratio:16/9; background-size:cover; background-position:50% 50%;}
  .gtile.gclip video{position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; display:block;}
  @media (prefers-reduced-motion: reduce){
    .gtile.gclip video{display:none;}
    .gtile:hover img{transform:none;}
  }

  /* An empty tile, so the shape of the panel is visible before the
     photographs are in. Delete its line from GALLERY and it is gone. */
  .gtile.gempty{cursor:default; aspect-ratio:4/3; line-height:1.6;
    border:1px dashed rgba(247,243,232,.32); display:flex;
    align-items:center; justify-content:center; text-align:center;}
  .gtile.gempty span{font-family:"IBM Plex Mono",monospace; font-size:10.5px;
    letter-spacing:.07em; text-transform:uppercase; color:rgba(247,243,232,.5);
    padding:10px;}

  /* the full-size view, opened by clicking a tile */
  .lightbox{position:fixed; inset:0; z-index:90; background:rgba(15,32,39,.94);
    display:flex; align-items:center; justify-content:center; padding:24px;
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);}
  .lightbox[hidden]{display:none;}
  .lightbox img, .lightbox video{max-width:100%; max-height:100%; width:auto;
    height:auto; border-radius:10px; box-shadow:0 18px 60px rgba(0,0,0,.5);}
  .lightbox video[hidden], .lightbox img[hidden]{display:none;}
  .lb-btn{position:absolute; border:none; background:rgba(247,243,232,.13);
    color:#F7F3E8; width:44px; height:44px; border-radius:50%; cursor:pointer;
    font-size:20px; line-height:1; display:flex; align-items:center;
    justify-content:center;}
  .lb-btn:hover{background:rgba(247,243,232,.26);}
  .lb-close{top:18px; right:18px; font-size:24px;}
  .lb-prev{left:18px; top:50%; transform:translateY(-50%);}
  .lb-next{right:18px; top:50%; transform:translateY(-50%);}
  .lb-count{position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
    font-family:"IBM Plex Mono",monospace; font-size:12px; color:rgba(247,243,232,.7);}
  @media (max-width:600px){
    .lb-prev{left:8px;} .lb-next{right:8px;} .lb-close{top:10px; right:10px;}
  }

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .brand-light{display:none;}
    :root:not([data-theme="light"]) .brand-dark{display:block;}
  }
  :root[data-theme="dark"] .brand-light{display:none;}
  :root[data-theme="dark"] .brand-dark{display:block;}
  :root[data-theme="light"] .brand-light{display:block;}
  :root[data-theme="light"] .brand-dark{display:none;}

  /* ---------- reviews ---------- */
  /* Laid out by how many there are. One review gets the whole width as a
     pull quote, because a lone card in a three-column grid looks like a
     mistake. Two or three sit side by side. More than that goes to a grid. */
  .reviews{display:grid; gap:16px;}
  .reviews.one{grid-template-columns:1fr;}
  .reviews.few{grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));}
  .reviews.many{grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));}
  .review{background:var(--surface-raised); border:1px solid var(--line);
    border-radius:18px; padding:24px 26px; display:flex; flex-direction:column; gap:14px;}
  .review blockquote{margin:0; font-family:"Fraunces",serif; font-weight:500;
    font-size:clamp(16.5px,1.7vw,19px); line-height:1.5; color:var(--ink); text-wrap:pretty;}
  .reviews.one .review blockquote{font-size:clamp(19px,2.3vw,26px); line-height:1.45; max-width:44ch;}
  .review .r-mark{font-family:"Fraunces",serif; font-size:34px; line-height:.6;
    color:var(--coral-soft); height:16px;}
  .review figcaption{font-family:"IBM Plex Mono",monospace; font-size:11.5px;
    letter-spacing:.04em; color:var(--dune); margin-top:auto;}
  .review figcaption b{display:block; text-transform:none; letter-spacing:0;
    font-family:"Inter",sans-serif; font-size:14px; font-weight:600;
    color:var(--ink); margin-bottom:3px;}
  .review-ask{margin-top:22px; font-size:13.5px; color:var(--ink-soft);}
  .review-ask a{color:var(--coral); font-weight:600;}

  /* ---------- home: scarcity band ---------- */
  .scarcity{background:var(--tide); color:var(--tide-ink); border-radius:20px; padding:clamp(24px,3.4vw,38px);
    box-shadow:var(--shadow); display:grid; grid-template-columns:1.25fr .75fr; gap:34px; align-items:center;}
  @media (max-width:820px){ .scarcity{grid-template-columns:1fr;} }
  .scarcity h2{color:#F7F3E8; font-size:clamp(23px,3.1vw,33px);}
  .scarcity p{color:rgba(244,239,226,.85); font-size:15.5px; margin-top:13px; max-width:54ch;}
  .scarcity .big{display:flex; gap:30px; flex-wrap:wrap; margin-top:22px;}
  .scarcity .big div b{display:block; font-family:"Fraunces",serif; font-size:33px; font-weight:600; line-height:1; color:#F7F3E8;}
  .scarcity .big div span{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.07em;
    text-transform:uppercase; color:rgba(244,239,226,.62); display:block; margin-top:6px;}

  /* ---------- home: differentiators ---------- */
  .diffs{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1px;
    background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-top:26px;}
  .diff{background:var(--surface-raised); padding:20px 22px;}
  .diff b{display:block; font-family:"Fraunces",serif; font-size:16.5px; font-weight:600; margin-bottom:6px;}
  .diff p{font-size:13.5px; color:var(--ink-soft);}

  /* ---------- home: waiting list ---------- */
  .waitlist{background:var(--surface-raised); border:1px solid var(--line); border-radius:18px;
    padding:clamp(22px,3vw,30px); margin-top:30px;}
  .waitlist h3{font-size:20px; margin-bottom:8px;}
  .waitlist p{font-size:14.5px; color:var(--ink-soft); max-width:60ch;}
  .wl-form{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}
  .wl-form input{flex:1 1 240px; border:1.5px solid var(--line); border-radius:999px; padding:12px 18px;
    font:inherit; font-size:15px; background:var(--bg); color:var(--ink);}
  .wl-form button{flex:none;}
  .wl-msg{font-size:13.5px; margin-top:12px; color:var(--lagoon); font-weight:500;}
  .wl-msg[hidden]{display:none;}

  /* ---------- hero ---------- */
  .hero{padding-block: clamp(40px,8vw,84px) clamp(32px,6vw,56px); border-top:none;}
  .hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;}
  @media (max-width:860px){ .hero-grid{grid-template-columns:1fr;} }
  .hero h1{font-size:clamp(34px, 5.4vw, 58px); letter-spacing:-.01em;}
  .hero .lede{margin-top:16px;}
  .hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px;}
  .btn-primary{
    background:var(--accent-fill); color:var(--accent-fill-ink); border:none; border-radius:999px;
    padding:13px 24px; font-weight:600; font-size:15px; cursor:pointer; box-shadow:var(--shadow);
  }
  .btn-ghost{
    background:transparent; color:var(--ink); border:1.5px solid var(--line); border-radius:999px;
    padding:12px 22px; font-weight:600; font-size:15px; cursor:pointer;
  }
  .hero-facts{display:flex; gap:22px; margin-top:34px; flex-wrap:wrap;}
  .hero-fact b{display:block; font-family:"Fraunces",serif; font-size:22px; font-weight:600;}
  .hero-fact span{font-size:12.5px; color:var(--dune); font-family:"IBM Plex Mono",monospace; letter-spacing:.04em;}

  .tide-card{
    background:var(--tide); color:var(--tide-ink); border-radius:22px; padding:26px 26px 22px;
    box-shadow:var(--shadow); position:relative; overflow:hidden;
  }
  .tide-card .eyebrow{color:color-mix(in srgb, var(--tide-ink) 65%, transparent);}
  .tide-curve{width:100%; height:auto; display:block; margin-block:14px 8px;}
  .tide-card .cap{font-size:13.5px; color:color-mix(in srgb, var(--tide-ink) 78%, transparent);}
  .tide-next{display:flex; justify-content:space-between; align-items:baseline; padding-block:9px; border-top:1px solid color-mix(in srgb, var(--tide-ink) 22%, transparent);}
  .tide-next:first-of-type{border-top:1px solid color-mix(in srgb, var(--tide-ink) 22%, transparent); margin-top:10px;}
  .tide-next b{font-family:"IBM Plex Mono",monospace; font-weight:600;}
  .tide-next span{font-size:12px; opacity:.75;}

  /* ---------- notice banners ---------- */
  .notice{
    display:flex; gap:12px; align-items:flex-start; border-radius:14px; padding:16px 18px;
    font-size:14.5px; border:1px solid var(--line);
  }
  .notice.amber{background:var(--amber-soft); border-color:color-mix(in srgb, var(--amber) 40%, var(--line));}
  .notice.lagoon{background:var(--lagoon-soft); border-color:color-mix(in srgb, var(--lagoon) 35%, var(--line));}
  /* the first b in a notice is its title, and sits on its own line. Any other
     bold inside the body stays inline, mid-sentence, where it belongs. */
  .notice > div > b:first-child{display:block; margin-bottom:2px; font-size:13.5px; letter-spacing:.02em;}
  .notice b{font-weight:600;}
  .notice-dot{width:9px; height:9px; border-radius:50%; margin-top:5px; flex:none;}
  .amber .notice-dot{background:var(--amber);}
  .lagoon .notice-dot{background:var(--lagoon);}

  /* ---------- section headers ---------- */
  .section-head{max-width:70ch; margin-bottom:36px;}
  .section-head h2{font-size:clamp(26px,3.4vw,38px); margin-top:8px;}

  /* ---------- package cards ---------- */
  .pkg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  @media (max-width:980px){.pkg-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:560px){.pkg-grid{grid-template-columns:1fr;}}
  .pkg-card{
    background:var(--surface-raised); border:1px solid var(--line); border-radius:18px;
    padding:22px 20px; display:flex; flex-direction:column; gap:14px; min-height:100%;
  }
  .pkg-tag{display:inline-flex; align-self:flex-start; font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
    padding:4px 10px; border-radius:999px;}
  .pkg-tag.bike{background:var(--lagoon-soft); color:var(--lagoon);}
  .pkg-tag.water{background:var(--coral-soft); color:var(--coral);}
  .pkg-card h3{font-size:21px;}
  .pkg-card .desc{font-size:14.5px; color:var(--ink-soft);}
  .pkg-meta{display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; font-size:13px; margin-top:auto; padding-top:12px; border-top:1px solid var(--line);}
  .pkg-meta div span{display:block; color:var(--dune); font-size:11px; text-transform:uppercase; letter-spacing:.05em;}
  .pkg-meta div b{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:14px;}
  .pkg-card .price{font-family:"Fraunces",serif; font-size:19px; font-weight:600;}
  .pkg-card .price small{font-family:"Inter",sans-serif; font-size:12px; color:var(--dune); font-weight:500;}
  .link-btn{background:none; border:none; color:var(--coral); font-weight:600; font-size:14px; cursor:pointer; padding:0; text-align:left;}
  .pkg-card{cursor:pointer; transition:border-color .15s, box-shadow .15s;}
  .pkg-card:hover{border-color:var(--coral);}
  .pkg-card[aria-expanded="true"]{border-color:var(--coral); box-shadow:0 0 0 1.5px var(--coral);}
  .pkg-card:focus-visible{outline:2.5px solid var(--focus); outline-offset:3px;}
  .pkg-cta{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    margin-top:30px; padding-top:26px; border-top:1px solid var(--line);}
  .pkg-cta span{font-size:13.5px; color:var(--dune);}

  /* ---------- itinerary ---------- */
  .pkg-detail{padding-block:44px; border-top:1px solid var(--line);}
  .pkg-detail-head{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:flex-end; margin-bottom:26px;}
  .pkg-detail-head .stats{display:flex; gap:20px; flex-wrap:wrap;}
  .pkg-detail-head .stats div span{display:block; font-size:11px; color:var(--dune); text-transform:uppercase; letter-spacing:.05em;}
  .pkg-detail-head .stats div b{font-family:"IBM Plex Mono",monospace; font-size:16px;}
  .timeline{display:flex; flex-direction:column; gap:0;}
  .tl-item{display:grid; grid-template-columns:88px 22px 1fr; gap:0 16px; }
  .tl-item .tl-day{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--dune); padding-block:16px 0;}
  .tl-item .tl-rail{display:flex; flex-direction:column; align-items:center;}
  .tl-item .tl-dot{width:11px; height:11px; border-radius:50%; background:var(--lagoon); margin-top:19px; flex:none;}
  .tl-item.rest .tl-dot{background:var(--coral);}
  .tl-item .tl-line{flex:1; width:1.5px; background:var(--line);}
  .tl-item:last-child .tl-line{display:none;}
  .tl-item .tl-body{padding-block:14px 22px;}
  .tl-item .tl-body h4{font-size:17px; font-family:"Inter",sans-serif; font-weight:600;}
  .tl-item .tl-body p{font-size:14.5px; color:var(--ink-soft); margin-top:5px;}
  .tl-badge{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--coral); margin-bottom:4px;}
  .tl-item .tl-km{display:block; font-family:"IBM Plex Mono",monospace; font-size:15px; font-weight:600;
    color:var(--lagoon); margin-top:5px; font-variant-numeric:tabular-nums; letter-spacing:-.02em;}

  /* ---------- includes / gear ---------- */
  .includes-head{font-size:15px; color:var(--ink-soft); max-width:60ch; margin-bottom:16px;}
  .includes-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px 24px; margin-bottom:26px;}
  @media (max-width:600px){ .includes-grid{grid-template-columns:1fr;} }
  .includes-grid div{display:flex; gap:9px; align-items:flex-start; font-size:14.5px; color:var(--ink-soft);}
  .includes-grid div b{color:var(--lagoon); flex:none; font-family:"IBM Plex Mono",monospace;}
  /* the short list of what is not covered, deliberately quieter than the ticks
     above it: it is there to be honest, not to be the thing people read first */
  .excludes-grid div{color:var(--dune);}
  .excludes-grid div b{color:var(--dune);}

  /* ---------- availability ---------- */
  .tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px;}
  .tab{
    border:1.5px solid var(--line); background:var(--surface-raised); border-radius:999px; padding:9px 18px;
    font-weight:600; font-size:13.5px; cursor:pointer; color:var(--ink-soft);
  }
  .tab[aria-selected="true"]{background:var(--tide); border-color:var(--tide); color:var(--tide-ink);}
  .dep-table{width:100%; border-collapse:collapse; font-size:14.5px;}
  .dep-table th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--dune); padding-block:8px; border-bottom:1px solid var(--line); font-weight:600;}
  .dep-table td{padding-block:14px; border-bottom:1px solid var(--line); vertical-align:middle;}
  .dep-table .d-date{font-family:"IBM Plex Mono",monospace; font-weight:600;}
  .dep-table .d-sub{color:var(--dune); font-size:12.5px;}
  .pill{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding:5px 11px; border-radius:999px;}
  .pill.open{background:var(--lagoon-soft); color:var(--lagoon);}
  .pill.low{background:var(--coral-soft); color:var(--coral);}
  .pill.full{background:var(--line); color:var(--dune);}
  .pill.closed{background:var(--line); color:var(--dune);}
  .book-btn{
    background:var(--accent-fill); color:var(--accent-fill-ink); border:none; border-radius:999px; padding:8px 16px;
    font-weight:600; font-size:13px; cursor:pointer;
  }
  .book-btn:disabled{background:var(--line); color:var(--dune); cursor:not-allowed;}
  .table-scroll{overflow-x:auto;}
  .empty-row td{color:var(--dune); font-style:italic; text-align:center; padding-block:24px;}
  .empty-months{color:var(--dune); font-style:italic; padding-block:20px;}

  /* ---------- month accordion ---------- */
  .month-group{border:1px solid var(--line); border-radius:14px; margin-bottom:10px; background:var(--surface-raised); overflow:hidden;}
  .month-summary{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; cursor:pointer; list-style:none;}
  .month-summary::-webkit-details-marker{display:none;}
  .month-summary h4{font-family:"Fraunces",serif; font-size:17px; font-weight:600;}
  .month-meta{display:flex; align-items:center; gap:14px;}
  .month-count{font-size:12.5px; color:var(--dune); font-family:"IBM Plex Mono",monospace; white-space:nowrap;}
  .month-summary .chevron{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--coral); transition:transform .2s; flex:none;}
  .month-group[open] .month-summary .chevron{transform:rotate(90deg);}
  .month-body{padding:0 20px 18px; border-top:1px solid var(--line);}

  /* ---------- route ---------- */
  .route-strip{display:flex; align-items:center; gap:0; flex-wrap:wrap; margin-top:8px;}
  .route-stop{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; width:150px;}
  .route-stop .dot{width:14px; height:14px; border-radius:50%; background:var(--coral); border:3px solid var(--coral-soft);}
  .route-stop b{font-size:14.5px;}
  .route-stop span{font-size:12px; color:var(--dune);}
  .route-stop.transfer .dot{background:var(--dune); border-color:var(--line);}
  .route-stop.transfer b{color:var(--dune); font-style:italic; font-weight:500;}
  .route-seg{flex:1; min-width:36px; height:2px; background:repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px); margin-top:-30px;}
  @media (max-width:700px){ .route-strip{flex-direction:column; align-items:flex-start;} .route-seg{width:2px; height:34px; min-width:0; margin:-6px 0 -6px 6px; background:repeating-linear-gradient(180deg, var(--line) 0 6px, transparent 6px 12px);} }

  /* ---------- about ---------- */
  .about-team{display:flex; gap:18px; flex-wrap:wrap; margin-top:28px;}
  .team-card{
    display:flex; align-items:center; gap:20px; background:var(--surface-raised); border:1px solid var(--line);
    border-radius:18px; padding:22px 24px; flex:1 1 300px;
  }
  .team-photo{
    width:112px; height:112px; border-radius:50%; flex:none; object-fit:cover; display:block;
    border:3px solid var(--surface); box-shadow:0 8px 20px -12px rgba(11,32,39,.5);
    background:var(--lagoon-soft);
  }
  @media (max-width:420px){ .team-card{gap:16px; padding:18px;} .team-photo{width:88px; height:88px;} }
  .team-card h4{font-size:18px; font-family:"Fraunces",serif; font-weight:600;}
  .team-role{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.07em;
    text-transform:uppercase; color:var(--coral); margin-top:4px;}

  /* ---------- trip photography ---------- */
  .pkg-banner{width:100%; aspect-ratio:1400/758; object-fit:cover; border-radius:18px;
    display:block; margin-bottom:26px; background:var(--lagoon-soft);}
  .pkg-split{display:grid; grid-template-columns:270px 1fr; gap:22px; align-items:stretch; margin-bottom:26px;}
  .pkg-split img{width:100%; height:100%; min-height:300px; object-fit:cover; object-position:50% 38%;
    border-radius:18px; display:block; background:var(--lagoon-soft);}
  @media (max-width:760px){
    .pkg-split{grid-template-columns:1fr;}
    .pkg-split img{height:auto; aspect-ratio:760/950; max-height:420px; object-position:50% 30%;}
  }
  .pkg-split .notice{margin:0;}
  .pkg-split .private-note{margin-bottom:14px;}

  /* ---------- coastline hero ---------- */
  /* Runs edge to edge. The negative margin mirrors the body's own side padding
     exactly, so the photo reaches both window edges without adding scroll width. */
  .coast-hero{
    position:relative; overflow:hidden; background:var(--tide);
    margin-inline: calc(-1 * max(16px, (100vw - 1120px)/2));
    min-height:clamp(440px,70vh,660px);
    display:flex; align-items:flex-end;
  }
  .coast-hero img{position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:50% 54%; display:block;}
  /* On a wide screen the darkening leans left, under the words, so the sand and
     surf on the right stay as bright as the photograph actually is. */
  .coast-hero .coast-wash{position:absolute; inset:0;
    background:
      linear-gradient(90deg, rgba(11,32,39,.62) 0%, rgba(11,32,39,.34) 34%, rgba(11,32,39,.04) 66%, rgba(11,32,39,0) 100%),
      linear-gradient(180deg, rgba(11,32,39,0) 50%, rgba(11,32,39,.58) 100%);}
  .coast-hero .coast-inner{position:relative; width:100%;
    padding-inline: max(16px, calc((100vw - 1120px)/2));
    padding-block: clamp(30px,5vw,58px);}
  .coast-hero .eyebrow{color:rgba(244,239,226,.80);}
  .coast-hero h2{color:#F7F3E8; font-size:clamp(30px,5vw,56px); letter-spacing:-.015em; max-width:17ch;}
  @media (max-width:860px){
    /* Portrait crop, so shift across to keep the dune line and the surf in frame,
       and darken top to bottom because the words now sit over the whole picture. */
    .coast-hero{min-height:clamp(400px,58vh,520px);}
    .coast-hero img{object-position:62% 50%;}
    .coast-hero .coast-wash{
      background:linear-gradient(180deg, rgba(11,32,39,0) 34%, rgba(11,32,39,.34) 58%, rgba(11,32,39,.82) 100%);}
  }

  /* ---------- coastline story ---------- */
  .story-lead{
    font-family:"Fraunces", Georgia, serif; font-weight:500; font-style:italic;
    font-size:clamp(19px,2.2vw,24px); line-height:1.5; color:var(--ink); max-width:66ch; text-wrap:pretty;
    margin-top:16px;
  }
  .story-cols{display:grid; grid-template-columns:1fr 1fr; gap:0 48px; margin-top:30px;}
  @media (max-width:780px){ .story-cols{grid-template-columns:1fr;} }
  .story-cols p{font-size:15.5px; color:var(--ink-soft); max-width:60ch;}
  .story-cols p + p{margin-top:18px;}
  .story-quote{
    margin-top:34px; background:var(--tide); color:var(--tide-ink); border-radius:20px;
    padding:30px 32px; box-shadow:var(--shadow);
  }
  .story-quote p{
    font-family:"Fraunces",serif; font-weight:500; font-size:clamp(19px,2.4vw,25px); line-height:1.4;
    max-width:56ch; text-wrap:balance;
  }

  /* ---------- pricing table ---------- */
  .price-table{width:100%; border-collapse:collapse; font-size:14.5px;}
  .price-table th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--dune); padding:10px 12px; border-bottom:1px solid var(--line);}
  .price-table td{padding:14px 12px; border-bottom:1px solid var(--line);}
  .price-table tr td:first-child{font-family:"Fraunces",serif; font-weight:600; font-size:15.5px;}
  .price-table .amt{font-family:"IBM Plex Mono",monospace; font-weight:600;}
  .tbc{color:var(--amber); font-weight:600; font-size:12.5px; background:var(--amber-soft); padding:3px 8px; border-radius:6px;}

  /* ---------- faq ---------- */
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-q{
    width:100%; text-align:left; background:none; border:none; padding-block:18px; cursor:pointer;
    display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:16px; font-weight:600; color:var(--ink); font-family:"Inter",sans-serif;
  }
  .faq-q .plus{font-family:"IBM Plex Mono",monospace; font-size:18px; color:var(--coral); flex:none; transition:transform .2s;}
  .faq-item[open] .plus{transform:rotate(45deg);}
  .faq-a{padding-bottom:18px; font-size:14.5px; color:var(--ink-soft); max-width:68ch;}
  details > summary{list-style:none;}
  details > summary::-webkit-details-marker{display:none;}

  /* ---------- terms ---------- */
  .tier-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px;}
  @media (max-width:760px){.tier-grid{grid-template-columns:1fr;}}
  .tier{border:1px solid var(--line); border-radius:14px; padding:18px; background:var(--surface-raised);}
  .tier .eyebrow{margin-bottom:6px;}
  .tier b{font-family:"Fraunces",serif; font-size:24px; display:block; margin-bottom:6px;}
  .tier p{font-size:13.5px; color:var(--ink-soft);}

  /* ---------- footer ---------- */
  footer{padding-block:40px; border-top:1px solid var(--line);}
  .foot-grid{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; font-size:13.5px; color:var(--ink-soft);}
  .foot-grid .brand{margin-bottom:8px;}
  /* The Instagram mark in the footer. The link is only as wide as the mark, but
     padding gives it a 44px square tap target, the size a thumb needs. */
  .foot-social{margin-top:10px;}
  .foot-legal{margin-top:10px; font-size:13px;}
  .foot-legal a{color:var(--ink-soft); text-decoration:none;}
  .foot-legal a:hover{color:var(--coral); text-decoration:underline;}

  /* ---------- the two legal pages ---------- */
  /* Narrower than the rest of the site on purpose: these are read, not
     skimmed, and a long line of small text is hard work. */
  .legal-date{font-family:"IBM Plex Mono",monospace; font-size:12.5px;
    color:var(--dune); margin-top:14px;}
  .legal-body{max-width:70ch; margin-top:30px;}
  .legal-body h3{font-family:"Fraunces",serif; font-size:19px; font-weight:600;
    margin:34px 0 10px;}
  .legal-body h3:first-child{margin-top:0;}
  .legal-body p{font-size:15px; color:var(--ink-soft); margin-bottom:12px; line-height:1.7;}
  .legal-body ul{margin:0 0 14px 20px; padding:0;}
  .legal-body li{font-size:15px; color:var(--ink-soft); margin-bottom:7px; line-height:1.65;}
  .legal-body a{color:var(--coral); font-weight:600;}
  /* The Instagram line: the mark, a dash, then the handle, all one link so a
     click anywhere on it works. min-height keeps the tap target 44px tall, the
     size a thumb needs, without the row looking tall. */
  .ig-link{display:inline-flex; align-items:center; gap:9px;
    min-height:44px; text-decoration:none;
    color:var(--coral); font-weight:600; font-size:13.5px;}
  .ig-link img, .ig-link svg{display:block; width:24px; height:24px; flex:none;}
  /* The dash is quieter than the handle on purpose: it is punctuation, not
     information, so it should separate without competing. */
  .ig-sep{color:var(--dune); font-weight:400;}
  .ig-link:hover .ig-handle{text-decoration:underline;}
  .ig-link:focus-visible{outline:2px solid var(--focus); outline-offset:3px;
    border-radius:6px;}

  /* ---------- where you sleep ---------- */
  .stays{margin-top:34px;}
  .stay{margin-top:14px;}
  .stay-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;}
  .stay-head h4{font-family:"Fraunces",serif; font-size:21px; font-weight:600; margin:0;}
  /* which nights you are here, set apart from the name so the two read as
     separate facts rather than one long heading */
  .stay-when{font-family:"IBM Plex Mono",monospace; font-size:12.5px; font-weight:600;
    color:var(--coral); background:var(--coral-soft);
    padding:3px 9px; border-radius:999px; white-space:nowrap;}
  .stay-lead{font-size:14.5px; color:var(--ink-soft); margin:8px 0 0; max-width:68ch;}
  .stay-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px;}
  @media (max-width:820px){ .stay-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:520px){ .stay-grid{grid-template-columns:1fr;} }
  .stay-shot{margin:0; cursor:zoom-in;}
  /* A fixed shape keeps the row even. The photographs are different shapes, so
     they are cropped to fit here, and the full-size view shows the whole frame. */
  .stay-shot img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
    border-radius:12px; background:var(--tide); transition:transform .4s ease;}
  .stay-shot:hover img{transform:scale(1.02);}
  .stay-shot:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:14px;}
  .stay-shot figcaption{font-size:13px; color:var(--ink-soft); margin-top:8px; line-height:1.45;}
  .stay-credit{font-size:12px; color:var(--dune); margin:10px 0 0;}
  /* more than one place on a trip: a hairline between them, so the camp and
     the lodge read as two separate stops rather than one long block */
  .stay + .stay{margin-top:30px; padding-top:28px; border-top:1px solid var(--line);}
  .stay-note{margin-top:30px;}

  /* ---------- contact panel (stands in for the booking form) ---------- */
  .contact-slot{margin-top:18px;}
  .contact-slot .notice{margin:0;}
  .contact-slot .cways{display:flex; flex-direction:column; gap:6px; margin-top:11px;}
  .contact-slot .cway{font-family:"IBM Plex Mono",monospace; font-size:14.5px;
    display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; word-break:break-word;}
  .contact-slot .cway b{font-weight:600; color:var(--ink); min-width:3.5em;}
  .contact-slot .cways a{font-weight:600; color:var(--coral); text-decoration:none;}
  .contact-slot .cways a:hover{text-decoration:underline;}

  /* approximate foreign-currency guide beside rand prices */
  .approx{display:block; font-family:"IBM Plex Mono",monospace; font-size:11px;
    color:var(--dune); letter-spacing:.01em; margin-top:3px; white-space:nowrap;}
  /* who the price is for, under the price itself. Quiet, but never hidden:
     somebody reading from overseas has to see it at the moment they read the
     number, not further down the page. */
  .price-note{font-size:12.5px; color:var(--coral); font-weight:600;
    margin-top:2px; line-height:1.45;}
  .table-note{font-size:13px; color:var(--ink-soft); margin-top:12px;}
  .qfx{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--dune);
    line-height:1.5; margin-top:8px;}

  /* ---------- modal ---------- */
  .modal-backdrop{
    position:fixed; inset:0; background:color-mix(in srgb, var(--ink) 55%, transparent);
    display:flex; align-items:flex-end; justify-content:center; z-index:100; padding:0;
  }
  .modal-backdrop[hidden]{display:none;}
  @media (min-width:640px){ .modal-backdrop{align-items:center;} }
  .modal{
    background:var(--surface-raised); width:100%; max-width:520px; border-radius:20px 20px 0 0;
    padding:28px 26px 26px; max-height:92vh; overflow-y:auto; box-shadow:var(--shadow);
  }
  @media (min-width:640px){ .modal{border-radius:20px;} }
  .modal-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:6px;}
  .modal-close{background:none; border:none; font-size:22px; line-height:1; cursor:pointer; color:var(--dune); padding:4px;}
  .modal-sub{font-size:13.5px; color:var(--dune); margin-bottom:18px;}
  .field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
  .field label{font-size:12.5px; font-weight:600; color:var(--ink-soft);}
  .field input, .field select, .field textarea{
    border:1.5px solid var(--line); border-radius:10px; padding:10px 12px; font:inherit; font-size:14.5px;
    background:var(--bg); color:var(--ink);
  }
  .field textarea{resize:vertical; min-height:64px;}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  @media (max-width:460px){.form-row{grid-template-columns:1fr;}}
  .modal-submit{
    width:100%; background:var(--accent-fill); color:var(--accent-fill-ink); border:none; border-radius:999px;
    padding:13px; font-weight:700; font-size:15px; cursor:pointer; margin-top:6px;
  }
  .modal-submit:disabled{opacity:.6; cursor:wait;}
  .form-msg{font-size:13.5px; margin-top:12px; padding:10px 12px; border-radius:10px;}
  .form-msg.ok{background:var(--lagoon-soft); color:var(--lagoon);}
  .form-msg.err{background:var(--coral-soft); color:var(--coral);}
  .form-msg[hidden]{display:none;}

  /* ---------- the date panel ---------- */
  .date-facts{margin-bottom:4px;}
  .df-row{display:flex; justify-content:space-between; align-items:baseline; gap:14px;
    padding:11px 0; border-bottom:1px solid var(--line);}
  .df-row span{font-size:13.5px; color:var(--ink-soft);}
  .df-row b{font-family:"Fraunces",serif; font-size:21px; font-weight:600; white-space:nowrap;}
  .df-fx{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--dune);
    line-height:1.5; margin-top:7px;}
  .df-note{font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin-top:16px;}
  .df-deposit{margin-top:16px; padding:13px 15px; border-radius:12px;
    background:var(--amber-soft); border:1px solid color-mix(in srgb, var(--amber) 35%, var(--line));
    font-size:13.5px; line-height:1.55;}
  .df-deposit b{font-weight:600;}

  .private-note{background:var(--lagoon-soft); border:1px solid color-mix(in srgb, var(--lagoon) 30%, var(--line));
    border-radius:14px; padding:15px 17px; font-size:14.5px; line-height:1.55; margin-bottom:26px;}
  .private-note b{font-weight:600;}

  .enquiry-card{display:flex; gap:22px; justify-content:space-between; align-items:center; flex-wrap:wrap;
    background:var(--surface-raised); border:1px solid var(--line); border-radius:16px;
    padding:22px 24px; margin-top:26px;}
  .enquiry-card h3{font-size:18px; margin-bottom:6px;}
  .enquiry-card p{font-size:14px; color:var(--ink-soft); max-width:58ch;}
  .pill.avail{background:var(--lagoon-soft); color:var(--lagoon);}
  .pill.taken{background:var(--line); color:var(--dune);}
  .rule-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin-top:22px;}
  .rule{border:1px solid var(--line); border-radius:14px; padding:18px 20px; background:var(--surface-raised);}
  .rule h4{font-family:"Inter",sans-serif; font-size:14.5px; font-weight:600; margin:0 0 6px;}
  .rule p{font-size:13.5px; color:var(--ink-soft);}