:root{--bg:#f7f5f0;--surface:#fff;--text:#1b1b1b;--muted:#6b6b6b;--primary:#1f3d2b;--primary-2:#315a40;--accent:#c8a96a;--radius:14px;--space:clamp(12px,2vw,20px);--maxw:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}html,body{margin:0;padding:0}
html,body{overflow-x:hidden}

body{font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;line-height:1.6;color:var(--text);background:var(--bg)}
img{max-width:100%;display:block}
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--space)}
.narrow{max-width:800px;margin-inline:auto}
.br--desktop{display:none}
@media (min-width: 769px){.br--desktop{display:initial}}


/* Buttons */
.btn{display:inline-block;padding:.7rem 1rem;border-radius:999px;border:1px solid transparent;text-decoration:none;font-weight:600;transition:.2s ease;}
.btn--primary{position:relative;isolation:isolate;background-color:var(--primary);color:#fff;transition:color .55s ease-in-out,box-shadow .55s ease-in-out,transform .55s ease-in-out}
.btn--primary::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--primary-2);opacity:0;pointer-events:none;transition:opacity .6s ease-in-out;z-index:-1}
.btn--primary:hover::before{opacity:1}
.btn--secondary{background:#fff;border-color:#ddd;color:var(--primary)}
.btn--secondary:hover{border-color:var(--primary);color:var(--primary)}
.btn--ghost{border-color:transparent;background:transparent;color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.12)}
.btn--lg{font-size:1.05rem;padding:.9rem 1.25rem}

/* Nav */
.nav{position:sticky;top:0;left:0;right:0;z-index:60;display:block;color:var(--text);background:var(--surface);transition:background .25s,color .25s,border-color .25s}
.nav__inner{display:flex;align-items:center;justify-content:space-between;padding-block:calc(1.05rem + 8px)}
.nav--scrolled{background:transparent;color:#fff;border-bottom:0;backdrop-filter:none}
.brand{display:flex;gap:.5rem;align-items:center;color:inherit;text-decoration:none}
.brand__logo{height:39px;width:auto;transform:translateY(4px)}
.brand__name{font-family:ui-serif,Georgia,"Times New Roman",Times,serif;font-style:italic;font-weight:400;font-size:calc(1.6rem + 5px);line-height:1.1;letter-spacing:-0.01em;text-transform:none;transform:translateY(1px)}
.nav__menu{display:flex;gap:53px;align-items:center}
.nav__menu a{color:inherit;text-decoration:none;padding:.5rem .6rem;border-radius:8px;font-family:'DM Sans', Inter, system-ui, sans-serif;font-weight:400}
.nav.nav--overlay .nav__menu{gap:53px}
.nav.nav--overlay .nav__menu a{font-size:.95rem}

.nav:not(.nav--scrolled) .nav__menu a:hover{background:transparent}
.nav--scrolled .nav__menu a:hover{background:transparent}
.nav__toggle{display:none;background:none;border:0;font-size:1.4rem;color:inherit}

@media (max-width: 840px){
  /* Mobile: slide-in drawer menu on the right with deep green background */
  .nav__toggle{display:block;position:relative;z-index:1101}
  .nav__menu{
    position:fixed;top:0;right:0;bottom:0;width:min(60vw,280px);
    background:var(--primary);color:#fff;
    border-left:none; /* avoid 1px line when closed */
    padding:84px 22px 24px 22px;
    display:flex;flex-direction:column;align-items:stretch;gap:calc(.2rem + 15px);
    z-index:1100;box-shadow:none; /* no shadow bleed when closed */
    transform:translateX(100%);transition:transform .8s cubic-bezier(.22,1,.36,1);will-change:transform;
  }
  .nav__menu a{color:#fff;font-size:1.05rem;padding:14px 10px;text-decoration:none;display:block;text-align:right}
  .nav__menu a+a{border-top:1px solid rgba(255,255,255,.18)}
  .nav__menu.open{
    transform:translateX(0);
    border-left:1px solid rgba(255,255,255,.12);
    box-shadow:-24px 0 48px rgba(0,0,0,.28);
  }
  /* Also open when header has nav--active (extra safety if .open fails) */
  .nav.nav--active .nav__menu{
    transform:translateX(0);
    border-left:1px solid rgba(255,255,255,.12);
    box-shadow:-24px 0 48px rgba(0,0,0,.28);
  }
  /* Mobile: keep brand text consistent with desktop size */
  .brand__name{ font-size: calc(1.6rem + 5px); }

  /* While mobile drawer is open, invert navbar text + hamburger to white */
  .nav.nav--active{ color:#fff; }
  .nav.nav--active .nav__toggle{ color:#fff; }
  .is-subpage .nav.nav--active .brand__name{ color: var(--text) !important; }
  .nav.nav--active .nav__menu a{ color:#fff !important; }
  .nav.nav--active .nav__menu a+a{ border-top-color: rgba(255,255,255,.18); }



  /* Mobile: remove any drop shadow or background around the hamburger button */
  .nav__toggle{
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }
  .nav__toggle:focus,
  .nav__toggle:active{
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
  }

  /* Prevent flash/glitch on breakpoint changes */
  .nav__menu.is-resizing{ transition: none !important; }

}
/* Mobile: align navbar padding with hero/footer padding */
@media (max-width: 768px){
  .nav__inner{ padding-inline: calc(var(--space) + 15px); padding-block: calc(1.05rem + 8px - 15px); }
}

/* Mobile: extend white navbar background 7px below to cover hero top on subpages */
@media (max-width: 768px){
  .is-subpage .nav::after{
    content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 7px;
    background: var(--surface); pointer-events: none;
  }
}


/* Desktop: align navbar padding with featured/hero footer */
@media (min-width: 769px){
  .nav__inner{ padding-inline: calc(var(--space) + 28px); }
}


/* iPhone-ish widths: pull hamburger closer to right edge without affecting left brand */
@media (max-width: 414px){
  .nav__inner{ padding-right: calc(var(--space) + 3px); }
  .nav__toggle{ padding: .25rem .35rem; }
}



/* Extra-small screens fine-tuning */
@media (max-width: 420px){
  .hero__content{ margin-top: clamp(-36px,-6vw,-6px); padding-inline: calc(var(--space) + 12px); padding-bottom: 13rem; }
  .hero__title{ font-size: clamp(2.7rem,9.2vw,3.6rem); max-width: 18ch; }
  .hero__footer .container{ padding-inline: calc(var(--space) + 16px); }
}
@media (max-width: 360px){
  .hero__footer-inner{ flex-wrap: wrap; row-gap: 10px; }
  .hero__cta-floating{ margin-left: 0; }
}


/* Mobile hero spacing: lift eyebrow+title and drop footer CTA */
@media (max-width: 768px){
  .hero{align-items:start;justify-items:start}
  .hero__content{margin-top:clamp(-88px,-14vw,-8px);padding-top:0;padding-bottom:15rem;text-align:left;padding-inline:calc(var(--space) + 6px)}
  .hero__eyebrow{font-size:.70rem;padding:.32rem .72rem}
  .hero__title{font-size:clamp(3.6rem,11vw,5.2rem);line-height:1.03;max-width:22ch}
  .hero__actions{display:none !important}
}

/* Hero */
.hero{position:relative;min-height:78svh;display:grid;place-items:center;overflow:hidden}
.hero__bg{position:absolute;inset:-1px;background-image:linear-gradient(to bottom,rgba(0,0,0,.40),rgba(0,0,0,.35)),url('../images/rice_terrace_ceking_bali.jpg');background-size:cover;background-position:50% calc(50% + 7px)}
.hero__content{position:relative;text-align:center;color:#fff;padding-block:7rem}
.hero__eyebrow{display:inline-block;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.16);padding:.5rem 1rem;border-radius:999px;border:1px solid rgba(255,255,255,.38);box-shadow:0 2px 10px rgba(0,0,0,.08);backdrop-filter:saturate(180%) blur(8px);margin:0 0 .9rem}
.hero__title{font-family:ui-serif,Georgia,"Times New Roman",Times,serif;font-size:clamp(2.6rem,7.9vw,4.8rem);line-height:1.06;margin:.2rem auto .5rem;font-weight:500;color:#fff;max-width:16ch;letter-spacing:-0.01em;text-wrap:balance;-webkit-font-smoothing:antialiased;font-kerning:normal}
.hero__title span{display:block}
.hero__title span+span{margin-top:.08em}
.hero__title em{font-style:italic;color:#fff;font-weight:600;letter-spacing:-0.005em}
.hero__actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:clamp(.95rem,2.3vw,1.6rem)}
.hero__footer{position:absolute;left:0;right:0;bottom:clamp(24px,3.6vw,48px);}
.hero__footer-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap}

.hero__sub{position:static;margin:0;padding:0;max-width:560px;color:#fff;opacity:.92;text-align:left;font-size:.95rem;line-height:1.3;flex:1 1 auto}
.hero__cta-floating{position:static;margin-left:auto;white-space:nowrap;flex:0 0 auto}
@media (max-width: 768px){
  /* Text left (26ch), CTA right; centered container; placed nearer to bottom */
  .hero__footer{left:0;right:0;bottom:calc(34px + env(safe-area-inset-bottom));}
  .hero__footer .container{padding-inline: calc(var(--space) + 18px);}
  .hero__sub{position:static;margin:0;padding:0;text-align:left;font-size:1rem;line-height:1.28;max-width:26ch;flex:0 1 auto}
  .hero__cta-floating{position:static;margin-left:auto;white-space:nowrap;flex:0 0 auto}
}
@media (max-width: 768px){
  /* Ensure mobile overrides win by placing after base styles */
  .hero__eyebrow{font-size:.72rem;padding:.34rem .74rem}
  .hero__title{font-size:clamp(2rem,8.2vw,3rem);line-height:1.1;max-width:20ch}
}

/* XS: Force hero title to exactly 3 lines (each span = 1 line) and scale text further */
@media (max-width: 420px){
  /* Tighter, more readable hero title on very small screens */
  .hero__title{ font-size: clamp(2.1rem, 7.6vw, 2.8rem); line-height: 1.1; max-width: 20ch; letter-spacing: -0.005em; }
  .hero__title span{ white-space: normal !important; }
}
@media (max-width: 360px){
  .hero__title{ font-size: clamp(1.4rem, 5.4vw, 2rem); }
}
@media (max-width: 320px){
  .hero__title{ font-size: clamp(1.2rem, 4.6vw, 1.8rem); }
}


/* Desktop: align hero footer container padding with featured */
@media (min-width: 769px){
  .hero__footer .container{padding-inline: calc(var(--space) + 28px);}
}


/* Outline light button for hero */
.btn--outline-light{position:relative;isolation:isolate;background-color:transparent;border:1.5px solid rgba(255,255,255,.95);color:#fff;font-weight:700;padding:.6rem 1.05rem;border-radius:999px;letter-spacing:.01em;font-size:.96rem;line-height:1.1;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;min-width:clamp(140px,16vw,200px);will-change:background-color,color,border-color,transform,box-shadow;transition:background-color .5s ease-in-out,color .5s ease-in-out,border-color .5s ease-in-out,transform .5s ease-in-out,box-shadow .5s ease-in-out}
.btn--outline-light::after{content:"\2192";margin-left:.4rem;display:inline-block;transition:transform .5s ease-in-out}
.btn--outline-light:hover{border-color:#fff;color:#000}
.btn--outline-light:hover::after{transform:translateX(2px)}
.btn--outline-light::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#fff;opacity:0;pointer-events:none;transition:opacity .7s ease-in-out;z-index:-1}
.btn--outline-light:hover::before{opacity:1}

.btn--outline-light:focus{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.25)}

/* Sections */
.section{padding-block:clamp(48px,8vw,86px)}

/* Override for hero Explore Now button to use inline SVG arrow, not ::after */
.hero__cta-floating::after{ content: none !important; }
.hero__cta-floating{ display:inline-flex; align-items:center; }
.hero__cta-floating svg{ width:24px; height:auto; fill: currentColor; transition: transform .5s ease-in-out; margin-left:.4rem; }
.hero__cta-floating:hover svg{ transform: translateX(2px); }

:where(section[id]){scroll-margin-top:0}
.section--soft{background:var(--bg)}
.section--alt{background:var(--surface)}
.section--cta{background:linear-gradient(90deg, #f6f2e8, #faf8f4)}
.section__header{text-align:center;margin-bottom:1.4rem}
.section__header h2{margin:.2rem 0 .5rem}

/* Mobile container padding to align with hero footer */
@media (max-width: 768px){
  .featured > .container{ padding-inline: calc(var(--space) + 18px); }
}

/* Desktop container padding to align with hero footer */
@media (min-width: 769px){
  .featured > .container{ padding-inline: calc(var(--space) + 28px); }
}

/* Beliefs container padding: match Featured */
@media (max-width: 768px){
  .beliefs > .container{ padding-inline: calc(var(--space) + 18px); }
}
@media (min-width: 769px){
  .beliefs > .container{ padding-inline: calc(var(--space) + 28px); }
}



/* Cards Grid */

/* Journey (Section 4) */
/* Add extra top spacing above Journey video */
.journey{ padding-top: calc(clamp(48px,8vw,86px) + 5px); }

.journey__grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(16px,4vw,40px);align-items:center}
.journey__title{font-family:"Playfair Display",ui-serif,Georgia,"Times New Roman",Times,serif;font-size:clamp(2.6rem,6vw,4rem);line-height:1.05;margin:0;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.35)}
.journey__title em{font-style:italic;color:inherit}
.journey__desc{margin:.9rem 0 0;color:rgba(255,255,255,.92)}
.journey__media{position:relative;width:100%;border-radius:28px;overflow:hidden;box-shadow:0 12px 28px rgba(0,0,0,.14);aspect-ratio:16/7;min-height:clamp(340px,52vh,700px)}
.journey__video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.journey__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08) 0%, rgba(0,0,0,.25) 100%);pointer-events:none}

.journey__content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:clamp(16px,4vw,40px);color:#fff}
.journey__content .journey__title{margin:0}
.journey__content .journey__desc{max-width:min(800px,90%);margin-inline:auto}

@media (max-width: 980px){
  .journey__grid{grid-template-columns:1fr}
}

/* Match container padding with Featured/Beliefs */
@media (max-width: 768px){
  .journey > .container{ padding-inline: calc(var(--space) + 18px); }
}
@media (min-width: 769px){
  .journey > .container{ padding-inline: calc(var(--space) + 28px); }
}


/* Contain any sideways layout peeks in Journey on small screens */
@media (max-width: 768px){
  .journey, .journey > .container{ overflow-x: clip; }
}

/* Mobile tuning for Journey section */
@media (max-width: 560px){
  .journey__media{ aspect-ratio: 5/6; min-height: clamp(380px,64vh,640px); }
  .journey__content{ padding: clamp(18px,5vw,28px); gap: 10px; }
  .journey__title{ font-size: clamp(32px,9.5vw,44px); line-height: 1.08; text-wrap: balance; }
  .journey__desc{ font-size: clamp(.95rem,3.8vw,1rem); max-width: 26ch; margin-top: 8px; }
}

/* Phablet / small-tablet tuning for Journey (between mobile and desktop) */
@media (min-width: 561px) and (max-width: 820px){
  .journey__media{ aspect-ratio: 4/5; min-height: clamp(420px,66vh,700px); }
  .journey__content{ padding: clamp(20px,4.5vw,36px); gap: 12px; }
  .journey__title{ font-size: clamp(36px,7.2vw,56px); line-height: 1.06; text-wrap: balance; }
  .journey__desc{ font-size: clamp(1rem,2.9vw,1.06rem); max-width: 30ch; margin-top: 10px; }
}



.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,18px)}
.card{background:var(--surface);border:1px solid #eee;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.card__img{aspect-ratio:16/10;object-fit:cover}
.card__body{padding:1rem 1rem 1.1rem}
.card__body h3{margin:.2rem 0 .4rem}
.card__bullets{margin:.6rem 0 .9rem;padding-left:1.1rem}
.card__actions{display:flex;gap:.5rem;flex-wrap:wrap}

@media (max-width: 980px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 640px){.cards{grid-template-columns:1fr}}

/* Values */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,18px)}
.value{background:var(--surface);border:1px solid #eee;border-radius:12px;padding:1rem}
.value h4{margin:.2rem 0 .2rem}
.value p{margin:0;color:var(--muted)}
@media (max-width: 840px){.values{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 520px){.values{grid-template-columns:1fr}}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.gallery img{width:100%;height:160px;object-fit:cover;border-radius:8px}
@media (max-width: 1040px){.gallery{grid-template-columns:repeat(4,1fr)}}
@media (max-width: 680px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* Testimonials */
.testimonials{display:grid;gap:clamp(12px,2vw,18px);grid-template-columns:repeat(2,1fr)}
.testimonial{background:var(--surface);border:1px solid #eee;border-radius:12px;padding:1rem}
.testimonial p{margin:.2rem 0 .6rem;font-size:1.05rem}
.testimonial span{color:var(--muted)}
@media (max-width: 720px){.testimonials{grid-template-columns:1fr}}


/* Stories (paged grid slider, dots as pager) */
.stories{position:relative;padding-top:clamp(18px,4vw,40px);padding-bottom:30px}
/* Pastikan container section 5 mengikuti padding section 3 & 4 dan menjadi positioning context */
.stories > .container{position:relative}
@media (max-width: 768px){ .stories > .container{ padding-inline: calc(var(--space) + 18px); --stories-crop-right: 0px; } }
@media (min-width: 769px){ .stories > .container{ padding-inline: calc(var(--space) + 28px); --stories-crop-right: 0px; } }
/* Contain sideways peek so it never creates page-level horizontal scroll */
.stories, .stories > .container{ overflow-x: clip; }


.stories__title{font-family:"Playfair Display",ui-serif,Georgia,"Times New Roman",Times,serif;font-size:clamp(2.6rem,6vw,4rem);line-height:1.06;margin:0 0 clamp(36px,5vw,56px);text-wrap:balance}
/* Quote mengikuti padding container yang sama dengan section lain */
.stories__quote{position:absolute;top:0;right:var(--space);font-family:"Playfair Display",ui-serif,Georgia,serif;font-size:clamp(44px,7vw,84px);line-height:1;color:#000;opacity:1;pointer-events:none}
@media (max-width: 768px){ .stories__quote{ right: calc(var(--space) + 18px); } }
@media (min-width: 769px){ .stories__quote{ right: calc(var(--space) + 28px); } }

/* Ensure the decorative quote always sits above backgrounds */
.stories__quote{ z-index: 3; }

/* Quote image inside title; align bottom with "from travelers" */
.stories__title{ position: relative; }
.stories__title > .quote-icon{ position:absolute; bottom:0; right:0; width:clamp(44px,7vw,84px); height:auto; pointer-events:none; }
/* Hide decorative character quote to avoid duplicates */
.stories__quote{ display:none !important; }



.stories__slider{position:relative}


.stories__viewport{overflow:hidden;-webkit-clip-path:inset(0 var(--stories-peek) 0 0);clip-path:inset(0 var(--stories-peek) 0 0);margin-right:calc(-1 * var(--stories-peek))}
/* Disable right crop on the very last step so the last review shows fully */
.stories.stories--is-last .stories__viewport{-webkit-clip-path:none;clip-path:none}

.stories__track{display:flex;transition:transform var(--stories-duration) var(--stories-ease);will-change:transform}
:root{--stories-peek: clamp(100px,12vw,180px); --stories-duration: .7s; --stories-ease: cubic-bezier(.16,.84,.44,1)}
.stories__page{min-width:100%;display:grid;grid-template-columns:repeat(3,1fr);--stories-gap:clamp(20px,3.5vw,28px);gap:var(--stories-gap);padding-right:0}
/* Add inter-page gap so cards across page boundaries keep the same spacing */
.stories__page + .stories__page > .story:first-child{ margin-left: var(--stories-gap); }

.story{background:transparent;border:1px solid #000;border-radius:16px;padding:clamp(16px,2.2vw,20px) clamp(12px,1.8vw,16px);display:flex;flex-direction:column;gap:12px}
.story__text{font-size:clamp(1rem,2.2vw,1.06rem);line-height:1.6;margin:0;color:#2a2a2a;padding-inline:clamp(6px,0.9vw,12px)}
/* Make the rightmost card visually kiss the crop edge */
.stories__page .story:last-child{ padding-right: 0.5ch; }

.story__author{display:flex;gap:10px;align-items:center;margin-top:6px}
.story__author .avatar{width:38px;height:38px;border-radius:999px;background:#f0f0f0;color:#555;display:grid;place-items:center;font-weight:700;font-size:.95rem}
.story__author .meta{display:flex;flex-direction:column;line-height:1.15}
/* Smooth but non-blocking transitions on cards */
.stories__page .story{opacity:1;transform:none;transition:opacity .35s ease,transform .35s ease}
@media (prefers-reduced-motion: reduce){
  .stories__track{transition:none}
  .stories__page .story{transition:none}
}

.story__author .meta strong{color:var(--text);font-weight:700}
.story__author .meta span{color:var(--muted);font-size:.95rem}

/* Dots (rounded rectangle style like reference) */
.stories__dots{display:flex;gap:0;justify-content:center;margin:24px 0 30px}
.stories__dots button{width:14px;height:8px;padding:0;margin:0 4px;border-radius:999px;border:0;background:#d0d0d0;cursor:pointer;appearance:none;-webkit-appearance:none;display:inline-block;transition:width .2s ease, background-color .2s ease}
.stories__dots button.is-active{width:16px;background:#222}
.stories__dots button:focus-visible{outline:2px solid #999;outline-offset:2px}

@media (max-width: 980px){.stories__page{grid-template-columns:repeat(2,1fr);padding-right:0}}
@media (max-width: 560px){
  /* Fixed card width like desktop; single horizontal row via flex to avoid overlap */
  .stories{--stories-card-w:clamp(280px,82vw,340px); --stories-peek:clamp(48px,12vw,80px)}
  .stories__page{display:flex;flex-wrap:nowrap;gap:var(--stories-gap);align-items:flex-start;padding-right:0;min-width:max-content}
  .stories__page .story{flex:0 0 var(--stories-card-w);width:var(--stories-card-w);align-self:flex-start}
  .stories__page .story:nth-child(2){padding-right:.5ch} /* ensure peek doesn't hug the edge */
  .stories__viewport{-webkit-clip-path:inset(0 var(--stories-peek) 0 0);clip-path:inset(0 var(--stories-peek) 0 0);margin-right:calc(-1 * var(--stories-peek))}
}
@media (min-width: 561px) and (max-width: 820px){
  /* Wide mobile / phablet: same behavior as small mobile (1 full + 1 peek) */
  .stories{--stories-card-w:clamp(300px,70vw,380px); --stories-peek:clamp(56px,10vw,96px)}
  .stories__page{display:flex;flex-wrap:nowrap;gap:var(--stories-gap);align-items:flex-start;min-width:max-content;padding-right:0}
  .stories__page .story{flex:0 0 var(--stories-card-w);width:var(--stories-card-w)}
  .stories__viewport{-webkit-clip-path:inset(0 var(--stories-peek) 0 0);clip-path:inset(0 var(--stories-peek) 0 0);margin-right:calc(-1 * var(--stories-peek))}
}



/* CTA */
.cta{text-align:center}
.cta .muted{color:var(--muted);font-size:.95rem;margin-top:.6rem}


/* CTA layout & form */
.cta__title{font-family:"Playfair Display",ui-serif,Georgia,"Times New Roman",Times,serif;font-size:clamp(2.4rem,6vw,3.6rem);line-height:1.06;margin:0 0 .6rem;text-wrap:balance}
.cta__desc{color:var(--muted);max-width:60ch;margin:.1rem auto 1rem}
.cta__form{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:.75rem;align-items:center;justify-content:center;margin-top:.4rem}
.cta__form input{padding:.85rem 1rem;border-radius:var(--radius);border:1px solid #ddd;background:#fff;color:var(--text);font:inherit}
.cta__form input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(31,61,43,.12)}
@media (max-width: 800px){.cta__form{grid-template-columns:1fr}}

/* Align CTA container padding with other sections */
@media (max-width: 768px){ .cta > .container{ padding-inline: calc(var(--space) + 18px); } }
@media (min-width: 769px){ .cta > .container{ padding-inline: calc(var(--space) + 28px); } }

/* Screen-reader only utility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* CTA exact look & feel overrides */
.section--cta{background:radial-gradient(1200px 480px at 50% -8%, #e9e9e9 0%, #f5f5f5 42%, #ffffff 100%)}
.cta__title{font-size:clamp(2.6rem,6vw,4rem);font-weight:600}
.cta__desc{max-width:68ch}

/* Card wrapper */
.cta__card{background:#fff;border:1px solid #eee;border-radius:20px;box-shadow:none;max-width:760px;margin:1.4rem auto 0;padding:clamp(32px,4.8vw,52px)}

/* Form layout: 2 cols on desktop, 1 col on mobile */
.cta__form{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:.25rem}
.form-field label{display:block;font-size:.95rem;color:#000;margin:0 0 .5rem;text-align:left;font-weight:500;width:100%;margin-inline:0}
.form-field input{width:100%;display:block;padding:.78rem 1.2rem;border-radius:999px;border:1px solid #ddd;background:#fff;color:#000;font:inherit}
.form-field input:focus{outline:none;border-color:#cfcfcf;box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.form-field--full{grid-column:1 / -1}

/* Ensure emphasized words are italic like reference */
.cta__title em{font-style:italic}


/* Submit button full-width, rounded, black */

/* Improve CTA typography and spacing to match reference */
.cta{padding-top: clamp(16px,5.5vw,48px); padding-bottom: clamp(8px,4vw,40px)}
.cta__title{line-height:1.1;letter-spacing:-.01em;margin:0 0 clamp(16px,2.4vw,28px)}
.cta__desc{margin:.5rem auto clamp(26px,4.4vw,52px);color:#5f5f5f;text-align:center}

/* Inputs and placeholders */
.form-field input::placeholder{color:#a0a0a0}
.form-field input{height:44px}

/* Ensure the card is clearly visible on light backgrounds */
/* Keep CTA positioned for potential overlays; removed local mask to reveal background around card */
.section--cta{ position: relative; }

.section--cta .cta__card{background:#fff}

.cta__submit{grid-column:1 / -1;width:100%;margin-inline:0;border-radius:999px;padding-block:.9rem}
.btn--dark{background:#000;color:#fff;border-color:#000}
.btn--dark:hover{filter:brightness(1.06)}

@media (max-width: 800px){

  .cta__form{grid-template-columns:1fr}
  .form-field input, .cta__submit, .form-field label{ width:100%; }
}



/* Footer */
.footer{ background: var(--primary); color:#fff; border-top: none; padding-bottom: clamp(12px, 2.6vw, 34px); }
.footer a{ color: rgba(255,255,255,.74); text-decoration:none; transition: color .95s cubic-bezier(.22,.61,.36,1), opacity .95s cubic-bezier(.22,.61,.36,1); }
.footer a:hover{ color:#fff; opacity:1; text-decoration:none; }
.footer__grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(16px, 3vw, 36px); padding-block: clamp(36px, 5vw, 60px); }
@media (min-width: 769px){ .footer__grid{ grid-template-columns: 1fr 1fr auto; } }
@media (max-width: 768px){ .footer__grid{ grid-template-columns: 1fr; } }
/* Desktop-only: move the middle "Programs" column closer to "Discover" without shifting "Contact" */
@media (min-width: 769px){
  .footer__grid > .footer__col:nth-child(2){
    transform: translateX(calc(-2 * clamp(24px, 6vw, 80px)));
  }
  /* Desktop footer (right column): align text left with copyright and keep border flush to right padding */
  .footer__grid > .footer__col:nth-child(3) .footer__heading,
  .footer__grid > .footer__col:nth-child(3) .footer__contact,
  .footer__grid > .footer__col:nth-child(3) .footer__copyright{
    width: 286px;           /* adjusted (−54px total from 340px) */
    max-width: 100%;
    margin-left: auto;      /* keep right edge flush with container padding */
    transform: none;        /* remove prior right shift */
    text-align: left;       /* ensure left-aligned text */
  }
  /* Add a bit more breathing room around the copyright line */
  .footer__grid > .footer__col:nth-child(3) .footer__copyright{
    margin-top: 10px;       /* space above the border (from the contact rows) */
    padding-top: 14px;      /* space from border to the © text */
  }
}
/* Align footer container side padding with sections and hero footer */
@media (max-width: 768px){
  .footer .container{ padding-inline: calc(var(--space) + 18px); }
}
@media (min-width: 769px){
  .footer .container{ padding-inline: calc(var(--space) + 28px); }
}


.footer__heading{ font-weight:600; margin:0 0 .5rem; color:#e8f1eb; }
.footer__links{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.footer__contact{ font-style: normal; display:grid; gap:.35rem; }
.footer__bottom{ display:flex; align-items:center; justify-content:space-between; padding-block:14px; border-top:none; }
.footer__brand{ display:flex; align-items:center; gap:.5rem; color: rgba(255,255,255,.85); }
.footer__contact-row{ display:flex; align-items:flex-start; gap:.6rem; }
.footer .icon{ width:18px; height:18px; display:inline-block; flex:0 0 auto; filter: brightness(0) invert(1); opacity:.9; }

.footer__copyright{ display:flex; align-items:center; gap:.5rem; color: rgba(255,255,255,.85); }

.footer__copyright .brand__logo{ display:none; }

.footer__copyright span:not(:last-of-type){ display:none; }
.footer__copyright{ display:flex; align-items:center; gap:.5rem; color: rgba(255,255,255,.85); border-top:2px solid rgba(255,255,255,.24); padding-top:12px; }




/* Utility */

/* Shared rice terrace background for CTA + Partners */
.bg-rice{background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.24) 100%),url('../images/rice_terrace_bali.jpg');background-size:cover;background-position:center;background-repeat:no-repeat}


/* Shared wrapper that uses ONE continuous rice terrace background for CTA + Partners */
.bg-rice-shared{position:relative;overflow:hidden;background:url('../images/rice_terrace_bali.jpg') 50% 66% / cover no-repeat}
/* Make inner CTA transparent so the shared background is visible */
.bg-rice-shared .section--cta:not(.bg-rice){background:transparent!important}

/* Top fade matches page background (var(--bg)) for smooth blend into next section */
.bg-rice-shared::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(140px,24vh,340px);background:linear-gradient(180deg,#f7f5f0 0%,rgba(247,245,240,.98) 16%,rgba(247,245,240,.90) 32%,rgba(247,245,240,.70) 56%,rgba(247,245,240,.40) 78%,rgba(247,245,240,0) 100%);pointer-events:none;z-index:0}
.bg-rice-shared::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(120px,24vh,320px);background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.28) 100%);pointer-events:none;z-index:0}
.bg-rice-shared>*{position:relative;z-index:1}

/* Mobile tuning: bring image up behind CTA card, extend white fade */
@media (max-width:800px){
  .bg-rice-shared{background-position:50% 54%}
  .bg-rice-shared::before{height:clamp(380px,60vh,760px)}
}
/* Avoid double background when using shared wrapper: let wrapper own the image */
.bg-rice-shared .partners--bg{ background: transparent !important; }
.bg-rice-shared .partners--bg::before,
.bg-rice-shared .partners--bg::after{ display: none !important; }


/* Option: show 100% of the image without cropping (like portrait fully visible). */
.bg-rice-shared.bg-rice-shared--contain{background-size:contain;background-position:50% 100%;background-repeat:no-repeat;background-color:#fff}
@media (max-width:800px){.bg-rice-shared.bg-rice-shared--contain{background-position:50% 100%}}

/* Partners as full-viewport background section */
.partners--bg{position:relative;min-height:clamp(135vh,153vh,180vh);background:url('../images/rice_terrace_bali.jpg') 50% 100% / cover no-repeat;display:grid;align-items:end;padding-top:clamp(48px,14vh,24vh);padding-bottom:clamp(16px,4vh,48px)}
.partners--bg> .container{position:relative;z-index:1;padding-bottom:clamp(14px,3vh,36px);justify-self:stretch}
.partners--bg::after{content:"";position:absolute;left:0;right:0;
  /* extend overlay to match ::before upward reach so gradient sits behind CTA card area */
  top: calc(-1 * clamp(300px, 40vh, 700px));
  height: calc(100% + clamp(300px, 40vh, 700px));
  background:
    /* Super smooth CTA-like top transition with longer multi-stop fade */
    linear-gradient(
      180deg,
      #f6f2e8 0px,
      #faf8f4 clamp(50px, 6vh, 100px),
      rgba(250,248,244,0.96) clamp(90px, 11vh, 160px),
      rgba(250,248,244,0.88) clamp(130px, 15vh, 220px),
      rgba(250,248,244,0.75) clamp(170px, 19vh, 280px),
      rgba(250,248,244,0.58) clamp(210px, 23vh, 340px),
      rgba(250,248,244,0.38) clamp(250px, 27vh, 400px),
      rgba(250,248,244,0.20) clamp(310px, 34vh, 500px),
      rgba(250,248,244,0.10) clamp(370px, 42vh, 620px),
      rgba(250,248,244,0.04) clamp(430px, 50vh, 720px),
      rgba(250,248,244,0.00) clamp(490px, 58vh, 820px)
    ),
    /* Subtle darkening toward bottom for readability */
    linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0,0,0,.28) 100%);
  pointer-events:none; z-index:2}
/* Optional: show the entire portrait image without cropping */
.partners--bg.partners--contain{background-size:contain;background-position:50% 100%;background-color:#fff}


/* Mobile: make partners background not overly tall */
@media (max-width: 768px){
  .partners--bg{
    /* use small-viewport units for reliable mobile viewport sizing */
    min-height: clamp(86svh, 96svh, 110svh);
    padding-top: clamp(28px, 10vh, 20vh);
    padding-bottom: clamp(12px, 3vh, 28px);
  }
  /* reduce the upward extension gradient/background so it doesn't feel too long */
  .partners--bg::before,
  .partners--bg::after{
    top: calc(-1 * clamp(180px, 22vh, 380px));
    height: calc(100% + clamp(180px, 22vh, 380px));
  }
}




/* Increase separation so CTA and Partners feel like 2 sections */
/* On mobile, do not extend Partners background upward behind CTA to avoid double image */
@media (max-width: 768px){
  .partners--bg::before{ display:none !important; }
}

.bg-rice-shared .partners{ margin-top: clamp(-120px, -10vw, 0px); }

/* CTA: lower background focal point so text and form are clearer */
.cta.bg-rice{ background-position: center 62%; }

/* Slightly lower on mobile where form pushes content down more */
@media (max-width: 800px){
  .cta.bg-rice{ background-position: center 68%; }
}

/* Stronger override with ID specificity to ensure it wins over any later rules */
#cta.bg-rice{ background-position: 50% 60%; background-position-y: 60%; }
@media (max-width: 800px){
  #cta.bg-rice{ background-position: 50% 54%; background-position-y: 54%; }
}


/* Make partners background extend upward behind CTA without wrapper */
.partners--bg::before{
  content:""; position:absolute; left:0; right:0;
  /* extend upward to sit behind CTA card area */
  top: calc(-1 * clamp(300px, 40vh, 700px));
  height: calc(100% + clamp(300px, 40vh, 700px));
  background: url('../images/rice_terrace_bali.jpg') 50% 100% / cover no-repeat;
  pointer-events:none; z-index:1;
}

/* Ensure CTA content sits above the extended partners background */
#cta{ position:relative; z-index:3; }
#cta > .container{ position:relative; z-index:3; }
#cta .cta__card{ position:relative; z-index:3; }

/* Keep CTA top text area white, fade to transparent before the card */
#cta.section--cta{ background: transparent; }
/* Add extra spacing between CTA title → desc and desc → card */
#cta .cta__title + .cta__desc{ margin-top:12px; }
#cta .cta__desc + .cta__card{ margin-top:12px; }

#cta.section--cta::before{
  content:""; position:absolute; left:0; right:0; top:0;
  height: clamp(180px, 28vh, 380px);
  background: linear-gradient(
    180deg,
    #f7f5f0 0%,
    rgba(247,245,240,.98) 20%,
    rgba(247,245,240,.90) 40%,
    rgba(247,245,240,.70) 62%,
    rgba(247,245,240,.40) 82%,
    rgba(247,245,240,0) 100%
  );
  pointer-events:none; z-index:1;
}

/* Mobile tuning: keep the white fade behind the card and bring image up */
@media (max-width: 800px){
  /* Lower the fade so the solid background covers more of the form area */
  #cta.section--cta::before{
    height: clamp(460px, 68vh, 820px);
    background: linear-gradient(
      180deg,
      #f7f5f0 0%, #f7f5f0 36%,
      rgba(247,245,240,.96) 54%,
      rgba(247,245,240,.76) 72%,
      rgba(247,245,240,.38) 88%,
      rgba(247,245,240,0) 100%
    );
  }
  /* Make the form card a bit more compact on mobile */
  #cta .cta__card{ width: 72vw !important; max-width: 380px !important; padding-block: clamp(16px, 4.6vw, 24px); padding-inline: clamp(20px, 7.5vw, 38px) !important; border-radius: 20px; margin-inline: auto; }
  .cta__form{ gap: .55rem; }
  .form-field label{ margin-bottom: .4rem; }
  .form-field input{ padding: .62rem .9rem; }
  /* extra spacing under title/desc for mobile */
  .cta__title{ margin-bottom: 1.1rem; }
  .cta__desc{ margin-bottom: 1.25rem; }
  #cta.bg-rice{ background-position: 50% 46%; background-position-y: 46%; }
}


/* Small phones tuning (≤420px) */
@media (max-width: 420px){
  #cta .cta__card{
    width: 70vw !important; max-width: 70vw !important;
    padding-block: clamp(12px, 3.6vw, 18px);
    padding-inline: clamp(18px, 7vw, 30px) !important;
  }
  .form-field input{ padding: .56rem .8rem; }
  .cta__submit{ padding-block: .82rem; }
  .cta__title{ margin-bottom: 1.05rem; }
  .cta__desc{ margin-bottom: 1.25rem; }
}

/* XS phones tuning (e.g., iPhone 6/7/8/SE widths 320–375px) */
@media (max-width: 380px){
  #cta .cta__card{
    width: 66vw !important; max-width: 66vw !important;
    padding-block: clamp(10px, 3vw, 14px);
    padding-inline: clamp(16px, 7vw, 28px) !important;
    border-radius: 16px; margin-inline:auto;
  }
  .cta__form{ gap: .48rem; }
  .form-field input{ padding: .52rem .75rem; }
  .cta__submit{ padding-block: .78rem; }
  .cta__title{ margin-bottom: 1.1rem; }
  .cta__desc{ margin-bottom: 1.3rem; }
}

/* Ultra-small tuning (≤330px width) */
@media (max-width: 330px){
  #cta .cta__card{
    width: 62vw !important; max-width: 62vw !important;
    padding-block: clamp(8px, 2.8vw, 12px);
    padding-inline: clamp(16px, 8vw, 28px) !important;
    border-radius: 16px;
  }
  .cta__form{ gap: .45rem; }
  .form-field input{ padding: .48rem .7rem; }
  .cta__submit{ padding-block: .74rem; }
}

/* Desktop tuning: extend overlay lower, match page bg color, smooth multi-stop fade */
@media (min-width: 801px){
  #cta.section--cta::before{
    height: clamp(680px, 64vh, 1080px);
    background: linear-gradient(
      180deg,
      #f7f5f0 0%,
      #f7f5f0 34%,
      rgba(247,245,240,.96) 50%,
      rgba(247,245,240,.82) 62%,
      rgba(247,245,240,.60) 76%,
      rgba(247,245,240,.34) 88%,
      rgba(247,245,240,0) 100%
    );
  }
  /* Lower the image slightly behind the card */
  .bg-rice-shared{ background-position: 50% 66%; }
}

/* Desktop: keep CTA form design consistent with mobile style (shape, radius, colors) */
@media (min-width: 801px){
  /* Card */
  #cta .cta__card{ background:#fff; border:1px solid #eee; border-radius:25px; padding: clamp(34px, 3.6vw, 48px); }
  /* Fields */
  .cta__form .form-field label{ font-size:16px; line-height:19.2px; margin-bottom:6px; font-weight:400; }
  .cta__form .form-field input{ height:42px; padding:10px 14px; border-radius:25px; border:1px solid #ccc; background:#fff; color:#000; }
  /* Button */
  .cta__submit{ width:100%; min-height:42px; padding:11px 16px; border-radius:25px; }
}
  /* Keep button typography consistent on desktop as mobile */
  .cta__submit{ font-size:14px; font-weight:400; letter-spacing:normal; }


/* Desktop: reduce testimonial quote icon by 10px */
@media (min-width: 801px){
  .stories__title > .quote-icon{ width: clamp(44px, 6.5vw, 74px); }
}


/* Partners/brands section */
.partners{padding-block:clamp(64px,10vw,140px)}
.partners__title{text-align:center;font-weight:400;color:#fff;font-size:clamp(1rem,3.6vw,1.35rem);line-height:1.2;margin:0 auto clamp(16px,2.5vw,24px)}
/* Slightly more space below the partners title on background variant */
/* Prevent horizontal scroll from marquee on small screens */
.partners, .partners > .container{ overflow-x:hidden; }
@supports (overflow: clip){ .partners, .partners > .container, .partners__marquee{ overflow-x: clip; } }

.partners--bg .partners__title{margin-bottom:clamp(28px,4vw,36px)}

.partners__marquee{position:relative;overflow:hidden;width:100%;margin-top:.25rem}
.partners__marquee{ --partners-gap: calc(1.25rem + 3px); }
.partners__row{display:flex;gap:0;width:max-content;animation:partners-marquee 28s linear infinite;will-change:transform}
.partners__track{display:flex;align-items:center;gap:var(--partners-gap);padding-right:var(--partners-gap)}
.partners__badge{display:grid;place-items:center;align-self:center;background:transparent;border:0;padding:0;border-radius:0;white-space:nowrap;height:33px}
.partners__badge img{height:33px;width:auto;display:block}
/* Fine-tune specific partner logos for alignment/scale */
.partners__badge img[alt="Traveloka"]{ transform: translateY(-5px); }
.partners__badge img[alt="Booking.com"]{ height: 32px; }

/* Override default .partners bottom spacing when used with background variant */
.partners.partners--bg{padding-bottom:clamp(36px,8vh,96px)}

/* Align Partners container padding with other sections */
@media (max-width: 768px){ .partners > .container{ padding-inline: calc(var(--space) + 18px); } }
@media (min-width: 769px){ .partners > .container{ padding-inline: calc(var(--space) + 28px); } }
/* Ensure inner content centers horizontally in Partners */
.partners > .container{ display:grid; justify-items:center; }
/* Make title a centered block with manageable line-length on small screens */
.partners__title{ display:block; width:100%; max-width: min(42ch, 92%); }
/* Mobile: ensure smooth, continuous gradient like Home on Programs page */
@media (max-width: 768px){
  /* Re-enable upward extension + overlays specifically for Programs partners */
  .partners.partners--programs::before,
  .partners.partners--programs::after{
    display: block !important; /* override global mobile hide */
    top: calc(-1 * clamp(300px, 40vh, 700px));
    height: calc(100% + clamp(300px, 40vh, 700px));
  }
}




@keyframes partners-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Ensure partners content sits above overlays on Programs page for consistent white appearance */
.partners.partners--programs > .container{ position: relative; z-index: 3; }
.partners.partners--programs .partners__title{ color:#fff; opacity:1; }
/* Keep logos fully opaque (overlay sits behind content) */
.partners.partners--programs .partners__badge img{ opacity:1; }


.muted{color:var(--muted)}



/* Hero entrance animations */
.reveal{opacity:0;transform:translateY(22px);transition:opacity 1.25s cubic-bezier(.19,1,.22,1),transform 1.25s cubic-bezier(.19,1,.22,1);transition-delay:var(--reveal-delay,0s);will-change:opacity,transform}
.reveal.is-in{opacity:1;transform:translateY(0)}
/* Optional zoom variant */
.reveal--zoom{transform:scale(.98)}
.reveal--zoom.is-in{transform:none}
/* Stronger upward slide variant (for hero lines) */
.reveal--up{transform:translateY(56px)}
.reveal--up.is-in{transform:translateY(0)}

/* Slower variant for section titles */
.reveal--slow{transition:opacity 1.8s cubic-bezier(.19,1,.22,1),transform 1.8s cubic-bezier(.19,1,.22,1)}



/* Subtle background zoom on load */
.hero__bg{transform:scale(1.03);transform-origin:center}
.hero__bg.hero__bg--animate{animation:heroZoom 1750ms ease-out forwards}
@keyframes heroZoom{from{transform:scale(1.03)}to{transform:scale(1)}}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important}
  .hero__bg{transform:none !important;animation:none !important}
}


/* Slower, smoother hero entrance (Programs & Gallery): longer duration + gentle ease */
.hero .reveal,
.hero .reveal--up{
  transition: opacity 1.65s cubic-bezier(.22,.61,.36,1),
              transform 1.65s cubic-bezier(.22,.61,.36,1);
}
/* If hero background zoom is enabled, make it smoother too */
.hero .hero__bg.hero__bg--animate{
  animation-duration: 2200ms;
  animation-timing-function: cubic-bezier(.22,.61,.36,1);
}


/* Featured (modern) */
.featured__top{display:grid;grid-template-columns:1fr minmax(260px,420px);align-items:start;gap:clamp(16px,4vw,40px);margin-bottom:clamp(24px,5vw,56px)}
@media (max-width: 840px){.featured__top{grid-template-columns:1fr}}

.featured__title{font-family:"Playfair Display",ui-serif,Georgia,"Times New Roman",Times,serif;font-size:clamp(2.6rem,6vw,4.3rem);line-height:1.06;letter-spacing:-0.01em;margin:0}
.featured__title em{font-style:italic}
@media (min-width: 840px){.featured__aside{margin-top:.45rem}}
@media (min-width: 840px){.featured__title{transform:translateY(-6px)}}


.featured__aside p{margin:0 0 .8rem;color:var(--muted);line-height:1.45}
.featured__aside a{display:inline-flex;align-items:center;gap:.35rem;margin-top:.8rem;font-weight:700;color:var(--text);text-decoration:none}
.featured__aside a:hover{text-decoration:none}
.featured__aside a svg{ width:24px; height:auto; fill: currentColor; margin-left:calc(.4rem - 1px); opacity:0; transform: translateX(-4px); transition: opacity .35s ease, transform .35s ease; }
.featured__aside a:hover svg{ opacity:1; transform: translateX(2px); }

@media (max-width: 840px){.featured__title{font-size:3rem}.featured__aside p{margin:.6rem 0 .9rem}.featured__aside a{margin-top:.6rem}.featured__top{margin-bottom:36px}}

@media (max-width: 520px){.featured__title{font-size:3.2rem}.featured__aside p{margin:.8rem 0 1rem}.featured__aside a{margin-top:.6rem}.featured__top{margin-bottom:40px}}


.cards--featured{grid-template-columns:repeat(3,minmax(260px,1fr));gap:clamp(14px,1.8vw,22px);justify-content:center}
@media (max-width: 1180px){.cards--featured{grid-template-columns:repeat(3,1fr)}}
@media (max-width: 820px){.cards--featured{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 520px){.cards--featured{grid-template-columns:1fr}}

/* Balance odd last card on 2-column layout: make it full width */
@media (min-width: 521px) and (max-width: 820px){
  .cards--featured > .card:last-child:nth-child(odd){ grid-column: 1 / -1; }
}


/* Beliefs (section 3) */
/* Soft gray background only for Beliefs section */
.beliefs{ background:#ececec; padding-top: calc(clamp(48px,8vw,86px) + 5px); padding-bottom: calc(clamp(48px,8vw,86px) - 15px); }

.beliefs__header{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(16px,4vw,40px);align-items:start;margin-bottom:clamp(16px,4vw,40px)}
.beliefs__title{font-family:"Playfair Display",ui-serif,Georgia,"Times New Roman",Times,serif;font-size:clamp(2.4rem,5.6vw,4rem);line-height:1.04;letter-spacing:-0.01em;margin:0}
.beliefs__desc{margin:0;color:var(--muted);line-height:1.45}
@media (max-width: 840px){.beliefs__header{grid-template-columns:1fr}.beliefs__title{font-size:3rem}}

.beliefs__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,18px)}
@media (max-width: 980px){.beliefs__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 560px){.beliefs__grid{grid-template-columns:1fr}}

.beliefs__item{background:var(--surface);border:1px solid #eee;border-radius:12px;padding:1rem}
.beliefs__item h3{margin:.2rem 0 .25rem}
.beliefs__item p{margin:0;color:var(--muted)}

/* Beliefs layout refinements to match reference */
.beliefs__title em{font-style:italic;color:inherit}
.beliefs__left{display:flex;flex-direction:column;gap:clamp(10px,1.6vw,16px)}
/* Icon image inside circular badge */
.beliefs__icon img{width:52px;height:52px;object-fit:contain;display:block}
.beliefs__item--dark .beliefs__icon img{filter:none}

.beliefs__desc{max-width:52ch;margin-top:clamp(24px,6vw,80px)}
.beliefs__right{align-self:start}
.beliefs__stack{display:flex;flex-direction:column;gap:16px}
.beliefs__item{display:grid;grid-template-columns:64px 1fr;align-items:center;border-radius:18px;padding:18px 22px;gap:16px;box-shadow:0 2px 2px rgba(0,0,0,.02);}
.beliefs__item--light{background:transparent;border:1px solid #000;box-shadow:none}
.beliefs__item--dark{background:#0f0f0f;border:1px solid #1c1c1c;color:#f3f3f3}
.beliefs__item--dark h3,.beliefs__item--dark p{color:#f3f3f3}
.beliefs__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:999px;background:#f3f3f3;border:1px solid #e6e6e6}
.beliefs__item--dark .beliefs__icon{background:#151515;border-color:#2a2a2a}
.beliefs__item--light .beliefs__icon{background:transparent;border-color:transparent}
.beliefs__content h3{margin:.1rem 0 .2rem;font-size:1rem}
.beliefs__content p{margin:0;color:var(--muted)}
@media (max-width: 840px){
  .beliefs__desc{margin-top:10px}
}

/* Beliefs alignment tweak: lower heading and align paragraph with bottom stack */
@media (min-width: 841px){
  .beliefs__left{display:grid;grid-template-rows:1fr auto;align-self:stretch;padding-top:clamp(22px,4.5vw,72px);padding-bottom:clamp(14px,2.4vw,24px)}
  .beliefs__left .beliefs__desc{margin-top:0}
}



.card--overlay{position:relative;border:0;background:transparent;border-radius:18px;transform-origin:center;transition:transform .52s ease-in-out;will-change:transform}
.card--overlay .card__img{aspect-ratio:4/5;object-fit:cover;border-radius:18px;transition:opacity .3s ease}
.card--overlay:hover,.card--overlay:focus-within{transform:scale(1.03)}
.card--overlay:hover .card__img{transform:none}
.card--overlay .card__overlay{position:absolute;left:0;right:0;bottom:0;padding:14px;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.35) 40%,rgba(0,0,0,0) 70%);color:#fff;border-radius:0 0 18px 18px}
.card--overlay h3{margin:0 0 4px;color:#fff;font-size:1.35rem;line-height:1.2;font-weight:700}
.card--overlay .card__meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.9rem;opacity:.95}
.card--overlay .card__meta .meta{display:flex;align-items:center;gap:6px}
.card--overlay .card__meta .icon{width:16px;height:16px;display:inline-block;flex:0 0 auto;filter:brightness(0) invert(1);opacity:.92}

/* Global loading states for images to prevent FOUC */
.card--loading,.img-loading,.gallery-loading,.team-loading,.slide-loading{opacity:0;transition:opacity .4s ease-in-out}
.card--loaded,.img-loaded,.gallery-loaded,.team-loaded,.slide-loaded{opacity:1}




/* EXTRA TWEAK: smaller eyebrow tag on small iPhones (e.g., 375px wide) */
@media (max-width: 414px){
  .hero__eyebrow{ font-size: .60rem; padding: .26rem .54rem; letter-spacing: .08em; }
}

/* Positioning tweaks (softer) for small iPhones */
@media (max-width: 414px){
  .hero{ min-height: 86svh; }
  .hero__content{ margin-top: -60px; padding-bottom: 8rem; }
  .hero__footer{ bottom: calc(24px + env(safe-area-inset-bottom)); }
}
@media (max-width: 375px){
  .hero{ min-height: 88svh; }
  .hero__content{ margin-top: -72px; padding-bottom: 7rem; }
  .hero__footer{ bottom: calc(28px + env(safe-area-inset-bottom)); }
}



.card--overlay .price{font-weight:700;white-space:nowrap}


/* Mobile-only: center hero content like the provided reference */
@media (max-width: 768px){
  .hero{ align-items: center; justify-items: center; }
  /* Align hero side padding with hamburger (same as .nav__inner) */
  .hero > .container{ padding-inline: calc(var(--space) + 18px); }
  .hero__content{
    margin-top: 0;               /* cancel negative offset */
    text-align: center;          /* center text */
    padding-top: 5rem;           /* comfortable top spacing */
    padding-bottom: 8rem;        /* tidy spacing below title */
    padding-inline: 0;           /* rely on container padding for left/right align */
  }
  .hero__bg{
    background-position: 50% 52%;/* show more of the mountain peak */
    transform: scale(1.06);      /* subtle zoom like reference */
  }
}


/* Fix: prevent hero title from overflowing on Programs hero (mobile) */
@media (max-width: 768px){
  .hero--programs .hero__title span{ white-space: normal !important; word-break: normal; overflow-wrap: break-word; }
}


/* Gallery video section (match reference height above footer) */
.journey-video-secion{ position: relative; display:block; width:100%; margin-top:40px; }
.journey-video-secion .w-background-video{ position: relative; display:block; width:100%; height:100%; overflow:hidden; }
.journey-video-secion video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Desktop/tablet: match reference height ~800px at 1440px viewport */
@media (min-width: 769px){
  .journey-video-secion{ height: 800px; }
}

/* Mobile: keep good aspect without being too tall */
@media (max-width: 768px){
  .journey-video-secion{ height: clamp(360px, 54vh, 560px); }
}

/* Force wrapper atoms to fill height and zoom video slightly to cover any letterboxing */
.journey-video-secion{ overflow:hidden; }
.journey-video-secion .w-background-video,
.journey-video-secion .w-background-video-atom{ width:100% !important; height:100% !important; }
.journey-video-secion #awt-bg-video{
  position:absolute; inset:0; width:100% !important; height:100% !important;
  min-width:100%; min-height:100%; object-fit:cover; transform:scale(1.06); transform-origin:center;
}

/* On larger screens, allow a tiny extra zoom so bottom edge is always covered */
@media (min-width: 1024px){
  .journey-video-secion #awt-bg-video{ transform: scale(1.08); }
}



/* Home: Background harmony across sections */
/* 1) Journey video area: ensure underlying background matches page */
.journey, .journey__media{ background-color: #f7f5f0; }

/* 2) Real stories: keep consistent page background */
.stories{ background-color: #f7f5f0; }

/* 3) CTA default background when used outside shared wrapper: align with page bg */
.section--cta{ background: linear-gradient(90deg, #f7f5f0 0%, #faf8f4 100%) !important; }

/* 4) Shared wrapper bottom fade: soften dark overlay for smoother blend */
.bg-rice-shared::after{
  background: linear-gradient(180deg, rgba(247,245,240,0) 0%, rgba(0,0,0,.18) 100%) !important;
}

/* 5) Partners overlay: use page bg hues on top fade and reduce darkening */
.partners--bg::after{
  background:
    linear-gradient(
      180deg,
      #f7f5f0 0px,
      #f7f5f0 clamp(50px, 6vh, 100px),
      rgba(247,245,240,0.96) clamp(90px, 11vh, 160px),
      rgba(247,245,240,0.88) clamp(130px, 15vh, 220px),
      rgba(247,245,240,0.75) clamp(170px, 19vh, 280px),
      rgba(247,245,240,0.58) clamp(210px, 23vh, 340px),
      rgba(247,245,240,0.38) clamp(250px, 27vh, 400px),
      rgba(247,245,240,0.20) clamp(310px, 34vh, 500px),
      rgba(247,245,240,0.10) clamp(370px, 42vh, 620px),
      rgba(247,245,240,0.04) clamp(430px, 50vh, 720px),
      rgba(247,245,240,0.00) clamp(490px, 58vh, 820px)
    ),
    linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0,0,0,.18) 100%) !important;
}


/* Programs: shared background wrapper for CTA + Partners (like Home) */
.bg-programs-shared{ position:relative; overflow:hidden; background:url('../images/balinese_house_compound.jpg') 50% 66% / cover no-repeat; }
/* Make inner CTA transparent so the shared background is visible */
.bg-programs-shared .section--cta:not(.bg-rice){ background: transparent !important; }
/* Top fade matches page background (#f7f5f0) for smooth blend into previous section */
.bg-programs-shared::before{ content:""; position:absolute; left:0; right:0; top:0; height:clamp(140px,24vh,340px); background:linear-gradient(180deg,#f7f5f0 0%,rgba(247,245,240,.98) 16%,rgba(247,245,240,.90) 32%,rgba(247,245,240,.70) 56%,rgba(247,245,240,.40) 78%,rgba(247,245,240,0) 100%); pointer-events:none; z-index:0; }
/* Bottom fade softens into a subtle darkening for readability */
.bg-programs-shared::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:clamp(120px,24vh,320px); background:linear-gradient(180deg, rgba(247,245,240,0) 0%, rgba(0,0,0,.18) 100%); pointer-events:none; z-index:0; }
.bg-programs-shared > *{ position:relative; z-index:1; }
/* Avoid double background when using shared wrapper: let wrapper own the image */
.bg-programs-shared .partners--bg{ background: transparent !important; }
.bg-programs-shared .partners--bg::before,
.bg-programs-shared .partners--bg::after{ display: none !important; }
/* Mobile tuning similar to Home */
@media (max-width:800px){
  .bg-programs-shared{ background-position:50% 54%; }
  .bg-programs-shared::before{ height:clamp(380px,60vh,760px); }
}

/* About: shared background wrapper for CTA + Partners using waterfall image */
.bg-about-shared{ position:relative; overflow:hidden; background:url('../images/waterfall_trekking.jpg') 50% 66% / cover no-repeat; }
.bg-about-shared .section--cta:not(.bg-rice){ background: transparent !important; }
.bg-about-shared::before{ content:""; position:absolute; left:0; right:0; top:0; height:clamp(140px,24vh,340px); background:linear-gradient(180deg,#f7f5f0 0%,rgba(247,245,240,.98) 16%,rgba(247,245,240,.90) 32%,rgba(247,245,240,.70) 56%,rgba(247,245,240,.40) 78%,rgba(247,245,240,0) 100%); pointer-events:none; z-index:0; }
.bg-about-shared::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:clamp(120px,24vh,320px); background:linear-gradient(180deg, rgba(247,245,240,0) 0%, rgba(0,0,0,.18) 100%); pointer-events:none; z-index:0; }
.bg-about-shared > *{ position:relative; z-index:1; }
.bg-about-shared .partners--bg{ background: transparent !important; }
.bg-about-shared .partners--bg::before,
.bg-about-shared .partners--bg::after{ display: none !important; }
@media (max-width:800px){
  .bg-about-shared{ background-position:50% 54%; }
  .bg-about-shared::before{ height:clamp(380px,60vh,760px); }
}

/* Base offset for combined CTA+Partners block across pages */
.bg-rice-shared, .bg-programs-shared, .bg-about-shared{ margin-top:-30px }

/* Page-specific fine-tuning */
.bg-rice-shared{ margin-top:-23px }
.bg-programs-shared{ margin-top:-34px }
.bg-about-shared{ margin-top:-38px }


/* Programs: reduce partners height inside shared wrapper to avoid heavy image upscaling */
.bg-programs-shared .partners--bg{
  min-height: clamp(92vh, 110vh, 130vh);
  padding-top: clamp(32px, 12vh, 20vh);
  padding-bottom: clamp(12px, 4vh, 40px);
}
/* Fine-tune background focal point for Programs */
@media (min-width: 801px){ .bg-programs-shared{ background-position: 50% 62%; } }
@media (max-width: 800px){ .bg-programs-shared{ background-position: 50% 56%; } }


/* Exact mobile (390px) overrides to match reference hero spacing and typography */
@media (max-width: 390px){
  /* Container side padding: exactly 20px like reference */
  .hero > .container{ padding-inline: 20px !important; }

  /* Hero content spacing and alignment */
  .hero__content{
    margin-top: 40px !important;     /* gap from nav to hero block */
    padding-top: 40px !important;    /* internal top padding within hero block */
    /* keep existing bottom spacing from previous rules unless explicitly needed */
    text-align: center !important;
    padding-inline: 0 !important;    /* rely on container padding */
  }

  /* Eyebrow (label) chip */
  .hero__eyebrow{
    font-size: 14px !important;
    line-height: 20px !important;
    padding: 10px 24px !important;
    letter-spacing: 0 !important;
  }

  /* Title typography + layout: DM Sans base, Playfair italic words */
  .hero__title{
    font-family: 'DM Sans', Inter, system-ui, sans-serif !important;
    font-size: 40px !important;
    line-height: 40px !important;
    letter-spacing: 0 !important;
    max-width: none !important;
  }
  .hero__title em{
    font-family: 'Playfair Display', sans-serif !important;
    font-style: italic !important;
    line-height: 32px !important;
    display: inline-block !important;
    margin-bottom: 4px !important;   /* slight tighter line like reference */
  }
  .hero__title span{ display:block !important; white-space: normal !important; }
  .hero__title span + span{ margin-top: 6px !important; }
}


/* Tighter mobile range: 376px–390px (match navbar padding; shrink eyebrow; avoid overlaps) */
@media (min-width: 376px) and (max-width: 390px){
  /* Sync page/container padding with navbar */
  .nav__inner{ padding-inline: 20px !important; }
  .container{ padding-inline: 20px !important; }
  .hero > .container{ padding-inline: 20px !important; }

  /* Eyebrow chip smaller */
  .hero__eyebrow{ font-size: 12px !important; line-height: 18px !important; padding: 6px 14px !important; }
  /* Extra spacing between eyebrow and title to avoid crowding */
  .hero__title{ margin-top: 10px !important; }
}

/* 375px and below: slightly smaller title + eyebrow for compact screens */
@media (max-width: 375px){
  /* Sync paddings */
  .nav__inner{ padding-inline: 20px !important; }
  .container{ padding-inline: 20px !important; }
  .hero > .container{ padding-inline: 20px !important; }

  /* Eyebrow smaller again */
  .hero__eyebrow{ font-size: 11px !important; line-height: 16px !important; padding: 6px 12px !important; }

  /* Title a bit smaller to ensure no line wrap collisions */
  .hero__title{ font-size: 36px !important; line-height: 38px !important; margin-top: 10px !important; }
  .hero__title em{ line-height: 30px !important; }
}


/* Mobile narrow general: <=375px (packages/featured section) */
@media (max-width: 375px){
  .featured > .container{ padding-inline:20px !important; }

  /* Title sizes */
  .featured__title{ font-size:34px; line-height:34px; }
  .featured__title em{ line-height:27.2px; }

  /* CTA sizes */
  .featured__aside{ display:flex; flex-direction:column; gap:28px; }
  .featured__aside p{ font-size:16px; line-height:20.8px; }
  .featured__aside a{ font-size:16px; line-height:19.2px; font-weight:600; }

  /* Cards */
  .cards.cards--featured{ grid-template-columns: 1fr; gap:16px; }
  .cards--featured .card--overlay{ border-radius:25px; }
  .cards--featured .card--overlay .card__img{ width:100%; height:350px; aspect-ratio:auto; object-fit:cover; border-radius:25px; }
  .cards--featured .card--overlay .card__overlay{ padding:16px !important; border-radius:0 0 25px 25px; }

  /* Card text */
  .card--overlay h3{ font-size:16px; line-height:20.8px; font-weight:700; }
  .card--overlay .card__meta{ font-size:16px; line-height:19.2px; }

  /* Beliefs/Values typography to match Webflow */
  #beliefs .beliefs__title{ font-size:34px; line-height:34px; text-align:center; }
  #beliefs .beliefs__title em{ line-height:27.2px; }
  #beliefs .beliefs__desc{ font-size:16px; line-height:20.8px; }
  #beliefs .beliefs__content h3{ font-size:16px; line-height:19.2px; font-weight:600; }
  #beliefs .beliefs__content p{ font-size:16px; line-height:19.2px; }

  /* Stories/Testimonial typography to match Webflow */
  .stories__title{ font-size:34px; line-height:34px; }
  .stories__title em{ line-height:27.2px; }
  .story__text{ font-size:16px; line-height:20.8px; }
  .story__author .meta strong,
  /* Mobile: exact size for quote image and tighter dots spacing */
  .quote-icon{ width:40px; }
  .stories__quote{ display:none; }
  .stories__dots button{ margin:0 4px; }

  .story__author .meta span{ font-size:14px; line-height:20px; }
  /* Quote mark size to match Webflow at 375px */
  .stories__quote{ font-size:40px; line-height:1; }
  /* Ensure consistent page padding for stories container on small mobile */
  .stories > .container{ padding-inline: 20px !important; }
  /* Remove peek on small mobile to respect page padding */
  .stories{ --stories-peek: 0px; }
  .stories__viewport{ -webkit-clip-path:none; clip-path:none; margin-right:0; }


/* Mobile small: match Webflow newsletter (CTA) typography, form sizes, bg height */
@media (max-width: 375px){
  /* Title sizes like testimonial/title pattern */
  .cta__title{ font-size:34px; line-height:34px; }
  .cta__title em{ line-height:27.2px; }
  .cta__desc{ font-size:16px; line-height:20.8px; }
  .form-field label{ font-size:16px; line-height:19.2px; margin-bottom:6px; font-weight:400; }
  .form-field input{ height:38px; font-size:14px; line-height:20px; padding:8px 12px; border-radius:25px; border:1px solid #ccc; background:#fff; color:#000; }
  .cta__submit{ font-size:14px; font-weight:400; letter-spacing:normal; padding:9px 15px; min-height:38px; border-radius:25px; width:100%; }
  /* Align with page padding */
  /* iPhone 8-like (375x667): add more breathing room */
  #cta .cta__title{ margin-top:7px; margin-bottom:29px; }
  #cta .cta__title + .cta__desc{ margin-top:0; }
  #cta .cta__desc + .cta__card{ margin-top:25px !important; }

  .cta > .container{ padding-inline:20px !important; }
  .partners > .container{ padding-inline:20px !important; }
  /* Partners marquee speed same as reference */
  .partners__row{ animation-duration: 28s; }
  /* Exact Webflow-like layout for small phones: stack fields with 10px gap */
  .cta__form{ grid-template-columns: 1fr !important; gap: 0 !important; }
  #cta .cta__card{ width:100% !important; max-width:100% !important; padding:30px !important; background:#fff !important; border:1px solid #eee !important; box-shadow:none !important; border-radius:25px !important; }
  /* Match Webflow vertical spacing: label→input 6px; between groups 20–30px */
  .cta__form .form-field + .form-field{ margin-top:20px; }
  .cta__form .form-field:nth-of-type(2){ margin-top:30px; }
  .cta__form .form-field--full{ margin-top:20px !important; }
  .cta__submit{ margin-top:20px; }


  /* Partners background (375px wide): match reference spacing rather than fixed height */
  .partners--bg{
    /* Make background visually shorter on small phones */
    min-height: calc(clamp(72svh, 82svh, 92svh) - 37px);
    /* Slightly raise focal point */
    background-position: 50% 56%;
    padding-top: 14px;
    padding-bottom: 0px;  /* -10px again (min 0px) */
  }
  /* Prevent overlay from extending beyond the section on this viewport */
  .partners--bg::after{ top: 0; height: 100%; }
  /* Neutralize upward pull so spacing from CTA matches reference */
  .bg-rice-shared .partners{ margin-top: 0; }
  /* Ensure our mobile paddings override earlier .partners.partners--bg rule */
  .partners.partners--bg{ padding-top: 14px; padding-bottom: 0px; }
  /* Nudge content up a bit to visually shorten the background */
  .partners--bg > .container{ transform: translateY(-52px); padding-bottom: 0; }

  /* Reduce CTA bottom padding on 375px width to bring Partners 15px closer */
  #cta.section--cta{ padding-bottom: 33px; }

  /* Footer (375px): loosen spacing only */
  .footer__grid{ padding-top: calc(clamp(36px, 5vw, 60px) + 13px); gap: calc(clamp(16px, 3vw, 36px) + 13px); }
  .footer .container{ padding-inline: 20px !important; }
  .footer{ padding-bottom: calc(clamp(12px, 2.6vw, 34px) - 10px); }
  .footer__grid{ padding-bottom: calc(clamp(36px, 5vw, 60px) - 12px); }
  .footer__copyright{ padding-top: 2px; }


@media (max-width: 768px){
  .footer__divider{ display:none; }
  .footer__copyright{
    width:100%;
    border-top:2px solid rgba(255,255,255,.24);
    margin-top:14px;
    padding-top:12px;
    justify-content:flex-start;
    text-align:left;
  }
}




@media (max-width: 414px) and (min-width: 376px){
  /* Slightly wider small phones: keep form scale consistent */
  .form-field input{ height:38px; padding:8px 12px; border-radius:25px; border:1px solid #ccc; }
  /* Apply same spacing rules for 376–414px */
  .cta__form .form-field + .form-field{ margin-top:20px; }
  .cta__form .form-field:nth-of-type(2){ margin-top:30px; }
  .cta__form .form-field--full{ margin-top:20px !important; }
  .cta__submit{ margin-top:20px; }

  .cta__submit{ min-height:38px; font-weight:400; letter-spacing:normal; padding:9px 15px; border-radius:25px; }
}

@media (max-width: 375px) and (max-height: 528px){
  /* Shorter phone: ensure white fade behind form tall enough */
  #cta.section--cta::before{ height: 460px; }
}
@media (max-width: 375px) and (min-height: 529px) and (max-height: 700px){
  /* Taller 667px phone: slightly taller white fade */
  #cta.section--cta::before{ height: 520px; }
}




}

/* Mobile narrow device-specific: 375x528 (packages/featured section) */
@media (max-width: 375px) and (max-height: 528px){
  /* Container side padding parity */
  .featured > .container{ padding-inline:20px !important; }

  /* Title sizes to match reference (≈34/34, italic line-height ~27.2px) */
  .featured__title{ font-size:34px; line-height:34px; }
  .featured__title em{ line-height:27.2px; }

  /* CTA text/button sizes */
  .featured__aside{ display:flex; flex-direction:column; gap:28px; }
  .featured__aside p{ font-size:16px; line-height:20.8px; }
  .featured__aside a{ font-size:16px; line-height:19.2px; font-weight:600; }

  /* One-column stack with 16px gap */
  .cards.cards--featured{ grid-template-columns: 1fr; gap:16px; }

  /* Card image sizing + radius */
  .cards--featured .card--overlay{ border-radius:25px; }
  .cards--featured .card--overlay .card__img{
    width:100%; height:350px; aspect-ratio:auto; object-fit:cover; border-radius:25px;
  }
  .cards--featured .card--overlay .card__overlay{ padding:16px !important; border-radius:0 0 25px 25px; }

  /* Card text sizes to mirror reference */
  .card--overlay h3{ font-size:16px; line-height:20.8px; font-weight:700; }
  .card--overlay .card__meta{ font-size:16px; line-height:19.2px; }
}