/* ==========================================================================
   Screaming Reels — Seychelles Outer Islands Expeditions
   Design system. Minimal, editorial, ocean-led.
   ========================================================================== */

:root{
  --ink:        #08171F;
  --ink-2:      #0E2A38;
  --ink-3:      #17414F;
  --bone:       #F7F4EE;
  --sand:       #EBE3D6;
  --sand-2:     #D9CDB9;
  --brass:      #C08A3E;
  --brass-lt:   #D9A75C;
  --sea:        #1E7E96;
  --white:      #FFFFFF;
  --muted:      #6B7A82;

  --wa:         #25D366;

  --f-display:  "Instrument Serif", Georgia, "Times New Roman", serif;
  --f-body:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap:       1180px;
  --wrap-tight: 780px;
  --gut:        clamp(1.25rem, 4vw, 3rem);

  --r:          2px;
  --shadow:     0 1px 2px rgba(8,23,31,.04), 0 8px 30px rgba(8,23,31,.08);
  --shadow-lg:  0 2px 4px rgba(8,23,31,.06), 0 24px 60px rgba(8,23,31,.16);

  --ease:       cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:clamp(1rem,.97rem + .15vw,1.0625rem);
  line-height:1.7;
  color:var(--ink);
  background:var(--bone);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; }

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.6rem,1.6rem + 4.4vw,5.25rem); }
h2{ font-size:clamp(2rem,1.4rem + 2.6vw,3.4rem); }
h3{ font-size:clamp(1.35rem,1.15rem + .9vw,1.85rem); }
h4{ font-size:1.15rem; }
p{ margin:0 0 1.15em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }

/* ---------- utilities ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wrap-tight{ max-width:var(--wrap-tight); }
.section{ padding-block:clamp(4rem,3rem + 6vw,8rem); }
.section--tight{ padding-block:clamp(3rem,2.5rem + 3vw,5rem); }
.center{ text-align:center; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--ink); color:var(--bone); padding:.75rem 1.25rem;
}
.skip:focus{ left:.5rem; top:.5rem; }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

.eyebrow{
  font-family:var(--f-body);
  font-size:.72rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass); margin:0 0 1rem;
}
.eyebrow--light{ color:var(--brass-lt); }
.lead{ font-size:clamp(1.1rem,1.02rem + .4vw,1.3rem); line-height:1.6; color:var(--ink-3); }
.muted{ color:var(--muted); }
.rule{ height:1px; background:var(--sand-2); border:0; margin:0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.7rem;
  font-size:.82rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; border:1px solid transparent; border-radius:var(--r);
  cursor:pointer; transition:all .3s var(--ease); text-align:center;
  white-space:nowrap;
}
.btn svg{ width:1.05em; height:1.05em; flex:none; }
.btn--primary{ background:var(--brass); color:var(--white); border-color:var(--brass); }
.btn--primary:hover{ background:#a97731; border-color:#a97731; }
.btn--dark{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.btn--dark:hover{ background:var(--ink-2); border-color:var(--ink-2); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--bone); }
.btn--ghost-light{ background:transparent; color:var(--bone); border-color:rgba(247,244,238,.5); }
.btn--ghost-light:hover{ background:var(--bone); color:var(--ink); border-color:var(--bone); }
.btn--wa{ background:var(--wa); color:#06301A; border-color:var(--wa); }
.btn--wa:hover{ background:#1eb857; border-color:#1eb857; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; }
.btn-row--center{ justify-content:center; }

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(8,23,31,.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(247,244,238,.1);
  transition:background .3s var(--ease);
}
.hdr__bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:72px;
}
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--bone); }
.brand img{ width:40px; height:40px; border-radius:50%; }
.brand__txt{ display:flex; flex-direction:column; line-height:1.05; }
.brand__name{ font-family:var(--f-display); font-size:1.2rem; letter-spacing:.01em; white-space:nowrap; }
.brand__sub{ font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-lt); white-space:nowrap; }

.nav{ display:flex; align-items:center; gap:.15rem; }
.nav a{
  padding:.55rem .7rem; text-decoration:none; color:rgba(247,244,238,.82);
  font-size:.8rem; font-weight:500; letter-spacing:.04em;
  border-radius:var(--r); transition:color .2s var(--ease);
  white-space:nowrap;
}
.nav a:hover{ color:var(--bone); }
.nav a[aria-current="page"]{ color:var(--brass-lt); }
.hdr__cta{ display:flex; align-items:center; gap:.5rem; }
.hdr__cta .btn{ padding:.65rem 1.15rem; font-size:.72rem; }

.burger{
  display:none; background:none; border:0; padding:.5rem; cursor:pointer;
  color:var(--bone); line-height:0;
}
.burger svg{ width:26px; height:26px; }

@media (max-width:1080px){
  .nav{
    position:fixed; inset:72px 0 auto; flex-direction:column; align-items:stretch;
    background:var(--ink); padding:1rem var(--gut) 2rem; gap:0;
    border-bottom:1px solid rgba(247,244,238,.12);
    max-height:calc(100dvh - 72px); overflow-y:auto;
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:all .25s var(--ease);
  }
  .nav[data-open="true"]{ transform:none; opacity:1; visibility:visible; }
  .nav a{ padding:.85rem .25rem; font-size:.95rem; border-bottom:1px solid rgba(247,244,238,.08); }
  .burger{ display:block; }
  .hdr__cta .btn--dark, .hdr__cta .btn--ghost-light{ display:none; }
}

/* ---------- hero ---------- */
.hero{ position:relative; background:var(--ink); color:var(--bone); overflow:hidden; }
.hero__media{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; opacity:.55; }
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,23,31,.72) 0%, rgba(8,23,31,.45) 42%, rgba(8,23,31,.94) 100%);
}
.hero__inner{
  position:relative; z-index:2;
  padding-block:clamp(5rem,4rem + 12vw,10.5rem);
}
.hero h1{ color:var(--bone); margin-bottom:.35em; max-width:16ch; }
.hero__sub{
  font-size:clamp(1rem,.94rem + .32vw,1.2rem);
  color:rgba(247,244,238,.86); max-width:56ch; margin-bottom:2rem;
}
.hero__meta{
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; margin-bottom:2.25rem;
  font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass-lt);
}
.hero__meta span{ display:flex; align-items:center; gap:.5rem; }
.hero__meta span::before{ content:""; width:5px; height:5px; background:var(--brass); border-radius:50%; }

/* page hero (inner pages) */
.phero{ position:relative; background:var(--ink); color:var(--bone); overflow:hidden; }
.phero__media{ position:absolute; inset:0; }
.phero__media img{ width:100%; height:100%; object-fit:cover; opacity:.45; }
.phero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,23,31,.78), rgba(8,23,31,.9));
}
.phero__inner{ position:relative; z-index:2; padding-block:clamp(3.5rem,3rem + 6vw,6.5rem); }
.phero h1{ color:var(--bone); margin-bottom:.3em; }
.phero p{ color:rgba(247,244,238,.85); max-width:62ch; font-size:1.08rem; }

/* breadcrumb */
.crumb{ font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1.1rem; color:rgba(247,244,238,.6); }
.crumb a{ color:rgba(247,244,238,.75); text-decoration:none; }
.crumb a:hover{ color:var(--brass-lt); }
.crumb span{ margin-inline:.5rem; opacity:.5; }

/* ---------- sections / panels ---------- */
.panel--dark{ background:var(--ink); color:var(--bone); }
.panel--dark h2,.panel--dark h3{ color:var(--bone); }
.panel--dark .lead{ color:rgba(247,244,238,.8); }
.panel--sand{ background:var(--sand); }

.sec-head{ max-width:62ch; margin-bottom:clamp(2rem,1.5rem + 2vw,3.25rem); }
.sec-head--center{ margin-inline:auto; text-align:center; }

/* ---------- grids ---------- */
.grid{ display:grid; gap:clamp(1.25rem,1rem + 1.4vw,2.25rem); }
.g-2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.g-3{ grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); }
.g-4{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }

/* split feature */
.split{ display:grid; gap:clamp(2rem,1.5rem + 3vw,4.5rem); align-items:center; }
@media (min-width:900px){
  .split{ grid-template-columns:1fr 1fr; }
  .split--reverse .split__media{ order:2; }
}
.split__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); }

/* ---------- cards ---------- */
.card{
  background:var(--white); border:1px solid var(--sand-2); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
a.card{ text-decoration:none; color:inherit; }
a.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.card__img{ aspect-ratio:4/3; overflow:hidden; background:var(--sand); }
.card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
a.card:hover .card__img img{ transform:scale(1.045); }
.card__body{ padding:1.5rem 1.5rem 1.65rem; flex:1; display:flex; flex-direction:column; }
.card__body h3{ margin-bottom:.4rem; }
.card__body p{ font-size:.94rem; color:var(--muted); line-height:1.62; }
.card__more{
  margin-top:auto; padding-top:1rem;
  font-size:.74rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--brass);
  display:flex; align-items:center; gap:.45rem;
}
a.card:hover .card__more{ gap:.8rem; }
.card__more::after{ content:"→"; transition:transform .3s var(--ease); }

/* stat / feature blocks */
.stat{ border-top:1px solid var(--sand-2); padding-top:1.1rem; }
.stat dt{ font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.35rem; }
.stat dd{ margin:0; font-family:var(--f-display); font-size:1.6rem; line-height:1.2; }
.panel--dark .stat{ border-color:rgba(247,244,238,.18); }
.panel--dark .stat dt{ color:rgba(247,244,238,.6); }

/* tick list */
.ticks{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.ticks li{ position:relative; padding-left:1.9rem; line-height:1.6; }
.ticks li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:11px; height:6px; border-left:2px solid var(--brass); border-bottom:2px solid var(--brass);
  transform:rotate(-45deg);
}
.ticks--light li::before{ border-color:var(--brass-lt); }

/* numbered day list (itinerary) */
.days{ list-style:none; margin:0; padding:0; counter-reset:day; }
.days li{
  counter-increment:day; position:relative;
  padding:1.6rem 0 1.6rem 4.5rem; border-bottom:1px solid var(--sand-2);
}
.days li:first-child{ border-top:1px solid var(--sand-2); }
.days li::before{
  content:counter(day,decimal-leading-zero);
  position:absolute; left:0; top:1.55rem;
  font-family:var(--f-display); font-size:1.5rem; color:var(--brass); line-height:1;
}
.days h4{ font-family:var(--f-body); font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.5rem; }
.days p{ font-size:.96rem; color:var(--ink-3); margin:0; }
.panel--dark .days li{ border-color:rgba(247,244,238,.15); }
.panel--dark .days p{ color:rgba(247,244,238,.78); }

/* spec table */
.specs{ width:100%; border-collapse:collapse; font-size:.95rem; }
.specs th,.specs td{ text-align:left; padding:.85rem 0; border-bottom:1px solid var(--sand-2); vertical-align:top; }
.specs th{ font-weight:500; color:var(--muted); width:42%; font-size:.85rem; }
.specs td{ font-weight:500; }
.panel--dark .specs th,.panel--dark .specs td{ border-color:rgba(247,244,238,.15); }
.panel--dark .specs th{ color:rgba(247,244,238,.6); }

/* price card */
.price{
  background:var(--white); border:1px solid var(--sand-2); border-radius:var(--r);
  padding:clamp(1.75rem,1.4rem + 1.4vw,2.75rem);
}
.price--feature{ border-color:var(--brass); border-width:2px; }
.price__tag{ display:flex; align-items:baseline; gap:.5rem; margin:.35rem 0 1.25rem; }
.price__num{ font-family:var(--f-display); font-size:clamp(2.6rem,2rem + 2.2vw,3.6rem); line-height:1; }
.price__per{ font-size:.85rem; color:var(--muted); }
.price__note{ font-size:.85rem; color:var(--muted); margin-top:1.25rem; }

/* gallery */
.gal{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.6rem; }
.gal button{
  padding:0; border:0; background:var(--sand); cursor:zoom-in; overflow:hidden;
  aspect-ratio:1; border-radius:var(--r); display:block;
}
.gal img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease), opacity .3s; }
.gal button:hover img{ transform:scale(1.06); opacity:.92; }

/* lightbox */
.lb{
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(8,23,31,.96); align-items:center; justify-content:center; padding:1.5rem;
}
.lb[data-open="true"]{ display:flex; }
.lb img{ max-width:100%; max-height:86dvh; object-fit:contain; border-radius:var(--r); }
.lb__close,.lb__nav{
  position:absolute; background:rgba(247,244,238,.1); border:1px solid rgba(247,244,238,.25);
  color:var(--bone); width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; line-height:1;
  transition:background .2s var(--ease);
}
.lb__close:hover,.lb__nav:hover{ background:rgba(247,244,238,.22); }
.lb__close{ top:1.25rem; right:1.25rem; }
.lb__nav--prev{ left:1.25rem; top:50%; transform:translateY(-50%); }
.lb__nav--next{ right:1.25rem; top:50%; transform:translateY(-50%); }
.lb__cap{ position:absolute; bottom:1.25rem; left:50%; transform:translateX(-50%); color:rgba(247,244,238,.75); font-size:.85rem; text-align:center; padding-inline:1rem; }

/* quote / testimonial */
.quote{ border-left:2px solid var(--brass); padding-left:1.5rem; }
.quote p{ font-family:var(--f-display); font-size:clamp(1.15rem,1.05rem + .5vw,1.5rem); line-height:1.4; margin-bottom:.75rem; }
.quote cite{ font-style:normal; font-size:.76rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
.panel--dark .quote cite{ color:rgba(247,244,238,.6); }

/* forms */
.form{ display:grid; gap:1.1rem; }
.field label{
  display:block; font-size:.74rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:.45rem; color:var(--ink-3);
}
.field input,.field select,.field textarea{
  width:100%; padding:.85rem 1rem; font:inherit; font-size:.98rem;
  border:1px solid var(--sand-2); border-radius:var(--r);
  background:var(--white); color:var(--ink); transition:border-color .2s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--brass); outline:none; }
.field textarea{ min-height:120px; resize:vertical; }
.field--row{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.form__note{ font-size:.82rem; color:var(--muted); }

/* steps */
.steps{ list-style:none; margin:0; padding:0; counter-reset:s; display:grid; gap:1.5rem; }
.steps li{ counter-increment:s; position:relative; padding-left:3.25rem; }
.steps li::before{
  content:counter(s); position:absolute; left:0; top:-.1rem;
  width:2.2rem; height:2.2rem; border:1px solid var(--brass); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-size:1.05rem; color:var(--brass);
}
.steps h4{ margin-bottom:.25rem; font-family:var(--f-body); font-size:.98rem; font-weight:700; }
.steps p{ font-size:.92rem; color:var(--muted); margin:0; }
.panel--dark .steps p{ color:rgba(247,244,238,.72); }

/* CTA band */
.cta{ background:var(--ink); color:var(--bone); position:relative; overflow:hidden; }
.cta__media{ position:absolute; inset:0; }
.cta__media img{ width:100%; height:100%; object-fit:cover; opacity:.28; }
.cta::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,23,31,.85),rgba(8,23,31,.92)); }
.cta__inner{ position:relative; z-index:2; padding-block:clamp(3.5rem,3rem + 4vw,6rem); text-align:center; }
.cta h2{ color:var(--bone); max-width:20ch; margin-inline:auto; }
.cta p{ color:rgba(247,244,238,.82); max-width:52ch; margin-inline:auto; margin-bottom:2rem; }

/* ---------- footer ---------- */
.ftr{ background:var(--ink); color:rgba(247,244,238,.72); font-size:.92rem; }
.ftr a{ color:rgba(247,244,238,.72); text-decoration:none; }
.ftr a:hover{ color:var(--brass-lt); }
.ftr__top{ display:grid; gap:2.5rem; padding-block:clamp(3rem,2.5rem + 2vw,4.5rem); }
@media (min-width:820px){ .ftr__top{ grid-template-columns:1.4fr 1fr 1fr 1.2fr; } }
.ftr h4{
  font-family:var(--f-body); font-size:.72rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass-lt); margin-bottom:1.1rem;
}
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.ftr__brand .brand{ margin-bottom:1rem; }
.ftr__brand p{ font-size:.92rem; max-width:34ch; }
.ftr__bottom{
  border-top:1px solid rgba(247,244,238,.12); padding-block:1.5rem;
  display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; justify-content:space-between;
  font-size:.82rem; color:rgba(247,244,238,.5);
}
.ftr__contact li{ display:flex; gap:.6rem; align-items:flex-start; }
.ftr__contact svg{ width:1rem; height:1rem; flex:none; margin-top:.35rem; color:var(--brass); }

/* ---------- floating whatsapp ---------- */
.wa-float{
  position:fixed; right:1rem; bottom:1rem; z-index:90;
  display:flex; align-items:center; gap:.6rem;
  background:var(--wa); color:#06301A; text-decoration:none;
  padding:.85rem 1.25rem; border-radius:100px; font-weight:600; font-size:.88rem;
  box-shadow:0 6px 24px rgba(8,23,31,.28);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wa-float:hover{ transform:translateY(-2px); box-shadow:0 10px 32px rgba(8,23,31,.34); }
.wa-float svg{ width:1.4rem; height:1.4rem; flex:none; }
@media (max-width:560px){
  .wa-float{ right:.85rem; bottom:.85rem; padding:.85rem; }
  .wa-float span{ display:none; }
}

/* On narrow phones the wordmark competes with the CTA for space —
   the logo alone still links home and stays recognisable. */
@media (max-width:520px){
  .brand__txt{ display:none; }
  .hdr__cta .btn{ padding:.65rem .95rem; font-size:.68rem; }
}

/* ---------- reveal on scroll ----------
   Progressive enhancement: content is visible by default. Only once the
   `js` class is set (inline, in <head>) do we hide it ready to animate in,
   so a JS failure can never leave the page blank. */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; }
}

/* ---------- misc ---------- */
.tag{
  display:inline-block; font-size:.68rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brass); border:1px solid var(--sand-2);
  padding:.3rem .6rem; border-radius:var(--r); margin-bottom:.75rem;
}
.panel--dark .tag{ border-color:rgba(247,244,238,.25); color:var(--brass-lt); }
.note{
  background:var(--sand); border-left:2px solid var(--brass);
  padding:1.15rem 1.4rem; font-size:.92rem; border-radius:var(--r);
}
.prose h3{ margin-top:2.25rem; }
.prose h3:first-child{ margin-top:0; }