:root{
    --ink:#241A12;
    --bark:#3E2C1E;
    --sand:#F6EEDF;
    --paper:#FBF6EC;
    --wine:#3D0F16;
    --wine-light:#5A1B23;
    --gold:#C9A24E;
    --line: rgba(36,26,18,0.12);
    --max: 1180px;
    --nav-h: 84px;
    --banner-h: 36px;
    --ease-out: cubic-bezier(.16,1,.3,1);
    --ease-hover: cubic-bezier(.4,0,.2,1);

    /* ---- type scale: fixed UI steps ---- */
    --fs-2xs: 11px;
    --fs-xs:  12px;
    --fs-sm:  13.5px;
    --fs-base:14.5px;
    --fs-md:  15px;
    --fs-lg:  17px;
    --fs-xl:  21px;
    --fs-2xl: 24px;

    /* ---- type scale: fluid display steps, one shared slope ---- */
    --fs-h4: clamp(20px, 0.9vw + 13px, 24px);
    --fs-h3: clamp(24px, 1.5vw + 14px, 32px);
    --fs-h2: clamp(30px, 2.1vw + 12px, 42px);
    --fs-h1: clamp(32px, 2.6vw + 12px, 48px);
    --fs-display: clamp(44px, 6vw + 8px, 94px);

    /* ---- vertical rhythm: leading tightens as size grows ---- */
    --lh-display: 0.98;
    --lh-heading: 1.08;
    --lh-title:   1.22;
    --lh-lede:    1.34;
    --lh-body:    1.6;

    /* ---- tracking: optical, size-aware ---- */
    --tr-display: -0.03em;
    --tr-heading: -0.022em;
    --tr-title:   -0.012em;
    --tr-eyebrow: 0.16em;

  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Karla', sans-serif;
    font-size:var(--fs-lg);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  body.menu-open, body.lightbox-open{ overflow:hidden; }
  h1,h2,h3,h4,.display{
    font-family:'Fraunces', serif;
    font-weight:500;
    line-height:var(--lh-heading);
    letter-spacing:var(--tr-heading);
    text-wrap:balance;
    margin:0;
  }
  /* the largest display type wants the tightest optical fit */
  .hero h1{ letter-spacing:var(--tr-display); line-height:var(--lh-display); }
  /* small headings need their leading back, or they set solid */
  h4, .exp-tile h4, .strip-head h3, .where-row dt{
    line-height:var(--lh-title); letter-spacing:var(--tr-title);
  }
  a{color:inherit;}
  img{max-width:100%;height:auto;display:block;}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
  .eyebrow{
    font-family:'Karla',sans-serif;
    text-transform:uppercase;
    letter-spacing:var(--tr-eyebrow);
    font-size:var(--fs-xs);
    font-weight:700;
    color:var(--wine);
  }
  :focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

  /* TOP MARQUEE BANNER */
  .ticker-wrap{
    position:fixed; top:0; left:0; right:0; z-index:140;
    height:var(--banner-h); overflow:hidden;
    background:var(--wine); color:var(--gold);
    display:flex; align-items:center;
    font-size:var(--fs-2xs); font-weight:700; letter-spacing:0.18em;
    text-transform:uppercase; border-bottom:1px solid rgba(201,162,78,0.25);
  }
  .ticker-move{
    display:inline-flex; white-space:nowrap;
    animation:ticker 42s linear infinite;
  }
  .ticker-wrap:hover .ticker-move{ animation-play-state:paused; }
  @keyframes ticker{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(-50%); }
  }

  .rosette-field{
    position:absolute; inset:0; pointer-events:none; opacity:0.05;
    background-image:
      radial-gradient(circle at 2px 2px, var(--wine) 1.4px, transparent 1.6px),
      radial-gradient(circle at 22px 14px, var(--wine) 1.1px, transparent 1.3px),
      radial-gradient(circle at 12px 28px, var(--wine) 1.1px, transparent 1.3px);
    background-size: 44px 44px;
  }

  /* NAV */
  nav{
    position:fixed; top:var(--banner-h); left:0; right:0; z-index:130;
    height:var(--nav-h);
    display:flex; align-items:center;
    background:rgba(61,15,22,0.28);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    border-bottom:1px solid rgba(201,162,78,0.22);
    transition: background .5s var(--ease-out), box-shadow .5s var(--ease-out), height .4s var(--ease-out), border-color .5s var(--ease-out);
  }
  nav.nav-solid{
    background:rgba(251,246,236,0.82);
    backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    box-shadow:0 8px 24px -12px rgba(36,26,18,0.25);
    border-bottom-color:rgba(36,26,18,0.1);
    height:72px;
  }
  nav .wrap{ display:flex; align-items:center; justify-content:space-between; width:100%; }
  .brand{
    display:flex; align-items:center; gap:14px;
    font-family:'Fraunces', serif; font-weight:600; font-size:var(--fs-xl);
    text-decoration:none; color:#fff;
    transition:color .45s var(--ease-out);
  }
  nav.nav-solid .brand{ color:var(--ink); }
  .brand .mark-ring{
    width:52px; height:52px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--wine);
    box-shadow:0 4px 14px rgba(36,26,18,0.3), 0 0 0 1px rgba(201,162,78,0.35);
    flex-shrink:0; overflow:hidden;
    transition:transform .4s var(--ease-hover);
  }
  .brand:hover .mark-ring{ transform:rotate(-6deg) scale(1.06); }
  .brand .mark-ring img{ width:120%; height:120%; object-fit:cover; object-position:center 42%; }
  .brand-text{display:flex; flex-direction:column; line-height:1.05;}
  .brand-text .sub{
    font-family:'Karla',sans-serif; font-weight:600; font-size:var(--fs-2xs);
    letter-spacing:0.14em; text-transform:uppercase; opacity:0.7; margin-top:3px;
  }
  .navlinks{display:flex; gap:30px; font-size:var(--fs-base); font-weight:600; align-items:center;}
  .navlinks a{
    text-decoration:none; opacity:0.82; color:#fff; position:relative; padding-bottom:4px;
    transition:opacity .25s var(--ease-hover), color .4s var(--ease-out);
  }
  nav.nav-solid .navlinks a{ color:var(--ink); }
  .navlinks a::after{
    content:''; position:absolute; left:0; bottom:0; height:1.5px; width:0%;
    background:var(--gold); transition:width .3s var(--ease-hover);
  }
  .navlinks a:hover{opacity:1;}
  .navlinks a:hover::after, .navlinks a.active::after{ width:100%; }
  .nav-cta{
    background:var(--gold); color:var(--wine); padding:11px 22px;
    border-radius:999px; font-size:var(--fs-sm); font-weight:700; text-decoration:none;
    white-space:nowrap; transition:transform .25s var(--ease-hover), box-shadow .25s var(--ease-hover); border:none; cursor:pointer;
    font-family:'Karla',sans-serif;
  }
  .nav-cta:hover{ transform:translateY(-3px); box-shadow:0 10px 22px rgba(201,162,78,0.35); }

  /* MOBILE MENU */
  .burger{
    display:none; background:none; border:none; cursor:pointer; padding:8px;
    width:44px; height:44px; position:relative; z-index:130;
  }
  .burger span{
    display:block; height:2px; width:24px; background:#fff; margin:5px auto;
    transition:transform .35s var(--ease-hover), opacity .25s var(--ease-hover), background .45s var(--ease-out);
  }
  nav.nav-solid .burger span{ background:var(--ink); }
  body.menu-open nav{
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border-bottom-color:transparent !important;
    box-shadow:none !important;
  }
  body.menu-open .brand{ color:var(--sand) !important; }
  body.menu-open .burger span{ background:var(--sand); }
  body.menu-open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.menu-open .burger span:nth-child(2){ opacity:0; }
  body.menu-open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .mobile-menu{
    position:fixed; top:calc(var(--banner-h) + var(--nav-h)); left:0; right:0; bottom:0;
    z-index:120; background:var(--wine); color:var(--sand);
    display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
    padding:0 40px; gap:6px; overflow-y:auto;
    clip-path:circle(0% at calc(100% - 44px) 44px);
    transition:clip-path .6s cubic-bezier(.7,0,.3,1);
    pointer-events:none;
  }
  body.menu-open .mobile-menu{ clip-path:circle(150% at calc(100% - 44px) 44px); pointer-events:auto; }
  .mobile-menu a{
    font-family:'Fraunces',serif; font-size:var(--fs-h2); text-decoration:none;
    padding:10px 0; opacity:0; transform:translateY(18px);
    transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);
  }
  body.menu-open .mobile-menu a{ opacity:1; transform:translateY(0); }
  body.menu-open .mobile-menu a:nth-child(1){ transition-delay:.15s; }
  body.menu-open .mobile-menu a:nth-child(2){ transition-delay:.21s; }
  body.menu-open .mobile-menu a:nth-child(3){ transition-delay:.27s; }
  body.menu-open .mobile-menu a:nth-child(4){ transition-delay:.33s; }
  body.menu-open .mobile-menu a:nth-child(5){ transition-delay:.39s; }
  .mm-close{
    margin-top:34px; display:inline-flex; align-items:center; gap:9px;
    background:transparent; border:1px solid rgba(201,162,78,0.5);
    color:var(--gold); font-family:'Karla',sans-serif; font-weight:700;
    font-size:var(--fs-xs); letter-spacing:0.14em; text-transform:uppercase;
    padding:12px 22px; border-radius:999px; cursor:pointer;
    opacity:0; transform:translateY(14px);
    transition:opacity .55s var(--ease-out) .46s, transform .55s var(--ease-out) .46s, background .25s var(--ease-hover);
  }
  body.menu-open .mm-close{ opacity:1; transform:translateY(0); }
  .mm-close:hover{ background:rgba(201,162,78,0.14); }
  .mm-close svg{ width:15px; height:15px; }
  .mobile-menu .mm-foot{
    margin-top:32px; font-family:'Karla',sans-serif; font-size:var(--fs-sm); letter-spacing:0.12em;
    text-transform:uppercase; color:var(--gold); opacity:0; transition:opacity .55s var(--ease-out) .5s;
  }
  body.menu-open .mobile-menu .mm-foot{ opacity:1; }
  @media (max-width:820px){
    .navlinks{display:none;}
    .burger{display:block;}
    .nav-cta{display:none;}
  }

  /* HERO */
  .hero{
    position:relative; min-height:100vh; display:flex; align-items:flex-end;
    color:#fff; overflow:hidden; padding-top:var(--banner-h);
  }
  .hero-media{
    position:absolute; inset:0; width:100%; height:118%; top:-9%;
    will-change:transform;
    transform-origin:center;
    animation: heroZoom 2.2s cubic-bezier(.2,.7,.2,1) both;
  }
  @keyframes heroZoom{ from{ transform:scale(1.12); } to{ transform:scale(1); } }
  .hero-media img{ width:100%; height:100%; object-fit:cover; }
  /* left scrim: keeps the eyebrow and headline legible over bright frames */
  .hero::before{
    content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(90deg, rgba(61,15,22,0.52) 0%, rgba(61,15,22,0.30) 30%, rgba(61,15,22,0) 62%);
  }
  .hero::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(61,15,22,0.22) 0%, rgba(61,15,22,0.05) 35%, rgba(61,15,22,0.88) 100%);
  }
  .hero-inner{position:relative; z-index:2; padding-bottom:100px; width:100%;}
  .hero .eyebrow{color:var(--gold); text-shadow:0 1px 14px rgba(0,0,0,0.6);}
  .hero h1{ font-size:var(--fs-display); line-height:0.98; margin-top:14px; max-width:14ch; }
  .hero p{ max-width:46ch; margin-top:20px; font-size:var(--fs-lg); color:rgba(255,255,255,0.88); }
  .hero-branches{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
  .hero-branches a{
    text-decoration:none; color:#fff; font-weight:700; font-size:var(--fs-base);
    border:1px solid rgba(255,255,255,0.5); padding:12px 22px; border-radius:999px;
    transition: background .25s var(--ease-hover), border-color .25s var(--ease-hover), transform .25s var(--ease-hover);
  }
  .hero-branches a:hover{background:rgba(255,255,255,0.14); border-color:#fff; transform:translateY(-3px);}

  /* cinematic entrance */
  .rise{ opacity:0; transform:translateY(22px); animation:riseIn 1s var(--ease-out) both; }
  .rise-1{ animation-delay:.3s; }
  .rise-2{ animation-delay:.45s; }
  .rise-3{ animation-delay:.6s; }
  .rise-4{ animation-delay:.75s; }
  @keyframes riseIn{ to{ opacity:1; transform:translateY(0); } }

  .scroll-cue{
    position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px;
    color:rgba(255,255,255,0.75); font-size:var(--fs-2xs); letter-spacing:0.14em; text-transform:uppercase;
    z-index:2; animation:cueFloat 2.4s ease-in-out infinite 1.4s;
  }
  .scroll-cue svg{width:14px;height:20px;}
  @keyframes cueFloat{
    0%,100%{ transform:translateX(-50%) translateY(0); opacity:0.75;}
    50%{ transform:translateX(-50%) translateY(8px); opacity:1;}
  }

  section{padding:120px 0; position:relative;}
  .section-head{max-width:640px; margin-bottom:56px;}
  .section-head h2{font-size:var(--fs-h1); margin-top:12px;}
  .section-head p{margin-top:16px; color:var(--bark); opacity:0.85;}
  /* a quieter header: one short heading, no subtitle (homepage experiences) */
  .section-head-compact{ margin-bottom:32px; }
  .section-head-compact h2{ font-size:var(--fs-h3); margin-top:0; }

  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
  .reveal.in-view{ opacity:1; transform:translateY(0); }
  .reveal-delay-1.in-view{ transition-delay:.1s; }
  .reveal-delay-2.in-view{ transition-delay:.2s; }
  .reveal-delay-3.in-view{ transition-delay:.3s; }

  /* ---------- VILLA CARDS (replaced the intro, 2026-10-06) ----------
     Built from Dinura's reference card, using only long-supported CSS so it looks the
     same on every phone: px sizes, flexbox, a square photo made with padding-bottom,
     and a fade made from a plain colour + mask (no cqw, color-mix or aspect-ratio).
     Where a phone can't blur (backdrop-filter), the photo simply fades without it.
     Each slide carries its own tint (data-tint); the card fades to it. */
  .trips{ padding:64px 0; position:relative; }
  .trips-row{ display:flex; flex-wrap:wrap; justify-content:center; margin-bottom:-40px; }
  .trip{ display:flex; flex-direction:column; width:320px; max-width:100%; margin:0 24px 40px; }
  .trip-card{
    position:relative; flex:1 0 auto;
    display:flex; flex-direction:column;
    overflow:hidden; border-radius:38px;
    -webkit-transform:translateZ(0); transform:translateZ(0); /* Safari: clip the swipe area to the corners */
    background-color:var(--tint);
    box-shadow:0 22px 44px -30px rgba(36,26,18,0.45);
    transition:background-color .6s var(--ease-out);
  }
  /* the photo: a square, swiped natively with scroll-snap (works with no JS) */
  .trip-photo{ position:relative; height:0; padding-bottom:100%; }
  .trip-slides, .trip-blur, .trip-tint{ position:absolute; top:0; left:0; width:100%; height:100%; }
  .trip-slides{
    z-index:0;
    display:flex; overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    -ms-scroll-snap-type:x mandatory; scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .trip-slides::-webkit-scrollbar{ display:none; }
  .trip-slides:focus-visible{ outline:2px solid var(--gold); outline-offset:-6px; border-radius:38px 38px 0 0; }
  .trip-img{
    flex:0 0 100%; width:100%; height:100%; object-fit:cover;
    scroll-snap-align:start; scroll-snap-stop:always;
  }
  /* the bottom of the photo melts into the card: a soft blur, then the tint colour */
  .trip-blur{
    z-index:1; pointer-events:none;
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    -webkit-mask-image:linear-gradient(to bottom, transparent 62%, #000 86%);
    mask-image:linear-gradient(to bottom, transparent 62%, #000 86%);
  }
  .trip-tint{
    z-index:2; pointer-events:none;
    background-color:var(--tint);
    -webkit-mask-image:linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.45) 74%, rgba(0,0,0,0.82) 88%, #000 100%);
    mask-image:linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.45) 74%, rgba(0,0,0,0.82) 88%, #000 100%);
    transition:background-color .6s var(--ease-out);
  }
  /* the text sits over the faded bottom of the photo, then on the tint; swipes on the
     text pass through to the photos, only the buttons take taps */
  .trip-body{
    position:relative; z-index:3; flex:1 0 auto;
    display:flex; flex-direction:column;
    margin-top:-80px; padding:0 18px 18px;
    color:#fff; pointer-events:none;
  }
  .trip-body button{ pointer-events:auto; }
  .trip-dots{ display:flex; justify-content:center; margin-bottom:15px; }
  /* tiny dot, 24px tap area */
  .trip-dots button{
    width:24px; height:24px; padding:0; margin:0 -6px; border:0; background:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent;
  }
  .trip-dots button::before{
    content:''; display:block; width:5px; height:5px; border-radius:50%;
    background:rgba(255,255,255,0.4);
    transition:background-color .3s var(--ease-hover);
  }
  .trip-dots button.on::before{ background:#fff; }
  .trip-title{
    font-family:'Karla',sans-serif; font-weight:700;
    font-size:23px; line-height:1.15; letter-spacing:-0.01em;
    color:#fff;
  }
  .trip-desc{
    margin-top:9px;
    font-size:13px; line-height:1.45;
    color:rgba(255,255,255,0.82);
  }
  /* tags + button sit on the bottom, so both cards line up */
  .trip-tags{ display:flex; flex-wrap:wrap; margin:auto 0 0; padding:15px 0 0; list-style:none; }
  .trip-tag{
    display:inline-block; height:24px; line-height:24px; padding:0 11px; margin:0 7px 0 0;
    border-radius:999px;
    background:rgba(255,255,255,0.14);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.16);
    font-family:'Karla',sans-serif; font-weight:600; font-size:11px; letter-spacing:0.01em;
    color:#fff; white-space:nowrap;
  }
  /* a quiet glass button, so the two cards don't out-shout the hero */
  .trip-reserve{
    margin-top:15px;
    height:46px; width:100%;
    border:0; border-radius:999px;
    background:rgba(255,255,255,0.14); color:#fff;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.34);
    font-family:'Karla',sans-serif; font-weight:600; font-size:13.5px;
    cursor:pointer;
    -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent;
    transition:background-color .25s var(--ease-hover), color .25s var(--ease-hover), transform .25s var(--ease-hover);
  }
  .trip-reserve:active{ transform:scale(0.98); }
  .trip-reserve:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
  /* hover only where there's a real pointer, so a tap doesn't leave it stuck white */
  @media (hover:hover){
    .trip-reserve:hover{ background:#fff; color:var(--ink); }
    .trip-dots button:hover::before{ background:rgba(255,255,255,0.75); }
  }
  @media (max-width:520px){
    .trips-row{ margin-bottom:-28px; }
    .trip{ width:86vw; max-width:340px; margin:0 0 28px; }
  }

  .divider{ display:flex; align-items:center; justify-content:center; gap:14px; padding:0 0 8px; color:var(--gold); }
  .divider svg{ width:22px; height:22px; opacity:0.85; }
  .divider .rule{ height:1px; width:64px; background:linear-gradient(90deg, transparent, var(--line)); }
  .divider .rule.right{ background:linear-gradient(90deg, var(--line), transparent); }

  .branch{border-top:1px solid var(--line); overflow:hidden;}
  .branch-alt{background:var(--sand);}
  .branch-tag{
    display:inline-flex; align-items:center; gap:8px;
    font-size:var(--fs-xs); font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--gold); margin-bottom:10px;
  }
  .branch-tag.tag-wine{color:var(--wine);}
  .branch-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center; }
  .branch-grid.reverse .branch-copy{order:2;}
  .branch-grid.reverse .branch-visual{order:1;}
  @media (max-width:900px){
    .branch-grid, .branch-grid.reverse{grid-template-columns:1fr;}
    .branch-grid.reverse .branch-copy{order:1;}
    .branch-grid.reverse .branch-visual{order:2;}
  }
  .branch-seal{
    width:64px; height:64px; border-radius:50%; margin-bottom:18px;
    object-fit:cover; object-position:center 40%;
    box-shadow:0 6px 18px rgba(36,26,18,0.25);
  }
  .branch-copy h3{font-size:var(--fs-h2);}
  .branch-copy p{margin-top:16px; color:var(--bark); max-width:48ch;}
  /* homepage villa sections: one column, the villa photos between the heading and
     the text. The photos keep their size and overlap; the gap below them leaves room
     for the small photo that hangs off the bottom corner. */
  .branch-grid-stack{ display:block; max-width:760px; }
  .branch-media{ min-width:0; max-width:480px; margin:28px 0 0; }
  .branch-media .branch-visual{ margin:0 0 64px; }  /* room for the small photo hanging off the corner */
  @media (max-width:900px){ .branch-media{ margin-top:24px; } .branch-media .branch-visual{ margin-bottom:44px; } }
  /* the villa's other photos: small, in a row you swipe (or drag with a mouse); tap one
     to open it large. The faded right edge says there are more. No pinning, no arrows. */
  .villa-thumbs{
    display:flex; gap:10px; overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; overscroll-behavior-x:contain;
    scrollbar-width:none; padding-bottom:2px; cursor:grab;
    -webkit-mask-image:linear-gradient(to right, #000 84%, transparent);
    mask-image:linear-gradient(to right, #000 84%, transparent);
  }
  .villa-thumbs::-webkit-scrollbar{ display:none; }
  .villa-thumbs.dragging{ cursor:grabbing; scroll-snap-type:none; }
  .villa-thumbs:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:12px; }
  .villa-thumb{
    flex:0 0 108px; width:108px; height:144px; max-width:none; object-fit:cover;
    border-radius:12px; scroll-snap-align:start; cursor:zoom-in;
    -webkit-user-drag:none; user-select:none; transition:opacity .25s var(--ease-hover);
  }
  @media (hover:hover){ .villa-thumb:hover{ opacity:0.85; } }
  @media (max-width:640px){ .villa-thumb{ flex-basis:96px; width:96px; height:128px; } }
  /* arrows at each end of the row, on computers only (touch screens just swipe);
     each one hides when the row is already at that end */
  .villa-thumbs-wrap{ position:relative; }
  .thumbs-arrow{ display:none; }
  @media (hover:hover) and (pointer:fine){
    .thumbs-arrow{
      position:absolute; top:50%; margin-top:-18px; z-index:1;
      width:36px; height:36px; padding:0; border:0; border-radius:50%; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      color:var(--wine); background:var(--paper);
      box-shadow:0 0 0 1px var(--line), 0 6px 16px -6px rgba(36,26,18,0.35);
      transition:opacity .25s var(--ease-hover), transform .25s var(--ease-hover);
    }
    .thumbs-arrow svg{ width:16px; height:16px; }
    .thumbs-arrow.prev{ left:8px; }
    .thumbs-arrow.next{ right:8px; }
    .thumbs-arrow:hover{ transform:scale(1.08); }
    .thumbs-arrow:disabled{ opacity:0; pointer-events:none; }
  }
  /* desktop: the title runs across the top, then the photos on the left with the
     text beside them, so the section uses the width instead of half of it */
  @media (min-width:901px){
    .branch-grid-stack{ max-width:none; }
    .branch-grid-stack .branch-copy{
      display:grid; grid-template-columns:minmax(0, 480px) minmax(0, 1fr);
      column-gap:88px; align-items:center;
    }
    .branch-grid-stack .branch-copy > .branch-seal,
    .branch-grid-stack .branch-copy > .branch-tag,
    .branch-grid-stack .branch-copy > .villa-sign,
    .branch-grid-stack .branch-copy > .branch-head,
    .branch-grid-stack .branch-copy > h2,
    .branch-grid-stack .branch-copy > h3{ grid-column:1 / -1; justify-self:start; }
    .branch-grid-stack .branch-copy .branch-media{ width:100%; margin:28px 0 0; }
    .branch-grid-stack .branch-copy > .villa-more{ grid-column:1 / -1; }
  }
  .amenity-list{ list-style:none; padding:0; margin:26px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; }
  .amenity-list li{font-size:var(--fs-base); display:flex; align-items:center; gap:8px;}
  .amenity-list li::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--wine); flex-shrink:0;}
  .branch-cta{
    margin-top:32px; display:inline-flex; align-items:center; gap:10px;
    background:var(--wine); color:#fff; text-decoration:none; border:none; cursor:pointer;
    padding:14px 26px; border-radius:999px; font-weight:700; font-size:var(--fs-base);
    font-family:'Karla',sans-serif;
    transition:transform .25s var(--ease-hover), box-shadow .25s var(--ease-hover);
  }
  .branch-cta:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(61,15,22,0.3); }

  .branch-visual{position:relative;}
  .visual-main{border-radius:6px; overflow:hidden; box-shadow:0 30px 60px -20px rgba(36,26,18,0.35); cursor:zoom-in;}
  .visual-main img{aspect-ratio:4/5; object-fit:cover; transition:transform .7s var(--ease-out);}
  .visual-main:hover img{ transform:scale(1.05); }
  .visual-float{
    position:absolute; width:52%; bottom:-38px; right:-38px;
    border-radius:6px; overflow:hidden; border:6px solid var(--paper);
    box-shadow:0 20px 40px -12px rgba(36,26,18,0.35);
    transition:transform .4s var(--ease-hover); cursor:zoom-in;
  }
  .visual-float:hover{ transform:translateY(-6px); }
  .branch-alt .visual-float{border-color:var(--sand);}
  .visual-float img{aspect-ratio:1/1; object-fit:cover;}
  @media (max-width:900px){ .visual-float{width:46%; bottom:-24px; right:-16px;} }

  /* GALLERY */
  .strip{padding:0 0 120px;}
  .strip-head{
    max-width:var(--max); margin:0 auto 20px; padding:0 32px;
    display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  }
  .strip-head .eyebrow{ margin-bottom:6px; }
  .strip-head h3{ font-size:var(--fs-h3); }
  .strip-nav{ display:flex; gap:10px; }
  .strip-nav button{
    width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
    background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:background .25s var(--ease-hover), border-color .25s var(--ease-hover), transform .25s var(--ease-hover);
    color:var(--wine);
  }
  .strip-nav button:hover{ background:var(--wine); color:#fff; border-color:var(--wine); transform:translateY(-3px); }
  .strip-nav svg{ width:16px; height:16px; }
  .strip-track{
    display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px,1fr);
    gap:14px; overflow-x:auto; padding:0 32px 12px;
    scroll-snap-type:x proximity; scroll-behavior:smooth;
    cursor:grab;
  }
  .strip-track.dragging{ cursor:grabbing; scroll-behavior:auto; scroll-snap-type:none; }
  .strip-track img{
    aspect-ratio:3/4; object-fit:cover; border-radius:4px; scroll-snap-align:start;
    transition:transform .45s var(--ease-out), filter .45s var(--ease-out); cursor:zoom-in;
    -webkit-user-drag:none; user-select:none;
  }
  .strip-track img:hover{ transform:scale(1.03); filter:brightness(1.05); }
  .strip-track::-webkit-scrollbar{height:6px;}
  .strip-track::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px;}

  /* LIGHTBOX */
  .lightbox{
    position:fixed; inset:0; z-index:200; background:rgba(24,8,11,0.94);
    display:flex; align-items:center; justify-content:center; padding:40px 20px;
    opacity:0; pointer-events:none; transition:opacity .4s var(--ease-out);
    backdrop-filter:blur(4px);
  }
  .lightbox.open{ opacity:1; pointer-events:auto; }
  .lightbox img{
    max-width:100%; max-height:82vh; border-radius:4px;
    box-shadow:0 30px 80px rgba(0,0,0,0.5);
    transform:scale(.94); transition:transform .4s var(--ease-out);
  }
  .lightbox.open img{ transform:scale(1); }
  .lb-btn{
    position:absolute; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.25);
    color:#fff; width:48px; height:48px; border-radius:50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .25s var(--ease-hover), transform .25s var(--ease-hover);
  }
  .lb-btn:hover{ background:rgba(255,255,255,0.22); transform:scale(1.06); }
  .lb-btn svg{ width:18px; height:18px; }
  .lb-close{ top:24px; right:24px; }
  .lb-prev{ left:24px; top:50%; transform:translateY(-50%); }
  .lb-next{ right:24px; top:50%; transform:translateY(-50%); }
  .lb-prev:hover, .lb-next:hover{ transform:translateY(-50%) scale(1.06); }
  .lb-counter{
    position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
    color:rgba(255,255,255,0.7); font-size:var(--fs-sm); letter-spacing:0.14em;
  }
  @media (max-width:600px){
    .lb-prev{ left:10px; } .lb-next{ right:10px; }
  }

  .placeholder-visual{
    aspect-ratio:4/5; border-radius:6px; border:1.5px dashed rgba(61,15,22,0.3);
    background:repeating-linear-gradient(135deg, rgba(61,15,22,0.05) 0 12px, transparent 12px 24px);
    display:flex; align-items:center; justify-content:center; text-align:center; padding:32px;
  }
  .placeholder-visual span{font-size:var(--fs-sm); font-weight:600; color:var(--bark); opacity:0.6; max-width:22ch;}

  .excursions{background:var(--wine); color:var(--sand); position:relative; overflow:hidden;}
  .excursions .rosette-field{ opacity:0.06; filter:invert(1); }
  .excursions .eyebrow{color:var(--gold);}
  .excursions .section-head p{color:rgba(246,238,223,0.75);}
  .ex-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; position:relative; z-index:1;}
  .ex-card{border-radius:6px; overflow:hidden; position:relative; cursor:zoom-in;}
  .ex-card img{aspect-ratio:5/4; object-fit:cover; transition:transform .65s var(--ease-out);}
  .ex-card:hover img{transform:scale(1.06);}
  .ex-card-label{
    position:absolute; left:0; right:0; bottom:0; padding:20px;
    background:linear-gradient(0deg, rgba(0,0,0,0.7), transparent);
    font-family:'Fraunces',serif; font-size:var(--fs-xl); color:#fff;
  }
  @media (max-width:700px){ .ex-grid{grid-template-columns:1fr;} }

  /* WHAT WE HANDLE */
  .handled{ background:var(--wine); color:var(--sand); position:relative; overflow:hidden; }
  .handled .eyebrow{ color:var(--gold); }
  .handled h2{ color:#fff; }
  .handled .section-head p{ color:rgba(246,238,223,0.78); }
  .handled-list{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:40px 32px; position:relative; z-index:1;
  }
  .handled-item dt{
    font-size:var(--fs-xs); font-weight:700; letter-spacing:var(--tr-eyebrow);
    text-transform:uppercase; color:var(--gold); margin-bottom:8px;
  }
  .handled-item dd{ margin:0; color:rgba(246,238,223,0.78); font-size:var(--fs-md); line-height:1.6; }

  /* EXPERIENCES */
  .exp-section{ border-top:1px solid var(--line); }
  .exp-section.alt{ background:var(--sand); }
  .exp-lead{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center; }
  .exp-lead.reverse .exp-copy{ order:2; }
  .exp-lead.reverse .exp-visual{ order:1; }
  .exp-copy h3{ font-size:var(--fs-h2); }
  .exp-copy p{ margin-top:16px; color:var(--bark); max-width:46ch; }
  .exp-includes{
    list-style:none; padding:0; margin:24px 0 0;
    display:grid; grid-template-columns:1fr 1fr; gap:8px 24px;
  }
  .exp-includes li{ font-size:var(--fs-base); display:flex; align-items:center; gap:8px; }
  .exp-includes li::before{
    content:''; width:5px; height:5px; border-radius:50%;
    background:var(--gold); flex-shrink:0;
  }
  .exp-visual{
    border-radius:6px; overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(36,26,18,0.35);
  }
  .exp-visual img{ aspect-ratio:4/5; object-fit:cover; width:100%; }
  .exp-visual.wide img{ aspect-ratio:3/2; }

  .exp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:64px; }
  .exp-card{
    border:1px solid var(--line); border-radius:9px; overflow:hidden;
    background:var(--paper); display:flex; flex-direction:column;
    transition:transform .25s var(--ease-hover), box-shadow .25s var(--ease-hover);
  }
  .exp-card:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -20px rgba(36,26,18,0.3); }
  .exp-card img{ aspect-ratio:3/2; object-fit:cover; width:100%; }
  .exp-card-body{ padding:24px; display:flex; flex-direction:column; flex:1; }
  .exp-card h4{
    font-family:'Fraunces',serif; font-weight:500; font-size:var(--fs-2xl);
    letter-spacing:-0.01em;
  }
  .exp-card p{ margin-top:8px; color:var(--bark); font-size:var(--fs-md); line-height:1.6; }
  .exp-card .exp-card-cta{
    margin-top:24px; font-size:var(--fs-xs); font-weight:700; letter-spacing:var(--tr-eyebrow);
    text-transform:uppercase; color:var(--wine); text-decoration:none;
  }
  .exp-card .exp-card-cta:hover{ color:var(--gold); }

  @media (max-width:900px){
    .exp-lead, .exp-lead.reverse{ grid-template-columns:1fr; gap:40px; }
    .exp-lead.reverse .exp-copy{ order:1; }
    .exp-lead.reverse .exp-visual{ order:2; }
    .exp-grid{ grid-template-columns:1fr; gap:24px; margin-top:48px; }
  }
  @media (max-width:640px){
    .exp-includes{ grid-template-columns:1fr; }
  }

  /* homepage experiences strip */
  .exp-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
  .exp-tile{ text-decoration:none; color:inherit; display:block; }
  .exp-tile img{
    aspect-ratio:1/1; object-fit:cover; border-radius:6px; width:100%;
    transition:transform .5s var(--ease-out);
  }
  .exp-tile:hover img{ transform:scale(1.04); }
  .exp-tile h4{
    margin-top:16px; font-family:'Fraunces',serif; font-weight:500;
    font-size:var(--fs-xl); letter-spacing:-0.01em;
  }
  .exp-tile p{ margin-top:4px; font-size:var(--fs-base); color:var(--bark); }
  /* the same tile sits on the dark wine section on the homepage, where
     --bark is all but invisible — lift it to the section's own sand. */
  .excursions .exp-tile p{ color:rgba(246,238,223,0.72); }
  @media (max-width:900px){ .exp-strip{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:520px){ .exp-strip{ grid-template-columns:1fr; } }

  /* GUIDE ARTICLES */
  .guide-hero{ min-height:72vh; }
  .article-section{ padding:96px 0; }
  .article{ max-width:68ch; }
  .article h2{
    font-size:var(--fs-h3); margin-top:64px; letter-spacing:-0.01em;
  }
  .article > div:first-child h2{ margin-top:0; }
  .article p{ margin-top:16px; color:var(--bark); font-size:var(--fs-lg); line-height:1.7; }
  .article em{ font-style:italic; }
  .article-cta{
    margin-top:80px; padding-top:40px; border-top:1px solid var(--line);
  }
  .article-cta p{ margin:0 0 24px; font-family:'Fraunces',serif; font-style:italic;
    font-size:var(--fs-h4); line-height:1.45; color:var(--ink); }
  .article-cta a{ color:var(--wine); }

  /* GETTING HERE (branch pages) */
  .where-list{ margin:0; position:relative; z-index:1; }
  .where-row{
    display:grid; grid-template-columns:200px 1fr; gap:32px;
    padding:24px 0; border-top:1px solid rgba(246,238,223,0.15);
  }
  .where-row:last-child{ border-bottom:1px solid rgba(246,238,223,0.15); }
  .where-row dt{
    font-size:var(--fs-xs); font-weight:700; letter-spacing:var(--tr-eyebrow);
    text-transform:uppercase; color:var(--gold);
  }
  .where-row dd{ margin:0; color:rgba(246,238,223,0.78); font-size:var(--fs-lg); line-height:1.6; }
  @media (max-width:700px){
    .where-row{ grid-template-columns:1fr; gap:8px; }
  }

  /* ENQUIRY BUILDER */
  .enquire{ background:var(--sand); position:relative; overflow:hidden; }
  .enquire-card{
    background:var(--paper); border-radius:10px; padding:44px;
    box-shadow:0 30px 70px -30px rgba(36,26,18,0.4);
    max-width:760px; margin:0 auto; position:relative; z-index:1;
    border:1px solid var(--line);
  }
  .enquire-card h2{ font-size:var(--fs-h3); }
  .enquire-card > p{ color:var(--bark); margin-top:12px; }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:28px; }
  @media (max-width:640px){ .field-row{ grid-template-columns:1fr; } }
  .field label{
    display:block; font-size:var(--fs-2xs); font-weight:700; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--wine); margin-bottom:9px;
  }
  .chip-row{ display:flex; gap:10px; flex-wrap:wrap; }
  .chip{
    border:1px solid var(--line); background:transparent; border-radius:999px;
    padding:10px 18px; font-size:var(--fs-base); font-weight:600; cursor:pointer;
    font-family:'Karla',sans-serif; color:var(--ink);
    transition:background .25s var(--ease-hover), color .25s var(--ease-hover), border-color .25s var(--ease-hover), transform .25s var(--ease-hover);
  }
  .chip:hover{ transform:translateY(-3px); border-color:var(--wine); }
  .chip.selected{ background:var(--wine); color:#fff; border-color:var(--wine); }
  .field input{
    width:100%; padding:12px 14px; border-radius:6px; border:1px solid var(--line);
    background:#fff; font-family:'Karla',sans-serif; font-size:var(--fs-md); color:var(--ink);
  }
  .field input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,78,0.2); }
  /* Dates are a pill like the villa chips, not a white box: on iPhone a date box
     won't shrink below its own width and was pushing out of the card. The real
     date input sits invisibly over the pill, so a tap opens the phone's own picker;
     the pill shows the chosen date (script.js). */
  .field{ min-width:0; }
  .date-pill{
    position:relative; display:inline-flex; align-items:center; gap:8px;
    min-height:44px; max-width:100%; padding:10px 18px;
    overflow:hidden; /* keeps an oversized iPhone date input inside the pill */
    border:1px solid var(--line); border-radius:999px; background:transparent;
    font-size:var(--fs-base); font-weight:600; color:var(--ink); cursor:pointer;
    transition:border-color .25s var(--ease-hover), color .25s var(--ease-hover), transform .25s var(--ease-hover);
  }
  .date-pill:hover{ transform:translateY(-3px); border-color:var(--wine); }
  .date-pill.has-date{ border-color:var(--wine); color:var(--wine); }
  .date-pill-icon{ width:16px; height:16px; flex-shrink:0; color:var(--wine); }
  .date-pill-text{ white-space:nowrap; }
  .field .date-pill input{
    position:absolute; top:0; left:0; width:100%; max-width:100%; height:100%; min-width:0;
    margin:0; padding:0; border:0; border-radius:999px; background:transparent;
    opacity:0; cursor:pointer; -webkit-appearance:none; appearance:none;
    font-size:16px; /* 16px stops iOS zooming the page in on tap */
  }
  .field .date-pill input:focus{ box-shadow:none; }
  .date-pill:focus-within{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,78,0.2); }
  .stepper{ display:flex; align-items:center; gap:16px; }
  .stepper button{
    width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
    background:transparent; font-size:var(--fs-lg); cursor:pointer; color:var(--wine);
    display:flex; align-items:center; justify-content:center;
    transition:background .25s var(--ease-hover), color .25s var(--ease-hover);
    font-family:'Karla',sans-serif;
  }
  .stepper button:hover{ background:var(--wine); color:#fff; }
  .stepper .count{ font-family:'Fraunces',serif; font-size:var(--fs-2xl); min-width:28px; text-align:center; }
  .enquire-preview{
    margin-top:28px; padding:18px 20px; border-radius:8px;
    background:rgba(61,15,22,0.05); border:1px dashed rgba(61,15,22,0.25);
    font-size:var(--fs-base); color:var(--bark); line-height:1.55;
  }
  .enquire-preview strong{ color:var(--wine); }
  .enquire-send{
    margin-top:24px; display:inline-flex; align-items:center; gap:10px;
    background:#25D366; color:#0b3d1f; text-decoration:none; font-weight:700;
    padding:16px 30px; border-radius:999px; font-size:var(--fs-md); border:none; cursor:pointer;
    font-family:'Karla',sans-serif;
    transition:transform .25s var(--ease-hover), box-shadow .25s var(--ease-hover);
  }
  .enquire-send:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(37,211,102,0.35); }
  @media (max-width:640px){ .enquire-card{ padding:30px 24px; } }

  /* ---------- the enquiry card, in the villa cards' style (2026-10-06) ----------
     Same width, corners, colour and type as the villa cards on the homepage. The
     photo of the villa you pick sits under the subtitle, and the card takes that
     photo's colour (script.js); "Not sure yet" shows both villas side by side.
     Only long-supported CSS, as with the villa cards. */
  .enquire-card{
    --tint:rgb(136, 110, 78);
    width:320px; max-width:100%; padding:26px 18px 18px;
    border:0; border-radius:38px;
    background-color:var(--tint); color:#fff;
    box-shadow:0 0 0 1px rgba(246,238,223,0.08), 0 28px 50px -28px rgba(36,26,18,0.55);
    transition:background-color .6s var(--ease-out), opacity .9s var(--ease-out), transform .9s var(--ease-out);
  }
  .enquire-card .eyebrow{ color:rgba(251,246,236,0.85); }  /* gold is too faint on the sand card */
  .enquire-card h2{
    margin-top:8px; font-family:'Karla',sans-serif; font-weight:700;
    font-size:23px; line-height:1.15; letter-spacing:-0.01em; color:#fff;
  }
  .enquire-card .enquire-intro > p{ margin-top:9px; font-size:13px; line-height:1.45; color:rgba(255,255,255,0.82); }

  /* the chosen villa's photo */
  .enquire-photo{
    position:relative; height:0; padding-bottom:72%; margin-top:16px;
    border-radius:22px; overflow:hidden; background:rgba(36,26,18,0.25);
    -webkit-transform:translateZ(0); transform:translateZ(0); /* Safari: clip to the corners */
  }
  .enquire-photo img{
    position:absolute; top:0; left:0; width:100%; height:100%; max-width:none;
    object-fit:cover; opacity:0;
    transition:opacity .6s var(--ease-out), left .6s var(--ease-out), width .6s var(--ease-out);
  }
  .enquire-photo img.on{ opacity:1; }
  .enquire-photo.either img[data-branch="Arugam Bay"]{ width:50%; }
  .enquire-photo.either img[data-branch="Wilpattu"]{ left:50%; width:50%; }

  .enquire-card .enquire-villa{ margin-top:16px; }
  .enquire-card .field label{ color:rgba(255,255,255,0.8); margin-bottom:8px; }
  .enquire-card .field-row{ grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
  .enquire-card .field-row + .field-row{ grid-template-columns:1fr; gap:16px; }
  @media (max-width:360px){ .enquire-card .field-row{ grid-template-columns:1fr; } }
  .enquire-card .chip-row{ gap:8px; }

  /* every control is the villa cards' glass pill; the chosen one turns paper-white */
  .enquire-card .chip, .enquire-card .date-pill, .enquire-card .stepper button{
    border:0; color:#fff; background:rgba(255,255,255,0.14);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.3);
  }
  .enquire-card .chip:hover, .enquire-card .date-pill:hover, .enquire-card .stepper button:hover{
    background:rgba(255,255,255,0.24); color:#fff;
  }
  .enquire-card .chip.selected, .enquire-card .chip.selected:hover,
  .enquire-card .date-pill.has-date, .enquire-card .date-pill.has-date:hover{
    background:var(--paper); color:var(--ink); box-shadow:none;
  }
  .enquire-card .chip{ padding:9px 15px; font-size:var(--fs-sm); }
  .enquire-card .date-pill{ width:100%; padding:9px 14px; font-size:var(--fs-sm); }
  .enquire-card .date-pill-icon{ color:currentColor; }
  .enquire-card .date-pill:focus-within{ box-shadow:inset 0 0 0 1px var(--gold), 0 0 0 3px rgba(201,162,78,0.35); }
  .enquire-card .stepper{ gap:14px; }
  .enquire-card .stepper button{ width:40px; height:40px; }
  .enquire-card .stepper .count{ color:#fff; }

  .enquire-card .enquire-preview{
    margin-top:16px; padding:14px 16px; border:0; border-radius:16px;
    background:rgba(255,255,255,0.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.14);
    font-size:var(--fs-sm); color:rgba(255,255,255,0.86);
  }
  .enquire-card .enquire-preview strong{ color:#fff; }

  /* Send on WhatsApp: the Reserve button's size and shape, kept WhatsApp green */
  .enquire-card .enquire-send{
    margin-top:15px; width:100%; height:46px; padding:0 20px;
    justify-content:center; font-size:13.5px; font-weight:600;
  }
  @media (max-width:520px){ .enquire-card{ width:86vw; max-width:340px; } }
  .enquire-intro, .enquire-form{ min-width:0; }
  /* tablets: one comfortable column */
  @media (min-width:521px) and (max-width:899px){ .enquire-card{ width:100%; max-width:480px; } }
  /* desktop: a wide card in two halves. The intro and the villa photo on the left
     (the photo grows to fill the column), the form on the right. */
  @media (min-width:900px){
    .enquire-card{
      width:100%; max-width:880px; padding:36px;
      display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:stretch;
    }
    .enquire-intro{ display:flex; flex-direction:column; }
    .enquire-card h2{ font-size:28px; }
    .enquire-card .enquire-intro > p{ font-size:var(--fs-base); }
    .enquire-photo{ flex:1 1 auto; height:auto; padding-bottom:0; min-height:260px; margin-top:20px; }
    .enquire-card .enquire-villa{ margin-top:0; }
    .enquire-card .field-row + .field-row{ grid-template-columns:auto 1fr; gap:40px; }  /* guests takes only what it needs */
  }
  @media (max-width:640px){ .enquire-card .stepper button{ width:44px; height:44px; } }  /* 44px to tap */

  /* ===== FANCY LAYER ===== */

  /* filmic grain over the whole page */
  .grain{
    position:fixed; inset:0; z-index:90; pointer-events:none; opacity:0.16;
    mix-blend-mode:overlay;
    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.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation:grainShift 700ms steps(3) infinite;
  }
  @keyframes grainShift{
    0%{ transform:translate(0,0); }
    33%{ transform:translate(-3px,2px); }
    66%{ transform:translate(2px,-3px); }
    100%{ transform:translate(0,0); }
  }

  /* warm spotlight that follows the cursor across the hero */
  .hero-glow{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,40%),
      rgba(201,162,78,0.22), transparent 70%);
    opacity:0; transition:opacity .6s var(--ease-out);
  }
  .hero:hover .hero-glow{ opacity:1; }

  /* curtain wipe for feature images */
  .curtain{ position:relative; overflow:hidden; }
  .curtain::after{
    content:''; position:absolute; inset:0; background:var(--wine);
    transform:scaleX(1); transform-origin:right;
    transition:transform 1.05s cubic-bezier(.76,0,.24,1);
    z-index:2;
  }
  .curtain.in-view::after{ transform:scaleX(0); }
  .curtain img{ transform:scale(1.16); transition:transform 1.2s var(--ease-out); }
  .curtain.in-view img{ transform:scale(1); }

  /* 3D tilt card */
  .tilt{ transform-style:preserve-3d; transition:transform .55s var(--ease-out); will-change:transform; }
  .tilt-wrap{ perspective:1000px; }

  /* shine sweep across buttons */
  .nav-cta, .branch-cta, .wa-btn, .enquire-send, .hero-branches a{
    position:relative; overflow:hidden;
  }
  .nav-cta::before, .branch-cta::before, .wa-btn::before,
  .enquire-send::before, .hero-branches a::before{
    content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
    transform:skewX(-18deg); transition:left .7s var(--ease-out);
  }
  .nav-cta:hover::before, .branch-cta:hover::before, .wa-btn:hover::before,
  .enquire-send:hover::before, .hero-branches a:hover::before{ left:130%; }

  /* gold underline that draws itself under headings on reveal */
  .draw-line{ position:relative; display:inline-block; padding-bottom:12px; }
  .draw-line::after{
    content:''; position:absolute; left:0; bottom:0; height:2px; width:0;
    background:linear-gradient(90deg, var(--gold), transparent);
    transition:width 1s var(--ease-out) .3s;
  }
  .reveal.in-view .draw-line::after, .draw-line.in-view::after{ width:78%; }

  /* glow behind the enquiry card */
  .enquire::before{
    content:''; position:absolute; left:50%; top:38%; transform:translate(-50%,-50%);
    width:min(760px,90vw); height:420px; pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(201,162,78,0.28), transparent 70%);
    filter:blur(40px);
  }

  /* lightbox zoom toggle */
  .lightbox img.zoomed{ transform:scale(1.7); cursor:zoom-out; }
  .lightbox img{ cursor:zoom-in; }

  /* ===== PINNED HORIZONTAL GALLERY (desktop only) ===== */
  .hscroll-progress{
    max-width:var(--max); margin:26px auto 0; padding:0 32px; width:100%;
  }
  .hscroll-progress span{
    display:block; height:2px; width:0%;
    background:linear-gradient(90deg, var(--gold), var(--wine));
    transition:width .1s linear;
  }
  @media (max-width:900px){ .hscroll-progress{ display:none; } }

  @media (min-width:901px){
    .hscroll{ position:relative; padding:0 0 40px; }
    .hscroll-sticky{
      position:sticky; top:0; height:100vh;
      display:flex; flex-direction:column; justify-content:center;
      overflow:hidden;
    }
    .hscroll .strip-head{ margin-bottom:32px; }
    .hscroll .strip-nav{ display:none; }
    .hscroll .strip-track{
      display:flex; width:max-content; gap:20px;
      grid-auto-flow:unset; grid-auto-columns:unset;
      overflow:visible; scroll-snap-type:none; cursor:default;
      padding:0 0 0 max(32px, calc((100vw - var(--max)) / 2 + 32px));
      will-change:transform;
    }
    .hscroll .strip-track img{
      width:330px; flex-shrink:0; aspect-ratio:3/4; border-radius:5px;
      box-shadow:0 24px 50px -26px rgba(36,26,18,0.5);
    }
  }

  footer{background:var(--wine); color:var(--sand); padding:90px 0 40px; position:relative; overflow:hidden;}
  footer .rosette-field{ opacity:0.05; filter:invert(1); }
  .foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:50px; padding-bottom:56px; border-bottom:1px solid rgba(246,238,223,0.15); position:relative; z-index:1;}
  footer h2{font-size:var(--fs-h2); color:#fff; max-width:12ch;}
  footer p{color:rgba(246,238,223,0.7); margin-top:14px; max-width:38ch;}
  .wa-btn{
    margin-top:26px; display:inline-flex; align-items:center; gap:10px;
    background:#25D366; color:#0b3d1f; text-decoration:none; font-weight:700;
    padding:15px 28px; border-radius:999px; font-size:var(--fs-md);
    transition:transform .25s var(--ease-hover), box-shadow .25s var(--ease-hover);
  }
  .wa-btn:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(37,211,102,0.3); }
  .foot-col h4{font-family:'Karla',sans-serif; font-size:var(--fs-xs); letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); margin-bottom:16px;}
  .foot-col p{margin:0 0 6px; font-size:var(--fs-base);}
  .foot-social{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:16px; }
  .foot-social.row{ flex-direction:row; flex-wrap:wrap; gap:16px; margin-top:24px; }
  .foot-social a{
    display:inline-flex; align-items:center; gap:8px;
    font-size:var(--fs-base); color:rgba(246,238,223,0.72); text-decoration:none;
    transition:color .25s var(--ease-hover);
  }
  .foot-social a:hover{ color:var(--gold); }
  .foot-social svg{ width:16px; height:16px; flex-shrink:0; }
  .foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:28px; font-size:var(--fs-sm); color:rgba(246,238,223,0.5); flex-wrap:wrap; gap:10px; position:relative; z-index:1;}
  @media (max-width:820px){ .foot-grid{grid-template-columns:1fr; gap:36px;} }

  .wa-fab{
    position:fixed; bottom:22px; right:22px; z-index:60;
    background:#25D366; width:56px; height:56px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 24px rgba(0,0,0,0.25); text-decoration:none;
    transition:transform .25s var(--ease-hover);
  }
  .wa-fab:hover{ transform:scale(1.08); }
  .wa-fab svg{width:28px;height:28px;}

  .progress-bar{
    position:fixed; top:var(--banner-h); left:0; height:3px; width:0%;
    background:linear-gradient(90deg, var(--gold), var(--wine));
    z-index:150; transition:width .1s linear;
  }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .ex-card img, .visual-main img, .strip-track img{transition:none;}
    .reveal{ opacity:1; transform:none; transition:none; }
    .rise{ opacity:1; transform:none; animation:none; }
    .hero-media{ transform:none !important; animation:none; }
    .scroll-cue{ animation:none; }
    .mobile-menu{ transition:none; }
    .grain{ animation:none; opacity:0.1; }
    .curtain::after{ transform:scaleX(0); transition:none; }
    .curtain img{ transform:none; transition:none; }
    .hero-glow{ display:none; }
    .tilt{ transform:none !important; transition:none; }
    .draw-line::after{ transition:none; width:78%; }
    .ticker-move{ animation:none; }
  }

  /* Hero subject framing.
     Phone viewports crop a wide hero hard to the horizontal centre — only the
     middle ~20% of the frame survives. Where the subject sits off to one side,
     this keeps it in shot instead of showing empty background. */
  @media (max-width:820px){
    .hero-media img.focus-right{ object-position:78% center; }
    .hero-media img.focus-left{ object-position:12% center; }
  }


  /* mid-width nav compaction.
     Between the 820px burger breakpoint and ~1000px the five links and the
     CTA run out of room and touch. Tighten the gap and step the links down
     one scale stop rather than dropping to the burger this early. */
  @media (min-width:821px) and (max-width:900px){
    .navlinks{ gap:14px; }
    .navlinks a{ font-size:var(--fs-xs); }
    .nav-cta{ padding-left:14px; padding-right:14px; font-size:var(--fs-xs); }
  }
  @media (min-width:901px) and (max-width:1000px){
    .navlinks{ gap:18px; }
    .navlinks a{ font-size:var(--fs-sm); }
    .nav-cta{ padding-left:16px; padding-right:16px; font-size:var(--fs-sm); }
  }


  /* ───────────────────────────── MOBILE EXPERIENCE ─────────────────────────
     Measured on a 375x812 viewport: the page ran 10,138px (12.5 screens)
     because desktop's 120px section padding was being applied on a phone;
     the hero used 100vh, which on iOS and Android is taller than the visible
     area while the URL bar is showing, so the hero crops and the page jumps
     as the bar hides; and 23 controls were under the 44px minimum tap size. */

  @media (max-width:640px){
    /* 1. reclaim the scroll. 120px of air either side of every section is a
       desktop measure — on a phone it is most of a screen of nothing. */
    section{ padding:64px 0; }
    .trips{ padding:44px 0; }
    .strip{ padding:0 0 64px; }
    footer{ padding:56px 0 32px; }
    .section-head{ margin-bottom:32px; }

    /* 2. dvh tracks the visible viewport as the URL bar shows and hides.
       The vh line stays first as the fallback for older browsers. */
    .hero{ min-height:100vh; min-height:100dvh; }
    .guide-hero{ min-height:72vh; min-height:68dvh; }

    /* 3. 44px minimum on anything you tap */
    .chip{ min-height:44px; display:inline-flex; align-items:center; }
    .stepper button{ width:44px; height:44px; }
    .mm-close{ min-height:44px; }
    .branch-cta, .enquire-send, .wa-btn, .hero-branches a, .nav-cta{ min-height:44px; }
    /* inline text links were 20px tall — give them a real target
       without changing how they look */
    .branch-copy a:not(.branch-cta),
    .article-cta a,
    .foot-col a{
      display:inline-block; padding-block:11px;
    }

    /* 4. the hero eyebrow was wrapping to two lines above the headline */
    .hero .eyebrow{ font-size:11px; letter-spacing:0.12em; }

    /* 5. the floating WhatsApp button sat on top of the scroll cue */
    .scroll-cue{ display:none; }
  }

  /* very narrow phones */
  @media (max-width:380px){
    .wrap{ padding:0 20px; }
    .hero-branches{ gap:10px; }
  }

  @media (max-width:520px){
    /* The four experience tiles were stacking one-per-row with square images,
       making this one section 2.7 screens tall on a phone. Two compact
       columns read as a nav strip, which is what it is. */
    .exp-strip{ grid-template-columns:repeat(2,1fr); gap:16px; }
    .exp-tile img{ aspect-ratio:4/3; }
    .exp-tile h4{ margin-top:10px; font-size:var(--fs-md); }
    .exp-tile p{ font-size:var(--fs-sm); }

    /* the footer ran 1.7 screens with its columns stacked */
    .foot-grid{ gap:28px; }
    footer h2{ margin-bottom:4px; }
  }

  @media (max-width:640px){
    /* carousel arrows were 42px, just under the 44px minimum */
    .strip-nav button{ width:44px; height:44px; }

    /* the two branch columns are short lists — side by side saves most of a
       screen, and the headline block still spans the full width above them */
    .foot-grid{ grid-template-columns:1fr 1fr; gap:26px 18px; }
    .foot-grid > :first-child{ grid-column:1 / -1; }
    .foot-col a, .foot-social a{ display:inline-block; padding-block:11px; }
  }

  @media (max-width:640px){
    /* experiences.html: the card CTAs and guide links were 19-20px tall */
    .exp-card .exp-card-cta,
    .article-cta a,
    .exp-copy a,
    .handled a{
      display:inline-block; padding-block:13px;
    }

    /* each experience section ran 3.6 screens with three tall cards stacked.
       A 4:5 portrait lead image is a lot of phone; 3:2 is plenty. */
    .exp-visual img{ aspect-ratio:3/2; }
    .exp-card img{ aspect-ratio:16/9; }
    .exp-card-body{ padding:18px; }
    .exp-grid{ gap:18px; margin-top:32px; }
  }

  @media (max-width:640px){
    /* the remaining bare inline link, in the excursions copy on branch pages */
    .excursions .wrap p > a{ display:inline-block; padding-block:12px; }
  }

  /* ---------- section dividers (homepage, 2026-10-06) ----------
     The gold dot divider sits between every section, on the colour of the section
     above it, and a hairline marks where the next colour begins. Sections alternate
     cream and sand, so every change of section is also a change of colour. */
  .divider.on-sand{ background:var(--sand); }
  .divider.on-wine{ background:var(--wine); }
  .divider.on-wine .rule{ background:linear-gradient(90deg, transparent, rgba(246,238,223,0.22)); }
  .divider.on-wine .rule.right{ background:linear-gradient(90deg, rgba(246,238,223,0.22), transparent); }
  .divider + section, .divider + footer{ border-top:1px solid var(--line); }
  .divider.on-wine + footer{ border-top-color:rgba(246,238,223,0.12); padding-top:64px; }
  /* the "see the villa in full" link closes each villa section */
  .villa-more{ margin-top:24px; }
  .villa-link{ font-size:var(--fs-sm); font-weight:600; color:var(--wine); text-underline-offset:3px; }
  .villa-link:hover{ color:var(--bark); }
  @media (max-width:640px){ .villa-link{ display:inline-block; padding-block:14px; } }  /* 44px to tap */
  /* the galleries start with their heading, so give them room below the hairline */
  .divider + .strip{ padding-top:64px; }
  @media (min-width:901px){ .divider + .hscroll{ padding-top:0; } }  /* pinned gallery centres itself */
  @media (max-width:640px){
    .divider + .strip{ padding-top:48px; }
    .divider.on-wine + footer{ padding-top:48px; }
  }

  /* ---------- villa sections: sign, leaves and sea (homepage, 2026-10-06) ----------
     The palm fronds and waves are the menus' own artwork and motion (from the staff
     portal's menu page). The surfboard sign heads each section in place of the crest
     and label: it swings on its rope when it comes into view, then settles into a slow
     breeze. Soft palm leaves sit in the background behind the sign and title, and
     behind the bullets and Enquire button: they slide in from the sides when their
     part of the section arrives, then sway (the wrapper swings the branch while the
     leaf flexes on a slower, out-of-step period, so it reads as air). Each piece of
     artwork fades out along the edges it was cut at. Arugam Bay's waves drift behind
     its Enquire button. Transform-only animations; reduced motion shows it all still. */

  /* the head block: sign then title, with leaves behind */
  .branch-head{ position:relative; }
  .branch-head > .villa-sign, .branch-head > h3{ position:relative; z-index:1; }

  /* the sign, hanging from a small nail at the head of the title */
  .villa-sign{ position:relative; width:300px; max-width:100%; margin:4px 0 26px; pointer-events:none; }
  .villa-sign::before{
    content:''; position:absolute; z-index:2; top:-5px; left:48.7%; margin-left:-5px;
    width:10px; height:10px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #8a7258, var(--bark) 70%);
    box-shadow:0 1px 2px rgba(36,26,18,0.45);
  }
  .villa-sign img{
    position:relative; z-index:1; display:block; width:100%; height:auto; max-width:none;
    transform-origin:48.7% 0;
    -webkit-filter:drop-shadow(0 12px 14px rgba(36,26,18,0.22)); filter:drop-shadow(0 12px 14px rgba(36,26,18,0.22));
  }
  .villa-sign.sign-ready img{ -webkit-transform:rotate(15deg); transform:rotate(15deg); }
  /* the swing plays on the picture, the breeze on the sign around it (same pivot, the nail).
     Both on the one picture can't run on the graphics chip, and kept the page redrawing. */
  .villa-sign.swing{ transform-origin:48.7% 0; animation:sign-breeze 9s ease-in-out 4.2s infinite; }
  .villa-sign.swing img{ animation:sign-swing 4.2s ease-in-out both; }
  /* a pendulum losing energy: each swing smaller, every turn eased */
  @keyframes sign-swing{
    0%  { transform:rotate(15deg); }
    15% { transform:rotate(-11deg); }
    29% { transform:rotate(7.5deg); }
    43% { transform:rotate(-5deg); }
    57% { transform:rotate(3.2deg); }
    71% { transform:rotate(-1.8deg); }
    85% { transform:rotate(0.8deg); }
    100%{ transform:rotate(0deg); }
  }
  @keyframes sign-breeze{
    0%  { transform:rotate(0deg); }
    30% { transform:rotate(1.4deg); }
    70% { transform:rotate(-1.1deg); }
    100%{ transform:rotate(0deg); }
  }

  /* the leaves: in the background of the head block and the text block */
  .leaf-zone{ position:absolute; top:0; left:0; right:0; bottom:0; z-index:0; pointer-events:none; }
  .leaf{ position:absolute; opacity:0; transition:transform 1.5s var(--ease-out), opacity 1.1s var(--ease-out); }
  .leaf img{ display:block; width:100%; height:auto; max-width:none; }
  .zone-in .leaf{ opacity:.6; }
  .zone-in .leaf-b, .zone-in .leaf-d{ transition-delay:.15s; }
  /* frond-1, cut top + left: behind the sign, its stem tucked up and to the left */
  .leaf-a{ top:-64px; left:-96px; width:200px; -webkit-transform:translate3d(-40%,0,0); transform:translate3d(-40%,0,0); }
  .leaf-a img{ -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 30%), linear-gradient(to right, transparent 0, #000 34%); mask-image:linear-gradient(to bottom, transparent 0, #000 30%), linear-gradient(to right, transparent 0, #000 34%); -webkit-mask-composite:source-in; mask-composite:intersect; }
  /* frond-3, cut top + right: hanging behind the end of the title */
  .leaf-b{ top:-58px; left:430px; width:300px; -webkit-transform:translate3d(30%,0,0); transform:translate3d(30%,0,0); }
  .leaf-b img{ -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 34%), linear-gradient(to left, transparent 0, #000 16%); mask-image:linear-gradient(to bottom, transparent 0, #000 34%), linear-gradient(to left, transparent 0, #000 16%); -webkit-mask-composite:source-in; mask-composite:intersect; }
  /* frond-2, cut right: fanning in behind the bullets from the right */
  .leaf-c{ top:-20px; right:-56px; width:126px; -webkit-transform:translate3d(40%,0,0); transform:translate3d(40%,0,0); }
  .leaf-c img{ -webkit-mask-image:linear-gradient(to left, transparent 0, #000 30%); mask-image:linear-gradient(to left, transparent 0, #000 30%); }
  /* frond-3 turned up: rising behind the Enquire button */
  .leaf-d{ bottom:-74px; right:30px; width:280px; -webkit-transform:translate3d(30%,0,0) scaleY(-1); transform:translate3d(30%,0,0) scaleY(-1); }
  .leaf-d img{ -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 34%), linear-gradient(to left, transparent 0, #000 16%); mask-image:linear-gradient(to bottom, transparent 0, #000 34%), linear-gradient(to left, transparent 0, #000 16%); -webkit-mask-composite:source-in; mask-composite:intersect; }
  .zone-in .leaf-a, .zone-in .leaf-b, .zone-in .leaf-c{ -webkit-transform:none; transform:none; }
  .zone-in .leaf-d{ -webkit-transform:scaleY(-1); transform:scaleY(-1); }
  /* each branch pivots at its stem */
  .leaf-a .frond-sway, .leaf-a .frond-sway img{ transform-origin:top left; }
  .leaf-b .frond-sway, .leaf-b .frond-sway img, .leaf-c .frond-sway, .leaf-c .frond-sway img, .leaf-d .frond-sway, .leaf-d .frond-sway img{ transform-origin:top right; }
  .leaf-a .frond-sway{ animation:frond-swing-left 13s cubic-bezier(.45,.05,.55,.95) infinite; }
  .leaf-b .frond-sway{ animation:frond-swing-right 17s cubic-bezier(.45,.05,.55,.95) infinite -5s; }
  .leaf-c .frond-sway{ animation:frond-swing-right 15s cubic-bezier(.45,.05,.55,.95) infinite -2s; }
  .leaf-d .frond-sway{ animation:frond-swing-right 16s cubic-bezier(.45,.05,.55,.95) infinite -9s; }
  .leaf-a .frond-sway img{ animation:frond-flex 9s ease-in-out infinite; }
  .leaf-b .frond-sway img{ animation:frond-flex 11s ease-in-out infinite -3s; }
  .leaf-c .frond-sway img{ animation:frond-flex 10s ease-in-out infinite -5s; }
  .leaf-d .frond-sway img{ animation:frond-flex 12s ease-in-out infinite -7s; }
  @keyframes frond-swing-left{
    0%  { transform:rotate(-5.5deg) translate(0, 0); }
    17% { transform:rotate(2.6deg)  translate(6px, -7px); }
    33% { transform:rotate(-1.4deg) translate(-3px, 3px); }
    54% { transform:rotate(7.2deg)  translate(9px, -11px); }
    71% { transform:rotate(0.8deg)  translate(2px, -2px); }
    86% { transform:rotate(4.1deg)  translate(5px, -5px); }
    100%{ transform:rotate(-5.5deg) translate(0, 0); }
  }
  @keyframes frond-swing-right{
    0%  { transform:rotate(5deg)    translate(0, 0); }
    21% { transform:rotate(-3.2deg) translate(-7px, -5px); }
    39% { transform:rotate(1.8deg)  translate(3px, 4px); }
    61% { transform:rotate(-7.6deg) translate(-11px, -9px); }
    78% { transform:rotate(-0.6deg) translate(-2px, -1px); }
    91% { transform:rotate(-4.4deg) translate(-6px, -4px); }
    100%{ transform:rotate(5deg)    translate(0, 0); }
  }
  @keyframes frond-flex{
    0%  { transform:skewY(0deg)    scale(1, 1); }
    31% { transform:skewY(1.8deg)  scale(1.03, 0.985); }
    59% { transform:skewY(-1.3deg) scale(0.982, 1.022); }
    100%{ transform:skewY(0deg)    scale(1, 1); }
  }

  /* the text block: leaves and (Arugam Bay) waves behind the words and button */
  .branch-text{ position:relative; }
  .branch-text > *{ position:relative; z-index:1; }
  .branch-text > .leaf-zone{ position:absolute; z-index:0; }

  /* Arugam Bay's sea, behind the Enquire button: the menu's two waves, repeated and
     drifting in opposite directions at different speeds (that changing gap reads as
     water), each rising and falling on its own period, faded out at both ends. */
  .branch-text > .sea{
    position:absolute; z-index:0; left:-48px; right:-48px; bottom:-30px; height:104px;
    overflow:hidden; pointer-events:none;
    -webkit-mask-image:linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
    mask-image:linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  }
  .sea-bob{ position:absolute; left:0; right:0; }
  .sea-back { bottom:44px; opacity:.4; animation:sea-bob-back 9s ease-in-out infinite; }
  .sea-front{ bottom:18px; opacity:.8; animation:sea-bob-front 7s ease-in-out infinite -2s; }
  .sea-band{
    width:calc(100% + 300px); height:50px;
    background-repeat:repeat-x; background-size:300px 50px;
    will-change:transform;
  }
  .sea-back  .sea-band{ background-image:url('images/theme/ab-wave-a-lite.png'); animation:sea-drift-right 38s linear infinite; }
  .sea-front .sea-band{ background-image:url('images/theme/ab-wave-b-lite.png'); background-position:150px 0; animation:sea-drift-left 26s linear infinite; }
  @keyframes sea-drift-left { from{ transform:translate3d(0,0,0); }      to{ transform:translate3d(-300px,0,0); } }
  @keyframes sea-drift-right{ from{ transform:translate3d(-300px,0,0); } to{ transform:translate3d(0,0,0); } }
  @keyframes sea-bob-back { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
  @keyframes sea-bob-front{ 0%,100%{ transform:translateY(0); } 40%{ transform:translateY(4px); } 75%{ transform:translateY(-3px); } }

  @media (max-width:900px){
    .leaf-b{ left:auto; right:-40px; width:250px; }
  }
  @media (max-width:640px){
    .villa-sign{ width:224px; margin:2px 0 20px; }
    .leaf-a{ top:-46px; left:-62px; width:140px; }
    .leaf-b{ top:-40px; right:-44px; width:190px; }
    .leaf-c{ top:-10px; right:-34px; width:86px; }
    .leaf-d{ bottom:-60px; right:-30px; width:200px; }
    .branch-text > .sea{ left:-24px; right:-24px; height:84px; bottom:-22px; }
    .sea-band{ height:38px; background-size:228px 38px; width:calc(100% + 228px); }
    .sea-front .sea-band{ background-position:114px 0; }
    .sea-back { bottom:36px; }
    .sea-front{ bottom:14px; }
    @keyframes sea-drift-left { from{ transform:translate3d(0,0,0); }      to{ transform:translate3d(-228px,0,0); } }
    @keyframes sea-drift-right{ from{ transform:translate3d(-228px,0,0); } to{ transform:translate3d(0,0,0); } }
  }
  @media (prefers-reduced-motion: reduce){
    .leaf{ transition:none; }
    .leaf-zone .frond-sway, .leaf-zone .frond-sway img, .villa-sign.swing, .villa-sign.swing img, .branch-text .sea-bob, .branch-text .sea-band{ animation:none; }
  }

  /* ---------- villa features with icons, and the desktop layout (homepage, 2026-10-08) ----------
     The features come from the Booking.com listings. Each has a small line icon in wine
     instead of the dot. On desktop the photo row moves to the right column under the
     Enquire button and the text starts at the top: the photos span both right-hand rows,
     and the photo row's row is the flexible one, so any spare height goes below it and
     the text stays tight. On phones the photo row stays right under the photos. */
  .amenity-list.has-icons{ gap:12px 24px; }
  .amenity-list.has-icons li{ align-items:flex-start; gap:10px; line-height:1.4; }
  .amenity-list.has-icons li::before{ display:none; }
  .am-icon{ width:18px; height:18px; flex-shrink:0; margin-top:1px; color:var(--wine); }
  @media (max-width:640px){ .amenity-list.has-icons{ gap:12px 14px; } .amenity-list.has-icons li{ font-size:var(--fs-sm); } .am-icon{ width:16px; height:16px; } }
  @media (min-width:901px){
    .branch.has-sign .branch-grid-stack .branch-copy{
      grid-template-areas:"head head" "visual text" "visual thumbs" "more more";
      grid-template-rows:auto auto 1fr auto;
      align-items:start;
    }
    .branch.has-sign .branch-copy > .branch-head{ grid-area:head; }
    .branch.has-sign .branch-media{ display:contents; }
    .branch.has-sign .branch-media .branch-visual{ grid-area:visual; margin:28px 0 40px; }
    .branch.has-sign .branch-copy > .branch-text{ grid-area:text; margin-top:28px; }
    .branch.has-sign .branch-media .villa-thumbs-wrap{ grid-area:thumbs; margin-top:36px; }
    .branch.has-sign .branch-copy > .villa-more{ grid-area:more; }
  }

  /* the WhatsApp card, a size up on desktop (2026-10-08) */
  @media (min-width:900px){
    .enquire-card{ max-width:1040px; padding:48px; gap:56px; border-radius:44px; }
    .enquire-card h2{ font-size:34px; }
    .enquire-card .eyebrow{ font-size:var(--fs-sm); }
    .enquire-card .enquire-intro > p{ font-size:var(--fs-lg); }
    .enquire-photo{ min-height:320px; border-radius:26px; }
    .enquire-card .field label{ font-size:var(--fs-sm); margin-bottom:10px; }
    .enquire-card .field-row{ gap:16px; margin-top:22px; }
    .enquire-card .chip{ padding:11px 18px; font-size:var(--fs-base); }
    .enquire-card .date-pill{ min-height:50px; font-size:var(--fs-base); }
    .enquire-card .stepper button{ width:46px; height:46px; }
    .enquire-card .stepper .count{ font-size:28px; }
    .enquire-card .enquire-preview{ margin-top:22px; padding:18px 20px; font-size:var(--fs-base); }
    .enquire-card .enquire-send{ height:56px; font-size:var(--fs-md); margin-top:20px; }
  }

  /* compact feature lists (homepage, 2026-10-08): short labels, small type, three columns on
     desktop; 8 show and the rest wait behind "+8 more" (script.js; without it all 16 show).
     On phones the features sit between the photo gallery and the paragraph. */
  .amenity-list.am-compact{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px 16px; margin-top:20px; }
  .amenity-list.am-compact li{ font-size:var(--fs-sm); align-items:center; gap:8px; line-height:1.3; }
  .amenity-list.am-compact .am-icon{ width:16px; height:16px; margin-top:0; opacity:.85; }
  .amenity-list.am-compact.is-collapsed li:nth-child(n+9){ display:none; }
  .am-more{
    display:block; margin-top:12px; padding:6px 0; border:0; background:none; cursor:pointer;
    font-family:'Karla',sans-serif; font-size:var(--fs-sm); font-weight:700; color:var(--wine);
    text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
  }
  .am-more:hover{ color:var(--bark); }
  .branch-text .am-more + .branch-cta{ margin-top:20px; }
  @media (max-width:900px){
    .amenity-list.am-compact{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px 14px; }
    /* phones: features first, then the paragraph and the button */
    .branch.has-sign .branch-text{ display:flex; flex-direction:column; align-items:flex-start; }
    .branch.has-sign .branch-text > .amenity-list{ order:-2; margin-top:24px; width:100%; }
    .branch.has-sign .branch-text > .am-more{ order:-1; }
    .branch.has-sign .branch-text > p{ margin-top:20px; }
  }
  @media (max-width:640px){ .am-more{ padding:12px 0; margin-top:4px; } }  /* 44px to tap */

  /* villa sections: Enquire with a small "Learn more" button beside it (homepage, 2026-10-08) */
  .branch-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:24px; }
  .branch-actions .branch-cta{ margin-top:0; }
  .villa-learn{
    display:inline-flex; align-items:center; min-height:40px; padding:0 18px;
    border:1px solid rgba(61,15,22,0.28); border-radius:999px; background:var(--paper);
    font-size:var(--fs-sm); font-weight:700; color:var(--wine); text-decoration:none;
    transition:background-color .25s var(--ease-hover), border-color .25s var(--ease-hover), transform .25s var(--ease-hover);
  }
  .villa-learn:hover{ background:var(--sand); border-color:var(--wine); transform:translateY(-2px); }
  @media (max-width:640px){ .villa-learn{ min-height:44px; } }  /* 44px to tap */

  /* Wilpattu activities, under the features (homepage, 2026-10-08) */
  .villa-activities{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); width:100%; }
  .am-heading{ font-family:'Karla',sans-serif; font-size:var(--fs-xs); font-weight:700; letter-spacing:var(--tr-eyebrow); text-transform:uppercase; color:var(--gold); }
  .villa-activities .amenity-list{ margin-top:12px; }
  @media (max-width:900px){ .branch.has-sign .branch-text > .villa-activities{ order:-1; } }
  .am-soon{ margin-top:10px !important; font-size:var(--fs-xs) !important; font-style:italic; color:var(--bark) !important; opacity:.7; }
  /* the villa cards carry their activities as capsules, wrapping onto rows */
  .trip-tags{ row-gap:7px; }
  .trip-tag{ margin-bottom:0; }
  /* "In the villa" heading over the features, in the same style as "Activities" */
  .branch-text > .am-heading-main{ margin-top:4px; }
  .branch-text > .am-heading-main + .amenity-list{ margin-top:12px; }
  @media (max-width:900px){ .branch.has-sign .branch-text > .am-heading-main{ order:-3; margin-top:24px; } .branch.has-sign .branch-text > .am-heading-main + .amenity-list{ margin-top:12px; } }

  /* ---------- villa sections as one card (homepage, 2026-10-08) ----------
     Like the villa cards at the top: the photos slide (all of them, with dots, and
     arrows on computers) and the card takes each photo's colour. Desktop: photos on
     the left, the title, "In the villa", activities and buttons on the right. Phones:
     stacked. The sign hangs above the card; the leaves (and Arugam Bay's waves) sit in
     the background around it. Only long-supported CSS. */
  .vsec{ position:relative; max-width:1040px; margin:0 auto; }
  .vsec > .villa-sign{ position:relative; z-index:2; margin:4px 0 24px; }
  .vsec-leaves{ position:absolute; top:-40px; left:-140px; right:-140px; bottom:-70px; z-index:0; pointer-events:none; }
  .vsec-leaves .leaf-a{ top:0; left:60px; width:210px; }
  .vsec-leaves .leaf-b{ top:10px; left:auto; right:90px; width:300px; }
  .vsec-leaves .leaf-c{ top:45%; right:20px; width:130px; }
  .vsec-leaves .leaf-d{ bottom:0; right:110px; width:300px; }
  .vsec > .vsec-sea{
    position:absolute; z-index:0; left:-80px; right:-80px; bottom:-64px; height:110px;
    overflow:hidden; pointer-events:none;
    -webkit-mask-image:linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
    mask-image:linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  }
  .vsec > .vsec-sea .sea-back{ bottom:46px; }
  .vsec > .vsec-sea .sea-front{ bottom:20px; }

  .vcard{
    --tint:rgb(60, 60, 40);
    position:relative; z-index:1; display:flex; flex-direction:column;
    border-radius:38px; overflow:hidden; color:#fff;
    background-color:var(--tint);
    -webkit-transform:translateZ(0); transform:translateZ(0); /* Safari: clip to the corners */
    box-shadow:0 0 0 1px rgba(246,238,223,0.08), 0 28px 50px -28px rgba(36,26,18,0.55);
    transition:background-color .6s var(--ease-out);
  }
  .vcard-photos{ position:relative; height:0; padding-bottom:100%; }
  .vcard-slides{
    position:absolute; top:0; left:0; width:100%; height:100%;
    display:flex; overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .vcard-slides::-webkit-scrollbar{ display:none; }
  .vcard-slides:focus-visible{ outline:2px solid var(--gold); outline-offset:-6px; }
  .vcard-img{
    flex:0 0 100%; width:100%; height:100%; max-width:none; object-fit:cover;
    scroll-snap-align:start; scroll-snap-stop:always; cursor:zoom-in;
  }
  /* the photo melts into the card's colour */
  .vcard-fade{
    position:absolute; left:0; right:0; bottom:0; height:32%; pointer-events:none;
    background-color:var(--tint); transition:background-color .6s var(--ease-out);
    -webkit-mask-image:linear-gradient(to bottom, transparent, #000); mask-image:linear-gradient(to bottom, transparent, #000);
  }
  .vcard-dots{ position:absolute; left:0; right:0; bottom:10px; z-index:2; display:flex; justify-content:center; flex-wrap:wrap; }
  .vcard-dots button{
    width:24px; height:24px; padding:0; margin:0 -6px; border:0; background:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center; -webkit-appearance:none; appearance:none;
  }
  .vcard-dots button::before{ content:''; display:block; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.45); transition:background-color .3s var(--ease-hover); }
  .vcard-dots button.on::before{ background:#fff; }
  .vcard-arrow{ display:none; }
  @media (hover:hover) and (pointer:fine){
    .vcard-arrow{
      position:absolute; top:50%; margin-top:-20px; z-index:2; width:40px; height:40px; padding:0;
      border:0; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center;
      color:var(--wine); background:rgba(251,246,236,0.92); box-shadow:0 6px 16px -6px rgba(36,26,18,0.45);
      transition:opacity .25s var(--ease-hover), transform .25s var(--ease-hover);
    }
    .vcard-arrow svg{ width:16px; height:16px; }
    .vcard-arrow.prev{ left:14px; }
    .vcard-arrow.next{ right:14px; }
    .vcard-arrow:hover{ transform:scale(1.08); }
    .vcard-arrow:disabled{ opacity:0; pointer-events:none; }
  }

  .vcard-body{ position:relative; padding:20px 22px 26px; }
  .vcard-title{ font-family:'Karla',sans-serif; font-weight:700; font-size:26px; line-height:1.15; letter-spacing:-0.01em; color:#fff; }
  .vcard .am-heading{ color:rgba(251,246,236,0.78); }
  .vcard .am-heading-main{ margin-top:18px; }
  .vcard .amenity-list.am-compact{ grid-template-columns:repeat(2, minmax(0, 1fr)); margin-top:12px; }
  .vcard .amenity-list li{ color:#fff; }
  .vcard .am-icon{ color:rgba(255,255,255,0.9); opacity:1; }
  .vcard .am-more{ color:#fff; }
  .vcard .am-more:hover{ color:rgba(255,255,255,0.8); }
  .vcard .villa-activities{ border-top-color:rgba(255,255,255,0.18); }
  .vcard .am-soon{ color:rgba(255,255,255,0.75) !important; opacity:1; }
  .vcard .branch-actions{ margin-top:24px; }
  .vcard .branch-cta{ background:var(--paper); color:var(--ink); }
  .vcard .branch-cta:hover{ box-shadow:0 10px 24px rgba(0,0,0,0.25); }
  .vcard .villa-learn{ background:rgba(255,255,255,0.12); color:#fff; border-color:rgba(255,255,255,0.4); }
  .vcard .villa-learn:hover{ background:rgba(255,255,255,0.22); border-color:#fff; }

  @media (min-width:901px){
    .vcard{ flex-direction:row; align-items:stretch; }
    .vcard-photos{ flex:0 0 54%; height:auto; padding-bottom:0; min-height:600px; }
    .vcard-fade{ top:0; bottom:0; left:auto; right:0; width:22%; height:auto;
      -webkit-mask-image:linear-gradient(to right, transparent, #000); mask-image:linear-gradient(to right, transparent, #000); }
    .vcard-body{ flex:1 1 auto; min-width:0; padding:44px 40px 40px 28px; display:flex; flex-direction:column; justify-content:center; }
    .vcard-title{ font-size:30px; }
  }
  @media (max-width:640px){
    .vsec-leaves{ left:-60px; right:-60px; }
    .vsec-leaves .leaf-a{ left:20px; width:140px; }
    .vsec-leaves .leaf-b{ right:30px; width:190px; }
    .vsec-leaves .leaf-c{ right:0; width:86px; }
    .vsec-leaves .leaf-d{ right:30px; width:200px; }
    .vsec > .villa-sign{ width:224px; margin-bottom:20px; }
    .vcard{ border-radius:30px; }
    .vcard-body{ padding:16px 18px 22px; }
    .vcard-title{ font-size:23px; }
    .vsec > .vsec-sea{ left:-24px; right:-24px; height:84px; bottom:-50px; }
  }
  .vcard .am-more{ align-self:flex-start; }

  /* "Beyond the villa": experience cards in the villa-card style (homepage, 2026-10-08) */
  .exp-cards{ padding:80px 0; }
  .exp-cards .section-head-compact{ text-align:center; margin:0 auto 40px; }
  .exp-cards .trips-row{ max-width:800px; }
  .exp-cards .trip-body{ margin-top:-60px; }
  .exp-cards-more{ text-align:center; margin-top:48px; }
  @media (max-width:640px){ .exp-cards{ padding:56px 0; } .exp-cards .section-head-compact{ margin-bottom:28px; } .exp-cards-more{ margin-top:32px; } }
  /* on computers the experience cards are a row you scroll sideways, with arrows */
  .exp-nav{ display:none; }
  @media (min-width:641px){
    .exp-cards .exp-row{
      max-width:var(--max); flex-wrap:nowrap; justify-content:flex-start;
      overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
      scrollbar-width:none; padding-top:8px; padding-bottom:48px; margin-bottom:-48px;
    }
    .exp-cards .exp-row::-webkit-scrollbar{ display:none; }
    .exp-cards .exp-row .trip{ flex:0 0 320px; margin:0 24px 0 0; scroll-snap-align:start; }
    .exp-nav{ display:flex; justify-content:flex-end; gap:10px; margin-top:-76px; margin-bottom:32px; }
    .exp-arrow{
      width:44px; height:44px; padding:0; border:1px solid var(--line); border-radius:50%; cursor:pointer;
      display:flex; align-items:center; justify-content:center; background:var(--paper); color:var(--wine);
      transition:background-color .25s var(--ease-hover), opacity .25s var(--ease-hover);
    }
    .exp-arrow svg{ width:16px; height:16px; }
    .exp-arrow:hover{ background:var(--sand); }
    .exp-arrow:disabled{ opacity:.35; cursor:default; }
  }
  /* the villa filter beside "Beyond the villa" */
  .visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .exp-cards .exp-head{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px 20px; max-width:none; }
  .exp-filter{ position:relative; z-index:5; }
  .exp-filter-btn{
    display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 16px 0 14px;
    border:1px solid rgba(61,15,22,0.28); border-radius:999px; background:var(--paper); cursor:pointer;
    font-family:'Karla',sans-serif; font-size:var(--fs-sm); font-weight:700; color:var(--wine);
    transition:border-color .25s var(--ease-hover), background-color .25s var(--ease-hover);
  }
  .exp-filter-btn:hover, .exp-filter-btn[aria-expanded="true"]{ border-color:var(--wine); background:#fff; }
  .exp-filter-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
  .exp-filter-chev{ width:15px; height:15px; margin-left:2px; transition:transform .3s var(--ease-out); }
  .exp-filter-btn[aria-expanded="true"] .exp-filter-chev{ transform:rotate(180deg); }
  .exp-opt-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
  .dot-both{ background:linear-gradient(135deg, rgb(112,88,60) 50%, rgb(66,72,48) 50%); }
  .dot-ab{ background:rgb(112,88,60); }
  .dot-wp{ background:rgb(66,72,48); }
  .exp-filter-menu{
    position:absolute; top:calc(100% + 8px); left:50%; min-width:220px; margin:0 0 0 -110px; padding:6px;
    list-style:none; border-radius:18px; background:var(--paper);
    box-shadow:0 0 0 1px var(--line), 0 18px 40px -16px rgba(36,26,18,0.35);
    opacity:0; -webkit-transform:translateY(-6px); transform:translateY(-6px);
    transition:opacity .2s var(--ease-out), transform .25s var(--ease-out);
  }
  .exp-filter-menu.is-open{ opacity:1; -webkit-transform:none; transform:none; }
  .exp-filter-menu:focus{ outline:none; }
  .exp-filter-menu li{
    display:flex; align-items:center; gap:10px; min-height:44px; padding:0 12px; border-radius:12px; cursor:pointer;
    font-family:'Karla',sans-serif; font-size:var(--fs-sm); font-weight:600; color:var(--ink); text-align:left;
    transition:background-color .15s var(--ease-hover);
  }
  .exp-filter-menu li:hover, .exp-filter-menu li.is-active{ background:var(--sand); }
  .exp-filter-menu li[aria-selected="true"]{ color:var(--wine); font-weight:700; }
  .exp-opt-name{ flex:1 1 auto; }
  .exp-opt-count{ min-width:22px; height:22px; padding:0 7px; border-radius:999px; background:rgba(61,15,22,0.07); color:var(--bark); font-size:var(--fs-2xs); font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
  .exp-opt-check{ width:16px; height:16px; color:var(--wine); visibility:hidden; }
  .exp-filter-menu li[aria-selected="true"] .exp-opt-check{ visibility:visible; }
  @media (prefers-reduced-motion: reduce){ .exp-filter-menu{ transition:none; } }
  .exp-cards .trip.is-filtered{ display:none; }
  /* the villa filter sits with the arrows on computers; on phones (no arrows) it is centred */
  .exp-nav{ display:flex; justify-content:center; align-items:center; gap:10px; margin:-12px auto 28px; }
  .exp-nav .exp-arrow{ display:none; }
  @media (min-width:641px){
    .exp-nav{ justify-content:flex-end; margin-top:-76px; margin-bottom:32px; }
    .exp-nav .exp-arrow{ display:flex; }
    .exp-nav .exp-filter{ margin-right:6px; }
    .exp-nav .exp-filter-menu{ left:auto; right:0; margin:0; }
  }
  /* phones: the filter sits on the same line as the title */
  @media (max-width:640px){
    .exp-cards .exp-head{ justify-content:space-between; text-align:left; margin-bottom:0; }
    .exp-cards .exp-head h2{ font-size:26px; }
    .exp-nav{ justify-content:flex-end; margin:-56px auto 24px; }
    .exp-nav .exp-filter-btn{ min-height:40px; padding:0 12px; }
    .exp-nav .exp-filter-menu{ left:auto; right:0; margin:0; }
  }
  @media (max-width:640px){
    .exp-cards .exp-head h2{ font-size:23px; }
    .exp-cards .exp-head .draw-line{ padding-bottom:8px; }
    .exp-nav{ margin-top:-50px; }
    .exp-nav .exp-filter-btn{ min-height:38px; padding:0 11px; gap:7px; font-size:var(--fs-xs); }
  }
  @media (max-width:360px){ .exp-cards .exp-head h2{ font-size:20px; } }
  /* the arrows and filter sit above the title block, which overlaps them */
  .exp-nav{ position:relative; z-index:6; }
  @media (min-width:641px){ .exp-cards .exp-row{ scroll-padding:0 32px; } }
  @media (max-width:640px){ .exp-nav{ margin-top:-40px; } }
  @media (max-width:360px){ .exp-nav{ margin-top:-38px; } }
  /* the WhatsApp card: "Contact us" in the villa cards' title style, and their corners */
  .enquire-card{ border-radius:38px; }
  .enquire-card h2.vcard-title{ margin-top:0; font-size:26px; }
  .enquire-card .enquire-photo{ margin-top:16px; }
  @media (min-width:900px){ .enquire-card{ border-radius:38px; } .enquire-card h2.vcard-title{ font-size:30px; } }
  @media (max-width:640px){ .enquire-card{ border-radius:30px; } .enquire-card h2.vcard-title{ font-size:23px; } }
  /* more branches framing the villa cards, so the space around them is filled */
  .vsec-leaves{ top:-90px; bottom:-110px; }
  .vsec-leaves .leaf-e{ top:38%; left:10px; width:120px; }
  .vsec-leaves .leaf-e img{ -webkit-mask-image:linear-gradient(to right, transparent 0, #000 30%); mask-image:linear-gradient(to right, transparent 0, #000 30%); -webkit-transform:scaleX(-1); transform:scaleX(-1); }
  .vsec-leaves .leaf-f{ bottom:20px; left:40px; width:230px; }
  .vsec-leaves .leaf-f img{ -webkit-mask-image:linear-gradient(to top, transparent 0, #000 30%), linear-gradient(to right, transparent 0, #000 30%); mask-image:linear-gradient(to top, transparent 0, #000 30%), linear-gradient(to right, transparent 0, #000 30%); -webkit-mask-composite:source-in; mask-composite:intersect; }
  .vsec-leaves .leaf-f > .frond-sway{ -webkit-transform:scaleY(-1); transform:scaleY(-1); }
  .vsec-leaves .leaf-g{ top:-30px; left:38%; width:260px; }
  .vsec-leaves .leaf-g img{ -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 34%), linear-gradient(to left, transparent 0, #000 16%); mask-image:linear-gradient(to bottom, transparent 0, #000 34%), linear-gradient(to left, transparent 0, #000 16%); -webkit-mask-composite:source-in; mask-composite:intersect; }
  .vsec-leaves .leaf-h{ top:8%; right:-10px; width:110px; }
  .vsec-leaves .leaf-h img{ -webkit-mask-image:linear-gradient(to left, transparent 0, #000 30%); mask-image:linear-gradient(to left, transparent 0, #000 30%); }
  .vsec-leaves .leaf-i{ bottom:-10px; left:44%; width:200px; }
  .vsec-leaves .leaf-i img{ -webkit-mask-image:linear-gradient(to top, transparent 0, #000 30%), linear-gradient(to right, transparent 0, #000 30%); mask-image:linear-gradient(to top, transparent 0, #000 30%), linear-gradient(to right, transparent 0, #000 30%); -webkit-mask-composite:source-in; mask-composite:intersect; }
  .vsec-leaves .leaf-i > .frond-sway{ -webkit-transform:scaleY(-1); transform:scaleY(-1); }
  .zone-in .leaf-e, .zone-in .leaf-f, .zone-in .leaf-g, .zone-in .leaf-h, .zone-in .leaf-i{ -webkit-transform:none; transform:none; }
  .leaf-e, .leaf-f{ -webkit-transform:translate3d(-40%,0,0); transform:translate3d(-40%,0,0); }
  .leaf-g{ -webkit-transform:translate3d(0,-30%,0); transform:translate3d(0,-30%,0); }
  .leaf-h{ -webkit-transform:translate3d(40%,0,0); transform:translate3d(40%,0,0); }
  .leaf-i{ -webkit-transform:translate3d(0,30%,0); transform:translate3d(0,30%,0); }
  .zone-in .leaf-e{ transition-delay:.2s; } .zone-in .leaf-f{ transition-delay:.3s; } .zone-in .leaf-g{ transition-delay:.1s; } .zone-in .leaf-h{ transition-delay:.25s; } .zone-in .leaf-i{ transition-delay:.35s; }
  .leaf-e .frond-sway img, .leaf-f .frond-sway img, .leaf-i .frond-sway img{ transform-origin:top left; }
  .leaf-g .frond-sway img, .leaf-h .frond-sway img{ transform-origin:top right; }
  .leaf-e .frond-sway img{ animation:frond-flex 10s ease-in-out infinite -2s; }
  .leaf-f .frond-sway img{ animation:frond-flex 12s ease-in-out infinite -6s; }
  .leaf-g .frond-sway img{ animation:frond-flex 11s ease-in-out infinite -4s; }
  .leaf-h .frond-sway img{ animation:frond-flex 9s ease-in-out infinite -1s; }
  .leaf-i .frond-sway img{ animation:frond-flex 13s ease-in-out infinite -8s; }
  @media (max-width:640px){
    .vsec-leaves{ top:-60px; bottom:-80px; }
    .vsec-leaves .leaf-e{ left:0; width:70px; }
    .vsec-leaves .leaf-f{ left:10px; width:140px; }
    .vsec-leaves .leaf-g{ left:30%; width:160px; top:-20px; }
    .vsec-leaves .leaf-h{ right:0; width:66px; }
    .vsec-leaves .leaf-i{ left:40%; width:130px; }
  }
  @media (prefers-reduced-motion: reduce){ .leaf-e,.leaf-f,.leaf-g,.leaf-h,.leaf-i{ transition:none; } }
  /* card titles in the hero headline font (Fraunces) */
  .vcard-title, .trip-title, .enquire-card h2.vcard-title{ font-family:'Fraunces',serif; font-weight:500; letter-spacing:-0.015em; line-height:1.1; }
  .vcard-title{ font-size:30px; }
  .trip-title{ font-size:25px; }
  @media (min-width:901px){ .vcard-title, .enquire-card h2.vcard-title{ font-size:34px; } }
  @media (max-width:640px){ .vcard-title, .enquire-card h2.vcard-title{ font-size:26px; } .trip-title{ font-size:24px; } }
  /* desktop: no blended strip between the photo and the text; the photo ends cleanly */
  @media (min-width:901px){ .vcard-fade{ display:none; } }
  /* no blended strip on phones either; and no photo arrows on phones (they swipe) */
  .vcard-fade{ display:none; }
  @media (max-width:900px){ .vcard-arrow{ display:none !important; } }

  /* Contact us: the chosen villa's scenery in the background (Arugam Bay: teal leaves and
     waves; Wilpattu: green leaves), crossfading as the villa changes. "Not sure yet" shows
  both, lightly. Same artwork and sway as the villa sections. */
  .enquire{ overflow:hidden; }
  .enquire > .wrap{ position:relative; z-index:1; }
  .enq-scene{ position:absolute; top:0; left:0; right:0; bottom:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .8s var(--ease-out); }
  .enquire[data-villa="Arugam Bay"] .enq-ab, .enquire[data-villa="Wilpattu"] .enq-wp{ opacity:1; }
  .enquire[data-villa="either"] .enq-scene{ opacity:.5; }
  .eleaf{ position:absolute; opacity:.6; }
  .eleaf img{ display:block; width:100%; height:auto; max-width:none; }
  .el-1{ top:-20px; left:-30px; width:240px; }
  .el-1 img{ -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 30%), linear-gradient(to right, transparent 0, #000 34%); mask-image:linear-gradient(to bottom, transparent 0, #000 30%), linear-gradient(to right, transparent 0, #000 34%); -webkit-mask-composite:source-in; mask-composite:intersect; }
  .el-2{ top:-20px; right:6%; width:320px; }
  .el-2 img{ -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 34%), linear-gradient(to left, transparent 0, #000 16%); mask-image:linear-gradient(to bottom, transparent 0, #000 34%), linear-gradient(to left, transparent 0, #000 16%); -webkit-mask-composite:source-in; mask-composite:intersect; }
  .el-3{ top:34%; right:-20px; width:130px; }
  .el-3 img{ -webkit-mask-image:linear-gradient(to left, transparent 0, #000 30%); mask-image:linear-gradient(to left, transparent 0, #000 30%); }
  .el-4{ bottom:-20px; right:4%; width:300px; }
  .el-4 > .frond-sway{ -webkit-transform:scaleY(-1); transform:scaleY(-1); }
  .el-4 img{ -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 34%), linear-gradient(to left, transparent 0, #000 16%); mask-image:linear-gradient(to bottom, transparent 0, #000 34%), linear-gradient(to left, transparent 0, #000 16%); -webkit-mask-composite:source-in; mask-composite:intersect; }
  .el-5{ bottom:-20px; left:-10px; width:230px; }
  .el-5 > .frond-sway{ -webkit-transform:scaleY(-1); transform:scaleY(-1); }
  .el-5 img{ -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 30%), linear-gradient(to right, transparent 0, #000 30%); mask-image:linear-gradient(to bottom, transparent 0, #000 30%), linear-gradient(to right, transparent 0, #000 30%); -webkit-mask-composite:source-in; mask-composite:intersect; }
  .el-6{ top:36%; left:-10px; width:120px; }
  .el-6 img{ -webkit-mask-image:linear-gradient(to right, transparent 0, #000 30%); mask-image:linear-gradient(to right, transparent 0, #000 30%); -webkit-transform:scaleX(-1); transform:scaleX(-1); }
  .el-1 .frond-sway img, .el-5 .frond-sway img, .el-6 .frond-sway img{ transform-origin:top left; }
  .el-2 .frond-sway img, .el-3 .frond-sway img, .el-4 .frond-sway img{ transform-origin:top right; }
  .el-1 .frond-sway img{ animation:frond-flex 9s ease-in-out infinite; }
  .el-2 .frond-sway img{ animation:frond-flex 11s ease-in-out infinite -3s; }
  .el-3 .frond-sway img{ animation:frond-flex 10s ease-in-out infinite -5s; }
  .el-4 .frond-sway img{ animation:frond-flex 12s ease-in-out infinite -7s; }
  .el-5 .frond-sway img{ animation:frond-flex 13s ease-in-out infinite -2s; }
  .el-6 .frond-sway img{ animation:frond-flex 10s ease-in-out infinite -6s; }
  .enq-sea{ position:absolute; left:0; right:0; bottom:0; height:110px; overflow:hidden;
    -webkit-mask-image:linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); mask-image:linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); }
  .enq-sea .sea-back{ bottom:46px; }
  .enq-sea .sea-front{ bottom:20px; }
  @media (max-width:640px){
    .el-1{ width:150px; } .el-2{ width:190px; right:0; } .el-3{ width:76px; } .el-4{ width:190px; right:0; } .el-5{ width:150px; } .el-6{ width:70px; }
    .enq-sea{ height:84px; }
  }
  @media (prefers-reduced-motion: reduce){ .enq-scene{ transition:none; } .enq-scene .frond-sway img, .enq-sea .sea-bob, .enq-sea .sea-band{ animation:none; } }

  /* the leaves, waves and signs hold still while off screen (script.js adds .motion-off),
     and so does the Contact us scenery that is faded out: only what can be seen moves */
  .motion-off, .motion-off *,
  .enquire[data-villa="Arugam Bay"] .enq-wp *, .enquire[data-villa="Wilpattu"] .enq-ab *{ animation-play-state:paused !important; }

  /* ---------- inner pages in the homepage card style (2026-10-08) ---------- */
  /* light info card: "Finding the villa", "You don't organise anything" */
  .info-sec{ padding:80px 0; }
  .info-card{
    --tint:rgb(128, 113, 80);
    max-width:1040px; margin:0 auto; padding:44px 48px; border-radius:38px; color:#fff;
    background-color:var(--tint);
    box-shadow:0 0 0 1px rgba(246,238,223,0.08), 0 28px 50px -28px rgba(36,26,18,0.55);
  }
  .info-intro{ margin-top:12px; max-width:60ch; font-size:var(--fs-base); line-height:1.6; color:rgba(255,255,255,0.86); }
  .info-list{ margin:24px 0 0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px 40px; }
  .info-row dt{ font-size:var(--fs-xs); font-weight:700; letter-spacing:var(--tr-eyebrow); text-transform:uppercase; color:rgba(251,246,236,0.78); margin-bottom:6px; }
  .info-row dd{ margin:0; font-size:var(--fs-base); line-height:1.6; color:#fff; }
  .info-card .branch-actions{ margin-top:28px; }
  .info-card .branch-cta{ background:var(--paper); color:var(--ink); }
  .info-card .villa-learn{ background:rgba(255,255,255,0.12); color:#fff; border-color:rgba(255,255,255,0.4); }
  @media (max-width:640px){ .info-sec{ padding:48px 0; } .info-card{ padding:26px 20px; border-radius:30px; } .info-list{ grid-template-columns:1fr; gap:18px; } }

  /* experiences page: a big card per experience, then small cards */
  .exp-page-sec{ padding:72px 0; }
  .exp-page-sec.alt{ background:var(--sand); }
  .exp-page-sec .section-head-compact{ text-align:center; margin:0 auto 36px; }
  .vcard-exp{ max-width:1040px; margin:0 auto; }
  .vcard-desc{ margin-top:12px; font-size:var(--fs-base); line-height:1.6; color:rgba(255,255,255,0.88); }
  .vcard .vcard-includes{ margin-top:16px; }
  .vcard .vcard-includes li::before{ background:rgba(255,255,255,0.85); }
  .exp-page-row{ margin-top:40px; }
  .exp-page-row .trip-reserve{ display:flex; align-items:center; justify-content:center; text-decoration:none; }
  @media (max-width:640px){ .exp-page-sec{ padding:48px 0; } .exp-page-row{ margin-top:28px; } }