/* ==========================================================================
   BLACK SOVEREIGN — Private Travel & Stays
   Design system v20260811a

   Layout, rhythm and motion follow the structural language of the Exploreza
   template (studied via computed styles, rebuilt from scratch — no template
   code used). Palette refined to the Black Sovereign brand: ivory, near-black
   and brass in place of white, blush and coral.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Surfaces */
  --paper:      #FBFAF7;
  --white:      #FFFFFF;
  --cream:      #EFE8DE;
  --cream-2:    #E4D9C9;
  --ink:        #121212;
  --ink-2:      #1B1B1B;
  --ink-3:      #242424;

  /* Text */
  --body:       #5B5E61;
  --body-60:    rgba(91,94,97,.62);
  --bone:       #ECE7E4;
  --bone-70:    rgba(236,231,228,.72);
  --bone-45:    rgba(236,231,228,.45);

  /* Accent — brass replaces Exploreza's coral */
  --brass:      #A87A3C;
  --brass-dk:   #8A6230;
  --brass-lt:   #F2E7D6;
  --brass-15:   rgba(168,122,60,.15);

  --line:       #E5E1DA;
  --line-dk:    rgba(236,231,228,.14);

  /* Type */
  --display: "Melodrama", "Cormorant Garamond", Georgia, serif;
  --sans:    "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Motion — lifted from the template's computed transitions */
  --e-out:  cubic-bezier(.22, 1, .36, 1);
  --e-expo: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .35s var(--e-out);
  --t-slow: .5s  var(--e-expo);

  /* Radii ladder */
  --r-2:2px; --r-4:4px; --r-6:6px; --r-8:8px; --r-10:10px; --r-20:20px;
  --r-pill:200px; --r-circle:100%;

  /* Shadows */
  --sh-1:0 5px 25px rgba(0,0,0,.10);
  --sh-2:0 4px 42px rgba(0,0,0,.12);
  --sh-3:0 10px 40px rgba(21,26,69,.10);
  --sh-4:0 40px 60px rgba(0,0,0,.14);
  --sh-dk:0 18px 40px -18px rgba(0,0,0,.65);

  /* Rhythm — the template runs a strict 120px */
  --sec:  clamp(72px, 9vw, 120px);
  --pad:  clamp(20px, 4vw, 60px);
  --maxw: 1320px;
  --nav-h: 96px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html:not(.smooth-on){ scroll-behavior:smooth; }
html.smooth-on{ scroll-behavior:auto; }
html.smooth-on body{ overscroll-behavior-y:none; }

body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;          /* 400 reads far better across real paragraphs */
  line-height:1.72;         /* relative, as in the first build */
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5{ margin:0; font-weight:500; color:var(--ink); }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
::selection{ background:var(--brass); color:#fff; }

/* ---------- 3. Type ----------
   Display  : Melodrama. Hero word 300, section headings 400 at 1.06
              line-height (0.9 collides once a heading wraps to two lines).
              Display layer only, since its thin strokes fall apart below
              roughly 20px.
   Body/UI  : Schibsted Grotesk 400 @ 16/1.72, near-zero tracking.
              Headings 500 with slight negative tracking, which is what
              makes them read as set rather than default.
------------------------------------------------------------------ */
/* Single word, so it never wraps and can run tight. */
.disp{
  font-family:var(--display); font-weight:300;
  font-size:clamp(56px, 10.4vw, 150px);
  line-height:.95; letter-spacing:.05em;
  text-transform:uppercase; color:#E5E5E5;
}
/* Section headings. Sized against the template's own H2 rather than its
   offer-card titles, which is where the earlier 120px came from. */
.feat{
  font-family:var(--display); font-weight:400;
  font-size:clamp(31px, 4.7vw, 56px);
  line-height:1.06;              /* .9 only works on a single line */
  letter-spacing:.012em; color:var(--ink);
}
.feat--light{ color:#fff; }

/* Measured: H1 36/42 mobile against 60/70 desktop, H2 28/33 against 36/42 */
.h1{ font-family:var(--sans); font-weight:500; font-size:clamp(34px,4.4vw,58px); line-height:1.12; letter-spacing:-.018em; }
.h2{ font-family:var(--sans); font-weight:500; font-size:clamp(27px,3.3vw,36px); line-height:1.16; letter-spacing:-.016em; }
.h3{ font-family:var(--sans); font-weight:500; font-size:clamp(22px,2.3vw,29px);  line-height:1.22; letter-spacing:-.012em; }
.h4{ font-family:var(--sans); font-weight:500; font-size:23px; line-height:1.25; letter-spacing:-.01em; }
.h5{ font-family:var(--sans); font-weight:500; font-size:19px; line-height:1.32; letter-spacing:-.008em; }
.h6{ font-family:var(--sans); font-weight:500; font-size:16px; line-height:1.4; letter-spacing:-.005em; }

.serif{ font-family:var(--display); font-weight:300; letter-spacing:.02em; }
.serif-i{ font-family:var(--display); font-style:italic; font-weight:400; color:var(--brass); }

/* Section kicker. No rule, no uppercase micro-label, just a short line
   in the accent colour at the template's own 16/29. */
.kicker{
  display:block; font-family:var(--sans); font-weight:500;
  font-size:.95rem; line-height:1.7; letter-spacing:.01em;
  color:var(--brass); margin:0 0 .9rem;
}
.kicker.c{ text-align:center; }

.lead{ font-size:clamp(1.02rem,1.2vw,1.12rem); line-height:1.8; letter-spacing:.005em; color:var(--body); max-width:56ch; }
.small{ font-size:.9rem; line-height:1.75; letter-spacing:.005em; color:var(--body-60); }
.micro{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--body-60); font-weight:500; }
.on-dark{ color:var(--bone-70); }
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{ color:var(--bone); }

/* ---------- 4. Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.sec{ padding-block:var(--sec); position:relative; }
.sec--half{ padding-block:calc(var(--sec) * .55); }
.sec--top0{ padding-top:0; }

/* Cream band with the template's heavy corner rounding */
.band{
  background:var(--cream); border-radius:var(--r-20);
  margin-inline:var(--pad); padding-block:var(--sec);
  position:relative; overflow:hidden;
}
.band--dark{ background:var(--ink); color:var(--bone-70); }
.band > .wrap{ max-width:calc(var(--maxw) - var(--pad)*2); }

.grid{ display:grid; gap:clamp(20px,2.4vw,34px); }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }

.sec-head{ margin-bottom:clamp(2.4rem,4.5vw,4rem); }
.sec-head.c{ text-align:center; max-width:44rem; margin-inline:auto; }
.sec-head.split{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:2rem; flex-wrap:wrap; text-align:left;
}
.sec-head__t{ max-width:20ch; }
.sec-head.c .sec-head__t{ max-width:none; }

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
  padding:1.05rem 2.1rem; border-radius:var(--r-4);
  background:var(--brass); color:#fff;
  font-size:.76rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--brass);
  transition:background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-slow);
}
.btn:hover{ background:var(--brass-dk); border-color:var(--brass-dk); transform:translateY(-2px); box-shadow:var(--sh-1); }
.btn__a{ transition:transform var(--t-fast); }
.btn:hover .btn__a{ transform:translateX(4px); }

.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }

.btn--light{ background:var(--white); color:var(--ink); border-color:var(--white); }
.btn--light:hover{ background:var(--brass); border-color:var(--brass); color:#fff; }

.btn--outline-l{ background:transparent; color:var(--bone); border-color:rgba(236,231,228,.35); }
.btn--outline-l:hover{ background:var(--bone); border-color:var(--bone); color:var(--ink); }

/* Small labels run in Melodrama too, so the display face carries all the way
   down rather than leaving these reading as generic sans. Melodrama sits small
   for its point size, hence the bump up and the lighter tracking. */
.tlink{
  display:inline-flex; align-items:center; gap:.55rem; position:relative;
  font-size:.74rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); padding-bottom:.4rem;
}
.tlink::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--brass); transform:scaleX(0); transform-origin:right;
  transition:transform var(--t-slow);
}
.tlink:hover{ color:var(--brass); }
.tlink:hover::after{ transform:scaleX(1); transform-origin:left; }
.tlink svg{ transition:transform var(--t-fast); }
.tlink:hover svg{ transform:translateX(4px); }
.on-dark .tlink{ color:var(--bone); }

/* ---------- 6. Image slots ---------- */
.img{ position:relative; overflow:hidden; background:var(--cream-2); border-radius:var(--r-10); }
.img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--e-expo); }
.img--circle{ border-radius:var(--r-circle); }
.img--pill{ border-radius:var(--r-pill); }
.r4-5{ aspect-ratio:4/5; } .r3-4{ aspect-ratio:3/4; } .r1-1{ aspect-ratio:1/1; }
.r16-9{ aspect-ratio:16/9; } .r3-2{ aspect-ratio:3/2; } .r5-4{ aspect-ratio:5/4; }

/* ---------- 7. Nav bar ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; height:var(--nav-h); z-index:99;
  background:var(--ink); display:flex; align-items:center;
}
.nav__in{
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.6rem);
}
.brand{ display:flex; flex-direction:column; line-height:1; flex:none; margin-right:auto; }
.brand__n{
  font-family:var(--display); font-weight:400; font-size:1.42rem;
  letter-spacing:.2em; text-transform:uppercase; color:#fff;
}
.brand__s{
  font-size:.5rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--brass); margin-top:.45rem; font-weight:500;
}
.nav__meta{ display:flex; align-items:center; gap:1.4rem; }
.nav__meta a{ font-size:.86rem; font-weight:500; color:#fff; transition:color var(--t-fast); }
.nav__meta a:hover{ color:var(--brass); }
.nav__div{ width:1px; height:20px; background:rgba(255,255,255,.22); }
.nav__cta{
  flex:none; padding:.82rem 1.5rem; border-radius:var(--r-4);
  background:var(--brass); color:#fff; font-size:.68rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  transition:background var(--t-fast);
}
.nav__cta:hover{ background:var(--brass-dk); }

.burger{ width:34px; height:14px; position:relative; flex:none; }
.burger span{
  position:absolute; left:0; height:1.5px; width:100%; background:#fff; border-radius:2px;
  transition:transform var(--t-fast), opacity .2s, width var(--t-fast);
}
.burger span:nth-child(1){ top:0; }
.burger span:nth-child(2){ top:50%; width:70%; }
.burger span:nth-child(3){ top:100%; }
.burger:hover span:nth-child(2){ width:100%; }
.burger.open span:nth-child(1){ top:50%; transform:rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ top:50%; transform:rotate(-45deg); }

/* ---------- 8. Full-screen numbered overlay menu ---------- */
.menu{
  position:fixed; inset:0; z-index:98; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:var(--nav-h) var(--pad) 3rem;
  opacity:0; visibility:hidden;
  transition:opacity .4s, visibility .4s;
}
.menu.open{ opacity:1; visibility:visible; }
.menu__list{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  gap:.4rem clamp(1rem,2.4vw,2.2rem); max-width:64rem;
}
.menu__item{ display:inline-flex; align-items:baseline; gap:.45rem; }
.menu__n{
  font-size:.78rem; font-weight:500; color:var(--brass);
  align-self:flex-start; margin-top:.55rem;
}
.menu__link{
  font-family:var(--sans); font-weight:500; color:#fff;
  font-size:clamp(2rem,5.2vw,4.2rem); line-height:1.18; letter-spacing:-.02em;
  transition:color var(--t-fast);
}
.menu__link:hover{ color:var(--brass); }
.menu__slash{
  font-size:clamp(1.6rem,3.6vw,3rem); color:rgba(255,255,255,.24);
  font-weight:300; transform:skewX(-12deg); display:inline-block;
}
.menu__foot{
  display:flex; gap:2rem; flex-wrap:wrap; justify-content:center;
  margin-top:clamp(2.5rem,5vw,4.5rem);
}
.menu__foot a{ font-size:.8rem; color:rgba(255,255,255,.5); transition:color var(--t-fast); }
.menu__foot a:hover{ color:var(--brass); }
.menu.open .menu__item, .menu.open .menu__slash{
  animation:menuIn .7s var(--e-expo) both;
}
@keyframes menuIn{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

/* ---------- 9. Hero ---------- */
.hero{ position:relative; height:100svh; min-height:620px; overflow:hidden; background:var(--ink); }
.hero__slides{ position:absolute; inset:0; }
.hero__slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.4s var(--e-out); }
.hero__slide.on{ opacity:1; }
.hero__slide img{ width:100%; height:100%; object-fit:cover; }
.hero__slide.on img{ animation:kb 10s ease-out forwards; }
@keyframes kb{ from{ transform:scale(1.02); } to{ transform:scale(1.11); } }

/* the template's soft dark circular vignette behind the wordmark */
.hero__orb{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(88vw,1020px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(18,18,18,.55) 0%, rgba(18,18,18,.32) 55%, rgba(18,18,18,0) 72%);
  z-index:2; pointer-events:none;
}
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(18,18,18,.62) 0%, rgba(18,18,18,.18) 34%, rgba(18,18,18,.30) 68%, rgba(18,18,18,.72) 100%);
}
.hero__body{
  position:relative; z-index:3; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:var(--nav-h) var(--pad) 5rem;
}
.hero__pane{ display:none; width:100%; }
.hero__pane.on{ display:block; }
.hero__kicker{
  font-size:.72rem; font-weight:500; letter-spacing:.3em; text-transform:uppercase;
  color:var(--brass); margin-bottom:1.6rem;
}
.hero__word{ margin-bottom:1.4rem; }
/* Measured: 36/42 mobile against 60/70 desktop */
.hero__sub{
  font-family:var(--sans); font-weight:500; color:#fff;
  font-size:clamp(36px,4.6vw,60px); line-height:1.166; letter-spacing:.5px;
  margin-bottom:1.1rem;
}
/* Measured: 13/23 mobile against 15/27 desktop, on #E5E5E5 */
.hero__note{
  color:#E5E5E5; font-size:clamp(13px,1.1vw,15px); line-height:1.77;
  letter-spacing:.5px; max-width:40rem; margin:0 auto 2.4rem;
}
.hero__acts{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }
.hero__pane.on .hero__kicker,.hero__pane.on .hero__word,.hero__pane.on .hero__sub,
.hero__pane.on .hero__note,.hero__pane.on .hero__acts{ animation:hUp .95s var(--e-expo) both; }
.hero__pane.on .hero__word{ animation-delay:.07s; }
.hero__pane.on .hero__sub{ animation-delay:.14s; }
.hero__pane.on .hero__note{ animation-delay:.2s; }
.hero__pane.on .hero__acts{ animation-delay:.27s; }
@keyframes hUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }

.hero__dots{
  position:absolute; left:50%; bottom:2.2rem; transform:translateX(-50%);
  z-index:4; display:flex; gap:.75rem;
}
.hero__dot{
  width:34px; height:2px; background:rgba(255,255,255,.3); border-radius:2px;
  transition:background var(--t-fast);
}
.hero__dot.on{ background:var(--brass); }

/* ---------- 10. Circular composition + world map hatch ---------- */
.orbit{ position:relative; padding-block:1rem; }
.orbit__map{
  position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:radial-gradient(var(--cream-2) 1.4px, transparent 1.5px);
  background-size:11px 11px;
  -webkit-mask-image:radial-gradient(ellipse 78% 68% at 50% 45%, #000 30%, transparent 74%);
          mask-image:radial-gradient(ellipse 78% 68% at 50% 45%, #000 30%, transparent 74%);
}
.orbit__big{
  position:relative; z-index:1; width:78%; margin-left:auto;
  aspect-ratio:1; border-radius:50%; overflow:hidden; box-shadow:var(--sh-3);
}
.orbit__sm{
  position:absolute; z-index:2; left:0; bottom:14%;
  width:44%; aspect-ratio:1; border-radius:50%; overflow:hidden;
  border:8px solid var(--paper); box-shadow:var(--sh-2);
}
.orbit img{ width:100%; height:100%; object-fit:cover; }

/* ---------- 10b. Icons (original line set) ---------- */
.ico{
  width:34px; height:34px; display:block; flex:none; margin-bottom:0;
  stroke:var(--brass); stroke-width:1.1; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  overflow:visible;
}
.ico *{ vector-effect:non-scaling-stroke; }
/* the stroke draws itself in when the card is revealed */
.ico [data-draw]{
  stroke-dasharray:var(--len,180); stroke-dashoffset:var(--len,180);
  transition:stroke-dashoffset 1.4s var(--e-expo);
}
[data-rv].shown .ico [data-draw]{ stroke-dashoffset:0; }
.commit:hover .ico, .srow:hover .ico{ stroke:var(--brass-dk); }
.ico--lg{ width:42px; height:42px; }

/* ---------- 11. Pillars / commitments ---------- */
.pillar{ padding-top:1.5rem; border-top:1px solid var(--line); }
.pillar__head{ display:flex; align-items:center; gap:.8rem; margin-bottom:.55rem; }
.pillar__head .h5{ margin:0; }
.pillar__n{
  font-family:var(--display); font-weight:300; font-size:2.3rem; line-height:1;
  color:var(--brass); display:block; margin-bottom:1rem;
}
.pillar__t{ margin-bottom:.55rem; }
.pillar__d{ font-size:.92rem; line-height:1.75; color:var(--body-60); }

.commit{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-10);
  padding:clamp(1.2rem,1.7vw,1.5rem) clamp(1.2rem,1.7vw,1.6rem);
  transition:transform var(--t-fast), box-shadow var(--t-slow), border-color var(--t-fast);
}
.commit:hover{ transform:translateY(-4px); box-shadow:var(--sh-3); border-color:var(--brass-15); }
.commit .h5{ font-size:1.06rem; line-height:1.28; }
.commit__v{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:0; height:32px; padding-inline:.8rem; margin-bottom:.85rem;
  background:var(--brass-lt); color:var(--brass-dk); border-radius:var(--r-pill);
  font-family:var(--display); font-weight:500; font-size:1.02rem; letter-spacing:.03em;
}
.commit__t{ margin-bottom:.45rem; }
.commit__head{ display:flex; align-items:center; gap:.7rem; margin-bottom:.5rem; }
.commit__head .h5{ margin:0; }
.commit__d{ font-size:.88rem; line-height:1.6; color:var(--body-60); }

/* ---------- 12. Journey cards ---------- */
.jcard{
  display:block; background:var(--ink); border-radius:var(--r-10); overflow:hidden;
  transition:transform var(--t-fast), box-shadow var(--t-slow);
}
.jcard:hover{ transform:translateY(-6px); box-shadow:var(--sh-dk); }
.jcard__media{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.jcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--e-expo); }
.jcard:hover .jcard__media img{ transform:scale(1.07); }
.jcard__veil{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(18,18,18,.94) 4%, rgba(18,18,18,.30) 46%, rgba(18,18,18,.05) 100%);
}
.jcard__tag{
  position:absolute; top:1rem; left:1rem; z-index:2;
  padding:.35rem .85rem; border-radius:var(--r-pill);
  background:rgba(18,18,18,.6); backdrop-filter:blur(8px);
  border:1px solid rgba(236,231,228,.24);
  font-size:.63rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:#fff;
}
.jcard__over{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.4rem; }
.jcard__places{
  font-size:.63rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass); margin-bottom:.5rem;
}
.jcard__title{ color:#fff; }
.jcard__body{ padding:1.3rem 1.4rem 1.5rem; }
.jcard__desc{ font-size:.88rem; line-height:1.7; color:var(--bone-45); margin-bottom:1.2rem; }
.jcard__foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-top:1.1rem; border-top:1px solid var(--line-dk);
}
.jcard__from{ font-size:.72rem; color:var(--bone-45); }
.jcard__from b{ display:block; font-family:var(--display); font-weight:400; font-size:1.22rem; color:var(--brass); letter-spacing:.01em; }
.jcard__go{ font-size:.66rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-70); }

/* ---------- 13. Marquee (rounded pill, like the template's partner strip) ---------- */
.marq{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-20);
  padding-block:2rem; overflow:hidden; box-shadow:var(--sh-1);
}
.marq__track{ display:flex; width:max-content; animation:mv 48s linear infinite; }
.marq:hover .marq__track{ animation-play-state:paused; }
@keyframes mv{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marq__i{
  display:flex; align-items:center; gap:clamp(1.4rem,3vw,2.6rem);
  padding-inline:clamp(.8rem,1.6vw,1.4rem);
  font-family:var(--display); font-weight:300; font-size:clamp(1.2rem,2vw,1.75rem);
  color:var(--body-60); white-space:nowrap;
}
.marq__i::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--brass); opacity:.5; }
.marq__cap{ text-align:center; margin-top:1.4rem; }

/* ---------- 14. Region / destination tabs ---------- */
.tabs{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:2.8rem; }
.tab{
  padding:.72rem 1.4rem; border-radius:var(--r-pill); border:1px solid var(--line);
  background:var(--white); color:var(--body);
  font-size:.72rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.tab:hover{ border-color:var(--brass); color:var(--brass); }
.tab.on{ background:var(--brass); border-color:var(--brass); color:#fff; }
.panel{ display:none; }
.panel.on{ display:block; animation:fIn .55s var(--e-expo) both; }
@keyframes fIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.dlist{ display:flex; flex-wrap:wrap; gap:.45rem 1.5rem; justify-content:center; }
.dlist li{
  font-family:var(--display); font-weight:300; font-size:clamp(1.2rem,2.1vw,1.75rem);
  color:var(--body); transition:color var(--t-fast); cursor:default;
}
.dlist li:hover{ color:var(--brass); }

/* ---------- 15. Service rows ---------- */
.srow{
  display:grid; grid-template-columns:.5fr 1fr 1.15fr; gap:2rem; align-items:start;
  padding:2.3rem 0; border-top:1px solid var(--line);
}
.srow:last-child{ border-bottom:1px solid var(--line); }
.srow__k{
  display:flex; align-items:center; gap:.7rem;
  font-size:.72rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass); padding-top:.15rem;
}
.srow__k .ico{ width:26px; height:26px; }
.srow__d{ font-size:.94rem; line-height:1.78; color:var(--body-60); }

/* ---------- 16. Form ---------- */
.form{ max-width:640px; }
.fbar{ display:flex; gap:.4rem; margin-bottom:2.4rem; }
.fbar span{ height:3px; flex:1; background:var(--line); border-radius:2px; position:relative; overflow:hidden; }
.fbar span::after{
  content:""; position:absolute; inset:0; background:var(--brass);
  transform:scaleX(0); transform-origin:left; transition:transform var(--t-slow);
}
.fbar span.done::after{ transform:scaleX(1); }
.fp{ display:none; }
.fp.on{ display:block; animation:fIn .45s var(--e-expo) both; }
.fp__q{ font-family:var(--sans); font-weight:500; font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.22; letter-spacing:-.018em; color:var(--ink); margin-bottom:.6rem; }
.fp__h{ font-size:.92rem; color:var(--body-60); margin-bottom:2rem; }

.field{ margin-bottom:1.4rem; }
.field label{ display:block; font-size:.7rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--body-60); margin-bottom:.6rem; }
.field input,.field select,.field textarea{
  width:100%; background:var(--white); border:1px solid var(--line); border-radius:var(--r-6);
  padding:.95rem 1rem; color:var(--ink); font-family:var(--sans); font-size:.98rem; font-weight:400;
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
  -webkit-appearance:none; appearance:none;
}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--brass) 50%),linear-gradient(135deg,var(--brass) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:2.4rem;
}
.field textarea{ resize:vertical; min-height:104px; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--brass); box-shadow:0 0 0 3px var(--brass-15);
}
.field input::placeholder,.field textarea::placeholder{ color:#B9B5AE; }

.choices{ display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:.6rem; }
.choice{
  border:1px solid var(--line); border-radius:var(--r-6); background:var(--white);
  padding:1rem 1.1rem; text-align:left;
  transition:border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.choice:hover{ border-color:var(--brass); transform:translateY(-2px); }
.choice.sel{ border-color:var(--brass); background:var(--brass-lt); }
.choice b{ display:block; font-weight:500; font-size:1rem; color:var(--ink); margin-bottom:.15rem; }
.choice span{ font-size:.76rem; color:var(--body-60); }

.fnav{ display:flex; gap:1rem; align-items:center; margin-top:2.2rem; flex-wrap:wrap; }
.fback{ font-size:.72rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--body-60); }
.fback:hover{ color:var(--ink); }
.fnote{ margin-top:1.8rem; padding-top:1.5rem; border-top:1px solid var(--line); font-size:.8rem; line-height:1.75; color:var(--body-60); }
.fnote a,.prose a{ color:var(--brass); border-bottom:1px solid rgba(168,122,60,.35); }

/* ---------- 17. WhatsApp float ---------- */
.wa{
  position:fixed; right:clamp(14px,2vw,26px); bottom:clamp(14px,2vw,26px); z-index:90;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.9rem 1.25rem; border-radius:var(--r-pill);
  background:var(--ink); color:#fff; box-shadow:var(--sh-4);
  font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  transition:background var(--t-fast), transform var(--t-fast);
}
.wa:hover{ background:var(--brass); transform:translateY(-2px); }

/* ---------- 18. Footer ---------- */
.foot{ background:var(--ink); color:var(--bone-45); padding-top:calc(var(--sec) * .58); overflow:hidden; }
.foot__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:1.8rem 2.4rem; padding-bottom:2.2rem; }
.foot__h{ font-size:.68rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); margin-bottom:.9rem; }
.foot__l li{ margin-bottom:.45rem; }
.foot__l a{ font-size:.86rem; color:var(--bone-45); transition:color var(--t-fast); }
.foot__l a:hover{ color:var(--bone); }
.socials{ display:flex; gap:.55rem; margin-top:.9rem; }
.social{
  width:34px; height:34px; border-radius:50%; background:var(--brass);
  display:inline-flex; align-items:center; justify-content:center; color:#fff;
  transition:background var(--t-fast), transform var(--t-fast);
}
.social:hover{ background:var(--brass-dk); transform:translateY(-3px); }
.gst{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.72rem; color:var(--bone-45);
  border:1px solid var(--line-dk); border-radius:var(--r-4); padding:.42rem .8rem;
}
.gst b{ color:var(--bone); font-weight:500; }
.gst::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--brass); flex:none; }

/* Giant gradient wordmark, the footer signature.
   Drawn as SVG text with textLength so the full name always spans the
   container exactly and can never clip, whatever the font metrics do. */
.foot__mark{
  display:block; width:100%; height:auto;
  margin-top:.4rem; user-select:none; overflow:visible;
}
.foot__mark text{
  font-family:var(--display); font-weight:400;
  text-transform:uppercase; fill:url(#fmGrad);
}
/* light sweeps across the letterforms once it scrolls into view */
.foot__mark .sheen{
  fill:url(#fmSheen); opacity:0;
  transform:translateX(-38%);
}
.foot__mark.lit .sheen{ animation:markSheen 2.6s var(--e-expo) .25s both; }
@keyframes markSheen{
  0%{ opacity:0; transform:translateX(-38%); }
  18%{ opacity:.85; }
  82%{ opacity:.85; }
  100%{ opacity:0; transform:translateX(38%); }
}
.foot__mark.lit text{ animation:markRise 1.5s var(--e-expo) both; }
@keyframes markRise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}
.foot__bar{
  border-top:1px solid var(--line-dk); padding-block:1.1rem;
  display:flex; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; align-items:center;
}
.foot__legal{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.foot__legal a{ font-size:.73rem; color:var(--bone-45); transition:color var(--t-fast); }
.foot__legal a:hover{ color:var(--brass); }

/* ---------- 19. Prose / legal / article ---------- */
.prose{ max-width:70ch; }
.prose h2{ font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:500; letter-spacing:-.016em; margin:2.8rem 0 1rem; }
.prose h3{ font-size:1.16rem; font-weight:500; color:var(--brass); margin:2rem 0 .7rem; }
.prose p{ line-height:1.88; margin-bottom:1.25em; }
.prose ul{ margin:0 0 1.4rem; }
.prose ul li{ line-height:1.82; padding-left:1.35rem; position:relative; margin-bottom:.6rem; }
.prose ul li::before{ content:""; position:absolute; left:0; top:.82em; width:7px; height:1px; background:var(--brass); }
.prose strong{ color:var(--ink); font-weight:500; }

.pagehead{ padding-top:calc(var(--nav-h) + clamp(3rem,6vw,5.5rem)); padding-bottom:clamp(2rem,4vw,3.4rem); }
.pagehead__t{ margin:.6rem 0 1.3rem; max-width:20ch; }

/* ---------- 20. Reveal ---------- */
[data-rv]{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--e-expo), transform 1s var(--e-expo); }
[data-rv].shown{ opacity:1; transform:none; }
[data-rv="fade"]{ transform:none; }
[data-rv="scale"]{ transform:scale(.96); }
[data-rv="left"]{ transform:translateX(-26px); }

/* ---------- 21. Responsive ---------- */
@media (max-width:1080px){
  .foot__top{ grid-template-columns:1fr 1fr; }
  .srow{ grid-template-columns:1fr; gap:.8rem; }
  .srow__k{ padding-top:0; }
  .nav__meta{ display:none; }
}
@media (max-width:900px){
  .g4{ grid-template-columns:repeat(2,1fr); }
  .g3{ grid-template-columns:1fr; }
  .nav__cta{ display:none; }
  .orbit__big{ width:86%; }
}
@media (max-width:680px){
  :root{ --nav-h:74px; }
  .g2,.g4{ grid-template-columns:1fr; }
  .foot__top{ grid-template-columns:1fr; gap:2rem; }
  .band{ margin-inline:12px; border-radius:var(--r-10); }
  .sec-head.split{ align-items:flex-start; }
  .brand__n{ font-size:1.14rem; letter-spacing:.16em; }
  .wa span{ display:none; }
  .wa{ padding:1rem; }
  .menu__list{ flex-direction:column; align-items:center; gap:.1rem; }
  .menu__slash{ display:none; }
  .hero{ min-height:560px; }
  .disp{ letter-spacing:.03em; }
  /* clear the fixed bar properly so a wrapping kicker can never sit under it */
  .hero__body{ padding-top:calc(var(--nav-h) + 2.25rem); padding-bottom:5.5rem; }
  .hero__kicker,.hero__pane .kicker{ margin-bottom:1rem; }
  .pagehead{ padding-top:calc(var(--nav-h) + 2.5rem); }
}

/* ---------- 22. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  [data-rv]{ opacity:1 !important; transform:none !important; }
}