/* Soulscape Indonesia — Nelson edition. Faithful build from Figma node 57:120. */

/* ---------- tokens ---------- */
:root{
  --cream:#F5EEDB;
  --cream-2:#EEE4CB;
  --navy:#1E2E3C;
  --navy-2:#21323F;
  --gold:#B0894F;
  --tan:#CBB489;

  --maxw:1440px;
  --pad:100px;

  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--navy);background:var(--cream);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}

/* ---------- layout ---------- */
.container{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.section{padding:96px 0}

/* ---------- shared type ---------- */
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.eyebrow--tan{color:var(--tan)}
.section-title{font-family:var(--serif);font-weight:400;font-size:48px;line-height:1.05;letter-spacing:-.01em}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);
  font-size:15px;font-weight:600;line-height:1;padding:14px 26px;border-radius:2px;cursor:pointer;
  border:1px solid transparent;transition:opacity .2s,background .2s,color .2s}
.btn--gold{background:var(--gold);color:var(--navy)}
.btn--gold:hover{opacity:.9}
.btn--light{background:var(--cream);color:var(--navy)}
.btn--ghost{background:transparent;color:var(--cream);border-color:rgba(245,238,219,.5)}
.btn--ghost:hover{background:rgba(245,238,219,.1)}

/* ===================================================================
   HEADER / NAV
   =================================================================== */
.site-header{position:absolute;top:0;left:0;right:0;z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;height:88px}
.brand{font-family:var(--serif);font-weight:400;font-size:21px;color:var(--cream)}
.nav-links{display:flex;gap:34px}
.nav-links a{font-size:14px;font-weight:500;color:var(--cream);opacity:.92}
.nav-links a:hover{opacity:1}

/* ===================================================================
   HERO  (57:121)  1440x760
   =================================================================== */
.hero{position:relative;min-height:760px;display:flex;align-items:flex-end;color:var(--cream);overflow:hidden}
.hero__bg{position:absolute;inset:0;background:center/cover no-repeat}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,30,40,.45) 0%,rgba(20,30,40,.15) 35%,rgba(20,30,40,.65) 100%)}
.hero__inner{position:relative;width:100%;padding-bottom:84px;padding-top:140px}
.hero__eyebrow{color:var(--tan);margin-bottom:24px}
.hero h1{font-family:var(--serif);font-size:84px;font-weight:300;color:var(--cream);line-height:1.02;letter-spacing:-.01em}
.hero__lead{max-width:540px;margin-top:24px;font-size:20px;line-height:1.5;color:rgba(245,238,219,.92)}
.hero__cta{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap}

/* ===================================================================
   TRUST STRIP  (60:130)  navy
   =================================================================== */
.trust{background:var(--navy);color:var(--cream)}
.trust__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:32px;padding-top:34px;padding-bottom:34px}
.trust__num{font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--tan);margin-bottom:10px}
.trust__txt{font-size:14px;line-height:1.45;color:var(--cream)}
.trust__feat .trust__num{color:var(--gold)}
.trust__feat .trust__txt{font-style:italic;color:rgba(245,238,219,.6)}

/* ===================================================================
   EXPLORE BY CATEGORY  (61:120)  cream
   =================================================================== */
.explore{background:var(--cream)}
.explore__head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;gap:24px}
.explore .section-title{margin-top:14px;color:var(--navy)}
.explore__row{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.cat{display:block}
.cat__img{aspect-ratio:200/260;border-radius:4px;object-fit:cover;width:100%}
.cat__label{margin-top:14px;font-size:18px;color:var(--navy);text-align:left}

/* carousel nav (decorative, matches mockup) */
.carousel-nav{display:flex;gap:10px;flex:none}
.carousel-nav span{width:40px;height:40px;border:1px solid rgba(30,46,60,.22);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--navy);opacity:.55;font-size:15px}

/* ===================================================================
   OUR JOURNEYS  (62:120)  cream-2
   =================================================================== */
.journeys{background:var(--cream-2)}
.journeys__head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;gap:24px}
.journeys__head .section-title{color:var(--navy)}
.journeys__sub{font-size:13px;color:var(--gold);max-width:360px;text-align:right}
.journeys__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 28px}
.jcard{display:flex;flex-direction:column}
.jcard__media{position:relative}
.jcard__img{aspect-ratio:380/240;width:100%;object-fit:cover;border-radius:4px}
.tag{position:absolute;top:14px;left:14px;font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cream);background:rgba(20,30,40,.55);
  padding:6px 10px;border-radius:2px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.jcard__title{font-family:var(--serif);font-weight:400;font-size:22px;color:var(--navy);margin-top:18px;line-height:1.15}
.jcard__meta{font-size:13px;color:var(--navy);opacity:.8;margin-top:8px}
.jcard__foot{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;
  border-top:1px solid rgba(30,46,60,.15);padding-top:12px}
.jcard__dur{font-size:13px;color:var(--navy);opacity:.8}
.jcard__price{font-size:14px;font-weight:600;color:var(--gold)}

/* ===================================================================
   OUR SERVICE  (64:141)  navy
   =================================================================== */
.service{background:var(--navy);color:var(--cream)}
.service__head{text-align:center;margin-bottom:36px}
.service .eyebrow{color:var(--tan)}
.service__title{font-family:var(--serif);font-weight:400;font-size:48px;color:var(--cream);margin-top:14px;letter-spacing:-.01em}
.service__tabs{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;
  border-bottom:1px solid rgba(245,238,219,.16);padding-bottom:22px;margin-bottom:48px}
.service__tab{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(245,238,219,.65)}
.service__tab.is-active{color:var(--gold)}
.service__body{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.service__img{aspect-ratio:540/360;width:100%;object-fit:cover;border-radius:4px}
.service__sub{font-family:var(--serif);font-weight:400;font-size:34px;color:var(--cream)}
.service__text{font-size:16px;line-height:1.65;color:rgba(245,238,219,.85);margin-top:20px;max-width:440px}
.service__body .btn{margin-top:28px}

/* ===================================================================
   FOUNDER  (64:160)  cream
   =================================================================== */
.founder{background:var(--cream)}
.founder__body{display:grid;grid-template-columns:380px 1fr;gap:72px;align-items:center}
.founder__img{aspect-ratio:380/440;width:100%;object-fit:cover;border-radius:4px;filter:grayscale(1)}
.founder__quote{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.35;color:var(--navy);margin-top:22px}
.founder__by{font-size:13px;color:var(--navy);opacity:.75;margin-top:26px}

/* ===================================================================
   TESTIMONIALS  (64:167)  cream-2
   =================================================================== */
.testi{background:var(--cream-2)}
.testi__head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px}
.testi__head .section-title{color:var(--navy);margin-top:14px}
.testi__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.tcard__img{aspect-ratio:300/200;width:100%;object-fit:cover;border-radius:4px}
.tcard__quote{font-size:17px;line-height:1.5;color:var(--navy);margin-top:18px}
.tcard__by{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);opacity:.7;margin-top:14px}
.testi__note{font-size:12px;color:rgba(30,46,60,.55);margin-top:34px}

/* ===================================================================
   FINAL CTA  (64:198)  photo
   =================================================================== */
.cta{position:relative;color:var(--cream);text-align:center;overflow:hidden}
.cta__bg{position:absolute;inset:0;background:center/cover no-repeat}
.cta__bg::after{content:"";position:absolute;inset:0;background:rgba(20,30,40,.5)}
.cta__inner{position:relative;padding-top:104px;padding-bottom:104px}
.cta .eyebrow{color:var(--tan)}
.cta h2{font-family:var(--serif);font-weight:400;font-size:54px;color:var(--cream);margin-top:20px;letter-spacing:-.01em}
.cta__sub{font-size:18px;color:rgba(245,238,219,.9);margin-top:18px}
.cta__inner .btn{margin-top:30px}
.cta__email{font-size:14px;color:rgba(245,238,219,.85);margin-top:22px}

/* ===================================================================
   FOOTER  (65:120)  navy-2
   =================================================================== */
.footer{background:var(--navy-2);color:var(--cream);border-top:3px solid var(--gold);padding:72px 0 40px}
.footer__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.footer__h{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(203,180,137,.85);margin-bottom:20px}
.footer__cols li{margin-bottom:12px}
.footer__cols a{font-size:14px;color:rgba(245,238,219,.85)}
.footer__cols a:hover{color:var(--cream)}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;margin-top:56px;
  font-size:13px;color:rgba(245,238,219,.7)}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width:1100px){
  :root{--pad:56px}
  .hero h1{font-size:64px}
  .section-title,.service__title{font-size:40px}
  .explore__row{grid-template-columns:repeat(3,1fr)}
  .testi__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .nav-links{display:none}
}
@media (max-width:760px){
  :root{--pad:24px}
  .section{padding:64px 0}
  .hero h1{font-size:44px}
  .hero__lead{font-size:18px}
  .section-title,.service__title{font-size:32px}
  .cta h2{font-size:36px}
  .trust__grid{grid-template-columns:repeat(2,1fr);gap:22px 24px}
  .trust__feat{grid-column:1 / -1;border-top:1px solid rgba(245,238,219,.14);padding-top:18px;margin-top:4px}
  .explore__row{grid-template-columns:repeat(2,1fr)}
  .journeys__grid{grid-template-columns:1fr}
  .journeys__head,.testi__head{flex-direction:column;align-items:flex-start;gap:12px}
  .journeys__sub{text-align:left}
  .service__body{grid-template-columns:1fr;gap:32px}
  .founder__body{grid-template-columns:1fr;gap:32px}
  .founder__img{max-width:320px}
  .testi__grid{grid-template-columns:1fr}
  .service__tabs{gap:20px}
  .footer__cols{grid-template-columns:repeat(2,1fr);gap:32px}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:12px}
}