/* ============================================================ 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,.hero-slide video{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,.card-media video{width:100%;height:auto;display:block;transition:transform 1s var(--ease-out)}

/* A clip dropped into a photo field behaves exactly like the photo it replaced. */
video[data-clip]{display:block;max-width:100%;background:var(--sand-100)}
.frame video[data-clip]{width:100%;height:auto}
.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}}
/* The stage shrinks to the picture, which is what lets the mark sit in the
   picture's corner rather than the screen's. */
.lb-stage{position:relative;display:inline-flex;max-width:100%;max-height:86vh}
.lb img,.lb .lb-video{display:block;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)}
/* display:block above would otherwise defeat the hidden attribute and leave an
   empty player sitting beside the photograph */
.lb-stage [hidden]{display:none}
.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,
.g-3.lead-first>*:first-child .card-media video{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}
  /* min-height:100% is what makes the media column match the copy beside it on a
     wide screen. Stacked, it instead makes the picture as tall as the whole card,
     which pushed the text out of the bottom and `overflow:hidden` then hid it. */
  .g-3.lead-first>*:first-child .card-media{flex:none;min-height:0}
  .g-3.lead-first>*:first-child .card-media img,
  .g-3.lead-first>*:first-child .card-media video{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)}

/* ------------------------------------------------------------- watermark

   Measured against the frame the visitor actually sees, never against the file.
   The same photograph is served to a 373px card, a full-bleed hero and a
   gallery tile, and each of those crops it differently — a mark baked into the
   file lands in a different place and a different size in all three, and is
   sometimes cropped away entirely. Anchored to the box instead, it sits in the
   same corner at the same visual size on a phone and on a desktop.

   --wm-size is a share of the frame, held between a floor and a ceiling so it
   stays legible on a thumbnail without becoming a billboard on a hero. */
:root{
  --wm-size: clamp(54px, 13%, 132px);
  --wm-inset: clamp(7px, 3.2%, 20px);
  --wm-opacity: .62;
}

/* The frames a photograph is actually shown in. Anything that should stay clean
   — a logo card, a diagram — carries .no-wm. */
.wm-on .card-media,.wm-on .frame{position:relative}
.wm-on .lb-stage::after{content:''}
.wm-on .card-media::after,.wm-on .frame::after,.wm-on .lb-stage::after{
  content:'';position:absolute;pointer-events:none;z-index:3;
  right:var(--wm-inset);bottom:var(--wm-inset);
  width:var(--wm-size);aspect-ratio:1200 / 321;
  background:url('/assets/logo-h-light.png') no-repeat center/contain;
  opacity:var(--wm-opacity);
  /* the mark is white; the halo is what keeps it on a bright sky or a white hull */
  filter:drop-shadow(0 1px 2px rgba(6,20,34,.85)) drop-shadow(0 0 7px rgba(6,20,34,.5));
}

/* Banners carry no mark. The site header sits on top of every one of them with
   the full logo already in it, and the only free corner up there is occupied by
   the navigation and the WhatsApp button. */

/* Small tiles: below this a wordmark is just a smudge, so it steps aside. */
@media (max-width:420px){
  .wm-on .masonry .frame::after{--wm-size: clamp(44px, 26%, 70px);--wm-opacity:.55}
}
.wm-on .lb-stage::after{--wm-size: clamp(70px, 11%, 160px);--wm-opacity:.66}
.wm-on .no-wm::after,.wm-on .no-wm::before{content:none !important}
.wm-on .card-media::after,.wm-on .frame::after{transition:opacity .3s}
.wm-on .card:hover .card-media::after{opacity:calc(var(--wm-opacity) + .12)}