/* =========================================================
   Unified Throne Voyages Stylesheet
   HEADER: logo büyük + nav altta + ortalanmış
   HERO: içerik sayfanın solunda, dibine yapışmadan, ortalara kadar yayılıyor
   ========================================================= */

/* ===== DESIGN TOKENS ===== */

:root{
  /* Marka renkleri (Throne Voyages) */
  --tv-ocean:#0e5475;
  --tv-ocean-900:#0a3e58;
  --tv-cream:#f8f9fa;
  --tv-gold:#b88a2b;
  --tv-text:#0f1a22;
  --tv-muted:#6c7a86;
  --tv-white:#ffffff;

  /* Typography / layout scale (fluid) */
  --maxw: clamp(1140px, 80vw, 1500px);
  --pad:min(4vw,32px);
  --gap:clamp(20px,4vw,48px);
  --heading:clamp(34px,6vw,64px);
  --h2:clamp(28px,4vw,44px);
  --h3:clamp(20px,2.6vw,26px);
  --lead:clamp(20px,2.4vw,24px);    /* intro / section lead paragrafları */
  --p:clamp(18px,2vw,20px);         /* standart body paragrafı */

  /* Nötr tonlar (marka ile uyumlu) */
  --muted:var(--tv-muted);
  --ink:var(--tv-text);
  --paper:var(--tv-white);
  --soft:#f6f7f8;
  --brand:var(--tv-text);

  --radius:20px;
  --shadow:0 10px 30px rgba(0,0,0,.06);

  /* Transportation spesifik */
  --img-ratio:16/10;
}

/* ===== GLOBAL RESETS & BASE ===== */

html{
  box-sizing:border-box;
  scroll-behavior:smooth;
  scroll-padding-top:80px; /* anchor offset */
}

*,*::before,*::after{
  box-sizing:inherit;
}

html,body{
  margin:0;
  padding:0;
  background:var(--paper);
  color:var(--ink);
}

body{
  font-family:"Cormorant Garamond",Georgia,serif;
  line-height:1.5;
}

/* Tarayıcıların form elemanlarına kendi fontunu uygulamasını engelle */
input,textarea,select{
  font-family:"Cormorant Garamond",Georgia,serif;
}

/* Images */
img{
  max-width:100%;
  height:auto;
  display:block;
}

/* Container – genel sayfa içerikleri için ortalanmış */
.container{
  width:min(var(--maxw),92%);
  margin-inline:auto;
}

/* Links (genel) */
a{
  text-decoration:none;
  color:var(--tv-ocean);
  transition:opacity .2s ease;
}

a:hover{
  opacity:.9;
}

/* Metin içi sade linkler (link-plain) */
a.link-plain{
  color:inherit !important;
  text-decoration:none !important;
  font-family:inherit !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  line-height:inherit !important;
  letter-spacing:inherit !important;
  text-transform:inherit !important;
}

a.link-plain:hover,
a.link-plain:focus-visible{
  text-decoration:underline !important;
  text-underline-offset:0.15em !important;
}

/* Başlık içi linkler alt çizgi almasın */
h2 > a.link-plain,
h2 > a.link-plain:hover,
h2 > a.link-plain:focus-visible{
  text-decoration:none !important;
}

/* ===== TYPOGRAPHY ===== */

h1,h2,h3,h4,h5,h6{
  color:var(--ink);
  line-height:1.2;
  margin:0 0 .6rem;
}

h1{ font-size:var(--heading); }
h2{ font-size:var(--h2); }
h3{ font-size:var(--h3); }

p{
  font-size:var(--p);
  font-weight:500;
  line-height:1.65;
  margin:0 0 .8rem;
}

/* Kicker (hero üstü küçük başlık) */
.kicker{
  letter-spacing:.2em;
  text-transform:uppercase;
  font-size:12px;
  font-weight:700;
  opacity:.9;
}

/* Section intro – genel giriş paragrafı */
.section-intro,
.lead{
  font-size:var(--lead);
  line-height:1.7;
  color:var(--muted);
}

/* ===== BUTTONS (Tek sistem) ===== */

.btn{
  appearance:none;
  border-radius:999px;
  padding:12px 18px;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  transition:background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}

.btn:hover{
  background:rgba(255,255,255,.18);
}

/* Koyu buton varyantı (global CTA’lar) */
.btn.dark{
  border-color:var(--ink);
  background:var(--ink);
  color:#fff;
}

/* Açık buton varyantı */
.btn.light{
  border-color:#ddd;
  background:#fff;
  color:var(--ink);
}

/* Outline varyant */
.btn.outline{
  background:transparent;
  color:var(--ink);
  border:2px solid currentColor;
}

.btn.outline:hover{
  background:var(--ink);
  color:#fff;
}

/* Hero içindeki butonlar beyaz ağırlıklı */
.hero .btn{
  border-color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.12);
  color:#fff;
}

.hero .btn:hover{
  background:rgba(255,255,255,.22);
}

/* CTA bloklarındaki buton – koyu */
.cta .btn{
  border-color:var(--ink);
  background:var(--ink);
  color:#fff;
}

/* ===== HEADER — centered + stacked (logo büyük + nav altta) ===== */

.header{
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
  border-bottom:1px solid #eee;
}

.header .inner{
  display:flex;
  flex-direction:column;        /* üst üste hizalama */
  align-items:center;           /* ortalama */
  justify-content:center;
  padding:20px 0;
  gap:14px;                     /* logo ile menü arası boşluk */
  position:relative;            /* lang-switcher için referans */
}

/* Logo & brand */
.brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.brand .logo-icon{
  height:110px;                 /* büyük logo */
  width:auto;
  display:block;
}

/* Eğer text logo varsa */
.header .brand-text{
  font-size:32px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
}

/* NAV MENÜ — logonun altında, ortalanmış */
.nav{
  display:flex;
  gap:26px;
  justify-content:center;
  align-items:center;
}

.nav a{
  font-family:"PT Serif",Georgia,serif;
  color:var(--ink);
  font-size:18px;
  font-weight:400;
  letter-spacing:.02em;
  text-decoration:none;
}

.nav a:hover{
  opacity:.7;
}

/* Nav içindeki özel btn kullanılırsa */
.nav a.btn{
  padding:8px 16px;
  border:1px solid #ddd;
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  font-size:16px;
}

/* ===== LANGUAGE SWITCHER (EN | TR) ===== */

.lang-switcher{
  position:absolute;
  right:clamp(0px, 1vw, 12px);  /* sağdan nefes */
  bottom:20px;                 /* nav satırına hizalı, dibe yapışmıyor */
  display:flex;
  align-items:center;
  gap:0.3rem;
}

.lang-link{
  font-family:"PT Serif",Georgia,serif;
  font-size:18px;
  font-weight:400;
  letter-spacing:.02em;
  color:var(--ink);
  text-decoration:none;
}

.lang-link:hover{
  opacity:.7;                           /* nav hover ile uyumlu */
}

.lang-sep{
  font-family:"PT Serif",Georgia,serif;
  opacity:.7;
  font-size:18px;
}

/* Mobil görünüm */
@media (max-width:700px){
  .nav{
    flex-wrap:wrap;
    gap:18px;
  }
  .brand .logo-icon{
    height:90px; /* mobilde biraz küçült */
  }
  .lang-switcher{
    position:static;
    margin-top:4px;
  }
}

/* ===== HERO — içerik sayfanın solunda, dibine yapışmadan, ortalara kadar yayılıyor ===== */

.hero{
  position:relative;
  min-height:76vh;
  display:flex;
  align-items:center;                /* dikey ortalama */
  justify-content:flex-start;        /* solda */
  overflow:hidden;
  background:#000;
}

/* Arkaplan (slideshow + normal) */
.hero .media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.72) contrast(1.05);
  z-index:1;
}

.hero-slideshow{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  z-index:1;
}

.hero-slideshow .slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.5s ease-in-out;
}

.hero-slideshow .slide.active{
  opacity:1;
  z-index:2;
}

/* İçerik kutusu – sol tarafta, ama yarım sayfaya kadar uzayabilir */
.hero .container,
.hero .content{
  position:relative;
  z-index:3;
  width:min(var(--maxw),100%);
  max-width:clamp(640px,60vw,900px);    /* sol yarı + biraz ötesine kadar uzansın */
  margin-left:clamp(16px,5vw,40px);     /* ekran solundan nefes payı */
  margin-right:auto;
  padding:0;
  text-align:left;
}

/* Başlık */
.hero h1{
  color:#fff;
  margin:0 0 18px;
  line-height:1.05;
}

/* Lead text – artık container genişliği kadar yayılabilir */
.hero .lead,
.hero .content p{
  color:#e9f2f7;
  max-width:100%;
  margin:0 0 22px;
  text-align:left;
}

/* CTA butonları */
.hero .cta-row{
  display:flex;
  gap:12px;
  margin-top:20px;
  flex-wrap:wrap;
  justify-content:flex-start;
}

/* Index özel hero açıklama (u-d4c0d27e) */
.u-d4c0d27e{
  max-width:100%;
  color:#e9f2f7 !important;
  font-size:20px !important;
  line-height:1.6;
}

@media (max-width:600px){
  .u-d4c0d27e{
    font-size:18px !important;
  }
}

/* ===== SECTIONS / LAYOUT ===== */

.section{
  padding:72px 0;
}

.section.light{
  background:var(--tv-cream);
}

.section.white{
  background:#fff;
}

/* Manifesto / block tipleri (Bespoke, vb.) */
.block{
  padding:clamp(56px,8vw,110px) var(--pad);
  display:grid;
  place-items:center;
  background:var(--paper);
}

.block .inner{
  width:min(var(--maxw),100%);
  text-align:center;
}

.block h2{
  font-size:var(--h2);
  line-height:1.1;
  margin:0 0 12px;
}

.block p{
  max-width:72ch;
  margin:0 auto;
  color:var(--muted);
  font-size:var(--lead);
}

/* Breaker tam genişlik görsel */
.breaker{
  height:clamp(260px,40vh,420px);
  position:relative;
  overflow:hidden;
  background:#000;
}

.breaker img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.78) contrast(1.05);
}

/* ===== GENEL GRIDLER ===== */

/* 3 kolonlu grid (index kartları + diğer sayfalar) */
.grid-3,
.grid3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap);
}

@media (max-width:900px){
  .grid-3,
  .grid3{
    grid-template-columns:1fr;
  }
}

/* Split layout (text + görsel) */
.split{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:40px;
  align-items:center;
}

@media (max-width:900px){
  .split{
    grid-template-columns:1fr;
  }
}

/* List with icons */
.list-icons{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin-top:12px;
}

.list-icons li{
  display:flex;
  align-items:center;
  gap:10px;
}

.badge{
  width:28px;
  height:28px;
  background:var(--tv-cream);
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--tv-ocean);
  font-weight:700;
}

/* ===== CARD BİLEŞENLERİ ===== */

/* Bespoke / Index kart alanı (Signature Ways to Travel vb.) */
.cards{
  padding:clamp(50px,7vw,96px) var(--pad);
  background:var(--soft);
}

.cards .inner{
  width:min(var(--maxw),100%);
  margin:0 auto;
}

.cards h2{
  font-size:var(--h2);
  text-align:center;
  margin:0 0 28px;
}

/* Genel kart */
.card{
  background:#fff;
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow);
  display:grid;
  gap:10px;
  align-content:start;
}

/* GLOBAL CARD TYPOGRAPHY */
.card h3{
  font-size:var(--h3);
  margin:0;
}

.card p{
  color:var(--muted);
  margin:0;
}

/* Index kart görselleri – hem daha geniş kart, hem daha yüksek görsel */
.card img{
  width:100%;
  height:clamp(260px, 22vw, 320px);
  object-fit:cover;
  border-radius:12px;
}

/* Kart içinde görselin hemen altındaki başlık biraz aşağı insin */
.card img + h3{
  margin-top:12px; /* istersen 10–16px arası oynayabilirsin */
}

/* Celebrations kart görseli */
.card .thumb{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:12px;
  display:block;
}


/* ===== DESTINATIONS & CONCIERGE LAYOUTLARI ===== */

/* Tagline */
.tagline{
  padding:clamp(20px,4vw,36px) 0;
}

.tagline h2{
  margin:0;
  font-size:clamp(24px,3.4vw,34px);
  line-height:1.15;
  text-align:center;
}

.tagline p{
  margin:.5rem auto 0;
  max-width:70ch;
  color:var(--muted);
  font-size:var(--lead);
  text-align:center;
}

/* Destinations – locations grid */
.locations,
.services{
  padding:clamp(48px,7vw,96px) var(--pad);
}

.locations .inner,
.services .inner{
  width:min(var(--maxw),100%);
  margin:0 auto;
  display:grid;
  gap:clamp(32px,4vw,48px);
}

/* Tek bileşen tipi: .loc / .svc */
.loc,
.loc.flip,
.svc,
.svc.flip{
  display:grid;
  gap:clamp(18px,2vw,24px);
  grid-template-columns:1.32fr .88fr;
  align-items:center;
}

.loc.flip,
.svc.flip{
  grid-template-columns:.88fr 1.32fr;
}

@media (max-width:1000px){
  .loc,
  .loc.flip,
  .svc,
  .svc.flip{
    grid-template-columns:1fr;
  }
}

/* Media wrap */
.media-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  border-radius:0;
  overflow:hidden;
  background:#000;
  box-shadow:var(--shadow);
}

.media-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:brightness(.95) contrast(1.05);
}

.media-wrap .shade{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.48) 0%,rgba(0,0,0,0) 60%);
  pointer-events:none;
}

/* Alt başlık (city / title) */
.media-wrap .city,
.media-wrap .title{
  position:absolute;
  left:18px;
  bottom:14px;
  right:18px;
  color:#fff;
  font-size:clamp(26px,3.8vw,40px);
  line-height:1.05;
  text-shadow:0 2px 18px rgba(0,0,0,.55),0 1px 4px rgba(0,0,0,.35);
  letter-spacing:.01em;
}

/* Metin bloğu */
.copy{
  padding:6px;
}

.copy p{
  color:var(--muted);
  margin:.5rem 0;
}

/* Hizmet/şehir kartını komple tıklanabilir yapmak için */
.svc-link{
  display:block;
}

.svc-link article:hover{
  opacity:.92;
  transition:opacity .25s ease;
}

/* ===== SÜREÇ (PROCESS) BLOĞU ===== */

.process{
  padding:clamp(56px,7vw,96px) var(--pad);
  background:#fff;
}

.process .inner{
  width:min(var(--maxw),100%);
  margin:0 auto;
}

.process h2{
  font-size:var(--h2);
  margin:0 0 24px;
}

.steps{
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid #eee;
  border-radius:var(--radius);
  padding:clamp(12px,2vw,18px);
}

@media (max-width:1000px){
  .steps{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:640px){
  .steps{
    grid-template-columns:1fr;
  }
}

.step{
  background:var(--soft);
  border-radius:14px;
  padding:18px 16px;
  display:grid;
  gap:8px;
  align-content:start;
}

.step .n{
  font-weight:700;
  letter-spacing:.18em;
  font-size:12px;
  text-transform:uppercase;
  color:#555;
}

.step h3{
  margin:0;
  font-size:var(--h3);
}

.step p{
  margin:0;
  color:var(--muted);
}

/* Transportation için hafif farklı spacing */
body.transportation .services{
  padding-top:0;
}

body.transportation .process{
  padding:clamp(50px,6.4vw,84px) var(--pad);
}

/* ===== CTA BLOKLARI & FORM ===== */

.cta{
  padding:clamp(56px,8vw,110px) var(--pad);
  background:#fff;
}

body.transportation .cta{
  padding:clamp(50px,7vw,90px) var(--pad);
}

.cta .inner{
  width:min(860px,100%);
  margin:0 auto;
  text-align:center;
  padding:0 var(--pad);
}

.cta h2{
  font-size:var(--h2);
  margin:0 0 10px;
}

.cta-lead{
  font-size:var(--lead);
  max-width:60ch;
  margin-inline:auto;
  text-align:center;
  color:var(--muted);
  display:block;
}

/* Form grid */
.form{
  margin-top:18px;
  text-align:left;
  background:#fff;
  border:1px solid #eee;
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
  display:grid;
  gap:14px;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
}

.form > *{
  min-width:0;
}

.form textarea{
  grid-column:1/-1;
  min-height:140px;
}

@media (max-width:720px){
  .form{
    grid-template-columns:1fr;
  }
}

/* Form elemanları (plan/form bütünlüğü) */
input,
textarea,
select{
  width:100%;
  max-width:100%;
  padding:12px 14px;
  border:1px solid #ddd;
  border-radius:10px;
  font-size:16px;
  color:var(--ink);
  box-sizing:border-box;
  background:#fff;
}

input:focus,
textarea:focus,
select:focus{
  border-color:#bbb;
  outline:none;
  box-shadow:none;
}

/* Plan form utility class'leri (index’te kullanılıyor) */
.u-7fa56380{padding:20px;}
.u-990b1304{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.u-8f0e9474{padding:12px;border-radius:10px;border:1px solid:#ddd;}
.u-e0005366{grid-column:1/-1;padding:12px;border:1px solid:#ddd;border-radius:10px;}
.u-002535c2{margin-top:12px;}

/* Contact sayfası – "Prefer to reach us directly?" arası boşluk */
.cta-direct-note{
  margin-top:30px;
  opacity:.8;
}

/* Honeypot field */
.hp-field{
  position:absolute;
  left:-9999px;
  height:0;
  width:0;
  opacity:0;
}

/* Form içi center */
.form .center{
  grid-column:1/-1;
  text-align:center;
}

/* ===== FOOTER (TEK SİSTEM) ===== */

/* Genel footer (bütün sayfalar için) */
.footer{
  font-family:"PT Serif",Georgia,serif;
  padding:30px var(--pad);
  border-top:1px solid #222;
  background:#111318;
  color:#ffffff;
}

/* 4 satırlı, ortalanmış layout */
.footer-inner{
  width:min(var(--maxw),100%);
  margin:0 auto;
  display:flex;
  flex-direction:column;   /* 4 satır */
  align-items:center;
  text-align:center;
  gap:12px;
}

/* 1. satır – © ... */
.footer-copy{
  font-size:15px;
  opacity:.9;
  margin:0;
}

/* 2. + 3. satır – adres + telefon (alt alta, ortalı) */
.footer-contact-stacked{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size:15px;
  opacity:.9;
}

/* Icon + text pair */
.footer-item{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.footer-icon{
  width:16px;
  height:16px;
  opacity:.9;
}

/* 4. satır – sosyal ikonlar */
.footer-social{
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:center;
}

.footer a{
  text-decoration:none;
  color:#ffffff;
  font-size:15px;
  letter-spacing:.02em;
}

.footer a:hover{
  opacity:.9;
}

.social-link{
  opacity:.85;
}

.social-link:hover{
  opacity:1;
}

.social-icon{
  width:30px;
  height:30px;
}

/* Küçük copyright (gerekirse başka yerde kullanılırsa) */
.footer small{
  font-size:14px;
  font-weight:400;
  line-height:1.6;
}

/* ===== UTILITY ===== */

.center{text-align:center;}
.spacer{height:clamp(40px,7vh,80px);}

/* Responsive hero heading küçültme (index dâhil) */
@media (max-width:900px){
  h1{
    font-size:40px;
  }
}

/* Başlığın fotoğrafa uzaklığı + ortalanması (Signature Ways to Travel) */
.inner h2 {
   margin-top: 40px;
   text-align: center;
}

/* About & journal paragraf boyutu */
#about p, #journal-post{
  font-size:var(--p);
  line-height:1.7;
  color:var(--muted);
}

/* ===============================
   FOUNDERS — TEAM CARDS (UPDATED)
   =============================== */

.founders {
  padding-top: 3rem;
  padding-bottom: 4rem;
}

.founders-title {
  font-size: var(--h2);
  margin-bottom: 2rem;
  color: var(--tv-text);
}

.founders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
}

/* Card */
.founder-card {
  background: #fff;
  border-radius: 16px;
  padding: 1.8rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.founder-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* Photo at 70% width — centered */
.founder-photo img {
  width: 70%;
  display: block;
  margin: 0 auto 1.2rem auto;
  border-radius: 14px;
}

/* Name and role: no color difference */
.founder-name {
  margin: 0;
  font-size: 1.6rem;
  color: var(--tv-text);
  text-align: center;
}

.founder-role {
  margin-top: 0.3rem;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.3px;
  color: var(--tv-text); /* no ocean color */
  text-align: center;
}

/* Paragraphs match site’s default text style */
.founder-text {
  line-height:1.7;
  color:var(--muted);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.52) 0%,
    rgba(0,0,0,.30) 45%,
    rgba(0,0,0,.12) 100%
  );
  pointer-events:none;
}

.hero .hero-slideshow{ position:absolute; inset:0; z-index:0; }
.hero .content{ position:relative; z-index:2; }

/* === About: Brand Film (Vimeo embed + poster overlay) === */

.brand-film-section{
  padding-top: 0;   /* about sonrası çok boşluk olmasın */
}

.brand-film-centered{
  display:flex;
  justify-content:center;
}

.brand-film__frame{
  width: 100%;
  max-width: 1100px;                /* daha premium, daha geniş */
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background:#000;
  border: 1px solid rgba(184,138,43,.28); /* tv-gold hissi */
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
  position: relative;
}

/* Vimeo responsive 16:9 */
.brand-film__frame .vimeo-embed{
  position: relative;
  padding-top: 56.25%; /* 16:9 */
}

.brand-film__frame .vimeo-embed iframe{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  display:block;
}

/* Poster overlay (video bitince geri gelecek) */
.brand-film__frame .vimeo-poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  z-index:2;
}

.brand-film__frame .vimeo-poster img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Poster üstüne minimal play hissi (isteğe bağlı ama güzel durur) */
.brand-film__frame .vimeo-poster::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:68px;
  height:68px;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background:rgba(0,0,0,.42);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.25);
}

/* play üçgeni */
.brand-film__frame .vimeo-poster::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-42%,-50%);
  width:0;
  height:0;
  border-left:18px solid rgba(255,255,255,.92);
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  z-index:3;
}

.brand-film__frame .vimeo-poster:hover{
  opacity:.98;
}

.brand-film__frame .vimeo-poster.is-hidden{
  display:none;
}

/* Mobilde radius kalsın */
@media (max-width:640px){
  .brand-film__frame{
    border-radius:10px;
  }
}

/* =========================================================
   CARD VARYANTLARI — indexv2
   ========================================================= */

/* -- Cinematic overlay card (Experiences) -- */
.card-feature{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:3/4;
  background:#000;
  box-shadow:var(--shadow);
  display:block;
}

.card-feature img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.72);
  transition:transform .55s ease, filter .55s ease;
  display:block;
}

.card-feature:hover img{
  transform:scale(1.05);
  filter:brightness(.55);
}

.card-feature-body{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(20px,2.4vw,30px);
  background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,0) 55%);
}

.card-feature h3{
  color:#fff;
  margin:0 0 10px;
}

.card-feature p{
  color:rgba(255,255,255,.85);
  margin:0 0 14px;
  line-height:1.55;
}

.card-feature .link-plain{
  color:rgba(255,255,255,.9) !important;
}

/* -- Horizontal strip card (Concierge) -- */
.card-strip{
  display:grid;
  grid-template-columns:1.4fr 1fr;   /* image side wider; text side trimmed */
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow);
  align-items:center;                /* let the image's 16:9 height drive the row */
}

.card-strip .strip-img{
  width:100%;
  height:auto;
  aspect-ratio:16/9;                 /* show photos as 16:9 — no awkward cropping */
  object-fit:cover;
  display:block;
  align-self:stretch;
}

.card-strip .strip-body{
  padding:14px 18px;                 /* tighter text column without touching copy */
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
}

.card-strip h3{
  font-size:var(--h3);
  margin:0;
}

.card-strip p{
  color:var(--muted);
  margin:0;
}

/* -- Portrait destination card -- */
.card-destination{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:2/3;
  background:#000;
  box-shadow:var(--shadow);
  display:block;
}

.card-destination img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.72);
  transition:transform .55s ease, filter .55s ease;
  display:block;
}

.card-destination:hover img{
  transform:scale(1.05);
  filter:brightness(.55);
}

.card-dest-body{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(18px,2vw,26px);
  background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,0) 52%);
}

.card-destination h3{
  color:#fff;
  font-size:var(--h2);
  margin:0 0 8px;
  line-height:1;
}

.card-destination p{
  color:rgba(255,255,255,.82);
  margin:0 0 10px;
  line-height:1.45;
}

.card-destination .link-plain{
  color:rgba(255,255,255,.9) !important;
}

/* =====================================================================
   RESPONSIVE NAV — hamburger menu (narrow screens) + Experiences dropdown
   Pure CSS (checkbox hack). Collapse breakpoint: 860px.
   ===================================================================== */

.nav{ position:static; }
.nav-toggle-cb, .exp-toggle-cb{
  position:absolute;
  opacity:0;
  width:0; height:0;
  pointer-events:none;
}

/* Links wrapper (desktop: inline row) */
.nav-links{
  display:flex;
  gap:26px;
  justify-content:center;
  align-items:center;
}

/* Hamburger button — hidden on desktop */
.nav-burger{ display:none; }

/* Experiences dropdown group */
.nav-item.has-dropdown{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.nav-item .nav-parent{ display:inline-flex; align-items:center; }

/* Caret triangle */
.exp-caret{
  display:inline-block;
  width:0; height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid var(--ink);
  cursor:pointer;
  transition:transform .2s ease;
}

/* Dropdown panel (desktop) */
.nav-item .dropdown{
  display:none;
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  margin-top:8px;
  background:#fff;
  border:1px solid #eee;
  box-shadow:0 10px 28px rgba(0,0,0,.10);
  border-radius:8px;
  padding:8px 0;
  min-width:250px;
  flex-direction:column;
  z-index:60;
}
.nav-item .dropdown a{
  padding:11px 22px;
  white-space:nowrap;
  font-size:16px;
}
.nav-item .dropdown a:hover{ background:#f6f6f4; opacity:1; }

/* Desktop: reveal Experiences dropdown on hover */
@media (min-width:861px){
  .nav-item.has-dropdown:hover .dropdown{ display:flex; }
  /* Invisible bridge across the gap so the dropdown doesn't disappear
     when the cursor travels from "Experiences" down into the menu */
  .nav-item.has-dropdown::after{
    content:"";
    position:absolute;
    top:100%;
    left:-40px;
    right:-40px;
    height:18px;
  }
}

/* ---------- NARROW / MOBILE (<=860px): collapse to hamburger ---------- */
@media (max-width:860px){
  .nav-burger{
    display:inline-flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:34px; height:30px;
    padding:3px;
    cursor:pointer;
  }
  .nav-burger span{
    display:block;
    width:100%; height:2px;
    background:var(--ink);
    border-radius:2px;
    transition:transform .25s ease, opacity .2s ease;
  }
  /* Burger -> X when open */
  .nav-toggle-cb:checked ~ .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle-cb:checked ~ .nav-burger span:nth-child(2){ opacity:0; }
  .nav-toggle-cb:checked ~ .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* Menu panel drops below header */
  .nav-links{
    display:none;
    position:absolute;
    top:100%;
    left:0; right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:6px 0 10px;
    background:#fff;
    border-top:1px solid #eee;
    box-shadow:0 14px 28px rgba(0,0,0,.10);
    z-index:60;
  }
  .nav-toggle-cb:checked ~ .nav-links{ display:flex; }

  .nav-links > a{
    padding:14px 28px;
    text-align:left;
  }

  /* Experiences row in mobile menu */
  .nav-item.has-dropdown{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:0;
  }
  .nav-item .nav-parent{ flex:1; padding:14px 28px; }
  .exp-caret{
    margin-right:24px;
    border-top-width:7px;
    border-left-width:6px;
    border-right-width:6px;
    padding:6px;
  }

  /* Mobile dropdown = inline accordion */
  .nav-item .dropdown{
    position:static;
    transform:none;
    margin-top:0;
    width:100%;
    display:none;
    background:#faf9f7;
    border:none;
    border-radius:0;
    box-shadow:none;
    padding:0;
  }
  .exp-toggle-cb:checked ~ .dropdown{ display:flex; }
  .exp-toggle-cb:checked ~ .exp-caret{ transform:rotate(180deg); }
  .nav-item .dropdown a{ padding:12px 28px 12px 44px; }

  /* Keep language switcher tidy alongside burger */
  .lang-switcher{
    position:static;
    margin-top:6px;
  }
}

/* =====================================================================
   HEADER LAYOUT OVERRIDE — left logo + page-centered nav
   (appended last so it wins over earlier header rules)
   ===================================================================== */
.header .inner{
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:16px;
}
.brand{
  flex:1 1 0;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  margin:0;
}
.brand .logo-icon{
  height:150px;
}
.nav{
  flex:0 0 auto;
  margin:0;
}
.lang-switcher{
  flex:1 1 0;
  position:static;
  right:auto;
  bottom:auto;
  display:flex;
  justify-content:flex-end;
  margin:0;
}

@media (max-width:860px){
  .header .inner{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:10px 0;
  }
  .brand{ flex:1 1 auto; order:1; }
  .brand .logo-icon{ height:110px; }
  .lang-switcher{
    flex:0 0 auto;
    order:2;
    position:static;
    justify-content:flex-end;
    margin:0 12px 0 0;
  }
  .nav{ flex:0 0 auto; order:3; }
}

/* =====================================================================
   FORM CONFIRMATION MODAL — luxury popup (AJAX form responses)
   ===================================================================== */
.tv-modal-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(15,26,34,.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}
.tv-modal-overlay.is-open{
  opacity:1;
  visibility:visible;
}

.tv-modal{
  position:relative;
  width:min(440px,100%);
  background:var(--tv-cream,#f8f9fa);
  color:var(--ink);
  border:1px solid rgba(184,138,43,.35);
  border-radius:16px;
  padding:48px 40px 40px;
  text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.30);
  transform:translateY(14px) scale(.97);
  opacity:0;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
}
.tv-modal-overlay.is-open .tv-modal{
  transform:translateY(0) scale(1);
  opacity:1;
}

/* Gold emblem / accent */
.tv-modal-emblem{
  width:54px;
  height:54px;
  margin:0 auto 22px;
  border-radius:999px;
  border:1px solid var(--tv-gold,#b88a2b);
  position:relative;
}
.tv-modal-emblem::after{
  content:"";
  position:absolute;
  left:50%;
  top:52%;
  width:16px;
  height:9px;
  border-left:2px solid var(--tv-gold,#b88a2b);
  border-bottom:2px solid var(--tv-gold,#b88a2b);
  transform:translate(-50%,-60%) rotate(-45deg);
}
.tv-modal-overlay.is-error .tv-modal-emblem{
  border-color:#a3322b;
}
.tv-modal-overlay.is-error .tv-modal-emblem::after{
  width:2px;
  height:20px;
  border:none;
  background:#a3322b;
  border-radius:2px;
  box-shadow:0 0 0 0 transparent;
  transform:translate(-50%,-50%);
}
.tv-modal-overlay.is-error .tv-modal-emblem::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:9px;
  width:2px;
  height:2px;
  background:#a3322b;
  border-radius:999px;
  transform:translateX(-50%);
}

.tv-modal-title{
  font-family:"PT Serif",Georgia,serif;
  font-size:26px;
  letter-spacing:.02em;
  margin:0 0 12px;
  color:var(--tv-ocean-900,#0a3e58);
}
.tv-modal-text{
  font-size:17px;
  line-height:1.6;
  color:var(--muted);
  margin:0 auto 28px;
  max-width:34ch;
}

.tv-modal .tv-modal-ok{
  min-width:140px;
  padding:11px 26px;
}

.tv-modal-close{
  position:absolute;
  top:14px;
  right:16px;
  width:34px;
  height:34px;
  border:none;
  background:transparent;
  color:var(--muted);
  font-size:26px;
  line-height:1;
  cursor:pointer;
  border-radius:999px;
  transition:background .2s ease, color .2s ease;
}
.tv-modal-close:hover{
  background:rgba(0,0,0,.06);
  color:var(--ink);
}

@media (max-width:480px){
  .tv-modal{ padding:40px 24px 32px; }
  .tv-modal-title{ font-size:23px; }
}


/* =========================================================
   v2 DESIGN — merged from styleglobal-test.css
   Rules below override earlier ones via cascade.
   Index-only card languages are scoped by section ID.
   ========================================================= */
/* =========================================================
   Throne Voyages — TEST stylesheet (v2)
   Original palette restored. Real visual variety in cards:
   four sections speak four distinct visual languages.
   Standalone CSS for index-test.html only.
   ========================================================= */

/* ---------- TOKENS (original Throne palette) ---------- */
:root{
  --paper:       #ffffff;
  --cream:       #f8f9fa;
  --cream-deep:  #eef1f4;
  --ink:         #0f1a22;
  --ink-soft:    #2a3743;
  --muted:       #6c7a86;
  --line:        #e3e7eb;
  --line-soft:   #eef0f3;
  --sea:         #0e5475;
  --sea-deep:    #0a3e58;
  --sea-glass:   rgba(10,62,88,.88);
  --gold:        #b88a2b;
  --gold-bright: #d6ad57;
  --gold-soft:   rgba(184,138,43,.18);

  /* Type scale */
  --display: clamp(44px, 7vw, 92px);
  --h1:      clamp(38px, 5.5vw, 64px);
  --h2:      clamp(30px, 4vw, 50px);
  --h3:      clamp(22px, 2.6vw, 28px);
  --lead:    clamp(19px, 2vw, 22px);
  --p:       clamp(17px, 1.5vw, 19px);

  --maxw: clamp(1100px, 88vw, 1400px);
  --section-pad-y: clamp(80px, 11vw, 160px);
  --gap: clamp(28px, 4vw, 56px);
  --radius: 4px;
  --shadow-1: 0 18px 48px rgba(15,26,34,.10);
  --shadow-2: 0 28px 72px rgba(15,26,34,.16);
}

/* ---------- RESET / BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:90px; }
html,body{
  margin:0; padding:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Cormorant Garamond",Georgia,serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }

/* ---------- TYPOGRAPHY ---------- */
h1,h2,h3,h4{
  font-family:"PT Serif",Georgia,serif;
  font-weight:400;
  color:var(--ink);
  line-height:1.12;
  letter-spacing:-.005em;
  margin:0 0 .6em;
}
h1{ font-size:var(--h1); }
h2{ font-size:var(--h2); }
h3{ font-size:var(--h3); font-weight:600; }

p{
  font-size:var(--p);
  line-height:1.75;
  margin:0 0 1em;
  color:var(--ink-soft);
}

a{
  color:var(--sea);
  text-decoration:none;
  transition:color .25s ease, border-color .25s ease, opacity .25s ease;
}
a:hover{ color:var(--gold); }

.link-plain{
  color:inherit !important;
  text-decoration:none !important;
  font-family:inherit !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  letter-spacing:inherit !important;
  text-transform:inherit !important;
}
p > a.link-plain{
  color:inherit !important;
  border-bottom:none !important;
  padding-bottom:0;
}
p > a.link-plain:hover{
  color:var(--gold) !important;
}

.lead, .section-intro{
  font-size:var(--lead);
  line-height:1.75;
  color:var(--ink-soft);
  max-width:62ch;
}

/* ---------- CONTAINER ---------- */
.container{
  width:min(var(--maxw), 92%);
  margin-inline:auto;
}
.center{ text-align:center; }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 28px;
  border:1px solid var(--gold);
  background:transparent;
  color:var(--ink);
  font-family:"PT Serif",Georgia,serif;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  text-decoration:none;
  transition:background .3s ease, color .3s ease, transform .3s ease, border-color .3s ease;
  position:relative;
}
.btn::after{
  content:"→";
  font-size:14px;
  transform:translateX(0);
  transition:transform .3s ease;
}
.btn:hover{
  background:var(--gold);
  color:#fff;
}
.btn:hover::after{ transform:translateX(4px); }

.btn.dark{
  background:var(--sea);
  border-color:var(--sea);
  color:#fff;
}
.btn.dark:hover{
  background:var(--gold);
  border-color:var(--gold);
}

.hero .btn{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.7);
  color:#fff;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.hero .btn:hover{
  background:#fff;
  color:var(--ink);
  border-color:#fff;
}

/* ---------- HEADER ---------- */
.header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header .inner{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:16px;
  position:relative;
}
.brand{
  display:flex;
  flex:1 1 0;
  align-items:center;
  margin:0;
}
.brand .logo-icon{
  height:140px;
  width:auto;
  display:block;
}

.nav{ position:relative; flex:0 0 auto; margin:0; display:flex; align-items:center; }
.nav-toggle-cb,.exp-toggle-cb{
  position:absolute; opacity:0; width:0; height:0; pointer-events:none;
}
.nav-links{
  display:flex;
  gap:32px;
  align-items:center;
  justify-content:center;
}
.nav-burger{ display:none; }

.nav a,
.nav-parent{
  font-family:"PT Serif",Georgia,serif;
  color:var(--ink);
  font-size:13px;
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-decoration:none;
}
.nav a:hover,
.nav-parent:hover{ color:var(--gold); }

.nav-item.has-dropdown{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.exp-caret{
  display:inline-block;
  width:0; height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid var(--ink);
  cursor:pointer;
  transition:transform .25s ease, border-top-color .25s ease;
}
.nav-item.has-dropdown:hover .exp-caret{
  border-top-color:var(--gold);
  transform:rotate(180deg);
}
.nav-item .dropdown{
  display:none;
  position:absolute;
  top:100%; left:50%;
  transform:translateX(-50%);
  margin-top:14px;
  background:var(--paper);
  border:1px solid var(--line);
  border-top:2px solid var(--gold);
  border-radius:2px;
  box-shadow:var(--shadow-2);
  padding:10px 0;
  min-width:270px;
  flex-direction:column;
  z-index:60;
}
.nav-item .dropdown a{
  padding:11px 24px;
  font-size:12px;
  letter-spacing:.16em;
  white-space:nowrap;
  color:var(--ink);
}
.nav-item .dropdown a:hover{
  background:var(--cream);
  color:var(--gold);
}
@media (min-width:861px){
  .nav-item.has-dropdown:hover .dropdown{ display:flex; }
  .nav-item.has-dropdown::after{
    content:""; position:absolute;
    top:100%; left:-40px; right:-40px; height:22px;
  }
}

.lang-switcher{
  flex:1 1 0;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  position:static;
}
.lang-link{
  font-family:"PT Serif",Georgia,serif;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}
.lang-link.lang-active{ color:var(--ink); }
.lang-link:hover{ color:var(--gold); }
.lang-sep{ color:var(--muted); }

@media (max-width:860px){
  .header .inner{ padding:10px 0; gap:8px; }
  .brand{ flex:1 1 auto; order:1; }
  .brand .logo-icon{ height:90px; }
  .lang-switcher{ flex:0 0 auto; order:2; margin:0 12px 0 0; }
  .nav{ flex:0 0 auto; order:3; }
  .nav-burger{
    display:inline-flex; flex-direction:column; justify-content:center;
    gap:5px; width:32px; height:28px; padding:3px; cursor:pointer;
  }
  .nav-burger span{
    display:block; width:100%; height:2px;
    background:var(--ink); border-radius:2px;
    transition:transform .25s ease, opacity .2s ease;
  }
  .nav-toggle-cb:checked ~ .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle-cb:checked ~ .nav-burger span:nth-child(2){ opacity:0; }
  .nav-toggle-cb:checked ~ .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .nav-links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    padding:8px 0 14px;
    background:var(--paper);
    border-top:1px solid var(--line);
    box-shadow:var(--shadow-2);
    z-index:60;
  }
  .nav-toggle-cb:checked ~ .nav-links{ display:flex; }
  .nav-links > a{ padding:14px 28px; text-align:left; }
  .nav-item.has-dropdown{ display:flex; flex-wrap:wrap; align-items:center; gap:0; }
  .nav-item .nav-parent{ flex:1; padding:14px 28px; }
  .exp-caret{ margin-right:24px; border-top-width:6px; border-left-width:5px; border-right-width:5px; }
  .nav-item .dropdown{
    position:static; transform:none; margin-top:0; width:100%;
    display:none;
    background:var(--cream);
    border:none; border-radius:0; box-shadow:none; padding:0;
  }
  .exp-toggle-cb:checked ~ .dropdown{ display:flex; }
  .exp-toggle-cb:checked ~ .exp-caret{ transform:rotate(180deg); }
  .nav-item .dropdown a{ padding:12px 28px 12px 44px; }
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  overflow:hidden;
  background:#0a0e12;
}
.hero-slideshow{ position:absolute; inset:0; }
.hero-slideshow .slide{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.6s ease;
  transform:scale(1.04);
}
.hero-slideshow .slide.active{
  opacity:1;
  animation: hero-pan 16s ease-in-out infinite alternate;
}
@keyframes hero-pan{
  0%   { transform:scale(1.02) translate3d(0,0,0); }
  100% { transform:scale(1.10) translate3d(-2.5%,-1.5%,0); }
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,14,18,.20) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 50%, rgba(10,14,18,.82) 100%);
  pointer-events:none;
}
.hero::before{
  content:"";
  position:absolute;
  bottom:24px; left:50%;
  width:1px; height:46px;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 100%);
  animation:scroll-cue 2.4s ease-in-out infinite;
  z-index:3;
}
@keyframes scroll-cue{
  0%,100%{ opacity:.3; transform:translateX(-50%) translateY(0); }
  50%    { opacity:1;  transform:translateX(-50%) translateY(10px); }
}
.hero .content{
  position:relative;
  padding: 0 0 clamp(60px, 8vw, 120px) 0;
  color:#fff;
  max-width:820px;
  z-index:2;
  animation:hero-rise 1.2s .15s both cubic-bezier(.2,.7,.2,1);
}
@keyframes hero-rise{
  from{ opacity:0; transform:translateY(24px); }
  to  { opacity:1; transform:translateY(0); }
}
.hero .content::before{
  content:"Bespoke · Luxury · Travel";
  display:block;
  font-family:"PT Serif",Georgia,serif;
  font-style:italic;
  font-size:13px;
  letter-spacing:.34em;
  color:var(--gold-bright);
  margin-bottom:24px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(214,173,87,.5);
  width:fit-content;
  text-transform:uppercase;
}
.hero h1{
  color:#fff;
  font-size:var(--display);
  font-weight:400;
  letter-spacing:-.01em;
  line-height:1.04;
  margin:0 0 28px;
  text-shadow:0 2px 22px rgba(0,0,0,.35);
}
.hero .lead{
  color:rgba(255,255,255,.92);
  font-size:var(--lead);
  max-width:60ch;
  margin:0 0 36px;
}
.hero .lead a.link-plain{
  color:inherit !important;
  border-bottom:none !important;
}
.hero .lead a.link-plain:hover{
  color:var(--gold-bright) !important;
}

/* ---------- SECTIONS ---------- */
.section{
  padding:var(--section-pad-y) 0;
  position:relative;
}
.section.white{ background:var(--paper); }
.section.light{ background:var(--cream); }

.section > .container > h2{
  font-size:var(--h2);
  max-width:24ch;
  margin:0 0 24px;
  color:var(--sea-deep);
}
.section > .container > .section-intro,
.section > .container > p{
  max-width:62ch;
}

/* Chapter markers — removed per request */
section#transportation > .container > h2::before,
section#experiences   > .container > h2::before,
section#concierge     > .container > h2::before,
section#destinations  > .container > h2::before,
section#about         > .container.split > div > h2::before,
section#contact       > .container > h2::before{
  content:none;
  display:none;
  border-bottom:none;
  width:fit-content;
}

/* ---------- GRIDS (defaults) ---------- */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gap);
  margin-top:clamp(36px, 5vw, 64px);
}

/* =========================================================
   CARD LANGUAGE #1 — TRANSPORTATION (editorial posters)
   Image-top portrait cards with a gold number tab.
   ========================================================= */
#transportation > .container > .grid-3 > .card{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}
#transportation > .container > .grid-3 > .card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-2);
  border-color:var(--gold);
}
#transportation > .container > .grid-3 > .card > img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  transition:transform .9s ease;
}
#transportation > .container > .grid-3 > .card:hover > img{ transform:scale(1.06); }
#transportation > .container > .grid-3 > .card > h3{
  margin:26px 30px 12px;
  color:var(--sea-deep);
}
#transportation > .container > .grid-3 > .card > p{
  margin:0 30px 30px;
  color:var(--ink-soft);
  font-size:17px;
  line-height:1.75;
}
#transportation > .container > .grid-3 > .card p a.link-plain{
  display:inline-block;
  color:var(--gold) !important;
  font-weight:600;
  letter-spacing:.04em;
  border-bottom:1px solid var(--gold);
  padding-bottom:2px;
  font-size:15px;
}
#transportation > .container > .grid-3 > .card p a.link-plain:hover{
  color:var(--sea) !important;
  border-bottom-color:var(--sea);
}

/* =========================================================
   CARD LANGUAGE #2 — EXPERIENCES (immersive overlay)
   Full-image portrait cards. Title visible at bottom by
   default. Hover deepens scrim and reveals description.
   ========================================================= */
#experiences > .container > .grid-3 > .card-feature{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  border-radius:var(--radius);
  background:#0a0e12;
  isolation:isolate;
  transition:transform .5s ease, box-shadow .5s ease;
}
#experiences > .container > .grid-3 > .card-feature:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-2);
}
#experiences > .container > .grid-3 > .card-feature > img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1s ease, filter .5s ease;
  filter:brightness(.92);
}
#experiences > .container > .grid-3 > .card-feature:hover > img{
  transform:scale(1.07);
  filter:brightness(.78);
}
#experiences > .container > .grid-3 > .card-feature::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,62,88,.05) 0%, rgba(10,62,88,.35) 45%, rgba(10,62,88,.92) 100%);
  transition:background .5s ease;
  pointer-events:none;
  z-index:1;
}
#experiences > .container > .grid-3 > .card-feature:hover::after{
  background:linear-gradient(180deg, rgba(10,62,88,.15) 0%, rgba(10,62,88,.50) 40%, rgba(10,62,88,.96) 100%);
}

#experiences .card-feature-body{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:26px 32px 30px;
  color:#fff;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:14px;
}
#experiences .card-feature-body h3{
  color:#fff;
  margin:0;
  font-size:26px;
  letter-spacing:.02em;
  position:relative;
  padding-bottom:14px;
}
#experiences .card-feature-body h3::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:40px; height:1px;
  background:var(--gold-bright);
  transition:width .5s ease;
}
#experiences > .container > .grid-3 > .card-feature:hover .card-feature-body h3::after{
  width:90px;
}
#experiences .card-feature-body p{
  color:rgba(255,255,255,.92);
  font-size:16px;
  line-height:1.65;
  margin:0;
  text-shadow:0 1px 8px rgba(0,0,0,.25);
}
#experiences .card-feature-body > a.link-plain{
  color:var(--gold-bright) !important;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  border-bottom:1px solid var(--gold-bright);
  padding-bottom:2px;
  display:inline-block;
  align-self:flex-start;
  transition:color .25s ease, border-color .25s ease;
}
#experiences .card-feature-body > a.link-plain:hover{
  color:#fff !important;
  border-bottom-color:#fff;
}

/* =========================================================
   CARD LANGUAGE #3 — CONCIERGE (full-width zigzag rows)
   Each card spans the whole container, image alternates
   left/right, with thin gold rule and diamond ornament.
   ========================================================= */
.grid-concierge{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin-top:clamp(40px, 6vw, 80px);
}
.grid-concierge .card-strip{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  align-items:center;
  gap:clamp(28px, 5vw, 80px);
  background:transparent;
  border:none;
  border-top:1px solid var(--gold);
  border-radius:0;
  padding:clamp(40px, 6vw, 72px) 0;
  position:relative;
  overflow:visible;
  transition:none;
}
.grid-concierge .card-strip:last-child{
  border-bottom:1px solid var(--gold);
}
.grid-concierge .card-strip:hover{
  transform:none;
  box-shadow:none;
}
/* diamond ornament floating on the top rule */
.grid-concierge .card-strip::before{
  content:"◆";
  position:absolute;
  top:-9px; left:50%;
  transform:translateX(-50%);
  background:var(--paper);
  color:var(--gold);
  padding:0 14px;
  font-size:12px;
  letter-spacing:.2em;
}
.grid-concierge .card-strip:first-child{ border-top-color:transparent; }
.grid-concierge .card-strip:first-child::before{ display:none; }

/* alternate image position */
.grid-concierge .card-strip:nth-child(even){
  grid-template-areas:"body img";
}
.grid-concierge .card-strip:nth-child(even) .strip-img{ grid-area:img; }
.grid-concierge .card-strip:nth-child(even) .strip-body{ grid-area:body; text-align:right; }
.grid-concierge .card-strip:nth-child(odd){
  grid-template-areas:"img body";
}
.grid-concierge .card-strip:nth-child(odd) .strip-img{ grid-area:img; }
.grid-concierge .card-strip:nth-child(odd) .strip-body{ grid-area:body; }

.grid-concierge .card-strip .strip-img{
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  transition:transform .9s ease;
}
.grid-concierge .card-strip:hover .strip-img{ transform:scale(1.03); }

.grid-concierge .card-strip .strip-body{
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.grid-concierge .card-strip h3{
  margin:0;
  font-size:clamp(26px, 3vw, 34px);
  color:var(--sea-deep);
  font-family:"PT Serif",Georgia,serif;
  font-weight:400;
}
.grid-concierge .card-strip h3 a.link-plain{ color:inherit !important; }
.grid-concierge .card-strip p{
  margin:0;
  font-size:17px;
  line-height:1.75;
  color:var(--ink-soft);
  max-width:48ch;
}
.grid-concierge .card-strip:nth-child(even) p{ margin-left:auto; }
.grid-concierge .card-strip > .strip-body > a.link-plain{
  align-self:flex-start;
  color:var(--gold) !important;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  border-bottom:1px solid var(--gold);
  padding-bottom:3px;
  margin-top:6px;
  transition:color .25s ease, border-color .25s ease, letter-spacing .25s ease;
}
.grid-concierge .card-strip:nth-child(even) > .strip-body > a.link-plain{
  align-self:flex-end;
}
.grid-concierge .card-strip > .strip-body > a.link-plain:hover{
  color:var(--sea) !important;
  border-bottom-color:var(--sea);
  letter-spacing:.22em;
}

/* =========================================================
   CARD LANGUAGE #4 — DESTINATIONS (mosaic poster wall)
   Masonry-style staggered grid via column-count.
   Different aspect ratios per nth give a poster-wall feel.
   ========================================================= */
#destinations > .container > .grid-3{
  display:block;
  column-count:3;
  column-gap:var(--gap);
}
#destinations > .container > .grid-3 > .card-destination{
  display:inline-block;
  width:100%;
  margin:0 0 var(--gap);
  break-inside:avoid;
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  background:#0a0e12;
  box-shadow:var(--shadow-1);
  transition:transform .5s ease, box-shadow .5s ease;
}
/* 4-cycle pattern so columns get a different mix of ratios */
#destinations > .container > .grid-3 > .card-destination:nth-child(4n+1){ aspect-ratio:3/4; }   /* tall portrait */
#destinations > .container > .grid-3 > .card-destination:nth-child(4n+2){ aspect-ratio:1/1; }   /* square      */
#destinations > .container > .grid-3 > .card-destination:nth-child(4n+3){ aspect-ratio:4/5; }   /* medium      */
#destinations > .container > .grid-3 > .card-destination:nth-child(4n+4){ aspect-ratio:5/4; }   /* landscape   */
#destinations > .container > .grid-3 > .card-destination:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-2);
}
#destinations .card-destination > img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.2s ease;
}
#destinations .card-destination:hover > img{ transform:scale(1.08); }
#destinations .card-destination::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.78) 100%);
  pointer-events:none;
}
#destinations .card-dest-body{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:22px 26px;
  color:#fff;
  z-index:2;
}
#destinations .card-dest-body h3{
  color:#fff;
  margin:0 0 6px;
  font-family:"PT Serif",Georgia,serif;
  font-size:clamp(20px, 2.4vw, 26px);
  letter-spacing:.04em;
  position:relative;
  padding-bottom:8px;
}
#destinations .card-dest-body h3::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:34px; height:1px;
  background:var(--gold-bright);
}
#destinations .card-dest-body h3 a.link-plain{ color:#fff !important; }
#destinations .card-dest-body p{
  color:rgba(255,255,255,.85);
  font-size:14px;
  margin:10px 0 6px;
  line-height:1.55;
}
#destinations .card-dest-body a.link-plain:not(h3 a){
  color:var(--gold-bright) !important;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(214,173,87,.55);
  padding-bottom:2px;
  display:inline-block;
}
#destinations .card-dest-body a.link-plain:not(h3 a):hover{
  color:#fff !important;
  border-bottom-color:#fff;
}

/* ---------- ABOUT SPLIT ---------- */
.container.split{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:clamp(40px, 6vw, 96px);
  align-items:center;
}
.container.split > div p{
  font-size:var(--lead);
}
.container.split > div p a.link-plain{
  color:inherit !important;
  border-bottom:none !important;
  padding-bottom:0;
  font-weight:inherit;
}
.container.split > div p a.link-plain:hover{
  color:var(--gold) !important;
}
.container.split > img{
  width:100%;
  height:100%;
  max-height:580px;
  object-fit:cover;
  border-radius:var(--radius);
  box-shadow:var(--shadow-2);
}

/* ---------- FORM ---------- */
.form{
  display:flex;
  flex-direction:column;
  gap:0;
  max-width:680px;
  margin:48px auto 0;
}
.form .hp-field{ position:absolute; left:-9999px; opacity:0; width:1px; height:1px; }
.form input,
.form textarea{
  width:100%;
  padding:18px 4px;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:18px;
  color:var(--ink);
  transition:border-color .25s ease;
  outline:none;
  resize:vertical;
}
.form input::placeholder,
.form textarea::placeholder{
  color:var(--muted);
  font-style:italic;
  opacity:1;
}
.form input:focus,
.form textarea:focus{ border-bottom-color:var(--gold); }
.form .center{ margin-top:40px; }
.form button.btn{ padding:16px 36px; font-size:13px; }

/* ---------- FOOTER ---------- */
.footer{
  background:var(--ink);
  color:rgba(255,255,255,.85);
  padding:64px 0 36px;
  position:relative;
}
.footer::before{
  content:""; position:absolute;
  top:0; left:50%; transform:translateX(-50%);
  width:60px; height:1px;
  background:var(--gold);
}
.footer-inner{
  display:flex; flex-direction:column;
  align-items:center; gap:28px;
  text-align:center;
}
.footer-copy{
  margin:0;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.7);
}
.footer-contact-stacked{
  display:flex; gap:20px;
  flex-wrap:wrap; justify-content:center;
}
.footer-item{
  display:flex; align-items:center; gap:10px;
  font-size:14px;
  color:rgba(255,255,255,.85);
}
.footer-icon{
  width:18px; height:18px;
  filter:none;
}
/* Swap PNG content with elegant line-art SVG (gold-bright) */
.footer-item img.footer-icon[src*="address"]{
  content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6ad57' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-7-6.5-7-12a7 7 0 1 1 14 0c0 5.5-7 12-7 12z'/><circle cx='12' cy='10' r='2.5'/></svg>");
}
.footer-item img.footer-icon[src*="phone"]{
  content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6ad57' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
}
.footer-social{ display:flex; gap:16px; }
.social-link{
  display:inline-flex;
  width:42px; height:42px;
  align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  transition:border-color .25s ease, background .25s ease;
}
.social-link:hover{
  border-color:var(--gold);
  background:rgba(184,138,43,.12);
}
.social-icon{
  width:18px; height:18px;
  filter:none;
  transition:transform .3s ease;
}
.social-link:hover .social-icon{ transform:scale(1.08); }

.social-link img.social-icon[src*="instagram"]{
  content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6ad57' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='5'/><circle cx='12' cy='12' r='4'/><circle cx='17.5' cy='6.5' r='.9' fill='%23d6ad57' stroke='none'/></svg>");
}
.social-link img.social-icon[src*="linkedin"]{
  content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d6ad57'><path d='M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.95v5.66H9.36V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 0 1-2.06-2.06c0-1.14.93-2.06 2.06-2.06s2.06.93 2.06 2.06c0 1.14-.93 2.06-2.06 2.06zM7.12 20.45H3.56V9h3.56v11.45z'/></svg>");
}

/* ---------- MODAL ---------- */
.tv-modal-overlay{
  position:fixed; inset:0;
  z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(10,14,18,.6);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}
.tv-modal-overlay.is-open{ opacity:1; visibility:visible; }
.tv-modal{
  position:relative;
  width:min(440px,100%);
  background:var(--paper);
  border:1px solid var(--line);
  border-top:3px solid var(--gold);
  border-radius:var(--radius);
  padding:48px 40px 40px;
  text-align:center;
  box-shadow:0 40px 100px rgba(0,0,0,.35);
  transform:translateY(14px) scale(.97);
  opacity:0;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
}
.tv-modal-overlay.is-open .tv-modal{ transform:translateY(0) scale(1); opacity:1; }
.tv-modal-emblem{
  width:54px; height:54px;
  margin:0 auto 22px;
  border-radius:999px;
  border:1px solid var(--gold);
  position:relative;
}
.tv-modal-emblem::after{
  content:""; position:absolute;
  left:50%; top:52%;
  width:16px; height:9px;
  border-left:2px solid var(--gold);
  border-bottom:2px solid var(--gold);
  transform:translate(-50%,-60%) rotate(-45deg);
}
.tv-modal-overlay.is-error .tv-modal-emblem{ border-color:#a3322b; }
.tv-modal-overlay.is-error .tv-modal-emblem::after{
  width:2px; height:20px; border:none;
  background:#a3322b; border-radius:2px;
  transform:translate(-50%,-50%);
}
.tv-modal-overlay.is-error .tv-modal-emblem::before{
  content:""; position:absolute;
  left:50%; bottom:9px;
  width:2px; height:2px;
  background:#a3322b;
  border-radius:999px;
  transform:translateX(-50%);
}
.tv-modal-title{
  font-family:"PT Serif",Georgia,serif;
  font-size:26px;
  margin:0 0 12px;
  color:var(--sea-deep);
}
.tv-modal-text{
  font-size:16px; line-height:1.65;
  color:var(--muted);
  margin:0 auto 28px;
  max-width:34ch;
}
.tv-modal .tv-modal-ok{
  min-width:140px;
  padding:13px 28px;
  font-size:13px;
}
.tv-modal-close{
  position:absolute; top:14px; right:16px;
  width:34px; height:34px;
  border:none; background:transparent;
  color:var(--muted);
  font-size:26px; line-height:1;
  cursor:pointer; border-radius:999px;
  transition:background .2s ease, color .2s ease;
}
.tv-modal-close:hover{ background:rgba(0,0,0,.06); color:var(--ink); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  #destinations > .container > .grid-3{ column-count:2; }
}
@media (max-width:1000px){
  .grid-3{ grid-template-columns:repeat(2, 1fr); }
  .container.split{ grid-template-columns:1fr; gap:40px; }
  .container.split > img{ max-height:420px; }
}
@media (max-width:720px){
  .grid-3{ grid-template-columns:1fr; }
  #destinations > .container > .grid-3{ column-count:1; }
  .hero{ min-height:84vh; }
  .hero .content{ padding-bottom:80px; }
  .hero h1{ font-size:clamp(34px, 8.5vw, 52px); }

  .grid-concierge .card-strip{
    grid-template-columns:1fr !important;
    grid-template-areas:"img" "body" !important;
    gap:24px;
    padding:36px 0;
  }
  .grid-concierge .card-strip .strip-img{ grid-area:img; aspect-ratio:16/9; }
  .grid-concierge .card-strip .strip-body{
    grid-area:body;
    text-align:left !important;
  }
  .grid-concierge .card-strip:nth-child(even) p{ margin-left:0; }
  .grid-concierge .card-strip:nth-child(even) > .strip-body > a.link-plain{ align-self:flex-start; }
}
@media (max-width:480px){
  .tv-modal{ padding:40px 24px 32px; }
  .tv-modal-title{ font-size:22px; }
  .footer-contact-stacked{ gap:18px; flex-direction:column; }
}

/* =========================================================
   v2 INNER PAGES — editorial restyle for shared components
   (.svc / .process / .locations / .cta / about / contact /
    bespoke|celebrations|culinary grids). Appended last so
    cascade wins over older rules.
   ========================================================= */

/* ---------- Generic helpers ---------- */
/* .tagline is a wrapper around the intro h2 + p on inner pages.
   Keep it neutral so its children render at full editorial size. */
.tagline{
  display:block;
  color:inherit;
  font:inherit;
  letter-spacing:normal;
  text-transform:none;
  margin:0;
}
.spacer{ display:none; }

/* ---------- SERVICES (.svc) — zigzag editorial rows ---------- */
.services{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin-top:clamp(40px, 6vw, 80px);
}
.svc, a.svc-link > .svc{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  align-items:center;
  gap:clamp(28px, 5vw, 80px);
  padding:clamp(40px, 6vw, 72px) 0;
  border-top:1px solid var(--gold);
  position:relative;
  background:transparent;
}
.services > a.svc-link:first-child .svc,
.services > .svc:first-child{ border-top:none; padding-top:0; }
.svc::before{
  content:"\25C6";
  position:absolute;
  top:-9px; left:50%;
  transform:translateX(-50%);
  background:var(--paper);
  color:var(--gold);
  padding:0 14px;
  font-size:12px;
  letter-spacing:.2em;
}
.services > a.svc-link:first-child .svc::before,
.services > .svc:first-child::before{ display:none; }

/* alternate sides via .flip */
.svc:not(.flip){ grid-template-areas:"media copy"; }
.svc:not(.flip) .media, .svc:not(.flip) .media-wrap{ grid-area:media; }
.svc:not(.flip) .copy{ grid-area:copy; }
.svc.flip{ grid-template-areas:"copy media"; }
.svc.flip .media, .svc.flip .media-wrap{ grid-area:media; }
.svc.flip .copy{ grid-area:copy; text-align:right; }

.svc .media, .svc .media-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
}
.svc .media img, .svc .media-wrap img,
.svc .media > picture > img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1s ease;
}
.svc:hover .media img,
.svc:hover .media-wrap img{ transform:scale(1.04); }

.svc .copy{
  display:flex; flex-direction:column;
  gap:14px;
}
.svc .copy .title,
.svc .title,
.svc h3.title{
  font-family:"PT Serif",Georgia,serif;
  font-size:clamp(26px, 3vw, 34px);
  font-weight:400;
  color:var(--sea-deep);
  margin:0;
  line-height:1.15;
}
.svc .copy p,
.svc p{
  margin:0;
  color:var(--ink-soft);
  font-size:17px;
  line-height:1.75;
  max-width:48ch;
}
.svc.flip .copy p{ margin-left:auto; }
.svc .copy a.link-plain{
  align-self:flex-start;
  color:var(--gold) !important;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  border-bottom:1px solid var(--gold);
  padding-bottom:3px;
  margin-top:6px;
  transition:color .25s, border-color .25s, letter-spacing .25s;
}
.svc.flip .copy a.link-plain{ align-self:flex-end; }
.svc .copy a.link-plain:hover{
  color:var(--sea) !important;
  border-bottom-color:var(--sea);
  letter-spacing:.22em;
}

/* svc-link wrapper makes the whole strip clickable */
a.svc-link{
  display:block;
  color:inherit !important;
  text-decoration:none !important;
}

/* ---------- PROCESS / STEPS ---------- */
.process{
  background:var(--cream);
}
.process .center{ text-align:center; }
.process > .container > h2.center{
  margin:0 auto 14px;
  color:var(--sea-deep);
}
.steps{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--gap);
  margin-top:clamp(40px, 5vw, 64px);
}
.step{
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:32px 28px;
  text-align:center;
  position:relative;
  transition:transform .4s, box-shadow .4s, border-color .4s;
}
.step:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-1);
  border-color:var(--gold);
}
.step .n{
  display:block;
  font-family:"PT Serif",Georgia,serif;
  font-style:italic;
  font-size:38px;
  color:var(--gold);
  line-height:1;
  margin-bottom:14px;
}
.step h3{
  color:var(--sea-deep);
  margin:0 0 10px;
  font-size:19px;
  font-weight:600;
}
.step p{
  color:var(--muted);
  font-size:15px;
  line-height:1.65;
  margin:0;
}

/* ---------- LOCATIONS (.locations .loc .city .shade) ---------- */
.locations{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(56px, 7vw, 96px);
  margin-top:clamp(40px, 6vw, 80px);
}
.loc{
  position:relative;
  display:grid;
  grid-template-columns:1.25fr 1fr;
  align-items:center;
  gap:clamp(32px, 5vw, 72px);
}
.loc:not(.flip){ grid-template-areas:"media copy"; }
.loc.flip{ grid-template-areas:"copy media"; }
.loc > .media-wrap{ grid-area:media; }
.loc > .copy, .loc > div:not(.media-wrap):not(.media){ grid-area:copy; }
.loc.flip > .copy, .loc.flip > div:not(.media-wrap):not(.media){ text-align:right; }

.loc .media-wrap{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:4/3;
  box-shadow:var(--shadow-2);
}
.loc .media-wrap img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.1s ease;
}
.loc:hover .media-wrap img{ transform:scale(1.05); }
.loc .media-wrap .shade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
  z-index:1;
}
.loc .city{
  position:absolute;
  left:26px; bottom:22px;
  color:#fff;
  font-family:"PT Serif",Georgia,serif;
  font-size:clamp(26px, 3vw, 38px);
  margin:0;
  font-weight:400;
  letter-spacing:.04em;
  z-index:2;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}
.loc .copy h3{
  color:var(--sea-deep);
  font-size:clamp(22px, 2.6vw, 28px);
  margin:0 0 12px;
}
.loc .copy p{
  margin:0 0 10px;
  color:var(--ink-soft);
  line-height:1.75;
  max-width:52ch;
}
.loc.flip .copy p{ margin-left:auto; }
.loc .copy a.link-plain{
  display:inline-block;
  color:var(--gold) !important;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  border-bottom:1px solid var(--gold);
  padding-bottom:3px;
  margin-top:6px;
}
.loc .copy a.link-plain:hover{
  color:var(--sea) !important;
  border-bottom-color:var(--sea);
}

/* ---------- CTA SECTION ---------- */
.cta{
  background:var(--cream);
  text-align:center;
  padding:var(--section-pad-y) 0;
}
.cta h2{
  color:var(--sea-deep);
  margin:0 auto 18px;
  max-width:22ch;
}
.cta-lead{
  font-size:var(--lead);
  color:var(--ink-soft);
  max-width:62ch;
  margin:0 auto 32px;
}
.cta-row{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:6px;
}

/* ---------- ABOUT — brand-film + founders ---------- */
.brand-film-section{
  padding:clamp(60px, 8vw, 120px) 0;
  background:var(--paper);
}
.brand-film-centered{
  display:flex;
  justify-content:center;
}
.brand-film__frame{
  position:relative;
  width:min(960px, 92%);
  aspect-ratio:16/9;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-2);
  border:1px solid var(--line);
}
.brand-film__frame .vimeo-embed,
.brand-film__frame .vimeo-embed iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
.brand-film__frame .vimeo-poster{
  position:absolute; inset:0;
  cursor:pointer;
  transition:opacity .4s ease;
  z-index:2;
}
.brand-film__frame .vimeo-poster img{
  width:100%; height:100%;
  object-fit:cover;
}
.brand-film__frame .vimeo-poster::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.45) 100%);
}
.brand-film__frame .vimeo-poster::after{
  content:"\25B6";
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:84px; height:84px;
  border:1px solid var(--gold-bright);
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-bright);
  font-size:24px;
  padding-left:6px;
  background:rgba(0,0,0,.25);
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.brand-film__frame .vimeo-poster:hover::after{
  background:var(--gold-bright);
  color:#fff;
  transform:translate(-50%,-50%) scale(1.06);
}
.brand-film__frame .vimeo-poster.is-hidden{ opacity:0; pointer-events:none; }

.founders{
  padding:clamp(60px, 8vw, 120px) 0;
  background:var(--cream);
}
.founders-title{
  text-align:center;
  font-size:var(--h2);
  color:var(--sea-deep);
  margin:0 auto clamp(36px, 5vw, 56px);
  max-width:30ch;
}
.founders-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:var(--gap);
}
.founder-card{
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:36px 28px 32px;
  text-align:center;
  transition:transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}
.founder-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-2);
  border-color:var(--gold);
}
.founder-photo{
  width:148px; height:148px;
  border-radius:999px;
  object-fit:cover;
  margin:0 auto 22px;
  border:none;
  padding:0;
  background:transparent;
  overflow:hidden;
  display:block;
}
.founder-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:999px;
  display:block;
}
.founder-name{
  font-family:"PT Serif",Georgia,serif;
  font-size:22px;
  color:var(--sea-deep);
  margin:0 0 4px;
  font-weight:400;
}
.founder-role{
  font-style:italic;
  color:var(--gold);
  font-family:"PT Serif",Georgia,serif;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin:0 0 18px;
}
.founder-text{
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.7;
  margin:0;
}

/* ---------- CONTACT page extras ---------- */
.contact-extra{
  text-align:center;
  margin-top:56px;
  padding-top:40px;
  border-top:1px solid var(--line);
}
.cta-direct-note{
  font-family:"PT Serif",Georgia,serif;
  font-style:italic;
  color:var(--gold);
  font-size:12px;
  letter-spacing:.34em;
  text-transform:uppercase;
  margin:0 0 20px;
}
.contact-extra p{
  color:var(--ink-soft);
  font-size:16px;
  line-height:1.75;
  margin:0 0 8px;
}
.contact-extra a{ color:var(--sea); }
.contact-extra a:hover{ color:var(--gold); }
.contact-extra hr{
  border:0;
  height:1px;
  background:var(--line);
  margin:28px auto;
  max-width:200px;
}

.map-wrapper{
  margin-top:72px;
}
.map-wrapper h2{
  text-align:center;
  color:var(--sea-deep);
  margin:0 0 32px;
}
.map-wrapper h3{
  color:var(--sea);
  font-family:"PT Serif",Georgia,serif;
  font-size:18px;
  font-style:italic;
  margin:36px 0 16px;
  letter-spacing:.04em;
}
.map-wrapper iframe{
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow-1);
}

/* ---------- bespoke / culinary / celebrations — grid3 .cards .block .thumb ---------- */
.grid3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gap);
  margin-top:clamp(36px, 5vw, 60px);
}
/* .cards is a section wrapper — keep it as a normal block,
   with its .inner centered using the standard container width */
section.cards{
  display:block;
  padding:var(--section-pad-y, clamp(80px, 11vw, 160px)) 0;
}
section.cards > .inner{
  width:min(var(--maxw), 92%);
  margin-inline:auto;
}
.grid3 > .block,
.cards > .block{
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}
.grid3 > .block:hover,
.cards > .block:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-2);
  border-color:var(--gold);
}
.grid3 > .block .thumb,
.grid3 > .block > img,
.cards > .block .thumb,
.cards > .block > img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform .9s ease;
}
.grid3 > .block:hover .thumb,
.grid3 > .block:hover > img,
.cards > .block:hover .thumb,
.cards > .block:hover > img{ transform:scale(1.05); }
.grid3 > .block h3,
.cards > .block h3{
  margin:24px 26px 10px;
  color:var(--sea-deep);
  font-size:22px;
}
.grid3 > .block p,
.cards > .block p{
  margin:0 26px 22px;
  color:var(--ink-soft);
  font-size:16px;
  line-height:1.7;
}
.grid3 > .block a.link-plain,
.cards > .block a.link-plain{
  margin:0 26px 24px;
  align-self:flex-start;
  color:var(--gold) !important;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  border-bottom:1px solid var(--gold);
  padding-bottom:3px;
}
.grid3 > .block a.link-plain:hover,
.cards > .block a.link-plain:hover{
  color:var(--sea) !important;
  border-bottom-color:var(--sea);
}

/* ---------- RESPONSIVE for inner pages ---------- */
@media (max-width:900px){
  .svc, .loc{
    grid-template-columns:1fr !important;
    grid-template-areas:"media" "copy" !important;
    text-align:left !important;
    gap:24px;
    padding:36px 0;
  }
  .svc .copy, .loc .copy{ text-align:left !important; }
  .svc.flip .copy p, .loc.flip .copy p{ margin-left:0 !important; }
  .svc.flip .copy a.link-plain, .loc.flip .copy a.link-plain{ align-self:flex-start !important; }
  .steps{ grid-template-columns:repeat(2, 1fr); }
  .grid3, .cards{ grid-template-columns:repeat(2, 1fr); }
  .founders-grid{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .steps{ grid-template-columns:1fr; }
  .grid3, .cards{ grid-template-columns:1fr; }
  .brand-film__frame .vimeo-poster::after{
    width:64px; height:64px; font-size:20px;
  }
}

/* =========================================================
   v2 INNER PAGES — hero variant: single <img class="media"> +
   <div class="container"> (no .content wrapper). Mirror index's
   bottom-anchored layout so "Plan your..." sits above the image
   bottom with breathing room.
   ========================================================= */
.hero > img.media{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
  animation: hero-pan 16s ease-in-out infinite alternate;
}
.hero > .container:not(.content){
  position:relative;
  z-index:2;
  color:#fff;
  padding: 0 0 clamp(60px, 8vw, 120px) 0;
  animation: hero-rise 1.2s .15s both cubic-bezier(.2,.7,.2,1);
}
.hero > .container:not(.content)::before{
  content:"Bespoke \00B7 Luxury \00B7 Travel";
  display:block;
  font-family:"PT Serif",Georgia,serif;
  font-style:italic;
  font-size:13px;
  letter-spacing:.34em;
  color:var(--gold-bright);
  margin-bottom:24px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(214,173,87,.5);
  width:fit-content;
  text-transform:uppercase;
}
.hero > .container:not(.content) h1{
  color:#fff;
  font-size:var(--display);
  font-weight:400;
  letter-spacing:-.01em;
  line-height:1.04;
  margin:0 0 28px;
  max-width:22ch;
  text-shadow:0 2px 22px rgba(0,0,0,.35);
}
.hero > .container:not(.content) .lead{
  color:rgba(255,255,255,.92);
  font-size:var(--lead);
  max-width:60ch;
  margin:0 0 36px;
}
.hero > .container:not(.content) .lead a.link-plain{
  color:inherit !important;
  border-bottom:none !important;
}
.hero > .container:not(.content) .lead a.link-plain:hover{
  color:var(--gold-bright) !important;
}
.hero > .container:not(.content) .btn{
  /* uses .hero .btn rules already (glass overlay) */
}

@media (max-width:720px){
  .hero > .container:not(.content){ padding-bottom:80px; }
  .hero > .container:not(.content) h1{ font-size:clamp(34px, 8.5vw, 52px); }
}

/* =========================================================
   v2 FIX — keep header logo at correct aspect ratio.
   The wordmark logo is ~1.5:1; with fixed 140px height it
   needs ~210px width. On narrow containers (e.g.
   body.transportation overrides --maxw), max-width:100%
   from the base img reset was squishing it. Prevent the
   brand flex item from shrinking below content size and
   release the logo from max-width:100%.
   ========================================================= */
.brand{
  flex-shrink:0;
  min-width:0;
}
.brand .logo-icon{
  height:140px;
  width:auto;
  max-width:none;
}
@media (max-width:860px){
  .brand .logo-icon{ height:90px; }
}

/* (former body.transportation --maxw scoping removed —
   the body.transportation token block was deleted at top
   so transport now follows the same metrics as every page.) */

/* =========================================================
   v2 STANDARDIZE — inner-page intro headings & paragraphs
   match index's .section > .container > h2 + .section-intro
   look (PT Serif, --h2 size, sea-deep color, --lead body,
   ink-soft color, 62ch max-width). Covers:
   - transportation     .block > .inner > h2/p
   - experiences/concierge  .services > .inner > .tagline > h2/p
   - destinations       .locations > .inner > .tagline > h2/p
   - journal/contact    .section > .container > h1 + p/.lead
   ========================================================= */
section.block > .inner > h2,
section.cards > .inner > h2,
section.services > .inner > .tagline > h2,
section.services > .inner > h2,
section.locations > .inner > .tagline > h2,
section.locations > .inner > h2,
section.section > .container > h1,
section.section.white > .container > h1,
section.section.light > .container > h1,
section.section > .container.split > div > h2,
section.section.white > .container.split > div > h2,
section.section.light > .container.split > div > h2{
  font-family:"PT Serif",Georgia,serif !important;
  font-size:var(--h2) !important;
  color:var(--sea-deep) !important;
  font-weight:400 !important;
  line-height:1.12 !important;
  letter-spacing:-.005em !important;
  text-align:left !important;
  max-width:24ch;
  margin:0 0 24px !important;
}

section.block > .inner > p,
section.cards > .inner > p,
section.services > .inner > .tagline > p,
section.locations > .inner > .tagline > p,
section.section > .container > h1 + p,
section.section > .container > h1 + .lead,
section.section > .container > p.lead,
section.section > .container.split > div > p,
section.section.white > .container.split > div > p,
section.section.light > .container.split > div > p{
  font-family:"Cormorant Garamond",Georgia,serif !important;
  font-size:var(--lead) !important;
  line-height:1.75 !important;
  color:var(--ink-soft) !important;
  max-width:62ch !important;
  margin:0 0 1em !important;
  text-align:left !important;
}

/* paragraph-link helpers in these intros — inherit, hover gold */
section.block > .inner > p a.link-plain,
section.services > .inner > .tagline > p a.link-plain,
section.locations > .inner > .tagline > p a.link-plain,
section.section > .container > h1 + p a.link-plain,
section.section > .container > h1 + .lead a.link-plain,
section.section > .container > p.lead a.link-plain,
section.section > .container.split > div > p a.link-plain{
  color:inherit !important;
  border-bottom:none !important;
}
section.block > .inner > p a.link-plain:hover,
section.services > .inner > .tagline > p a.link-plain:hover,
section.locations > .inner > .tagline > p a.link-plain:hover,
section.section > .container > h1 + p a.link-plain:hover,
section.section > .container > h1 + .lead a.link-plain:hover,
section.section > .container > p.lead a.link-plain:hover,
section.section > .container.split > div > p a.link-plain:hover{
  color:var(--gold) !important;
}

/* When .tagline is a wrapper, remove the older padding too */
.tagline{
  padding:0;
  text-align:left;
}

/* Index concierge cards — faint background so they stay visible
   and the hover doesn't blend them into the section background */
.grid-concierge .card-strip{
  background:var(--paper) !important;
  box-shadow:var(--shadow) !important;
}

/* Cards keep the same var(--shadow) on hover too (no drop) */
.grid-concierge .card-strip:hover{
  box-shadow:var(--shadow) !important;
}

/* =========================================================
   Transportation / Experiences / Concierge / Destinations:
   pure white page background, no frame. Tight intro spacing,
   diamond ornament cuts the gold rule on white.
   ========================================================= */
body.transportation,
body.experiences,
body.concierge,
body.destinations{
  background:var(--paper) !important;
}
body.transportation .services,
body.experiences .services,
body.concierge .services,
body.destinations .locations{
  background:transparent;
  padding:0;
  margin:0 auto clamp(24px, 4vw, 56px);
  width:min(var(--maxw), 92%);
  position:relative;
}
body.transportation section.block,
body.experiences section.block,
body.concierge section.block,
body.destinations section.block{
  padding-bottom:clamp(24px, 3vw, 40px) !important;
  background:transparent;
}
body.transportation .grid-concierge .card-strip::before,
body.experiences .grid-concierge .card-strip::before,
body.concierge .grid-concierge .card-strip::before,
body.destinations .grid-concierge .card-strip::before{
  background:var(--paper);
}


/* =========================================================
   Journal listing cards — clone the index Private Jets
   (.card) look. journal markup wraps img+h3 inside an <a>
   so selectors use descendant combinators where needed.
   ========================================================= */
body.journal .grid-3 > .card{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:0;
  gap:0;
  box-shadow:var(--shadow);
  transition:transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}
body.journal .grid-3 > .card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-2);
  border-color:var(--gold);
}
body.journal .grid-3 > .card > a{
  display:block;
  color:inherit;
  text-decoration:none;
}
body.journal .grid-3 > .card img{
  width:100%;
  height:clamp(220px, 22vw, 280px);
  object-fit:cover;
  display:block;
  transition:transform .9s ease;
}
body.journal .grid-3 > .card:hover img{
  transform:scale(1.06);
}
body.journal .grid-3 > .card h3{
  margin:26px 30px 12px;
  color:var(--sea-deep);
  font-family:"PT Serif",Georgia,serif;
  font-weight:700;
}
body.journal .grid-3 > .card > p{
  margin:0 30px 30px;
  color:var(--ink-soft);
  font-size:17px;
  line-height:1.75;
}
body.journal .grid-3 > .card p a.link-plain{
  display:inline-block;
  color:var(--gold) !important;
  font-weight:600;
  letter-spacing:.04em;
  border-bottom:1px solid var(--gold);
  padding-bottom:2px;
  font-size:15px;
  margin-top:2px;
}
body.journal .grid-3 > .card p a.link-plain:hover{
  color:var(--sea) !important;
  border-bottom-color:var(--sea);
}

/* =========================================================
   About pages — keep h1/h3 typography in line with the
   site's standard intro h2 and h3 (same font, color, weight,
   line-height). h2 and paragraphs are already covered by
   earlier .container.split > div selectors.
   ========================================================= */
section.section > .container.split > div > h1,
section.section.white > .container.split > div > h1,
section.section.light > .container.split > div > h1{
  font-family:"PT Serif",Georgia,serif !important;
  font-size:var(--h2) !important;
  color:var(--sea-deep) !important;
  font-weight:400 !important;
  line-height:1.12 !important;
  letter-spacing:-.005em !important;
  text-align:left !important;
  max-width:24ch;
  margin:0 0 24px !important;
}

section.section > .container.split > div > h3,
section.section.white > .container.split > div > h3,
section.section.light > .container.split > div > h3{
  font-family:"PT Serif",Georgia,serif !important;
  font-size:var(--h3) !important;
  color:var(--sea-deep) !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  letter-spacing:.01em !important;
  margin:1.4em 0 .6em !important;
}

/* =========================================================
   Contact page — bring .contact-extra and .map-wrapper into
   the same font/size/color standard as the rest of the site.
   ========================================================= */
.cta-direct-note{
  font-family:"Cormorant Garamond",Georgia,serif !important;
  font-style:italic !important;
  color:var(--ink-soft) !important;
  font-size:var(--lead) !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  line-height:1.75 !important;
  margin:0 0 22px !important;
}
.contact-extra p{
  font-family:"Cormorant Garamond",Georgia,serif !important;
  font-size:var(--p) !important;
  line-height:1.75 !important;
  color:var(--ink-soft) !important;
  margin:0 0 8px !important;
}
.contact-extra p strong{
  color:var(--ink) !important;
  font-weight:600 !important;
}
.contact-extra a{
  color:var(--sea) !important;
  text-decoration:none !important;
}
.contact-extra a:hover{
  color:var(--gold) !important;
}

.map-wrapper h2{
  font-family:"PT Serif",Georgia,serif !important;
  font-size:var(--h2) !important;
  color:var(--sea-deep) !important;
  font-weight:400 !important;
  line-height:1.12 !important;
  letter-spacing:-.005em !important;
  text-align:center !important;
  margin:0 auto 32px !important;
}
.map-wrapper h3{
  font-family:"PT Serif",Georgia,serif !important;
  font-size:var(--h3) !important;
  color:var(--sea-deep) !important;
  font-weight:700 !important;
  font-style:normal !important;
  letter-spacing:.01em !important;
  line-height:1.2 !important;
  margin:36px 0 16px !important;
}

/* =========================================================
   bespoke / culinary / celebrations — make the .grid3 > .card
   blocks look identical to the journal cards (white frame,
   line-soft border, var(--shadow), gold hover lift, PT Serif
   sea-deep h3, ink-soft body paragraph).
   ========================================================= */
.grid3 > .card{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:0;
  gap:0;
  box-shadow:var(--shadow);
  transition:transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}
.grid3 > .card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-2);
  border-color:var(--gold);
}
.grid3 > .card > img{
  width:100%;
  height:clamp(220px, 22vw, 280px);
  object-fit:cover;
  display:block;
  transition:transform .9s ease;
}
.grid3 > .card:hover > img{
  transform:scale(1.06);
}
.grid3 > .card > h3{
  margin:26px 30px 12px;
  color:var(--sea-deep);
  font-family:"PT Serif",Georgia,serif;
  font-weight:700;
  font-size:var(--h3);
  line-height:1.2;
}
.grid3 > .card > p{
  margin:0 30px 30px;
  color:var(--ink-soft);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:17px;
  line-height:1.75;
}
.grid3 > .card > p a.link-plain{
  color:inherit !important;
  border-bottom:none !important;
  padding-bottom:0 !important;
}
.grid3 > .card > p a.link-plain:hover{
  color:var(--gold) !important;
}

/* =========================================================
   Footer credit — "Designed by Alice's Digital Works"
   (belirgin: prominent text + larger logo + clear hover)
   ========================================================= */
.footer-credit{
  width:100%;
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.18);
  text-align:center;
}
.footer-credit a{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:rgba(255,255,255,.78);
  font-family:"PT Serif",Georgia,serif;
  font-style:italic;
  font-size:14px;
  letter-spacing:.02em;
  text-transform:none;
  text-decoration:none;
  transition:color .25s ease;
}
.footer-credit a:hover{ color:#fff; }
.footer-credit img{
  height:42px;
  width:auto;
  display:block;
  filter:invert(1) opacity(.85);
  transition:filter .25s ease, transform .25s ease;
}
.footer-credit a:hover img{
  filter:invert(1) opacity(1);
  transform:translateY(-1px);
}
@media (max-width:480px){
  .footer-credit a{ font-size:12px; gap:10px; }
  .footer-credit img{ height:36px; }
}

/* =========================================================
   Footer layout — put .footer-credit on the SAME row as
   .footer-social, anchored to the right edge of the inner
   container. Top rows (copy, contact) stay centered.
   ========================================================= */
.footer-inner{
  display:grid !important;
  grid-template-columns:1fr auto 1fr !important;
  align-items:center;
  column-gap:24px;
  row-gap:28px;
  text-align:center;
}
.footer-inner > .footer-copy,
.footer-inner > .footer-contact-stacked{
  grid-column:1 / -1;
  justify-self:center;
}
.footer-inner > .footer-social{
  grid-column:2;
  justify-self:center;
}
.footer-inner > .footer-credit{
  grid-column:3;
  justify-self:end;
  width:auto;
  margin-top:0;
  padding-top:0;
  border-top:none;
  text-align:right;
}

/* Slogan — kendi satırı, tam ortada, kapanış imzası */
.footer-inner > .footer-slogan{
  grid-column:1 / -1;
  justify-self:center;
  text-align:center;
  width:100%;
  order:99;   /* force to bottom row (after social+credit row) */
}

@media (max-width:720px){
  .footer-inner{
    grid-template-columns:1fr !important;
  }
  .footer-inner > .footer-social,
  .footer-inner > .footer-credit{
    grid-column:1;
    justify-self:center;
  }
  .footer-inner > .footer-credit{
    text-align:center;
    margin-top:14px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.18);
    width:100%;
  }
}

/* =========================================================
   Journal article extras — comparison table + pull-quote
   Used by long-form posts like seven-star-hotel-turkey.
   ========================================================= */
.article-table{
  width:100%;
  border-collapse:collapse;
  margin:24px 0 28px;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:16px;
  line-height:1.6;
}
.article-table th,
.article-table td{
  text-align:left;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.article-table thead th{
  font-family:"PT Serif",Georgia,serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--sea-deep);
  border-bottom:1px solid var(--gold);
}
.article-table tbody tr:last-child td{
  border-bottom:none;
}

.article-quote{
  margin:32px 0;
  padding:14px 22px;
  border-left:2px solid var(--gold);
  font-family:"PT Serif",Georgia,serif;
  font-style:italic;
  font-size:clamp(18px, 2vw, 22px);
  line-height:1.55;
  color:var(--sea-deep);
}


/* =====================================================================
   MOBILE NAV PANEL FIX — anchor menu to header, full-width readable
   (Appended last so it wins the cascade over earlier nav rules)
   ===================================================================== */
@media (max-width:860px){
  /* Anchor the mobile menu panel to the header, not to the small .nav */
  .header{ position:relative; }
  .header .inner{ position:relative; }
  .nav{ position:static !important; }

  .nav-links{
    position:absolute !important;
    top:100% !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:100vw;
    box-sizing:border-box;
    background:var(--paper, #ffffff);
    border-top:1px solid var(--line, #e9e6df);
    box-shadow:0 14px 28px rgba(0,0,0,.10);
    max-height:calc(100vh - 110px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    z-index:60;
    padding:6px 0 14px;
  }

  /* Every menu row — full-width, readable */
  .nav-links > a,
  .nav-item .nav-parent{
    display:block;
    width:100%;
    box-sizing:border-box;
    padding:16px 24px;
    font-size:14px;
    letter-spacing:.20em;
    line-height:1.35;
    border-bottom:1px solid rgba(0,0,0,.05);
  }
  .nav-links > a:last-child{ border-bottom:none; }

  /* Has-dropdown row container */
  .nav-item.has-dropdown{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:0;
    border-bottom:1px solid rgba(0,0,0,.05);
  }
  .nav-item .nav-parent{ flex:1 1 auto; border-bottom:none; }
  .exp-caret{
    flex:0 0 auto;
    margin:0 22px 0 0;
    padding:8px;
    border-top-width:6px;
    border-left-width:5px;
    border-right-width:5px;
  }

  /* Inline accordion sub-dropdown — inside page, not floating */
  .nav-item .dropdown{
    position:static !important;
    transform:none !important;
    width:100%;
    background:var(--cream, #faf9f7);
    border:none;
    border-radius:0;
    box-shadow:none;
    padding:0;
    margin:0;
    min-width:0;
  }
  .nav-item .dropdown a{
    display:block;
    padding:13px 24px 13px 44px;
    font-size:12.5px;
    letter-spacing:.16em;
    white-space:normal;     /* allow wrap so nothing escapes */
    word-break:break-word;
    border-bottom:1px solid rgba(0,0,0,.04);
  }
  .nav-item .dropdown a:last-child{ border-bottom:none; }
}

/* Very small phones — tighten paddings, shrink letter-spacing a notch */
@media (max-width:380px){
  .nav-links > a,
  .nav-item .nav-parent{
    padding:14px 18px;
    font-size:13px;
    letter-spacing:.16em;
  }
  .exp-caret{ margin-right:14px; }
  .nav-item .dropdown a{
    padding:12px 18px 12px 32px;
    font-size:12px;
    letter-spacing:.14em;
  }
}


/* =====================================================================
   JOURNAL ARTICLE LAYOUT — image on top, full-width text below
   Overrides the side-by-side .container.split for journal posts only.
   ===================================================================== */
body.journal #journal-post .container.split{
  display:block;          /* drop the 2-column grid */
  /* inherit .container's width:min(var(--maxw), 92%) — same frame as header */
  margin:0 auto;
  gap:0;
}

/* Hero image — pulled to the top, full container width */
body.journal #journal-post .container.split > a{
  display:block;
  margin:0 0 48px 0;
}
body.journal #journal-post .container.split > a img{
  display:block;
  width:100%;
  height:auto;
  max-height:560px;
  object-fit:cover;
  border-radius:var(--radius);
  box-shadow:var(--shadow-2);
}

/* Move the image visually above the text via flex column-reverse.
   HTML source has <div>text</div> THEN <a><img></a>, so column-reverse
   renders image on top, text below — desktop AND mobile. */
body.journal #journal-post .container.split{
  display:flex !important;
  flex-direction:column-reverse !important;
}
body.journal #journal-post .container.split > a{
  display:block;
  margin:0 0 48px 0;       /* gap below image (above text after reversal) */
}
body.journal #journal-post .container.split > div{
  width:100%;
}

/* Text now spans the full reading frame — comfortable typographic rhythm */
body.journal #journal-post .container.split > div{
  max-width:100%;
}
body.journal #journal-post .container.split > div p,
body.journal #journal-post .container.split > div li{
  font-size:clamp(16px, 1.15vw, 18px);
  line-height:1.78;
}
body.journal #journal-post .container.split > div h1{
  font-size:clamp(34px, 4.2vw, 56px);
  line-height:1.15;
  margin-top:0;
}
body.journal #journal-post .container.split > div h2{
  font-size:clamp(22px, 2.2vw, 28px);
  font-style:italic;
  font-family:"Cormorant Garamond", Georgia, serif;
  color:var(--muted, #666);
  font-weight:400;
  letter-spacing:0;
  margin:8px 0 36px 0;
  text-transform:none;
}
body.journal #journal-post .container.split > div h3{
  font-size:clamp(22px, 2vw, 28px);
  margin:48px 0 16px;
}
body.journal #journal-post .container.split > div h4{
  font-size:clamp(17px, 1.4vw, 20px);
  margin:28px 0 10px;
}
body.journal #journal-post .container.split > div .article-table,
body.journal #journal-post .container.split > div .article-quote{
  margin-left:0;
  margin-right:0;
  width:100%;
}

/* Tighten on tablets/phones — full-bleed text */
@media (max-width:860px){
  body.journal #journal-post .container.split{
    max-width:100%;
  }
  body.journal #journal-post .container.split > a{
    margin-bottom:32px;
  }
  body.journal #journal-post .container.split > a img{
    max-height:380px;
    border-radius:6px;
  }
  body.journal #journal-post .container.split > div p,
  body.journal #journal-post .container.split > div li{
    font-size:16px;
    line-height:1.72;
  }
}


/* =====================================================================
   JOURNAL ARTICLE — beat the 62ch / 24ch caps so text fills the frame
   (Earlier rules use !important; we must outweigh them.)
   ===================================================================== */
body.journal section.section#journal-post > .container.split > div > h1,
body.journal section.section#journal-post > .container.split > div > h2,
body.journal section.section#journal-post > .container.split > div > p,
body.journal section.section.white#journal-post > .container.split > div > h2,
body.journal section.section.light#journal-post > .container.split > div > h2,
body.journal section.section.white#journal-post > .container.split > div > p,
body.journal section.section.light#journal-post > .container.split > div > p{
  max-width:100% !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  text-align:left !important;
}

/* Tables and blockquotes also full-width inside the frame */
body.journal #journal-post .container.split > div > .article-table,
body.journal #journal-post .container.split > div > .article-quote,
body.journal #journal-post .container.split > div > h3,
body.journal #journal-post .container.split > div > h4{
  max-width:100% !important;
  width:100%;
}


/* =====================================================================
   MOBILE HERO OVERLAY — soft darken so hero text stays readable when
   light areas of background images fall behind it on portrait screens.
   Desktop hero is untouched.
   ===================================================================== */
@media (max-width:860px){
  .hero::after{
    background:
      linear-gradient(
        180deg,
        rgba(10,14,18,0.10) 0%,    /* very light tint up top, keeps drama */
        rgba(10,14,18,0.05) 32%,   /* near-clear mid — photo breathes */
        rgba(10,14,18,0.55) 62%,   /* gradient starts darkening */
        rgba(10,14,18,0.88) 88%,   /* deep shade right where text sits */
        rgba(6,9,12,0.94) 100%     /* anchor bottom for the CTA row */
      ) !important;
  }
}

/* Very narrow phones — push the dark zone slightly higher since the
   text block is proportionally larger relative to viewport. */
@media (max-width:480px){
  .hero::after{
    background:
      linear-gradient(
        180deg,
        rgba(10,14,18,0.12) 0%,
        rgba(10,14,18,0.06) 28%,
        rgba(10,14,18,0.62) 56%,
        rgba(10,14,18,0.90) 84%,
        rgba(6,9,12,0.96) 100%
      ) !important;
  }
}


/* =====================================================================
   BRAND SLOGAN — hero + footer treatment
   "Europe, expertly navigated. Turkey, truly mastered."
   ===================================================================== */

/* Hero slogan — italic Cormorant, gold hairline separator, sits under H1 */
.hero .hero-slogan{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-style:italic;
  font-weight:400;
  color:rgba(255,255,255,0.92);
  font-size:clamp(18px, 2.1vw, 26px);
  letter-spacing:0.03em;
  line-height:1.35;
  margin:16px 0 24px;
  padding-top:14px;
  max-width:640px;
  border-top:1px solid rgba(212,175,55,0.55);   /* gold hairline */
  text-shadow:0 2px 12px rgba(0,0,0,0.35);
}

@media (max-width:860px){
  .hero .hero-slogan{
    font-size:15px;
    margin:12px 0 18px;
    padding-top:12px;
    max-width:100%;
  }
}

/* Footer slogan — sits BELOW the social icons row as a closing signature.
   Centered like the social row above it, italic Cormorant, gold, no borders. */
.footer .footer-slogan{
  display:block;
  width:100%;
  text-align:center;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-style:italic;
  font-weight:400;
  font-size:14px;
  letter-spacing:0.14em;
  color:var(--gold, #b78a3b);
  text-transform:none;
  margin:14px auto 6px;
  padding:0;
  border:none;
}

@media (max-width:860px){
  .footer .footer-slogan{
    font-size:12.5px;
    letter-spacing:0.10em;
    margin:12px auto 4px;
    padding:0 12px;
  }
}