/* ==========================================================================
   SOLVIVE TRAVEL — Design System
   Luxury small-group & private journeys across Southeast Asia
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Jost:wght@300;400;500;600&display=swap');

:root{
  /* ---- Color tokens ---- */
  --teal-950:#0A3733;
  --teal-900:#0C433D;
  --teal-800:#0F5C57;
  --teal-700:#146F68;
  --teal-600:#1B857C;
  --teal-100:#DCEAE6;
  --cream:#FAF6EC;
  --cream-dim:#F3ECDD;
  --sand:#EDE3CE;
  --coral:#DE7A46;
  --coral-dim:#F0AE85;
  --gold:#B7924F;
  --ink:#182420;
  --ink-soft:#3E4A45;
  --line:rgba(24,36,32,0.12);
  --line-on-dark:rgba(255,255,255,0.16);

  /* ---- Type ---- */
  --f-display:'Fraunces', 'Iowan Old Style', serif;
  --f-body:'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* ---- Motion ---- */
  --ease:cubic-bezier(.22,.68,.24,1);
  --dur:.7s;

  /* ---- Layout ---- */
  --maxw:1280px;
  --gutter:clamp(20px, 5vw, 72px);
  --radius:2px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

body{
  margin:0;
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--cream);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
input,textarea,select{font-family:inherit;font-size:1rem;}

h1,h2,h3,h4{
  font-family:var(--f-display);
  color:var(--teal-950);
  margin:0 0 .5em;
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2.6rem, 5.4vw, 4.8rem); font-weight:400;}
h2{font-size:clamp(2rem, 3.6vw, 3rem);}
h3{font-size:clamp(1.35rem, 2vw, 1.75rem);}
p{margin:0 0 1.2em;}

.italic{font-style:italic; font-weight:400;}

/* ---- Utility layout ---- */
.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter);}
.section{padding:clamp(64px,10vw,80px) 0;}
.section-tight{padding:clamp(40px,6vw,84px) 0;}
.center{text-align:center;}
.grid{display:grid; gap:var(--gutter);}

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-body); font-size:.72rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--coral); font-weight:500;
  margin-bottom:1.1em;
}
.eyebrow::before{content:''; width:26px; height:1px; background:var(--coral);}
.eyebrow.on-dark{color:var(--coral-dim);}

.lede{font-size:clamp(1.05rem,1.4vw,1.25rem); color:var(--ink-soft); max-width:62ch;}
.lede.center{margin-left:auto; margin-right:auto;}

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-body); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase;
  font-weight:500; padding:1.05em 2.1em; border-radius:100px;
  border:1px solid transparent; transition:all .4s var(--ease); white-space:nowrap;
}
.btn-primary{background:var(--coral); color:var(--cream);}
.btn-primary:hover{background:var(--teal-900); transform:translateY(-2px);}
.btn-outline{border-color:currentColor; color:var(--teal-950); background:transparent;}
.btn-outline:hover{background:var(--teal-950); color:var(--cream); transform:translateY(-2px);}
.btn-outline.on-dark{color:var(--cream);}
.btn-outline.on-dark:hover{background:var(--cream); color:var(--teal-950);}
.btn-ghost{color:var(--teal-800); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500; border-bottom:1px solid currentColor; padding:.2em 0; border-radius:0;}
.btn-ghost:hover{color:var(--coral); border-color:var(--coral);}

/* ---- Root & Branch divider (signature motif) ---- */
.divider{display:flex; justify-content:center; margin:2.6em 0; opacity:.85;}
.divider svg{width:220px; height:34px;}
.divider path{stroke:var(--gold); stroke-width:1; fill:none;}
.divider.on-dark path{stroke:var(--coral-dim);}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:#fff;
  padding:5px 0; border-bottom:1px solid var(--line); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
  transition:all .45s var(--ease);
}
.site-header.is-scrolled{padding:5px 0;}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px;}

.brand{display:flex; align-items:center; gap:12px;}
.brand img{height:100px; width:auto; transition:height .4s var(--ease);}
.site-header.is-scrolled .brand img{height:75px;}
.brand-word{font-family:var(--f-display); font-size:1.3rem; letter-spacing:.06em; color:var(--teal-950);}
.brand-word small{display:block; font-family:var(--f-body); font-size:.56rem; letter-spacing:.32em; color:var(--coral); font-weight:500; margin-top:1px;}

.main-nav{display:flex; align-items:center; gap:2.4vw;}
.main-nav > ul{display:flex; align-items:center; gap:2.4vw;}
.main-nav a{font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; font-weight:500; color:#000000; position:relative; padding:6px 0;}
.main-nav .dropdown a{color:var(--cream);}
.main-nav a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--coral); transition:width .35s var(--ease);}
.main-nav a:hover::after, .main-nav .has-dropdown:hover a::after{width:100%;}

.has-dropdown{position:relative;}
.dropdown{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  background:var(--teal-950); min-width:290px; padding:14px; border-radius:6px;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), transform .3s var(--ease);
  box-shadow:0 30px 60px -20px rgba(10,55,51,.5);
}
.dropdown::before{
  content:''; position:absolute; top:-24px; left:0; width:100%; height:24px;
}
.has-dropdown:hover .dropdown{opacity:1; visibility:visible; transform:translateX(-50%) translateY(14px);}
.dropdown a{display:block; padding:12px 14px; color:var(--cream); text-transform:none; letter-spacing:.01em; font-size:.86rem; border-radius:4px;}
.dropdown a:hover{background:rgba(255,255,255,.06); color:var(--coral-dim);}
.dropdown a::after{display:none;}
.dropdown .dd-meta{display:block; font-size:.7rem; color:var(--coral-dim); letter-spacing:.08em; text-transform:uppercase; margin-top:3px;}

.nav-cta{display:flex; align-items:center; gap:18px;}
.hamburger{display:none; flex-direction:column; gap:5px; background:none; border:0; padding:6px;}
.hamburger span{width:24px; height:1.5px; background:var(--teal-950); display:block; transition:all .3s var(--ease);}
.hamburger.open span{background:var(--cream) !important;}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

@media (max-width:1080px){
  .brand img{height:75px !important;}
  .footer-brand img{height:200px !important;}
  .main-nav{position:fixed; inset:0 0 0 auto; width:min(360px,86vw); height:100vh;
    background:var(--teal-950); flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding:110px 34px 40px; transform:translateX(100%); transition:transform .5s var(--ease); overflow-y:auto;}
  .main-nav.open{transform:translateX(0);}
  .main-nav > ul{flex-direction:column; align-items:flex-start; gap:0; width:100%;}
  .main-nav > ul > li{width:100%; border-bottom:1px solid var(--line-on-dark);}
  .main-nav a{color:var(--cream) !important; display:block; padding:16px 0;}
  .dropdown{position:static; transform:none !important; opacity:1; visibility:visible; background:none; box-shadow:none; display:none; min-width:0; padding:0 0 10px; width:100%; margin:0; left:0;}
  .has-dropdown:hover .dropdown{transform:none !important;}
  .has-dropdown.open .dropdown{display:block;}
  .dropdown a{padding:10px 0 10px 16px !important; white-space:normal; word-break:break-word;}
  .has-dropdown > a{display:flex; justify-content:space-between; align-items:center;}
  .has-dropdown > a::before{content:'+'; font-size:1.4rem; font-weight:300; order:2;}
  .has-dropdown.open > a::before{content:'−';}
  .nav-cta{display:none;}
  .hamburger{display:flex; z-index:1100;}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  background:
    radial-gradient(ellipse 60% 50% at 50% 8%, rgba(222,122,70,.35), transparent 60%),
    linear-gradient(180deg, rgb(0 0 0 / 45%), rgb(0 0 0 / 65%)),
    url('../images/hero_landscape_hq.jpg') center/cover no-repeat;
  color:var(--cream); overflow:hidden; padding-top:140px;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='%23F3ECDD' stroke-opacity='0.045'%3E%3Cpath d='M120 20 C90 60 60 70 30 110 M120 20 C150 60 180 70 210 110 M120 20 L120 220 M120 90 C95 120 70 130 40 160 M120 90 C145 120 170 130 200 160'/%3E%3C/g%3E%3C/svg%3E");
  background-size:340px; opacity:.7; pointer-events:none;
}
.hero-inner{position:relative; z-index:2; padding-bottom:clamp(60px,9vw,110px); width:100%;}
.hero-mark{width:56px; height:auto; margin-bottom:28px; opacity:.9;}
.hero h1{color:var(--cream); max-width:16ch;}
.hero .lede, .page-hero .lede, .detail-hero .lede {color:var(--cream-dim, #E7DFCB); opacity:.86;}
.hero-scroll{position:absolute; right:var(--gutter); bottom:36px; z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--cream); opacity:.7;}
.hero-scroll span{writing-mode:vertical-rl; font-size:.68rem; letter-spacing:.28em; text-transform:uppercase;}
.hero-scroll .line{width:1px; height:56px; background:linear-gradient(var(--coral), transparent); animation:scrollpulse 2.2s ease-in-out infinite;}
@keyframes scrollpulse{0%,100%{opacity:.3} 50%{opacity:1}}

.hero-stats{display:flex; gap:clamp(24px,4vw,64px); margin-top:44px; flex-wrap:wrap;}
.hero-stats div{border-left:1px solid var(--line-on-dark); padding-left:18px;}
.hero-stats strong{display:block; font-family:var(--f-display); font-size:1.6rem; color:var(--coral-dim);}
.hero-stats span{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; opacity:.75;}

/* Page (sub) hero — for interior pages */
.page-hero{
  position:relative; padding:190px 0 100px;
  background:
    radial-gradient(ellipse 70% 60% at 85% -10%, rgba(222,122,70,.28), transparent 60%),
    linear-gradient(180deg, rgb(0 0 0 / 45%), rgb(0 0 0 / 65%)),
    url('../images/hero_landscape_hq.jpg') center/cover no-repeat;
  color:var(--cream); overflow:hidden;
}
.page-hero::before{
  content:''; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='%23F3ECDD' stroke-opacity='0.05'%3E%3Cpath d='M120 20 C90 60 60 70 30 110 M120 20 C150 60 180 70 210 110 M120 20 L120 220'/%3E%3C/g%3E%3C/svg%3E");
  background-size:300px; pointer-events:none;
}
.page-hero .wrap{position:relative; z-index:2;}
.page-hero h1{color:var(--cream); max-width:22ch;}
.crumbs{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cream); opacity:.8; margin-bottom:22px;}
.crumbs a{border-bottom:1px solid transparent; color:var(--cream);} .crumbs a:hover{border-color:currentColor;}

/* ==========================================================================
   IMAGE PLACEHOLDERS (signature "field notes" frame — swap for real photography)
   ========================================================================== */
.ph{
  position:relative; overflow:hidden; border-radius:4px;
  background:
    linear-gradient(155deg, var(--teal-700), var(--teal-950)),
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 34px);
  display:flex; align-items:flex-end; color:var(--cream);
  min-height:280px;
}
.ph::after{
  content:''; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg fill='none' stroke='%23DE7A46' stroke-opacity='0.18'%3E%3Cpath d='M100 10 C70 50 50 60 20 100 M100 10 C130 50 150 60 180 100 M100 10 L100 190'/%3E%3C/g%3E%3C/svg%3E");
  background-size:260px; opacity:.6;
}
.ph-label{position:relative; z-index:2; padding:22px; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; opacity:.8; border-top:1px solid var(--line-on-dark); width:100%;}
.ph.ratio-16-9{aspect-ratio:16/9;}
.ph.ratio-4-5{aspect-ratio:4/5;}
.ph.ratio-1-1{aspect-ratio:1/1;}
.ph.ratio-3-2{aspect-ratio:3/2;}

/* Image wrapping utility for premium hover effects */
.card-image-wrap {
  position:relative; overflow:hidden; width:100%;
}
.card-image-wrap.ratio-4-5 { aspect-ratio:4/5; }
.card-image-wrap img {
  width:100%; height:100%; object-fit:cover;
  transition: transform 0.7s var(--ease);
}
.card:hover .card-image-wrap img {
  transform: scale(1.08);
}

/* ==========================================================================
   CARDS — Journeys
   ========================================================================== */
.journey-grid{grid-template-columns:repeat(3,1fr);}
@media (max-width:980px){.journey-grid{grid-template-columns:1fr;}}
.card{
  background:#fff; border:1px solid var(--line); border-radius:6px; overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  display:flex; flex-direction:column;
}
.card:hover{transform:translateY(-6px); box-shadow:0 40px 70px -30px rgba(10,55,51,.25);}
.card-body{padding:30px 28px 32px; display:flex; flex-direction:column; flex:1;}
.card-tag{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--coral); font-weight:500; margin-bottom:10px;}
.card h3{margin-bottom:.4em;}
.card-meta{display:flex; gap:14px; flex-wrap:wrap; font-size:.78rem; color:var(--ink-soft); letter-spacing:.03em; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--line);}
.card-desc{color:var(--ink-soft); font-size:.94rem; flex:1;}
.card-foot{display:flex; align-items:center; justify-content:space-between; margin-top:20px;}
.price-from{font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); display:block;}
.price-num{font-family:var(--f-display); font-size:1.3rem; color:var(--teal-950);}

/* ==========================================================================
   VALUES / PILLARS
   ========================================================================== */
.pillars{grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden;}
@media (max-width:980px){.pillars{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.pillars{grid-template-columns:1fr;}}
.pillar{background:var(--cream); padding:38px 28px;}
.pillar-num{font-family:var(--f-display); font-style:italic; color:var(--coral); font-size:1rem; margin-bottom:14px; display:block;}
.pillar h4{margin-bottom:.5em; font-size:1.1rem;}
.pillar p{font-size:.9rem; color:var(--ink-soft); margin:0;}

/* ==========================================================================
   SPLIT SECTIONS
   ========================================================================== */
.split{grid-template-columns:1fr 1fr; align-items:center; gap:clamp(30px,6vw,90px);}
@media (max-width:900px){.split{grid-template-columns:1fr;}}
.split.reverse .split-media{order:2;}
@media (max-width:900px){.split.reverse .split-media{order:0;}}

/* ==========================================================================
   ITINERARY / DAY LIST (tour detail)
   ========================================================================== */
.detail-hero{position:relative; padding:200px 0 90px; color:var(--cream);
  background:
    radial-gradient(ellipse 70% 60% at 15% -10%, rgba(222,122,70,.3), transparent 60%),
    linear-gradient(180deg, rgb(0 0 0 / 45%), rgb(0 0 0 / 65%)),
    url('../images/hero_landscape_hq.jpg') center/cover no-repeat;
  overflow:hidden;}
.detail-hero::before{content:''; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='%23F3ECDD' stroke-opacity='0.05'%3E%3Cpath d='M120 20 C90 60 60 70 30 110 M120 20 C150 60 180 70 210 110 M120 20 L120 220'/%3E%3C/g%3E%3C/svg%3E");
  background-size:300px;}
.detail-hero .wrap{position:relative; z-index:2;}
.detail-hero h1{color:var(--cream); max-width:22ch;}
.detail-facts{display:flex; flex-wrap:wrap; gap:34px; margin-top:34px; padding-top:30px; border-top:1px solid var(--line-on-dark);}
.detail-facts div{min-width:110px;}
.detail-facts strong{display:block; font-family:var(--f-display); font-size:2.35rem; color:var(--coral-dim);}
.detail-facts span{font-size:1rem; letter-spacing:0; text-transform:uppercase;}

.tour-body{grid-template-columns:2fr 1fr; gap:clamp(30px,5vw,80px); align-items:stretch;}
@media (max-width:960px){.tour-body{grid-template-columns:1fr;}}

.highlight-list li{position:relative; padding-left:34px; margin-bottom:18px; font-size:1rem; color:var(--ink-soft);}
.highlight-list li::before{content:''; position:absolute; left:0; top:.5em; width:16px; height:1px; background:var(--coral);}
.highlight-list li strong{color:var(--ink); font-weight:500;}

.incl-grid{grid-template-columns:1fr 1fr; gap:10px 30px;}
@media (max-width:560px){.incl-grid{grid-template-columns:1fr;}}
.incl-grid li{position:relative; padding-left:26px; font-size:.92rem; color:var(--ink-soft); padding-bottom:10px;}
.incl-grid li::before{content:'✓'; position:absolute; left:0; top:0; color:var(--teal-700); font-size:.85rem;}

.stay-card{display:flex; gap:22px; padding:24px 0; border-bottom:1px solid var(--line);}
.stay-card:last-child{border-bottom:0;}
.stay-thumb{width:160px; flex:none;}
@media (max-width:640px){.stay-card{flex-direction:column;} .stay-thumb{width:100%;}}
.stay-card h4{margin-bottom:.35em;}
.stay-card p{font-size:.9rem; color:var(--ink-soft); margin:0;}

.side-card{background:#fff; border:1px solid var(--line); border-radius:6px; padding:30px; position:sticky; top:110px;}
.side-card .price-num{font-size:2.1rem;}
.side-card .btn-primary{width:100%; justify-content:center; margin-top:18px;}
.side-card .btn-outline{width:100%; justify-content:center; margin-top:12px;}
.side-facts{margin:20px 0; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.side-facts li{display:flex; justify-content:space-between; font-size:.86rem; padding:6px 0; color:var(--ink-soft);}
.side-facts li b{color:var(--ink); font-weight:500;}

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

/* ==========================================================================
   TESTIMONIAL-FREE SOCIAL PROOF STRIP (values, not claims)
   ========================================================================== */
.proof-strip{background:var(--teal-950); color:var(--cream); padding:22px 0;}
.proof-strip .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px 40px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; opacity:.8;}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band{
  position:relative; padding:clamp(70px,10vw,130px) 0; text-align:center; color:var(--cream); overflow:hidden;
  background:
    radial-gradient(ellipse 60% 50% at 50% 8%, rgba(222,122,70,.35), transparent 60%),
    linear-gradient(180deg, rgb(0 0 0 / 45%), rgb(0 0 0 / 65%)),
    url('../images/Epic%20Voyage%20Around%20Southeast-img.webp') center/cover no-repeat;
}
.cta-band h2{color:var(--cream); max-width:20ch; margin-left:auto; margin-right:auto;}
.cta-actions{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:34px;}

/* ==========================================================================
   FORMS — Inquiry
   ========================================================================== */
.form-grid{grid-template-columns:1fr 1fr; gap:20px;}
@media (max-width:640px){.form-grid{grid-template-columns:1fr;}}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:20px;}
.field.full{grid-column:1/-1;}
.field label{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); font-weight:500;}
.field input, .field select, .field textarea{
  border:1px solid var(--line); background:#fff; padding:14px 16px; border-radius:4px; color:var(--ink);
  transition:border-color .3s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--coral);}
.field textarea{resize:vertical; min-height:120px;}
.form-note{font-size:.78rem; color:var(--ink-soft); margin-top:6px;}
.form-success{display:none; padding:20px; border-radius:6px; background:var(--teal-100); color:var(--teal-950); font-size:.92rem; margin-top:18px;}
.form-success.show{display:block;}

.consult-panel{background:#fff; border:1px solid var(--line); border-radius:8px; padding:clamp(20px,3vw,34px); overflow:hidden;}

.contact-tabs{display:flex; gap:8px; margin-bottom:34px; border-bottom:1px solid var(--line);}
.contact-tab{padding:14px 4px; margin-right:28px; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; font-weight:500; color:var(--ink-soft); border-bottom:2px solid transparent; margin-bottom:-1px; background:none; border-top:0; border-left:0; border-right:0;}
.contact-tab.active{color:var(--teal-950); border-color:var(--coral);}
.contact-panel{display:none;}
.contact-panel.active{display:block;}

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%; text-align:left; background:none; border:0; padding:24px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; font-family:var(--f-display); font-size:1.08rem; color:var(--teal-950);}
.faq-q .plus{font-family:var(--f-body); font-size:1.4rem; color:var(--coral); transition:transform .35s var(--ease); flex:none;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .45s var(--ease);}
.faq-a p{padding-bottom:22px; color:var(--ink-soft); max-width:70ch; margin:0;}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:#000; color:var(--cream); padding:clamp(60px,8vw,100px) 0 30px;}
.footer-top{grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px;}
@media (max-width:900px){.footer-top{grid-template-columns:1fr 1fr; row-gap:44px;}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr;}}
.footer-brand img{height:140px; margin-bottom:18px; filter:brightness(0) invert(1);}
.footer-brand p{color:rgba(250,246,236,.7); font-size:.92rem; max-width:32ch;}
.footer-col h5{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--coral-dim); margin-bottom:18px; font-weight:500;}
.footer-col li{margin-bottom:12px;}
.footer-col a{font-size:.9rem; color:rgba(250,246,236,.82); transition:color .3s;}
.footer-col a:hover{color:var(--coral-dim);}
.footer-social{display:flex; gap:14px; margin-top:20px;}
.footer-social a{width:36px; height:36px; border:1px solid var(--line-on-dark); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.8rem;}
.footer-social a:hover{border-color:var(--coral-dim); color:var(--coral-dim);}
.footer-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:60px; padding-top:26px; border-top:1px solid var(--line-on-dark); font-size:.76rem; color:rgba(250,246,236,.55);}
.footer-bottom a{color:rgba(250,246,236,.55);} .footer-bottom a:hover{color:var(--coral-dim);}

/* ==========================================================================
   REVEAL ANIMATION
   ========================================================================== */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-stagger > *{transition-delay:calc(var(--i,0) * 90ms);}

/* ==========================================================================
   MISC
   ========================================================================== */
.tag-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px;}
.tag{font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--line); padding:7px 14px; border-radius:100px; color:var(--ink-soft);}
.two-col-text{grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,70px);}
@media (max-width:800px){.two-col-text{grid-template-columns:1fr;}}
.quote-block{font-family:var(--f-display); font-style:italic; font-size:clamp(1.3rem,2.4vw,1.9rem); color:var(--teal-950); max-width:34ch; line-height:1.35; margin:0 auto;}
.skip-link{position:absolute; left:-999px; top:0; background:var(--coral); color:#fff; padding:10px 16px; z-index:2000;}
.skip-link:focus{left:10px; top:10px;}