/* ============ TOKENS ============ */
  :root{
    --bg:#FBF5EA;
    --surface:#FFFFFF;
    --surface-2:#F3E7D3;
    --surface-3:#EADCC3;
    --ink:#2A2018;
    --ink-soft:#6E5D4C;
    --ink-faint:#9C8A76;
    --terracotta:#2CA698;
    --terracotta-deep:#1F7E73;
    --terracotta-tint:#D8F0EC;
    --turquoise:#1C8877;
    --turquoise-deep:#136155;
    --turquoise-tint:#D8EEE9;
    --teal-wall:#4C6E69;
    --bougainvillea:#B93764;
    --gold:#C89A4B;
    --line:rgba(42,32,24,0.14);
    --line-soft:rgba(42,32,24,0.08);
    --shadow: 24 18 12;
    --radius-s:10px;
    --radius-m:18px;
    --radius-l:30px;
    --maxw:1280px;
    --zellige-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23FFF3E6' stroke-opacity='0.08' stroke-width='1.2'%3E%3Cpath d='M32 2 46 16 32 30 18 16Z'/%3E%3Cpath d='M0 32 14 18 28 32 14 46Z'/%3E%3Cpath d='M64 32 50 18 36 32 50 46Z'/%3E%3Cpath d='M32 34 46 48 32 62 18 48Z'/%3E%3C/g%3E%3C/svg%3E");
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#1B160F;
      --surface:#241D14;
      --surface-2:#2E2517;
      --surface-3:#3A2E1B;
      --ink:#F4E9D8;
      --ink-soft:#CBB89E;
      --ink-faint:#8C7A64;
      --terracotta:#4FCBB8;
      --terracotta-deep:#7BDFCF;
      --terracotta-tint:#123330;
      --turquoise:#4BC4AC;
      --turquoise-deep:#7BD8C4;
      --turquoise-tint:#1C332F;
      --teal-wall:#7DA29B;
      --bougainvillea:#E06F94;
      --gold:#D9B876;
      --line:rgba(244,233,216,0.16);
      --line-soft:rgba(244,233,216,0.09);
      --shadow: 0 0 0;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --bg:#1B160F;
    --surface:#241D14;
    --surface-2:#2E2517;
    --surface-3:#3A2E1B;
    --ink:#F4E9D8;
    --ink-soft:#CBB89E;
    --ink-faint:#8C7A64;
    --terracotta:#4FCBB8;
    --terracotta-deep:#7BDFCF;
    --terracotta-tint:#123330;
    --turquoise:#4BC4AC;
    --turquoise-deep:#7BD8C4;
    --turquoise-tint:#1C332F;
    --teal-wall:#7DA29B;
    --bougainvillea:#E06F94;
    --gold:#D9B876;
    --line:rgba(244,233,216,0.16);
    --line-soft:rgba(244,233,216,0.09);
    --shadow: 0 0 0;
    color-scheme: dark;
  }

  /* ============ RESET / BASE ============ */
  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth; scroll-padding-top:96px;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Karla', ui-sans-serif, system-ui, sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block;}
  a{color:inherit;}
  h1,h2,h3,h4{
    font-family:'Fraunces', Georgia, 'Times New Roman', serif;
    font-weight:560;
    margin:0;
    text-wrap:balance;
    color:var(--ink);
  }
  p{margin:0;}
  .eyebrow{
    font-family:'Cairo', ui-sans-serif, sans-serif;
    text-transform:uppercase;
    letter-spacing:0.16em;
    font-size:0.76rem;
    font-weight:700;
    color:var(--terracotta-deep);
  }
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem);}
  .btn{
    font-family:'Cairo',sans-serif;
    font-weight:700;
    font-size:0.92rem;
    letter-spacing:0.02em;
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    padding:0.9rem 1.6rem;
    border-radius:999px;
    border:1.5px solid transparent;
    cursor:pointer;
    text-decoration:none;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
    white-space:nowrap;
  }
  .btn:focus-visible{ outline:3px solid var(--turquoise); outline-offset:3px; }
  .btn-primary{ background:var(--terracotta); color:#FFF8EF; box-shadow:0 10px 24px -10px rgba(var(--shadow)/0.55); }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 28px -10px rgba(var(--shadow)/0.6); background:var(--terracotta-deep); }
  .btn-ghost{ background:transparent; color:var(--bg); border-color:rgba(255,248,239,0.6); }
  .btn-ghost:hover{ background:rgba(255,248,239,0.14); border-color:#fff; }
  .btn-line{ background:transparent; color:var(--ink); border-color:var(--line); }
  .btn-line:hover{ border-color:var(--terracotta); color:var(--terracotta-deep); }
  .section{ padding:clamp(3.5rem,8vw,6.5rem) 0; }
  .section-head{ max-width:640px; margin-bottom:clamp(2rem,5vw,3.25rem); }
  .section-head h2{ font-size:clamp(2rem,4vw,2.85rem); margin-top:0.5rem; }
  .section-head p{ color:var(--ink-soft); margin-top:0.9rem; font-size:1.05rem; max-width:56ch; }
  .center{ text-align:center; margin-left:auto; margin-right:auto; }

  /* arch clip motif, echoing the riad's horseshoe arches */
  .arch{ clip-path:url(#archClip); }
  .arch-inv{ clip-path:url(#archClipInv); }

  ::selection{ background:var(--terracotta); color:#fff8ef; }

  /* ============ NAV ============ */
  header.nav{
    position:fixed; inset:0 0 auto 0; z-index:60;
    display:flex; align-items:center;
    padding:0.85rem 0;
    background:var(--surface);
    box-shadow:0 1px 0 var(--line);
    transition:box-shadow .3s ease, padding .3s ease;
  }
  header.nav.scrolled{
    box-shadow:0 12px 28px -20px rgba(var(--shadow)/0.45), 0 1px 0 var(--line);
    padding:0.55rem 0;
  }
  .nav-inner{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
  .brand{ display:flex; align-items:center; gap:0.65rem; text-decoration:none; }
  .brand-mark{ width:36px; height:36px; flex:none; }
  .brand-word{ font-family:'Fraunces',serif; font-size:1.28rem; font-weight:600; letter-spacing:0.01em; color:var(--ink); }
  .brand-mark path.markfill{ fill:var(--terracotta); }
  nav.links{ display:flex; align-items:center; gap:clamp(1rem,2vw,2rem); }
  nav.links a{
    font-family:'Cairo',sans-serif; font-size:0.86rem; font-weight:600;
    text-transform:uppercase; letter-spacing:0.08em;
    text-decoration:none; color:var(--ink-soft); opacity:0.95;
    padding-bottom:3px; border-bottom:1.5px solid transparent;
    transition:color .3s ease, border-color .3s ease, opacity .3s;
  }
  nav.links a:hover{ opacity:1; border-color:var(--terracotta); color:var(--terracotta-deep); }
  .nav-cta{ display:flex; align-items:center; gap:0.7rem; }
  .nav-toggle{ display:none; }

  @media (max-width: 880px){
    nav.links{
      position:fixed; inset:0; z-index:70; display:flex; flex-direction:column;
      justify-content:center; align-items:center; gap:1.6rem;
      background:var(--surface); transform:translateX(100%); transition:transform .4s ease;
    }
    nav.links.open{ transform:translateX(0); }
    nav.links a{ color:var(--ink); font-size:1.05rem; }
    .nav-toggle{
      display:flex; align-items:center; justify-content:center;
      width:42px;height:42px; border-radius:50%; border:1.5px solid var(--line);
      background:transparent; cursor:pointer; z-index:80; position:relative;
    }
    .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
      content:""; position:absolute; width:18px; height:2px; background:var(--ink); transition:.3s;
    }
    .nav-toggle span::before{ transform:translateY(-6px); }
    .nav-toggle span::after{ transform:translateY(6px); }
    .nav-toggle.open span{ background:transparent; }
    .nav-toggle.open span::before{ transform:rotate(45deg); background:var(--ink); }
    .nav-toggle.open span::after{ transform:rotate(-45deg); background:var(--ink); }
    .nav-cta .btn-ghost, .nav-cta .btn-line{ display:none; }
  }

  /* ============ HERO / SLIDER ============ */
  .hero{ position:relative; min-height:clamp(540px,72svh,740px); display:flex; align-items:flex-end; overflow:hidden; }
  .hero-media{ position:absolute; inset:0; }
  .hero-slide{
    position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease;
  }
  .hero-slide.active{ opacity:1; z-index:1; }
  .hero-slide img{ width:100%; height:100%; object-fit:cover; object-position:center 38%; }
  .hero-overlay{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, rgba(20,14,8,0.30) 0%, rgba(20,14,8,0.12) 35%, rgba(20,14,8,0.55) 74%, rgba(20,14,8,0.86) 100%);
  }
  .hero-content{ position:relative; z-index:2; width:100%; padding:clamp(5.75rem,11vw,7.75rem) 0 clamp(5.5rem,8.5vw,6.75rem); color:#FFF8EF; }
  .hero-eyebrow{ font-family:'Cairo',sans-serif; text-transform:uppercase; letter-spacing:0.28em; font-size:0.78rem; font-weight:700; color:#F2CDA8; margin-bottom:1.1rem; display:flex; align-items:center; gap:0.7rem;}
  .hero-eyebrow::before{ content:""; width:34px; height:1.5px; background:#F2CDA8; display:inline-block;}
  .hero h1{ font-size:clamp(2.9rem,7.2vw,5.6rem); color:#FFF8EF; font-weight:500; line-height:1.02; max-width:17ch; min-height:1.1em; }
  .hero h1 em{ font-style:italic; font-weight:440; color:#F6DCC0; }
  .type-caret{ display:inline-block; width:3px; height:0.82em; margin-left:5px; background:#FFF8EF; vertical-align:-0.05em; animation:caretBlink 0.95s steps(1) infinite; }
  @media (prefers-reduced-motion: reduce){ .type-caret{ display:none; } }
  @keyframes caretBlink{ 50%{ opacity:0; } }
  .hero-sub{ margin-top:1.5rem; max-width:46ch; font-size:1.14rem; color:#F1E6D8; }
  .hero-actions{ margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:1rem; }

  /* slider arrows + dots */
  .hero-arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:3;
    width:48px; height:48px; border-radius:50%; border:1.5px solid rgba(255,248,239,0.5);
    background:rgba(20,14,8,0.28); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center; color:#FFF8EF; cursor:pointer;
    transition:background .25s ease, border-color .25s ease, transform .25s ease;
  }
  .hero-arrow:hover{ background:rgba(20,14,8,0.5); border-color:#fff; }
  .hero-arrow svg{ width:20px; height:20px; }
  .hero-arrow.prev{ left:clamp(0.75rem,3vw,2rem); }
  .hero-arrow.next{ right:clamp(0.75rem,3vw,2rem); }
  @media (max-width:640px){ .hero-arrow{ width:38px; height:38px; } .hero-arrow svg{ width:16px; height:16px; } }

  .hero-dots{ position:absolute; z-index:3; left:0; right:0; bottom:clamp(5.5rem,8.5vw,6.75rem); display:flex; justify-content:center; gap:0.55rem; }
  .hero-dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,248,239,0.45); border:none; cursor:pointer; padding:0; transition:background .25s ease, transform .25s ease; }
  .hero-dot.active{ background:#FFF8EF; transform:scale(1.25); }

  /* booking bar */
  .booking-wrap{ position:relative; z-index:4; margin-top:clamp(-4.5rem,-7vw,-3.25rem); pointer-events:none; }
  .booking-bar{
    pointer-events:auto;
    background:var(--surface); border-radius:var(--radius-m);
    box-shadow:0 26px 50px -20px rgba(var(--shadow)/0.4), 0 2px 0 var(--line-soft);
    border:1px solid var(--line-soft);
    display:flex; align-items:stretch;
    padding:0.4rem;
    gap:0.2rem;
  }
  .booking-field{
    flex:1; display:flex; flex-direction:column; justify-content:center; gap:0.25rem;
    padding:0.7rem 1.2rem; border-right:1px solid var(--line-soft); min-width:0;
  }
  .booking-field:last-of-type{ border-right:none; }
  .booking-field label{
    font-family:'Cairo',sans-serif; font-size:0.68rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.08em; color:var(--ink-faint);
  }
  .booking-field input, .booking-field select{
    border:none; background:transparent; font-family:'Karla',sans-serif; font-size:0.98rem;
    color:var(--ink); padding:0; font-weight:600; width:100%; font-variant-numeric:tabular-nums;
  }
  .booking-field input:focus, .booking-field select:focus{ outline:none; }
  .booking-field input::-webkit-calendar-picker-indicator{ filter:var(--pickfilter,none); opacity:0.6; cursor:pointer; }
  :root:not([data-theme="light"]) .booking-field input::-webkit-calendar-picker-indicator{ filter:invert(1); }
  :root[data-theme="dark"] .booking-field input::-webkit-calendar-picker-indicator{ filter:invert(1); }
  .booking-submit{
    flex:none; display:flex; align-items:center; gap:0.5rem; justify-content:center;
    background:var(--terracotta); color:#FFF8EF; border:none; border-radius:calc(var(--radius-m) - 0.4rem);
    font-family:'Cairo',sans-serif; font-weight:700; font-size:0.92rem; letter-spacing:0.01em;
    padding:0 1.7rem; cursor:pointer; transition:background .25s ease, transform .25s ease;
  }
  .booking-submit:hover{ background:var(--terracotta-deep); transform:translateY(-1px); }
  .booking-submit svg{ width:17px; height:17px; }
  @media (max-width:900px){
    .booking-bar{ flex-wrap:wrap; }
    .booking-field{ flex:1 1 42%; border-right:none; border-bottom:1px solid var(--line-soft); }
    .booking-submit{ flex:1 1 100%; padding:0.9rem; margin-top:0.2rem; }
  }
  @media (max-width:560px){ .booking-field{ flex:1 1 100%; } }

  /* ============ REVEAL ============ */
  .reveal{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: no-preference){
    .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
    .reveal.in{ opacity:1; transform:none; }
  }

  /* ============ SURF & ACTIVITIES TEASER ============ */
  .activities-teaser{ padding:clamp(2.75rem,6vw,3.75rem) 0 clamp(2.25rem,5vw,3rem); background:var(--bg); }
  .activities-teaser-head{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:0.6rem 1.5rem; }
  .activities-teaser-head h2{ font-size:clamp(1.5rem,3vw,2.05rem); margin-top:0.35rem; flex:1 1 auto; }
  .teaser-chips{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1.6rem; }
  .teaser-chip{
    display:flex; align-items:center; gap:0.85rem; padding:1rem 1.1rem; border-radius:var(--radius-m);
    border:1px solid var(--line-soft); background:var(--surface); text-decoration:none; color:var(--ink);
    transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  }
  .teaser-chip:hover{ border-color:var(--terracotta); transform:translateY(-3px); box-shadow:0 14px 26px -18px rgba(var(--shadow)/0.4); }
  .teaser-chip .a-icon{
    width:40px; height:40px; border-radius:50%; background:var(--terracotta-tint); color:var(--terracotta-deep);
    display:flex; align-items:center; justify-content:center; flex:none;
  }
  .teaser-chip .a-icon svg{ width:19px; height:19px; }
  .teaser-chip strong{ display:block; font-family:'Cairo',sans-serif; font-size:0.92rem; font-weight:700; }
  .teaser-chip small{ display:block; margin-top:0.15rem; font-size:0.78rem; color:var(--ink-soft); }
  .teaser-more{
    display:inline-flex; align-items:center; gap:0.45rem; margin-top:1.5rem;
    font-family:'Cairo',sans-serif; font-weight:700; font-size:0.9rem; color:var(--terracotta-deep);
    text-decoration:none;
  }
  .teaser-more:hover{ text-decoration:underline; }
  @media (max-width:920px){ .teaser-chips{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:520px){ .teaser-chips{ grid-template-columns:1fr; } }

  /* ============ INTRO / WELCOME ============ */
  .welcome{ position:relative; overflow:hidden; }
  .welcome-grid{ display:grid; grid-template-columns:0.95fr 1.05fr; gap:clamp(2rem,6vw,4.5rem); align-items:center; }
  .welcome-media{ position:relative; }
  .welcome-media img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:4px 4px 220px 4px; }
  .welcome-media .tag{
    position:absolute; left:-1.2rem; bottom:-1.4rem; background:var(--surface);
    border:1px solid var(--line); border-radius:var(--radius-m); padding:1.1rem 1.4rem;
    box-shadow:0 22px 40px -18px rgba(var(--shadow)/0.35); max-width:230px;
  }
  .welcome-media .tag strong{ font-family:'Fraunces',serif; font-size:1.7rem; color:var(--terracotta-deep); display:block; }
  .welcome-media .tag span{ font-size:0.82rem; color:var(--ink-soft); }
  .welcome-text .eyebrow{ margin-bottom:0.9rem; }
  .welcome-text h2{ font-size:clamp(2.1rem,4.4vw,3.1rem); }
  .welcome-text p{ margin-top:1.15rem; color:var(--ink-soft); font-size:1.05rem; max-width:52ch; }
  .welcome-text p.lede{ color:var(--ink); font-size:1.2rem; font-family:'Fraunces',serif; font-style:italic; font-weight:440; margin-top:1.4rem; }
  @media (max-width:900px){
    .welcome-grid{ grid-template-columns:1fr; }
    .welcome-media{ order:-1; }
    .welcome-media .tag{ left:1rem; bottom:-1.2rem; }
  }

  /* ============ STAT STRIP ============ */
  .stats{
    background:var(--terracotta-deep);
    background-image:var(--zellige-dark);
    color:#FFF3E6; position:relative;
  }
  .stats-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:1.5rem 1rem; }
  .stat{ text-align:center; padding:0.4rem; }
  .stat .n{ font-family:'Cairo',sans-serif; font-weight:800; font-size:clamp(1.5rem,2.6vw,2.1rem); font-variant-numeric:tabular-nums; color:#FFF3E6; }
  .stat .l{ margin-top:0.35rem; font-size:0.82rem; color:#F3D9BE; font-family:'Cairo',sans-serif; letter-spacing:0.02em; }
  .stat svg{ width:26px; height:26px; margin:0 auto 0.5rem; opacity:0.92; }
  @media (max-width:920px){ .stats-grid{ grid-template-columns:repeat(3,1fr);} }
  @media (max-width:520px){ .stats-grid{ grid-template-columns:repeat(2,1fr);} }
  .stats-foot{ margin-top:2.1rem; text-align:center; font-size:0.92rem; color:#F3D9BE; border-top:1px solid rgba(255,243,230,0.22); padding-top:1.4rem; }

  /* ============ DISCOVER ROWS ============ */
  .discover-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:center; padding:clamp(2.4rem,5vw,3.6rem) 0; }
  .discover-row + .discover-row{ border-top:1px solid var(--line-soft); }
  .discover-row.rev .d-media{ order:2; }
  .d-media{ position:relative; }
  .d-media img{ width:100%; aspect-ratio:5/4; object-fit:cover; border-radius:6px; }
  .d-media img.arch{ border-radius:0; }
  .d-media .idx{
    position:absolute; top:-14px; left:-14px; width:58px; height:58px; border-radius:50%;
    background:var(--surface); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces',serif; font-style:italic; color:var(--terracotta-deep); font-size:1.15rem;
    box-shadow:0 10px 22px -10px rgba(var(--shadow)/0.4);
  }
  .d-text .eyebrow{ margin-bottom:0.7rem; }
  .d-text h3{ font-size:clamp(1.6rem,3vw,2.15rem); }
  .d-text p{ margin-top:1rem; color:var(--ink-soft); max-width:48ch; }
  .d-list{ list-style:none; margin:1.25rem 0 0; padding:0; display:flex; flex-direction:column; gap:0.65rem; }
  .d-list li{ display:flex; align-items:baseline; gap:0.6rem; color:var(--ink); font-size:0.98rem; }
  .d-list li::before{ content:"—"; color:var(--turquoise); font-weight:700; }
  @media (max-width:820px){
    .discover-row, .discover-row.rev{ grid-template-columns:1fr; }
    .discover-row.rev .d-media{ order:0; }
  }

  /* ============ ROOMS ============ */
  .rooms{ background:var(--surface-2); position:relative; }
  .room-quicknav{
    display:flex; gap:clamp(1rem,2.5vw,1.7rem); overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding:0.3rem 0.1rem 1rem; margin-bottom:1.6rem; scrollbar-width:thin;
  }
  .qn-item{ flex:none; width:96px; display:flex; flex-direction:column; align-items:center; gap:0.65rem; text-decoration:none; text-align:center; }
  .qn-circle{
    width:76px; height:76px; border-radius:50%; border:1.5px solid var(--line); background:var(--surface);
    color:var(--qc, var(--terracotta)); display:flex; align-items:center; justify-content:center;
    transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease; flex:none;
  }
  .qn-circle svg{ width:28px; height:28px; }
  .qn-item:hover .qn-circle{ border-color:var(--qc, var(--terracotta)); transform:translateY(-4px); box-shadow:0 14px 26px -16px rgba(var(--shadow)/0.4); }
  .qn-label{ font-family:'Cairo',sans-serif; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.02em; color:var(--ink-soft); line-height:1.3; }
  .qn-item:hover .qn-label{ color:var(--ink); }
  .rooms-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
  .room-card{
    background:var(--surface); border-radius:var(--radius-m); overflow:hidden; border:1px solid var(--line-soft);
    box-shadow:0 18px 34px -22px rgba(var(--shadow)/0.4); display:flex; flex-direction:column;
    transition:transform .35s ease, box-shadow .35s ease;
  }
  .room-card:hover{ transform:translateY(-6px); box-shadow:0 26px 44px -20px rgba(var(--shadow)/0.45); }
  .room-media{ position:relative; aspect-ratio:6/5; overflow:hidden; }
  .room-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
  .room-card:hover .room-media img{ transform:scale(1.06); }
  .room-media.swatch{ display:flex; align-items:center; justify-content:center; }
  .room-price{
    position:absolute; right:0.85rem; bottom:0.85rem; background:rgba(20,14,8,0.72); color:#FFF3E6;
    backdrop-filter:blur(6px); font-family:'Cairo',sans-serif; font-weight:700; font-size:0.82rem;
    padding:0.42rem 0.8rem; border-radius:999px; font-variant-numeric:tabular-nums;
  }
  .room-body{ padding:1.4rem 1.4rem 1.6rem; display:flex; flex-direction:column; gap:0.7rem; flex:1; }
  .room-name{ font-family:'Cairo',sans-serif; text-transform:uppercase; letter-spacing:0.06em; font-size:0.74rem; font-weight:700; color:var(--terracotta-deep); }
  .room-title{ font-family:'Fraunces',serif; font-style:italic; font-weight:500; font-size:1.32rem; color:var(--ink); }
  .room-desc{ color:var(--ink-soft); font-size:0.94rem; flex:1; }
  .room-specs{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.3rem; }
  .chip{
    font-family:'Cairo',sans-serif; font-size:0.74rem; font-weight:600; color:var(--ink-soft);
    background:var(--surface-2); border:1px solid var(--line-soft); padding:0.3rem 0.65rem; border-radius:999px;
    display:inline-flex; align-items:center; gap:0.35rem;
  }
  @media (max-width:1020px){ .rooms-grid{ grid-template-columns:repeat(2,1fr);} }
  @media (max-width:640px){ .rooms-grid{ grid-template-columns:1fr;} }

  /* ============ PERFECT FOR ============ */
  .perfect{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1rem; }
  .perfect-chip{
    display:flex; align-items:center; gap:0.6rem; padding:0.8rem 1.3rem; border-radius:999px;
    border:1px solid var(--line); font-family:'Cairo',sans-serif; font-weight:600; font-size:0.94rem;
    background:var(--surface);
  }
  .perfect-chip svg{ width:19px; height:19px; color:var(--turquoise); }

  /* ============ GALLERY ============ */
  .gallery{ background:var(--surface); }
  .gallery-grid{
    display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; grid-auto-flow:dense; gap:0.8rem;
  }
  .gallery-grid button{ all:unset; cursor:zoom-in; }
  .g-item{ position:relative; overflow:hidden; border-radius:8px; }
  .g-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease, filter .5s ease; }
  .g-item:hover img{ transform:scale(1.08); }
  .g-item::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(20,14,8,0.45)); opacity:0; transition:opacity .4s; }
  .g-item:hover::after{ opacity:1; }
  .g-item .g-label{
    position:absolute; left:0.75rem; bottom:0.65rem; color:#FFF3E6; font-family:'Cairo',sans-serif;
    font-size:0.78rem; font-weight:600; opacity:0; transform:translateY(6px); transition:.35s;
  }
  .g-item:hover .g-label{ opacity:1; transform:none; }
  .g-tall{ grid-row:span 2; }
  .g-wide{ grid-column:span 2; }
  @media (max-width:880px){
    .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; }
    .g-wide{ grid-column:span 2; }
  }

  .lightbox{
    position:fixed; inset:0; z-index:100; background:rgba(15,11,7,0.92); display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .3s ease; padding:2rem;
  }
  .lightbox.open{ opacity:1; pointer-events:auto; }
  .lightbox img{ max-width:min(92vw,1100px); max-height:86vh; border-radius:6px; box-shadow:0 30px 70px rgba(0,0,0,0.5); }
  .lightbox-close{
    position:absolute; top:1.5rem; right:1.5rem; width:44px; height:44px; border-radius:50%;
    background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.3); color:#fff; font-size:1.3rem;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
  }

  /* ============ WATCH / REEL ============ */
  .reel-section{ background:var(--surface-2); }
  .reel-grid{ display:grid; grid-template-columns:1.05fr 0.7fr; gap:clamp(2rem,6vw,4.5rem); align-items:center; }
  .reel-text .eyebrow{ margin-bottom:0.9rem; }
  .reel-text h2{ font-size:clamp(2rem,4vw,2.85rem); }
  .reel-text p.lede{ margin-top:1.15rem; color:var(--ink-soft); font-size:1.06rem; max-width:50ch; }
  .reel-features{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:1.5rem; }
  .reel-actions{ margin-top:2rem; }
  .reel-embed-wrap{
    max-width:400px; margin:0 auto; border-radius:var(--radius-m); overflow:hidden;
    box-shadow:0 26px 50px -22px rgba(var(--shadow)/0.4); border:1px solid var(--line-soft); background:var(--surface);
  }
  .reel-embed-wrap iframe, .reel-embed-wrap blockquote{ width:100% !important; }
  @media (max-width:900px){ .reel-grid{ grid-template-columns:1fr; } .reel-text{ order:1; text-align:center; } .reel-features{ justify-content:center; } .reel-embed-wrap{ order:0; } }

  /* ============ SERVICES ============ */
  .services{ background:var(--surface-2); }
  .services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
  .service-card{
    background:var(--surface); border-radius:var(--radius-m); padding:2rem 1.7rem; border:1px solid var(--line-soft);
    display:flex; flex-direction:column; gap:1rem;
  }
  .service-icon{
    width:54px; height:54px; border-radius:50%; background:var(--turquoise-tint); color:var(--turquoise-deep);
    display:flex; align-items:center; justify-content:center;
  }
  .service-icon svg{ width:26px; height:26px; }
  .service-card h3{ font-size:1.2rem; font-family:'Fraunces',serif; font-weight:560; }
  .service-card p{ color:var(--ink-soft); font-size:0.95rem; }
  @media (max-width:880px){ .services-grid{ grid-template-columns:1fr; } }

  .activities-head{ max-width:640px; margin:clamp(3rem,6vw,4rem) 0 1.75rem; }
  .activities-head h3{ font-family:'Fraunces',serif; font-weight:560; font-size:clamp(1.4rem,2.6vw,1.8rem); margin-top:0.4rem; }
  .activities-head p{ color:var(--ink-soft); margin-top:0.7rem; font-size:0.98rem; max-width:54ch; }
  .activities-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
  .activity-card{
    background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-m); overflow:hidden;
    display:flex; flex-direction:column; box-shadow:0 18px 34px -24px rgba(var(--shadow)/0.4);
    transition:border-color .3s ease, transform .35s ease, box-shadow .35s ease;
  }
  .activity-card:hover{ border-color:var(--terracotta); transform:translateY(-5px); box-shadow:0 24px 40px -20px rgba(var(--shadow)/0.45); }
  .activity-card.featured{ grid-column:span 2; }
  .activity-media{ position:relative; aspect-ratio:16/10; overflow:hidden; flex:none; }
  .activity-card.featured .activity-media{ aspect-ratio:16/9; }
  .activity-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
  .activity-card:hover .activity-media img{ transform:scale(1.06); }
  .activity-media.grad{
    display:flex; align-items:center; justify-content:center; color:#FFF3E6; position:relative;
    background-image:var(--zellige-dark), linear-gradient(140deg, var(--g1), var(--g2));
  }
  .activity-media.grad svg{ width:44px; height:44px; position:relative; z-index:1; opacity:0.95; }
  .activity-media.grad.grad-1{ --g1:var(--terracotta-deep); --g2:var(--terracotta); }
  .activity-media.grad.grad-2{ --g1:var(--turquoise-deep,var(--turquoise)); --g2:var(--turquoise); }
  .activity-media.grad.grad-3{ --g1:var(--ink); --g2:var(--terracotta-deep); }
  .activity-tag{
    position:absolute; left:0.85rem; bottom:0.85rem; background:rgba(20,14,8,0.68); color:#FFF3E6;
    backdrop-filter:blur(6px); font-family:'Cairo',sans-serif; font-weight:600; font-size:0.72rem;
    letter-spacing:0.02em; padding:0.36rem 0.72rem; border-radius:999px;
  }
  .activity-body{ padding:1.3rem 1.35rem 1.5rem; display:flex; flex-direction:column; gap:0.55rem; flex:1; }
  .activity-card h4{ font-family:'Fraunces',serif; font-weight:560; font-size:1.08rem; }
  .activity-card p{ color:var(--ink-soft); font-size:0.87rem; }
  @media (max-width:900px){ .activities-grid{ grid-template-columns:repeat(2,1fr); } .activity-card.featured{ grid-column:span 2; } }
  @media (max-width:560px){ .activities-grid{ grid-template-columns:1fr; } .activity-card.featured{ grid-column:span 1; } }

  /* ============ CTA BAND ============ */
  .cta-band{ position:relative; overflow:hidden; background:var(--ink); color:#FFF3E6; }
  .cta-band .cta-media{ position:absolute; inset:0; }
  .cta-band .cta-media img{ width:100%; height:100%; object-fit:cover; opacity:0.42; }
  .cta-band .cta-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(20,14,8,0.92) 15%, rgba(20,14,8,0.55) 75%); }
  .cta-inner{ position:relative; z-index:2; text-align:center; max-width:680px; margin:0 auto; }
  .cta-inner h2{ color:#FFF8EF; font-size:clamp(2rem,4.4vw,3rem); }
  .cta-inner p{ margin-top:1.1rem; color:#EAD9C5; font-size:1.08rem; }
  .cta-inner .hero-actions{ justify-content:center; margin-top:2rem; }

  /* ============ CONTACT ============ */
  .contact-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
  .contact-cards{ display:flex; flex-direction:column; gap:1rem; }
  .contact-card{
    display:flex; gap:1rem; align-items:flex-start; padding:1.3rem 1.4rem; border:1px solid var(--line-soft);
    border-radius:var(--radius-m); background:var(--surface); text-decoration:none; color:var(--ink);
    transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  }
  .contact-card:hover{ border-color:var(--turquoise); transform:translateX(4px); box-shadow:0 14px 30px -18px rgba(var(--shadow)/0.35); }
  .contact-ico{
    flex:none; width:44px; height:44px; border-radius:50%; background:var(--terracotta-tint); color:var(--terracotta-deep);
    display:flex; align-items:center; justify-content:center;
  }
  .contact-ico svg{ width:21px; height:21px; }
  .contact-card h4{ font-family:'Cairo',sans-serif; font-size:0.95rem; font-weight:700; }
  .contact-card p{ font-size:0.87rem; color:var(--ink-soft); margin-top:0.15rem; }
  .contact-card .sub{ font-size:0.78rem; color:var(--ink-faint); margin-top:0.3rem; }

  .map-card{
    border-radius:var(--radius-m); overflow:hidden; border:1px solid var(--line-soft); background:var(--surface);
    box-shadow:0 20px 40px -24px rgba(var(--shadow)/0.4);
  }
  .map-visual{ position:relative; aspect-ratio:4/3; background:var(--turquoise-tint); overflow:hidden; }
  .map-visual svg{ width:100%; height:100%; }
  .map-caption{ padding:1.3rem 1.4rem; border-top:1px solid var(--line-soft); }
  .map-caption .eyebrow{ margin-bottom:0.4rem; }
  .map-caption address{ font-style:normal; font-size:1.02rem; }
  .map-caption a.dir{ margin-top:0.9rem; display:inline-flex; align-items:center; gap:0.4rem; font-family:'Cairo',sans-serif; font-weight:700; color:var(--turquoise-deep); text-decoration:none; font-size:0.9rem; }
  .map-caption a.dir:hover{ text-decoration:underline; }
  @media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

  /* ============ FOOTER ============ */
  footer{
    background-color:#CC6238; background-image:var(--zellige-dark); color:#FFF8EF; position:relative;
  }
  .footer-seal{
    width:60px; height:60px; border-radius:50%; background:var(--surface);
    display:flex; align-items:center; justify-content:center; position:relative; z-index:2;
    margin:-30px auto 0; box-shadow:0 16px 32px -14px rgba(10,6,3,0.5); border:1px solid rgba(255,248,239,0.55);
  }
  .footer-seal svg{ width:28px; height:28px; }
  .footer-seal svg .markfill{ fill:var(--terracotta); }
  .footer-top{
    display:grid; grid-template-columns:1.4fr 0.68fr 0.68fr 1fr; gap:2.5rem 2rem;
    padding:clamp(2.5rem,6vw,3.5rem) 0 2.75rem; position:relative;
  }
  .footer-brand{ display:flex; align-items:center; gap:0.6rem; margin-bottom:1rem; }
  .footer-brand .brand-word{ color:#FFF8EF; font-size:1.24rem; }
  .footer-top p.desc{ color:rgba(255,248,239,0.8); font-size:0.93rem; max-width:36ch; line-height:1.65; }
  .footer-trust{
    display:flex; align-items:center; gap:0.5rem; margin-top:1.1rem; font-family:'Cairo',sans-serif;
    font-size:0.8rem; font-weight:600; color:#F6E4D4;
  }
  .footer-trust svg{ width:16px; height:16px; flex:none; color:#F2CDA8; }
  .footer-col h5{
    font-family:'Cairo',sans-serif; text-transform:uppercase; letter-spacing:0.1em; font-size:0.75rem;
    color:#FFF3E6; margin-bottom:1.15rem; position:relative; padding-bottom:0.65rem;
  }
  .footer-col h5::after{ content:""; position:absolute; left:0; bottom:0; width:26px; height:2px; background:rgba(255,248,239,0.5); border-radius:2px; }
  .footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.7rem; }
  .footer-col a{ text-decoration:none; color:#FFF8EF; font-size:0.92rem; opacity:0.85; transition:opacity .25s ease, padding-left .25s ease; }
  .footer-col a:hover{ opacity:1; padding-left:3px; }
  .footer-col li{ color:rgba(255,248,239,0.85); font-size:0.92rem; }
  .footer-host{ display:flex; flex-direction:column; gap:0.1rem; }
  .footer-host a{ display:inline-flex; align-items:center; gap:0.4rem; font-weight:600; }
  .footer-host a svg{ width:14px; height:14px; opacity:0.85; }
  .footer-host small{ color:rgba(255,248,239,0.62); font-size:0.78rem; }
  .footer-social{ display:flex; gap:0.65rem; margin-top:1.3rem; }
  .footer-social a{
    width:40px; height:40px; border-radius:50%; background:rgba(255,248,239,0.1);
    border:1px solid rgba(255,248,239,0.32); color:#FFF8EF; display:flex; align-items:center; justify-content:center;
    transition:background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
  }
  .footer-social a svg{ width:17px; height:17px; }
  .footer-social a:hover{ border-color:#FFF8EF; background:#FFF8EF; color:#CC6238; transform:translateY(-3px); }
  .footer-bottom{
    border-top:1px solid rgba(255,248,239,0.22); padding:1.5rem 0; display:flex; justify-content:space-between;
    align-items:center; flex-wrap:wrap; gap:0.8rem; font-size:0.82rem; color:rgba(255,248,239,0.72);
  }
  .footer-bottom-text{ display:flex; flex-wrap:wrap; gap:0.4rem 1.4rem; }
  .to-top{
    width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,248,239,0.32); background:transparent;
    color:#FFF8EF; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;
    transition:background .25s ease, border-color .25s ease, transform .25s ease;
  }
  .to-top svg{ width:17px; height:17px; }
  .to-top:hover{ background:rgba(255,248,239,0.14); border-color:#FFF8EF; transform:translateY(-3px); }
  @media (max-width:820px){ .footer-top{ grid-template-columns:1fr 1fr; } }
  @media (max-width:520px){ .footer-top{ grid-template-columns:1fr; } }

  /* ============ FLOATING WHATSAPP ============ */
  .float-wa{
    position:fixed; right:1.35rem; bottom:1.35rem; z-index:55; width:58px; height:58px; border-radius:50%;
    background:#1FA855; display:flex; align-items:center; justify-content:center; color:#fff;
    box-shadow:0 14px 30px -10px rgba(20,60,30,0.55); text-decoration:none;
    transition:transform .3s ease;
  }
  .float-wa:hover{ transform:scale(1.08); }
  .float-wa svg{ width:28px; height:28px; }

  /* utility */
  .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

  /* ============ SAFE AREA ============ */
  :root{ box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
  html{ scroll-padding-top:calc(90px + env(safe-area-inset-top,0px)); }
  header.nav{ padding-top:calc(0.85rem + env(safe-area-inset-top,0px)); }
  header.nav.scrolled{ padding-top:calc(0.55rem + env(safe-area-inset-top,0px)); }
  .float-wa{ bottom:calc(1.35rem + env(safe-area-inset-bottom,0px)); }
  .brand-mark .wave{ stroke:var(--terracotta); }
  .footer-seal svg .wave{ stroke:var(--terracotta); }

  /* booking bar extras */
  .booking-field .bk-date-btn{
    all:unset; cursor:pointer; font-family:'Karla',sans-serif; font-size:0.98rem; font-weight:600; color:var(--ink);
    font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .booking-field .bk-date-btn.empty{ color:var(--ink-faint); font-weight:500; }
  .booking-field .bk-date-btn:focus-visible, .booking-field select:focus-visible{ outline:2px solid var(--turquoise); outline-offset:4px; border-radius:4px; }
  .booking-field select{ cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C8A76' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right center; background-size:16px; padding-right:1.4rem; }
  .booking-field select option{ color:#2A2018; }

  /* ============ PACKAGES ============ */
  .packages{ background:var(--bg); }
  .pk-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem 2rem; flex-wrap:wrap; margin-bottom:clamp(1.6rem,4vw,2.4rem); }
  .pk-head .section-head{ margin-bottom:0; }
  .pk-filters{ display:flex; gap:0.4rem; padding:0.35rem; background:var(--surface-2); border-radius:999px; border:1px solid var(--line-soft); overflow-x:auto; max-width:100%; }
  .pk-filter{
    all:unset; cursor:pointer; font-family:'Cairo',sans-serif; font-weight:700; font-size:0.84rem; color:var(--ink-soft);
    padding:0.55rem 1.1rem; border-radius:999px; white-space:nowrap; transition:background .25s ease, color .25s ease;
  }
  .pk-filter:hover{ color:var(--ink); }
  .pk-filter[aria-pressed="true"]{ background:var(--surface); color:var(--terracotta-deep); box-shadow:0 6px 14px -8px rgba(var(--shadow)/0.45); }
  .pk-filter:focus-visible{ outline:2px solid var(--turquoise); outline-offset:2px; }

  .pk-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
  .pk-card{
    background:var(--surface); border-radius:var(--radius-m); overflow:hidden; border:1px solid var(--line-soft);
    box-shadow:0 18px 34px -22px rgba(var(--shadow)/0.4); display:flex; flex-direction:column;
    transition:transform .35s ease, box-shadow .35s ease;
  }
  .pk-card[hidden]{ display:none; }
  .pk-card:hover{ transform:translateY(-6px); box-shadow:0 26px 44px -20px rgba(var(--shadow)/0.45); }
  .pk-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--surface-3); }
  .pk-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
  .pk-card:hover .pk-media img{ transform:scale(1.05); }
  .pk-badge{
    position:absolute; left:0.85rem; top:0.85rem; background:var(--bougainvillea); color:#FFF8EF;
    font-family:'Cairo',sans-serif; font-weight:700; font-size:0.76rem; padding:0.36rem 0.8rem; border-radius:999px;
    box-shadow:0 8px 18px -8px rgba(0,0,0,0.5);
  }
  .pk-badge.calm{ background:rgba(20,14,8,0.72); backdrop-filter:blur(6px); }
  .pk-body{ padding:1.35rem 1.4rem 1.45rem; display:flex; flex-direction:column; gap:0.75rem; flex:1; }
  .pk-meta{ display:flex; flex-wrap:wrap; gap:0.4rem 1rem; font-family:'Cairo',sans-serif; font-size:0.8rem; font-weight:600; color:var(--ink-soft); }
  .pk-meta span{ display:inline-flex; align-items:center; gap:0.35rem; }
  .pk-meta svg{ width:15px; height:15px; color:var(--turquoise); flex:none; }
  .pk-title{ font-size:1.36rem; line-height:1.2; }
  .pk-desc{ color:var(--ink-soft); font-size:0.94rem; }
  .pk-inc{ list-style:none; margin:0.1rem 0 0; padding:0; display:flex; flex-direction:column; gap:0.42rem; flex:1; }
  .pk-inc li{ display:flex; gap:0.55rem; font-size:0.9rem; align-items:flex-start; }
  .pk-inc li::before, .pk-list li::before{
    content:""; flex:none; width:17px; height:17px; margin-top:0.18rem; border-radius:50%; background-color:var(--terracotta-tint);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F7E73' stroke-width='3'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E");
    background-size:11px; background-position:center; background-repeat:no-repeat;
  }
  .pk-foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:0.8rem; padding-top:1rem; margin-top:0.35rem; border-top:1px solid var(--line-soft); flex-wrap:wrap; }
  .pk-price small{ display:block; font-family:'Cairo',sans-serif; font-size:0.72rem; font-weight:600; color:var(--ink-faint); }
  .pk-price strong{ font-family:'Fraunces',serif; font-weight:560; font-size:1.7rem; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
  .pk-price span{ font-size:0.8rem; color:var(--ink-soft); margin-left:0.2rem; }
  .pk-actions{ display:flex; gap:0.45rem; }
  .btn-sm{ padding:0.62rem 1.05rem; font-size:0.84rem; }

  .pk-card.custom{
    background:linear-gradient(150deg,var(--terracotta),var(--terracotta-deep)); border:none; color:#FFF3E6;
    justify-content:center; padding:2.2rem; gap:1rem; background-image:var(--zellige-dark), linear-gradient(150deg,var(--terracotta),var(--terracotta-deep));
  }
  .pk-card.custom h3{ color:#FFF8EF; font-style:italic; font-size:1.6rem; }
  .pk-card.custom p{ color:#E3F4F0; font-size:0.95rem; }
  .pk-card.custom .eyebrow{ color:#F6DCC0; }
  .pk-card.custom .btn-ghost{ color:#FFF8EF; align-self:flex-start; }

  @media (max-width:1020px){ .pk-grid{ grid-template-columns:repeat(2,1fr);} }
  @media (max-width:640px){ .pk-grid{ grid-template-columns:1fr;} }

  /* how booking works */
  .how{ margin-top:clamp(2.5rem,6vw,3.5rem); display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; list-style:none; padding:0; counter-reset:how; }
  .how li{ counter-increment:how; display:flex; gap:0.9rem; align-items:flex-start; padding:1.15rem 1.2rem; border-radius:var(--radius-m); border:1px dashed var(--line); }
  .how li::before{
    content:counter(how); flex:none; width:34px; height:34px; border-radius:50%; background:var(--turquoise-tint); color:var(--turquoise-deep);
    display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-style:italic; font-size:1.05rem;
  }
  .how strong{ display:block; font-family:'Cairo',sans-serif; font-size:0.95rem; }
  .how span{ color:var(--ink-soft); font-size:0.9rem; }
  @media (max-width:820px){ .how{ grid-template-columns:1fr; } }

  /* ============ DIALOGS ============ */
  dialog.sheet{
    border:none; padding:0; margin:auto; width:min(1040px, calc(100% - 2rem)); max-height:min(92svh, 860px);
    border-radius:var(--radius-l); background:var(--bg); color:var(--ink); overflow:hidden;
    box-shadow:0 40px 90px -30px rgba(0,0,0,0.55);
  }
  dialog.sheet[open]{ display:flex; flex-direction:column; }
  dialog.sheet::backdrop{ background:rgba(20,14,8,0.62); backdrop-filter:blur(4px); }
  @media (prefers-reduced-motion: no-preference){
    dialog.sheet[open]{ animation:sheetIn .38s cubic-bezier(.2,.8,.2,1); }
    @keyframes sheetIn{ from{ opacity:0; transform:translateY(24px) scale(.985); } to{ opacity:1; transform:none; } }
  }
  .sheet-head{
    display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem clamp(1.1rem,3vw,1.8rem);
    border-bottom:1px solid var(--line-soft); background:var(--surface);
  }
  .sheet-head h2{ font-size:clamp(1.3rem,2.6vw,1.65rem); }
  .sheet-close{
    all:unset; cursor:pointer; width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line);
    display:flex; align-items:center; justify-content:center; color:var(--ink); flex:none; transition:border-color .2s ease, background .2s ease;
  }
  .sheet-close:hover{ border-color:var(--terracotta); background:var(--terracotta-tint); }
  .sheet-close:focus-visible{ outline:3px solid var(--turquoise); outline-offset:2px; }
  .sheet-close svg{ width:18px; height:18px; }
  .sheet-scroll{ overflow-y:auto; overscroll-behavior:contain; flex:1; }

  /* booking layout */
  .bk-grid{ display:grid; grid-template-columns:1fr 340px; min-height:0; }
  .bk-main{ padding:clamp(1.1rem,3vw,1.8rem); display:flex; flex-direction:column; gap:1.8rem; min-width:0; }
  .bk-aside{ background:var(--surface-2); border-left:1px solid var(--line-soft); padding:clamp(1.1rem,3vw,1.6rem); display:flex; flex-direction:column; gap:1rem; }
  .bk-step-title{ display:flex; align-items:center; gap:0.65rem; font-family:'Cairo',sans-serif; font-weight:700; font-size:1rem; margin-bottom:0.9rem; }
  .bk-step-title .n{
    width:26px; height:26px; border-radius:50%; background:var(--terracotta); color:#FFF8EF; font-size:0.8rem;
    display:inline-flex; align-items:center; justify-content:center; flex:none;
  }
  .bk-step-title .hint{ font-weight:500; color:var(--ink-faint); font-size:0.84rem; font-family:'Karla',sans-serif; margin-left:auto; text-align:right; }

  .bk-pkgs{ display:flex; gap:0.55rem; overflow-x:auto; padding:0.15rem 0.1rem 0.6rem; scrollbar-width:thin; scroll-snap-type:x proximity; }
  .bk-pkg{
    all:unset; cursor:pointer; flex:none; width:168px; border-radius:var(--radius-s); border:1.5px solid var(--line-soft);
    background:var(--surface); overflow:hidden; scroll-snap-align:start; transition:border-color .2s ease, transform .2s ease;
  }
  .bk-pkg img{ width:100%; height:78px; object-fit:cover; display:block; }
  .bk-pkg span{ display:block; padding:0.55rem 0.7rem 0.1rem; font-family:'Cairo',sans-serif; font-weight:700; font-size:0.8rem; line-height:1.25; }
  .bk-pkg small{ display:block; padding:0 0.7rem 0.6rem; font-size:0.76rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
  .bk-pkg:hover{ border-color:var(--line); }
  .bk-pkg[aria-pressed="true"]{ border-color:var(--terracotta); box-shadow:0 0 0 3px var(--terracotta-tint); }
  .bk-pkg:focus-visible{ outline:3px solid var(--turquoise); outline-offset:2px; }

  /* calendar */
  .cal{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-m); padding:1rem clamp(0.7rem,2vw,1.2rem) 1.1rem; }
  .cal-nav{ display:flex; justify-content:space-between; align-items:center; margin-bottom:0.4rem; }
  .cal-arrow{
    all:unset; cursor:pointer; width:36px; height:36px; border-radius:50%; border:1.5px solid var(--line);
    display:flex; align-items:center; justify-content:center; color:var(--ink); transition:border-color .2s, background .2s;
  }
  .cal-arrow:hover:not(:disabled){ border-color:var(--terracotta); background:var(--terracotta-tint); }
  .cal-arrow:disabled{ opacity:0.3; cursor:default; }
  .cal-arrow:focus-visible{ outline:3px solid var(--turquoise); outline-offset:2px; }
  .cal-arrow svg{ width:16px; height:16px; }
  .cal-months{ display:grid; grid-template-columns:repeat(var(--months,2),1fr); gap:1.6rem; margin-top:-2.4rem; }
  .cal-month h4{ text-align:center; font-family:'Fraunces',serif; font-weight:560; font-size:1.08rem; height:36px; display:flex; align-items:center; justify-content:center; margin-bottom:0.6rem; }
  .cal-wd, .cal-days{ display:grid; grid-template-columns:repeat(7,1fr); }
  .cal-wd span{ text-align:center; font-family:'Cairo',sans-serif; font-size:0.7rem; font-weight:700; color:var(--ink-faint); padding-bottom:0.35rem; }
  .cal-cell{ position:relative; display:flex; align-items:center; justify-content:center; padding:2px 0; }
  .cal-cell.in-range::before, .cal-cell.preview::before{
    content:""; position:absolute; inset:2px 0; background:var(--terracotta-tint);
  }
  .cal-cell.preview::before{ background:transparent; border-top:1.5px dashed var(--terracotta); border-bottom:1.5px dashed var(--terracotta); }
  .cal-cell.range-start::before{ left:50%; }
  .cal-cell.range-end::before{ right:50%; }
  .cal-cell.range-start.range-end::before{ display:none; }
  .cal-day{
    all:unset; position:relative; z-index:1; box-sizing:border-box; width:min(42px,100%); aspect-ratio:1; border-radius:50%;
    display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:0.92rem; font-weight:600;
    font-variant-numeric:tabular-nums; color:var(--ink); transition:background .15s ease, color .15s ease;
  }
  .cal-day:hover:not(:disabled){ background:var(--surface-2); box-shadow:inset 0 0 0 1.5px var(--terracotta); }
  .cal-day:focus-visible{ outline:3px solid var(--turquoise); outline-offset:1px; }
  .cal-day:disabled{ color:var(--ink-faint); opacity:0.4; cursor:not-allowed; font-weight:500; }
  .cal-day.today{ box-shadow:inset 0 0 0 1.5px var(--line); }
  .cal-cell.p-start::before{ left:50%; } .cal-cell.p-end::before{ right:50%; }
  .cal-cell.p-start .cal-day, .cal-cell.p-end .cal-day{ box-shadow:inset 0 0 0 1.5px var(--terracotta); }
  .cal-cell.range-start .cal-day, .cal-cell.range-end .cal-day, .cal-cell.solo .cal-day{ background:var(--terracotta); color:#FFF8EF; box-shadow:0 6px 14px -6px rgba(var(--shadow)/0.6); }
  .cal-legend{ display:flex; flex-wrap:wrap; gap:0.5rem 1.2rem; margin-top:0.9rem; font-size:0.8rem; color:var(--ink-soft); }
  .cal-legend i{ display:inline-block; width:14px; height:14px; border-radius:50%; vertical-align:-2px; margin-right:0.35rem; }
  .cal-legend .l1{ background:var(--terracotta); }
  .cal-legend .l2{ background:var(--terracotta-tint); border-radius:3px; }
  .cal-msg{ margin-top:0.7rem; font-size:0.86rem; color:var(--bougainvillea); min-height:1.2em; }

  .bk-row{ display:grid; grid-template-columns:auto 1fr; gap:1rem 1.6rem; align-items:start; }
  .stepper{ display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:999px; background:var(--surface); }
  .stepper button{
    all:unset; cursor:pointer; width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:50%;
    font-size:1.2rem; color:var(--ink);
  }
  .stepper button:hover:not(:disabled){ color:var(--terracotta-deep); background:var(--terracotta-tint); }
  .stepper button:disabled{ opacity:0.3; cursor:default; }
  .stepper button:focus-visible{ outline:3px solid var(--turquoise); }
  .stepper output{ min-width:3.2rem; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }
  .field-label{ display:block; font-family:'Cairo',sans-serif; font-size:0.74rem; font-weight:700; color:var(--ink-faint); margin-bottom:0.5rem; }
  .rooms-pick{ display:flex; flex-wrap:wrap; gap:0.5rem; }
  .room-opt{ position:relative; }
  .room-opt input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
  .room-opt label{
    display:flex; flex-direction:column; gap:0.1rem; padding:0.6rem 1rem; border-radius:var(--radius-s); border:1.5px solid var(--line-soft);
    background:var(--surface); cursor:pointer; font-weight:600; font-size:0.9rem; transition:border-color .2s;
  }
  .room-opt label small{ font-weight:500; color:var(--ink-soft); font-size:0.78rem; }
  .room-opt input:checked + label{ border-color:var(--terracotta); box-shadow:0 0 0 3px var(--terracotta-tint); }
  .room-opt input:focus-visible + label{ outline:3px solid var(--turquoise); outline-offset:2px; }
  .room-opt input:disabled + label{ opacity:0.45; cursor:not-allowed; }
  .bk-note-inline{ font-size:0.84rem; color:var(--ink-soft); margin-top:0.5rem; }

  /* summary */
  .sum-card{ background:var(--surface); border-radius:var(--radius-m); overflow:hidden; border:1px solid var(--line-soft); }
  .sum-card img{ width:100%; height:120px; object-fit:cover; }
  .sum-card .sum-name{ padding:0.85rem 1rem 0.2rem; font-family:'Fraunces',serif; font-weight:560; font-size:1.12rem; line-height:1.25; }
  .sum-card .sum-sub{ padding:0 1rem 0.9rem; font-size:0.82rem; color:var(--ink-soft); }
  .sum-dates{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line-soft); }
  .sum-dates div{ padding:0.7rem 1rem; }
  .sum-dates div + div{ border-left:1px solid var(--line-soft); }
  .sum-dates small{ display:block; font-family:'Cairo',sans-serif; font-size:0.7rem; font-weight:700; color:var(--ink-faint); }
  .sum-dates strong{ font-size:0.92rem; white-space:nowrap; font-variant-numeric:tabular-nums; }
  .sum-lines{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.45rem; font-size:0.9rem; }
  .sum-lines li{ display:flex; justify-content:space-between; gap:1rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
  .sum-lines li b{ color:var(--ink); font-weight:600; white-space:nowrap; }
  .sum-total{ display:flex; justify-content:space-between; align-items:baseline; border-top:1.5px solid var(--line); padding-top:0.8rem; }
  .sum-total span{ font-family:'Cairo',sans-serif; font-weight:700; }
  .sum-total strong{ font-family:'Fraunces',serif; font-size:2rem; font-weight:560; font-variant-numeric:tabular-nums; }
  .bk-aside .btn{ justify-content:center; width:100%; }
  .btn-wa{ background:#1FA855; color:#fff; }
  .btn-wa:hover{ background:#178A45; transform:translateY(-2px); }
  .btn-wa svg{ width:18px; height:18px; }
  .btn[aria-disabled="true"]{ opacity:0.45; pointer-events:none; box-shadow:none; }
  .bk-fine{ font-size:0.8rem; color:var(--ink-soft); text-align:center; }
  .bk-sent{ display:none; background:var(--turquoise-tint); color:var(--turquoise-deep); border-radius:var(--radius-s); padding:0.7rem 0.9rem; font-size:0.86rem; font-weight:600; }
  .bk-sent.show{ display:block; }

  @media (max-width:880px){
    .bk-grid{ grid-template-columns:1fr; }
    .bk-aside{ border-left:none; border-top:1px solid var(--line-soft); }
    .sum-card img{ display:none; }
  }
  @media (max-width:640px){
    dialog.sheet{ width:100%; max-width:100%; max-height:100%; height:100%; border-radius:0; margin:0; }
    .sheet-head{ padding-top:calc(1rem + env(safe-area-inset-top,0px)); }
    .bk-aside{ padding-bottom:calc(1.2rem + env(safe-area-inset-bottom,0px)); }
    .bk-row{ grid-template-columns:1fr; }
    .bk-step-title{ flex-wrap:wrap; }
    .bk-step-title .hint{ margin-left:0; flex-basis:100%; text-align:left; }
  }

  /* package details dialog */
  dialog.sheet.details{ width:min(860px, calc(100% - 2rem)); }
  .dt-hero{ position:relative; aspect-ratio:21/9; overflow:hidden; }
  .dt-hero img{ width:100%; height:100%; object-fit:cover; }
  .dt-body{ padding:clamp(1.2rem,3.5vw,2rem); display:flex; flex-direction:column; gap:1.4rem; }
  .dt-body > p{ color:var(--ink-soft); font-size:1.02rem; max-width:62ch; }
  .dt-cols{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 2rem; }
  .dt-cols h3, .dt-day h3{ font-size:1.12rem; margin-bottom:0.7rem; }
  .pk-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.5rem; }
  .pk-list li{ display:flex; gap:0.55rem; font-size:0.94rem; }
  .pk-list.not li::before{
    background-color:var(--surface-2);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C8A76' stroke-width='3'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E");
  }
  .pk-list.not li{ color:var(--ink-soft); }
  .dt-day ol{ list-style:none; margin:0; padding:0; border-left:2px solid var(--terracotta-tint); }
  .dt-day li{ position:relative; padding:0 0 0.9rem 1.2rem; font-size:0.94rem; }
  .dt-day li::before{ content:""; position:absolute; left:-7px; top:0.35rem; width:12px; height:12px; border-radius:50%; background:var(--terracotta); border:2px solid var(--bg); }
  .dt-day time{ font-family:'Cairo',sans-serif; font-weight:700; font-size:0.8rem; color:var(--terracotta-deep); display:block; }
  .dt-foot{
    display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
    padding:1rem clamp(1.2rem,3.5vw,2rem); border-top:1px solid var(--line-soft); background:var(--surface);
  }
  @media (max-width:640px){ .dt-cols{ grid-template-columns:1fr; } .dt-hero{ aspect-ratio:16/10; } .dt-foot{ padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px)); } }

  body.modal-open{ overflow:hidden; }

  .hero-content{ padding-left:clamp(1.25rem,4vw,3rem); padding-right:clamp(1.25rem,4vw,3rem); }
  .brand-word{ white-space:nowrap; }
  @media (max-width:640px){
    .hero-arrow{ display:none; }
    .nav-cta .btn-primary{ padding:0.7rem 1.1rem; }
    .nav-cta .btn-primary .more{ display:none; }
  }
  @media (max-width:360px){ .brand-word{ font-size:1.05rem; } }

  /* ============ FORMS ============ */
  .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0.9rem 1rem; }
  .fld{ display:flex; flex-direction:column; gap:0.35rem; min-width:0; }
  .fld.full{ grid-column:1 / -1; }
  .fld label{ font-family:'Cairo',sans-serif; font-size:0.8rem; font-weight:700; color:var(--ink-soft); }
  .fld .opt{ font-weight:500; color:var(--ink-faint); margin-left:0.25rem; }
  .fld input, .fld select, .fld textarea{
    font:inherit; font-size:0.97rem; color:var(--ink); background:var(--surface); border:1.5px solid var(--line);
    border-radius:var(--radius-s); padding:0.75rem 0.9rem; width:100%; box-sizing:border-box; transition:border-color .2s, box-shadow .2s;
  }
  .fld textarea{ resize:vertical; min-height:92px; }
  .fld input:focus, .fld select:focus, .fld textarea:focus{ outline:none; border-color:var(--terracotta); box-shadow:0 0 0 3px var(--terracotta-tint); }
  .fld.invalid input, .fld.invalid textarea{ border-color:var(--bougainvillea); }
  .fld .err{ color:var(--bougainvillea); font-size:0.8rem; min-height:0; }
  .fld .err:empty{ display:none; }
  .hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
  .form-status{ font-size:0.86rem; text-align:center; min-height:1.2em; }
  .form-status.error{ color:var(--bougainvillea); }
  .form-status.ok{ color:var(--turquoise-deep); font-weight:600; }
  .btn.loading{ opacity:0.7; pointer-events:none; }
  .btn.loading svg{ animation:spin 1s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  @media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } }

  .bk-done{ padding:clamp(2.5rem,7vw,4.5rem) 1.5rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:1rem; }
  .bk-done[hidden]{ display:none; }
  .bk-done h3{ font-size:clamp(1.6rem,3vw,2.1rem); }
  .bk-done p{ color:var(--ink-soft); max-width:44ch; }
  .done-ico{ width:68px; height:68px; border-radius:50%; background:var(--terracotta); color:#FFF8EF; display:flex; align-items:center; justify-content:center; }
  .done-ico svg{ width:32px; height:32px; }

  .contact-form{ margin-top:2rem; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-m); padding:clamp(1.2rem,3vw,1.8rem); box-shadow:0 18px 34px -24px rgba(var(--shadow)/0.4); }
  .contact-form .btn{ margin-top:0.4rem; }
  .contact-form .form-foot{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; grid-column:1 / -1; }
  .contact-form .form-status{ text-align:left; }
  .contact-mini{ display:flex; flex-wrap:wrap; gap:0.6rem 1.4rem; margin-top:1.2rem; font-size:0.92rem; color:var(--ink-soft); }
  .contact-mini a{ color:var(--terracotta-deep); font-weight:600; text-decoration:none; }
  .contact-mini a:hover{ text-decoration:underline; }
  .bk-grid[hidden]{ display:none; }
  .nav-cta .btn-primary{ gap:0; }

  /* ============ VIP BAND ============ */
  .vip-band{
    margin-top:clamp(2rem,5vw,3rem); display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center;
    border-radius:var(--radius-l); padding:clamp(1.6rem,4vw,3rem); color:#FFF3E6; position:relative; overflow:hidden;
    background-color:var(--turquoise-deep); background-image:var(--zellige-dark), linear-gradient(135deg, #136155 0%, #1F7E73 60%, #2CA698 100%);
  }
  .vip-band .eyebrow{ color:var(--gold); }
  .vip-band h3{ color:#FFF8EF; font-size:clamp(1.8rem,3.6vw,2.6rem); margin-top:0.5rem; line-height:1.1; }
  .vip-band p{ color:#E3F4F0; margin-top:0.9rem; max-width:52ch; }
  .vip-cats{ list-style:none; padding:0; margin:1.3rem 0 0; display:flex; flex-wrap:wrap; gap:0.45rem; }
  .vip-cats li{ font-family:'Cairo',sans-serif; font-weight:600; font-size:0.84rem; padding:0.38rem 0.8rem; border-radius:999px; background:rgba(255,248,239,0.12); border:1px solid rgba(255,248,239,0.25); }
  .vip-band-cta{ display:flex; align-items:center; flex-wrap:wrap; gap:0.8rem 1.2rem; margin-top:1.6rem; }
  .vip-band-cta span{ font-size:0.88rem; color:#CDEAE4; }
  .vip-band .btn-primary{ background:#FFF8EF; color:var(--turquoise-deep); }
  .vip-band .btn-primary:hover{ background:#fff; }
  .vip-band-media img{ width:100%; aspect-ratio:4/4.4; object-fit:cover; }
  @media (max-width:820px){ .vip-band{ grid-template-columns:1fr; } .vip-band-media{ order:-1; max-width:320px; } }

  /* ============ VIP DIALOG ============ */
  dialog.sheet.vip{ width:min(1080px, calc(100% - 2rem)); }
  .vip-head-l{ display:flex; flex-direction:column; gap:0.45rem; min-width:0; }
  .vip-steps{ list-style:none; margin:0; padding:0; display:flex; gap:0.3rem 1.2rem; flex-wrap:wrap; counter-reset:vs; }
  .vip-steps li{ counter-increment:vs; display:flex; align-items:center; gap:0.4rem; font-family:'Cairo',sans-serif; font-size:0.8rem; font-weight:700; color:var(--ink-faint); }
  .vip-steps li::before{ content:counter(vs); width:20px; height:20px; border-radius:50%; border:1.5px solid currentColor; display:inline-flex; align-items:center; justify-content:center; font-size:0.7rem; }
  .vip-steps li.on{ color:var(--terracotta-deep); }
  .vip-steps li.on::before{ background:var(--terracotta); border-color:var(--terracotta); color:#FFF8EF; }
  .vip-steps li.done{ color:var(--ink-soft); }
  .vip-step{ padding:clamp(1.1rem,3vw,1.8rem); }
  .vip-step[hidden]{ display:none; }
  .vip-step-grid{ display:grid; grid-template-columns:1fr 280px; gap:1.6rem; align-items:start; }
  .vip-side{ display:flex; flex-direction:column; gap:1rem; }
  .vip-box{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-m); padding:1.1rem 1.2rem; }
  .vip-dates{ display:grid; gap:0.8rem; }
  .vip-dates small{ display:block; font-family:'Cairo',sans-serif; font-size:0.72rem; font-weight:700; color:var(--ink-faint); }
  .vip-dates strong{ font-variant-numeric:tabular-nums; }
  @media (max-width:880px){ .vip-step-grid{ grid-template-columns:1fr; } .vip-side{ flex-direction:row; flex-wrap:wrap; } .vip-side > *{ flex:1 1 220px; } }

  .vip-tabs{ display:flex; gap:0.4rem; overflow-x:auto; padding:0.15rem 0.1rem 0.9rem; scrollbar-width:thin; position:sticky; top:0; background:var(--bg); z-index:3; margin:-0.3rem 0 0.3rem; padding-top:0.3rem; }
  .vip-tab{
    all:unset; cursor:pointer; flex:none; display:inline-flex; align-items:center; gap:0.4rem; padding:0.55rem 0.95rem; border-radius:999px;
    border:1.5px solid var(--line-soft); background:var(--surface); font-family:'Cairo',sans-serif; font-weight:700; font-size:0.82rem; letter-spacing:0.03em; color:var(--ink-soft);
    transition:border-color .2s, background .2s, color .2s;
  }
  .vip-tab:hover{ border-color:var(--line); color:var(--ink); }
  .vip-tab[aria-selected="true"]{ background:var(--terracotta); border-color:var(--terracotta); color:#FFF8EF; }
  .vip-tab:focus-visible{ outline:3px solid var(--turquoise); outline-offset:2px; }
  .vip-tab .cnt{ min-width:18px; height:18px; padding:0 5px; box-sizing:border-box; border-radius:999px; background:var(--bougainvillea); color:#fff; font-size:0.68rem; display:inline-flex; align-items:center; justify-content:center; }
  .vip-tab .cnt:empty{ display:none; }
  .vip-panel h3{ font-size:1.25rem; margin:0.4rem 0 0.25rem; }
  .vip-panel .sub{ color:var(--ink-soft); font-size:0.92rem; margin-bottom:1rem; }
  .vip-group + .vip-group{ margin-top:1.8rem; }
  .vip-items{ display:grid; grid-template-columns:repeat(2,1fr); gap:0.7rem; }
  @media (max-width:700px){ .vip-items{ grid-template-columns:1fr; } }
  .vip-item{
    position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:0.3rem 0.8rem; align-items:start;
    padding:0.95rem 1rem; border-radius:var(--radius-m); border:1.5px solid var(--line-soft); background:var(--surface); cursor:pointer;
    transition:border-color .2s, box-shadow .2s;
  }
  .vip-item:hover{ border-color:var(--line); }
  .vip-item.on{ border-color:var(--terracotta); box-shadow:0 0 0 3px var(--terracotta-tint); }
  .vip-item input[type=checkbox], .vip-item input[type=radio]{ appearance:none; -webkit-appearance:none; margin:0.1rem 0 0; width:22px; height:22px; border-radius:6px; border:1.5px solid var(--line); background:var(--surface); cursor:pointer; display:grid; place-content:center; flex:none; }
  .vip-item input[type=radio]{ border-radius:50%; }
  .vip-item input:checked{ background:var(--terracotta); border-color:var(--terracotta); }
  .vip-item input[type=checkbox]:checked::after{ content:""; width:12px; height:12px; background:#FFF8EF; clip-path:polygon(14% 52%, 0 66%, 38% 100%, 100% 26%, 86% 12%, 38% 72%); }
  .vip-item input[type=radio]:checked::after{ content:""; width:8px; height:8px; border-radius:50%; background:#FFF8EF; }
  .vip-item input:focus-visible{ outline:3px solid var(--turquoise); outline-offset:2px; }
  .vip-item .nm{ font-weight:700; font-size:0.97rem; line-height:1.3; }
  .vip-item .ds{ grid-column:2; color:var(--ink-soft); font-size:0.86rem; line-height:1.45; }
  .vip-item .pr{ text-align:right; font-family:'Cairo',sans-serif; font-weight:700; font-size:0.92rem; white-space:nowrap; font-variant-numeric:tabular-nums; }
  .vip-item .pr small{ display:block; font-weight:500; color:var(--ink-faint); font-size:0.72rem; }
  .vip-item .qty{ grid-column:2 / -1; display:flex; align-items:center; justify-content:space-between; gap:0.6rem; margin-top:0.35rem; padding-top:0.6rem; border-top:1px dashed var(--line); font-size:0.85rem; color:var(--ink-soft); }
  .vip-item .qty .stepper button{ width:34px; height:34px; font-size:1.05rem; }
  .vip-item .qty .stepper output{ min-width:2.2rem; }
  .vip-item .tag{ display:inline-block; margin-left:0.35rem; font-family:'Cairo',sans-serif; font-size:0.68rem; font-weight:700; color:var(--turquoise-deep); background:var(--turquoise-tint); padding:0.1rem 0.45rem; border-radius:999px; vertical-align:2px; }

  .vip-foot{
    display:flex; align-items:center; gap:0.8rem 1.2rem; flex-wrap:wrap; padding:0.85rem clamp(1.1rem,3vw,1.8rem);
    border-top:1px solid var(--line-soft); background:var(--surface);
  }
  .vip-foot[hidden]{ display:none; }
  .vip-foot-sum small{ display:block; font-size:0.78rem; color:var(--ink-soft); }
  .vip-foot-sum strong{ font-family:'Fraunces',serif; font-weight:560; font-size:1.55rem; font-variant-numeric:tabular-nums; line-height:1.1; }
  .vip-foot .form-status{ flex:1; text-align:left; margin:0; }
  .vip-foot-btns{ display:flex; gap:0.5rem; margin-left:auto; }
  .vip-foot-btns [hidden]{ display:none; }
  @media (max-width:640px){
    .vip-foot{ padding-bottom:calc(0.85rem + env(safe-area-inset-bottom,0px)); }
    .vip-foot .form-status{ order:3; flex-basis:100%; }
    .vip-foot-btns .btn{ padding:0.8rem 1.1rem; }
  }

  /* invoice */
  .inv{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-m); padding:clamp(1.2rem,3.5vw,2.2rem); box-shadow:0 18px 34px -26px rgba(var(--shadow)/0.45); }
  .inv-top{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-bottom:1.1rem; border-bottom:2px solid var(--ink); }
  .inv-brand{ display:flex; gap:0.7rem; align-items:center; }
  .inv-brand .brand-mark{ width:38px; height:38px; }
  .inv-brand strong{ display:block; font-family:'Fraunces',serif; font-size:1.25rem; }
  .inv-brand span{ font-size:0.8rem; color:var(--ink-soft); }
  .inv-meta{ text-align:right; display:flex; flex-direction:column; font-size:0.84rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
  .inv-meta strong{ font-family:'Cairo',sans-serif; font-size:0.95rem; color:var(--ink); }
  .inv-info{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--line-soft); }
  .inv-info small{ display:block; font-family:'Cairo',sans-serif; font-size:0.72rem; font-weight:700; color:var(--ink-faint); }
  .inv-info strong{ font-size:0.95rem; }
  @media (max-width:560px){ .inv-info{ grid-template-columns:1fr; gap:0.6rem; } .inv-meta{ text-align:left; } }
  .inv-scroll{ overflow-x:auto; }
  .inv-table{ width:100%; border-collapse:collapse; margin-top:0.6rem; font-size:0.92rem; font-variant-numeric:tabular-nums; min-width:460px; }
  .inv-table th{ text-align:left; font-family:'Cairo',sans-serif; font-size:0.74rem; font-weight:700; color:var(--ink-faint); padding:0.6rem 0.4rem; border-bottom:1px solid var(--line); }
  .inv-table td{ padding:0.55rem 0.4rem; border-bottom:1px solid var(--line-soft); vertical-align:top; }
  .inv-table .num{ text-align:right; white-space:nowrap; }
  .inv-table td:nth-child(2){ color:var(--ink-soft); white-space:nowrap; }
  .inv-table tr.grp td{ padding-top:1rem; font-family:'Cairo',sans-serif; font-weight:700; font-size:0.8rem; color:var(--terracotta-deep); border-bottom:none; }
  .inv-table tr.empty td{ color:var(--ink-faint); font-style:italic; }
  .inv-total td{ border-bottom:none; padding-top:1rem; font-family:'Cairo',sans-serif; font-weight:700; font-size:1rem; }
  .inv-total td.num{ font-family:'Fraunces',serif; font-size:1.9rem; font-weight:560; }
  .inv-pp td{ border-bottom:none; color:var(--ink-soft); padding-top:0; }
  .inv-note{ margin-top:1rem; font-size:0.84rem; color:var(--ink-soft); }
  .inv-tools{ display:flex; gap:0.5rem; flex-wrap:wrap; margin:1rem 0 1.6rem; }
  .vip-form{ background:var(--surface-2); border-radius:var(--radius-m); padding:clamp(1.1rem,3vw,1.6rem); }

  @media print{
    body.print-inv > *:not(#vipDialog){ display:none !important; }
    body.print-inv #vipDialog{ position:static; width:100%; max-width:none; max-height:none; box-shadow:none; border-radius:0; overflow:visible; display:block; }
    body.print-inv #vipDialog::backdrop{ display:none; }
    body.print-inv .vip-head, body.print-inv .vip-foot, body.print-inv .no-print, body.print-inv .vip-step:not(.inv-step){ display:none !important; }
    body.print-inv .sheet-scroll{ overflow:visible; }
    body.print-inv .inv{ box-shadow:none; border:none; padding:0; }
  }
  nav.links a{ white-space:nowrap; }
  .vip-foot .form-status:empty{ display:none; }
  @media (max-width:640px){
    .vip-item{ grid-template-columns:auto 1fr; }
    .vip-item .pr{ grid-column:2; grid-row:3; text-align:left; display:flex; gap:0.4rem; align-items:baseline; }
    .vip-item .ds{ grid-row:2; }
    .inv-table{ min-width:0; font-size:0.88rem; }
    .inv-table .u{ display:none; }
    .inv-table td:nth-child(2){ white-space:normal; }
    .inv-total td.num{ font-size:1.5rem; }
    .vip-foot-btns{ flex:1 1 100%; }
    .vip-foot-btns .btn{ flex:1; justify-content:center; }
    .vip-foot-btns #vBack{ flex:0 0 auto; }
  }

  /* ============ SURF REPORT ============ */
  .surf-report{ background:var(--surface); }
  .sr-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem 2rem; flex-wrap:wrap; margin-bottom:clamp(1.4rem,3vw,2rem); }
  .sr-head .section-head{ margin-bottom:0; }
  .sr-updated{ font-family:'Cairo',sans-serif; font-size:0.82rem; font-weight:600; color:var(--ink-faint); display:flex; align-items:center; gap:0.45rem; }
  .sr-updated.live::before{ content:""; width:8px; height:8px; border-radius:50%; background:#1FA855; box-shadow:0 0 0 4px rgba(31,168,85,0.18); }
  .sr-updated.demo::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--gold); }
  .sr-card{
    display:grid; grid-template-columns:1.05fr 1.35fr 1fr; border-radius:var(--radius-l); overflow:hidden;
    border:1px solid var(--line-soft); background:var(--bg); box-shadow:0 22px 44px -30px rgba(var(--shadow)/0.5);
  }
  .sr-card > div{ padding:clamp(1.2rem,3vw,1.9rem); min-width:0; }
  .sr-card > div + div{ border-left:1px solid var(--line-soft); }
  .sr-card small{ display:block; font-family:'Cairo',sans-serif; font-size:0.78rem; font-weight:700; color:var(--ink-faint); margin-bottom:0.6rem; }
  .sr-card[aria-busy="true"] .sr-now, .sr-card[aria-busy="true"] .sr-spots, .sr-card[aria-busy="true"] .sr-days{ opacity:0.45; }
  .sr-now{ background-color:var(--turquoise-deep); background-image:var(--zellige-dark), linear-gradient(160deg,#136155,#1F7E73 70%,#2CA698); color:#FFF3E6; }
  .sr-now small{ color:#BFE3DC; }
  .sr-big{ font-family:'Fraunces',serif; font-weight:560; line-height:0.9; font-size:clamp(4rem,9vw,6.2rem); letter-spacing:-0.02em; font-variant-numeric:tabular-nums; color:#FFF8EF; }
  .sr-big em{ font-style:italic; font-weight:440; font-size:0.38em; margin-left:0.25rem; color:#F6DCC0; }
  .sr-stats{ list-style:none; margin:1.3rem 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0.8rem 1rem; }
  .sr-stats li > span{ display:block; font-size:0.76rem; color:#BFE3DC; font-family:'Cairo',sans-serif; font-weight:600; }
  .sr-stats b{ display:inline-flex; align-items:center; gap:0.35rem; font-size:1rem; font-variant-numeric:tabular-nums; }
  .sr-arrow{ width:17px; height:17px; transition:transform .6s ease; flex:none; }
  .sr-window{ margin-top:1.3rem; padding-top:1rem; border-top:1px solid rgba(255,248,239,0.22); font-size:0.92rem; color:#E3F4F0; }
  .sr-window strong{ color:#FFF8EF; }
  .sr-spots ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.7rem; }
  .sr-spot{ display:grid; grid-template-columns:1fr auto; gap:0.25rem 1rem; padding:0.85rem 1rem; border-radius:var(--radius-m); background:var(--surface); border:1.5px solid var(--line-soft); }
  .sr-spot.best{ border-color:var(--terracotta); box-shadow:0 0 0 3px var(--terracotta-tint); }
  .sr-spot .nm{ font-weight:700; display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
  .sr-spot .pick{ font-family:'Cairo',sans-serif; font-size:0.68rem; font-weight:700; background:var(--terracotta); color:#FFF8EF; padding:0.12rem 0.5rem; border-radius:999px; }
  .sr-spot .lvl{ font-size:0.8rem; color:var(--ink-soft); }
  .sr-spot .note{ grid-column:1 / -1; font-size:0.86rem; color:var(--ink-soft); }
  .sr-rating{ grid-row:1 / span 2; grid-column:2; display:flex; flex-direction:column; align-items:flex-end; gap:0.3rem; }
  .sr-bars{ display:flex; gap:3px; }
  .sr-bars i{ width:9px; height:18px; border-radius:3px; background:var(--surface-3); }
  .sr-bars i.on{ background:var(--terracotta); }
  .sr-rating span{ font-family:'Cairo',sans-serif; font-size:0.76rem; font-weight:700; color:var(--terracotta-deep); }
  .sr-days ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
  .sr-days li{ display:grid; grid-template-columns:3.4rem 1fr auto; gap:0.2rem 0.8rem; align-items:center; padding:0.75rem 0; border-bottom:1px solid var(--line-soft); }
  .sr-days li:last-child{ border-bottom:none; }
  .sr-days .d{ font-family:'Cairo',sans-serif; font-weight:700; font-size:0.9rem; }
  .sr-days .h{ font-family:'Fraunces',serif; font-weight:560; font-size:1.35rem; font-variant-numeric:tabular-nums; }
  .sr-days .h small{ display:inline; font-family:'Karla',sans-serif; font-size:0.78rem; color:var(--ink-soft); font-weight:500; margin:0 0 0 0.3rem; }
  .sr-days .w{ font-size:0.8rem; color:var(--ink-soft); text-align:right; }
  .sr-days .b{ grid-column:2 / -1; font-size:0.8rem; color:var(--terracotta-deep); font-weight:600; }
  .sr-credit{ margin-top:0.9rem; font-size:0.78rem; color:var(--ink-faint); }
  .sr-credit a{ color:inherit; }
  @media (max-width:1020px){ .sr-card{ grid-template-columns:1fr 1fr; } .sr-days{ grid-column:1 / -1; border-left:none !important; border-top:1px solid var(--line-soft); } .sr-days ul{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 1.2rem; } .sr-days li{ border-bottom:none; } }
  @media (max-width:680px){ .sr-card{ grid-template-columns:1fr; } .sr-card > div + div{ border-left:none; border-top:1px solid var(--line-soft); } .sr-days ul{ display:flex; } .sr-days li{ border-bottom:1px solid var(--line-soft); } }

  /* ============ QUIZ ============ */
  .quiz-link{
    all:unset; cursor:pointer; margin-top:1.1rem; display:inline-flex; align-items:center; gap:0.5rem;
    font-family:'Cairo',sans-serif; font-weight:700; font-size:0.92rem; color:var(--terracotta-deep);
    padding:0.55rem 1rem; border-radius:999px; background:var(--terracotta-tint); transition:background .2s, transform .2s;
  }
  .quiz-link:hover{ transform:translateY(-1px); background:var(--turquoise-tint); }
  .quiz-link:focus-visible{ outline:3px solid var(--turquoise); outline-offset:2px; }
  dialog.sheet.quiz{ width:min(760px, calc(100% - 2rem)); }
  .qz-head-l{ flex:1; display:flex; flex-direction:column; gap:0.6rem; }
  .qz-progress{ height:6px; border-radius:999px; background:var(--surface-3); overflow:hidden; max-width:280px; }
  .qz-progress span{ display:block; height:100%; width:0; background:var(--terracotta); border-radius:inherit; transition:width .35s ease; }
  .qz-body{ padding:clamp(1.3rem,4vw,2.2rem); }
  .qz-count{ font-family:'Cairo',sans-serif; font-size:0.8rem; font-weight:700; color:var(--ink-faint); }
  .qz-q{ font-size:clamp(1.5rem,3.4vw,2rem); margin:0.35rem 0 0.3rem; }
  .qz-sub{ color:var(--ink-soft); margin-bottom:1.3rem; }
  .qz-opts{ display:grid; grid-template-columns:1fr 1fr; gap:0.7rem; }
  .qz-opt{
    all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:0.9rem; padding:1rem 1.1rem;
    border-radius:var(--radius-m); border:1.5px solid var(--line-soft); background:var(--surface); transition:border-color .2s, box-shadow .2s, transform .2s;
  }
  .qz-opt:hover{ border-color:var(--line); transform:translateY(-2px); }
  .qz-opt:focus-visible{ outline:3px solid var(--turquoise); outline-offset:2px; }
  .qz-opt[aria-pressed="true"]{ border-color:var(--terracotta); box-shadow:0 0 0 3px var(--terracotta-tint); }
  .qz-opt .em{ font-size:1.7rem; line-height:1; flex:none; }
  .qz-opt strong{ display:block; font-size:1rem; }
  .qz-opt small{ display:block; color:var(--ink-soft); font-size:0.84rem; margin-top:0.1rem; }
  .qz-nav{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:1.5rem; flex-wrap:wrap; }
  .qz-back{ all:unset; cursor:pointer; font-family:'Cairo',sans-serif; font-weight:700; font-size:0.88rem; color:var(--ink-soft); }
  .qz-back:hover{ color:var(--ink); }
  .qz-back:focus-visible{ outline:3px solid var(--turquoise); outline-offset:3px; border-radius:4px; }
  @media (max-width:600px){ .qz-opts{ grid-template-columns:1fr; } }
  @media (prefers-reduced-motion: no-preference){ .qz-step{ animation:qzIn .35s cubic-bezier(.2,.8,.2,1); } @keyframes qzIn{ from{ opacity:0; transform:translateX(14px); } to{ opacity:1; transform:none; } } }

  .qz-result{ display:grid; grid-template-columns:1fr 1.1fr; gap:1.4rem; align-items:start; margin-top:1.2rem; }
  .qz-result img{ width:100%; aspect-ratio:4/4.3; object-fit:cover; }
  .qz-match{ font-family:'Cairo',sans-serif; font-weight:700; font-size:0.8rem; color:var(--bougainvillea); }
  .qz-result h3{ font-size:clamp(1.5rem,3vw,1.9rem); margin:0.3rem 0 0.6rem; }
  .qz-result .pk-price{ margin:1rem 0; }
  .qz-why{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.5rem; }
  .qz-why li{ display:flex; gap:0.55rem; font-size:0.94rem; }
  .qz-why li::before{ content:""; flex:none; width:17px; height:17px; margin-top:0.2rem; border-radius:50%; background-color:var(--terracotta-tint);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F7E73' stroke-width='3'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E"); background-size:11px; background-position:center; background-repeat:no-repeat; }
  .qz-actions{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:1.2rem; }
  .qz-alt{ margin-top:1.6rem; padding:1rem 1.2rem; border-radius:var(--radius-m); background:var(--surface-2); display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; font-size:0.92rem; }
  .qz-alt strong{ display:block; }
  @media (max-width:600px){ .qz-result{ grid-template-columns:1fr; } .qz-result img{ aspect-ratio:16/10; } }

  /* airport transfer (VIP) */
  .tr-opt{ display:grid; grid-template-columns:auto 1fr auto; gap:0.7rem; align-items:center; padding:0.7rem 0.8rem; margin-top:0.5rem; border-radius:var(--radius-s); border:1.5px solid var(--line-soft); cursor:pointer; transition:border-color .2s, box-shadow .2s; }
  .tr-opt.on{ border-color:var(--terracotta); box-shadow:0 0 0 3px var(--terracotta-tint); }
  .tr-opt input{ appearance:none; -webkit-appearance:none; margin:0; width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line); display:grid; place-content:center; cursor:pointer; background:var(--surface); }
  .tr-opt input:checked{ background:var(--terracotta); border-color:var(--terracotta); }
  .tr-opt input:checked::after{ content:""; width:11px; height:11px; background:#FFF8EF; clip-path:polygon(14% 52%, 0 66%, 38% 100%, 100% 26%, 86% 12%, 38% 72%); }
  .tr-opt input:focus-visible{ outline:3px solid var(--turquoise); outline-offset:2px; }
  .tr-opt strong{ display:block; font-size:0.9rem; line-height:1.25; }
  .tr-opt small{ display:block; font-size:0.78rem; color:var(--ink-soft); }
  .tr-opt b{ font-family:'Cairo',sans-serif; font-size:0.9rem; font-variant-numeric:tabular-nums; }
  fieldset.flight{ border:1.5px dashed var(--line); border-radius:var(--radius-m); padding:0.9rem 1rem 1rem; margin:0; }
  fieldset.flight[hidden], .fld[hidden]{ display:none; }
  fieldset.flight legend{ font-family:'Cairo',sans-serif; font-size:0.84rem; font-weight:700; color:var(--ink-soft); padding:0 0.4rem; }

  /* WordPress admin bar */
  .admin-bar header.nav{ top:32px; }
  @media (max-width:782px){ .admin-bar header.nav{ top:46px; } }