/* ==========================================================================
   LOVE CODES — Samantha Jo Harvey x Samantha Blossom
   Editorial / membership layout modelled on tobemagnetic.com
   ========================================================================== */

:root{
  /* charcoal neutrals, no warm browns; the dress pink is the only accent */
  --ink:#1B1D1F;
  --ink-soft:#585E64;
  --cream:#F7F7F6;
  --cream-deep:#EBECEC;
  --paper:#FFFFFF;
  /* sampled from the magenta dress in jo-pink.webp (#DB3082), nudged to
     #D82E80 so white button text clears 4.5:1 */
  --rose:#D82E80;
  --rose-deep:#A4185B;
  --rose-soft:#FCE7F0;
  /* pewter replaces the old antique gold */
  --gold:#6F777D;
  --gold-light:#C3C9CD;
  --champagne:#E4E6E6;
  --terracotta:#7C848A;
  --peach:#C3C9CD;
  --line:rgba(27,29,31,.13);
  --line-gold:rgba(111,119,125,.3);
  --line-light:rgba(247,247,246,.17);

  /* Poppins is the deck's only typeface (Regular / Bold / ExtraBold). */
  --display:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;
  --sans:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;

  --pad:clamp(1.25rem,5vw,5rem);
  --maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--rose);color:#fff}

/* ---------------- typography ---------------- */
.display{
  font-family:var(--display);font-weight:700;line-height:.98;
  letter-spacing:-.028em;margin:0;
}
.display--caps{text-transform:uppercase;letter-spacing:-.022em;font-weight:800}
.display em{font-style:normal;font-weight:300;color:var(--rose)}
h2.display{font-size:clamp(2.3rem,5.6vw,4.4rem)}
h3{font-family:var(--sans);font-weight:600;font-size:1.15rem;letter-spacing:-.01em;margin:0 0 .5rem}
p{margin:0 0 1.1rem}
.eyebrow{
  font-size:.64rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 1.2rem;
}
.eyebrow::after{
  content:"";display:block;width:42px;height:1px;margin-top:.85rem;
  background:linear-gradient(90deg,var(--rose),transparent);
}
.center .eyebrow::after{margin-inline:auto;background:linear-gradient(90deg,transparent,var(--rose),transparent)}
.eyebrow--muted{color:var(--ink-soft);opacity:.75}
.lede{font-size:clamp(1.05rem,1.8vw,1.3rem);line-height:1.55;color:var(--ink-soft)}
.pull{
  font-family:var(--display);font-style:normal;font-weight:300;
  font-size:clamp(1.4rem,3.2vw,2.4rem);line-height:1.34;letter-spacing:-.022em;
}
/* body-copy <em> carries emphasis by weight and colour, never by slant */
.lede em,.compare__col li em,.offer__desc em,p em{font-style:normal;font-weight:600;color:var(--rose)}
.dark .lede em,.dark .compare__col li em{color:var(--gold-light)}
.measure{max-width:62ch}
.center{text-align:center}
.center .measure{margin-inline:auto}

/* ---------------- layout ---------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:940px}
section{position:relative}
.pad-y{padding-block:clamp(4rem,10vw,8rem)}
.pad-y-sm{padding-block:clamp(2.5rem,6vw,4.5rem)}
.split{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split--wide-left{grid-template-columns:1.12fr .88fr}
  .split--wide-right{grid-template-columns:.88fr 1.12fr}
  .split--flip > *:first-child{order:2}
}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--sans);font-weight:600;font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  padding:1.05rem 2.1rem;border-radius:100px;border:1.5px solid var(--ink);
  background:var(--ink);color:var(--cream);cursor:pointer;text-align:center;
  transition:transform .25s cubic-bezier(.2,.8,.3,1),background .25s,color .25s,box-shadow .25s,border-color .25s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(26,18,21,.2)}
.btn--rose{background:var(--rose);border-color:var(--rose);color:#fff}
.btn--rose:hover{background:var(--rose-deep);border-color:var(--rose-deep);box-shadow:0 12px 32px rgba(216,46,128,.34)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--gold)}
.btn--ghost:hover{background:var(--ink);color:var(--cream)}
.btn--light{background:transparent;border-color:var(--gold-light);color:var(--cream)}
.btn--light:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn--sm{padding:.7rem 1.4rem;font-size:.68rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
.center .btn-row{justify-content:center}

/* ---------------- announcement + nav ---------------- */
.announce{
  background:var(--ink);color:var(--cream);text-align:center;
  padding:.6rem 1rem;font-size:.72rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;position:relative;z-index:120;
}
.announce a{color:var(--peach);text-underline-offset:3px}

.nav{
  position:sticky;top:0;z-index:110;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem var(--pad);
  background:rgba(251,246,241,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,padding .3s;
}
.nav.scrolled{border-bottom-color:var(--line);padding-block:.72rem}
.nav__mark{
  font-family:var(--display);font-weight:800;font-size:1.02rem;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
}
.nav__links{display:none;gap:2.1rem;align-items:center}
@media(min-width:980px){.nav__links{display:flex}}
.nav__links a{
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-soft);transition:color .2s;
}
.nav__links a:hover{color:var(--rose)}

/* ---------------- hero ----------------
   Split editorial: copy sits on its own ink ground, photo runs uncropped in
   its own column. No scrim over her, so the image stays at full clarity and
   the crop can be set from the top of her head rather than the page bottom. */
.hero{position:relative;background:var(--ink);color:var(--cream);overflow:hidden}
.hero__grid{
  position:relative;display:grid;gap:0;
  max-width:1520px;margin:0 auto;align-items:stretch;
}
@media(min-width:900px){
  .hero__grid{grid-template-columns:1.04fr .96fr;min-height:clamp(620px,90svh,900px)}
}
.hero__inner{
  position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(3rem,7vw,5.5rem) var(--pad) clamp(3rem,6vw,4.5rem);
}
@media(min-width:900px){.hero__inner{padding-right:clamp(2rem,4vw,4rem)}}
.hero__eyebrow{color:var(--gold-light)}
.hero__eyebrow::after{background:linear-gradient(90deg,var(--gold-light),transparent)}
.hero__title{font-size:clamp(3rem,8.6vw,7.4rem);color:var(--cream);letter-spacing:-.035em;line-height:.92}
.hero__title em{color:var(--gold-light);font-style:normal;font-weight:300}
.hero__rule{
  width:100%;height:1px;margin:clamp(1.6rem,3vw,2.4rem) 0 0;border:0;
  background:linear-gradient(90deg,var(--gold),rgba(169,137,85,.05));
}
.hero__note{
  margin-top:1.5rem;max-width:42ch;
  font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.62;color:rgba(252,249,245,.8);
}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:2.4rem 0 0;
  font-size:.6rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(252,249,245,.62);
}
.hero__meta span{display:inline-flex;align-items:center;gap:1.1rem}
.hero__meta span:not(:last-child)::after{content:"";width:3px;height:3px;border-radius:50%;background:var(--gold)}

.hero__media{position:relative;min-height:62vh}
@media(min-width:900px){.hero__media{min-height:0}}
.hero__media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 6%;   /* head sits at ~8.5% of the frame */
}
/* just enough edge feather to marry the photo to the ink panel */
.hero__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(23,16,15,.72) 0%,rgba(23,16,15,.12) 16%,rgba(23,16,15,0) 34%);
}
@media(max-width:899px){
  .hero__media::after{
    background:linear-gradient(180deg,rgba(23,16,15,0) 55%,rgba(23,16,15,.5) 82%,rgba(23,16,15,.92) 100%);
  }
  .hero__media{order:-1}
}

/* ---------------- marquee ---------------- */
.marquee{background:var(--champagne);color:var(--ink);padding:.85rem 0;overflow:hidden;white-space:nowrap;position:relative;z-index:1}
.marquee__track{display:inline-flex;animation:slide 38s linear infinite;will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee span{
  font-family:var(--display);font-weight:600;font-size:.8rem;letter-spacing:.18em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:2.6rem;padding-right:2.6rem;
}
.marquee span::after{content:"✦";font-family:var(--sans);font-size:.6rem;color:var(--rose);opacity:1}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ---------------- stat strip ---------------- */
.stats{background:var(--cream-deep)}
.stats__grid{display:grid;gap:2rem;text-align:center}
@media(min-width:720px){.stats__grid{grid-template-columns:repeat(3,1fr)}}
.stat__num{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,5vw,3.6rem);letter-spacing:-.04em;line-height:1;color:var(--rose)}
.stat__label{font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-top:.7rem}

/* ---------------- media ---------------- */
.frame{position:relative;border-radius:3px;overflow:hidden;background:var(--cream-deep)}
.frame img{width:100%;height:100%;object-fit:cover}
.frame--tall{aspect-ratio:3/4}
.frame--portrait{aspect-ratio:4/5}
.frame--wide{aspect-ratio:4/3}
.frame--square{aspect-ratio:1}
.frame--arch{border-radius:999px 999px 3px 3px}
/* anchor the crop to the top edge so heads survive a square or wide frame */
.frame--top img{object-position:50% 0}
.frame-duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.frame-duo .frame:first-child{margin-top:2.5rem}

/* ---------------- question bubbles ---------------- */
.qbubbles{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.qbubble{
  background:var(--paper);border:1px solid var(--line);border-radius:100px;
  padding:.68rem 1.3rem;font-size:.93rem;color:var(--ink-soft);
  box-shadow:0 2px 14px rgba(26,18,21,.05);
}
.qbubble:nth-child(3n+2){background:var(--rose-soft);border-color:transparent}

/* ---------------- generic cards ---------------- */
.cards{display:grid;gap:1.4rem;margin-top:3.2rem}
@media(min-width:760px){
  .cards--2{grid-template-columns:repeat(2,1fr)}
  .cards--3{grid-template-columns:repeat(3,1fr)}
}
.card{background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:2.1rem 1.8rem}
.card__icon{font-family:var(--display);font-weight:700;font-size:1.35rem;letter-spacing:.06em;text-transform:uppercase;color:var(--rose-deep);line-height:1;margin-bottom:1rem}
.card p{font-size:.96rem;color:var(--ink-soft);margin:0}

/* ---------------- dark band ---------------- */
.dark{background:var(--ink);color:var(--cream)}
.dark .eyebrow{color:var(--peach)}
.dark .lede{color:rgba(251,246,241,.76)}
.dark .display{color:var(--cream)}
.dark .display em{color:var(--peach)}

/* ---------------- comparison ---------------- */
.compare{display:grid;gap:1.4rem;margin-top:3.2rem}
@media(min-width:820px){.compare{grid-template-columns:1fr 1fr}}
.compare__col{border-radius:6px;padding:2.2rem 2rem}
.compare__col--them{background:transparent;border:1px solid var(--line-light)}
.compare__col--us{background:var(--cream);color:var(--ink)}
.compare__col h3{
  font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:-.022em;
  margin:0 0 1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--line-light);
}
.compare__col--us h3{border-bottom-color:var(--line);color:var(--rose)}
.compare__col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1rem}
.compare__col li{position:relative;padding-left:1.9rem;font-size:.97rem;line-height:1.5}
.compare__col--them li{color:rgba(251,246,241,.62)}
.compare__col--them li::before{content:"—";position:absolute;left:0;opacity:.5}
.compare__col--us li{color:var(--ink-soft)}
.compare__col--us li::before{content:"✦";position:absolute;left:0;color:var(--rose);font-size:.72rem;top:.28rem}

/* ---------------- guides / duo ---------------- */
.duo{display:grid;gap:clamp(2.5rem,5vw,4rem);margin-top:3.5rem}
@media(min-width:840px){.duo{grid-template-columns:1fr 1fr}}
.duo__card{display:flex;flex-direction:column}
.duo__card .frame{margin-bottom:1.7rem}
.duo__name{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.022em;font-size:clamp(1.4rem,2.8vw,1.9rem);line-height:1.05;margin:0}
.duo__role{font-size:.68rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--rose-deep);margin:.7rem 0 1.2rem}
.duo__card p{font-size:.97rem;color:var(--ink-soft)}
.duo__handle{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:.4rem;align-self:flex-start;
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;border-bottom:1.5px solid var(--rose);padding-bottom:.25rem;
}
.duo__handle:hover{color:var(--rose)}

/* ---------------- codes list ---------------- */
.codes{margin-top:3rem;border-top:1px solid var(--line)}
.dark .codes{border-top-color:var(--line-light)}
.code-row{display:grid;gap:.5rem 2.5rem;padding:2rem 0;border-bottom:1px solid var(--line)}
.dark .code-row{border-bottom-color:var(--line-light)}
@media(min-width:820px){.code-row{grid-template-columns:.36fr .64fr;align-items:start}}
.code-row h3{font-family:var(--display);font-weight:600;font-size:1.28rem;color:var(--rose);margin:0;letter-spacing:-.018em}
.dark .code-row h3{color:var(--peach)}
.code-row p{margin:0;font-size:1rem;color:var(--ink-soft)}
.dark .code-row p{color:rgba(251,246,241,.74)}

/* ---------------- elements / steps ---------------- */
.element{display:grid;gap:clamp(1.4rem,4vw,3.5rem);align-items:center;padding-block:clamp(2rem,5vw,3.2rem);border-top:1px solid var(--line)}
@media(min-width:880px){
  .element{grid-template-columns:.12fr .48fr .4fr}
  .element--flip .element__media{order:-1}
}
.element__num{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,6vw,4.6rem);letter-spacing:-.05em;color:var(--rose);line-height:.85;opacity:.9}
.element__body h3{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,3vw,2.05rem);line-height:1.12;letter-spacing:-.028em;margin-bottom:.9rem}
.element__body p{color:var(--ink-soft);margin:0}
.element--secret{
  background:var(--ink);color:var(--cream);border-radius:8px;border:none;
  padding:clamp(2rem,5vw,3.4rem);margin-top:2.5rem;
}
.element--secret .element__num{font-family:var(--display);font-weight:700;font-size:clamp(.95rem,1.6vw,1.15rem);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-light);opacity:1}
.element--secret p{color:rgba(251,246,241,.76)}

/* ---------------- testimonials ---------------- */
.testis{display:grid;gap:1.4rem;margin-top:3.2rem}
@media(min-width:760px){.testis{grid-template-columns:1fr 1fr}}
.testi{background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:2.2rem;display:flex;flex-direction:column}
.testi__stars{color:var(--rose);font-size:.8rem;letter-spacing:.2em;margin-bottom:1.2rem}
.testi__quote{font-family:var(--display);font-weight:300;font-size:1.18rem;line-height:1.5;letter-spacing:-.018em;margin:0 0 1.5rem}
.testi__who{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--rose-deep);margin:auto 0 0}
.testi__with{font-size:.87rem;color:var(--ink-soft);margin:.4rem 0 0;font-weight:400;letter-spacing:0;text-transform:none}

/* ---------------- offers ---------------- */
.offers{display:grid;gap:1.5rem;margin-top:3.4rem;align-items:stretch}
@media(min-width:940px){.offers{grid-template-columns:repeat(3,1fr)}}
.offer{
  background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:2.5rem 2rem;display:flex;flex-direction:column;position:relative;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s;
}
.offer:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(26,18,21,.1)}
.offer--feature{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.offer--feature .offer__desc,.offer--feature .offer__list li{color:rgba(251,246,241,.74)}
.offer--feature .offer__kicker,.offer--feature .offer__price{color:var(--peach)}
.offer--feature .offer__price small{color:rgba(251,246,241,.6)}
.offer__tag{
  position:absolute;top:-.72rem;left:2rem;background:var(--rose);color:#fff;
  font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  padding:.4rem .95rem;border-radius:100px;
}
.offer__name{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(1.3rem,2.4vw,1.65rem);line-height:1.1;margin:0 0 .5rem}
.offer__kicker{font-size:.66rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--rose-deep);margin:0 0 1.7rem}
.offer__price{font-family:var(--display);font-weight:700;font-size:2.4rem;letter-spacing:-.03em;line-height:1;margin:0}
.offer__price s{font-size:1.1rem;opacity:.45;font-weight:400;margin-left:.5rem}
.offer__price small{display:block;font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-top:.6rem}
.offer__desc{font-size:.95rem;color:var(--ink-soft);margin:1.5rem 0}
.offer__list{list-style:none;padding:0;margin:0 0 2.2rem;display:flex;flex-direction:column;gap:.68rem}
.offer__list li{position:relative;padding-left:1.5rem;font-size:.93rem;color:var(--ink-soft);line-height:1.45}
.offer__list li::before{content:"✦";position:absolute;left:0;top:.25rem;color:var(--rose);font-size:.66rem}
.offer .btn{margin-top:auto;width:100%}

/* ---------------- invite ---------------- */
.invite{position:relative;overflow:hidden;background:var(--ink);color:var(--cream);text-align:center}
.invite__bg{position:absolute;inset:0}
.invite__bg img{width:100%;height:100%;object-fit:cover;opacity:.32}
.invite__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(26,18,21,.5) 0%,rgba(26,18,21,.93) 76%)}
.invite .wrap{position:relative}
.invite .display{font-size:clamp(2.4rem,7.5vw,6rem)}
.invite .lede{color:rgba(251,246,241,.82);max-width:54ch;margin:1.7rem auto 0}

/* ---------------- faq ---------------- */
.faq{max-width:820px;margin:3rem auto 0}
.faq details{border-bottom:1px solid var(--line);padding:1.4rem 0}
.faq summary{
  cursor:pointer;list-style:none;font-weight:600;font-size:1.04rem;
  display:flex;justify-content:space-between;gap:1.5rem;align-items:flex-start;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-weight:300;color:var(--rose);font-size:1.6rem;line-height:1;flex-shrink:0;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:1rem 0 0;color:var(--ink-soft);font-size:.97rem}
.faq details p:last-child{margin-bottom:0}

/* ---------------- footer ---------------- */
.footer{background:var(--cream-deep);padding:clamp(3rem,7vw,5rem) 0 2rem}
.footer__top{display:grid;gap:2.5rem}
@media(min-width:820px){.footer__top{grid-template-columns:1.5fr 1fr 1fr}}
.footer__mark{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(1.3rem,3vw,1.7rem);margin:0 0 1rem}
.footer__blurb{font-size:.95rem;color:var(--ink-soft);max-width:38ch}
.footer h4{font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 1.1rem}
.footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.65rem}
.footer a{text-decoration:none;font-size:.94rem;color:var(--ink-soft)}
.footer a:hover{color:var(--rose)}
.footer__bottom{
  margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-size:.78rem;color:var(--ink-soft);opacity:.8;
}

/* ---------------- reveal ----------------
   Only hidden once the inline head script confirms JS is alive. If scripting
   is off or links.js fails to load, every .reveal stays visible. */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.2,.8,.3,1),transform .8s cubic-bezier(.2,.8,.3,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* ---------------- apply page ---------------- */
.apply-hero{background:var(--ink);color:var(--cream);padding-block:clamp(3.5rem,9vw,6.5rem)}
.apply-hero .display{font-size:clamp(2.3rem,6.5vw,5rem)}
.apply-hero .lede{color:rgba(251,246,241,.8);max-width:56ch}
.checklist{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:.9rem}
@media(min-width:760px){.checklist--2{grid-template-columns:1fr 1fr}}
.checklist li{position:relative;padding-left:1.8rem;color:var(--ink-soft);font-size:.98rem;line-height:1.5}
.checklist li::before{content:"✦";position:absolute;left:0;top:.2rem;color:var(--rose);font-size:.72rem}
.dark .checklist li{color:rgba(251,246,241,.78)}
.imagine{display:grid;gap:.8rem 2rem;margin-top:2.5rem;list-style:none;padding:0}
@media(min-width:700px){.imagine{grid-template-columns:1fr 1fr}}
.imagine li{font-family:var(--display);font-weight:300;font-size:1.08rem;letter-spacing:-.015em;color:var(--ink-soft);padding-bottom:.8rem;border-bottom:1px solid var(--line)}
.dark .imagine li{color:rgba(251,246,241,.8);border-bottom-color:var(--line-light)}

.form-shell{
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:clamp(.75rem,2.5vw,1.75rem);margin-top:2.5rem;
  box-shadow:0 14px 50px rgba(26,18,21,.07);
}
.form-shell iframe{width:100%;min-height:1000px;border:0;border-radius:6px;display:block;background:var(--paper)}
.form-fallback{text-align:center;padding:3.5rem 1.5rem}
.form-fallback h3{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.025em;margin-bottom:.8rem}
.form-fallback p{color:var(--ink-soft);max-width:48ch;margin-inline:auto}
.form-fallback .btn-row{justify-content:center}

/* ---------------- application form ---------------- */
.apply-form{display:grid;gap:1.4rem 1.6rem}
@media(min-width:720px){
  .apply-form{grid-template-columns:1fr 1fr}
  .field--wide{grid-column:1 / -1}
}
.field{display:flex;flex-direction:column;gap:.55rem;min-width:0}
.field label{
  font-size:.64rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);
}
.field label span{color:var(--rose)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:var(--cream);border:1px solid var(--line);border-radius:4px;
  padding:.9rem 1rem;width:100%;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.field textarea{resize:vertical;min-height:7rem;line-height:1.6}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(1.25rem),calc(100% - 15px) calc(1.25rem);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.75rem;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:var(--paper);border-color:var(--rose);
  box-shadow:0 0 0 3px rgba(216,46,128,.15);
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid transparent}

.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:.4rem}
.form-actions .btn{width:auto;flex:0 0 auto}
.form-small{font-size:.85rem;color:var(--ink-soft);margin:0;max-width:38ch}
.apply-form button[disabled]{opacity:.6;cursor:progress;transform:none;box-shadow:none}

/* honeypot — off-screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-note{
  margin:0 0 1.6rem;padding:1rem 1.2rem;border-radius:4px;font-size:.95rem;
  border-left:3px solid var(--rose);background:var(--rose-soft);color:var(--ink);
}
.form-note.is-ok{border-left-color:var(--rose);background:var(--rose-soft)}
.form-note.is-error{border-left-color:#B3261E;background:#FBE9E7;color:#5F1410}

/* ---------------- women gallery ----------------
   Unsplash photos, hotlinked from their CDN as their API terms require, with
   crop=faces so every tile is cut around the face rather than the frame centre.
   Mobile: a swipeable row, so tiles keep their 4:5 shape instead of being
   re-cropped to fit a grid. */
.gallery{
  display:grid;grid-auto-flow:column;grid-auto-columns:62%;gap:.9rem;
  margin-top:3.2rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:.4rem;scrollbar-width:none;
}
.gallery::-webkit-scrollbar{display:none}
.gallery__item{
  margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:3px;
  background:#D9DCDE;scroll-snap-align:start;
}
.gallery__item img{
  width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  transition:transform 1.1s cubic-bezier(.2,.8,.3,1);
}
.gallery__item:hover img{transform:scale(1.045)}
@media(min-width:900px){
  .gallery{
    grid-auto-flow:row;grid-template-columns:repeat(5,1fr);grid-auto-columns:auto;
    overflow:visible;gap:1.1rem;align-items:start;padding-bottom:3.2rem;
  }
  .gallery__item:nth-child(even){transform:translateY(3.2rem)}
}
.gallery__credit{margin:.9rem 0 0;font-size:.68rem;letter-spacing:.03em;color:var(--ink-soft);text-align:right}
.gallery__credit a{color:inherit;text-underline-offset:2px}

/* ---------------- FAQ beside a portrait ----------------
   The photo stays in view while the questions scroll past it on desktop. */
@media(min-width:900px){
  .faq-split{align-items:start}
  .faq-split__media{position:sticky;top:6.5rem}
}
.faq-split .faq{margin:2.2rem 0 0;max-width:none}

/* the "Imagine" list sits in a single column once it shares the row with a photo */
.imagine--stack{grid-template-columns:1fr;margin-top:2rem}