/* ==========================================================================
   ECHO EXPEDITIONS — a tale of indian voyage
   Design system derived from the brand logo:
   mountain slate · sun orange · azure water · snow white (from logo)
   Display: Fraunces  |  Body: Mulish  |  Script accent: Kalam
   ========================================================================== */

/* ---- self-hosted fonts (no external CDN → faster, no render-blocking round-trip) ---- */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/fraunces-400.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/fraunces-600.woff2') format('woff2');}
@font-face{font-family:'Mulish';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/mulish-400.woff2') format('woff2');}
@font-face{font-family:'Mulish';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/mulish-600.woff2') format('woff2');}
@font-face{font-family:'Mulish';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/mulish-700.woff2') format('woff2');}
@font-face{font-family:'Mulish';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/mulish-800.woff2') format('woff2');}
@font-face{font-family:'Kalam';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/kalam-400.woff2') format('woff2');}
@font-face{font-family:'Kalam';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/kalam-700.woff2') format('woff2');}

:root{
  --green-950:#1D2B32;
  --green-900:#2A3B44;
  --green-700:#4C616C;
  --green-600:#5B7381;
  --green-100:#E8EEF2;
  --saffron:#F08000;
  --saffron-deep:#D96A00;
  --river:#0F93E8;
  --river-deep:#0B72B8;
  --ivory:#F7FAFB;
  --sand:#E9F0F3;
  --ink:#26343B;
  --muted:#5F7078;
  --line:#D9E3E8;
  --white:#FFFFFF;
  --shadow-sm:0 2px 10px rgba(29,43,50,.08);
  --shadow-md:0 14px 34px rgba(29,43,50,.14);
  --radius:18px;
  --arch:260px 260px 18px 18px;      /* temple-arch photo frame */
  --font-display:'Fraunces','Georgia',serif;
  --font-body:'Mulish', 'Segoe UI', sans-serif;
  --font-script:'Kalam', cursive;
  --wrap:1180px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html, body{ overflow-x:hidden; overflow-x:clip; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--ivory);
  line-height:1.7;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--green-700); text-decoration:none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible{
  outline:3px solid var(--saffron); outline-offset:3px; border-radius:4px;
}
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }

h1,h2,h3{ font-family:var(--font-display); font-weight:400; line-height:1.18; color:var(--green-900); }
h1{ font-size:clamp(2.4rem, 5.4vw, 4.2rem); }
h2{ font-size:clamp(1.9rem, 3.6vw, 2.7rem); }
h3{ font-size:1.32rem; }

.eyebrow{
  font-family:var(--font-script);
  color:var(--saffron-deep);
  font-size:1.25rem;
  letter-spacing:.02em;
  display:inline-block;
  margin-bottom:.4rem;
}
.lead{ font-size:1.13rem; color:var(--muted); max-width:62ch; }

/* ------------------------------------------------ header */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(247,250,251,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.65rem 24px; max-width:var(--wrap); margin:0 auto; }
.brand img{ height:52px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:1.35rem; list-style:none; }
.nav-links a{
  font-weight:700; font-size:.95rem; color:var(--green-900);
  padding:.35rem 0; position:relative; white-space:nowrap;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:3px;
  background:var(--saffron); border-radius:3px; transition:right .28s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }
.nav-links a.active{ color:var(--green-700); }
.nav-cta{ margin-left:.4rem; }
.nav-toggle{
  display:none; background:none; border:2px solid var(--green-700); border-radius:10px;
  padding:.4rem .6rem; cursor:pointer; color:var(--green-900); font-size:1.15rem; line-height:1;
}

/* ------------------------------------------------ buttons */
.btn{
  display:inline-block; font-weight:800; font-size:.98rem;
  padding:.85rem 1.7rem; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-primary{ background:var(--saffron); color:var(--green-950); }
.btn-primary:hover{ background:#FF9526; }
.btn-outline{ border-color:var(--green-700); color:var(--green-900); background:transparent; }
.btn-outline:hover{ background:var(--green-100); }
.btn-light{ background:var(--white); color:var(--green-900); }
.btn-lg{ padding:1rem 2.2rem; font-size:1.05rem; }

/* ------------------------------------------------ hero */
.hero{
  position:relative; min-height:88vh; min-height:88svh; display:flex; align-items:center;
  color:var(--white); isolation:isolate; overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; z-index:-2; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(29,43,50,.88) 0%, rgba(29,43,50,.55) 45%, rgba(29,43,50,.18) 100%);
}
.hero-inner{ padding:7rem 0 9rem; max-width:720px; }
.hero .eyebrow{ color:var(--saffron); font-size:1.5rem; }
.hero h1{ color:var(--white); margin:.4rem 0 1.1rem; text-shadow:0 3px 24px rgba(0,0,0,.35); }
.hero h1 em{ font-style:normal; color:var(--saffron); }
.hero p{ font-size:1.16rem; max-width:56ch; color:#E9F0F4; margin-bottom:1.8rem; }
.hero-ctas{ display:flex; gap:1rem; flex-wrap:wrap; }
.hero-chips{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:2.2rem; }
.chip{
  border:1.5px solid rgba(255,255,255,.45); border-radius:999px;
  padding:.4rem 1.05rem; font-size:.86rem; font-weight:700; color:#F5FAFC;
  background:rgba(29,43,50,.35); backdrop-filter:blur(4px);
}
.hero-ridge{ position:absolute; left:0; right:0; bottom:-1px; z-index:1; }
.hero-ridge svg{ display:block; width:100%; height:auto; }

/* journey route line (signature) */
.route{ position:absolute; inset:auto 0 90px 0; z-index:1; pointer-events:none; opacity:.9; }
.route svg{ width:100%; height:110px; display:block; }
.route path{ fill:none; stroke:var(--saffron); stroke-width:2.5; stroke-dasharray:2 9; stroke-linecap:round; }
.route circle{ fill:var(--saffron); }

/* ------------------------------------------------ sections */
.section{ padding:5.2rem 0; }
.section-tight{ padding:3.4rem 0; }
.section-head{ max-width:720px; margin-bottom:2.6rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.on-sand{ background:var(--sand); }
.on-green{ background:var(--green-900); color:#E9F0F4; }
.on-green h2, .on-green h3{ color:var(--white); }
.on-green .eyebrow{ color:var(--saffron); }
.on-green .lead{ color:#C6D4DC; }

/* manifesto strip */
.manifesto{ background:var(--green-900); color:#E9F0F4; position:relative; overflow:hidden; }
.manifesto .wrap{ display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center; padding-top:4.6rem; padding-bottom:4.6rem; }
.manifesto h2{ color:var(--white); }
.manifesto .big-script{ font-family:var(--font-script); color:var(--saffron); font-size:1.35rem; }
.manifesto ul{ list-style:none; display:grid; gap:1rem; margin-top:1.4rem; }
.manifesto li{ display:flex; gap:.8rem; align-items:flex-start; font-size:1.05rem; }
.manifesto li span:first-child{ color:var(--saffron); font-size:1.15rem; line-height:1.5; }
.sun-mark{
  position:absolute; right:-120px; top:-120px; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(240,128,0,.35), transparent 65%);
}

/* ------------------------------------------------ cards */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.card .card-img{ height:210px; overflow:hidden; }
.card .card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.card:hover .card-img img{ transform:scale(1.06); }
.card-body{ padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.card-body .icon{ font-size:1.5rem; }
.card-body p{ color:var(--muted); font-size:.97rem; flex:1; }
.card-link{ font-weight:800; color:var(--saffron-deep); font-size:.95rem; }
.card-link:hover{ color:var(--green-700); }

/* arch frames (signature) */
.arch{ border-radius:var(--arch); overflow:hidden; box-shadow:var(--shadow-md); border:6px solid var(--white); }
.arch img{ width:100%; height:100%; object-fit:cover; }

/* gallery */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem 1.6rem; }
.gallery figure{ text-align:center; }
.gallery .arch{ height:330px; }
.gallery figcaption{ margin-top:.85rem; }
.gallery figcaption strong{ font-family:var(--font-display); font-weight:400; color:var(--green-900); font-size:1.08rem; display:block; }
.gallery figcaption span{ color:var(--muted); font-size:.9rem; }

/* ------------------------------------------------ steps / journey line */
.steps{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; counter-reset:step; }
.steps::before{
  content:""; position:absolute; top:34px; left:8%; right:8%; height:0;
  border-top:3px dashed var(--saffron); opacity:.55;
}
.step{ position:relative; text-align:center; padding:0 .6rem; }
.step .dot{
  width:68px; height:68px; margin:0 auto 1rem; border-radius:50%;
  background:var(--white); border:3px solid var(--saffron); box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center; font-size:1.7rem; position:relative; z-index:1;
}
.step h3{ font-size:1.1rem; margin-bottom:.35rem; }
.step p{ color:var(--muted); font-size:.93rem; }

/* vertical journey (how-it-works page) */
.journey{ position:relative; max-width:840px; margin:0 auto; }
.journey::before{
  content:""; position:absolute; top:10px; bottom:10px; left:33px;
  border-left:3px dashed var(--saffron); opacity:.6;
}
.leg{ position:relative; padding:0 0 2.8rem 100px; }
.leg:last-child{ padding-bottom:0; }
.leg .dot{
  position:absolute; left:0; top:0; width:68px; height:68px; border-radius:50%;
  background:var(--white); border:3px solid var(--saffron); box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
}
.leg .leg-kicker{ font-family:var(--font-script); color:var(--saffron-deep); font-size:1.05rem; }
.leg h3{ margin:.1rem 0 .45rem; }
.leg p{ color:var(--muted); max-width:60ch; }

/* ------------------------------------------------ split feature rows */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:3.4rem; align-items:center; }
.split .arch{ height:430px; }
.split.rev .media{ order:2; }
.split ul.ticks{ list-style:none; display:grid; gap:.6rem; margin-top:1.1rem; }
.split ul.ticks li{ padding-left:1.9rem; position:relative; color:var(--ink); }
.split ul.ticks li::before{ content:"✦"; position:absolute; left:0; color:var(--saffron-deep); }

/* ------------------------------------------------ quotes */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.quote{
  background:var(--white); border-radius:var(--radius); border:1px solid var(--line);
  padding:1.8rem 1.7rem; box-shadow:var(--shadow-sm); position:relative;
}
.quote::before{
  content:"\201C"; font-family:var(--font-display); font-size:3.4rem; color:var(--saffron);
  position:absolute; top:.4rem; left:1.1rem; line-height:1;
}
.quote p{ padding-top:1.6rem; font-size:.99rem; color:var(--ink); }
.quote footer{ margin-top:1rem; font-weight:800; color:var(--green-700); font-size:.92rem; }
.quote footer span{ display:block; font-weight:600; color:var(--muted); font-size:.84rem; }

/* ------------------------------------------------ CTA band */
.cta-band{ background:linear-gradient(115deg, var(--green-900), var(--green-700)); color:var(--white); position:relative; overflow:hidden; }
.cta-band .wrap{ display:flex; align-items:center; justify-content:space-between; gap:2rem; padding-top:3.6rem; padding-bottom:3.6rem; flex-wrap:wrap; }
.cta-band h2{ color:var(--white); max-width:22ch; }
.cta-band .big-script{ font-family:var(--font-script); color:var(--saffron); font-size:1.3rem; }

/* ------------------------------------------------ value / ethics blocks */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.pillar{
  background:var(--white); border-radius:var(--radius); padding:1.7rem 1.6rem;
  border-top:5px solid var(--saffron); box-shadow:var(--shadow-sm);
}
.pillar .icon{ font-size:1.7rem; }
.pillar h3{ margin:.5rem 0 .4rem; font-size:1.12rem; }
.pillar p{ color:var(--muted); font-size:.95rem; }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:1.8rem; }
.panel{ border-radius:var(--radius); padding:2rem 1.9rem; }
.panel.yes{ background:var(--green-100); border:1.5px solid #C3D4DD; }
.panel.no{ background:#FDEFDF; border:1.5px solid #F2D3AC; }
.panel h3{ display:flex; gap:.6rem; align-items:center; margin-bottom:1rem; }
.panel ul{ list-style:none; display:grid; gap:.75rem; }
.panel li{ padding-left:1.8rem; position:relative; font-size:.98rem; }
.panel.yes li::before{ content:"✔"; position:absolute; left:0; color:var(--green-700); font-weight:900; }
.panel.no li::before{ content:"✕"; position:absolute; left:0; color:#C4681A; font-weight:900; }

/* ------------------------------------------------ FAQ */
.faq{ max-width:840px; margin:0 auto; display:grid; gap:.9rem; }
.faq details{
  background:var(--white); border:1px solid var(--line); border-radius:14px;
  padding:1.05rem 1.35rem; box-shadow:var(--shadow-sm);
}
.faq summary{
  cursor:pointer; font-weight:800; color:var(--green-900); font-size:1.03rem;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.5rem; color:var(--saffron-deep); font-weight:400; transition:transform .2s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ margin-top:.8rem; color:var(--muted); }

/* ------------------------------------------------ contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:3rem; align-items:start; }
.contact-info .info-item{ display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.4rem; }
.contact-info .info-item .icon{
  width:50px; height:50px; flex:none; border-radius:14px; background:var(--green-100);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
}
.contact-info h3{ font-size:1.02rem; margin-bottom:.1rem; }
.contact-info p{ color:var(--muted); font-size:.95rem; }
.form-card{
  background:var(--white); border-radius:var(--radius); border:1px solid var(--line);
  box-shadow:var(--shadow-md); padding:2.2rem;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-weight:800; font-size:.88rem; margin-bottom:.35rem; color:var(--green-900); }
.field input, .field select, .field textarea{
  width:100%; padding:.8rem .95rem; border:1.5px solid var(--line); border-radius:12px;
  font:inherit; background:var(--ivory); color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--saffron); background:var(--white); }
.captcha-box{
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  background:var(--sand); border:1.5px dashed var(--saffron); border-radius:12px; padding:.9rem 1rem;
}
.captcha-box canvas{ border-radius:8px; background:var(--white); }
.captcha-box input{ width:110px; padding:.65rem .8rem; border:1.5px solid var(--line); border-radius:10px; font:inherit; }
.captcha-refresh{ background:none; border:none; cursor:pointer; font-size:1.25rem; color:var(--green-700); }
.form-note{ font-size:.83rem; color:var(--muted); margin-top:.9rem; }
.form-msg{ display:none; margin-top:1rem; padding:.9rem 1.1rem; border-radius:12px; font-weight:700; font-size:.95rem; }
.form-msg.ok{ display:block; background:var(--green-100); color:var(--green-900); border:1.5px solid #C3D4DD; }
.form-msg.err{ display:block; background:#FBE9E0; color:#8A3B12; border:1.5px solid #EFC9AF; }

/* ------------------------------------------------ page hero (inner pages) */
.page-hero{
  position:relative; padding:6.2rem 0 5rem; color:var(--white); isolation:isolate; overflow:hidden;
}
.page-hero .hero-bg{ position:absolute; inset:0; z-index:-2; }
.page-hero .hero-bg img{ width:100%; height:100%; object-fit:cover; }
.page-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(29,43,50,.9), rgba(29,43,50,.55));
}
.page-hero h1{ color:var(--white); margin:.3rem 0 .8rem; }
.page-hero .eyebrow{ color:var(--saffron); font-size:1.35rem; }
.page-hero p{ max-width:64ch; color:#E2ECF1; font-size:1.1rem; }

/* ------------------------------------------------ footer */
.site-footer{ background:var(--green-950); color:#B7C7CF; font-size:.94rem; }
.footer-top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.4rem;
  padding:3.6rem 0 2.6rem; border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-brand img{ height:56px; background:var(--white); padding:6px 12px; border-radius:12px; }
.footer-brand p{ margin-top:1rem; max-width:34ch; }
.site-footer h4{ color:var(--white); font-family:var(--font-display); font-weight:400; font-size:1.05rem; margin-bottom:1rem; }
.site-footer ul{ list-style:none; display:grid; gap:.55rem; }
.site-footer a{ color:#B7C7CF; }
.site-footer a:hover{ color:var(--saffron); }
.footer-bottom{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1.3rem 0; font-size:.85rem; }

/* ------------------------------------------------ reveal on scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ------------------------------------------------ image fallback tile */
.img-fallback{
  width:100%; height:100%; min-height:210px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:linear-gradient(140deg, var(--green-700), var(--river-deep));
  color:var(--white); font-family:var(--font-display); font-size:1.15rem; padding:1rem;
}

/* ------------------------------------------------ responsive */

/* --- tablets & small laptops: collapse nav BEFORE it overflows --- */
@media (max-width: 1120px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    background:var(--ivory);
    flex-direction:column; align-items:stretch; gap:0;
    padding:.4rem 1.5rem 1.3rem;
    border-bottom:1px solid var(--line); box-shadow:var(--shadow-md);
    display:none;
    max-height:calc(100vh - 86px); overflow-y:auto;
  }
  .nav-links.open{ display:flex; }
  .nav-links li{ width:100%; }
  .nav-links a{ display:block; padding:.85rem 0; font-size:1.05rem; }
  .nav-links a::after{ display:none; }
  .nav-links a.active{ color:var(--saffron-deep); }
  .nav-cta{ margin:.8rem 0 0; }
  .nav-cta .btn{ display:block; text-align:center; width:100%; }
  .nav-toggle{ display:block; }
}
/* the header is the positioning context for the dropdown */
.site-header{ position:sticky; }
.nav-bar{ position:relative; }

/* --- medium screens --- */
@media (max-width: 980px){
  .card-grid, .gallery, .quotes, .pillars{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); gap:2rem 1.4rem; }
  .steps::before{ display:none; }
  .split, .contact-grid, .two-col{ grid-template-columns:1fr; }
  .split{ gap:2.2rem; }
  .split.rev .media{ order:0; }
  .manifesto .wrap{ grid-template-columns:1fr; gap:2rem; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .contact-grid{ gap:2.2rem; }
}

/* --- phones --- */
@media (max-width: 760px){
  .section{ padding:3.6rem 0; }
  .hero{ min-height:auto; }
  .hero-inner{ padding:4.5rem 0 6.5rem; }
  .hero p{ font-size:1.05rem; }
  .hero .eyebrow{ font-size:1.25rem; }
  .hero-ctas .btn{ width:100%; text-align:center; }
  .route{ display:none; }                    /* decorative line crowds small screens */
  .page-hero{ padding:4.4rem 0 3.4rem; }
  .cta-band .wrap{ flex-direction:column; align-items:flex-start; padding-top:2.8rem; padding-bottom:2.8rem; }
  .cta-band .btn{ width:100%; text-align:center; }
  .form-card{ padding:1.5rem 1.2rem; }
  .quote{ padding:1.5rem 1.3rem; }
}

/* --- small phones --- */
@media (max-width: 620px){
  .card-grid, .gallery, .quotes, .pillars, .steps, .form-row, .footer-top{ grid-template-columns:1fr; }
  .gallery .arch{ height:270px; }
  .split .arch{ height:300px; }
  .journey::before{ left:26px; }
  .leg{ padding:0 0 2.4rem 76px; }
  .leg .dot{ width:54px; height:54px; font-size:1.25rem; }
  .wrap{ padding:0 18px; }
  .nav-bar{ padding:.6rem 16px; }
  .footer-bottom{ flex-direction:column; gap:.3rem; }
}

/* centered 7th card on desktop only */
@media (min-width: 981px){ .card-center{ grid-column:2; } }

/* ===== Echo Expeditions brand lockup ===== */
.brand{ display:flex; align-items:center; gap:.65rem; }
.brand img{ height:64px; width:auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-text strong{
  font-family:var(--font-display); font-weight:600; font-size:1.45rem;
  color:var(--green-900); letter-spacing:.01em;
}
.brand-text em{ font-family:var(--font-script); font-style:normal; color:var(--saffron-deep); font-size:.9rem; }
h1, h2{ font-weight:600; }
.footer-logo{ display:flex; align-items:center; gap:.8rem; }
.footer-logo img{ height:64px; background:var(--white); padding:6px 12px; border-radius:12px; }
.footer-logo span{ display:flex; flex-direction:column; line-height:1.1; }
.footer-logo strong{ font-family:var(--font-display); font-weight:600; color:var(--white); font-size:1.15rem; }
.footer-logo em{ font-family:var(--font-script); font-style:normal; color:var(--saffron); font-size:.85rem; }
.footer-brand p{ margin-top:1rem; }
@media (max-width:480px){
  .brand img{ height:48px; }
  .brand-text strong{ font-size:1.12rem; }
  .brand-text em{ font-size:.68rem; }
}
@media (max-width:360px){ .brand-text em{ display:none; } }


/* ===== WhatsApp floating contact ===== */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:80;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 26px rgba(29,43,50,.3);
  transition:transform .18s ease, box-shadow .18s ease;
}
.wa-float:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 14px 32px rgba(29,43,50,.35); }
.wa-float svg{ width:32px; height:32px; fill:#fff; }
@media (max-width:620px){ .wa-float{ width:54px; height:54px; right:16px; bottom:16px; } }


/* ==========================================================================
   ADDED COMPONENTS — new sections carried over from the current brand site,
   built entirely from the existing design tokens so they feel native.
   ========================================================================== */

/* ---- prevent layout shift: give every framed image a fixed aspect box ---- */
.card .card-img img{ aspect-ratio:16/10; }
.arch img{ aspect-ratio:4/5; }
.gallery .arch img{ aspect-ratio:4/3; }
.hero-bg img, .page-hero .hero-bg img{ aspect-ratio:16/9; }

/* ---- The Difference: tour group vs guide vs companion ---- */
.compare{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; align-items:stretch; }
.comp-col{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden; display:flex; flex-direction:column;
}
.comp-col.feature{ border:2px solid var(--saffron); box-shadow:var(--shadow-md); }
.comp-head{ padding:1.5rem 1.5rem 1.2rem; border-bottom:1px solid var(--line); }
.comp-col.feature .comp-head{ background:linear-gradient(160deg,var(--green-900),var(--green-700)); border-bottom:none; }
.comp-col.feature .comp-head h3, .comp-col.feature .comp-head .comp-sub{ color:var(--white); }
.comp-tag{
  font-family:var(--font-script); font-size:1rem; color:var(--saffron-deep);
  display:inline-block; margin-bottom:.2rem;
}
.comp-col.feature .comp-tag{ color:var(--saffron); }
.comp-head h3{ font-size:1.28rem; margin:0; }
.comp-sub{ color:var(--muted); font-size:.92rem; margin-top:.15rem; }
.comp-body{ display:grid; gap:0; padding:0; }
.comp-row{ padding:.85rem 1.5rem; border-bottom:1px solid var(--line); }
.comp-row:last-child{ border-bottom:none; }
.comp-row .k{ display:block; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:800; margin-bottom:.1rem; }
.comp-row .v{ font-size:.98rem; color:var(--ink); }
.comp-col.feature .comp-row .v{ font-weight:700; color:var(--green-900); }
.compare-note{ max-width:70ch; margin:2.2rem auto 0; text-align:center; color:var(--muted); font-size:1.05rem; }
.compare-note em{ color:var(--green-700); font-style:normal; font-weight:700; }

/* ---- Who we travel with — closing line ---- */
.travellers-note{
  max-width:60ch; margin:2.4rem auto 0; text-align:center;
  font-family:var(--font-display); font-size:1.25rem; color:var(--green-900); line-height:1.5;
}
.travellers-note strong{ color:var(--saffron-deep); font-weight:600; }

/* ---- The Honest Answer (about) ---- */
.honest{ max-width:760px; margin:0 auto; display:grid; gap:1.15rem; }
.honest p{ color:var(--ink); font-size:1.06rem; }
.honest p.intro{ color:var(--muted); }
.honest .tag{ color:var(--saffron-deep); font-weight:800; }
.honest .not{
  background:var(--sand); border-left:4px solid var(--saffron); border-radius:0 14px 14px 0;
  padding:1.1rem 1.3rem; color:var(--ink);
}

/* ---- Pricing: no mystery + typical range ---- */
.price-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:2.6rem; align-items:center; }
.price-copy p{ color:var(--muted); margin-top:.9rem; font-size:1.04rem; }
.price-copy strong{ color:var(--green-900); }
.price-card{
  background:linear-gradient(160deg,var(--green-900),var(--green-700)); color:var(--white);
  border-radius:var(--radius); padding:2.2rem 2rem; box-shadow:var(--shadow-md); text-align:center;
}
.price-card .price-kicker{ font-family:var(--font-script); color:var(--saffron); font-size:1.1rem; }
.price-card .price-num{ font-family:var(--font-display); font-weight:600; font-size:clamp(2.2rem,5vw,3rem); color:var(--white); margin:.3rem 0 .1rem; }
.price-card .price-unit{ color:#C6D4DC; font-size:.95rem; }
.price-card .price-covers{ color:#D9E6EC; font-size:.9rem; margin-top:.8rem; padding-top:.9rem; border-top:1px solid rgba(255,255,255,.18); }
.price-points{ list-style:none; display:grid; gap:.7rem; margin-top:1.4rem; max-width:760px; }
.price-points li{ position:relative; padding-left:1.9rem; color:var(--ink); font-size:.98rem; }
.price-points li::before{ content:"✦"; position:absolute; left:0; color:var(--saffron-deep); }

/* ---- fuller contact form: three-up rows ---- */
.form-row.three{ grid-template-columns:1fr 1fr 1fr; }

/* ---- responsive for added components ---- */
@media (max-width: 980px){
  .compare{ grid-template-columns:1fr; }
  .price-grid{ grid-template-columns:1fr; gap:1.8rem; }
  .form-row.three{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 620px){
  .form-row.three{ grid-template-columns:1fr; }
}

/* ---- honeypot spam trap (hidden from people, visible to bots) ---- */
.hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }


/* ==========================================================================
   BLOG MODULE — built entirely from existing design tokens (no design change)
   ========================================================================== */

/* listing card meta (category + date) reuses .card / .card-grid */
.card .card-cat{
  font-family:var(--font-script); color:var(--saffron-deep);
  font-size:1rem; line-height:1;
}
.card .card-meta{
  color:var(--muted); font-size:.82rem; letter-spacing:.02em;
  display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;
}
.card .card-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--line); display:inline-block; }
.card h3{ font-size:1.24rem; line-height:1.25; }
.card.blog-card .card-body{ gap:.5rem; }

/* article / individual post */
.post{ padding-top:3.4rem; padding-bottom:3.4rem; }
.post-wrap{ max-width:760px; margin:0 auto; }
.post-meta{
  display:flex; gap:.55rem; align-items:center; flex-wrap:wrap;
  color:var(--muted); font-size:.9rem; margin-bottom:1.6rem;
}
.post-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--line); display:inline-block; }
.post-meta a{ color:var(--saffron-deep); font-weight:700; }
.post-body{ color:var(--ink); font-size:1.07rem; line-height:1.75; }
.post-body > p:first-of-type{ font-size:1.16rem; color:var(--green-900); }
.post-body h2{
  font-family:var(--font-display); font-weight:600; font-size:1.6rem;
  color:var(--green-900); margin:2.2rem 0 .7rem; line-height:1.2;
}
.post-body h3{
  font-family:var(--font-display); font-weight:600; font-size:1.24rem;
  color:var(--green-900); margin:1.7rem 0 .5rem;
}
.post-body p{ margin:0 0 1.1rem; }
.post-body ul, .post-body ol{ margin:0 0 1.2rem; padding-left:0; list-style:none; display:grid; gap:.6rem; }
.post-body ul li{ position:relative; padding-left:1.7rem; }
.post-body ul li::before{ content:"\2726"; position:absolute; left:0; color:var(--saffron-deep); }
.post-body ol{ counter-reset:step; }
.post-body ol li{ position:relative; padding-left:2rem; counter-increment:step; }
.post-body ol li::before{
  content:counter(step); position:absolute; left:0; top:.05rem;
  width:1.3rem; height:1.3rem; border-radius:50%; background:var(--saffron);
  color:#fff; font-size:.78rem; font-weight:800; display:grid; place-items:center;
}
.post-body a{ color:var(--saffron-deep); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.post-body a:hover{ color:var(--green-700); }
.post-body blockquote{
  margin:1.6rem 0; padding:1rem 1.3rem; background:var(--sand);
  border-left:4px solid var(--saffron); border-radius:0 14px 14px 0;
  font-family:var(--font-display); font-size:1.12rem; color:var(--green-900);
}
.post-body strong{ color:var(--green-900); }
.post-body .key-take{
  margin:2rem 0 0; padding:1.4rem 1.5rem; background:var(--green-100);
  border-radius:var(--radius); border:1px solid var(--line);
}
.post-body .key-take h3{ margin-top:0; }
.post-share{ margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid var(--line); }

/* back-to-blog link + author byline */
.post-back{ display:inline-flex; align-items:center; gap:.4rem; color:var(--saffron-deep); font-weight:800; font-size:.92rem; margin-bottom:1rem; }
.post-back:hover{ color:var(--green-700); }
.author-row{ display:flex; align-items:center; gap:.8rem; margin-top:1.2rem; }
.author-row .avatar{
  width:44px; height:44px; border-radius:50%; background:linear-gradient(160deg,var(--green-700),var(--green-900));
  color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:600;
}
.author-row .who{ font-size:.9rem; color:var(--muted); }
.author-row .who strong{ color:var(--ink); display:block; }

/* related posts reuse .card-grid; tighten heading spacing */
.related-head{ margin-bottom:1.6rem; }