/* ============================================================ Yachtale Phuket
   Design system. Navy / turquoise / gold. Fraunces display + Plus Jakarta Sans.
   Rule of the house: photographs are never cropped by the layout — frames hug
   the image's own aspect ratio. The only exception is the full-bleed banner,
   which crops to a per-slide focal point set in the CMS.
   ========================================================================== */

:root {
  /* palette */
  --navy-950:#04101F; --navy-900:#071A2F; --navy-800:#0B2545;
  --navy-700:#123A63;  --navy-600:#1B4E80;
  --aqua-700:#0E7A88;  --aqua-600:#1698A8; --aqua-500:#22B4C6; --aqua-400:#2FC5D6;
  --aqua-300:#5BD9E6;  --aqua-100:#D3F3F8;
  --gold-600:#A8863A;  --gold-500:#C9A24B; --gold-400:#D9B767; --gold-200:#EBD6A4;
  --sand-50:#FBF8F3;   --sand-100:#F4EEE4; --sand-200:#E8DFD0;
  --paper:#FFFFFF;
  --ink:#0D1B2A;       --ink-2:#41546A;    --ink-3:#6B7C90;
  --line:#E3E8EE;      --line-dark:rgba(255,255,255,.14);

  /* type */
  --display:'Fraunces','Georgia',serif;
  --sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* rhythm */
  --wrap:1280px; --wrap-wide:1560px; --wrap-text:760px;
  --pad:clamp(1.15rem,4vw,3rem);
  --section:clamp(4rem,9vw,7.5rem);
  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:34px;

  --shadow-sm:0 2px 8px rgba(9,26,47,.06),0 1px 2px rgba(9,26,47,.04);
  --shadow:0 12px 34px -12px rgba(9,26,47,.22),0 4px 10px -6px rgba(9,26,47,.12);
  --shadow-lg:0 34px 70px -28px rgba(9,26,47,.42),0 10px 24px -14px rgba(9,26,47,.2);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.68;font-weight:400;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--aqua-500);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.08;
  letter-spacing:-.015em;margin:0 0 .5em;font-variation-settings:'SOFT' 0,'WONK' 0}
h1{font-size:clamp(2.4rem,1.3rem + 4.6vw,4.6rem)}
h2{font-size:clamp(1.95rem,1.2rem + 2.9vw,3.3rem)}
h3{font-size:clamp(1.25rem,1.05rem + .85vw,1.7rem)}
h4{font-size:clamp(1.05rem,1rem + .35vw,1.25rem)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
::selection{background:var(--aqua-300);color:var(--navy-900)}

/* ------------------------------------------------------------- primitives */
.wrap{width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto}
.wrap-wide{width:min(100% - var(--pad)*2,var(--wrap-wide));margin-inline:auto}
.wrap-text{width:min(100% - var(--pad)*2,var(--wrap-text));margin-inline:auto}
.section{padding-block:var(--section)}
.section-sm{padding-block:clamp(2.5rem,5vw,4rem)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;font-size:.72rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--aqua-600);margin-bottom:1rem;
}
.eyebrow::before{content:'';width:2rem;height:1px;background:currentColor;opacity:.55;flex:none}
.on-dark .eyebrow,.dark .eyebrow{color:var(--gold-400)}
.lead{font-size:clamp(1.06rem,1rem + .42vw,1.28rem);color:var(--ink-2);line-height:1.62}
.on-dark .lead,.dark .lead{color:rgba(255,255,255,.78)}
.muted{color:var(--ink-3)}
.gold{color:var(--gold-500)}

.dark{background:var(--navy-900);color:#fff}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.dark .muted{color:rgba(255,255,255,.6)}
.sand{background:var(--sand-50)}

.ico{display:inline-block;flex:none;vertical-align:middle}

/* ---------------------------------------------------------------- buttons */
.btn{
  --btn-bg:var(--gold-500); --btn-fg:var(--navy-950); --btn-bd:var(--gold-500);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.92rem 1.6rem;border-radius:999px;border:1px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);font-weight:650;font-size:.94rem;
  letter-spacing:.01em;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),
             background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
  box-shadow:0 6px 18px -8px rgba(169,134,58,.7);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px -12px rgba(169,134,58,.75)}
.btn:active{transform:translateY(0)}
.btn .ico{transition:transform .35s var(--ease-out)}
.btn:hover .ico{transform:translateX(3px)}
.btn-ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line);box-shadow:none}
.btn-ghost:hover{--btn-bd:var(--navy-800);box-shadow:0 10px 24px -16px rgba(9,26,47,.5)}
.on-dark .btn-ghost,.dark .btn-ghost{--btn-fg:#fff;--btn-bd:rgba(255,255,255,.34)}
.on-dark .btn-ghost:hover,.dark .btn-ghost:hover{--btn-bd:#fff;background:rgba(255,255,255,.08)}
.btn-navy{--btn-bg:var(--navy-800);--btn-fg:#fff;--btn-bd:var(--navy-800);box-shadow:0 6px 18px -8px rgba(11,37,69,.6)}
.btn-navy:hover{--btn-bg:var(--navy-700);--btn-bd:var(--navy-700)}
.btn-wa{--btn-bg:#25D366;--btn-fg:#052E14;--btn-bd:#25D366;box-shadow:0 6px 18px -8px rgba(37,211,102,.7)}
.btn-wa:hover{--btn-bg:#1FBE5A;--btn-bd:#1FBE5A}
.btn-sm{padding:.62rem 1.15rem;font-size:.85rem}
.btn-lg{padding:1.05rem 2rem;font-size:1rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

.link-arrow{display:inline-flex;align-items:center;gap:.45rem;font-weight:650;
  color:var(--aqua-700);font-size:.92rem;transition:gap .3s var(--ease-out)}
.link-arrow:hover{gap:.8rem}
.on-dark .link-arrow,.dark .link-arrow{color:var(--gold-400)}

/* ------------------------------------------------------------------ frames
   A .frame hugs its image: no letterboxing, no forced ratio, no cropping. */
.frame{margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--sand-100);box-shadow:var(--shadow);isolation:isolate}
.frame>img{width:100%;height:auto;display:block}
.frame figcaption{position:absolute;inset:auto 0 0 0;padding:1.6rem 1.2rem .95rem;
  font-size:.82rem;color:#fff;background:linear-gradient(transparent,rgba(4,16,31,.82))}
.frame-sm{border-radius:var(--r)}
.frame-flat{box-shadow:none}
.frame-gold{box-shadow:0 0 0 1px var(--gold-200),var(--shadow)}

/* zoom on hover happens inside the frame, so the frame itself never changes size */
.zoom>img{transition:transform 1.1s var(--ease-out)}
.zoom:hover>img{transform:scale(1.045)}

/* ----------------------------------------------------------------- header */
.announce{position:relative;z-index:82;background:var(--navy-950);color:rgba(255,255,255,.86);font-size:.8rem;
  text-align:center;padding:.55rem var(--pad);letter-spacing:.01em}
.announce a{color:var(--gold-400);font-weight:650;text-decoration:underline;text-underline-offset:3px}

.site-header{position:sticky;top:0;z-index:80;transition:background-color .45s var(--ease),
  box-shadow .45s var(--ease),backdrop-filter .45s var(--ease)}
.site-header::before{content:'';position:absolute;inset:0;
  background:linear-gradient(rgba(4,16,31,.62),rgba(4,16,31,0));pointer-events:none;
  transition:opacity .45s var(--ease)}
.site-header.solid{background:rgba(255,255,255,.92);backdrop-filter:saturate(150%) blur(14px);
  box-shadow:0 1px 0 var(--line),0 10px 30px -24px rgba(9,26,47,.5)}
.site-header.solid::before{opacity:0}
.header-inner{display:flex;align-items:center;gap:1.4rem;
  width:min(100% - var(--pad)*2,var(--wrap-wide));margin-inline:auto;
  padding-block:.85rem;position:relative}
.brand{display:flex;align-items:center;gap:.7rem;flex:none;z-index:2}
.brand img{display:block;height:48px;width:auto;max-width:none;object-fit:contain;transition:height .4s var(--ease)}
.solid .brand img{height:42px}
.brand .logo-on-dark{display:block}
.brand .logo-on-light{display:none}
.solid .brand .logo-on-dark{display:none}
.solid .brand .logo-on-light{display:block}
@media (max-width:560px){.brand img{height:38px}.solid .brand img{height:34px}}
@media (max-width:380px){.brand img{height:34px}.solid .brand img{height:31px}}

.nav{display:flex;align-items:center;gap:.15rem;margin-left:auto}
.nav a{position:relative;padding:.55rem .78rem;font-size:.9rem;font-weight:550;
  white-space:nowrap;color:#fff;border-radius:8px;
  transition:color .3s var(--ease),background-color .3s var(--ease)}
.solid .nav a{color:var(--ink)}
.nav a::after{content:'';position:absolute;left:.78rem;right:.78rem;bottom:.34rem;height:1.5px;
  background:var(--gold-400);transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--ease-out)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.header-cta{display:flex;align-items:center;gap:.5rem;flex:none}
/* the tight band just above the drawer breakpoint: eight nav items plus the
   WhatsApp button still have to fit on one line */
@media (min-width:1181px) and (max-width:1330px){
  .header-inner{gap:1rem}
  .nav a{padding:.55rem .58rem;font-size:.86rem}
  .brand img{height:44px}
  .solid .brand img{height:39px}
}
.nav-toggle{display:none;background:none;border:0;padding:.45rem;cursor:pointer;color:#fff}
.solid .nav-toggle{color:var(--ink)}

@media (max-width:1180px){
  .nav{position:fixed;inset:0 0 0 auto;width:min(88vw,360px);background:var(--navy-900);
    flex-direction:column;align-items:stretch;gap:0;padding:5.5rem 1.4rem 2rem;
    transform:translateX(102%);transition:transform .45s var(--ease-out);
    box-shadow:-30px 0 60px -30px rgba(0,0,0,.6);overflow-y:auto}
  .nav.open{transform:translateX(0)}
  .nav a{color:#fff!important;padding:.95rem .35rem;font-size:1.05rem;
    border-bottom:1px solid var(--line-dark);border-radius:0}
  .nav a::after{display:none}
  .nav-toggle{display:inline-flex;order:3;margin-left:auto;z-index:120;position:relative}
  .nav.open+.header-cta .nav-toggle,.nav-toggle[aria-expanded="true"]{color:#fff}
  .header-cta .btn:not(.nav-toggle){display:none}
  .nav-backdrop{position:fixed;inset:0;background:rgba(4,16,31,.55);opacity:0;
    pointer-events:none;transition:opacity .4s var(--ease);z-index:79}
  .nav-backdrop.on{opacity:1;pointer-events:auto}
}

/* ------------------------------------------------------------------ banner */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--navy-950);
  margin-top:calc(-1 * var(--header-h,68px));min-height:min(100svh,860px)}
.hero-track{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.25s var(--ease);
  will-change:opacity}
.hero-slide.active{opacity:1}
.hero-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-slide.active img{animation:kenburns 11s var(--ease-out) forwards}
@keyframes kenburns{from{transform:scale(1.055)}to{transform:scale(1)}}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,16,31,.58) 0%,rgba(4,16,31,.18) 32%,
    rgba(4,16,31,.42) 66%,rgba(4,16,31,.86) 100%)}
.hero-inner{position:relative;z-index:2;min-height:min(100svh,860px);display:flex;
  align-items:flex-end;padding-top:calc(var(--header-h,68px) + 4rem);
  padding-bottom:clamp(5rem,9vw,7.5rem)}
/* Every slide's words are stacked in the same cell, so the block keeps the
   height of the tallest and nothing shifts as the slideshow advances. */
.hero-copies{display:grid}
.hero-copies>.hero-copy{grid-area:1 / 1}
.hero-copy{max-width:min(100%,780px);color:#fff;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .7s var(--ease),visibility 0s linear .7s}
.hero-copy.active{opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .7s var(--ease),visibility 0s}
.hero-copy .eyebrow{color:var(--gold-400)}
.hero h1{margin-bottom:1rem;text-shadow:0 2px 34px rgba(4,16,31,.45)}
/* Each heading line is masked so the words can slide up into view. The display
   serif's ascenders and descenders are taller than the 1.08 line box, so the
   mask needs padding or it shaves the tops and tails off every letter; the
   matching negative margin keeps the layout exactly where it was. */
.hero h1 .ln{display:block;overflow:hidden;
  padding-top:.16em;margin-top:-.16em;
  padding-bottom:.22em;margin-bottom:-.22em}
.hero h1 .ln>span{display:block;transform:translateY(150%);
  transition:transform .95s var(--ease-out)}
.hero-slide.active h1 .ln>span,.hero-copy.in h1 .ln>span{transform:translateY(0)}
.hero-copy .hero-sub{font-size:clamp(1rem,.95rem + .38vw,1.2rem);color:rgba(255,255,255,.87);
  max-width:56ch;margin-bottom:1.7rem;text-shadow:0 1px 18px rgba(4,16,31,.5)}
.hero-fade{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease) .25s,
  transform .8s var(--ease-out) .25s}
.hero-copy.in .hero-fade{opacity:1;transform:none}

.hero-nav{position:absolute;left:0;right:0;bottom:clamp(1rem,2.5vw,1.8rem);z-index:3}
.hero-nav-inner{width:min(100% - var(--pad)*2,var(--wrap-wide));margin-inline:auto;
  display:flex;align-items:center;gap:1rem;justify-content:space-between}
.hero-dots{display:flex;gap:.5rem;align-items:center}
.hero-dot{width:34px;height:3px;border:0;padding:0;border-radius:2px;cursor:pointer;
  background:rgba(255,255,255,.3);position:relative;overflow:hidden;transition:background-color .3s}
.hero-dot span{position:absolute;inset:0;background:var(--gold-400);transform:scaleX(0);
  transform-origin:left}
.hero-dot.active span{animation:dotfill var(--hero-dur,7s) linear forwards}
@keyframes dotfill{to{transform:scaleX(1)}}
.hero-arrows{display:flex;gap:.5rem}
.hero-arrow{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.32);
  background:rgba(4,16,31,.28);color:#fff;display:grid;place-items:center;cursor:pointer;
  backdrop-filter:blur(6px);transition:background-color .3s,border-color .3s,transform .3s var(--ease-out)}
.hero-arrow:hover{background:rgba(255,255,255,.16);border-color:#fff;transform:scale(1.06)}
@media (max-width:700px){.hero-arrows{display:none}}


/* page hero (interior pages) */
.page-hero{position:relative;background:var(--navy-900);color:#fff;isolation:isolate;
  margin-top:calc(-1 * var(--header-h,68px));overflow:hidden}
.page-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72}
.page-hero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,16,31,.66),rgba(4,16,31,.38) 45%,rgba(4,16,31,.88))}
.page-hero-inner{position:relative;z-index:2;padding-top:calc(var(--header-h,68px) + clamp(3rem,7vw,6rem));
  padding-bottom:clamp(2.6rem,6vw,4.5rem)}
.page-hero h1{margin-bottom:.6rem}
.page-hero .lead{max-width:62ch;color:rgba(255,255,255,.82)}

.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.78rem;
  color:rgba(255,255,255,.62);margin-bottom:1.1rem}
.crumbs a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.crumbs .sep{opacity:.45}

/* ------------------------------------------------------------------- grids */
.grid{display:grid;gap:clamp(1.1rem,2.4vw,2rem)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.g-auto-sm{grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))}
@media (max-width:1000px){.g-4{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.g-4,.g-3,.g-2{grid-template-columns:1fr}
  .g-4.keep-2,.g-3.keep-2,.g-2.keep-2{grid-template-columns:repeat(2,1fr)}}

/* Editorial header: numbered rail, then the heading. The asymmetry — and the
   fact the "view all" link sits under the copy rather than opposite it — is what
   keeps the page from reading as a stock three-column template. */
body{counter-reset:sec}
.section-head{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:clamp(1rem,3vw,3rem);margin-bottom:clamp(2rem,4vw,3.4rem);
  counter-increment:sec;align-items:start}
.section-head .sh-rail{position:relative;padding-top:.55rem;
  border-top:1px solid var(--line)}
.dark .section-head .sh-rail{border-top-color:var(--line-dark)}
.section-head .sh-rail::before{content:counter(sec,decimal-leading-zero);
  display:block;font-family:var(--display);font-size:.95rem;font-weight:600;
  color:var(--gold-500);letter-spacing:.04em;margin-bottom:.5rem}
.section-head .sh-eyebrow{display:block;font-size:.74rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ink-2);line-height:1.5}
.dark .section-head .sh-eyebrow{color:rgba(255,255,255,.62)}
.section-head .st{max-width:60ch;padding-top:.1rem}
.section-head h2{margin-bottom:.5rem}
.section-head .st .lead{margin-bottom:0}
.section-head .link-arrow{margin-top:1.1rem}
@media (max-width:820px){
  .section-head{grid-template-columns:1fr;gap:.9rem}
  .section-head .sh-rail{padding-top:.45rem}
  .section-head .sh-rail::before{display:inline-block;margin:0 .7rem 0 0}
  .section-head .sh-eyebrow{display:inline-block;vertical-align:2px}
}

/* -------------------------------------------------------------------- card */
.card{display:flex;flex-direction:column;background:var(--paper);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--line);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .4s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.card-media{position:relative;overflow:hidden;background:var(--sand-100)}
.card-media img{width:100%;height:auto;display:block;transition:transform 1s var(--ease-out)}
.card:hover .card-media img{transform:scale(1.05)}
.card-body{padding:clamp(1.1rem,2vw,1.55rem);display:flex;flex-direction:column;gap:.6rem;flex:1}
.card-body h3{margin:0}
.card-body p{color:var(--ink-2);font-size:.95rem;margin:0}
.card-foot{margin-top:auto;padding-top:.9rem;display:flex;align-items:center;
  justify-content:space-between;gap:.8rem;border-top:1px solid var(--line)}
.dark .card{background:rgba(255,255,255,.045);border-color:var(--line-dark);color:#fff}
.dark .card-body p{color:rgba(255,255,255,.72)}
.dark .card-foot{border-color:var(--line-dark)}

.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .68rem;border-radius:999px;
  font-size:.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  background:var(--aqua-100);color:var(--aqua-700)}
.badge-gold{background:rgba(201,162,75,.16);color:var(--gold-600)}
.badge-float{position:absolute;top:.9rem;left:.9rem;z-index:2;background:rgba(4,16,31,.72);
  color:#fff;backdrop-filter:blur(6px)}
.price{font-family:var(--display);font-size:1.28rem;color:var(--navy-800);font-weight:600;
  letter-spacing:-.01em}
.dark .price{color:var(--gold-400)}
.price small{font-family:var(--sans);font-size:.7rem;font-weight:600;color:var(--ink-3);
  letter-spacing:.1em;text-transform:uppercase;display:block;line-height:1.4}
.dark .price small{color:rgba(255,255,255,.6)}

.meta-row{display:flex;flex-wrap:wrap;gap:.45rem .95rem;font-size:.82rem;color:var(--ink-3)}
.meta-row span{display:inline-flex;align-items:center;gap:.35rem}
.dark .meta-row{color:rgba(255,255,255,.62)}

/* ---------------------------------------------------------------- feature */
.feature{display:grid;gap:clamp(1.6rem,4vw,4rem);align-items:center;
  grid-template-columns:1.05fr .95fr}
.feature.flip>*:first-child{order:2}
@media (max-width:900px){.feature,.feature.flip{grid-template-columns:1fr}
  .feature.flip>*:first-child{order:0}}
.feature-stack{position:relative}
.feature-stack .frame+.frame{position:absolute;width:46%;right:-4%;bottom:-11%;
  border:5px solid var(--paper);box-shadow:var(--shadow-lg)}
.dark .feature-stack .frame+.frame{border-color:var(--navy-900)}
@media (max-width:560px){.feature-stack .frame+.frame{position:static;width:100%;margin-top:.9rem;border:0}}

/* -------------------------------------------------------------------- list */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ticks li{display:flex;gap:.65rem;align-items:flex-start;font-size:.95rem;color:var(--ink-2)}
.ticks .ico{color:var(--aqua-500);margin-top:.22em}
.dark .ticks li{color:rgba(255,255,255,.78)}
.ticks-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 1.4rem}
@media (max-width:620px){.ticks-2{grid-template-columns:1fr}}
.crosses .ico{color:var(--ink-3);opacity:.7}

/* -------------------------------------------------------------------- stat */
.stat{text-align:center;padding:clamp(1.1rem,2.2vw,1.6rem) .6rem}
.stat .ico{color:var(--gold-400);margin:0 auto .7rem}
.stat b{display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(1.7rem,1.2rem + 1.7vw,2.6rem);line-height:1;letter-spacing:-.02em}
.stat span{display:block;font-size:.82rem;font-weight:650;letter-spacing:.1em;
  text-transform:uppercase;margin-top:.55rem;opacity:.85}
.stat em{display:block;font-style:normal;font-size:.8rem;opacity:.58;margin-top:.25rem}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line-dark);border-radius:var(--r-lg);overflow:hidden}
.stat-row .stat+.stat{border-left:1px solid var(--line-dark)}
@media (max-width:760px){.stat-row{grid-template-columns:repeat(2,1fr)}
  .stat-row .stat:nth-child(3){border-left:0}
  .stat-row .stat:nth-child(n+3){border-top:1px solid var(--line-dark)}}

/* ------------------------------------------------------------------ pillar */
.pillar{display:flex;flex-direction:column;gap:.7rem;padding:clamp(1.3rem,2.4vw,1.9rem);
  border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pillar .ico-badge{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--aqua-400),var(--aqua-600));color:#fff;
  box-shadow:0 8px 20px -10px rgba(22,152,168,.8)}
.pillar h3{font-size:1.12rem;margin:0}
.pillar p{margin:0;font-size:.93rem;color:var(--ink-2)}
.dark .pillar{background:rgba(255,255,255,.045);border-color:var(--line-dark)}
.dark .pillar p{color:rgba(255,255,255,.72)}
.dark .pillar .ico-badge{background:linear-gradient(140deg,var(--gold-400),var(--gold-600));
  color:var(--navy-950);box-shadow:0 8px 20px -10px rgba(201,162,75,.7)}

/* ------------------------------------------------------------------ masonry
   CSS columns keep every photo at its true aspect ratio. */
.masonry{column-gap:clamp(.55rem,1.4vw,1.1rem);columns:4}
.masonry>*{break-inside:avoid;margin-bottom:clamp(.55rem,1.4vw,1.1rem)}
@media (max-width:1100px){.masonry{columns:3}}
@media (max-width:700px){.masonry{columns:2}}
@media (max-width:380px){.masonry{columns:2}}
.masonry .frame{border-radius:var(--r);box-shadow:var(--shadow-sm);cursor:zoom-in}
.masonry .frame:hover{box-shadow:var(--shadow)}

/* ------------------------------------------------------------------- strip */
.strip{display:flex;gap:clamp(.6rem,1.4vw,1rem);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:.6rem;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.strip>*{scroll-snap-align:start;flex:0 0 clamp(230px,26vw,340px)}
.strip::-webkit-scrollbar{height:6px}
.strip::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}

/* ------------------------------------------------------------------ quotes */
.quote{background:var(--paper);border-radius:var(--r-lg);padding:clamp(1.4rem,2.6vw,2rem);
  border:1px solid var(--line);display:flex;flex-direction:column;gap:.9rem;height:100%}
.quote .ico-quote{color:var(--gold-400)}
.quote p{font-size:.97rem;color:var(--ink-2);margin:0;line-height:1.66}
.quote footer{margin-top:auto;padding-top:.8rem;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:.5rem .9rem;flex-wrap:wrap}
.quote .who{font-weight:700;font-size:.92rem}
.quote .when{font-size:.78rem;color:var(--ink-3)}
.stars{display:inline-flex;gap:1px;color:var(--gold-500)}
.stars .ico{fill:currentColor}
.dark .quote{background:rgba(255,255,255,.05);border-color:var(--line-dark)}
.dark .quote p{color:rgba(255,255,255,.8)}
.dark .quote footer{border-color:var(--line-dark)}
.dark .quote .when{color:rgba(255,255,255,.55)}

/* Reviews vary a lot in length — columns let each card hug its own text
   instead of every card in a row stretching to the tallest. */
.quote-grid{columns:3;column-gap:clamp(1.1rem,2.4vw,2rem)}
.quote-grid>*{break-inside:avoid;margin-bottom:clamp(1.1rem,2.4vw,2rem)}
@media (max-width:1000px){.quote-grid{columns:2}}
@media (max-width:680px){.quote-grid{columns:1}}
.quote-grid .quote{height:auto}

/* ---------------------------------------------------------------- marquee */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:2.6rem;width:max-content;animation:marq 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee-item{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--display);
  font-size:clamp(.92rem,.86rem + .35vw,1.15rem);white-space:nowrap;opacity:.85}
.marquee-item .ico{color:var(--gold-400);opacity:.9}

/* ------------------------------------------------------------------ accord */
.accord{border-top:1px solid var(--line)}
.accord details{border-bottom:1px solid var(--line)}
.accord summary{list-style:none;cursor:pointer;padding:1.15rem .4rem 1.15rem 0;
  display:flex;gap:1rem;align-items:flex-start;font-weight:650;font-size:1.02rem;
  transition:color .3s}
.accord summary::-webkit-details-marker{display:none}
.accord summary:hover{color:var(--aqua-700)}
.accord summary .ico{margin-left:auto;flex:none;transition:transform .4s var(--ease-out);
  color:var(--ink-3);margin-top:.15em}
.accord details[open] summary .ico{transform:rotate(180deg)}
.accord .answer{padding:0 2.6rem 1.35rem 0;color:var(--ink-2);font-size:.96rem}
.accord details[open] .answer{animation:fadeUp .5s var(--ease-out)}
@keyframes fadeUp{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* -------------------------------------------------------------------- form */
.form{display:grid;gap:1rem}
.field{display:grid;gap:.4rem}
.field label{font-size:.82rem;font-weight:650;letter-spacing:.03em;color:var(--ink-2)}
.field .req{color:var(--gold-600)}
.field input,.field select,.field textarea{
  width:100%;padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper);font:inherit;font-size:.95rem;color:var(--ink);
  transition:border-color .3s,box-shadow .3s}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;
  border-color:var(--aqua-500);box-shadow:0 0 0 3px rgba(47,197,214,.16)}
.field-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}
.form-note{font-size:.8rem;color:var(--ink-3)}
.form-status{padding:.9rem 1.1rem;border-radius:var(--r-sm);font-size:.9rem;display:none}
.form-status.ok{display:block;background:rgba(34,180,198,.12);color:var(--aqua-700);
  border:1px solid rgba(34,180,198,.3)}
.form-status.err{display:block;background:rgba(191,60,60,.09);color:#A33;
  border:1px solid rgba(191,60,60,.25)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------------------------ tables */
.spec{width:100%;border-collapse:collapse;font-size:.93rem}
.spec th,.spec td{text-align:left;padding:.72rem 0;border-bottom:1px solid var(--line);
  vertical-align:top}
.spec th{font-weight:650;color:var(--ink-3);width:44%;font-size:.86rem;
  letter-spacing:.04em;text-transform:uppercase}
.dark .spec th,.dark .spec td{border-color:var(--line-dark)}
.dark .spec th{color:rgba(255,255,255,.55)}

/* --------------------------------------------------------------- contactbar */
.cbar{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr))}
.cbar a,.cbar div{display:flex;gap:.85rem;align-items:flex-start;padding:1.15rem;
  border-radius:var(--r);border:1px solid var(--line-dark);background:rgba(255,255,255,.04);
  transition:background-color .35s,transform .35s var(--ease-out),border-color .35s}
.cbar a:hover{background:rgba(255,255,255,.09);transform:translateY(-3px);border-color:rgba(255,255,255,.3)}
.cbar .ico{color:var(--gold-400);margin-top:.15em}
.cbar b{display:block;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  opacity:.6;font-weight:700;margin-bottom:.2rem}
.cbar span{font-size:.98rem;font-weight:550;word-break:break-word}

/* -------------------------------------------------------------------- CTA */
.cta-band{position:relative;isolation:isolate;overflow:hidden;background:var(--navy-900);color:#fff}
.cta-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}
.cta-band::after{content:'';position:absolute;inset:0;
  background:radial-gradient(120% 100% at 50% 0%,rgba(4,16,31,.45),rgba(4,16,31,.88))}
.cta-band .wrap{position:relative;z-index:2;text-align:center}
.cta-band .lead{margin-inline:auto;max-width:58ch}

/* ------------------------------------------------------------------ footer */
.site-footer{background:var(--navy-950);color:rgba(255,255,255,.72);
  padding-block:clamp(3rem,6vw,4.5rem) 0;font-size:.92rem}
.footer-grid{display:grid;gap:clamp(1.8rem,4vw,3rem);
  grid-template-columns:1.5fr 1fr 1fr 1.2fr}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.site-footer h4{color:#fff;font-family:var(--sans);font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;margin-bottom:1.1rem;opacity:.75}
.site-footer img.flogo{display:block;height:52px;width:auto;max-width:none;object-fit:contain;margin-bottom:1.2rem}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.site-footer a:hover{color:#fff}
.site-footer .fcontact li{display:flex;gap:.6rem;align-items:flex-start}
.site-footer .fcontact .ico{color:var(--gold-400);margin-top:.18em;flex:none}
.socials{display:flex;gap:.55rem;margin-top:1.2rem}
.socials a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-dark);
  display:grid;place-items:center;transition:background-color .3s,border-color .3s,transform .3s var(--ease-out)}
.socials a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.35);transform:translateY(-2px)}
.footer-bottom{margin-top:clamp(2.2rem,4vw,3rem);border-top:1px solid var(--line-dark);
  padding:1.3rem 5rem 1.6rem 0;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;
  align-items:center;justify-content:space-between;font-size:.8rem;color:rgba(255,255,255,.5)}
.footer-bottom nav{display:flex;gap:1.2rem;flex-wrap:wrap}

/* ------------------------------------------------------------ float actions */
.float-cta{position:fixed;right:clamp(.9rem,2.5vw,1.6rem);bottom:clamp(.9rem,2.5vw,1.6rem);
  z-index:70;display:flex;flex-direction:column;gap:.6rem;align-items:flex-end}
.fab{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:#25D366;box-shadow:0 14px 30px -12px rgba(37,211,102,.85);
  transition:transform .35s var(--ease-out)}
.fab:hover{transform:scale(1.08)}
.fab.fab-nav{background:var(--navy-800);box-shadow:0 14px 30px -14px rgba(11,37,69,.9)}
.fab::after{content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid currentColor;opacity:.5;animation:pulse 2.6s var(--ease) infinite}
.fab{position:relative}
@keyframes pulse{0%{transform:scale(1);opacity:.5}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
@media (max-width:1180px){.float-cta{bottom:1rem}}

/* ------------------------------------------------------------------ reveal */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease),transform .85s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.09s}.reveal-d2{transition-delay:.18s}
.reveal-d3{transition-delay:.27s}.reveal-d4{transition-delay:.36s}
.reveal-scale{opacity:0;transform:scale(.965);transition:opacity .9s var(--ease),transform 1s var(--ease-out)}
.reveal-scale.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-scale{opacity:1!important;transform:none!important;transition:none!important}
  .hero-slide.active img{animation:none}
  .marquee-track{animation:none}
  .fab::after{animation:none}
  .hero h1 .ln>span{transform:none!important}
}

/* ----------------------------------------------------------------- lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(4,16,31,.94);display:none;
  align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem)}
.lb.on{display:flex;animation:lbin .3s var(--ease)}
@keyframes lbin{from{opacity:0}to{opacity:1}}
.lb img{max-width:100%;max-height:86vh;width:auto;height:auto;border-radius:var(--r);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
.lb-close,.lb-prev,.lb-next{position:absolute;width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;
  display:grid;place-items:center;cursor:pointer;transition:background-color .3s}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.2)}
.lb-close{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem)}
.lb-prev{left:clamp(.6rem,3vw,2rem);top:50%;transform:translateY(-50%)}
.lb-next{right:clamp(.6rem,3vw,2rem);top:50%;transform:translateY(-50%)}
.lb-cap{position:absolute;left:0;right:0;bottom:clamp(.8rem,3vw,1.6rem);text-align:center;
  color:rgba(255,255,255,.72);font-size:.84rem;padding-inline:4rem}

/* --------------------------------------------------------------- utilities */
.divider{height:1px;background:var(--line);border:0;margin:0}
.dark .divider{background:var(--line-dark)}
.rule-gold{width:56px;height:2px;background:var(--gold-500);border:0;margin:0 0 1.4rem}
.center{text-align:center}
.center .eyebrow::before{display:none}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.stack{display:grid;gap:1.1rem}
.stack-sm{display:grid;gap:.6rem}
.pill-row{display:flex;flex-wrap:wrap;gap:.5rem}
.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .85rem;border-radius:999px;
  background:var(--sand-100);font-size:.83rem;font-weight:550;color:var(--ink-2)}
.dark .pill{background:rgba(255,255,255,.08);color:rgba(255,255,255,.82)}
.pill .ico{color:var(--aqua-600)}
.dark .pill .ico{color:var(--gold-400)}
.anchor-offset{scroll-margin-top:calc(var(--header-h,76px) + 1.5rem)}


/* ==========================================================================
   Layout signature
   Deliberate departures from the stock three-column arrangement: alternating
   feature blocks, a lead card that spans the row, staggered destination cards
   and a stats band that straddles two sections.
   ========================================================================== */

/* --- alternating feature blocks ------------------------------------------ */
/* The image stack tucks to the outside edge, and flipped blocks mirror it,
   so consecutive feature rows never sit on the same axis. */
.feature.flip .feature-stack .frame+.frame{right:auto;left:-4%}
.feature-stack .frame+.frame{bottom:-13%}

/* --- lead card: the first card of a run spans the row --------------------- */
.g-3.lead-first>*:first-child{grid-column:1/-1}
.g-3.lead-first>*:first-child.card{flex-direction:row;align-items:stretch}
.g-3.lead-first>*:first-child .card-media{flex:0 0 46%;min-height:100%}
.g-3.lead-first>*:first-child .card-media img{height:100%;object-fit:cover}
.g-3.lead-first>*:first-child .card-body{justify-content:center;gap:.8rem;
  padding:clamp(1.4rem,3vw,2.6rem)}
/* the footer sits with the copy rather than being pushed to the bottom edge */
.g-3.lead-first>*:first-child .card-foot{margin-top:.9rem}
.g-3.lead-first>*:first-child .card-body h3{font-size:clamp(1.4rem,1.1rem + 1vw,2rem)}
.g-3.lead-first>*:first-child .card-body p{font-size:1rem;max-width:52ch}
@media (max-width:820px){
  .g-3.lead-first>*:first-child.card{flex-direction:column}
  .g-3.lead-first>*:first-child .card-media{flex:none}
  .g-3.lead-first>*:first-child .card-media img{height:auto}
}

/* --- staggered destination cards ----------------------------------------- */
@media (min-width:1001px){
  .grid.stagger>*:nth-child(3n+2){transform:translateY(2.6rem)}
  .grid.stagger>*:nth-child(3n+3){transform:translateY(1.3rem)}
  .grid.stagger>*:nth-child(3n+2):hover,
  .grid.stagger>*:nth-child(3n+3):hover{transform:translateY(2.6rem) translateY(-6px)}
  .grid.stagger>*:nth-child(3n+3):hover{transform:translateY(1.3rem) translateY(-6px)}
  .grid.stagger{margin-bottom:2.6rem}
}

/* --- stats band straddling the section boundary -------------------------- */
.band-straddle{padding-block:0;background:transparent;position:relative}
.band-straddle::before{content:'';position:absolute;left:0;right:0;bottom:0;
  height:56%;background:var(--navy-900)}
.band-straddle .stat-row{position:relative;background:var(--navy-900);
  border-color:var(--line-dark);box-shadow:var(--shadow-lg)}
.band-straddle .stat{color:#fff}
@media (max-width:760px){.band-straddle::before{height:70%}}

/* --- card detail: a gold hairline that draws on hover --------------------- */
.card{position:relative}
.card::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--gold-500);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease-out);z-index:2}
.card:hover::after{transform:scaleX(1)}