/* ============================================================
   SEEYOU KEMBALI — Design tokens
   ============================================================ */
:root{
  /* Brand palette */
  --gold:#AA8B69;
  --ivory:#FCF8F3;
  --white:#FFFFFF;
  --black:#000000;

  /* Derived tones */
  --gold-deep:#8B6F4E;
  --gold-text:#856A49;   /* small gold text on light — AA 4.78:1 */
  --taupe:#967E6B;       /* the monogram's own colour, from the logo artwork */
  --taupe-deep:#6F5C4C;
  --gold-btn:#8B6F4E;    /* filled button — white label AA 4.69:1 */
  --gold-pale:#E4D3BC;
  --ink:#0C0A09;
  --ink-soft:#332C25;
  --muted:#5C544C;
  --nav:#494340;
  --noir:#151413;
  --noir-cta:#111110;
  --noir-2:#14100D;
  --line:rgba(170,139,105,.34);
  --line-faint:rgba(170,139,105,.18);
  --hair:rgba(23,19,16,.10);

  /* Type */
  --f-display:'Cinzel', Georgia, serif;
  --f-sans:'Montserrat', system-ui, sans-serif;
  --f-serif:'Crimson Pro', Georgia, serif;

  /* Spacing scale (8pt) */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --s6:64px; --s7:96px; --s8:128px;

  --gutter:clamp(20px,5vw,68px);
  --container:1380px;
  --section:clamp(76px,9vw,150px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--f-sans);font-weight:400;font-size:15px;line-height:1.85;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:500}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

:focus-visible{outline:1.5px solid var(--gold);outline-offset:4px}

.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.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}

/* ---------- Type roles ---------- */
.eyebrow{
  font-family:var(--f-sans);font-size:.78rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold-text);
}
.display{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(2.3rem,5.5vw,4.45rem);line-height:1.15;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink);font-weight:500;
}
.sec-title{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.4rem,2.72vw,2.22rem);letter-spacing:.09em;line-height:1.28;
  text-transform:uppercase;
}
.card-title{
  font-family:var(--f-sans);font-weight:500;font-size:.94rem;
  letter-spacing:.17em;text-transform:uppercase;line-height:1.5;
}
.lede{
  font-size:1.06rem;line-height:2.02;color:var(--ink-soft);max-width:33ch;font-weight:400;
}
.body-sm{font-size:.95rem;line-height:1.92;color:var(--muted)}

/* ---------- Ornament rule (section separator) ---------- */
.rule{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px}
.rule i{display:block;height:1px;width:clamp(48px,7vw,86px);background:linear-gradient(90deg,transparent,var(--gold))}
.rule i+i{background:linear-gradient(90deg,var(--gold),transparent)}
.rule svg{width:16px;height:16px;color:var(--gold);flex:none}

.sec-head{text-align:center;margin-bottom:clamp(40px,5vw,72px)}
.sec-head .eyebrow{display:block;margin-bottom:14px}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--gold-btn);--btn-fg:#fff;--btn-bd:var(--gold-btn);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:62px;padding:0 36px;border-radius:1px;
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);
  font-size:.75rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .45s var(--ease),border-color .45s var(--ease),background-color .45s var(--ease);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.btn:hover::after{transform:translateY(0)}
.btn:hover{color:#fff;border-color:var(--ink)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line)}
.btn--ghost::after{background:var(--gold)}
.btn--ghost:hover{border-color:var(--gold)}
.btn--onlight{--btn-bg:transparent;--btn-fg:var(--gold-deep);--btn-bd:var(--line)}
.btn--onlight::after{background:var(--gold)}
.btn--onlight:hover{border-color:var(--gold)}

/* ============================================================
   Logo lockup
   ============================================================ */
.kb{
  width:46px;height:46px;flex:none;
  background:url("kb-monogram.ca7cea51.png") center/contain no-repeat;
}
.lockup{display:flex;align-items:center;gap:12px}
.lockup__type{line-height:1}
.lockup__name{
  font-family:var(--f-display);font-size:.62rem;letter-spacing:.34em;
  color:var(--ink-soft);display:block;margin-bottom:4px;
}
.lockup__word{
  font-family:var(--f-display);font-size:1.05rem;letter-spacing:.16em;
  color:var(--ink);display:block;
}
.lockup__desc{
  font-family:var(--f-sans);font-size:.52rem;font-weight:500;letter-spacing:.3em;
  color:var(--taupe-deep);display:block;margin-top:5px;text-transform:uppercase;
}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:fixed;inset:0 0 auto;z-index:60;
  padding-block:18px;
  border-bottom:1px solid transparent;
  transition:background-color .5s var(--ease),border-color .5s var(--ease),padding .5s var(--ease),backdrop-filter .5s;
}
.site-header.is-stuck{
  background:rgba(252,248,243,.94);backdrop-filter:blur(10px);
  border-bottom-color:var(--line-faint);padding-block:12px;
}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,2vw,32px)}
.nav{display:flex;align-items:center;gap:clamp(14px,1.5vw,24px);white-space:nowrap}
.nav a{
  font-size:.79rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  position:relative;padding-block:6px;color:var(--nav);
  transition:color .35s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.header-cta{min-height:52px;padding:0 24px;white-space:nowrap}
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center}
.nav-toggle i{display:block;width:22px;height:1px;background:var(--ink);position:relative;transition:background .3s}
.nav-toggle i::before,.nav-toggle i::after{content:"";position:absolute;left:0;width:22px;height:1px;background:var(--ink);transition:transform .4s var(--ease)}
.nav-toggle i::before{top:-7px}.nav-toggle i::after{top:7px}
.nav-open .nav-toggle i{background:transparent}
.nav-open .nav-toggle i::before{transform:translateY(7px) rotate(45deg)}
.nav-open .nav-toggle i::after{transform:translateY(-7px) rotate(-45deg)}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:55;background:var(--ivory);
  padding:96px 24px 40px;overflow:auto;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s;
}
.nav-open .drawer{opacity:1;visibility:visible;transform:none}
.drawer a{
  font-family:var(--f-display);font-size:1.22rem;letter-spacing:.14em;
  text-transform:uppercase;padding:11px 0;
}
/* The header lockup stays visible above the drawer, so repeating the
   monogram here only collided with it once the menu grew to eight items. */
.drawer .kb{display:none}
.drawer .btn{
  font-family:var(--f-sans);font-size:.79rem;font-weight:500;letter-spacing:.2em;
  margin-top:24px;padding:0 34px;
}
.drawer__motif{position:absolute;bottom:-40px;right:-60px;width:340px;color:var(--gold);opacity:.13}

/* ============================================================
   Hero
   ============================================================ */
.hero{position:relative;background:var(--ivory);isolation:isolate;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media .photo{position:absolute;inset:0;border-radius:0}
.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(252,248,243,.92) 0%,rgba(252,248,243,.55) 42%,rgba(252,248,243,.08) 72%);
}
.hero__inner{
  position:relative;
  min-height:min(100svh,940px);
  display:flex;align-items:flex-end;
  padding-top:clamp(140px,20vh,200px);padding-bottom:clamp(52px,8vh,88px);
}
.hero__copy{max-width:560px}
.hero__eyebrow{display:block;margin-bottom:20px}
.hero .display{margin-bottom:26px}
.hero__line{width:64px;height:1px;background:var(--gold);margin-bottom:26px}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero__motif{
  position:absolute;top:6%;right:-70px;width:min(430px,42vw);z-index:-1;
  color:var(--gold);opacity:.3;pointer-events:none;
}
.hero__scroll{
  position:absolute;right:var(--gutter);bottom:38px;display:flex;align-items:center;gap:12px;
  font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-deep);
}
.hero__scroll i{display:block;width:52px;height:1px;background:var(--gold);transform-origin:left;animation:sweep 2.8s var(--ease) infinite}
@keyframes sweep{0%,100%{transform:scaleX(.25)}50%{transform:scaleX(1)}}

@media(min-width:1024px){
  .hero__media{inset:0 0 0 34%}
  .hero__media::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,var(--ivory) 0%,rgba(252,248,243,.72) 12%,rgba(252,248,243,0) 34%);
  }
  .hero__scrim{display:none}
  .hero__inner{align-items:center}
}

/* ============================================================
   Value props
   ============================================================ */
.values{background:var(--ivory);padding-block:clamp(56px,7vw,92px);border-top:1px solid var(--hair)}
.values__grid{display:grid;gap:40px;grid-template-columns:1fr}
.value{text-align:center;padding-inline:clamp(0px,2vw,32px)}
.value svg{width:38px;height:38px;color:var(--gold);margin:0 auto 20px;stroke-width:1.1}
.value h3{margin-bottom:12px}
@media(min-width:640px){.values__grid{grid-template-columns:repeat(3,1fr);gap:44px 0}}
@media(min-width:1024px){
  .values__grid{grid-template-columns:repeat(3,1fr);gap:0}
  .value+.value{border-left:1px solid var(--hair)}
}

/* ============================================================
   Photo frame
   ============================================================ */
.photo{position:relative;overflow:hidden;border-radius:2px;
  background:linear-gradient(165deg,#F6EBDA 0%,#E7D3B9 55%,#D8C2A4 100%)}
.photo__art{position:absolute;inset:0;width:100%;height:100%}
.photo__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s var(--ease),transform 1.4s var(--ease);
}
.photo__img.is-loaded{opacity:1}
.photo__art{transition:transform 1.4s var(--ease)}
.js .photo--reveal .photo__art,.js .photo--reveal .photo__img{transform:scale(1.1)}
.js .is-in .photo--reveal .photo__art,.js .is-in .photo--reveal .photo__img{transform:scale(1)}
a:hover .photo__art,a:hover .photo__img,
.card:hover .photo__art,.card:hover .photo__img{transform:scale(1.05)}

/* ============================================================
   Signature experiences
   ============================================================ */
.experiences{background:var(--white);padding-block:var(--section);position:relative;overflow:hidden}
.experiences__motif{position:absolute;left:-90px;bottom:-40px;width:320px;color:var(--gold);opacity:.14;pointer-events:none}
.dest-track{display:grid;grid-auto-flow:column;grid-auto-columns:76%;gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;
  margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);
  scrollbar-width:none;}
.dest-track::-webkit-scrollbar{display:none}
.dest{scroll-snap-align:center}
.dest .photo{aspect-ratio:4/5}
.dest h3{margin:22px 0 8px}
.dest__tag{
  display:block;font-size:.58rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-text);margin:20px 0 -14px;
}
.dest__tag+h3{margin-top:20px}
.dest__mark{width:20px;height:1px;background:var(--gold);margin-bottom:14px;transition:width .5s var(--ease)}
.dest:hover .dest__mark{width:44px}
@media(min-width:768px){
  .dest-track{grid-auto-columns:34%}
}
@media(min-width:1100px){
  /* Thirteen cards leave three on the last row. Flex wrapping lets that
     row centre itself instead of hanging off to the left. */
  .dest-track{display:flex;flex-wrap:wrap;justify-content:center;
    gap:clamp(38px,4vw,56px) clamp(14px,1.6vw,22px);
    overflow:visible;margin-inline:0;padding-inline:0}
  .dest-track>.dest{flex:0 0 calc((100% - 4*clamp(14px,1.6vw,22px))/5)}
}
.section-cta{display:flex;justify-content:center;margin-top:clamp(44px,5vw,70px)}
.cta-pair{gap:14px;flex-wrap:wrap}

/* ============================================================
   Events
   ============================================================ */
.events{background:var(--ivory);padding-block:var(--section)}
.events__grid{display:grid;gap:clamp(18px,2.4vw,26px);grid-template-columns:repeat(2,1fr)}
.event .photo{aspect-ratio:4/5}
.event h3{margin:20px 0 8px}
@media(min-width:1024px){.events__grid{grid-template-columns:repeat(4,1fr)}}

/* ============================================================
   Difference
   ============================================================ */
.difference{background:var(--white);padding-block:var(--section);position:relative;overflow:hidden}
.difference__motif{position:absolute;right:-150px;top:34%;width:min(360px,30vw);color:var(--gold);opacity:.13;pointer-events:none}
.difference__grid{display:grid;gap:clamp(40px,5vw,80px);align-items:center;position:relative}
.difference .photo{aspect-ratio:1/1}
.difference .sec-title{text-align:left}
.difference__head{margin-bottom:36px}
.difference__head .rule{justify-content:flex-start;margin-top:18px}
.difference__head .rule i:first-child{background:linear-gradient(90deg,var(--gold),transparent);width:72px}
.difference__head .rule i:last-child{display:none}
.feature{display:flex;gap:20px;padding-block:20px;border-bottom:1px solid var(--hair)}
.feature:last-child{border-bottom:0}
.feature svg{width:30px;height:30px;flex:none;color:var(--gold);stroke-width:1.1;margin-top:2px}
.feature h3{margin-bottom:4px}
@media(min-width:1024px){.difference__grid{grid-template-columns:1.02fr .98fr}}

/* ============================================================
   Final CTA
   ============================================================ */
.finale{
  position:relative;background:var(--noir-cta);color:var(--ivory);
  padding-block:clamp(96px,12vw,176px);text-align:center;overflow:hidden;
  --batik:url("bali-batik-ornament.c8a2fc73.webp");
}
/* Signature batik ornament: full-width band at the foot of the section,
   mirrored and dimmed at the head so the band reads as a frame. */
.finale::after,.finale::before{
  content:"";position:absolute;left:0;right:0;
  height:min(360px,25vw);pointer-events:none;
  background:var(--batik) center bottom/100% auto no-repeat;
  -webkit-mask-image:linear-gradient(to top,#000 34%,rgba(0,0,0,.35) 74%,transparent 100%);
          mask-image:linear-gradient(to top,#000 34%,rgba(0,0,0,.35) 74%,transparent 100%);
}
.finale::after{bottom:0;opacity:.55}
.finale::before{top:0;transform:scaleY(-1);opacity:.3}
.finale .wrap{position:relative;z-index:1}
.finale h2{
  font-family:var(--f-display);font-size:clamp(1.7rem,4.2vw,3.2rem);
  letter-spacing:.06em;line-height:1.25;text-transform:uppercase;color:var(--white);
}
.finale p{margin:20px auto 38px;color:rgba(252,248,243,.86);font-size:1rem;max-width:42ch}
.finale .rule i{background:linear-gradient(90deg,transparent,var(--gold))}
.finale .rule{margin-bottom:26px;margin-top:0}
.finale__eyebrow{display:block;margin-bottom:22px;color:var(--gold)}
.finale p.finale__body{max-width:60ch;margin:24px auto 0;line-height:1.85;font-size:clamp(.95rem,1.1vw,1.02rem)}
.finale p.finale__lead{max-width:36ch;margin:30px auto 36px;font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.05rem,1.7vw,1.3rem);letter-spacing:.04em;line-height:1.5;color:var(--white)}
.finale p.finale__note{max-width:none;margin:20px auto 0;font-size:.8rem;letter-spacing:.02em;color:rgba(252,248,243,.66)}
.finale p.finale__tag{max-width:none;margin:44px auto 0;font-family:var(--f-display);font-size:.78rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.finale__tag span,.finale__lead span{display:inline-block}
.finale p.finale__lead,.finale__eyebrow~h2{text-wrap:balance}
.finale .btn:hover::after{background:var(--white)}
.finale .btn:hover{color:var(--ink);border-color:var(--white)}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{background:var(--noir);color:rgba(252,248,243,.84);padding-top:clamp(56px,7vw,88px);font-size:.86rem}
.site-footer .lockup__word,.site-footer .lockup__name{color:var(--ivory)}
.site-footer .lockup__desc{color:var(--taupe)}
.site-footer__grid{display:grid;gap:clamp(36px,4vw,48px);grid-template-columns:1fr}
.footer-brand p{margin:24px 0 26px;max-width:30ch;line-height:1.9;color:rgba(252,248,243,.76)}
.socials{display:flex;gap:12px}
.socials a{
  width:38px;height:38px;border:1px solid rgba(170,139,105,.42);border-radius:50%;
  display:grid;place-items:center;color:var(--gold);
  transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.socials a:hover{background:var(--gold);color:var(--noir);border-color:var(--gold)}
.socials svg{width:16px;height:16px}
.fcol h4{
  font-size:.66rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:20px;
}
.fcol li+li{margin-top:11px}
.fcol a{transition:color .35s var(--ease)}
.fcol a:hover{color:var(--gold-pale)}
.site-footer__cols{display:grid;gap:32px;grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.site-footer__cols{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1024px){.site-footer__grid{grid-template-columns:.85fr 1.6fr}}
.site-footer__bottom{
  margin-top:clamp(44px,5vw,68px);border-top:1px solid rgba(170,139,105,.26);
  padding-block:22px;display:flex;flex-wrap:wrap;gap:14px 28px;
  justify-content:space-between;font-size:.7rem;letter-spacing:.06em;
  color:rgba(252,248,243,.74);
}
.site-footer__bottom a:hover{color:var(--gold-pale)}
.site-footer__bottom nav{display:flex;gap:26px}

/* ============================================================
   Reveal
   ============================================================ */
/* Content is visible by default. It is only hidden for the scroll
   reveal when JavaScript is present to bring it back — otherwise a
   blocked or failed script leaves the page blank. */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal[data-d="1"]{transition-delay:.09s}
.js .reveal[data-d="2"]{transition-delay:.18s}
.js .reveal[data-d="3"]{transition-delay:.27s}
.js .reveal[data-d="4"]{transition-delay:.36s}

[id]{scroll-margin-top:110px}

@media(max-width:1023px){
  .nav,.header-cta{display:none}
  .nav-toggle{display:flex}
  .hero__scroll{display:none}

  /* Mobile hero is a cropped image band above a solid ivory copy block,
     rather than the desktop composition squeezed down. */
  .hero{display:flex;flex-direction:column}
  .hero__media{position:relative;inset:auto;z-index:0;order:-1;
    height:min(54svh,440px);min-height:300px}
  .hero__scrim{inset:0 0 auto 0;height:150px;z-index:1;
    background:linear-gradient(180deg,rgba(252,248,243,.92),rgba(252,248,243,0))}
  .hero__inner{min-height:0;align-items:flex-start;
    padding-top:clamp(32px,7vw,52px);padding-bottom:clamp(44px,9vw,72px)}
  .hero__motif{top:auto;bottom:-40px;right:-96px;width:250px;opacity:.2}
  .hero .display{font-size:clamp(2.4rem,11vw,3.4rem)}
  .hero__actions .btn{flex:1 1 auto}
}
/* ============================================================
   Mobile refinements — larger labels, 44px tap targets,
   a shorter hero so the first CTA stays near the fold
   ============================================================ */
@media(max-width:640px){
  .eyebrow{font-size:.84rem;letter-spacing:.22em}
  .btn{font-size:.79rem;min-height:58px;padding:0 30px}
  .body-sm{font-size:.98rem;line-height:1.9}
  .lede{font-size:1.1rem;max-width:none}
  .card-title{font-size:.98rem;letter-spacing:.15em}
  .svc-group__label,.faq-group__title{font-size:.76rem}
  .svc-num,.dest-row .idx{font-size:.86rem}
  .site-footer{font-size:.94rem}
  .fcol h4{font-size:.76rem;margin-bottom:10px}
  .site-footer__bottom{font-size:.8rem;gap:4px 24px}
  .contact-card dd{font-size:1rem}
  .contact-card dt{font-size:.76rem}
  .field label{font-size:.78rem}
  .field input,.field select,.field textarea{font-size:1rem;padding:12px 2px}
  .form-note{font-size:.88rem}
  .hero__media{height:min(46svh,380px);min-height:270px}
  .hero__inner{padding-top:clamp(26px,6vw,44px);padding-bottom:clamp(36px,8vw,56px)}
  .hero__actions{gap:12px}
  .value svg{width:42px;height:42px}
}

/* A draft carried over from the planner */
.head-link{margin-top:14px}
.head-link a{
  display:inline-block;font-size:.86rem;letter-spacing:.06em;color:var(--gold-text);
  border-bottom:1px solid var(--line);padding:10px 0 8px;
  transition:border-color .35s var(--ease);
}
.head-link a:hover{border-color:var(--gold)}
.draft-note{
  border:1px solid var(--line);border-left:3px solid var(--gold);
  background:var(--ivory);padding:20px 22px;margin-bottom:32px;
}
.draft-note p:first-child{font-size:.95rem}
.draft-note strong{font-weight:500}
.draft-note .body-sm{margin-top:6px}
.linkish{
  font:inherit;font-size:inherit;color:var(--gold-text);
  border-bottom:1px solid var(--line);padding:0 0 2px;
}
.linkish:hover{border-color:var(--gold)}

/* The two language versions look alike above the fold, so the active
   one has to be unmistakable rather than merely a shade different. */
.lang{display:flex;align-items:center;gap:2px;margin-left:6px;flex:none}
.lang span,.lang a{
  font-size:.68rem;font-weight:500;letter-spacing:.1em;
  padding:9px 10px;min-height:40px;display:inline-flex;align-items:center;
  border:1px solid transparent;border-radius:1px;
  transition:color .3s var(--ease),background-color .3s var(--ease),border-color .3s var(--ease);
}
.lang span[aria-current]{
  color:#fff;background:var(--gold-btn);border-color:var(--gold-btn);
}
.lang a{color:var(--nav);border-color:var(--line)}
.lang a:hover{color:var(--ink);border-color:var(--gold)}
.lang::before{content:"";width:1px;height:16px;background:var(--line);margin-right:8px}
.drawer .lang{margin:24px 0 0;gap:4px}
.drawer .lang span,.drawer .lang a{font-size:.82rem;letter-spacing:.16em;padding:12px 18px}
/* Keep it reachable on a phone without opening the menu first. */
@media(max-width:1279px){
  .site-header__inner>.lang{margin-left:auto;margin-right:4px}
  .site-header__inner>.lang span,.site-header__inner>.lang a{padding:9px 9px;font-size:.66rem}
}

/* Touch targets: phones and tablets alike */
@media(max-width:1023px){
  .fcol a{display:inline-block;padding-block:10px}
  .fcol li+li{margin-top:0}
  .socials a{width:46px;height:46px}
  .socials svg{width:18px;height:18px}
  .site-footer__bottom nav a{display:inline-block;padding-block:10px}
  .contact-card dd a{display:inline-block;padding-block:8px}
  .footer-brand .lockup{display:inline-flex;padding-block:6px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js .reveal{opacity:1;transform:none}
}

/* ============================================================
   Views (client-side routing)
   ============================================================ */
[hidden]{display:none!important}
.view{display:block}

/* ---------- Page headers (inner pages) ---------- */
.page-head{position:relative;padding-top:clamp(130px,17vh,190px);padding-bottom:clamp(48px,6vw,86px);background:var(--ivory);overflow:hidden}
.page-head__motif{position:absolute;right:-110px;top:18%;width:min(340px,32vw);color:var(--gold);opacity:.14;pointer-events:none}
.page-head .eyebrow{display:block;margin-bottom:16px}
.page-head h1{font-family:var(--f-display);font-weight:500;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.16;letter-spacing:.03em;max-width:16ch}
.page-head p{margin-top:24px;max-width:46ch;color:var(--ink-soft);line-height:1.9}
.page-head .rule{justify-content:flex-start;margin-top:26px}
.page-head .rule i:first-child{background:linear-gradient(90deg,var(--gold),transparent);width:72px}
.page-head .rule i:last-child{display:none}

/* ---------- Brand introduction ---------- */
.intro{background:var(--white);padding-block:var(--section)}
.intro__grid{display:grid;gap:clamp(28px,4vw,64px);align-items:start}
.intro h2{font-family:var(--f-display);font-weight:500;font-size:clamp(1.8rem,3.8vw,3rem);line-height:1.18;letter-spacing:.02em;text-transform:uppercase}
.intro__line{width:64px;height:1px;background:var(--gold);margin:26px 0}
.intro p+p{margin-top:20px}
.intro p{color:var(--ink-soft);line-height:1.95;max-width:52ch}
.intro__note{font-family:var(--f-serif);font-style:italic;font-size:1.12rem;color:var(--gold-deep);line-height:1.7}
@media(min-width:900px){.intro__grid{grid-template-columns:.92fr 1.08fr}}

/* ---------- Services (editorial index) ---------- */
.services{background:var(--ivory);padding-block:var(--section);position:relative;overflow:hidden}
.services__motif{position:absolute;left:-80px;top:14%;width:280px;color:var(--gold);opacity:.12;pointer-events:none}
.svc-group{display:grid;gap:8px 40px;padding-block:clamp(26px,3vw,40px);border-top:1px solid var(--hair)}
.svc-group:first-of-type{border-top:0}
.svc-group__label{
  font-size:.72rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-text);padding-top:6px;
}
.svc-row{display:grid;grid-template-columns:auto 1fr;gap:18px;padding-block:14px}
.svc-row+.svc-row{border-top:1px solid var(--line-faint)}
.svc-num{font-family:var(--f-display);font-size:.8rem;letter-spacing:.1em;color:var(--gold-text);padding-top:4px}
.svc-row h3{margin-bottom:6px}
@media(min-width:860px){
  .svc-group{grid-template-columns:.28fr 1fr}
  .svc-row{grid-template-columns:auto 1.1fr 1.4fr;align-items:baseline;gap:24px}
  .svc-row h3{margin-bottom:0}
}

/* ---------- Services page: group blocks ---------- */
.svc-block{padding-block:clamp(44px,6vw,86px);border-top:1px solid var(--hair)}
.svc-block:first-of-type{border-top:0;padding-top:0}
.svc-block__grid{display:grid;gap:clamp(28px,4vw,60px);align-items:center}
/* the Travel photograph is portrait; a landscape frame would cut it in half */
.svc-block .photo[data-scene="travel"]{aspect-ratio:2/3}
.svc-block .photo[data-scene="celebrate"]{aspect-ratio:4/5}
.svc-block .photo[data-scene="capture"]{aspect-ratio:2/3}
/* the penjor photograph is exactly 2:3, so this frame crops nothing */
.svc-block .photo[data-scene="concierge"]{aspect-ratio:2/3}
.svc-block .photo[data-scene="villa"]{aspect-ratio:1/1}
@media(max-width:899px){
  .svc-block .photo[data-scene="travel"]{aspect-ratio:4/5}
  .svc-block .photo[data-scene="concierge"]{aspect-ratio:4/5}
  .svc-block .photo[data-scene="capture"]{aspect-ratio:4/5}
}
.svc-block .photo{aspect-ratio:4/3.2}
.svc-block h2{font-family:var(--f-display);font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:.09em;text-transform:uppercase;margin-bottom:6px}
.svc-detail+.svc-detail{margin-top:26px;padding-top:26px;border-top:1px solid var(--line-faint)}
.svc-detail h3{margin-bottom:8px}
.svc-expect{margin-top:12px}
.svc-expect li{position:relative;padding-left:20px;font-size:.83rem;color:var(--muted);line-height:1.8}
.svc-expect li::before{content:"";position:absolute;left:0;top:.78em;width:9px;height:1px;background:var(--gold)}
@media(min-width:1000px){
  .svc-block__grid{grid-template-columns:.86fr 1.14fr}
  .svc-block:nth-of-type(even) .svc-block__media{order:2}
}

/* ---------- Process ---------- */
.process{background:var(--white);padding-block:var(--section);position:relative;overflow:hidden}
.process__grid{display:grid;gap:clamp(30px,4vw,20px);position:relative}
.step{text-align:center;padding-inline:12px;position:relative}
.step__mark{
  width:82px;height:82px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;margin:0 auto 22px;background:var(--white);
  font-family:var(--f-display);font-size:1.35rem;color:var(--gold);letter-spacing:.06em;
  transition:border-color .5s var(--ease),background-color .5s var(--ease);
}
.step:hover .step__mark{border-color:var(--gold);background:var(--ivory)}
.step h3{margin-bottom:8px}
.process__rail{display:none}
@media(min-width:820px){
  .process__grid{grid-template-columns:repeat(4,1fr)}
  .process__rail{display:block;position:absolute;top:41px;left:12.5%;right:12.5%;height:1px;background:var(--line-faint);z-index:0}
  .step{z-index:1}
}

/* ---------- Mission ---------- */
.mission{background:var(--ivory);padding-block:clamp(80px,10vw,150px);text-align:center;position:relative;overflow:hidden}
.mission__motif{position:absolute;color:var(--gold);opacity:.13;width:min(300px,30vw);pointer-events:none}
.mission__motif--l{left:-90px;bottom:-40px}
.mission__motif--r{right:-90px;top:-40px;transform:rotate(180deg)}
.mission blockquote{margin:0}
.mission q{display:block;max-width:17ch;margin-inline:auto}
.mission q{
  font-family:var(--f-display);font-weight:500;quotes:none;
  font-size:clamp(1.5rem,3.6vw,2.7rem);line-height:1.34;letter-spacing:.02em;
}
.mission .eyebrow{display:block;margin-bottom:22px}

/* ---------- Team / languages ---------- */
.langs{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.langs span{
  border:1px solid var(--line);padding:8px 16px;border-radius:1px;
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);
}

/* ---------- CMS placeholder ---------- */
.placeholder{
  border:1px dashed var(--line);padding:clamp(24px,4vw,44px);text-align:center;
  background:var(--white);
}
.placeholder .tag{
  display:inline-block;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--line);padding:5px 12px;margin-bottom:18px;
}
.gallery{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);margin-top:26px}
.gallery div{aspect-ratio:4/3;background:var(--ivory);border:1px solid var(--line-faint)}
.gallery figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--ivory)}
.gallery figure img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease)}
.gallery figure:hover img{transform:scale(1.05)}
@media(min-width:760px){.gallery{grid-template-columns:repeat(3,1fr)}}

/* ---------- Plan your journey (form) ---------- */
.plan{background:var(--white);padding-block:var(--section)}
.plan__grid{display:grid;gap:clamp(36px,5vw,72px);align-items:start}
.form-grid{display:grid;gap:22px 24px;grid-template-columns:1fr}
.field{display:flex;flex-direction:column;gap:9px}
.field--wide{grid-column:1/-1}
.field label{font-size:.68rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text)}
.field input,.field select,.field textarea{
  font:inherit;font-size:.9rem;color:var(--ink);background:var(--white);
  border:0;border-bottom:1px solid var(--line);padding:10px 2px;border-radius:0;
  transition:border-color .4s var(--ease);
}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 10px) 50%,calc(100% - 5px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:26px}
.field textarea{resize:vertical;min-height:104px;line-height:1.7}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--gold)}
.form-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:34px}
.form-note{font-size:.74rem;color:var(--muted);margin-top:18px;line-height:1.7}
.contact-card{background:var(--ivory);padding:clamp(28px,4vw,42px);border:1px solid var(--line-faint)}
.contact-card h3{margin-bottom:20px}
.contact-card dl{margin:0}
.contact-card dt{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);margin-top:20px}
.contact-card dt:first-child{margin-top:0}
.contact-card dd{margin:6px 0 0;font-size:.92rem}
.contact-card dd a:hover{color:var(--gold-deep)}
@media(max-width:599px){.form-actions{flex-direction:column;align-items:stretch}}
@media(min-width:700px){.form-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.plan__grid{grid-template-columns:1.5fr .72fr}}

/* ---------- Destination editorial rows (Experiences page) ---------- */
.dest-row{display:grid;gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(34px,4.5vw,64px);border-top:1px solid var(--hair)}
.dest-row:first-of-type{border-top:0;padding-top:0}
.sec-head+.dest-row{border-top:0}
/* Every destination photograph is 3:4.1. A landscape row frame threw away
   half of each one and magnified the rest, which is what made them look
   soft. The row now matches the picture. */
.dest-row .photo{aspect-ratio:4/5}
.dest-row h2{font-family:var(--f-display);font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.dest-row .idx{font-family:var(--f-display);font-size:.8rem;color:var(--gold-text);letter-spacing:.12em;display:block;margin-bottom:14px}
@media(min-width:960px){
  .dest-row{grid-template-columns:1.1fr .9fr}
  .dest-row:nth-of-type(even) .dest-row__media{order:2}
}

/* ---------- Journal placeholder ---------- */
.journal-empty{background:var(--white);padding-block:var(--section);text-align:center}

/* ---------- Long-form prose ---------- */
.prose{max-width:60ch}
.prose p{color:var(--ink-soft);line-height:1.95}
.prose p+p{margin-top:20px}
.pull{
  font-family:var(--f-display);font-size:clamp(1.2rem,2.4vw,1.7rem);line-height:1.45;
  letter-spacing:.02em;color:var(--ink);margin:34px 0;padding-left:26px;border-left:1px solid var(--gold);
}
.split{display:grid;gap:clamp(32px,5vw,72px);align-items:center}
.split .photo{aspect-ratio:4/3.4}
/* the ceremony photograph is portrait; a square frame keeps the dancer whole */
.split--rev .photo{aspect-ratio:2/3}
@media(min-width:980px){.split{grid-template-columns:1fr 1fr}.split--rev .split__media{order:2}}

@media(max-width:1279px){
  .nav,.header-cta{display:none}
  .nav-toggle{display:flex}
}



/* ============================================================
   Frequently asked questions
   ============================================================ */
.faq-sec{background:var(--ivory);padding-block:var(--section);position:relative;overflow:hidden}
.faq-sec--page{background:var(--ivory);padding-block:clamp(20px,3vw,44px) var(--section)}
.faq{max-width:860px;margin-inline:auto;border-top:1px solid var(--hair)}
.faq__item{border-bottom:1px solid var(--hair)}
.faq h3{margin:0;font-weight:400}
.faq__q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:26px 0;text-align:left;font-family:var(--f-sans);font-weight:400;
  font-size:1.04rem;font-weight:500;line-height:1.55;color:var(--ink);
  transition:color .35s var(--ease);
}
.faq__q:hover{color:var(--gold-deep)}
.faq__ico{position:relative;flex:none;width:16px;height:16px;margin-top:6px}
.faq__ico::before,.faq__ico::after{
  content:"";position:absolute;inset:50% 0 auto 0;height:1px;background:var(--gold);
  transition:transform .45s var(--ease),opacity .45s var(--ease);
}
.faq__ico::after{transform:rotate(90deg)}
.faq__item.is-open .faq__ico::after{transform:rotate(0);opacity:0}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.faq__a>div{overflow:hidden;visibility:hidden;transition:visibility .5s}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__item.is-open .faq__a>div{visibility:visible}
.faq__a .body-sm,.faq__todo{max-width:64ch;padding:0 44px 30px 0}
@media(max-width:640px){
  .faq__q{font-size:1.02rem;padding:22px 0;gap:16px}
  .faq__a .body-sm,.faq__todo{padding-right:0;font-size:.95rem}
  .faq__more-cta .btn{width:100%}
  .faq-group__title{font-size:.8rem}
  .tag{font-size:.66rem;padding:5px 11px}
  .whn__note{font-size:.92rem}
  .finale__cta .btn{width:100%}
}
.faq__todo{font-size:.83rem;line-height:1.8;color:var(--muted)}
.tag{
  display:inline-block;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-text);border:1px solid var(--line);padding:4px 10px;margin-right:12px;
  vertical-align:2px;
}
.faq-group+.faq-group{margin-top:clamp(44px,5vw,76px)}
.faq-group__title{
  font-family:var(--f-sans);font-size:.68rem;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-text);max-width:860px;margin:0 auto 18px;
}
.faq__more{text-align:center;margin-top:clamp(44px,5vw,72px)}
.faq__more-line{
  font-family:var(--f-display);font-size:clamp(1.2rem,2.4vw,1.7rem);
  letter-spacing:.04em;margin:10px 0 30px;
}
.faq__more-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* Secondary CTA on the dark bands */
.finale__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.btn--dark-ghost{--btn-bg:transparent;--btn-fg:var(--ivory);--btn-bd:rgba(170,139,105,.55)}
.btn--dark-ghost::after{background:var(--gold)}
.btn--dark-ghost:hover{color:#fff;border-color:var(--gold)}

/* What happens next */
.whn{background:var(--ivory);padding-block:var(--section)}
.whn .process__rail{background:var(--line-faint)}
.whn .step__mark{background:var(--ivory)}
.whn__note{
  max-width:60ch;margin:clamp(38px,4vw,60px) auto 0;text-align:center;
  font-size:.8rem;line-height:1.85;color:var(--muted);
}
.drawer__wa{
  font-family:var(--f-sans)!important;font-size:.7rem!important;letter-spacing:.14em!important;
  text-transform:uppercase;color:var(--gold-deep)!important;margin-top:18px;
}


/* ============================================================
   Floating WhatsApp button
   Collapsed to a disc on a phone so it never covers content;
   it opens to a labelled pill from tablet up.
   ============================================================ */
.wa-fab{
  position:fixed;right:18px;bottom:18px;z-index:70;
  display:inline-flex;align-items:center;gap:0;
  min-height:60px;padding:0;width:60px;justify-content:center;
  background:transparent;color:var(--gold-btn);border-radius:999px;
  box-shadow:0 8px 26px rgba(21,20,19,.22);
  transition:width .45s var(--ease),padding .45s var(--ease),
             background-color .35s var(--ease),transform .35s var(--ease);
}
.wa-fab svg{width:56px;height:56px;flex:none;filter:drop-shadow(0 6px 18px rgba(21,20,19,.28))}
/* marker so the stylesheet version is identifiable */
.wa-fab__disc{}
.wa-fab span{
  color:#fff;font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;opacity:0;width:0;overflow:hidden;
  transition:opacity .3s var(--ease),width .45s var(--ease),margin .45s var(--ease);
}
.wa-fab:hover,.wa-fab:focus-visible{transform:translateY(-2px)}
@media(min-width:900px){.wa-fab:hover,.wa-fab:focus-visible{background:var(--ink)}}
.wa-fab:hover span,.wa-fab:focus-visible span{opacity:1;width:auto;margin-left:10px}
.wa-fab:hover,.wa-fab:focus-visible{width:auto;padding:0 22px 0 18px}
@media(min-width:900px){
  .wa-fab{right:26px;bottom:26px;width:auto;padding:0 24px 0 8px;gap:8px;
    background:var(--gold-btn);box-shadow:0 8px 26px rgba(21,20,19,.22)}
  .wa-fab svg{width:44px;height:44px;filter:none}
  .wa-fab span{opacity:1;width:auto}
}
@media(max-width:899px){
  /* keep clear of the planner's own action bar */
  body.has-pickbar .wa-fab{bottom:86px}
}
@media(prefers-reduced-motion:reduce){.wa-fab,.wa-fab span{transition:none}}

/* ============================================================
   Planner on a phone
   The catalogue was 8,000px tall and the five day columns sat
   below it, so the board was barely reachable. On small screens
   the catalogue scrolls inside itself and the board shows one
   day at a time behind tabs.
   ============================================================ */
.day-tabs{display:none}
@media(max-width:899px){
  .cat-wrap{max-height:56vh;overflow:auto;-webkit-overflow-scrolling:touch;
    position:relative;border-bottom:1px solid var(--line)}
  .cat-filters{position:sticky;top:0;background:var(--white);padding-bottom:8px;z-index:2}
  #zoneFilter{position:sticky;top:56px;background:var(--white);z-index:2}

  .day-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
    padding:0 0 12px;margin-bottom:6px;position:sticky;top:64px;z-index:3;
    background:var(--ivory)}
  .day-tabs::-webkit-scrollbar{display:none}
  .day-tabs button{
    flex:none;border:1px solid var(--line);background:var(--white);color:var(--nav);
    min-height:44px;padding:0 16px;font-size:.72rem;font-weight:500;letter-spacing:.1em;
    text-transform:uppercase;border-radius:1px;
  }
  .day-tabs button[aria-current]{background:var(--gold-btn);border-color:var(--gold-btn);color:#fff}
  .day-tabs button .n{display:block;font-size:.6rem;letter-spacing:.06em;opacity:.8;text-transform:none}

  #board{display:block}
  #board .ruler{position:absolute;left:0;top:0}
  .board-wrap{position:relative}
  #board .col{display:none}
  #board .col.is-day{display:block;flex:none;width:calc(100% - 58px);margin-left:58px}
  .board-wrap{overflow:hidden}
}
#pickBar.is-on ~ .wa-fab{bottom:96px}

/* The safety note sits apart from the answer so it reads as a note
   rather than as the tail of the paragraph above it. */
/* .faq__a .body-sm already sets padding, so this needs equal specificity */
.faq__a .faq__note{
  margin-top:20px;padding:0 44px 0 24px;
  border-left:2px solid var(--gold);
}
.faq__note-label{
  display:block;margin-bottom:4px;
  font-weight:500;letter-spacing:.04em;color:var(--gold-text);
}

/* Scam warning, used outside the FAQ accordion as well. */
.scam-note{
  margin:26px 0 0;padding:0 0 0 24px;max-width:70ch;
  border-left:2px solid var(--gold);
}
.scam-note--wide{grid-column:1/-1;margin-top:34px}
.scam-note--center{margin:0 auto clamp(30px,4vw,48px);text-align:left}

/* the business address sits apart from the main one */
.contact-card .dt--spaced{margin-top:30px}
.fcol__note{
  margin-top:14px;font-size:.78rem;letter-spacing:.06em;
  color:rgba(252,248,243,.55);
}
.fcol__note+li{margin-top:2px}

/* Closing invitation, between the mission and the dark CTA band. */
.invite{background:var(--white);padding-block:clamp(44px,5vw,78px);border-block:1px solid var(--hair)}
.invite .invite__in{max-width:780px;text-align:center}
.invite .sec-title{margin:16px 0 28px}
.invite .body-sm{max-width:60ch;margin:0 auto 18px}
.invite__fine{margin-top:22px;font-size:.8rem;color:var(--muted)}
@media(max-width:640px){.invite .sec-title br{display:none}}

/* ============================================================
   Partners
   ============================================================ */
.partners{background:var(--white);padding-block:var(--section);border-top:1px solid var(--hair)}
.partners .sec-head .body-sm{max-width:56ch;margin:18px auto 0}

.plogos{
  display:grid;grid-template-columns:repeat(3,1fr);align-items:center;
  gap:clamp(26px,3vw,40px) clamp(18px,2.6vw,44px);margin-top:clamp(40px,5vw,64px);
}
@media(min-width:760px){.plogos{grid-template-columns:repeat(6,1fr)}}
.plogo{display:grid;place-items:center}
.plogo img{max-width:100%;max-height:clamp(58px,6vw,86px);width:auto;height:auto;object-fit:contain}

.partners__sub{
  margin:clamp(46px,5vw,72px) 0 clamp(20px,2.4vw,30px);text-align:center;
  font-family:var(--f-sans);font-size:.72rem;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-text);
}
.ppeople{display:grid;gap:clamp(20px,2.6vw,34px);justify-content:center;
  grid-template-columns:repeat(auto-fit,minmax(220px,260px))}
.pperson{margin:0}
.pperson__photo{aspect-ratio:4/5;overflow:hidden;background:var(--ivory)}
.pperson__photo img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease)}
.pperson:hover .pperson__photo img{transform:scale(1.04)}
.pperson figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:16px}
.pperson__name{font-size:.92rem;letter-spacing:.04em;color:var(--ink)}
.pperson__ig{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px;
  border:1px solid var(--line);border-radius:999px;
  font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-text);
  transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.pperson__ig svg{width:17px;height:17px;flex:none}
.pperson__ig:hover,.pperson__ig:focus-visible{
  background:var(--gold-btn);border-color:var(--gold-btn);color:#fff}