/* ==========================================================
     TOKENS
     ========================================================== */
  :root{
    --bay-deep:   #0B2E36;
    --bay-deep-2: #0F3A44;
    --slate:      #26312E;
    --stone:      #EFE8D8;
    --paper:      #FAF6EC;
    --terracotta: #B44B29;
    --terracotta-dk:#8F3A1F;
    --gold:       #C79A3D;
    --ink:        #1B2320;
    --line:       rgba(27,35,32,0.12);
    --line-dark:  rgba(255,255,255,0.16);

    --f-display: 'Fraunces', serif;
    --f-body:    'Work Sans', sans-serif;
    --f-mono:    'IBM Plex Mono', monospace;

    --fs-h1: clamp(2.7rem, 6.4vw, 5.8rem);
    --fs-h2: clamp(2rem, 4.2vw, 3.4rem);
    --fs-h3: clamp(1.35rem, 2.2vw, 1.8rem);
    --fs-body: 1.05rem;
    --fs-eyebrow: 0.75rem;

    --space-section: clamp(4.5rem, 10vw, 8.5rem);
    --container: 1240px;
    --radius: 3px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  html, body{ background:var(--paper); }
  html.is-loading body{ opacity:0; animation:forceReveal 0s 1.1s forwards; }
  @keyframes forceReveal{ to{ opacity:1; } }
  html.is-leaving body{ opacity:0; }
  body{
    font-family:var(--f-body);
    font-size:var(--fs-body);
    color:var(--ink);
    background:var(--paper);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    opacity:1;
    transition:opacity .34s ease;
  }
  body.menu-open{ overflow:hidden; }
  ::selection{ background:var(--terracotta); color:#fff; }
  img{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; }
  button{ font:inherit; }
  .wrap{ max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,3rem); }

  .eyebrow{
    font-family:var(--f-mono); font-size:var(--fs-eyebrow);
    letter-spacing:0.14em; text-transform:uppercase;
    display:flex; align-items:center; gap:0.6em;
  }
  .eyebrow::before{ content:""; width:22px; height:1px; background:currentColor; opacity:0.55; }
  h1,h2,h3{ font-family:var(--f-display); font-weight:500; line-height:1.08; letter-spacing:-0.01em; }
  h1{ font-size:var(--fs-h1); font-weight:400; }
  h2{ font-size:var(--fs-h2); }
  h3{ font-size:var(--fs-h3); font-weight:500; }
  em{ font-style:italic; font-weight:400; }

  .btn{
    font-family:var(--f-mono); font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase;
    display:inline-flex; align-items:center; gap:0.7em;
    padding:0.95em 1.6em; border-radius:var(--radius);
    border:1px solid transparent; transition:all .3s var(--ease); cursor:pointer;
    white-space:nowrap;
  }
  .btn::after{ content:"→"; transition:transform .3s var(--ease); font-family:var(--f-body); }
  .btn:hover::after{ transform:translateX(4px); }
  .btn--primary{ background:var(--terracotta); color:#fff; }
  .btn--primary:hover{ background:var(--terracotta-dk); }
  .btn--ghost-light{ border-color:rgba(255,255,255,0.55); color:#fff; }
  .btn--ghost-light:hover{ background:rgba(255,255,255,0.12); border-color:#fff; }
  .btn--ghost-dark{ border-color:var(--ink); color:var(--ink); }
  .btn--ghost-dark:hover{ background:var(--ink); color:var(--paper); }
  .btn:focus-visible, a:focus-visible, button:focus-visible{ outline:2px solid var(--terracotta); outline-offset:3px; }

  .section{ padding-block:var(--space-section); }
  .section--dark{ background:var(--bay-deep); color:var(--stone); }
  .section--light{ background:var(--paper); color:var(--ink); }
  .section--stone{ background:var(--stone); color:var(--ink); }

  .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.is-visible{ opacity:1; transform:translateY(0); }

  /* Stagger children of grids so cards enter one after another, not all at once */
  .stopgrid > .reveal:nth-child(1), .dine > .reveal:nth-child(1), .perks > .reveal:nth-child(1),
  .perks--light > .reveal:nth-child(1), .practical__grid > .reveal:nth-child(1),
  .quick-grid > .reveal:nth-child(1), .riviera__grid > .reveal:nth-child(1),
  .tourpreview > .reveal:nth-child(1),
  .stats > .reveal:nth-child(1), .steps > .reveal:nth-child(1){ transition-delay:0s; }
  .stopgrid > .reveal:nth-child(2), .dine > .reveal:nth-child(2), .perks > .reveal:nth-child(2),
  .perks--light > .reveal:nth-child(2), .practical__grid > .reveal:nth-child(2),
  .quick-grid > .reveal:nth-child(2), .riviera__grid > .reveal:nth-child(2),
  .tourpreview > .reveal:nth-child(2),
  .stats > .reveal:nth-child(2), .steps > .reveal:nth-child(2){ transition-delay:.08s; }
  .stopgrid > .reveal:nth-child(3), .dine > .reveal:nth-child(3), .perks > .reveal:nth-child(3),
  .perks--light > .reveal:nth-child(3), .practical__grid > .reveal:nth-child(3),
  .quick-grid > .reveal:nth-child(3), .riviera__grid > .reveal:nth-child(3),
  .tourpreview > .reveal:nth-child(3),
  .stats > .reveal:nth-child(3), .steps > .reveal:nth-child(3){ transition-delay:.16s; }
  .stopgrid > .reveal:nth-child(4), .perks > .reveal:nth-child(4), .perks--light > .reveal:nth-child(4),
  .practical__grid > .reveal:nth-child(4), .steps > .reveal:nth-child(4){ transition-delay:.24s; }
  .stopgrid > .reveal:nth-child(5), .practical__grid > .reveal:nth-child(5){ transition-delay:.32s; }
  .stopgrid > .reveal:nth-child(6), .practical__grid > .reveal:nth-child(6){ transition-delay:.4s; }

  /* ==========================================================
     SCROLL PROGRESS
     ========================================================== */
  .progress{
    position:fixed; top:0; left:0; height:2px; width:0;
    background:var(--terracotta); z-index:200;
  }

  /* ==========================================================
     NAV BAR
     ========================================================== */
  .nav{
    position:fixed; inset:0 0 auto 0; z-index:100;
    padding:1.4rem clamp(1.25rem,4vw,3rem);
    display:flex; align-items:center; justify-content:space-between;
    color:#fff; transition:background .35s ease, padding .35s ease, box-shadow .35s ease, color .35s ease, transform .35s var(--ease);
    transform:translateY(0);
  }
  .nav.is-hidden{ transform:translateY(-110%); }
  .nav.is-scrolled{
    background:rgba(250,246,236,0.94); backdrop-filter:blur(10px);
    color:var(--ink); padding-block:0.85rem; box-shadow:0 1px 0 var(--line);
  }
  .nav__logo{ display:flex; flex-direction:column; line-height:1; }
  .nav__logo b{ font-family:var(--f-display); font-size:1.35rem; letter-spacing:0.04em; }
  .nav__logo span{ font-family:var(--f-mono); font-size:0.65rem; letter-spacing:0.12em; opacity:0.65; margin-top:3px; }
  .nav__right{ display:flex; align-items:center; gap:1.2rem; }
  .nav__cta{
    font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase;
    border:1px solid currentColor; padding:0.6em 1.2em; border-radius:var(--radius);
    transition:all .25s ease;
  }
  .nav__cta:hover{ background:var(--terracotta); border-color:var(--terracotta); color:#fff; }
  @media (max-width:640px){ .nav__cta{ display:none; } }

  .menu-btn{
    display:flex; align-items:center; gap:0.7em;
    background:none; border:0; color:inherit; cursor:pointer;
    font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase;
  }
  .menu-btn__icon{ position:relative; width:26px; height:12px; }
  .menu-btn__icon span{
    position:absolute; left:0; width:100%; height:1.5px; background:currentColor;
    transition:transform .35s var(--ease), width .35s var(--ease);
  }
  .menu-btn__icon span:nth-child(1){ top:0; }
  .menu-btn__icon span:nth-child(2){ bottom:0; width:70%; }
  .menu-btn:hover .menu-btn__icon span:nth-child(2){ width:100%; }

  /* ==========================================================
     FULL-SCREEN MENU — bay chart + boat
     ========================================================== */
  .menu{
    position:fixed; inset:0; z-index:300;
    background:radial-gradient(120% 120% at 80% 10%, var(--bay-deep-2) 0%, var(--bay-deep) 55%, #071E24 100%);
    color:var(--stone);
    opacity:0; visibility:hidden; transition:opacity .5s ease, visibility 0s linear .5s;
    display:flex; flex-direction:column;
    overflow-y:auto;
  }
  .menu.is-open{ opacity:1; visibility:visible; transition:opacity .5s ease; }

  .menu__bar{
    display:flex; align-items:center; justify-content:space-between;
    padding:1.4rem clamp(1.25rem,4vw,3rem);
    flex-shrink:0;
  }
  .menu__bar .nav__logo{ color:var(--stone); }
  .menu-close{
    display:flex; align-items:center; gap:0.7em;
    background:none; border:0; color:var(--stone); cursor:pointer;
    font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase;
  }
  .menu-close svg{ transition:transform .35s var(--ease); }
  .menu-close:hover svg{ transform:rotate(90deg); }

  .menu__body{
    flex:1 0 auto; display:flex; flex-direction:column; justify-content:center;
    align-items:stretch; gap:clamp(1rem,4vw,4rem);
    padding:1.5rem clamp(1.25rem,4vw,3rem) 2rem;
    max-width:920px; margin-inline:auto; width:100%;
  }

  /* --- Links column --- */
  .menu__links{ display:flex; flex-direction:column; }
  .menu__link,
  .menu__toggle{
    display:flex; align-items:baseline; gap:1.1rem;
    padding:0.85rem 0; border:0; background:none; cursor:pointer; text-align:left;
    color:var(--stone); width:100%;
    border-top:1px solid var(--line-dark);
    opacity:0; transform:translateY(16px);
  }
  .menu.is-open .menu__link,
  .menu.is-open .menu__toggle{ animation:menuIn .7s var(--ease) forwards; }
  .menu.is-open .menu__item:nth-child(1) > *{ animation-delay:.15s; }
  .menu.is-open .menu__item:nth-child(2) > *{ animation-delay:.22s; }
  .menu.is-open .menu__item:nth-child(3) > *{ animation-delay:.29s; }
  .menu.is-open .menu__item:nth-child(4) > *{ animation-delay:.36s; }
  .menu.is-open .menu__item:nth-child(5) > *{ animation-delay:.43s; }
  .menu.is-open .menu__item:nth-child(6) > *{ animation-delay:.5s; }
  @keyframes menuIn{ to{ opacity:1; transform:translateY(0); } }

  .menu__item:last-child .menu__link{ border-bottom:1px solid var(--line-dark); }
  .menu__num{ font-family:var(--f-mono); font-size:0.72rem; color:var(--gold); letter-spacing:0.08em; }
  .menu__label{
    font-family:var(--f-display); font-weight:400;
    font-size:clamp(1.6rem, 3vw, 2.4rem); line-height:1.1;
    transition:color .25s ease, transform .3s var(--ease);
  }
  .menu__link:hover .menu__label,
  .menu__toggle:hover .menu__label{ color:#fff; transform:translateX(6px); }
  .menu__toggle .chev{
    margin-left:auto; font-family:var(--f-mono); font-size:1rem; color:rgba(239,232,216,0.5);
    transition:transform .35s var(--ease);
  }
  .menu__item.is-expanded .chev{ transform:rotate(90deg); color:var(--gold); }

  /* --- Rentals submenu with vehicles --- */
  .submenu{
    overflow:hidden; max-height:0; transition:max-height .5s var(--ease);
  }
  .menu__item.is-expanded .submenu{ max-height:220px; }
  .submenu__inner{ padding:0.4rem 0 1.1rem 2.4rem; }
  .submenu a{
    display:flex; align-items:center; gap:1rem;
    padding:0.55rem 0;
    font-family:var(--f-mono); font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase;
    color:rgba(239,232,216,0.75); transition:color .25s ease;
  }
  .submenu a:hover{ color:#fff; }
  .submenu a .veh{
    width:44px; height:22px; flex-shrink:0; color:var(--gold);
    opacity:0; transform:translateX(-18px);
  }
  .menu__item.is-expanded .submenu a .veh{ animation:vehIn 1s var(--ease) forwards; }
  .menu__item.is-expanded .submenu a:nth-child(1) .veh{ animation-delay:.1s; }
  .menu__item.is-expanded .submenu a:nth-child(2) .veh{ animation-delay:.25s; }
  @keyframes vehIn{
    0%{ opacity:0; transform:translateX(-18px); }
    60%{ opacity:1; transform:translateX(4px); }
    100%{ opacity:1; transform:translateX(0); }
  }
  .submenu a:hover .veh{ animation:vehDrive 1.1s var(--ease); }
  @keyframes vehDrive{
    0%{ transform:translateX(0); }
    45%{ transform:translateX(14px); }
    100%{ transform:translateX(0); }
  }
  .submenu .road{
    height:1px; margin:0.35rem 0 0 0;
    background:repeating-linear-gradient(90deg, rgba(239,232,216,0.35) 0 8px, transparent 8px 16px);
  }

  /* --- Chart column --- */
  /* Menu hover-reactive photo panel */
  .menu__gallery{
    position:relative; align-self:stretch; display:flex; flex-direction:column;
    min-height:0; border-radius:8px; overflow:hidden;
    box-shadow:0 30px 70px rgba(0,0,0,0.4);
  }
  .menu__gallery-stack{ position:relative; flex:1; min-height:340px; }
  .menu__shot{ position:absolute; inset:0; opacity:0; transform:scale(1.06); transition:opacity .7s var(--ease), transform 3.5s var(--ease); }
  .menu__shot.is-active{ opacity:1; transform:scale(1); }
  .menu__shot img{ width:100%; height:100%; object-fit:cover; }
  .menu__gallery-stack::after{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(180deg, rgba(8,25,29,0.15) 0%, rgba(8,25,29,0) 30%, rgba(8,25,29,0.05) 60%, rgba(8,25,29,0.65) 100%);
  }
  .menu__gallery-cap{
    position:absolute; left:0; right:0; bottom:0; z-index:3;
    display:flex; flex-direction:column; gap:0.35rem; padding:1.6rem 1.8rem;
  }
  .menu__gallery-coord{ font-family:var(--f-mono); font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); }
  .menu__gallery-label{ font-family:var(--f-display); font-size:1.5rem; color:#fff; transition:opacity .3s ease; }

  .menu__foot{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
    padding:1.2rem clamp(1.25rem,4vw,3rem) 1.6rem;
    font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.08em;
    color:rgba(239,232,216,0.5); text-transform:uppercase;
  }
  .menu__foot a{ color:rgba(239,232,216,0.85); }
  .menu__foot a:hover{ color:var(--gold); }

  @media (max-width:900px){
    .menu__body{ grid-template-columns:1fr; align-items:start; gap:1.5rem; }
    .menu__gallery{ order:2; }
    .menu__gallery-stack{ min-height:200px; }
    .menu__foot{ display:none; }
  }

  /* ==========================================================
     HERO
     ========================================================== */
  .hero{ position:relative; height:100svh; min-height:600px; overflow:hidden; background:var(--bay-deep); }
  .hero__bg{
    position:absolute; inset:0; opacity:0; transition:opacity 1.8s ease;
    background-size:cover; background-position:center;
  }
  .hero__bg.is-active{ opacity:1; }
  .hero__bg.is-active img{ animation:kenburns 9s ease-out forwards; }
  .hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center; }
  @keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.06); } }

  .hero__bg[data-tone="morning"]{ background:linear-gradient(160deg,#7C9AA0,#B9C7B0 45%,#E7DEC9); }
  .hero__bg[data-tone="midday"]{ background:linear-gradient(160deg,#0E5C67,#1D8A8F 45%,#8FD1C6); }
  .hero__bg[data-tone="sunset"]{ background:linear-gradient(160deg,#7A3B2E,#C77A3B 45%,#E9B75B); }
  .hero__bg[data-tone="dusk"]{  background:linear-gradient(160deg,#0A1B2B,#123246 45%,#2C4A52); }

  .hero__scrim{
    position:absolute; inset:0; z-index:2;
    background:linear-gradient(0deg, rgba(9,25,29,0.85) 0%, rgba(9,25,29,0.22) 46%, rgba(9,25,29,0.38) 100%);
  }
  .hero__content{
    position:relative; z-index:3; height:100%;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:0 clamp(1.25rem,4vw,3rem) 5rem;
    color:#fff; max-width:860px;
  }
  .hero__content .eyebrow{ color:var(--gold); margin-bottom:1.1rem; }
  .hero__content h1{ margin-bottom:1.2rem; }
  .hero__content > p:not(.eyebrow){ font-size:1.08rem; max-width:46ch; opacity:0.92; margin-bottom:2.2rem; }
  .hero__ctas{ display:flex; gap:1rem; flex-wrap:wrap; }

  .hero__content > *{ opacity:0; transform:translateY(28px); animation:heroIn 1s var(--ease) forwards; }
  .hero__content > *:nth-child(1){ animation-delay:.15s; }
  .hero__content > *:nth-child(2){ animation-delay:.3s; }
  .hero__content > *:nth-child(3){ animation-delay:.45s; }
  .hero__content > *:nth-child(4){ animation-delay:.6s; }
  @keyframes heroIn{ to{ opacity:1; transform:translateY(0); } }

  .hero__dots{
    position:absolute; left:clamp(1.25rem,4vw,3rem); bottom:2rem; z-index:4;
    display:flex; align-items:center; gap:0.9rem; color:#fff;
    font-family:var(--f-mono); font-size:0.7rem; letter-spacing:0.1em;
    opacity:0; animation:heroIn 1s var(--ease) .9s forwards;
  }
  .hero__dots .bars{ display:flex; gap:6px; }
  .hero__dots .bar{
    width:26px; height:2px; background:rgba(255,255,255,0.3);
    position:relative; overflow:hidden; cursor:pointer; border:0; padding:0;
  }
  .hero__dots .bar span{
    position:absolute; inset:0; background:#fff; transform:scaleX(0); transform-origin:left;
  }
  .hero__dots .bar.is-active span{ animation:barFill 6.5s linear forwards; }
  @keyframes barFill{ to{ transform:scaleX(1); } }

  .hero__scroll{
    position:absolute; right:clamp(1.25rem,4vw,3rem); bottom:2rem; z-index:3;
    display:flex; align-items:center; gap:0.7rem; color:#fff;
    font-family:var(--f-mono); font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase;
    writing-mode:vertical-rl;
    opacity:0; animation:heroIn 1s var(--ease) 1s forwards;
  }
  .hero__scroll span.line{
    writing-mode:horizontal-tb; width:1px; height:38px; background:rgba(255,255,255,0.5);
    position:relative; overflow:hidden;
  }
  .hero__scroll span.line::after{
    content:""; position:absolute; top:-100%; left:0; width:100%; height:100%;
    background:#fff; animation:scrollline 2.2s ease-in-out infinite;
  }
  @keyframes scrollline{ 50%{ top:100%; } 100%{ top:100%; } }

  /* ==========================================================
     INTRO STATEMENT
     ========================================================== */
  .intro{ padding-block:var(--space-section); }
  .intro p{
    font-family:var(--f-display); font-weight:300; font-style:italic;
    font-size:clamp(1.5rem, 3vw, 2.3rem); line-height:1.35;
    max-width:26ch; margin-inline:auto; text-align:center;
    color:var(--slate);
  }
  .intro p b{ font-style:normal; font-weight:500; color:var(--terracotta); }

  /* ==========================================================
     ROUTE / STOPS
     ========================================================== */
  .route-head{
    display:flex; justify-content:space-between; align-items:flex-end; gap:2rem;
    margin-bottom:3.5rem; flex-wrap:wrap;
  }
  .route-head__text{ max-width:640px; }
  .route-head .eyebrow{ color:var(--terracotta); margin-bottom:1rem; }
  .route-head p{ margin-top:1rem; color:rgba(27,35,32,0.72); max-width:52ch; }
  .route-head__hint{
    font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
    color:rgba(27,35,32,0.45); padding-bottom:0.4rem;
  }

  .route{ display:flex; flex-direction:column; }
  .route__item{
    display:grid; grid-template-columns:90px 1fr auto auto; align-items:center;
    gap:clamp(1rem,3vw,2.5rem); padding-block:1.6rem;
    border-top:1px solid var(--line);
    cursor:pointer; position:relative;
    transition:padding-left .35s var(--ease), background .35s ease;
  }
  .route__item::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
    background:var(--terracotta); transform:scaleY(0); transform-origin:top;
    transition:transform .35s var(--ease);
  }
  .route__item:hover{ padding-left:1.1rem; }
  .route__item:hover::before{ transform:scaleY(1); }
  .route__item:last-child{ border-bottom:1px solid var(--line); }
  .route__num{ font-family:var(--f-mono); font-size:0.95rem; color:var(--terracotta); }
  .route__body h3{ margin-bottom:0.35rem; transition:color .25s ease; }
  .route__item:hover .route__body h3{ color:var(--terracotta-dk); }
  .route__body p{ color:rgba(27,35,32,0.68); max-width:52ch; font-size:0.96rem; }
  .route__coords{ font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.04em; color:rgba(27,35,32,0.5); white-space:nowrap; }
  .route__arrow{
    width:34px; height:34px; border:1px solid var(--line); border-radius:50%;
    display:grid; place-items:center; font-size:0.85rem; color:rgba(27,35,32,0.55);
    transition:all .3s var(--ease);
  }
  .route__item:hover .route__arrow{ background:var(--terracotta); border-color:var(--terracotta); color:#fff; }
  .route__item.is-open .route__arrow{ transform:rotate(90deg); }

  .route__detail{
    grid-column:2 / -1; order:5; overflow:hidden;
    max-height:0; opacity:0;
    transition:max-height .55s var(--ease), opacity .45s ease, margin-top .55s var(--ease);
    margin-top:0;
  }
  .route__item.is-open .route__detail{ max-height:460px; opacity:1; margin-top:1.1rem; }
  .route__detail-inner{ max-width:64ch; padding-bottom:0.4rem; }
  .route__detail-inner p{
    color:rgba(27,35,32,0.74); font-size:1rem; line-height:1.75; margin-bottom:1.1rem;
  }
  .route__detail-inner p strong{ color:var(--terracotta-dk); font-weight:600; }
  .route__detail-facts{
    display:flex; flex-wrap:wrap; gap:0.6rem 1.6rem;
    border-top:1px solid var(--line); padding-top:1rem;
  }
  .route__detail-facts span{
    font-family:var(--f-mono); font-size:0.74rem; letter-spacing:0.04em;
    color:rgba(27,35,32,0.62); display:flex; align-items:baseline; gap:0.5em;
  }
  .route__detail-facts span::before{ content:"—"; color:var(--terracotta); }

  @media (max-width:640px){
    .route__item{ grid-template-columns:44px 1fr auto; }
    .route__coords{ display:none; }
    .route__detail{ grid-column:1 / -1; }
  }

  /* ==========================================================
     LANDMARKS — by municipality
     ========================================================== */
  .landmarks .eyebrow{ color:var(--terracotta); margin-bottom:1rem; }
  .landmarks h2{ margin-bottom:0.9rem; }
  .landmarks__lead{ color:rgba(27,35,32,0.72); max-width:56ch; margin-bottom:2.6rem; }

  .lm-tabs{ display:flex; gap:0.6rem; flex-wrap:wrap; margin-bottom:2.6rem; }
  .lm-tab{
    font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase;
    background:none; border:1px solid var(--line); border-radius:var(--radius);
    padding:0.75em 1.4em; cursor:pointer; color:rgba(27,35,32,0.7);
    transition:all .25s ease;
  }
  .lm-tab:hover{ border-color:var(--ink); color:var(--ink); }
  .lm-tab.is-active{ background:var(--bay-deep); border-color:var(--bay-deep); color:var(--stone); }

  .lm-panel{ display:none; }
  .lm-panel.is-active{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem,4vw,4rem); align-items:start; animation:lmIn .5s var(--ease); }
  @keyframes lmIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

  .lm-panel__media{ position:sticky; top:96px; }
  .lm-panel__media-inner{
    position:relative; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden;
    background:linear-gradient(160deg,#DED2B4,#C7B98F);
  }
  .lm-panel__media-inner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .lm-panel__media-caption{
    position:absolute; left:1.1rem; bottom:1rem; z-index:2;
    font-family:var(--f-mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase;
    color:#fff; background:rgba(11,46,54,0.78); padding:0.45em 0.9em; border-radius:var(--radius);
  }

  .lm-list{ display:grid; grid-template-columns:1fr 1fr; gap:0 2.2rem; }
  .lm-list li{ padding-block:1.05rem; border-top:1px solid var(--line); }
  .lm-list li b{ display:block; font-family:var(--f-display); font-weight:500; font-size:1.08rem; margin-bottom:0.2rem; }
  .lm-list li span{ font-size:0.9rem; color:rgba(27,35,32,0.66); }

  .lm-panel__view{
    grid-column:2; margin-top:1.6rem;
    font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--terracotta); display:flex; align-items:center; gap:0.7em;
  }
  .lm-panel__view::before{ content:"◎"; font-size:1rem; }

  @media (max-width:860px){
    .lm-panel.is-active{ grid-template-columns:1fr; }
    .lm-panel__media{ position:static; }
    .lm-panel__media-inner{ aspect-ratio:16/10; }
    .lm-panel__view{ grid-column:1; }
  }
  @media (max-width:560px){
    .lm-list{ grid-template-columns:1fr; }
  }

  /* ==========================================================
     BAY LINE — SVG divider
     ========================================================== */
  .bayline{ background:var(--bay-deep); padding-block:0; line-height:0; }
  .bayline svg{ width:100%; height:auto; display:block; }
  .bayline .water{ stroke:rgba(239,232,216,0.35); }
  .bayline .port{ fill:var(--gold); }
  .bayline text{
    font-family:var(--f-mono); font-size:9px; letter-spacing:0.08em;
    fill:rgba(239,232,216,0.55); text-transform:uppercase;
  }
  .bayline .trace{
    stroke-dasharray:1200; stroke-dashoffset:1200;
    transition:stroke-dashoffset 2.8s var(--ease);
  }
  .bayline.is-visible .trace{ stroke-dashoffset:0; }

  /* ==========================================================
     FEATURE SPLITS
     ========================================================== */
  .feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
  .feature--reverse .feature__media{ order:2; }
  .feature__media-inner{
    position:relative; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden;
    background:linear-gradient(160deg,#0F3A44,#175A63 55%,#3E8C86);
  }
  .feature--rentals .feature__media-inner{ background:linear-gradient(160deg,#DDD2B0,#C9AE7C 55%,#B98A4E); }
  .feature__media-inner img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transition:transform .8s var(--ease);
  }
  .feature__media-inner:hover img{ transform:scale(1.04); }
  .feature__tag{
    position:absolute; top:1.1rem; left:1.1rem; z-index:2;
    font-family:var(--f-mono); font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase;
    color:#fff; background:rgba(11,46,54,0.72); padding:0.5em 1em; border-radius:var(--radius);
    backdrop-filter:blur(4px);
  }
  .feature__content .eyebrow{ margin-bottom:1.1rem; }
  .feature__content h2{ margin-bottom:1.2rem; }
  .feature__content > p{ max-width:46ch; margin-bottom:1.6rem; }
  .feature__points{ margin-bottom:2rem; }
  .feature__points li{
    display:flex; gap:0.8em; align-items:baseline; padding-block:0.55rem;
    font-size:0.96rem; border-top:1px solid var(--line);
  }
  .section--dark .feature__points li{ border-color:var(--line-dark); color:rgba(239,232,216,0.85); }
  .feature__points li::before{
    content:"—"; color:var(--terracotta); flex-shrink:0; font-family:var(--f-mono);
  }
  .section--dark .feature__points li::before{ color:var(--gold); }
  .section--dark .eyebrow{ color:var(--gold); }
  .section--dark .feature__content > p{ color:rgba(239,232,216,0.78); }

  @media (max-width:860px){
    .feature, .feature--reverse{ grid-template-columns:1fr; }
    .feature--reverse .feature__media{ order:0; }
    .feature__media-inner{ aspect-ratio:16/10; }
  }

  /* ==========================================================
     TOUR PREVIEW CARDS (home boat-tours section)
     ========================================================== */
  .tourpreview{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:3.5rem; }
  .tourpreview__card{
    position:relative; display:flex; flex-direction:column;
    background:rgba(255,255,255,0.03); border:1px solid var(--line-dark); border-radius:6px; overflow:hidden;
    color:var(--stone); transition:transform .4s var(--ease), background .3s ease, border-color .3s ease;
  }
  .tourpreview__card:hover{ transform:translateY(-5px); background:rgba(255,255,255,0.06); border-color:rgba(199,154,61,0.4); }
  .tourpreview__img{ aspect-ratio:16/10; overflow:hidden; background:linear-gradient(160deg,#123B45,#1B535C); }
  .tourpreview__img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
  .tourpreview__card:hover .tourpreview__img img{ transform:scale(1.06); }
  .tourpreview__body{ padding:1.3rem 1.4rem 1.5rem; flex:1; }
  .tourpreview__meta{ font-family:var(--f-mono); font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:0.6rem; }
  .tourpreview__body h3{ font-size:1.2rem; color:#fff; margin-bottom:0.4rem; }
  .tourpreview__body p{ font-size:0.85rem; color:rgba(239,232,216,0.72); line-height:1.5; }
  .tourpreview__go{
    position:absolute; top:1.1rem; right:1.2rem; z-index:2;
    width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
    background:rgba(8,25,29,0.55); color:#fff; font-size:0.9rem; backdrop-filter:blur(4px);
    transition:background .3s ease, transform .3s var(--ease);
  }
  .tourpreview__card:hover .tourpreview__go{ background:var(--terracotta); transform:translateX(3px); }
  @media (max-width:860px){ .tourpreview{ grid-template-columns:1fr; } }

  /* ==========================================================
     RENTALS FEATURE (home) — car + scooter cards
     ========================================================== */
  .rentals-feature__head{
    display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:end;
    margin-bottom:3rem;
  }
  .rentals-feature__head .eyebrow{ color:var(--terracotta); margin-bottom:1rem; }
  .rentals-feature__head > p{ color:rgba(27,35,32,0.72); max-width:48ch; padding-bottom:0.3rem; }
  .rentals-feature__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
  .rentcard{
    display:flex; flex-direction:column; overflow:hidden; height:100%;
    border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--ink);
    transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s ease;
  }
  .rentcard:hover{ transform:translateY(-6px); box-shadow:0 22px 44px rgba(11,46,54,0.14); border-color:rgba(199,154,61,0.45); }
  /* both cards enter together, with the same curve and no stagger */
  .rentals-feature__grid > .reveal{ transition-delay:0s !important; }
  .rentals-feature__grid{ align-items:stretch; }
  .rentcard__body{ display:flex; flex-direction:column; flex:1; }
  .rentcard__points{ flex:1; }
  .rentcard__img{ aspect-ratio:16/9; overflow:hidden; background:linear-gradient(160deg,#DDD2B0,#C9AE7C); }
  .rentcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
  .rentcard:hover .rentcard__img img{ transform:scale(1.05); }
  .rentcard__body{ padding:1.8rem 1.9rem 2rem; position:relative; }
  .rentcard__icon{
    position:absolute; top:-26px; right:1.8rem; width:52px; height:52px; border-radius:50%;
    background:var(--terracotta); color:#fff; display:grid; place-items:center;
    box-shadow:0 8px 20px rgba(180,75,41,0.3);
  }
  .rentcard__icon svg{ width:30px; height:15px; }
  .rentcard__body h3{ font-size:1.5rem; margin-bottom:0.6rem; }
  .rentcard__body > p{ color:rgba(27,35,32,0.7); font-size:0.96rem; margin-bottom:1.3rem; max-width:40ch; }
  .rentcard__points{ margin-bottom:1.6rem; }
  .rentcard__points li{ display:flex; gap:0.7em; align-items:baseline; padding-block:0.5rem; font-size:0.92rem; border-top:1px solid var(--line); color:rgba(27,35,32,0.75); }
  .rentcard__points li::before{ content:"—"; color:var(--terracotta); flex-shrink:0; font-family:var(--f-mono); }
  .rentcard__cta{ font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--terracotta); transition:letter-spacing .3s ease; }
  .rentcard:hover .rentcard__cta{ letter-spacing:0.12em; }
  @media (max-width:860px){
    .rentals-feature__head{ grid-template-columns:1fr; gap:1.2rem; }
    .rentals-feature__grid{ grid-template-columns:1fr; }
  }

  /* ==========================================================
     MODERN RIVIERA
     ========================================================== */
  .riviera{ background:var(--bay-deep-2); color:var(--stone); }
  .riviera .eyebrow{ color:var(--gold); margin-bottom:1rem; }
  .riviera h2{ margin-bottom:0.9rem; }
  .riviera__lead{ color:rgba(239,232,216,0.75); max-width:54ch; margin-bottom:3rem; }

  /* Interactive expanding cards: click a card to grow it and reveal a detail panel */
  .riviera__grid{ display:flex; gap:1.2rem; height:460px; }
  .riviera__card{
    position:relative; border-radius:var(--radius); overflow:hidden;
    display:flex; align-items:flex-end; cursor:pointer;
    background:linear-gradient(160deg,#123B45,#1B535C);
    flex:1 1 0; min-width:0;
    transition:flex .6s var(--ease), box-shadow .4s var(--ease);
  }
  .riviera__card.is-expanded{ flex:2.6 1 0; cursor:default; box-shadow:0 22px 46px rgba(0,0,0,0.4); }
  .riviera__card img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transition:transform 1s var(--ease);
  }
  .riviera__card:not(.is-expanded):hover img{ transform:scale(1.06); }
  .riviera__card.is-expanded img{ transform:scale(1.03); }
  .riviera__card::after{
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(0deg, rgba(8,31,37,0.9) 0%, rgba(8,31,37,0.15) 55%, rgba(8,31,37,0) 100%);
    transition:opacity .5s ease;
  }
  .riviera__card.is-expanded::after{
    background:linear-gradient(90deg, rgba(8,31,37,0.92) 0%, rgba(8,31,37,0.6) 42%, rgba(8,31,37,0.15) 100%);
  }
  /* collapsed label sits at the bottom; hidden when expanded (detail takes over) */
  .riviera__card-body{
    position:relative; z-index:2; padding:1.5rem; width:100%;
    transition:opacity .35s ease;
  }
  .riviera__card.is-expanded .riviera__card-body{ opacity:0; pointer-events:none; }
  .riviera__card:not(.is-expanded) .riviera__card-body h3{ writing-mode:initial; }
  .riviera__card-body .tag{
    font-family:var(--f-mono); font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--gold); display:block; margin-bottom:0.5rem;
  }
  .riviera__card-body h3{ font-size:1.3rem; margin-bottom:0.35rem; color:#fff; }
  .riviera__card-body p{ font-size:0.85rem; color:rgba(239,232,216,0.8); }
  /* collapsed cards show a vertical hint */
  .riviera__card:not(.is-expanded) .riviera__card-body p{ display:none; }

  /* the sliding detail panel, revealed only on the expanded card */
  .riviera__detail{
    position:absolute; inset:0; z-index:3; display:flex; align-items:flex-end;
    padding:2.2rem; opacity:0; visibility:hidden; transform:translateX(-12px);
    transition:opacity .5s ease .1s, transform .5s var(--ease) .1s, visibility 0s linear .6s;
  }
  .riviera__card.is-expanded .riviera__detail{
    opacity:1; visibility:visible; transform:translateX(0);
    transition:opacity .55s ease .18s, transform .55s var(--ease) .18s;
  }
  .riviera__detail-inner{ max-width:42ch; }
  .riviera__detail-inner .tag{
    font-family:var(--f-mono); font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--gold); display:block; margin-bottom:0.6rem;
  }
  .riviera__detail-inner h3{ font-size:clamp(1.6rem,2.4vw,2.2rem); color:#fff; margin-bottom:0.8rem; }
  .riviera__detail-inner > p{ font-size:0.96rem; color:rgba(239,232,216,0.86); line-height:1.6; margin-bottom:1.2rem; }
  .riviera__facts{ display:flex; flex-direction:column; gap:0.5rem; }
  .riviera__facts li{
    font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.03em; color:rgba(239,232,216,0.72);
    padding-left:1.1em; position:relative;
  }
  .riviera__facts li::before{ content:"—"; position:absolute; left:0; color:var(--terracotta); }
  .riviera__facts em{ font-style:italic; color:rgba(239,232,216,0.9); }

  @media (max-width:860px){
    .riviera__grid{ flex-direction:column; height:auto; }
    .riviera__card{ aspect-ratio:16/10; flex:none; }
    .riviera__card.is-expanded{ flex:none; aspect-ratio:4/5; }
    .riviera__card:not(.is-expanded) .riviera__card-body p{ display:block; }
    .riviera__detail{ padding:1.6rem; }
  }

  /* ==========================================================
     PRACTICAL
     ========================================================== */
  .practical{ background:var(--stone); position:relative; overflow:hidden; }
  /* soft paper texture + a warm wash so the section feels crafted, not flat */
  .practical::before{
    content:""; position:absolute; inset:0; pointer-events:none; opacity:0.5;
    background:
      radial-gradient(60% 50% at 12% 0%, rgba(199,154,61,0.14), transparent 70%),
      radial-gradient(50% 45% at 90% 100%, rgba(180,75,41,0.10), transparent 70%);
  }
  .practical > .wrap{ position:relative; z-index:1; }
  .practical .eyebrow{ color:var(--terracotta); margin-bottom:1rem; }
  .practical h2{ margin-bottom:1rem; max-width:16ch; }
  .practical__lead{
    max-width:56ch; margin-bottom:3rem; color:rgba(27,35,32,0.7);
    font-family:var(--f-display); font-style:italic; font-weight:300; font-size:1.12rem; line-height:1.6;
  }
  .practical__grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden;
  }
  .practical__card{
    background:var(--stone); padding:2.1rem 1.9rem 2.2rem; position:relative;
    transition:background .35s ease, transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
  }
  /* a gold rule that draws in from the left on hover */
  .practical__card::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
    background:linear-gradient(180deg, var(--gold), var(--terracotta));
    transform:scaleY(0); transform-origin:top; transition:transform .45s var(--ease-out);
  }
  .practical__card:hover{ background:var(--paper); transform:translateY(-4px); box-shadow:0 16px 34px rgba(11,46,54,0.10); }
  .practical__card:hover::before{ transform:scaleY(1); }
  .practical__card .num{
    font-family:var(--f-mono); font-size:0.72rem; color:var(--terracotta);
    display:block; margin-bottom:1.3rem; letter-spacing:0.1em;
    transition:letter-spacing .35s ease;
  }
  .practical__card:hover .num{ letter-spacing:0.18em; }
  .practical__card h3{ font-size:1.18rem; margin-bottom:0.6rem; }
  .practical__card p{ font-size:0.93rem; color:rgba(27,35,32,0.7); line-height:1.6; }
  @media (max-width:860px){ .practical__grid{ grid-template-columns:1fr; } }

  /* ==========================================================
     STATS
     ========================================================== */
  .stats{
    display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .stat{ padding-block:2.6rem; }
  .stat b{ display:block; font-family:var(--f-display); font-size:clamp(2rem,4vw,3rem); font-weight:400; margin-bottom:0.4rem; }
  .stat b span{ font-family:inherit; font-size:inherit; letter-spacing:0; color:inherit; }
  .stat__unit{ font-style:normal; font-size:0.5em; margin-left:0.15em; color:var(--terracotta); }
  .stat__label{ font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.04em; color:rgba(27,35,32,0.6); }
  @media (max-width:640px){ .stats{ grid-template-columns:1fr; gap:0; } .stat{ border-top:1px solid var(--line); } .stat:first-child{ border-top:none; } }

  /* ==========================================================
     CTA BAND
     ========================================================== */
  .cta-band{ background:var(--bay-deep); color:var(--stone); text-align:center; position:relative; overflow:hidden; }
  .cta-band__aurora{
    position:absolute; inset:-40% -20% auto -20%; height:150%; z-index:0; pointer-events:none;
    background:
      radial-gradient(40% 50% at 20% 30%, rgba(199,154,61,0.22), transparent 70%),
      radial-gradient(45% 55% at 80% 20%, rgba(180,75,41,0.20), transparent 70%),
      radial-gradient(50% 60% at 55% 60%, rgba(62,140,134,0.22), transparent 70%);
    filter:blur(20px); animation:auroraDrift 16s ease-in-out infinite alternate;
  }
  @keyframes auroraDrift{
    0%{ transform:translate3d(-4%,-2%,0) scale(1); }
    50%{ transform:translate3d(4%,3%,0) scale(1.08); }
    100%{ transform:translate3d(-2%,1%,0) scale(1.02); }
  }
  .cta-band__waves{ position:absolute; inset:auto 0 0 0; z-index:0; pointer-events:none; opacity:0.5; }
  .cta-band__waves svg{ position:absolute; bottom:0; left:0; width:200%; height:110px; }
  .cta-band__waves svg path{ fill:rgba(239,232,216,0.05); }
  .cta-band__waves svg:nth-child(1){ animation:waveSlide 14s linear infinite; }
  .cta-band__waves svg:nth-child(2){ animation:waveSlide 22s linear infinite reverse; opacity:0.6; }
  @keyframes waveSlide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  .cta-band__inner{ position:relative; z-index:2; }
  .cta-band .eyebrow{ justify-content:center; color:var(--gold); margin-bottom:1.2rem; }
  .cta-band .eyebrow::before{ display:none; }
  .cta-band h2{ max-width:18ch; margin-inline:auto; margin-bottom:1.2rem; }
  .cta-band h2 em{
    font-style:italic; background:linear-gradient(100deg, var(--gold), #E9C877, var(--gold));
    background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:shimmer 5s linear infinite;
  }
  @keyframes shimmer{ to{ background-position:200% center; } }
  .cta-band p{ max-width:46ch; margin-inline:auto; margin-bottom:2.2rem; color:rgba(239,232,216,0.78); }
  .cta-band .btns{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
  @media (prefers-reduced-motion: reduce){
    .cta-band__aurora, .cta-band__waves svg, .cta-band h2 em{ animation:none; }
  }

  /* ==========================================================
     FOOTER
     ========================================================== */
  .footer{ background:#081F25; color:var(--stone); padding-block:4.5rem 2.2rem; }
  .footer__top{
    display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:3rem; padding-bottom:3rem;
    border-bottom:1px solid var(--line-dark);
  }
  .footer__brand b{ font-family:var(--f-display); font-size:1.5rem; }
  .footer__brand .coords{ font-family:var(--f-mono); font-size:0.68rem; letter-spacing:0.12em; opacity:0.55; display:block; margin-top:4px; }
  .footer__brand p{ margin-top:1.1rem; max-width:34ch; color:rgba(239,232,216,0.7); font-size:0.95rem; }
  .footer h4{ font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(239,232,216,0.55); margin-bottom:1.1rem; font-weight:500; }
  .footer ul li{ margin-bottom:0.7rem; font-size:0.95rem; }
  .footer ul li a{ transition:color .2s ease; }
  .footer ul li a:hover{ color:var(--gold); }
  .footer__bottom{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
    padding-top:2rem; font-family:var(--f-mono); font-size:0.75rem; color:rgba(239,232,216,0.55);
  }
  .footer__bottom a{ color:rgba(239,232,216,0.85); transition:color .2s ease; }
  .footer__bottom a:hover{ color:var(--gold); }

  @media (max-width:860px){ .footer__top{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .footer__top{ grid-template-columns:1fr; gap:2.2rem; } }

  @media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
    .reveal, .route__item{ opacity:1; transform:none; }
    .bayline .trace{ stroke-dashoffset:0; }
    .menu .menu__link, .menu .menu__toggle{ opacity:1; transform:none; }
    .boat{ display:none; }
  }

  /* ==========================================================
     SUBPAGE SHARED — page hero, sections used by boat-tours & rentals
     ========================================================== */
  .page-hero{
    position:relative; min-height:68svh; display:flex; align-items:flex-end;
    overflow:hidden; background:var(--bay-deep);
  }
  .page-hero__bg{ position:absolute; inset:0; }
  .page-hero__bg img{ width:100%; height:100%; object-fit:cover; will-change:transform; transition:transform .1s linear; }
  .page-hero__bg::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(8,25,29,0.9) 0%, rgba(8,25,29,0.35) 55%, rgba(8,25,29,0.55) 100%);
  }
  .page-hero__inner{
    position:relative; z-index:2; color:#fff; width:100%;
    padding-block:clamp(6rem,12vw,9rem) clamp(2.5rem,5vw,4rem);
  }
  .page-hero .eyebrow{ color:var(--gold); margin-bottom:1.1rem; }
  .page-hero h1{ max-width:16ch; margin-bottom:1.2rem; }
  .page-hero p{ max-width:52ch; font-size:1.08rem; opacity:0.92; }
  .page-hero__meta{
    display:flex; gap:2.4rem; flex-wrap:wrap; margin-top:2.2rem;
    font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.06em;
  }
  .page-hero__meta b{ color:var(--gold); font-weight:500; }
  .page-hero__content-in > *{ opacity:0; transform:translateY(26px); animation:heroIn 1s var(--ease) forwards; }
  .page-hero__content-in > *:nth-child(1){ animation-delay:.1s; }
  .page-hero__content-in > *:nth-child(2){ animation-delay:.22s; }
  .page-hero__content-in > *:nth-child(3){ animation-delay:.34s; }
  .page-hero__content-in > *:nth-child(4){ animation-delay:.46s; }

  /* breadcrumb-style back link under nav */
  .subnav{
    display:flex; gap:1.6rem; align-items:center; flex-wrap:wrap;
    padding:1.1rem 0; border-bottom:1px solid var(--line);
    font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase;
  }
  .subnav a{ color:rgba(27,35,32,0.6); transition:color .2s ease; }
  .subnav a:hover{ color:var(--terracotta); }
  .subnav .here{ color:var(--ink); }
  .subnav .sep{ color:rgba(27,35,32,0.3); }

  /* section intro heading block */
  .sec-head{ max-width:640px; margin-bottom:3.2rem; }
  .sec-head .eyebrow{ margin-bottom:1rem; }
  .sec-head p{ margin-top:1rem; color:rgba(27,35,32,0.72); }
  .section--dark .sec-head p{ color:rgba(239,232,216,0.78); }
  .section--dark .sec-head .eyebrow{ color:var(--gold); }
  .section--light .sec-head .eyebrow, .section--stone .sec-head .eyebrow{ color:var(--terracotta); }

  /* ==========================================================
     STOP CARDS — landmarks seen from the boat
     ========================================================== */
  .stopgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
  .stopcard{
    position:relative; border-radius:var(--radius); overflow:hidden;
    aspect-ratio:3/4; display:flex; align-items:flex-end;
    background:linear-gradient(160deg,#123B45,#1B535C);
  }
  .stopcard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
  .stopcard:hover img{ transform:scale(1.05); }
  .stopcard::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(8,31,37,0.9) 0%, rgba(8,31,37,0.12) 55%, rgba(8,31,37,0) 100%);
  }
  .stopcard__body{ position:relative; z-index:2; padding:1.5rem; width:100%; }
  .stopcard__body .n{ font-family:var(--f-mono); font-size:0.68rem; letter-spacing:0.12em; color:var(--gold); display:block; margin-bottom:0.5rem; }
  .stopcard__body h3{ font-size:1.3rem; color:#fff; margin-bottom:0.3rem; }
  .stopcard__body p{ font-size:0.86rem; color:rgba(239,232,216,0.82); max-width:32ch; }
  @media (max-width:860px){ .stopgrid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .stopgrid{ grid-template-columns:1fr; } .stopcard{ aspect-ratio:16/10; } }

  /* ==========================================================
     TOUR CARDS — bookable itineraries
     ========================================================== */
  .tourlist{ display:flex; flex-direction:column; }
  /* Cinematic full-width image band */
  .showband{ position:relative; min-height:62svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--bay-deep); }
  .showband__bg{ position:absolute; inset:0; }
  .showband__bg img{ width:100%; height:100%; object-fit:cover; will-change:transform;
    /* favour the lower part of the frame so the boat stays in shot */
    object-position:50% 72%; }
  .showband__overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,25,29,0.15) 0%, rgba(8,25,29,0.15) 45%, rgba(8,25,29,0.78) 100%); }
  .showband__inner{ position:relative; z-index:2; color:var(--stone); padding-block:3.5rem; }
  .showband__inner .eyebrow{ color:var(--gold); margin-bottom:1rem; }
  .showband__inner h2{ font-size:clamp(2rem,4.5vw,3.4rem); color:#fff; margin-bottom:1rem; }
  .showband__inner p{ max-width:52ch; color:rgba(239,232,216,0.85); }

  /* Nautical-chart variant (home, boat tours feature) — the map sits full-bleed
     behind the copy, kept discreet: heavily graded toward the text side, with
     a soft vignette so the chart reads as texture, not a loud graphic. */
  .showband--chart{ align-items:center; min-height:56svh; }
  /* photo variant: cooled and dimmed so the plotted course and boat read
     clearly on top, and the copy side stays legible */
  .showband--chart .showband__bg img{ filter:saturate(0.72) brightness(0.62) contrast(1.05); }
  .showband--chart .showband__overlay{
    background:
      linear-gradient(100deg, rgba(7,20,24,0.95) 0%, rgba(7,20,24,0.86) 32%, rgba(7,20,24,0.55) 62%, rgba(7,20,24,0.22) 100%),
      radial-gradient(140% 120% at 50% 50%, rgba(7,20,24,0) 35%, rgba(7,20,24,0.5) 100%);
  }
  .showband--chart .showband__inner{ padding-block:4.5rem; }
  /* copy on the left, the dashed bay outline on the right */
  .showband--chart .feature__content{ max-width:520px; }
  .showband--chart .feature__content > p{ max-width:50ch; }
  /* Boat running a plotted course across the chart */
  .chartsail{
    position:absolute; inset:0; z-index:1; width:100%; height:100%;
    pointer-events:none;
  }
  /* the bay outline: soft dashed contour that draws itself in */
  .chartsail__coast{
    fill:rgba(239,232,216,0.045);
    stroke:rgba(239,232,216,0.62); stroke-width:2.2;
    stroke-linecap:round; stroke-linejoin:round;
    stroke-dasharray:9 11;
    opacity:0; animation:csRouteIn 1.6s var(--ease) .3s forwards;
  }
  .chartsail__route{
    fill:none; stroke:rgba(214,170,78,0.9); stroke-width:2;
    stroke-dasharray:5 8; stroke-linecap:round;
    opacity:0; animation:csRouteIn 1.4s var(--ease) .9s forwards;
  }
  @keyframes csRouteIn{ to{ opacity:1; } }
  .chartsail__wp text{
    font-family:var(--f-mono); font-size:13px; letter-spacing:0.09em; text-transform:uppercase;
    fill:rgba(239,232,216,0.72);
  }

  .chartsail__wp circle{ fill:var(--gold); opacity:0; }
  .chartsail__wp .ping{
    fill:none; stroke:var(--gold); stroke-width:1.2;
    transform-origin:center; transform-box:fill-box; opacity:0;
  }
  .chartsail__wp circle:first-child{ animation:csWpIn .5s var(--ease) forwards; animation-delay:calc(.6s + var(--d)); }
  .chartsail__wp .ping{ animation:csPing 3.4s ease-out infinite; animation-delay:calc(1s + var(--d)); }
  @keyframes csWpIn{ to{ opacity:0.9; } }
  @keyframes csPing{
    0%  { opacity:0.8; transform:scale(0.6); }
    45% { opacity:0;   transform:scale(3.2); }
    100%{ opacity:0;   transform:scale(3.2); }
  }

  .chartsail__boat path{ fill:#F6F1E4; stroke:rgba(8,31,37,0.75); stroke-width:0.8; }
  .chartsail__boat{ filter:drop-shadow(0 2px 6px rgba(0,0,0,0.45)); }
  .chartsail__wake{
    fill:none !important; stroke:rgba(255,255,255,0.75) !important; stroke-width:1.8;
    stroke-dasharray:9 6; animation:csWake .9s linear infinite;
  }
  @keyframes csWake{ to{ stroke-dashoffset:-15; } }
  .chartsail__mast{ fill:none !important; stroke:rgba(8,31,37,0.55) !important; stroke-width:1; }
  .chartsail__bob{ animation:csBob 2.8s ease-in-out infinite; transform-origin:center; }
  @keyframes csBob{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-1.6px) rotate(-1deg); } }

  @media (prefers-reduced-motion: reduce){
    .chartsail__boat, .chartsail__wp .ping{ display:none; }
  }
  @media (max-width:960px){ .chartsail{ opacity:0.4; } }
  @media (max-width:640px){ .chartsail{ display:none; } }
  @media (max-width:640px){ .showband--chart{ min-height:auto; } }

  .tours-note{
    margin-top:2.6rem; padding:2rem 2.2rem; border-radius:8px;
    background:var(--bay-deep); color:var(--stone);
    display:flex; align-items:center; justify-content:space-between; gap:1.8rem; flex-wrap:wrap;
  }
  .tours-note p{ max-width:60ch; font-size:0.98rem; color:rgba(239,232,216,0.82); }
  .tours-note b{ color:#fff; }
  @media (max-width:640px){ .tours-note{ padding:1.6rem; } }
  .tour{
    display:grid; grid-template-columns:auto 1fr auto; gap:clamp(1.2rem,3vw,2.6rem);
    align-items:center; padding-block:2rem; border-top:1px solid var(--line);
    transition:padding-left .35s var(--ease); position:relative; cursor:default;
  }
  .tour::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
    background:var(--terracotta); transform:scaleY(0); transform-origin:top; transition:transform .35s var(--ease);
  }
  .tour:hover{ padding-left:1.1rem; }
  .tour:hover::before{ transform:scaleY(1); }
  .tour:last-child{ border-bottom:1px solid var(--line); }
  .tour__num{ font-family:var(--f-mono); font-size:0.95rem; color:var(--terracotta); }
  .tour__body h3{ margin-bottom:0.45rem; }
  .tour__route{
    font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.02em; color:rgba(27,35,32,0.6);
    margin-bottom:0.7rem; line-height:1.7;
  }
  .tour__route span{ color:var(--terracotta); padding:0 0.15em; }
  .tour__body p{ font-size:0.95rem; color:rgba(27,35,32,0.7); max-width:60ch; }
  .tour__meta{ text-align:right; white-space:nowrap; font-family:var(--f-mono); font-size:0.72rem; color:rgba(27,35,32,0.55); letter-spacing:0.05em; text-transform:uppercase; }
  .tour__meta b{ display:block; font-family:var(--f-display); font-size:1.5rem; color:var(--ink); font-weight:500; margin-bottom:0.3rem; letter-spacing:0; text-transform:none; }
  @media (max-width:760px){
    .tour{ grid-template-columns:auto 1fr; }
    .tour__meta{ grid-column:2; text-align:left; margin-top:0.4rem; }
    .tour__meta b{ display:inline; margin-right:0.5rem; }
  }

  /* ==========================================================
     PERKS — advantages row
     ========================================================== */
  .perks{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); }
  .perk{ background:var(--bay-deep); padding:2rem 1.6rem; transition:background .3s ease; }
  .perk:hover{ background:#0F3A44; }
  .perk .ic{ color:var(--gold); margin-bottom:1.1rem; display:block; transition:transform .3s var(--ease); }
  .perk:hover .ic{ transform:translateY(-3px) scale(1.08); }
  .perk h3{ font-size:1.1rem; margin-bottom:0.5rem; color:#fff; }
  .perk p{ font-size:0.9rem; color:rgba(239,232,216,0.72); }
  @media (max-width:860px){ .perks{ grid-template-columns:1fr 1fr; } }
  @media (max-width:480px){ .perks{ grid-template-columns:1fr; } }

  /* light variant of perks */
  .perks--light{ background:var(--line); border-color:var(--line); }
  .perks--light .perk{ background:var(--paper); }
  .perks--light .perk .ic{ color:var(--terracotta); }
  .perks--light .perk h3{ color:var(--ink); }
  .perks--light .perk p{ color:rgba(27,35,32,0.68); }

  /* ==========================================================
     DINING — lunch stops
     ========================================================== */
  .dine{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
  .dinecard{
    border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
    background:var(--paper); transition:transform .3s var(--ease), box-shadow .3s ease;
  }
  .dinecard:hover{ transform:translateY(-4px); box-shadow:0 12px 30px rgba(11,46,54,0.1); }
  .dinecard__img{ aspect-ratio:16/10; overflow:hidden; background:linear-gradient(160deg,#DED2B4,#C7B98F); }
  .dinecard__img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
  .dinecard:hover .dinecard__img img{ transform:scale(1.05); }
  .dinecard__body{ padding:1.6rem 1.8rem; }
  .dinecard .place{ font-family:var(--f-mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--terracotta); display:block; margin-bottom:0.9rem; }
  .dinecard h3{ font-size:1.2rem; margin-bottom:0.5rem; }
  .dinecard p{ font-size:0.9rem; color:rgba(27,35,32,0.68); }
  @media (max-width:860px){ .dine{ grid-template-columns:1fr; } }

  /* ==========================================================
     RENTALS — vehicle type switcher
     ========================================================== */
  .rent-switch{ display:flex; gap:0.6rem; margin-bottom:3rem; flex-wrap:wrap; }
  .rent-switch button{
    display:flex; align-items:center; gap:0.8rem;
    font-family:var(--f-mono); font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase;
    background:none; border:1px solid var(--line); border-radius:var(--radius);
    padding:0.9em 1.6em; cursor:pointer; color:rgba(27,35,32,0.7); transition:all .25s ease;
  }
  .rent-switch button .veh{ width:40px; height:20px; color:currentColor; }
  .rent-switch button:hover{ border-color:var(--ink); color:var(--ink); }
  .rent-switch button.is-active{ background:var(--terracotta); border-color:var(--terracotta); color:#fff; }

  .rent-panel{ display:none; }
  .rent-panel.is-active{ display:block; animation:lmIn .5s var(--ease); }

  /* steps to rent */
  .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
  .step{ padding-top:1.4rem; border-top:2px solid var(--terracotta); }
  .step .n{ font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.1em; color:var(--terracotta); display:block; margin-bottom:0.8rem; }
  .step h3{ font-size:1.1rem; margin-bottom:0.5rem; }
  .step p{ font-size:0.9rem; color:rgba(27,35,32,0.68); }
  @media (max-width:860px){ .steps{ grid-template-columns:1fr 1fr; } }
  @media (max-width:480px){ .steps{ grid-template-columns:1fr; } }

  /* ==========================================================
     TRIP PLANNER (guide.html)
     ========================================================== */
  .planner{ max-width:880px; margin-inline:auto; }
  .planner__step{ margin-bottom:2.8rem; }
  .planner__q{
    display:flex; align-items:baseline; gap:1rem; margin-bottom:1.2rem;
  }
  .planner__q .n{ font-family:var(--f-mono); font-size:0.78rem; color:var(--terracotta); letter-spacing:0.1em; }
  .planner__q h3{ font-size:1.3rem; }
  .planner__hint{ font-family:var(--f-mono); font-size:0.7rem; color:rgba(27,35,32,0.45); letter-spacing:0.06em; margin-left:auto; text-transform:uppercase; }

  .chips{ display:flex; flex-wrap:wrap; gap:0.7rem; }
  .chip{
    font-family:var(--f-mono); font-size:0.8rem; letter-spacing:0.05em; text-transform:uppercase;
    border:1px solid var(--line); border-radius:var(--radius); background:none;
    padding:0.85em 1.4em; cursor:pointer; color:rgba(27,35,32,0.72);
    transition:all .22s ease;
  }
  .chip:hover{ border-color:var(--ink); color:var(--ink); }
  .chip.is-active{ background:var(--bay-deep); border-color:var(--bay-deep); color:var(--stone); }

  .planner__go{ display:flex; align-items:center; gap:1.4rem; margin-top:1rem; flex-wrap:wrap; }
  .planner__note{ font-size:0.88rem; color:rgba(27,35,32,0.55); max-width:38ch; }

  /* results */
  .plan-result{ margin-top:4rem; display:none; }
  .plan-result.is-ready{ display:block; animation:lmIn .6s var(--ease); }
  .plan-result__head{
    display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem;
    border-bottom:1px solid var(--line); padding-bottom:1.4rem; margin-bottom:2.4rem; flex-wrap:wrap;
  }
  .plan-result__head h2{ font-size:clamp(1.7rem,3vw,2.4rem); }
  .plan-result__meta{
    display:flex; gap:1.6rem; flex-wrap:wrap;
    font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.06em; color:rgba(27,35,32,0.6);
  }
  .plan-result__meta b{ color:var(--terracotta); font-weight:500; }

  .plan-summary{
    font-family:var(--f-display); font-style:italic; font-weight:300;
    font-size:1.15rem; line-height:1.6; color:var(--slate);
    max-width:70ch; margin-bottom:2.6rem;
  }
  .plan-summary b{ font-style:normal; font-weight:500; color:var(--terracotta); }

  .plan-day{ margin-bottom:2.6rem; }
  .plan-day__title{
    display:flex; align-items:baseline; gap:1rem; margin-bottom:1.1rem; flex-wrap:wrap;
  }
  .plan-day__title .n{ font-family:var(--f-mono); font-size:0.78rem; color:var(--terracotta); letter-spacing:0.1em; }
  .plan-day__title h3{ font-size:1.25rem; }
  .plan-day__base{
    font-family:var(--f-mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--gold); background:var(--bay-deep); border-radius:999px; padding:0.35em 0.9em;
  }
  .plan-day__pace{
    margin-left:auto; font-family:var(--f-mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--terracotta); border:1px solid var(--line); border-radius:999px; padding:0.35em 0.9em;
  }
  .plan-slots{ border-top:1px solid var(--line); }
  .plan-slot{
    display:grid; grid-template-columns:110px 1fr; gap:1.4rem; align-items:start;
    padding:1.1rem 0; border-bottom:1px solid var(--line);
  }
  .plan-slot .when{
    font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
    color:rgba(27,35,32,0.5); padding-top:0.25rem;
  }
  .plan-slot b{ display:block; font-family:var(--f-display); font-weight:500; font-size:1.05rem; margin-bottom:0.25rem; }
  .plan-slot p{ font-size:0.92rem; color:rgba(27,35,32,0.68); max-width:60ch; }
  .plan-slot .tag{
    display:inline-block; font-family:var(--f-mono); font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--gold); margin-left:0.6em;
  }
  .plan-slot__foot{
    display:flex; gap:1rem; flex-wrap:wrap; margin-top:0.55rem;
    font-size:0.82rem; color:rgba(27,35,32,0.55);
  }
  .plan-slot__foot .dur{
    font-family:var(--f-mono); font-size:0.7rem; letter-spacing:0.04em; color:var(--terracotta-dk);
    white-space:nowrap;
  }
  .plan-slot__foot .tip{ font-style:italic; }
  .plan-slot__foot .tip::before{ content:"Tip — "; font-style:normal; color:rgba(27,35,32,0.4); }
  @media (max-width:560px){ .plan-slot{ grid-template-columns:1fr; gap:0.3rem; } .plan-day__pace{ margin-left:0; } }

  .plan-result.is-animating .plan-day{
    opacity:0; transform:translateY(22px);
    animation:planDayIn .7s var(--ease) forwards;
    animation-delay:calc(0.12s + var(--d, 0) * 0.14s);
  }
  .plan-result.is-animating .plan-summary{
    opacity:0; animation:planDayIn .6s var(--ease) forwards;
  }
  @keyframes planDayIn{ to{ opacity:1; transform:translateY(0); } }

  .plan-result__actions{ display:flex; gap:1rem; margin-top:2.2rem; flex-wrap:wrap; }
  .plan-result__note{
    margin-top:1.1rem; font-size:0.9rem; font-style:italic; color:rgba(27,35,32,0.6); max-width:56ch;
  }

  /* quick itineraries */
  .quick-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
  .quick-card{
    border:1px solid var(--line-dark); border-radius:var(--radius); padding:1.8rem;
    background:rgba(255,255,255,0.02); transition:background .3s ease, transform .3s var(--ease);
    cursor:pointer; text-align:left; color:inherit; font:inherit;
  }
  .quick-card:hover{ background:rgba(255,255,255,0.05); transform:translateY(-3px); }
  .quick-card .k{ font-family:var(--f-mono); font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:0.9rem; }
  .quick-card h3{ font-size:1.2rem; margin-bottom:0.5rem; color:#fff; }
  .quick-card p{ font-size:0.9rem; color:rgba(239,232,216,0.72); }
  @media (max-width:860px){ .quick-grid{ grid-template-columns:1fr; } }

  /* ==========================================================
     ASK BOKA — floating guide assistant
     ========================================================== */
  .askbot{ position:fixed; right:clamp(1rem,3vw,1.75rem); bottom:clamp(1rem,3vw,1.75rem); z-index:250; }
  body.menu-open .askbot{ display:none; }

  .askbot__fab{
    display:flex; align-items:center; gap:0.7em;
    background:var(--bay-deep); color:#fff; border:1px solid rgba(239,232,216,0.18);
    border-radius:999px; padding:0.9em 1.3em 0.9em 1em; cursor:pointer;
    font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase;
    box-shadow:0 10px 28px rgba(8,25,29,0.35); transition:transform .3s var(--ease), box-shadow .3s ease;
  }
  .askbot__fab:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(8,25,29,0.45); }
  .askbot__fab svg{ color:var(--gold); flex-shrink:0; }
  .askbot.is-open .askbot__fab{ display:none; }

  .askbot__panel{
    position:absolute; right:0; bottom:0;
    width:min(360px, calc(100vw - 2rem)); max-height:min(560px, 74vh);
    display:flex; flex-direction:column;
    background:var(--paper); border:1px solid var(--line); border-radius:8px;
    box-shadow:0 24px 60px rgba(8,25,29,0.28);
    opacity:0; visibility:hidden; transform:translateY(14px) scale(0.97); transform-origin:bottom right;
    transition:opacity .28s var(--ease), transform .28s var(--ease), visibility 0s linear .28s;
  }
  .askbot.is-open .askbot__panel{
    opacity:1; visibility:visible; transform:translateY(0) scale(1);
    transition:opacity .28s var(--ease), transform .28s var(--ease);
  }

  .askbot__head{
    display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
    padding:1.1rem 1.2rem; background:var(--bay-deep); color:#fff; border-radius:8px 8px 0 0;
  }
  .askbot__head b{ font-family:var(--f-display); font-size:1.15rem; font-weight:500; display:block; }
  .askbot__head span{ font-family:var(--f-mono); font-size:0.68rem; letter-spacing:0.06em; color:rgba(239,232,216,0.65); text-transform:uppercase; }
  .askbot__close{ background:none; border:0; color:rgba(239,232,216,0.75); cursor:pointer; font-size:1.3rem; line-height:1; padding:0.1em; }
  .askbot__close:hover{ color:#fff; }

  .askbot__log{ flex:1; overflow-y:auto; padding:1.1rem 1.2rem; display:flex; flex-direction:column; gap:0.9rem; min-height:120px; }
  .askbot__msg{ max-width:86%; font-size:0.9rem; line-height:1.55; padding:0.7em 0.95em; border-radius:6px;
    animation:askMsgIn .32s var(--ease) both; }
  @keyframes askMsgIn{ from{ opacity:0; transform:translateY(8px) scale(0.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
  .askbot__msg a{ color:var(--terracotta); text-decoration:underline; text-underline-offset:2px; }
  .askbot__msg--bot{ align-self:flex-start; background:var(--stone); color:var(--ink); border-bottom-left-radius:2px; }
  .askbot__msg--user{ align-self:flex-end; background:var(--terracotta); color:#fff; border-bottom-right-radius:2px; }
  .askbot__msg--bot p + p{ margin-top:0.5em; }
  .askbot__typing{ display:flex; gap:5px; align-items:center; padding:0.85em 1em; }
  .askbot__typing span{ width:7px; height:7px; border-radius:50%; background:rgba(27,35,32,0.4); animation:askDot 1.1s ease-in-out infinite; }
  .askbot__typing span:nth-child(2){ animation-delay:.15s; }
  .askbot__typing span:nth-child(3){ animation-delay:.3s; }
  @keyframes askDot{ 0%,60%,100%{ transform:translateY(0); opacity:0.4; } 30%{ transform:translateY(-4px); opacity:1; } }

  .askbot__chips{ display:flex; flex-wrap:wrap; gap:0.5rem; padding:0 1.2rem 1rem; }
  .askbot__chip{
    font-family:var(--f-mono); font-size:0.7rem; letter-spacing:0.02em;
    border:1px solid var(--line); border-radius:999px; background:none;
    padding:0.5em 0.9em; cursor:pointer; color:rgba(27,35,32,0.68); transition:all .2s ease;
  }
  .askbot__chip:hover{ border-color:var(--terracotta); color:var(--terracotta-dk); }

  .askbot__inputrow{
    display:flex; gap:0.6rem; align-items:center;
    padding:0.9rem 1rem; border-top:1px solid var(--line);
  }
  .askbot__inputrow input{
    flex:1; border:1px solid var(--line); border-radius:6px; padding:0.75em 0.9em;
    font-family:var(--f-body); font-size:0.88rem; background:#fff; color:var(--ink);
  }
  .askbot__inputrow input:focus{ outline:2px solid var(--terracotta); outline-offset:1px; border-color:transparent; }
  .askbot__inputrow button{
    width:38px; height:38px; flex-shrink:0; border-radius:6px; border:0;
    background:var(--terracotta); color:#fff; cursor:pointer; font-size:1rem;
    display:flex; align-items:center; justify-content:center; transition:background .2s ease;
  }
  .askbot__inputrow button:hover{ background:var(--terracotta-dk); }

  @media (max-width:480px){
    .askbot__fab span{ display:none; }
    .askbot__fab{ padding:0.85em; }
    .askbot__panel{ width:calc(100vw - 1.5rem); }
  }

  /* ==========================================================
     TRIP NOTES — little paper notepad, bottom-left
     ========================================================== */
  .notes{ position:fixed; left:clamp(1rem,3vw,1.75rem); bottom:clamp(1rem,3vw,1.75rem); z-index:240; }
  body.menu-open .notes{ display:none; }

  .notes__fab{
    display:flex; align-items:center; gap:0.6em;
    background:var(--stone); color:var(--ink); border:1px solid var(--line);
    border-radius:999px; padding:0.85em 1.2em; cursor:pointer;
    font-family:var(--f-mono); font-size:0.74rem; letter-spacing:0.05em; text-transform:uppercase;
    box-shadow:0 10px 26px rgba(8,25,29,0.22); transition:transform .3s var(--ease), box-shadow .3s ease;
  }
  .notes__fab:hover{ transform:translateY(-3px) rotate(-1deg); box-shadow:0 16px 32px rgba(8,25,29,0.3); }
  .notes__fab svg{ color:var(--terracotta); flex-shrink:0; }
  .notes.is-open .notes__fab{ display:none; }

  .notes__pad{
    position:absolute; left:0; bottom:0;
    width:min(300px, calc(100vw - 2rem));
    background:#FDF9EA;
    border:1px solid rgba(27,35,32,0.14); border-radius:4px;
    box-shadow:0 22px 50px rgba(8,25,29,0.26);
    transform:rotate(-1.2deg) translateY(14px) scale(0.96); transform-origin:bottom left;
    opacity:0; visibility:hidden;
    transition:opacity .28s var(--ease), transform .28s var(--ease), visibility 0s linear .28s;
    /* ruled-paper lines */
    background-image:repeating-linear-gradient(transparent 0 27px, rgba(180,75,41,0.12) 27px 28px);
  }
  .notes.is-open .notes__pad{
    opacity:1; visibility:visible; transform:rotate(-1.2deg) translateY(0) scale(1);
    transition:opacity .28s var(--ease), transform .28s var(--ease);
  }
  /* washi-tape strip on top */
  .notes__pad::before{
    content:""; position:absolute; top:-10px; left:50%; transform:translateX(-50%) rotate(2deg);
    width:92px; height:22px; background:rgba(199,154,61,0.4);
    border-left:1px dashed rgba(255,255,255,0.5); border-right:1px dashed rgba(255,255,255,0.5);
  }
  .notes__head{
    display:flex; justify-content:space-between; align-items:baseline;
    padding:1rem 1.1rem 0.2rem;
  }
  .notes__head b{ font-family:var(--f-display); font-style:italic; font-weight:500; font-size:1.05rem; color:var(--terracotta-dk); }
  .notes__close{ background:none; border:0; cursor:pointer; color:rgba(27,35,32,0.5); font-size:1.15rem; line-height:1; }
  .notes__close:hover{ color:var(--ink); }
  .notes__pad textarea{
    width:100%; min-height:170px; resize:vertical;
    background:transparent; border:0; outline:none;
    padding:0.4rem 1.1rem 1rem; line-height:28px;
    font-family:var(--f-display); font-style:italic; font-size:0.98rem; color:var(--slate);
  }
  .notes__foot{
    display:flex; justify-content:space-between; align-items:center;
    padding:0 1.1rem 0.9rem;
    font-family:var(--f-mono); font-size:0.62rem; letter-spacing:0.06em; text-transform:uppercase;
    color:rgba(27,35,32,0.45);
  }
  .notes__clear{ background:none; border:0; cursor:pointer; color:rgba(27,35,32,0.45); font:inherit; text-transform:inherit; letter-spacing:inherit; }
  .notes__clear:hover{ color:var(--terracotta); }

  @media (max-width:640px){
    .notes__fab span{ display:none; }
    .notes__fab{ padding:0.8em; }
  }

  /* ==========================================================
     PREMIUM DETAILS — scrollbar, grain, marquee, scroll cue
     ========================================================== */
  /* Brand scrollbar */
  ::-webkit-scrollbar{ width:11px; }
  ::-webkit-scrollbar-track{ background:var(--paper); }
  ::-webkit-scrollbar-thumb{ background:var(--bay-deep); border-radius:6px; border:3px solid var(--paper); }
  ::-webkit-scrollbar-thumb:hover{ background:var(--terracotta); }
  html{ scrollbar-color:var(--bay-deep) var(--paper); scrollbar-width:thin; }

  /* Subtle film grain over everything (very low opacity, no pointer events) */
  body::after{
    content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
    opacity:0.05; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  }

  /* Marquee ticker strip */
  .marquee{
    overflow:hidden; white-space:nowrap; border-block:1px solid var(--line);
    background:var(--stone); padding-block:0.85rem; position:relative;
  }
  .marquee__track{
    display:inline-block; animation:marqueeMove 38s linear infinite;
  }
  .marquee span{
    font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase;
    color:rgba(27,35,32,0.55); padding-inline:1.6rem;
  }
  .marquee em{ font-style:normal; color:var(--terracotta); }
  @keyframes marqueeMove{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  @media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }

  /* Scroll-down cue in heroes */
  /* sits in the bottom-right corner, matching the home hero's scroll cue */
  .scrollcue{
    position:absolute; right:clamp(1.25rem,4vw,3rem); bottom:2rem; left:auto; transform:none; z-index:5;
    display:flex; flex-direction:column; align-items:center; gap:0.6rem;
    color:rgba(255,255,255,0.8); font-family:var(--f-mono); font-size:0.66rem; letter-spacing:0.2em; text-transform:uppercase;
    writing-mode:vertical-rl;
    pointer-events:none;
  }
  .scrollcue::after{ writing-mode:horizontal-tb; }
  .scrollcue::after{
    content:""; width:1px; height:34px; background:linear-gradient(180deg, currentColor, transparent);
    animation:cueDrop 1.8s var(--ease) infinite;
  }
  @keyframes cueDrop{ 0%{ transform:scaleY(0); transform-origin:top; } 45%{ transform:scaleY(1); transform-origin:top; } 55%{ transform:scaleY(1); transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }
  @media (prefers-reduced-motion: reduce){ .scrollcue::after{ animation:none; } }

  /* Per-tour enquire link */
  .tour__enq{
    display:inline-block; margin-top:0.5rem;
    font-family:var(--f-mono); font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--terracotta); opacity:0; transform:translateX(-6px);
    transition:opacity .3s ease, transform .3s var(--ease);
  }
  .tour:hover .tour__enq{ opacity:1; transform:translateX(0); }
  @media (hover:none){ .tour__enq{ opacity:1; transform:none; } }

  /* ==========================================================
     RENTALS — distinctive layouts (keys timeline, road notes)
     ========================================================== */
  /* Connected horizontal "steps to the keys" flow */
  .keysflow{
    position:relative; display:grid; grid-template-columns:repeat(4,1fr);
    gap:clamp(1rem, 2.4vw, 2rem); margin-top:1rem;
  }
  .keysflow__line{
    position:absolute; top:22px; left:8%; right:8%; height:1px; z-index:0;
    background:linear-gradient(90deg, transparent, var(--line-dark) 12%, var(--line-dark) 88%, transparent);
  }
  .keysflow__step{ position:relative; z-index:1; text-align:left; min-width:0; }
  .keysflow__dot{
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    width:44px; height:44px; border-radius:50%; margin-bottom:1.3rem;
    background:var(--bay-deep); color:var(--gold);
    font-family:var(--f-mono); font-size:0.82rem; letter-spacing:0.02em;
    box-shadow:0 0 0 6px var(--stone);
  }
  .keysflow__step h3{
    font-size:clamp(1rem, 1.4vw, 1.15rem); margin-bottom:0.5rem;
    line-height:1.25; text-wrap:balance; hyphens:none;
  }
  .keysflow__step p{
    font-size:clamp(0.85rem, 1.1vw, 0.9rem); color:rgba(27,35,32,0.68);
    line-height:1.55; text-wrap:pretty;
  }

  /* Tablet: 4 narrow columns cramp the copy, so go to 2×2 */
  @media (max-width:1040px){
    .keysflow{ grid-template-columns:repeat(2,1fr); gap:2.2rem 2rem; }
    .keysflow__line{ display:none; }
    .keysflow__step h3{ font-size:1.12rem; }
    .keysflow__step p{ font-size:0.9rem; }
  }

  /* Phone: a single vertical timeline reads best */
  @media (max-width:640px){
    .keysflow{ grid-template-columns:1fr; gap:0; }
    .keysflow__line{
      display:block; top:8px; bottom:8px; left:21px; right:auto; width:1px; height:auto;
      background:linear-gradient(180deg, transparent, var(--line-dark) 8%, var(--line-dark) 92%, transparent);
    }
    .keysflow__step{
      display:grid; grid-template-columns:44px minmax(0,1fr); gap:1.1rem;
      align-items:start; padding-bottom:1.9rem;
    }
    .keysflow__dot{ margin-bottom:0; }
    .keysflow__step h3{ font-size:1.08rem; margin-bottom:0.35rem; padding-top:0.55rem; }
    .keysflow__step p{ font-size:0.92rem; grid-column:2; }
  }

  /* Road notes — editorial two-column: sticky intro + numbered list */
  .roadnotes{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
  .roadnotes__intro{ position:sticky; top:100px; }
  .roadnotes__intro .eyebrow{ color:var(--gold); margin-bottom:1rem; }
  .roadnotes__intro h2{ margin-bottom:1rem; }
  .roadnotes__intro p{ color:rgba(239,232,216,0.75); margin-bottom:1.8rem; max-width:34ch; }
  .roadnotes__intro h2{ position:relative; padding-bottom:1rem; }
  .roadnotes__intro h2::after{
    content:""; position:absolute; left:0; bottom:0; width:58px; height:2px;
    background:linear-gradient(90deg, var(--gold), transparent);
  }
  .roadnotes__list{ display:flex; flex-direction:column; }
  .roadnote{
    display:grid; grid-template-columns:auto 1fr; gap:1.6rem; align-items:baseline;
    padding:1.6rem 1rem 1.6rem 0.9rem; border-top:1px solid rgba(239,232,216,0.14);
    position:relative; border-radius:6px;
    transition:background .35s ease, padding-left .35s var(--ease-out);
  }
  .roadnote:last-child{ border-bottom:1px solid rgba(239,232,216,0.14); }
  /* gold rule slides in and the row lifts slightly on hover */
  .roadnote::before{
    content:""; position:absolute; left:0; top:12%; bottom:12%; width:2px;
    background:linear-gradient(180deg, var(--gold), var(--terracotta));
    transform:scaleY(0); transform-origin:center; transition:transform .4s var(--ease-out);
  }
  .roadnote:hover{ background:rgba(239,232,216,0.045); padding-left:1.6rem; }
  .roadnote:hover::before{ transform:scaleY(1); }
  .roadnote__k{
    font-family:var(--f-mono); font-size:0.8rem; color:var(--terracotta); letter-spacing:0.05em;
    transition:color .3s ease, letter-spacing .35s ease;
  }
  .roadnote:hover .roadnote__k{ color:var(--gold); letter-spacing:0.12em; }
  .roadnote h3{ font-size:1.2rem; color:#fff; margin-bottom:0.45rem; }
  .roadnote p{ font-size:0.94rem; color:rgba(239,232,216,0.78); max-width:52ch; line-height:1.6; }
  @media (max-width:860px){
    .roadnotes{ grid-template-columns:1fr; gap:2rem; }
    .roadnotes__intro{ position:static; }
  }

  /* ==========================================================
     TRANSFERS & TRIPS page — distinct layouts
     ========================================================== */
  /* Intro split: text + numbered list */
  .transfer-intro{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
  .transfer-intro__text .eyebrow{ color:var(--terracotta); margin-bottom:1rem; }
  .transfer-intro__text h2{ margin-bottom:1.2rem; }
  .transfer-intro__text p{ color:rgba(27,35,32,0.72); margin-bottom:1rem; max-width:52ch; }
  .transfer-intro__list{ display:flex; flex-direction:column; gap:0.4rem; }
  .transfer-intro__list li{ display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:baseline; padding:1.1rem 0; border-top:1px solid var(--line); }
  .transfer-intro__list li span{ font-family:var(--f-mono); font-size:0.8rem; color:var(--terracotta); }
  .transfer-intro__list b{ display:block; font-family:var(--f-display); font-weight:500; font-size:1.1rem; margin-bottom:0.2rem; }
  .transfer-intro__list p{ font-size:0.9rem; color:rgba(27,35,32,0.65); }
  @media (max-width:860px){ .transfer-intro{ grid-template-columns:1fr; gap:2rem; } }

  /* Group headings inside the transfers section */
  .tfgroup__title{
    font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--terracotta); margin:0 0 1.3rem; padding-bottom:0.8rem;
    border-bottom:1px solid var(--line);
  }
  .tfgroup__title + * { margin-bottom:3.2rem; }

  /* Airport cards */
  .airports{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
  .airportcard{
    border:1px solid var(--line); border-radius:8px; padding:1.6rem 1.5rem 1.7rem;
    background:var(--paper);
    transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s ease;
  }
  .airportcard:hover{ transform:translateY(-4px); box-shadow:0 18px 36px rgba(11,46,54,0.12); border-color:rgba(199,154,61,0.5); }
  .airportcard__code{
    display:inline-block; font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.14em;
    color:var(--gold); background:var(--bay-deep); border-radius:4px;
    padding:0.4em 0.7em; margin-bottom:1rem;
  }
  .airportcard h4{ font-family:var(--f-display); font-weight:500; font-size:1.3rem; margin-bottom:0.45rem; }
  .airportcard p{ font-size:0.88rem; color:rgba(27,35,32,0.68); line-height:1.5; }
  @media (max-width:900px){ .airports{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:520px){ .airports{ grid-template-columns:1fr; } }

  /* Destination columns */
  .destgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
  .destcol{ border-top:2px solid var(--terracotta); padding-top:1.1rem; }
  .destcol__k{
    display:block; font-family:var(--f-mono); font-size:0.68rem; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--terracotta-dk); margin-bottom:0.9rem;
  }
  .destcol ul{ display:flex; flex-direction:column; }
  .destcol li{
    font-size:0.95rem; color:rgba(27,35,32,0.78); padding:0.55rem 0;
    border-bottom:1px solid var(--line);
  }
  .destcol li:last-child{ border-bottom:0; }
  @media (max-width:900px){ .destgrid{ grid-template-columns:repeat(2,1fr); gap:1.6rem; } }
  @media (max-width:520px){ .destgrid{ grid-template-columns:1fr; } }

  /* Trip tiles — strictly uniform grid, every tile the same size */
  .triptiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
  .triptile{
    position:relative; border-radius:8px; overflow:hidden;
    aspect-ratio:4/3.35;
    display:flex; align-items:flex-end; color:var(--stone);
    background:linear-gradient(160deg,#123B45,#1B535C);
    transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
  }
  .triptile:hover{ transform:translateY(-5px); box-shadow:0 24px 48px rgba(11,46,54,0.22); }
  .triptile__img{ position:absolute; inset:0; }
  .triptile__img img{ width:100%; height:100%; object-fit:cover; }
  .triptile:hover .triptile__img img{ transform:scale(1.05); }
  .triptile::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,25,29,0.92) 0%, rgba(8,25,29,0.28) 55%, rgba(8,25,29,0.02) 100%); }
  .triptile__body{ position:relative; z-index:2; padding:1.7rem 1.8rem; width:100%; }
  .triptile__time{ font-family:var(--f-mono); font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:0.55rem; }
  .triptile__body h3{ font-size:1.35rem; color:#fff; margin-bottom:0.45rem; line-height:1.2; }
  .triptile__body p{ font-size:0.9rem; color:rgba(239,232,216,0.84); line-height:1.5; }

  /* "your own day" tile — no photo, invites a message */
  .triptile--ask{
    background:linear-gradient(150deg, #0B2E36 0%, #123B45 55%, #17505A 100%);
    align-items:center;
    border:1px solid rgba(199,154,61,0.28);
  }
  .triptile--ask::after{ display:none; }
  .triptile--ask .triptile__body{ padding:2rem 1.9rem; }
  .triptile__cta{
    display:inline-block; margin-top:1rem;
    font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--gold); transition:letter-spacing .3s ease;
  }
  .triptile--ask:hover .triptile__cta{ letter-spacing:0.15em; }

  @media (max-width:1000px){ .triptiles{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:620px){ .triptiles{ grid-template-columns:1fr; } .triptile{ aspect-ratio:4/3; } }

  /* Fleet */
  .fleet{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
  .fleet__intro .eyebrow{ color:var(--gold); margin-bottom:1rem; }
  .fleet__intro p{ color:rgba(239,232,216,0.75); max-width:38ch; margin-top:1rem; }
  .fleet__cards{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
  .fleetcard{ border:1px solid var(--line-dark); border-radius:8px; overflow:hidden; background:rgba(255,255,255,0.03); transition:transform .4s var(--ease); }
  .fleetcard:hover{ transform:translateY(-4px); }
  .fleetcard__img{ aspect-ratio:16/10; overflow:hidden; }
  .fleetcard__img img{ width:100%; height:100%; object-fit:cover; }
  .fleetcard__body{ padding:1.4rem 1.5rem 1.6rem; }
  .fleetcard__body h3{ color:#fff; font-size:1.25rem; margin-bottom:0.4rem; }
  .fleetcard__body p{ font-size:0.86rem; color:rgba(239,232,216,0.7); margin-bottom:0.9rem; }
  .fleetcard__tag{ font-family:var(--f-mono); font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); }
  @media (max-width:860px){ .fleet{ grid-template-columns:1fr; } .fleet__cards{ grid-template-columns:1fr 1fr; } }
  @media (max-width:520px){ .fleet__cards{ grid-template-columns:1fr; } }

  /* ==========================================================
     CONTACT page
     ========================================================== */
  .page-hero--short{ min-height:52svh; }
  .contact-lead{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
  .contact-lead__text .eyebrow{ color:var(--terracotta); margin-bottom:1rem; }
  .contact-lead__text h2{ margin-bottom:1.2rem; }
  .contact-lead__text p{ color:rgba(27,35,32,0.72); margin-bottom:1rem; max-width:52ch; }
  .contact-lead__points{ display:flex; flex-direction:column; gap:0.3rem; }
  .contact-lead__points li{ display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start; padding:1.1rem 0; border-top:1px solid var(--line); }
  .contact-lead__points svg{ width:24px; height:24px; color:var(--terracotta); margin-top:2px; }
  .contact-lead__points b{ display:block; font-family:var(--f-display); font-weight:500; font-size:1.08rem; margin-bottom:0.2rem; }
  .contact-lead__points p{ font-size:0.9rem; color:rgba(27,35,32,0.65); }
  @media (max-width:860px){ .contact-lead{ grid-template-columns:1fr; gap:2rem; } }

  /* Reach cards */
  .reach{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
  .reachcard{
    display:flex; align-items:center; gap:1.4rem; padding:1.8rem 1.9rem;
    border:1px solid var(--line-dark); border-radius:10px; background:rgba(255,255,255,0.03);
    color:var(--stone); transition:transform .35s var(--ease), background .3s ease, border-color .3s ease;
  }
  .reachcard:hover{ transform:translateY(-4px); background:rgba(255,255,255,0.06); border-color:rgba(199,154,61,0.4); }
  .reachcard__icon{ flex-shrink:0; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--bay-deep); color:var(--gold); }
  .reachcard__icon svg{ width:30px; height:30px; }
  .reachcard--wa .reachcard__icon{ background:#25D366; color:#fff; }
  .reachcard__body{ flex:1; min-width:0; }
  .reachcard__k{ font-family:var(--f-mono); font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:0.4rem; }
  .reachcard__body b{ font-family:var(--f-display); font-size:1.35rem; color:#fff; display:block; margin-bottom:0.3rem; word-break:break-word; }
  .reachcard__body p{ font-size:0.86rem; color:rgba(239,232,216,0.7); }
  .reachcard__go{ font-size:1.2rem; color:rgba(239,232,216,0.5); transition:transform .3s var(--ease), color .3s ease; }
  .reachcard:hover .reachcard__go{ transform:translateX(4px); color:var(--gold); }
  .reach__foot{ margin-top:2rem; text-align:center; font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.06em; color:rgba(239,232,216,0.5); text-transform:uppercase; }
  @media (max-width:720px){ .reach{ grid-template-columns:1fr; } .reachcard{ flex-wrap:wrap; } }

  /* ==========================================================
     MOUNTAIN ATTRACTIONS (home)
     ========================================================== */
  .attractions{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:1.4rem; }
  .attraction{
    position:relative; border-radius:8px; overflow:hidden; min-height:280px;
    display:flex; align-items:flex-end; color:var(--stone);
    background:linear-gradient(160deg,#123B45,#1B535C);
    transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  }
  .attraction--feature{ grid-row:span 2; grid-column:span 1; }
  .attraction:hover{ transform:translateY(-5px); box-shadow:0 24px 48px rgba(11,46,54,0.22); }
  .attraction__img{ position:absolute; inset:0; }
  .attraction__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
  .attraction:hover .attraction__img img{ transform:scale(1.05); }
  .attraction::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,25,29,0.9) 0%, rgba(8,25,29,0.15) 60%, rgba(8,25,29,0) 100%); }
  .attraction__body{ position:relative; z-index:2; padding:1.7rem 1.8rem; }
  .attraction__k{ font-family:var(--f-mono); font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:0.5rem; }
  .attraction__body h3{ font-size:1.4rem; color:#fff; margin-bottom:0.5rem; }
  .attraction__body p{ font-size:0.9rem; color:rgba(239,232,216,0.82); max-width:46ch; }
  .attractions__note{ display:flex; align-items:center; justify-content:space-between; gap:1.6rem; flex-wrap:wrap; margin-top:2.4rem; }
  .attractions__note p{ max-width:56ch; color:rgba(27,35,32,0.72); font-size:0.96rem; }
  @media (max-width:860px){
    .attractions{ grid-template-columns:1fr 1fr; }
    .attraction--feature{ grid-row:span 1; grid-column:span 2; min-height:240px; }
  }
  @media (max-width:560px){
    .attractions{ grid-template-columns:1fr; }
    .attraction--feature{ grid-column:span 1; }
  }

  /* ==========================================================
     3D TILT CARDS — pointer-tracked depth + light sheen.
     Class + sheen element are added by site.js on desktop/
     fine-pointer devices to every card grid across the site.
     ========================================================== */
  .tilt3d{
    position:relative;
    transform-style:preserve-3d;
    transition:transform .6s var(--ease), box-shadow .6s var(--ease);
    will-change:transform;
  }
  .tilt3d.is-tilting{ transition:transform .12s linear, box-shadow .12s linear; }
  .tilt3d__sheen{
    position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:inherit;
    opacity:0; transition:opacity .4s ease;
    background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.32), rgba(255,255,255,0) 52%);
    mix-blend-mode:overlay;
  }
  .tilt3d.is-tilting > .tilt3d__sheen{ opacity:1; }

  /* ==========================================================
     BOAT INTRO — entrance for boat-tours.html.
     A speedboat runs across the bay throwing spray, then the
     water parts down the seam and opens onto the page.
     ========================================================== */
  body.intro-lock{ overflow:hidden; }

  .boatintro{
    position:fixed; inset:0; z-index:9000; overflow:hidden;
    background:#061319; cursor:pointer;
  }
  .boatintro__half{ position:absolute; left:0; right:0; overflow:hidden; will-change:transform; }
  .boatintro__half--top{ top:0; height:52%; }
  .boatintro__half--bottom{ bottom:0; height:48%; }

  /* sky + distant ridge */
  .boatintro__sky{
    position:absolute; inset:0;
    background:linear-gradient(180deg, #0A2630 0%, #12414C 55%, #1C5A63 100%);
  }
  .boatintro__ridge{ position:absolute; left:0; right:0; bottom:0; height:46%; opacity:0.55; }
  .boatintro__ridge svg{ width:100%; height:100%; display:block; }
  .boatintro__ridge path{ fill:#082028; }

  /* water */
  .boatintro__water{
    position:absolute; inset:0;
    background:linear-gradient(180deg, #14515C 0%, #0C3742 45%, #061F27 100%);
  }
  .boatintro__swell{ position:absolute; top:-8px; left:0; width:220%; height:70px; }
  .boatintro__swell path{ fill:rgba(239,232,216,0.09); }
  .boatintro__swell--2{ top:6px; opacity:0.6; }
  .boatintro.is-playing .boatintro__swell{ animation:biSwell 9s linear infinite; }
  .boatintro.is-playing .boatintro__swell--2{ animation:biSwell 14s linear infinite reverse; }
  @keyframes biSwell{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

  .boatintro__glint{
    position:absolute; inset:0;
    background:radial-gradient(60% 90% at 70% 0%, rgba(199,154,61,0.22), transparent 70%);
    opacity:0;
  }
  .boatintro.is-playing .boatintro__glint{ animation:biGlint 2.6s ease-out forwards; }
  @keyframes biGlint{ 0%{ opacity:0; } 40%{ opacity:1; } 100%{ opacity:0.45; } }

  /* the boat rides the seam */
  .boatintro__runner{
    position:absolute; left:0; top:52%; width:280px; height:96px;
    transform:translate(-360px, -62px);
    will-change:transform;
  }
  .boatintro.is-playing .boatintro__runner{
    animation:biRun 3.0s cubic-bezier(0.32, 0.06, 0.26, 1) forwards;
  }
  @keyframes biRun{
    0%   { transform:translate(-360px, -62px) scale(0.92); }
    55%  { transform:translate(50vw, -70px)   scale(1.02); }
    100% { transform:translate(112vw, -58px)  scale(1.06); }
  }
  .boatintro__boat{ width:280px; height:auto; display:block; }
  .boatintro.is-playing .boatintro__hull{ animation:biBob 1.05s ease-in-out infinite; transform-origin:50% 70%; }
  @keyframes biBob{
    0%,100%{ transform:translateY(0) rotate(-1.4deg); }
    50%    { transform:translateY(-4px) rotate(0.6deg); }
  }
  .boatintro__foam{ stroke:rgba(239,232,216,0.55); stroke-width:3; fill:none; stroke-linecap:round; stroke-dasharray:14 10; }
  .boatintro.is-playing .boatintro__foam{ animation:biFoam .5s linear infinite; }
  @keyframes biFoam{ to{ stroke-dashoffset:-24; } }

  /* spray thrown off the bow */
  .boatintro__spray ellipse{ fill:rgba(239,232,216,0.85); opacity:0; }
  .boatintro.is-playing .boatintro__spray ellipse{ animation:biSpray .62s ease-out infinite; }
  .boatintro.is-playing .boatintro__spray ellipse:nth-child(2){ animation-delay:.10s; }
  .boatintro.is-playing .boatintro__spray ellipse:nth-child(3){ animation-delay:.20s; }
  .boatintro.is-playing .boatintro__spray ellipse:nth-child(4){ animation-delay:.06s; }
  .boatintro.is-playing .boatintro__spray ellipse:nth-child(5){ animation-delay:.28s; }
  @keyframes biSpray{
    0%  { opacity:0;   transform:translate(0,0) scale(0.5); }
    30% { opacity:0.9; }
    100%{ opacity:0;   transform:translate(26px,-30px) scale(1.5); }
  }

  /* long wake dragged behind the hull */
  .boatintro__wake{
    position:absolute; right:200px; top:60px; height:8px; width:0;
    background:linear-gradient(90deg, rgba(239,232,216,0) 0%, rgba(239,232,216,0.45) 60%, rgba(239,232,216,0.75) 100%);
    filter:blur(1.5px); border-radius:8px;
  }
  .boatintro.is-playing .boatintro__wake{ animation:biWake 3.0s cubic-bezier(0.32,0.06,0.26,1) forwards; }
  @keyframes biWake{ 0%{ width:0; } 60%{ width:420px; } 100%{ width:120px; opacity:0.3; } }

  /* caption */
  .boatintro__caption{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-42%);
    text-align:center; color:var(--stone); opacity:0;
  }
  .boatintro.is-playing .boatintro__caption{ animation:biCaption 2.9s var(--ease) forwards .45s; }
  @keyframes biCaption{
    0%  { opacity:0; transform:translate(-50%,-32%); letter-spacing:0.22em; }
    45% { opacity:1; transform:translate(-50%,-42%); }
    100%{ opacity:1; transform:translate(-50%,-46%); }
  }
  .boatintro__caption .eyebrow{ justify-content:center; color:var(--gold); margin-bottom:0.6rem; }
  .boatintro__caption .eyebrow::before{ display:none; }
  .boatintro__caption h2{
    font-family:var(--f-display); font-size:clamp(2.2rem,6vw,4rem); font-weight:300; color:#fff; line-height:1;
  }
  .boatintro__caption h2 em{ font-style:italic; color:var(--gold); }

  /* the wave that washes up and breaks before the page opens */
  .boatintro__splash{
    position:absolute; left:0; right:0; bottom:0; height:60%;
    pointer-events:none; opacity:0;
  }
  .boatintro.is-splashing .boatintro__splash{ opacity:1; }
  .boatintro__splashwave{
    position:absolute; left:0; bottom:0; width:100%; height:100%;
    transform:translateY(102%);
  }
  .boatintro__splashwave path{ fill:rgba(214,236,240,0.92); }
  .boatintro__splashwave--2 path{ fill:rgba(255,255,255,0.75); }
  .boatintro.is-splashing .boatintro__splashwave{
    animation:biSplash 1.5s cubic-bezier(0.18, 0.9, 0.3, 1) forwards;
  }
  .boatintro.is-splashing .boatintro__splashwave--2{
    animation:biSplash 1.5s cubic-bezier(0.18, 0.9, 0.3, 1) .12s forwards;
  }
  @keyframes biSplash{
    0%  { transform:translateY(102%); }
    45% { transform:translateY(-6%); }
    62% { transform:translateY(4%); }
    100%{ transform:translateY(-2%); }
  }
  /* droplets kicked up by the break */
  .boatintro__droplets{ position:absolute; left:0; right:0; bottom:38%; height:0; }
  .boatintro__droplets span{
    position:absolute; bottom:0; width:10px; height:10px; border-radius:50%;
    background:rgba(255,255,255,0.9); opacity:0;
  }
  .boatintro__droplets span:nth-child(1){ left:8%;  width:14px; height:14px; }
  .boatintro__droplets span:nth-child(2){ left:19%; width:8px;  height:8px; }
  .boatintro__droplets span:nth-child(3){ left:29%; width:12px; height:12px; }
  .boatintro__droplets span:nth-child(4){ left:38%; width:7px;  height:7px; }
  .boatintro__droplets span:nth-child(5){ left:47%; width:16px; height:16px; }
  .boatintro__droplets span:nth-child(6){ left:57%; width:9px;  height:9px; }
  .boatintro__droplets span:nth-child(7){ left:66%; width:13px; height:13px; }
  .boatintro__droplets span:nth-child(8){ left:76%; width:8px;  height:8px; }
  .boatintro__droplets span:nth-child(9){ left:85%; width:15px; height:15px; }
  .boatintro__droplets span:nth-child(10){ left:93%; width:10px; height:10px; }
  .boatintro.is-splashing .boatintro__droplets span{
    animation:biDrop 1.25s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  }
  .boatintro.is-splashing .boatintro__droplets span:nth-child(2n){ animation-delay:.08s; }
  .boatintro.is-splashing .boatintro__droplets span:nth-child(3n){ animation-delay:.16s; }
  .boatintro.is-splashing .boatintro__droplets span:nth-child(5n){ animation-delay:.05s; }
  @keyframes biDrop{
    0%  { opacity:0; transform:translateY(0) scale(0.4); }
    18% { opacity:1; }
    55% { transform:translateY(-120px) scale(1); }
    100%{ opacity:0; transform:translateY(-40px) scale(0.6); }
  }

  /* the gold seam that flashes as the halves part */
  .boatintro__seam{
    position:absolute; left:0; right:0; top:52%; height:1px; transform:translateY(-0.5px);
    background:linear-gradient(90deg, transparent, rgba(199,154,61,0.9) 20%, rgba(255,240,205,1) 50%, rgba(199,154,61,0.9) 80%, transparent);
    opacity:0;
  }
  .boatintro.is-opening .boatintro__seam{ animation:biSeam .9s ease-out forwards; }
  @keyframes biSeam{ 0%{ opacity:0; } 25%{ opacity:1; } 100%{ opacity:0; } }

  /* opening: halves slide apart, whole thing fades */
  .boatintro.is-opening .boatintro__half--top{
    animation:biOpenTop 1.35s cubic-bezier(0.65, 0, 0.2, 1) forwards;
  }
  .boatintro.is-opening .boatintro__half--bottom{
    animation:biOpenBottom 1.35s cubic-bezier(0.65, 0, 0.2, 1) forwards;
  }
  @keyframes biOpenTop{ 0%{ transform:translateY(0); } 100%{ transform:translateY(-102%); } }
  @keyframes biOpenBottom{ 0%{ transform:translateY(0); } 100%{ transform:translateY(102%); } }
  .boatintro.is-opening{ animation:biFade 1.35s ease forwards; }
  @keyframes biFade{ 0%,70%{ opacity:1; } 100%{ opacity:0; } }
  .boatintro.is-opening .boatintro__runner,
  .boatintro.is-opening .boatintro__caption{ opacity:0; transition:opacity .35s ease; }

  @media (prefers-reduced-motion: reduce){ .boatintro{ display:none; } }
  @media (max-width:640px){
    .boatintro__boat{ width:200px; }
    .boatintro__runner{ width:200px; }
    .boatintro__caption h2{ font-size:2rem; }
  }


  /* ==========================================================
     EXTRA POLISH — buttons, links, image treatment
     ========================================================== */
  /* Buttons: subtle lift + arrow nudge feel */
  .btn{ transition:transform .28s var(--ease), box-shadow .28s var(--ease), background .25s ease, color .25s ease, border-color .25s ease; }
  .btn:hover{ transform:translateY(-2px); }
  .btn--primary:hover{ box-shadow:0 10px 24px rgba(180,75,41,0.35); }

  /* Section eyebrows get a soft fade-slide when revealed */
  .sec-head.is-visible .eyebrow, .reveal.is-visible .eyebrow{ animation:eyebrowIn .7s var(--ease) both; }
  @keyframes eyebrowIn{ from{ opacity:0; transform:translateX(-10px); } to{ opacity:1; transform:translateX(0); } }

  /* Images: gentle luminance lift on hover inside cards */
  .stopcard img, .dinecard__img img, .triptile__img img, .attraction__img img, .fleetcard__img img{
    filter:saturate(1) brightness(1); transition:filter .5s ease, transform .8s var(--ease);
  }
  .stopcard:hover img, .dinecard:hover .dinecard__img img, .triptile:hover .triptile__img img,
  .attraction:hover .attraction__img img, .fleetcard:hover .fleetcard__img img{
    filter:saturate(1.08) brightness(1.04);
  }

  /* Subnav links: underline slide */
  .subnav a{ position:relative; }
  .subnav a::after{
    content:""; position:absolute; left:0; right:100%; bottom:-3px; height:1px;
    background:var(--terracotta); transition:right .3s var(--ease);
  }
  .subnav a:hover::after{ right:0; }

  /* ==========================================================
     ROAD INTRO — entrance for rentals.html.
     A car winds down the serpentines, then the road parts.
     ========================================================== */
  .roadintro{
    position:fixed; inset:0; z-index:9000; overflow:hidden;
    background:#07161B; cursor:pointer;
  }
  .roadintro__half{ position:absolute; left:0; right:0; overflow:hidden; will-change:transform; }
  .roadintro__half--top{ top:0; height:58%; }
  .roadintro__half--bottom{ bottom:0; height:42%; }

  .roadintro__sky{
    position:absolute; inset:0;
    background:linear-gradient(180deg, #0A2028 0%, #123B45 48%, #2A6A66 100%);
  }
  .roadintro__peaks{ position:absolute; left:0; right:0; bottom:0; height:62%; }
  .roadintro__peaks svg{ width:100%; height:100%; display:block; }
  .roadintro__peaks .peak-far{ fill:#0A2A31; opacity:0.85; }
  .roadintro__peaks .peak-near{ fill:#061C22; }

  .roadintro__ground{
    position:absolute; inset:0;
    background:linear-gradient(180deg, #123B45 0%, #0A252C 60%, #061419 100%);
  }

  /* the serpentine stage sits over the seam */
  .roadintro__stage{ position:absolute; inset:0; display:grid; place-items:center; }
  .roadintro__map{ width:min(1100px, 94vw); height:auto; overflow:visible; }
  .roadintro__road{
    fill:none; stroke:#1A2C31; stroke-width:26; stroke-linecap:round; stroke-linejoin:round;
  }
  .roadintro__rail{
    fill:none; stroke:rgba(239,232,216,0.35); stroke-width:28; stroke-linecap:round;
    stroke-dasharray:1 13; opacity:0.5;
  }
  .roadintro__dashes{
    fill:none; stroke:rgba(199,154,61,0.85); stroke-width:2.4; stroke-linecap:round;
    stroke-dasharray:16 20;
  }
  .roadintro.is-playing .roadintro__dashes{ animation:riDash 1.1s linear infinite; }
  @keyframes riDash{ to{ stroke-dashoffset:-36; } }

  /* road draws itself in */
  .roadintro__road, .roadintro__rail{ stroke-dasharray:2600; stroke-dashoffset:2600; }
  .roadintro.is-playing .roadintro__road{ animation:riDraw 1.5s var(--ease) forwards; }
  .roadintro.is-playing .roadintro__rail{ animation:riDraw 1.5s var(--ease) .12s forwards; }
  @keyframes riDraw{ to{ stroke-dashoffset:0; } }

  /* roadside scenery */
  .roadintro__scenery{ opacity:0; }
  .roadintro.is-playing .roadintro__scenery{ animation:riCarIn .9s ease .35s forwards; }
  .rs-pine path{ fill:#0A2A31; }
  .rs-pine rect{ fill:#123B45; }
  .rs-rock{ fill:#0E3038; opacity:0.9; }

  /* the car lives inside the SVG and follows #serpPath via animateMotion,
     so it always sits exactly on the road at any screen size */
  .roadintro__carg{ opacity:0; }
  .roadintro.is-playing .roadintro__carg{ animation:riCarIn .4s ease .6s forwards; }
  @keyframes riCarIn{ to{ opacity:1; } }

  .rc-beam{ fill:rgba(255,243,208,0.14); }
  .rc-shadow{ stroke:rgba(0,0,0,0.35); stroke-width:3.4; fill:none; stroke-linecap:round; }
  .rc-wheel{ transform-origin:center; transform-box:fill-box; }
  .roadintro.is-playing .rc-wheel{ animation:riSpin .42s linear infinite; }
  .roadintro.is-playing .rc-lift{ animation:riJounce .5s ease-in-out infinite; transform-origin:50% 90%; transform-box:fill-box; }
  @keyframes riJounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-0.7px); } }

  .rc-dust circle{ fill:rgba(239,232,216,0.4); opacity:0; transform-box:fill-box; }
  .roadintro.is-playing .rc-dust circle{ animation:riDust .75s ease-out infinite; }
  .roadintro.is-playing .rc-dust circle:nth-child(2){ animation-delay:.2s; }
  .roadintro.is-playing .rc-dust circle:nth-child(3){ animation-delay:.4s; }
  @keyframes riDust{
    0%  { opacity:0.5; transform:translate(0,0) scale(0.5); }
    100%{ opacity:0;   transform:translate(-12px,-4px) scale(2); }
  }
  @keyframes riSpin{ to{ transform:rotate(360deg); } }

  .roadintro__caption{
    position:absolute; left:50%; top:26%; transform:translate(-50%,-50%);
    text-align:center; color:var(--stone); opacity:0; z-index:3;
  }
  .roadintro.is-playing .roadintro__caption{ animation:riCaption 2.9s var(--ease) forwards .5s; }
  @keyframes riCaption{
    0%  { opacity:0; transform:translate(-50%,-40%); letter-spacing:0.22em; }
    45% { opacity:1; transform:translate(-50%,-50%); }
    100%{ opacity:1; transform:translate(-50%,-54%); }
  }
  .roadintro__caption .eyebrow{ justify-content:center; color:var(--gold); margin-bottom:0.6rem; }
  .roadintro__caption .eyebrow::before{ display:none; }
  .roadintro__caption h2{
    font-family:var(--f-display); font-size:clamp(2.2rem,6vw,4rem); font-weight:300; color:#fff; line-height:1;
  }
  .roadintro__caption h2 em{ font-style:italic; color:var(--gold); }

  .roadintro__seam{
    position:absolute; left:0; right:0; top:58%; height:1px; transform:translateY(-0.5px);
    background:linear-gradient(90deg, transparent, rgba(199,154,61,0.9) 20%, rgba(255,240,205,1) 50%, rgba(199,154,61,0.9) 80%, transparent);
    opacity:0;
  }
  .roadintro.is-opening .roadintro__seam{ animation:biSeam .9s ease-out forwards; }

  .roadintro.is-opening .roadintro__half--top{ animation:biOpenTop 1.35s cubic-bezier(0.65,0,0.2,1) forwards; }
  .roadintro.is-opening .roadintro__half--bottom{ animation:biOpenBottom 1.35s cubic-bezier(0.65,0,0.2,1) forwards; }
  .roadintro.is-opening{ animation:biFade 1.35s ease forwards; }
  .roadintro.is-opening .roadintro__stage,
  .roadintro.is-opening .roadintro__caption{ opacity:0; transition:opacity .4s ease; }

  @media (prefers-reduced-motion: reduce){ .roadintro{ display:none; } }
  @media (max-width:640px){
    .roadintro__caption h2{ font-size:2rem; }
    .roadintro__road{ stroke-width:20; }
  }

  /* ==========================================================
     TRANSFER INTRO — entrance for transfers.html.
     The van collects guests at the airport, runs the coast road,
     arrives at the hotel, then the road parts.
     ========================================================== */
  .tfintro{
    position:fixed; inset:0; z-index:9000; overflow:hidden;
    background:#07161B; cursor:pointer;
  }
  .tfintro__half{ position:absolute; left:0; right:0; overflow:hidden; will-change:transform; }
  .tfintro__half--top{ top:0; height:62%; }
  .tfintro__half--bottom{ bottom:0; height:38%; }

  .tfintro__sky{
    position:absolute; inset:0;
    background:linear-gradient(180deg, #0A2028 0%, #14424D 50%, #37766E 100%);
  }
  .tfintro__hills{ position:absolute; left:0; right:0; bottom:0; height:42%; opacity:0.7; }
  .tfintro__hills svg{ width:100%; height:100%; display:block; }
  .tfintro__hills path{ fill:#07242B; }
  .tfintro__ground{
    position:absolute; inset:0;
    background:linear-gradient(180deg, #123B45 0%, #0A252C 55%, #061419 100%);
  }

  /* airport & hotel */
  .tfintro__place{ position:absolute; bottom:2%; display:flex; flex-direction:column; align-items:center; gap:0.5rem; }
  .tfintro__place svg{ display:block; }
  .tfintro__place--airport{ left:3%; width:min(230px, 24vw); opacity:0; transform:translateX(-24px); }
  .tfintro__place--hotel{ right:3%; width:min(250px, 26vw); opacity:0; transform:translateX(24px) scale(0.94); }
  .tfintro.is-playing .tfintro__place--airport{ animation:tfIn .9s var(--ease) .1s forwards; }
  .tfintro.is-driving .tfintro__place--hotel{ animation:tfInHotel 1.2s var(--ease) .4s forwards; }
  @keyframes tfIn{ to{ opacity:1; transform:translateX(0); } }
  @keyframes tfInHotel{ to{ opacity:1; transform:translateX(0) scale(1); } }
  .tfintro .tf-bld{ fill:#0C2B33; }
  .tfintro .tf-bld2{ fill:#123B45; }
  .tfintro .tf-roof{ fill:#B44B29; opacity:0.85; }
  .tfintro .tf-plane{ fill:rgba(239,232,216,0.35); }
  .tfintro .tf-win{ fill:#C79A3D; opacity:0.55; }
  .tfintro .tf-hwin rect{ fill:#C79A3D; opacity:0.5; }
  .tfintro.is-driving .tf-hwin rect{ animation:tfLights 2.4s ease-in-out infinite alternate; }
  .tfintro.is-driving .tf-hwin rect:nth-child(3n){ animation-delay:.4s; }
  .tfintro.is-driving .tf-hwin rect:nth-child(4n){ animation-delay:.8s; }
  @keyframes tfLights{ from{ opacity:0.35; } to{ opacity:0.9; } }
  .tfintro .tf-palm{ stroke:#0C2B33; stroke-width:5; fill:none; stroke-linecap:round; }
  .tfintro__tag{
    font-family:var(--f-mono); font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase;
    color:rgba(239,232,216,0.6);
  }

  /* road */
  .tfintro__stage{ position:absolute; inset:0; }
  .tfintro__road{
    position:absolute; left:0; right:0; top:62%; height:3px; transform:translateY(-1.5px);
    background:rgba(239,232,216,0.16);
  }
  .tfintro__roaddash{
    position:absolute; left:0; right:0; top:-9px; height:2px;
    background:repeating-linear-gradient(90deg, rgba(199,154,61,0.7) 0 30px, transparent 30px 62px);
  }
  .tfintro.is-driving .tfintro__roaddash{ animation:tfDash .5s linear infinite; }
  @keyframes tfDash{ from{ background-position:0 0; } to{ background-position:-62px 0; } }

  /* guests at the kerb */
  .tfintro__guests{
    position:absolute; left:19%; top:62%; width:96px; transform:translateY(-100%);
    opacity:0;
  }
  .tfintro__guests svg{ width:100%; height:auto; display:block; }
  .tfintro .tf-guest circle{ fill:rgba(239,232,216,0.85); }
  .tfintro .tf-guest path{ stroke:rgba(239,232,216,0.85); fill:none; }
  .tfintro .tf-bag{ fill:#C79A3D; opacity:0.9; }
  .tfintro.is-playing .tfintro__guests{ animation:tfIn .7s var(--ease) .35s forwards; }
  .tfintro.is-boarding .tf-guest{ animation:tfBoard .75s var(--ease) forwards; transform-origin:50% 100%; }
  .tfintro.is-boarding .tf-guest--2{ animation-delay:.18s; }
  @keyframes tfBoard{
    0%  { opacity:1; transform:translateX(0) scale(1); }
    60% { opacity:1; transform:translateX(26px) scale(0.86); }
    100%{ opacity:0; transform:translateX(44px) scale(0.6); }
  }

  /* the van: pulls up, waits, then runs to the hotel */
  .tfintro__runner{
    position:absolute; left:0; top:62%; width:200px; height:76px;
    transform:translate(-260px, -74%);
  }
  .tfintro.is-playing .tfintro__runner{ animation:tfPullUp 1.15s cubic-bezier(0.2,0.7,0.25,1) forwards; }
  @keyframes tfPullUp{
    0%  { transform:translate(-260px, -74%); }
    100%{ transform:translate(19vw, -74%); }
  }
  .tfintro.is-driving .tfintro__runner{
    animation:tfDrive 2.0s cubic-bezier(0.45,0.02,0.3,1) forwards;
  }
  @keyframes tfDrive{
    0%  { transform:translate(19vw, -74%); }
    100%{ transform:translate(72vw, -74%); }
  }
  .tfintro__van{ width:200px; height:auto; display:block; }
  .tfintro .tf-glass{ fill:#8FB8BE; opacity:0.8; }
  .tfintro__beam{ fill:rgba(255,243,208,0.14); opacity:0; }
  .tfintro.is-driving .tfintro__beam{ opacity:1; }
  .tfintro.is-driving .tfintro__vanbody{ animation:tfJounce .5s ease-in-out infinite; transform-origin:50% 85%; }
  @keyframes tfJounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-1.4px); } }
  .tfintro__wheel{ transform-origin:center; transform-box:fill-box; }
  .tfintro.is-playing .tfintro__wheel{ animation:tfSpin .5s linear infinite; }
  .tfintro.is-boarding .tfintro__wheel{ animation:none; }
  .tfintro.is-driving .tfintro__wheel{ animation:tfSpin .32s linear infinite; }
  @keyframes tfSpin{ to{ transform:rotate(360deg); } }

  .tfintro__caption{
    position:absolute; left:50%; top:24%; transform:translate(-50%,-50%);
    text-align:center; color:var(--stone); opacity:0; z-index:3;
  }
  .tfintro.is-playing .tfintro__caption{ animation:riCaption 3.4s var(--ease) forwards .5s; }
  .tfintro__caption .eyebrow{ justify-content:center; color:var(--gold); margin-bottom:0.6rem; }
  .tfintro__caption .eyebrow::before{ display:none; }
  .tfintro__caption h2{
    font-family:var(--f-display); font-size:clamp(2.2rem,6vw,4rem); font-weight:300; color:#fff; line-height:1;
  }
  .tfintro__caption h2 em{ font-style:italic; color:var(--gold); }

  .tfintro__seam{
    position:absolute; left:0; right:0; top:62%; height:1px; transform:translateY(-0.5px);
    background:linear-gradient(90deg, transparent, rgba(199,154,61,0.9) 20%, rgba(255,240,205,1) 50%, rgba(199,154,61,0.9) 80%, transparent);
    opacity:0;
  }
  .tfintro.is-opening .tfintro__seam{ animation:biSeam .9s ease-out forwards; }
  .tfintro.is-opening .tfintro__half--top{ animation:biOpenTop 1.35s cubic-bezier(0.65,0,0.2,1) forwards; }
  .tfintro.is-opening .tfintro__half--bottom{ animation:biOpenBottom 1.35s cubic-bezier(0.65,0,0.2,1) forwards; }
  .tfintro.is-opening{ animation:biFade 1.35s ease forwards; }
  .tfintro.is-opening .tfintro__stage,
  .tfintro.is-opening .tfintro__caption{ opacity:0; transition:opacity .4s ease; }

  @media (prefers-reduced-motion: reduce){ .tfintro{ display:none; } }
  @media (max-width:640px){
    .tfintro__van, .tfintro__runner{ width:132px; }
    .tfintro__caption h2{ font-size:1.9rem; }
    .tfintro__guests{ width:64px; }
    .tfintro__tag{ font-size:0.54rem; }
  }

  /* ==========================================================
     ANIMATION POLISH — smoother, less jumpy, no layout shift
     ========================================================== */
  /* One easing family everywhere so motion feels related */
  :root{
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  }

  /* Reveals: shorter travel, softer landing — less "sliding page" feel */
  .reveal{
    transform:translateY(18px);
    transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
    will-change:opacity, transform;
  }
  .reveal.is-visible{ will-change:auto; }

  /* Intro overlays: lock scroll position and kill any flash of the seam */
  .boatintro, .roadintro, .tfintro{ backface-visibility:hidden; }
  .boatintro__half, .roadintro__half, .tfintro__half{ backface-visibility:hidden; }

  /* Intro captions share one rhythm */
  .boatintro__caption h2, .roadintro__caption h2, .tfintro__caption h2{
    text-wrap:balance; text-shadow:0 6px 30px rgba(0,0,0,0.35);
  }
  .boatintro__caption .eyebrow, .roadintro__caption .eyebrow, .tfintro__caption .eyebrow{
    font-size:0.72rem; letter-spacing:0.24em;
  }

  /* Card hovers: unify the lift so every grid feels the same */
  .stopcard, .dinecard, .triptile, .attraction, .fleetcard, .rentcard, .reachcard, .quick-card{
    transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out),
               background .3s ease, border-color .3s ease;
  }

  /* Images inside cards: single shared zoom curve */
  .stopcard img, .dinecard__img img, .triptile__img img, .attraction__img img,
  .fleetcard__img img, .rentcard__img img, .riviera__card img{
    transition:transform .9s var(--ease-out), filter .5s ease;
  }

  /* Buttons: crisper press feedback */
  .btn:active{ transform:translateY(0) scale(0.985); }

  /* Nav hide/show gets the shared easing */
  .nav{ transition:background .35s ease, padding .35s ease, box-shadow .35s ease,
                   color .35s ease, transform .4s var(--ease-out); }

  /* Menu links stagger in when the overlay opens */
  .menu.is-open .menu__item{ animation:menuItemIn .55s var(--ease-out) both; }
  .menu.is-open .menu__item:nth-child(1){ animation-delay:.06s; }
  .menu.is-open .menu__item:nth-child(2){ animation-delay:.10s; }
  .menu.is-open .menu__item:nth-child(3){ animation-delay:.14s; }
  .menu.is-open .menu__item:nth-child(4){ animation-delay:.18s; }
  .menu.is-open .menu__item:nth-child(5){ animation-delay:.22s; }
  .menu.is-open .menu__item:nth-child(6){ animation-delay:.26s; }
  .menu.is-open .menu__item:nth-child(7){ animation-delay:.30s; }
  .menu.is-open .menu__item:nth-child(8){ animation-delay:.34s; }
  @keyframes menuItemIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

  /* Scroll cue: gentler, less blinky */
  .scrollcue::after{ animation-duration:2.4s; }

  /* Progress bar: smooth rather than stepping */
  .progress{ transition:width .12s linear; }

  @media (prefers-reduced-motion: reduce){
    .menu.is-open .menu__item{ animation:none; }
    .chartsail__route{ animation:none; opacity:1; }
  }

  /* ==========================================================
     REFINEMENT PASS — depth, typography, focus, small fixes
     ========================================================== */
  /* Focus visibility for keyboard users (was missing) */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
  .chip:focus-visible, .menu__link:focus-visible, .menu__toggle:focus-visible{
    outline:2px solid var(--gold); outline-offset:3px; border-radius:2px;
  }
  .btn:focus-visible{ outline-offset:4px; }

  /* Headline typography: tighter tracking at large sizes, balanced wrapping */
  h1, h2{ letter-spacing:-0.015em; text-wrap:balance; }
  .sec-head p, .page-hero__content-in > p{ text-wrap:pretty; }

  /* Section rhythm: a hairline between light sections so they don't merge */
  .section--light + .section--light{ border-top:1px solid var(--line); }

  /* Dark sections get a faint top sheen for depth */
  .section--dark, .riviera, .cta-band{ position:relative; }
  .section--dark::before, .riviera::before{
    content:""; position:absolute; inset:0 0 auto 0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(199,154,61,0.28), transparent);
  }

  /* Cards: consistent inner rhythm and a real resting shadow on light bg */
  .airportcard, .practical__card, .dinecard, .rentcard, .quick-card{
    box-shadow:0 1px 2px rgba(11,46,54,0.04);
  }

  /* Images never jump layout while loading */
  .stopcard img, .dinecard__img img, .triptile__img img, .attraction__img img,
  .fleetcard__img img, .rentcard__img img, .riviera__card img, .lm-panel__media img{
    background:linear-gradient(160deg, #16424C, #0F3039);
  }

  /* Link underlines in body copy read better */
  .section p a:not(.btn){
    color:var(--terracotta-dk); text-decoration:underline;
    text-decoration-thickness:1px; text-underline-offset:3px;
    transition:color .2s ease;
  }
  .section p a:not(.btn):hover{ color:var(--terracotta); }
  .section--dark p a:not(.btn), .riviera p a:not(.btn){ color:var(--gold); }

  /* Selection + tap highlight tidy */
  *{ -webkit-tap-highlight-color:rgba(199,154,61,0.18); }

  /* Long words never break the layout on narrow screens */
  h1, h2, h3, p, li{ overflow-wrap:anywhere; }
  @supports (overflow-wrap:break-word){ h1,h2,h3,p,li{ overflow-wrap:break-word; } }

  @media (prefers-reduced-motion: reduce){
    .roadintro__scenery{ opacity:1; animation:none; }
  }

  /* ==========================================================
     BOAT TAXI (boat-tours.html)
     ========================================================== */
  .boattaxi__inner{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
  .boattaxi__text .eyebrow{ color:var(--gold); margin-bottom:1rem; }
  .boattaxi__text h2{ margin-bottom:1.2rem; }
  .boattaxi__text > p{ color:rgba(239,232,216,0.8); max-width:52ch; margin-bottom:1rem; }
  .boattaxi__points{ display:flex; flex-direction:column; margin:1.8rem 0 2rem; }
  .boattaxi__points li{
    display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:baseline;
    padding:1rem 0; border-top:1px solid rgba(239,232,216,0.14);
  }
  .boattaxi__points li:last-child{ border-bottom:1px solid rgba(239,232,216,0.14); }
  .boattaxi__points span{ font-family:var(--f-mono); font-size:0.78rem; color:var(--terracotta); }
  .boattaxi__points b{ display:block; font-family:var(--f-display); font-weight:500; font-size:1.08rem; color:#fff; margin-bottom:0.2rem; }
  .boattaxi__points p{ font-size:0.9rem; color:rgba(239,232,216,0.72); }
  .boattaxi__media{ display:flex; flex-direction:column; gap:1rem; }
  .boattaxi__shot{
    position:relative; border-radius:10px; overflow:hidden; margin:0;
    box-shadow:0 26px 54px rgba(0,0,0,0.36);
  }
  .boattaxi__shot img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3.2; display:block; }
  .boattaxi__shot--sm img{ aspect-ratio:16/7; }
  .boattaxi__shot figcaption{
    position:absolute; left:0; right:0; bottom:0; padding:2.2rem 1.4rem 1.1rem;
    font-family:var(--f-mono); font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase;
    color:rgba(239,232,216,0.9);
    background:linear-gradient(0deg, rgba(8,25,29,0.88), transparent);
  }
  @media (max-width:900px){
    .boattaxi__inner{ grid-template-columns:1fr; }
    .boattaxi__media{ order:-1; }
    .boattaxi__shot img{ aspect-ratio:16/10; }
  }

  /* ==========================================================
     CTA PANEL — richer call-to-action block (transfers)
     ========================================================== */
  .ctapanel{
    position:relative; overflow:hidden; margin-top:3rem;
    display:grid; grid-template-columns:1.25fr 0.75fr; gap:clamp(1.6rem,4vw,3.4rem);
    align-items:center; padding:clamp(1.8rem,3.5vw,2.8rem);
    border-radius:12px; background:var(--bay-deep); color:var(--stone);
    box-shadow:0 24px 52px rgba(11,46,54,0.18);
  }
  .ctapanel__glow{
    position:absolute; inset:-40% -10% auto -10%; height:180%; pointer-events:none;
    background:
      radial-gradient(42% 55% at 18% 25%, rgba(199,154,61,0.22), transparent 70%),
      radial-gradient(45% 55% at 82% 70%, rgba(180,75,41,0.20), transparent 70%);
    filter:blur(14px);
  }
  .ctapanel > *{ position:relative; z-index:1; }
  .ctapanel__k{
    display:block; font-family:var(--f-mono); font-size:0.66rem; letter-spacing:0.16em;
    text-transform:uppercase; color:var(--gold); margin-bottom:0.9rem;
  }
  .ctapanel__text h3{
    font-family:var(--f-display); font-weight:400; font-size:clamp(1.35rem,2.4vw,1.85rem);
    color:#fff; line-height:1.25; margin-bottom:0.8rem;
  }
  .ctapanel__text p{ font-size:0.95rem; color:rgba(239,232,216,0.8); max-width:56ch; line-height:1.6; }
  .ctapanel__action{ display:flex; flex-direction:column; align-items:stretch; gap:1rem; }
  .ctapanel__action .btn{ width:100%; text-align:center; }
  .ctapanel__alt{
    display:inline-flex; align-items:center; justify-content:center; gap:0.55em;
    font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.06em;
    color:rgba(239,232,216,0.75); transition:color .25s ease;
  }
  .ctapanel__alt svg{ width:17px; height:17px; color:#25D366; flex-shrink:0; }
  .ctapanel__alt:hover{ color:#fff; }

  .ctapanel--light{
    background:var(--stone); color:var(--ink);
    box-shadow:0 18px 40px rgba(11,46,54,0.10);
    border:1px solid var(--line);
  }
  .ctapanel--light .ctapanel__k{ color:var(--terracotta); }
  .ctapanel--light .ctapanel__text h3{ color:var(--ink); }
  .ctapanel--light .ctapanel__text p{ color:rgba(27,35,32,0.72); }
  .ctapanel--light .ctapanel__alt{ color:rgba(27,35,32,0.65); }
  .ctapanel--light .ctapanel__alt:hover{ color:var(--ink); }

  @media (max-width:820px){
    .ctapanel{ grid-template-columns:1fr; gap:1.6rem; }
  }

  /* Simple centred CTA — one line of copy and a button */
  .simplecta{
    margin-top:3rem; padding-top:2.4rem; border-top:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between;
    gap:2rem; flex-wrap:wrap;
  }
  .simplecta p{ max-width:60ch; font-size:0.98rem; color:rgba(27,35,32,0.72); line-height:1.6; }
  .section--dark .simplecta, .section--stone .simplecta{ border-color:var(--line); }
  @media (max-width:700px){
    .simplecta{ flex-direction:column; align-items:flex-start; gap:1.4rem; }
    .simplecta .btn{ width:100%; text-align:center; }
  }

  /* ==========================================================
     TRANSFERS STRIP (home) — photo band with mini cards
     ========================================================== */
  .tfstrip{ position:relative; overflow:hidden; background:var(--bay-deep); color:var(--stone); }
  .tfstrip__bg{ position:absolute; inset:0; }
  .tfstrip__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 55%; }
  .tfstrip__overlay{
    position:absolute; inset:0;
    background:
      linear-gradient(95deg, rgba(7,20,24,0.95) 0%, rgba(7,20,24,0.88) 38%, rgba(7,20,24,0.62) 68%, rgba(7,20,24,0.42) 100%);
  }
  .tfstrip__inner{
    position:relative; z-index:2;
    display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center;
  }
  .tfstrip__text .eyebrow{ color:var(--gold); margin-bottom:1rem; }
  .tfstrip__text h2{ margin-bottom:1.1rem; }
  .tfstrip__text h2 em{ font-style:italic; color:var(--gold); }
  .tfstrip__text > p{ color:rgba(239,232,216,0.82); max-width:50ch; margin-bottom:1.8rem; line-height:1.65; }

  .tfstrip__cards{ display:flex; flex-direction:column; gap:0.9rem; }
  .tfmini{
    display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
    column-gap:1.1rem; row-gap:0.25rem; align-items:center;
    padding:1.15rem 1.3rem; border-radius:8px;
    background:rgba(239,232,216,0.06); border:1px solid rgba(239,232,216,0.14);
    color:var(--stone);
    transition:background .3s ease, border-color .3s ease, transform .35s var(--ease-out);
  }
  .tfmini:hover{ background:rgba(239,232,216,0.11); border-color:rgba(199,154,61,0.45); transform:translateX(5px); }
  .tfmini__ic{
    grid-row:1 / span 2; width:42px; height:42px; border-radius:50%;
    display:grid; place-items:center; background:var(--bay-deep-2); color:var(--gold);
    border:1px solid rgba(199,154,61,0.3);
  }
  .tfmini__ic svg{ width:22px; height:22px; }
  .tfmini b{ font-family:var(--f-display); font-weight:500; font-size:1.08rem; color:#fff; }
  .tfmini > span:last-child{ font-size:0.86rem; color:rgba(239,232,216,0.72); line-height:1.45; }

  @media (max-width:900px){
    .tfstrip__inner{ grid-template-columns:1fr; }
    .tfstrip__overlay{ background:linear-gradient(180deg, rgba(7,20,24,0.9) 0%, rgba(7,20,24,0.92) 100%); }
  }

  /* Find-your-ride CTA inside each rentals panel */
  .ridecta{
    margin-top:2.4rem; padding:1.6rem 1.8rem; border-radius:10px;
    background:var(--stone); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between; gap:1.6rem; flex-wrap:wrap;
  }
  .ridecta p{ font-size:0.98rem; color:rgba(27,35,32,0.75); max-width:56ch; }
  @media (max-width:640px){
    .ridecta{ flex-direction:column; align-items:stretch; }
    .ridecta .btn{ width:100%; text-align:center; }
  }

  /* Discreet charter line under the Modern Riviera cards */
  .riviera__note{
    margin-top:2rem; text-align:center;
    font-family:var(--f-display); font-style:italic; font-weight:300;
    font-size:1.02rem; color:rgba(239,232,216,0.7);
  }
  .riviera__note a{
    font-style:normal; color:var(--gold); text-decoration:underline;
    text-underline-offset:3px; text-decoration-thickness:1px;
  }
  .riviera__note a:hover{ color:#fff; }

  /* ==========================================================
     MOBILE OPTIMISATION
     Ordered so it overrides everything above. Targets real
     phones (≤640px) with a tablet tier (≤900px) before it.
     ========================================================== */

  /* --- Universal safety: nothing may cause sideways scroll --- */
  html, body{ overflow-x:hidden; max-width:100%; }
  img, svg, video, table{ max-width:100%; }

  /* --- Comfortable tap targets everywhere (Apple/Google min 44px) --- */
  @media (hover:none), (max-width:900px){
    .btn, .chip, .menu__link, .menu__toggle, .rent-switch button,
    .lm-tab, .subnav a, .askbot__chip, .reachcard, .tfmini{
      min-height:44px;
    }
    .btn{ padding-block:0.95em; }
    .chip{ padding:0.85em 1.2em; }
    /* hover-only reveals must be visible without a pointer */
    .tour__enq{ opacity:1 !important; transform:none !important; }
    .riviera__card:not(.is-expanded) .riviera__card-body p{ display:block; }
  }

  /* --- Tablet tier --- */
  @media (max-width:900px){
    .feature, .feature--reverse,
    .transfer-intro, .contact-lead, .boattaxi__inner,
    .roadnotes, .fleet, .rentals-feature__head{
      grid-template-columns:1fr;
    }
    .tfstrip__inner{ grid-template-columns:1fr; }
    .showband--chart .feature__content{ max-width:none; }
  }

  /* --- Phone tier --- */
  @media (max-width:640px){

    /* Type: keep headlines from towering over small screens */
    :root{ --fs-body:0.98rem; }
    h1{ font-size:clamp(2rem, 9vw, 2.8rem); line-height:1.08; }
    h2{ font-size:clamp(1.65rem, 7vw, 2.1rem); line-height:1.15; }
    h3{ font-size:1.15rem; }
    .hero__content h1{ font-size:clamp(2.1rem, 10vw, 3rem); }
    .eyebrow{ font-size:0.62rem; letter-spacing:0.16em; }

    /* Section rhythm: tighter so pages don't feel endless */
    .section{ padding-block:3.4rem; }
    .wrap{ padding-inline:1.15rem; }
    .sec-head{ margin-bottom:2rem; }

    /* Heroes: shorter, and never taller than the screen */
    .hero{ min-height:88svh; }
    .page-hero{ min-height:60svh; }
    .page-hero--short{ min-height:46svh; }
    .page-hero__meta{ gap:0.9rem 1.4rem; font-size:0.72rem; }
    .showband, .showband--chart{ min-height:auto; }

    /* Nav */
    .nav{ padding:1rem 1.15rem; }
    .nav__logo b{ font-size:1.15rem; }
    .nav__cta{ display:none; }          /* Menu button is enough on a phone */
    .menu__bar{ padding:1.1rem 1.25rem; }
    .menu__foot{ flex-direction:column; gap:0.4rem; text-align:center; }

    /* Subnav scrolls sideways instead of wrapping into a block */
    .subnav{
      display:flex; gap:1rem; overflow-x:auto; white-space:nowrap;
      padding-bottom:0.5rem; -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
    }
    .subnav::-webkit-scrollbar{ display:none; }
    .subnav .sep{ flex-shrink:0; }
    .subnav a{ flex-shrink:0; }

    /* Buttons stack full width so they're easy to hit */
    .btns, .plan-result__actions, .cta-band .btns{
      flex-direction:column; align-items:stretch; width:100%;
    }
    .btns .btn, .plan-result__actions .btn{ width:100%; text-align:center; }

    /* Cards & grids */
    .stopgrid, .dine, .perks, .practical__grid, .quick-grid,
    .attractions, .triptiles, .airports, .destgrid, .fleet__cards,
    .rentals-feature__grid, .reach, .keysflow{
      grid-template-columns:1fr !important;
    }
    .attraction--feature{ grid-column:span 1 !important; grid-row:span 1 !important; }
    .stopcard{ aspect-ratio:16/10; }
    .triptile{ aspect-ratio:4/3; }

    /* Riviera: expanded card layout is desktop-only */
    .riviera__grid{ flex-direction:column; height:auto; }
    .riviera__card, .riviera__card.is-expanded{ flex:none; aspect-ratio:4/3; }
    .riviera__detail{ padding:1.3rem; }
    .riviera__detail-inner h3{ font-size:1.4rem; }
    .riviera__note{ font-size:0.94rem; }

    /* Tables of content-ish rows */
    .tour{ grid-template-columns:auto 1fr; gap:0.8rem 1rem; }
    .tour__meta{ grid-column:1 / -1; text-align:left; margin-top:0.5rem; }
    .tour__meta b{ display:inline; margin-right:0.6rem; }
    .plan-slot{ grid-template-columns:1fr; gap:0.35rem; }
    .plan-day__title{ gap:0.6rem; }
    .plan-day__base, .plan-day__pace{ margin-left:0; }
    .roadnote, .boattaxi__points li, .transfer-intro__list li,
    .contact-lead__points li{ grid-template-columns:auto 1fr; gap:0.9rem; }

    /* Floating widgets: smaller and clear of the thumb zone */
    .askbot{ right:0.9rem; bottom:0.9rem; }
    .notes{ left:0.9rem; bottom:0.9rem; }
    .askbot__panel{
      width:calc(100vw - 1.5rem); max-height:70svh; right:0; bottom:0;
    }
    .askbot__fab, .notes__fab{ padding:0.8em; }
    .askbot__fab span, .notes__fab span{ display:none; }
    .notes__pad{ width:calc(100vw - 1.8rem); }

    /* Intro animations: lighter so they don't stutter on a phone */
    .boatintro__caption h2, .roadintro__caption h2, .tfintro__caption h2{ font-size:1.8rem; }
    .boatintro__boat{ width:190px; }
    .roadintro__map{ width:96vw; }
    .tfintro__van, .tfintro__runner{ width:130px; }
    .tfintro__place--airport{ width:36vw; }
    .tfintro__place--hotel{ width:38vw; }

    /* Decorative extras that cost more than they give on a phone */
    .chartsail, .scrollcue, .hero__scroll, .marquee{ display:none; }
    .cta-band__waves{ opacity:0.3; }
    body::after{ display:none; }         /* film grain off — saves paint cost */

    /* Footer */
    .footer__top{ grid-template-columns:1fr; gap:2rem; }
    .footer__bottom{ flex-direction:column; align-items:flex-start; gap:0.6rem; text-align:left; }

    /* Forms & panels */
    .ctapanel{ grid-template-columns:1fr; padding:1.5rem; }
    .simplecta{ flex-direction:column; align-items:stretch; }
    .simplecta .btn{ width:100%; text-align:center; }
    .ridecta{ flex-direction:column; align-items:stretch; }
    .ridecta .btn{ width:100%; text-align:center; }
    .planner__q{ flex-wrap:wrap; gap:0.5rem; }
    .planner__hint{ margin-left:0; width:100%; }
  }

  /* --- Very small phones --- */
  @media (max-width:380px){
    .wrap{ padding-inline:1rem; }
    h1{ font-size:1.9rem; }
    h2{ font-size:1.5rem; }
    .menu__label{ font-size:1.15rem; }
    .reachcard__body b{ font-size:1.1rem; }
  }

  /* --- Landscape phones: heroes must not eat the whole screen --- */
  @media (max-height:520px) and (orientation:landscape){
    .hero{ min-height:100svh; }
    .page-hero{ min-height:82svh; }
    .menu__body{ justify-content:flex-start; }
    .menu__label{ font-size:1.1rem; }
    .menu__item{ padding-block:0.5rem; }
  }

  /* Charter line beneath the Modern Riviera cards */
  .charternote{
    margin-top:2.6rem; display:flex; align-items:center; gap:1.6rem;
  }
  .charternote__rule{
    flex:1; height:1px; min-width:24px;
    background:linear-gradient(90deg, transparent, rgba(199,154,61,0.45), transparent);
  }
  .charternote p{
    flex:0 1 auto; max-width:64ch; text-align:center;
    font-family:var(--f-display); font-style:italic; font-weight:300;
    font-size:1.04rem; line-height:1.6; color:rgba(239,232,216,0.76);
  }
  .charternote a{
    font-style:normal; color:var(--gold);
    text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
    transition:color .25s ease;
  }
  .charternote a:hover{ color:#fff; }
  @media (max-width:900px){
    .charternote{ gap:1rem; }
    .charternote__rule{ display:none; }
    .charternote p{ text-align:left; font-size:0.98rem; }
  }

  /* ==========================================================
     ABOUT ME (contact page)
     ========================================================== */
  .aboutme__inner{
    display:grid; grid-template-columns:0.8fr 1.2fr;
    gap:clamp(2rem,5vw,4rem); align-items:center;
  }
  .aboutme__media{ position:relative; border-radius:10px; overflow:hidden; }
  .aboutme__media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; display:block; }
  .aboutme__coords{
    position:absolute; left:0; right:0; bottom:0; padding:2rem 1.2rem 1rem;
    font-family:var(--f-mono); font-size:0.64rem; letter-spacing:0.14em;
    color:rgba(239,232,216,0.9);
    background:linear-gradient(0deg, rgba(8,25,29,0.8), transparent);
  }
  .aboutme__text .eyebrow{ color:var(--terracotta); margin-bottom:1rem; }
  .aboutme__text h2{ margin-bottom:1.2rem; }
  .aboutme__text p{ color:rgba(27,35,32,0.75); margin-bottom:1rem; max-width:58ch; line-height:1.7; }
  .aboutme__sign{
    margin-top:1.6rem !important; padding-top:1.2rem; border-top:1px solid var(--line);
    font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--terracotta) !important;
  }
  @media (max-width:860px){
    .aboutme__inner{ grid-template-columns:1fr; }
    .aboutme__media{ max-width:340px; }
    .aboutme__media img{ aspect-ratio:16/10; }
  }

  .page-hero__cta{ margin-top:1.8rem; }
  @media (max-width:640px){ .page-hero__cta .btn{ width:100%; text-align:center; } }

  /* ==========================================================
     PHONE MENU — larger, roomier, thumb-friendly
     ========================================================== */
  @media (max-width:640px){
    .menu{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
    .menu__body{
      display:block;
      padding:0.5rem 1.25rem calc(2rem + env(safe-area-inset-bottom));
      max-width:none;
    }
    .menu__links{ display:block; }

    .menu__link,
    .menu__toggle{
      align-items:center;
      gap:1.1rem;
      padding:1.15rem 0.2rem;          /* ~62px tall — easy to hit */
      min-height:62px;
    }
    .menu__num{
      font-size:0.68rem; opacity:0.75;
      min-width:1.7em;                 /* numbers line up in a neat column */
    }
    .menu__label{
      font-size:1.85rem;               /* the ask: noticeably bigger */
      line-height:1.15;
      letter-spacing:-0.01em;
    }
    /* no hover on touch — show the active state on press instead */
    .menu__link:active .menu__label,
    .menu__toggle:active .menu__label{ color:#fff; transform:translateX(4px); }
    .menu__toggle .chev{ font-size:1.3rem; }

    /* submenu items get proper size too */
    .menu__item.is-expanded .submenu{ max-height:280px; }
    .submenu__inner{ padding-block:0.4rem 0.9rem; }
    .submenu a{
      font-size:1.02rem; padding-block:0.85rem; min-height:48px;
      display:flex; align-items:center; gap:0.9rem;
    }
    .submenu a .veh{ width:38px; }

    .menu__bar .nav__logo b{ font-size:1.25rem; }
    .menu-close{ font-size:0.72rem; padding:0.4rem; }
    .menu__foot{
      padding:1.4rem 1.25rem calc(1.4rem + env(safe-area-inset-bottom));
      font-size:0.72rem;
    }
  }

  /* Small phones: keep it large but let all eight items breathe */
  @media (max-width:380px){
    .menu__label{ font-size:1.6rem; }
    .menu__link, .menu__toggle{ padding:1rem 0.2rem; min-height:56px; }
  }

  /* Landscape phone: shrink so the whole menu still fits */
  @media (max-height:520px) and (orientation:landscape){
    .menu__label{ font-size:1.25rem; }
    .menu__link, .menu__toggle{ padding:0.7rem 0.2rem; min-height:46px; }
  }