/* ============================================================
   VISIONAIR — Luxury Lifestyle Services, Côte d'Azur
   Couture system: Cormorant Garamond (display) · Jost (text)
   Brand teal #09A1A1 · deep navy · cream · gold. Very spacious.
   ============================================================ */

:root{
  --ink:#030F2B;          /* deep navy — primary text / dark sections */
  --ink-soft:#41576A;
  --ink-mute:#7C8C9A;
  --sand:#E7DBC2;
  --sand-soft:#F6F1E7;
  --cream:#FBFAF6;
  --white:#FFFFFF;
  --gold:#C2A878;
  --gold-deep:#A98C5B;
  --line:#E9E3D6;
  --line-soft:#EFEAE0;
  --line-dark:rgba(255,255,255,0.13);

  --accent:#09A1A1;       /* Visionair brand teal — overridden by Tweaks */

  --font-display:"Cormorant Garamond", Georgia, serif;
  --font-body:"Jost", system-ui, -apple-system, sans-serif;

  --maxw:1320px;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --shadow-1:0 1px 2px rgba(12,39,56,0.04);
  --shadow-2:0 30px 70px -40px rgba(12,39,56,0.32);
  --shadow-3:0 44px 90px -42px rgba(12,39,56,0.42);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--white); color:var(--ink-soft);
  font-family:var(--font-body); font-weight:300;
  font-size:17px; line-height:1.78; -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:#fff; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 64px; }

.eyebrow{
  font-family:var(--font-body); font-size:12px; font-weight:500;
  letter-spacing:0.36em; text-transform:uppercase; color:var(--accent); margin:0;
}
.eyebrow.on-dark{ color:var(--gold); }

h1,h2,h3{
  font-family:var(--font-display); font-weight:400; letter-spacing:0;
  line-height:1.08; margin:0; color:var(--ink);
}
.lead{
  font-family:var(--font-body); font-weight:300;
  font-size:21px; line-height:1.7; color:var(--ink-soft);
}

/* ---- buttons (couture: rectangular, tracked uppercase) ---- */
.btn{
  display:inline-flex; align-items:center; gap:12px; cursor:pointer;
  font-family:var(--font-body); font-weight:500; font-size:12px; letter-spacing:0.22em;
  text-transform:uppercase; padding:19px 40px; border-radius:0; border:1px solid transparent; white-space:nowrap;
  transition:background var(--ease) .4s, color var(--ease) .4s, border-color var(--ease) .4s, opacity .2s;
}
.btn-primary{ background:var(--ink); color:#fff; }
.btn-primary:hover{ background:var(--accent); }
.btn-gold{ background:var(--gold); color:var(--ink); }
.btn-gold:hover{ background:var(--gold-deep); color:#fff; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:#fff; }
.btn-ghost-light{ background:#fff; color:var(--ink); border-color:#fff; }
.btn-ghost-light:hover{ background:var(--gold); color:#fff; border-color:var(--gold); }
.btn:active{ opacity:.9; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:40;
  transition:background var(--ease) .4s, box-shadow var(--ease) .4s, border-color var(--ease) .4s;
  border-bottom:1px solid transparent;
}
.site-header .wrap{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px;
  padding-top:30px; padding-bottom:30px; transition:padding var(--ease) .4s;
}
.brand{ position:relative; display:inline-block; line-height:0; justify-self:center; }
.brand img{ height:72px; width:auto; max-width:none; display:block; transition:opacity var(--ease) .4s, height var(--ease) .4s; }
.brand .logo-dark{ position:absolute; top:0; left:0; opacity:0; }
.site-header.scrolled .wrap{ padding-top:18px; padding-bottom:18px; }
.site-header.scrolled .brand img{ height:54px; }
.site-header.scrolled .brand .logo-light{ opacity:0; }
.site-header.scrolled .brand .logo-dark{ opacity:1; }

/* burger */
.nav-toggle{
  justify-self:start; appearance:none; background:transparent; border:none; cursor:pointer;
  width:42px; height:42px; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:0;
}
.nav-toggle span{ display:block; width:28px; height:1.6px; background:#fff; transition:background var(--ease) .4s; }
.site-header.scrolled .nav-toggle span{ background:var(--ink); }

/* slide-in drawer */
.nav-overlay{
  position:fixed; inset:0; z-index:60; background:rgba(6,24,36,0.42);
  opacity:0; pointer-events:none; transition:opacity var(--ease) .4s;
}
.nav-overlay.open{ opacity:1; pointer-events:auto; }
.nav-drawer{
  position:fixed; top:0; left:0; bottom:0; z-index:70; width:min(420px,90vw);
  background:var(--ink); color:#fff; padding:84px 56px 56px;
  display:flex; flex-direction:column; gap:6px;
  transform:translateX(-100%); transition:transform .5s var(--ease);
  box-shadow:var(--shadow-3);
}
.nav-drawer.open{ transform:none; }
.nav-drawer-k{
  font-family:var(--font-body); font-size:11px; font-weight:500; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--gold); margin-bottom:22px;
}
.nav-drawer a{
  font-family:var(--font-body); font-size:18px; font-weight:400; letter-spacing:0.02em; white-space:nowrap; color:rgba(255,255,255,0.9);
  padding:9px 0; line-height:1.2; transition:color var(--ease) .3s, padding-left var(--ease) .3s;
}
.nav-drawer a:hover{ color:#fff; padding-left:10px; }
.nav-close{
  position:absolute; top:34px; right:34px; appearance:none; background:transparent; border:none;
  cursor:pointer; width:42px; height:42px; display:flex; align-items:center; justify-content:center;
}
.nav-close svg{ width:24px; height:24px; stroke:rgba(255,255,255,0.8); }
.nav-close:hover svg{ stroke:#fff; }
.site-nav{ display:flex; gap:44px; }
.site-nav a{
  font-family:var(--font-body); font-size:12px; font-weight:400; letter-spacing:0.18em;
  text-transform:uppercase; color:rgba(255,255,255,0.82);
  padding-bottom:4px; border-bottom:1px solid transparent;
  transition:color var(--ease) .3s, border-color var(--ease) .3s;
}
.site-nav a:hover{ color:#fff; border-color:var(--gold); }
.header-cta{ display:flex; align-items:center; justify-content:flex-end; gap:26px; }
.header-phone{ font-family:var(--font-body); font-size:13px; font-weight:400; letter-spacing:0.1em; color:#fff; white-space:nowrap; transition:color var(--ease) .4s; display:inline-flex; align-items:center; gap:8px; }
.header-phone svg{ width:15px; height:15px; stroke:currentColor; fill:none; }
.header-cta .btn{ padding:13px 26px; font-size:11px; }

.site-header.scrolled{ background:rgba(251,250,246,0.9); backdrop-filter:saturate(140%) blur(18px); border-color:var(--line); box-shadow:var(--shadow-1); }
.site-header.scrolled .header-phone{ color:var(--ink); }
.site-header.scrolled .btn-ghost-light{ background:var(--ink); color:#fff; border-color:var(--ink); }
.site-header.scrolled .btn-ghost-light:hover{ background:var(--gold); border-color:var(--gold); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:100vh; display:flex; align-items:flex-end; overflow:hidden; }
.hero-media{ position:fixed; inset:0; z-index:0; background:var(--ink) url('assets/m/hero-poster.jpg') center/cover no-repeat; }
.hero-media image-slot,
.hero-media .hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0;
}
.hero-video{ z-index:1; }
.hero-scrim{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(6,24,36,0.40) 0%, rgba(6,24,36,0.10) 30%, rgba(6,24,36,0.08) 52%, rgba(6,24,36,0.74) 100%);
}
.hero-inner{ position:relative; z-index:3; width:100%; padding-bottom:118px; padding-top:180px; text-align:center; }
.hero-inner .eyebrow{ color:var(--gold); }
.hero h1{
  color:#fff; font-weight:400; font-size:clamp(54px,7.4vw,116px); line-height:1.02;
  margin:0 auto; max-width:18ch; text-wrap:balance;
}
.hero .lead{ color:rgba(255,255,255,0.9); max-width:56ch; margin:34px auto 0; font-size:22px; }
.hero-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-top:50px; }

/* hero "ask" composer — sends the client's wish straight to WhatsApp */
.hero-ask{
  display:flex; align-items:center; gap:10px;
  width:min(660px,92%); margin:46px auto 0;
  background:rgba(255,255,255,0.96); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.6);
  border-radius:999px; padding:10px 10px 10px 26px;
  box-shadow:0 18px 50px rgba(6,24,36,0.32), 0 2px 8px rgba(6,24,36,0.18);
}
.hero-ask input{
  flex:1; min-width:0; appearance:none; border:none; background:transparent;
  font-family:var(--font-body); font-weight:300; font-size:17px; color:var(--ink);
  padding:12px 0; outline:none;
}
.hero-ask input::placeholder{ color:rgba(6,24,36,0.72); }
.hero-ask-mic{
  flex:none; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  appearance:none; border:none; background:transparent; padding:0 6px; width:auto; height:auto;
  color:var(--ink);
  transition:color var(--ease) .3s, transform var(--ease) .3s;
}
.hero-ask-mic svg{ width:22px; height:22px; }
.hero-ask-mic:hover{ color:var(--gold-deep); }
.hero-ask-mic.listening{ color:var(--gold); animation:micPulse 1.3s ease-in-out infinite; }
@keyframes micPulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:0.55; transform:scale(1.12); } }
.hero-ask-mic[hidden]{ display:none; }
.hero-ask button[type="submit"]{
  flex:none; display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  appearance:none; border:none; border-radius:999px;
  background:var(--ink); color:#fff;
  font-family:var(--font-body); font-weight:500; font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  padding:14px 22px; transition:background var(--ease) .35s, transform var(--ease) .35s;
}
.hero-ask button[type="submit"] svg{ width:18px; height:18px; }
.hero-ask button[type="submit"]:hover{ background:var(--gold); }
.hero-ask button[type="submit"]:active{ transform:translateY(1px); }
.hero-ask.is-empty button[type="submit"]{ opacity:1; }

/* AI concierge chat under the ask bar */
.hero-ask-reply{
  width:min(660px,92%); margin:18px auto 0;
  background:rgba(255,255,255,0.96); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.6); border-radius:22px;
  padding:18px; text-align:left;
  box-shadow:0 18px 50px rgba(3,15,43,0.26);
  animation:harIn .5s var(--ease) both;
}
.hero-ask-reply[hidden]{ display:none; }
@keyframes harIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.har-log{ display:flex; flex-direction:column; gap:10px; max-height:340px; overflow-y:auto; scrollbar-width:thin; }
.har-bubble{
  font-family:var(--font-body); font-weight:300; font-size:15.5px; line-height:1.5;
  padding:11px 15px; border-radius:16px; max-width:85%; white-space:pre-wrap;
  animation:harIn .35s var(--ease) both;
}
.har-bot{ align-self:flex-start; background:var(--cream); color:var(--ink); border-bottom-left-radius:5px; }
.har-user{ align-self:flex-end; background:var(--ink); color:#fff; border-bottom-right-radius:5px; }
.har-bubble.thinking{ color:rgba(3,15,43,0.5); }
.har-bubble.thinking::after{ content:"\2026"; animation:harDots 1.2s steps(4) infinite; }
@keyframes harDots{ 0%{ opacity:0.3; } 50%{ opacity:1; } 100%{ opacity:0.3; } }
.har-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid rgba(3,15,43,0.08); }
.har-actions[hidden]{ display:none; }
.har-send{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  background:#25D366; color:#fff; border-radius:999px; padding:12px 20px;
  font-family:var(--font-body); font-weight:500; font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  transition:background var(--ease) .3s, transform var(--ease) .3s;
}
.har-send svg{ width:18px; height:18px; }
.har-send:hover{ background:#1ebe5a; transform:translateY(-1px); }
.har-edit{
  appearance:none; background:transparent; border:none; cursor:pointer;
  font-family:var(--font-body); font-weight:500; font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-soft); padding:8px 6px; transition:color var(--ease) .3s;
}
.har-edit:hover{ color:var(--ink); }
.hero-meta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 26px; margin-top:64px;
  font-family:var(--font-body); font-size:12px; letter-spacing:0.24em; text-transform:uppercase;
  color:rgba(255,255,255,0.8); font-weight:400;
}
.hero-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--gold); }
.hero-meta-1line{ flex-wrap:nowrap; white-space:nowrap; gap:0 12px; letter-spacing:0.08em; max-width:660px; margin-left:auto; margin-right:auto; }
.scroll-cue{
  position:absolute; left:50%; bottom:32px; transform:translateX(-50%); z-index:3;
  color:rgba(255,255,255,0.65); font-size:10px; letter-spacing:0.3em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.scroll-cue .line{ width:1px; height:44px; background:linear-gradient(rgba(255,255,255,0.65),transparent); animation:cue 2.6s var(--ease) infinite; }
@keyframes cue{ 0%{transform:scaleY(0);transform-origin:top;} 50%{transform:scaleY(1);transform-origin:top;} 51%{transform-origin:bottom;} 100%{transform:scaleY(0);transform-origin:bottom;} }

/* ============================================================
   SECTION SHELL
   ============================================================ */
section.band{ padding:172px 0; position:relative; z-index:1; background:var(--white); }
.band.cream{ background:var(--cream); }
.band.sand{ background:var(--sand-soft); }
.band.dark{ background:var(--ink); color:#fff; }
.sec-head{ max-width:820px; }
.sec-head h2{ font-size:clamp(40px,4.6vw,68px); margin:24px 0 0; line-height:1.06; }
.sec-head .lead{ margin-top:28px; }
.dark .sec-head h2{ color:#fff; }
.dark .sec-head .lead{ color:rgba(255,255,255,0.76); }

/* ---- positioning / intro ---- */
.intro-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:100px; align-items:start; }
.intro-statement{
  font-family:var(--font-display); font-weight:400; font-size:clamp(30px,3.2vw,46px);
  line-height:1.28; letter-spacing:0; color:var(--ink); margin-top:24px;
}
.intro-statement .hl{ color:var(--accent); font-style:italic; }
.intro-cols{ display:grid; grid-template-columns:1fr 1fr; gap:54px 48px; }
.intro-col .num{ font-family:var(--font-body); font-size:12px; font-weight:500; letter-spacing:0.24em; color:var(--gold-deep); }
.intro-col h3{ font-size:25px; margin:14px 0 0; }
.intro-col p{ font-size:15.5px; line-height:1.72; color:var(--ink-soft); margin:12px 0 0; }

/* ============================================================
   SERVICES GRID — 3 tweakable layouts
   ============================================================ */
#services .sec-head{ margin-bottom:84px; }
.services-grid{ display:grid; gap:44px 40px; }
.svc{
  position:relative; background:#fff; border:1px solid var(--line-soft); border-radius:0; overflow:hidden;
  box-shadow:none; transition:box-shadow var(--ease) .4s, transform var(--ease) .4s, border-color var(--ease) .4s;
  display:flex; flex-direction:column;
}
.svc:hover{ box-shadow:var(--shadow-2); transform:translateY(-5px); border-color:transparent; }
.svc-img{ width:100%; height:auto; aspect-ratio:4/5; display:block; }
.svc-img::part(empty){ background:var(--sand-soft); }
.svc-body{ padding:34px 36px 40px; display:flex; flex-direction:column; flex:1; }
.svc-num{ font-family:var(--font-body); font-size:11px; font-weight:500; letter-spacing:0.24em; text-transform:uppercase; color:var(--gold-deep); }
.svc-body h3{ font-size:29px; margin:14px 0 0; }
.svc-body p{ font-size:15px; line-height:1.72; color:var(--ink-soft); margin:14px 0 0; flex:1; }
.svc-link{
  margin-top:26px; font-family:var(--font-body); font-size:11px; font-weight:500; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:10px; align-self:flex-start;
}
.svc-link .arrow{ transition:transform var(--ease) .3s; }
.svc:hover .svc-link .arrow{ transform:translateX(6px); }

/* LAYOUT: cards (default) — 3 columns */
.services-grid{ grid-template-columns:repeat(3,1fr); }

/* LAYOUT: editorial — alternating full-width rows */
[data-services-layout="editorial"] .services-grid{ grid-template-columns:1fr; gap:48px; }
[data-services-layout="editorial"] .svc{ flex-direction:row; align-items:stretch; }
[data-services-layout="editorial"] .svc-img{ width:50%; aspect-ratio:auto; min-height:440px; flex:none; }
[data-services-layout="editorial"] .svc-body{ width:50%; justify-content:center; padding:72px 80px; }
[data-services-layout="editorial"] .svc-body h3{ font-size:40px; }
[data-services-layout="editorial"] .svc-body p{ font-size:17px; flex:none; max-width:46ch; }
[data-services-layout="editorial"] .svc:nth-child(even){ flex-direction:row-reverse; }

/* LAYOUT: overlay — image tiles with text scrim */
[data-services-layout="overlay"] .services-grid{ grid-template-columns:repeat(3,1fr); gap:28px; }
[data-services-layout="overlay"] .svc{ background:var(--ink); border:none; }
[data-services-layout="overlay"] .svc-img{ aspect-ratio:3/4; }
[data-services-layout="overlay"] .svc-body{
  position:absolute; inset:0; justify-content:flex-end; padding:40px;
  background:linear-gradient(180deg,rgba(6,24,36,0) 36%,rgba(6,24,36,0.82) 100%);
}
[data-services-layout="overlay"] .svc-body h3{ color:#fff; }
[data-services-layout="overlay"] .svc-body p{
  color:rgba(255,255,255,0.86); flex:none; max-height:0; opacity:0; overflow:hidden; margin-top:0;
  transition:max-height var(--ease) .5s, opacity var(--ease) .4s, margin-top var(--ease) .5s;
}
[data-services-layout="overlay"] .svc:hover .svc-body p{ max-height:140px; opacity:1; margin-top:14px; }
[data-services-layout="overlay"] .svc-link{ color:var(--gold); }

/* ============================================================
   SIGNATURE (dark showcase)
   ============================================================ */
.signature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:76px; }
.sig-card{ position:relative; overflow:hidden; }
.sig-card image-slot{ width:100%; height:100%; aspect-ratio:3/4; display:block; }
.sig-cap{
  position:absolute; left:0; right:0; bottom:0; padding:34px;
  background:linear-gradient(180deg,rgba(6,24,36,0) 32%,rgba(6,24,36,0.82) 100%);
}
.sig-cap .k{ font-family:var(--font-body); font-size:11px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); }
.sig-cap h3{ font-size:27px; color:#fff; margin:12px 0 0; }

/* ============================================================
   PROCESS
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:80px; border-top:1px solid var(--line); }
.step{ padding:52px 48px 52px 0; border-bottom:1px solid var(--line); }
.steps .step:not(:last-child){ border-right:1px solid var(--line); padding-right:48px; }
.steps .step:not(:first-child){ padding-left:48px; }
.step .n{
  font-family:var(--font-display); font-size:46px; font-weight:400; line-height:1;
  color:var(--accent); letter-spacing:0;
}
.step h3{ font-size:26px; margin:24px 0 0; }
.step p{ font-size:15.5px; line-height:1.72; color:var(--ink-soft); margin:14px 0 0; }

/* ============================================================
   REQUEST FORM
   ============================================================ */
.request{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:88px; align-items:start; }
.request-aside .lead{ margin-top:28px; }
.contact-list{ margin-top:48px; display:flex; flex-direction:column; gap:0; }
.contact-row{ display:flex; align-items:center; gap:18px; padding:20px 0; border-top:1px solid var(--line); }
.contact-row:last-child{ border-bottom:1px solid var(--line); }
.contact-row .ic{ width:42px; height:42px; flex:none; border-radius:50%; border:1px solid var(--line); background:transparent; display:flex; align-items:center; justify-content:center; }
.contact-row .ic svg{ width:18px; height:18px; stroke:var(--accent); }
.contact-row .lbl{ font-family:var(--font-body); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-mute); font-weight:500; }
.contact-row .val{ font-family:var(--font-body); font-size:16px; font-weight:400; color:var(--ink); }

.form-card{ background:#fff; border:1px solid var(--line); border-radius:0; padding:56px; box-shadow:var(--shadow-2); }
.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.field{ display:flex; flex-direction:column; gap:9px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-family:var(--font-body); font-size:11px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); }
.field label .req{ color:var(--gold-deep); }
.field input, .field select, .field textarea{
  font-family:var(--font-body); font-weight:300; font-size:16px; color:var(--ink); background:transparent;
  border:none; border-bottom:1px solid var(--line); border-radius:0; padding:12px 2px;
  transition:border-color var(--ease) .3s;
}
.field textarea{ resize:vertical; min-height:96px; }
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-mute); }
.field select{ appearance:none; cursor:pointer; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent);
}
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:#c0492f; }
.field .err{ font-family:var(--font-body); font-size:12px; color:#c0492f; display:none; }
.field.invalid .err{ display:block; }
.form-foot{ display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:40px; flex-wrap:wrap; }
.form-foot .note{ font-size:13px; line-height:1.6; color:var(--ink-mute); max-width:34ch; }
.form-success{ display:none; text-align:center; padding:44px 10px; }
.form-success.show{ display:block; }
.form-success .check{ width:64px; height:64px; border-radius:50%; border:1px solid var(--accent); display:flex; align-items:center; justify-content:center; margin:0 auto; }
.form-success .check svg{ width:30px; height:30px; stroke:var(--accent); }
.form-success h3{ font-size:34px; margin:26px 0 0; }
.form-success p{ color:var(--ink-soft); margin:14px auto 0; max-width:40ch; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ position:relative; z-index:1; background:var(--ink); color:#fff; padding:112px 0 48px; }
.foot-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:56px; }
.foot-logo{ width:100%; max-width:360px; height:auto; display:block; }
.foot-brand p{ color:#fff; font-size:15px; line-height:1.75; margin:30px 0 0; max-width:40ch; }
.foot-badge{ display:block; width:175px; max-width:72%; height:auto; margin:60px auto 0; opacity:0.7; }
.foot-top .foot-col:nth-child(2), .foot-top .foot-col:nth-child(3){ text-align:right; }
.foot-top .foot-col .socials{ justify-content:flex-end; }
.foot-top .foot-col .news{ justify-content:flex-end; }
.foot-col h4{ font-family:var(--font-body); font-size:11px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin:0 0 22px; }
.foot-col a, .foot-col li{ display:block; color:#fff; font-size:15px; font-weight:300; padding:7px 0; }
.foot-col a:hover{ color:var(--gold); }
.foot-col ul{ list-style:none; margin:0; padding:0; }
.socials{ display:flex; gap:14px; margin-top:10px; }
.socials a{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line-dark); display:flex; align-items:center; justify-content:center; transition:background var(--ease) .3s, border-color var(--ease) .3s; }
.socials a:hover{ background:#fff; border-color:#fff; }
.socials svg{ width:18px; height:18px; stroke:#fff; }
.socials a:hover svg{ stroke:var(--ink); }
.foot-bottom{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:80px; padding-top:30px; border-top:1px solid var(--line-dark); flex-wrap:wrap; }
.foot-bottom, .foot-bottom a{ font-size:12px; letter-spacing:0.08em; color:rgba(255,255,255,0.9); }

/* ============================================================
   EDITORIAL — centered heads, link CTA, carousels, banners
   ============================================================ */
.sec-head.center{ max-width:760px; margin-left:auto; margin-right:auto; text-align:center; }
.sec-head.center .lead{ margin-left:auto; margin-right:auto; }
.sec-head .head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:48px; flex-wrap:wrap; }

.link-cta{
  font-family:var(--font-body); font-size:12px; font-weight:500; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--ink); display:inline-flex; align-items:center; gap:11px;
  border-bottom:1px solid currentColor; padding-bottom:7px; transition:gap var(--ease) .3s, color var(--ease) .3s;
}
.link-cta:hover{ gap:18px; }
.dark .link-cta, .banner-inner .link-cta{ color:#fff; }

/* ---- centered statement + full-bleed image ---- */
.statement{ max-width:940px; margin:0 auto; text-align:center; }
.statement h2{ font-size:clamp(48px,6vw,90px); line-height:1.08; }
.statement .lead{ margin:32px auto 0; max-width:60ch; }

/* navy statement bandeau — full-width, flush under the hero, cream text */
#about{ padding-top:0; padding-bottom:0; }
.statement-navy{
  max-width:none; width:100%; margin:0;
  background:var(--ink); border-radius:0;
  padding:clamp(31px,4.55vw,53px) clamp(24px,6vw,96px);
}
.statement-navy .eyebrow{ font-size:13px; }
.statement-navy h2{ font-size:clamp(40px,8vw,92px); }
.statement-navy .lead{ font-size:clamp(16px,1.6vw,20px); }
.statement-navy .eyebrow{ color:var(--gold); }
.statement-navy h2{ color:var(--cream); }
.statement-navy .lead{ color:rgba(251,250,246,0.82); }
.full-img{ margin-top:0; overflow:hidden; }
.full-img image-slot{ width:100%; aspect-ratio:16/8; display:block; }
.full-img image-slot::part(empty){ background:var(--sand-soft); }

/* parallax signature photo — full-width, flush under the navy bandeau */
.parallax-frame{ position:relative; width:100%; height:clamp(340px,46vw,640px); overflow:hidden; }
.parallax-img{
  position:absolute; top:0; left:0; width:100%; height:148%;
  object-fit:cover; object-position:center 30%; display:block;
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){
  .parallax-img{ transform:none !important; }
}
@media (max-width:600px){
  /* banner photo sits full-width below the navy block on mobile */
  .banner{ padding-bottom:0; }
  .banner-img{ width:100%; margin:34px auto 0; }
  .dst-br{ display:inline; }
  #destinations .sec-head h2{ font-size:28px; white-space:normal; }
  .parallax-img{ object-position:center 72%; }
  /* show the photo fuller (full width, less crop) on mobile; it rises with parallax */
  .parallax-frame{ height:auto; aspect-ratio:16/9; }
  .parallax-img{ object-position:center 60%; }
}

/* ---- carousel ---- */
.carousel-track{
  display:flex; gap:30px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  margin-top:60px; padding-bottom:6px; scrollbar-width:none; cursor:grab;
}
@media (hover:none){ .carousel-track{ scroll-snap-type:x proximity; cursor:default; } }
.carousel-track.dragging{ cursor:grabbing; scroll-behavior:auto; scroll-snap-type:none; }
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-track > *{ scroll-snap-align:start; flex:0 0 auto; }

/* grid variant — 3 columns × N rows instead of horizontal scroll */
.carousel.as-grid .carousel-track{
  display:grid; grid-template-columns:repeat(3,1fr); gap:90px 30px;
  overflow:visible; scroll-snap-type:none; cursor:default;
}
.carousel.as-grid .carousel-track > *{ flex:initial; }
.carousel.as-grid .jcard{ width:auto; }
.carousel-nav.nav-hidden{ display:none; }

/* services grid — full-bleed, edge to edge with the page, larger vignettes */
#services{ padding-bottom:74px; }
#services .jframe{ border-radius:0; }
#services .carousel{
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: 44px; padding-right: 44px;
  box-sizing: border-box;
}
#services .jcard{ width:min(420px,80vw); }
@media (max-width:600px){
  #services .carousel{ padding-left:22px; padding-right:0; }
  #services .jcard{ width:78vw; }
  .svc-ov .ov-title{ font-size:23px; line-height:1.05; }
  .svc-ov .ov-stack{ left:18px; right:12px; }
}
@media (min-width:900px){
  #destinations .sec-head .head-row > div{ max-width:none; }
  #destinations .sec-head h2, #destinations .sec-head .lead{ white-space:nowrap; }
  #services .sec-head h2{ white-space:nowrap; }
}

@media (max-width:860px){ .carousel.as-grid .carousel-track{ grid-template-columns:repeat(2,1fr); gap:16px; } }
@media (max-width:600px){ .carousel.as-grid .carousel-track{ grid-template-columns:1fr; gap:22px; } }

.carousel-nav{ display:flex; gap:14px; }
.carousel-btn{
  width:56px; height:56px; border-radius:50%; border:1px solid var(--line); background:transparent;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background var(--ease) .3s, border-color var(--ease) .3s, opacity var(--ease) .3s;
}
.dark .carousel-btn{ border-color:var(--line-dark); }
.carousel-btn svg{ width:19px; height:19px; stroke:var(--ink); fill:none; }
.dark .carousel-btn svg{ stroke:#fff; }
.carousel-btn:hover{ background:var(--ink); border-color:var(--ink); }
.dark .carousel-btn:hover{ background:#fff; border-color:#fff; }
.carousel-btn:hover svg{ stroke:#fff; }
.dark .carousel-btn:hover svg{ stroke:var(--ink); }
.carousel-btn:disabled{ opacity:0.28; pointer-events:none; }

/* journey / service card */
.jcard{ width:min(430px,82vw); display:flex; flex-direction:column; }
.jframe{ overflow:hidden; position:relative; border-radius:8px; }
.jframe image-slot, .jframe img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; display:block; transition:transform var(--ease) .8s; }
[data-carousel="services"] .jframe img{ aspect-ratio:3/4; }
.jframe image-slot::part(empty){ background:var(--sand-soft); }
.jcard:hover .jframe image-slot, .jcard:hover .jframe img{ transform:scale(1.05); }
.jbody{ padding-top:30px; }
.jk{ font-family:var(--font-body); font-size:11px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold-deep); }
.dark .jk{ color:var(--gold); }
.jbody h3{ font-size:31px; margin:14px 0 0; }
.dark .jbody h3{ color:#fff; }
.jbody p{ font-size:15.5px; line-height:1.7; color:var(--ink-soft); margin:14px 0 0; }
.dark .jbody p{ color:rgba(255,255,255,0.72); }
.jbody .link-cta{ margin-top:24px; font-size:11px; }

/* tighter spacing for the service cards (eyebrow / title / enquire) */
[data-carousel="services"] .jbody{ padding-top:14px; }
[data-carousel="services"] .jbody h3{ margin-top:3px; }
[data-carousel="services"] .jbody .link-cta{ margin-top:12px; }

/* service overlay layout — Ralph Lauren editorial: eyebrow / serif title / underlined CTA, bottom-left over photo */
.svc-ov .jframe{ position:relative; }
.svc-ov .jframe::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(180deg, rgba(3,15,43,0) 0%, rgba(3,15,43,0) 64%, rgba(3,15,43,0.55) 84%, rgba(3,15,43,0.86) 100%);
}
.ov-stack{
  position:absolute; left:32px; right:32px; bottom:30px; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start;
}
.svc-ov .ov-k{
  font-family:var(--font-body); font-size:12px; font-weight:500; letter-spacing:0.2em;
  text-transform:uppercase; color:rgba(255,255,255,0.92); margin:0 0 5px;
}
.svc-ov .ov-title{
  font-family:var(--font-display); font-weight:400; font-size:40px; line-height:1.04;
  letter-spacing:0; text-transform:none; text-align:left; color:#fff; margin:0; text-wrap:balance;
}
.svc-ov .ov-cta{
  position:relative; margin-top:18px; font-family:var(--font-body); font-size:12px; font-weight:500; letter-spacing:0.2em;
  text-transform:uppercase; color:#fff; padding-bottom:8px;
  transition:letter-spacing var(--ease) .4s;
}
.svc-ov .ov-cta::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:rgba(255,255,255,0.85); transform-origin:left; transition:background var(--ease) .3s;
}
.svc-ov:hover .ov-cta{ letter-spacing:0.26em; }
.svc-ov:hover .ov-cta::after{ background:#fff; animation:discoverLine 0.7s var(--ease); }
@keyframes discoverLine{ 0%{ transform:scaleX(0); } 100%{ transform:scaleX(1); } }

/* destinations — landscape 4:3 overlay cards, horizontal scroll, flush-left start */
[data-carousel="destinations"] .jframe img{ aspect-ratio:4/3; }
.dest-ov .ov-k{ display:none; }
#destinations .jframe{ border-radius:0; }
#destinations .jcard{ width:min(576px,72vw); }
#destinations .carousel{ margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); }
#destinations .carousel-track{ padding-left: 0; padding-right: 44px; }
#destinations .carousel.reveal > .carousel-track{ margin-top:36px; }
.dest-dots{ display:flex; align-items:center; justify-content:center; gap:13px; margin-top:34px; }
.dest-dots .dot{ width:8px; height:8px; padding:0; border:none; border-radius:50%; background:rgba(3,15,43,0.22); cursor:pointer; transition:background var(--ease) .3s, transform var(--ease) .3s; }
.dest-dots .dot.active{ background:var(--ink); transform:scale(1.35); }
.dest-dots .dot-arrow{ background:none; border:none; cursor:pointer; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; padding:4px; opacity:0.7; transition:opacity var(--ease) .3s; }
.dest-dots .dot-arrow:hover{ opacity:1; }
.dest-dots .dot-arrow svg{ width:18px; height:18px; }
.dest-dots .dot-arrow:disabled{ opacity:0.2; cursor:default; }

/* mobile-only services title */
.svc-mtitle{ display:none; }

/* ---- full-bleed banner ---- */
.banner{ position:relative; z-index:3; background:var(--ink); padding:118px 0 0; overflow:visible; }
.dst-br{ display:none; }
.banner-wrap{ position:relative; }
.banner-img{ display:block; width:min(720px,88%); height:auto; margin:-66px 0 -150px auto; object-fit:cover; box-shadow:var(--shadow-4); position:relative; z-index:3; will-change:transform; }
.banner-inner{ position:relative; z-index:2; color:#fff; max-width:600px; }
.banner-inner .eyebrow{ color:var(--gold); }
.banner-inner h2{ color:#fff; font-size:clamp(38px,4.4vw,64px); margin:22px 0 0; }
.banner-inner p{ color:rgba(255,255,255,0.84); font-size:19px; line-height:1.65; margin:24px 0 0; }
.banner-inner .link-cta{ margin-top:38px; }

/* ---- testimonials ---- */
.quote{ flex:0 0 100%; width:100%; max-width:none; text-align:center; padding:0 20px; box-sizing:border-box; }
.quote p{ max-width:880px; margin-left:auto; margin-right:auto; text-align:center !important; }
.quote p{
  font-family:var(--font-display); font-weight:400; font-size:clamp(26px,3vw,42px); line-height:1.34;
  color:#fff; margin:0; font-style:italic;
}
.quote .who{ font-family:var(--font-body); font-size:11px; font-weight:500; letter-spacing:0.24em; text-transform:uppercase; color:var(--gold); margin-top:36px; }
.quotes-track{ align-items:center; }
.quotes-track > *{ scroll-snap-align:center; }

/* ---- newsletter + partners ---- */
.news{ display:flex; align-items:center; gap:0; border-bottom:1px solid var(--line-dark); max-width:340px; margin-top:14px; }
.news input{ flex:1; background:transparent; border:none; color:#fff; font-family:var(--font-body); font-weight:300; font-size:15px; padding:12px 2px; }
.news input::placeholder{ color:rgba(255,255,255,0.5); }
.news input:focus{ outline:none; }
.news button{ background:transparent; border:none; color:var(--gold); font-family:var(--font-body); font-size:11px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; cursor:pointer; padding:8px; }
.partners{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:24px; margin-top:64px; padding-top:48px; border-top:1px solid var(--line-dark); }
.partners .pk{ font-family:var(--font-body); font-size:11px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,0.5); width:100%; margin-bottom:4px; }
.partner-logos{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:40px 60px; }
.plogo{ width:auto; display:block; opacity:0.92; transition:opacity var(--ease) .3s; }
.plogo:hover{ opacity:1; }
.plogo-fs{ height:54px; }
.plogo-nj{ height:23px; }
.plogo-htsi{ height:42px; }
.plogo-cn{ height:38px; }
.plogo-robb{ height:56px; }
.plogo-oe{ height:79px; }

/* about / founder */
.founder-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:72px; align-items:start; }
.founder-photo{ position:relative; }
.founder-photo .fp-name{
  position:absolute; top:15%; left:26px; right:18px; z-index:3;
  font-family:var(--font-display); font-weight:400; color:#fff;
  font-size:clamp(34px,3.6vw,54px); line-height:1.0; letter-spacing:0.01em;
  text-shadow:0 2px 24px rgba(3,15,43,0.45); pointer-events:none; will-change:transform;
}
.founder-photo .fp-name span{ display:block; }
.founder-photo .fp-img{ display:block; border-radius:0; will-change:transform; }
.founder-photo .fp-img:first-child{ width:100%; height:auto; position:relative; z-index:2; box-shadow:var(--shadow-2); }
.founder-photo .fp-img-2{ position:relative; width:64%; height:auto; margin:26px 0 0 auto; z-index:1; box-shadow:var(--shadow-3); }
.founder-text h2{ font-size:clamp(32px,3.4vw,52px); line-height:1.08; }
.founder-sign{ margin-top:34px; }
.founder-name{ font-family:var(--font-display); font-size:27px; color:var(--ink); }
.founder-role{ font-family:var(--font-body); font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold-deep); margin-top:6px; }
.founder-bio{ margin-top:20px; font-size:15.5px; line-height:1.75; color:var(--ink-soft); max-width:54ch; }
@media (max-width:820px){
  .founder-grid{ grid-template-columns:1fr; gap:30px; }
  .founder-text{ display:contents; }
  .founder-intro{ order:1; }
  .founder-photo{ order:2; max-width:440px; margin:0 auto; }
  .founder-sign-block{ order:3; }
}

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
.wa-float{
  position:fixed; right:28px; bottom:28px; z-index:1200;
  width:60px; height:60px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#fff;
  box-shadow:0 10px 30px rgba(6,24,36,0.28), 0 2px 8px rgba(6,24,36,0.18);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease);
}
.wa-float svg{ width:34px; height:34px; fill:currentColor; pointer-events:none; }
.wa-float:hover{ transform:translateY(-3px); background:#1ebe5a; box-shadow:0 16px 40px rgba(6,24,36,0.34), 0 3px 10px rgba(6,24,36,0.2); }
.wa-float:active{ transform:translateY(-1px); }
@media (max-width:900px){
  .wa-float{ right:18px; bottom:18px; width:54px; height:54px; }
  .wa-float svg{ width:30px; height:30px; }
}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } .scroll-cue{ display:none; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .site-nav{ display:none; }
  .intro-grid{ grid-template-columns:1fr; gap:56px; }
  .request{ grid-template-columns:1fr; gap:56px; }
}
@media (max-width:900px){
  .wrap{ padding:0 32px; }
  section.band{ padding:104px 0; }
  .hero-media{ position:absolute; }
  .services-grid{ grid-template-columns:1fr 1fr !important; }
  [data-services-layout="editorial"] .svc{ flex-direction:column !important; }
  [data-services-layout="editorial"] .svc:nth-child(even){ flex-direction:column !important; }
  [data-services-layout="editorial"] .svc-img{ width:100%; min-height:0; aspect-ratio:4/3; }
  [data-services-layout="editorial"] .svc-body{ width:100%; padding:44px; }
  .signature-grid, .foot-top{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr; }
  .steps .step{ padding:40px 0 !important; border-right:none !important; }
  .form-card{ padding:40px; }
}
@media (max-width:600px){
  .wrap{ padding:0 22px; }
  .site-header .wrap{ padding-top:18px; padding-bottom:18px; gap:12px; }
  .brand img{ height:50px; }
  .site-header.scrolled .brand img{ height:45px; }
  .nav-toggle{ width:36px; height:36px; }
  .nav-toggle span{ width:24px; }
  /* mobile header: drop the Enquire button */
  .header-cta .btn{ display:none; }
  /* ask bar — wider and ~10% shorter */
  .hero-ask{ width:96%; padding:6px 6px 6px 20px; margin-top:0; gap:8px; }
  .hero-ask input{ font-size:15px; padding:9px 0; }
  .hero-ask button[type="submit"]{ padding:11px 16px; }
  .hero-ask .hero-ask-label{ display:none; }
  .services-grid{ grid-template-columns:1fr !important; }
  .signature-grid, .foot-top, .field-grid, .intro-cols{ grid-template-columns:1fr; }
  .header-phone{ display:none; }
  .hero-inner{ padding-bottom:56px; padding-top:140px; }
  /* keep the slogan on mobile, lift the cities up */
  .hero h1{ display:block; font-size:clamp(48px,14vw,68px); max-width:16ch; margin-left:auto; margin-right:auto; }
  .hero-meta{ margin-top:24px; gap:10px 18px; }
  .hero-meta-1line{ font-size:13px !important; letter-spacing:0.04em; gap:0 9px; max-width:none; }
  .nav-drawer{ padding:72px 40px 48px; }
  .nav-drawer a{ font-size:17px; }
  .plogo-robb{ height:56px; }
  .form-card{ padding:26px; }
  /* destinations on mobile: portrait cards, tighter to heading */
  #destinations .carousel-track{ margin-top:18px; }
  [data-carousel="destinations"] .jframe img{ aspect-ratio:3/4; }
  #destinations .jcard{ width:74vw; }
  /* request form — compact + centered on mobile */
  #request .request-aside{ text-align:center; }
  #request .contact-list{ margin-top:26px; }
  #request .contact-row{ justify-content:flex-start; gap:12px; padding:14px 0; }
  #request .contact-row .val{ font-size:13.5px; white-space:nowrap; }
  #request .field-grid{ gap:15px; }
  #request .field input, #request .field select, #request .field textarea{ padding:9px 2px; }
  #request .field textarea{ min-height:64px; }
  #request .form-foot{ margin-top:22px; flex-direction:column; align-items:stretch; gap:14px; }
  #request .form-foot .note{ order:2; max-width:none; text-align:center; }
  #request .form-foot .btn{ order:1; width:100%; justify-content:center; }
  /* services header on mobile: simple "Our Services", close to the grid */
  #services .sec-head .eyebrow,
  #services .sec-head h2:not(.svc-mtitle),
  #services .sec-head .lead{ display:none; }
  #services .svc-mtitle{ display:block; margin:0; font-size:34px; }
  #services .sec-head{ margin-bottom:0; }
  #services .carousel.as-grid .carousel-track{ margin-top:22px; }
  /* center footer brand text on mobile */
  .foot-brand{ text-align:center; }
  .foot-brand .foot-logo{ margin-left:auto; margin-right:auto; }
  .foot-brand p{ margin-left:auto; margin-right:auto; }
}