/* =========================================================================
   OPUS ETERNAL — Design System
   Playfair Display (headings) + Lora (body). Warm ivory & antique gold.
   ========================================================================= */
:root{
  --ivory:#FBF7EE;
  --paper:#FFFFFF;
  --sand:#F4ECDD;
  --sand-2:#EFE4D0;
  --ink:#24201A;
  --ink-soft:#5C5347;
  --ink-mute:#8A8073;
  --gold:#B08D57;
  --gold-deep:#8A6A3B;
  --gold-soft:#E8D9BE;
  --wine:#5E2C36;
  --maroon:#743C46;
  --maroon-deep:#57262F;
  --maroon-soft:#EFE2E3;
  --forest:#33453A;
  --line:rgba(36,32,26,.12);
  --line-2:rgba(36,32,26,.22);
  --shadow-sm:0 1px 2px rgba(36,32,26,.06), 0 2px 8px rgba(36,32,26,.05);
  --shadow-md:0 8px 30px rgba(36,32,26,.10);
  --shadow-lg:0 24px 60px rgba(36,32,26,.16);
  --radius:14px;
  --radius-lg:22px;
  --maxw:1160px;
  --ff-head:"Playfair Display", Georgia, "Times New Roman", serif;
  --ff-body:"Lora", Georgia, serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--ff-body);color:var(--ink);
  background:var(--ivory);font-size:18px;line-height:1.72;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-deep);text-decoration:none;transition:color .2s}
a:hover{color:var(--ink)}
h1,h2,h3,h4{font-family:var(--ff-head);font-weight:700;line-height:1.12;color:var(--ink);margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,5.4vw,4rem);font-weight:800}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
h3{font-size:clamp(1.25rem,2vw,1.55rem)}
p{margin:0 0 1.1em}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.wrap--narrow{max-width:720px}
.center{text-align:center}
.muted{color:var(--ink-mute)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:12px;top:12px;border-radius:8px}

/* icons */
.icon{width:1.15em;height:1.15em;flex:none;vertical-align:-.15em}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--ink);--fg:#fff;--bd:var(--ink);
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--ff-body);font-weight:600;font-size:1rem;
  padding:.85em 1.5em;border-radius:999px;border:1.5px solid var(--bd);
  background:var(--bg);color:var(--fg);cursor:pointer;
  transition:transform .18s ease, box-shadow .2s, background .2s, color .2s;
  box-shadow:var(--shadow-sm);letter-spacing:.005em;line-height:1;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);color:var(--fg)}
.btn__i{display:inline-flex;transition:transform .2s}
.btn:hover .btn__i{transform:translateX(3px)}
.btn--primary{--bg:var(--ink);--fg:#fff;--bd:var(--ink)}
.btn--maroon{--bg:var(--maroon);--fg:#fff;--bd:transparent}
.btn--maroon:hover{--bg:var(--maroon-deep);--fg:#fff}
.btn--gold{--bg:linear-gradient(135deg,var(--gold) 0%,var(--gold-deep) 100%);--fg:#fff;--bd:transparent}
.btn--gold:hover{--fg:#fff}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line-2);box-shadow:none}
.btn--ghost:hover{--bg:var(--ink);--fg:#fff}
.btn--sm{padding:.62em 1.1em;font-size:.92rem}
.btn--full{width:100%;justify-content:center}

.kicker{font-family:var(--ff-body);text-transform:uppercase;letter-spacing:.22em;
  font-size:.78rem;font-weight:600;color:var(--gold-deep);margin:0 0 1em}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(251,247,238,.86);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s, box-shadow .3s, background .3s}
.site-header[data-scrolled]{border-color:var(--line);box-shadow:0 6px 24px rgba(36,32,26,.06)}
.site-header__inner{display:flex;align-items:center;gap:24px;height:74px}
.brand{display:inline-flex;align-items:center;gap:.55em;font-family:var(--ff-head);
  font-weight:700;font-size:1.34rem;color:var(--ink);letter-spacing:.01em}
.brand:hover{color:var(--ink)}
.brand__mark{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;
  border:1.5px solid var(--gold);border-radius:50%;color:var(--gold-deep)}
.brand__mark .icon{width:19px;height:19px}
.brand__logo{display:block;width:auto;max-width:220px}
/* Footer sits on the dark ink background; recolor the dark logo art to a solid light silhouette so it reads clearly. */
.brand--light .brand__logo{filter:brightness(0) invert(1);opacity:.9}
.brand__mark--ph{font-family:var(--ff-body);font-size:.62rem;font-weight:600;letter-spacing:.14em;
  color:var(--ink-mute);border:1.5px dashed var(--line-2);border-radius:8px;width:auto;padding:0 .7em;height:34px}
.brand--light .brand__mark--ph{color:var(--gold-soft);border-color:rgba(232,217,190,.4)}
.brand--light{color:var(--ivory)}
.brand--light .brand__mark{border-color:var(--gold-soft);color:var(--gold-soft)}

.nav{margin-left:auto}
.nav__list{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav__list{white-space:nowrap}
.nav__item>a{display:flex;align-items:center;gap:.3em;padding:.5em .7em;border-radius:8px;
  font-size:.96rem;font-weight:500;color:var(--ink-soft);white-space:nowrap}
.nav__item>a:hover{color:var(--ink);background:rgba(176,141,87,.1)}
.caret{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);margin-left:.15em;margin-top:-.2em;opacity:.6}
.has-sub{position:relative}
.subnav{position:absolute;top:calc(100% + 4px);left:0;min-width:238px;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-md);padding:8px;
  list-style:none;margin:0;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .2s, transform .2s, visibility .2s}
.has-sub:hover .subnav,.has-sub:focus-within .subnav{opacity:1;visibility:visible;transform:translateY(0)}
.subnav a{display:block;padding:.6em .8em;border-radius:9px;font-size:.95rem;color:var(--ink-soft)}
.subnav a:hover{background:var(--sand);color:var(--ink)}
.site-header__cta{margin-left:6px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto}
.burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{display:none}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(176,141,87,.16), transparent 55%),
    radial-gradient(90% 80% at 0% 110%, rgba(94,44,54,.08), transparent 55%),
    linear-gradient(180deg,var(--ivory),var(--sand));
  border-bottom:1px solid var(--line);
  padding:clamp(64px,10vw,120px) 0 clamp(56px,8vw,100px);
  text-align:center}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(36,32,26,.05) 1px,transparent 1px);background-size:26px 26px;opacity:.5}
.hero__inner{position:relative;max-width:860px}
.hero__eyebrow{font-family:var(--ff-body);text-transform:uppercase;letter-spacing:.24em;
  font-size:.82rem;font-weight:600;color:var(--gold-deep);margin-bottom:1.3em}
.hero__title{font-size:clamp(2.5rem,6.2vw,4.5rem);font-weight:800;letter-spacing:-.02em;line-height:1.06;margin-bottom:.35em}
.hero__title em{font-style:italic;color:var(--gold-deep)}
.hero__sub{font-size:clamp(1.08rem,1.7vw,1.34rem);color:var(--ink-soft);max-width:640px;margin:0 auto 1.8em;line-height:1.62}
.hero__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero__note{margin-top:1.6em;font-size:.94rem;color:var(--ink-mute)}

/* ---------- Trust bar ---------- */
.trustbar{background:var(--ink);color:var(--sand)}
.trustbar__inner{display:flex;align-items:center;justify-content:center;gap:16px;
  padding:14px 24px;text-align:center;flex-wrap:wrap;font-size:.96rem}
.trustbar p{margin:0}
.trustbar strong{color:#fff}
.stars{display:inline-flex;gap:2px;color:var(--gold)}
.stars .star{width:18px;height:18px;fill:var(--gold);stroke:var(--gold)}

/* ---------- Sections ---------- */
.section{padding:clamp(56px,8vw,104px) 0}
.section--soft{background:var(--sand)}
.section--paper{background:var(--paper)}
.section--ink{background:var(--ink);color:var(--sand)}
.section--ink h1,.section--ink h2,.section--ink h3{color:#fff}
.section--ink .kicker{color:var(--gold-soft)}
.section__head{max-width:680px;margin:0 auto clamp(36px,5vw,60px);text-align:center}
.section__head p{color:var(--ink-soft);font-size:1.1rem}
/* A line break that only applies on wider screens; narrow screens wrap naturally. */
.br-wide{display:none}
@media(min-width:720px){.br-wide{display:inline}}
/* Quiet attribution under a quoted heading, e.g. — Ronell K. */
.h-attrib{display:block;margin-top:.5em;color:var(--ink-mute);font-family:var(--ff-body);
  font-style:normal;font-weight:400;font-size:.95rem;letter-spacing:.02em}
.pagehead{background:linear-gradient(180deg,var(--sand),var(--ivory));border-bottom:1px solid var(--line);
  padding:clamp(56px,8vw,96px) 0 clamp(40px,6vw,64px);text-align:center}
.pagehead__sub{max-width:640px;margin:.4em auto 0;color:var(--ink-soft);font-size:1.14rem}
.lead{font-size:1.2rem;color:var(--ink-soft)}

/* ---------- Cards ---------- */
.cards{display:grid;gap:22px}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:32px 30px;box-shadow:var(--shadow-sm);transition:transform .2s, box-shadow .25s, border-color .25s;
  display:flex;flex-direction:column;color:var(--ink)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--gold-soft);color:var(--ink)}
.card__icon{width:52px;height:52px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--sand),var(--gold-soft));color:var(--gold-deep);margin-bottom:20px}
.card__icon .icon{width:26px;height:26px}
.card__kicker,.card__meta{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gold-deep);font-weight:600}
.card__meta{color:var(--ink-mute);letter-spacing:.04em;text-transform:none;margin-top:auto;padding-top:.6em}
.card__title{margin:.15em 0 .4em;font-size:1.32rem}
.card__blurb{color:var(--ink-soft);font-size:1rem;margin-bottom:1.1em}
.card__link{margin-top:auto;font-weight:600;color:var(--gold-deep);display:inline-flex;align-items:center;gap:.4em;font-size:.98rem}
.card:hover .card__link .icon{transform:translateX(3px)}
.card--post .card__title{font-size:1.22rem}

/* ---------- Full-width offering banner ---------- */
.obanner{display:flex;align-items:center;gap:24px;background:var(--sand);
  color:var(--ink);border:1px solid var(--gold-soft);border-radius:var(--radius-lg);padding:26px 32px;margin-top:22px;
  box-shadow:var(--shadow-sm);transition:transform .2s, box-shadow .25s}
.obanner:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);color:var(--ink)}
.obanner__icon{width:54px;height:54px;flex:none;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--paper);color:var(--maroon)}
.obanner__icon .icon{width:26px;height:26px}
.obanner__text{flex:1;min-width:0}
.obanner__text h3{color:var(--ink);margin:0 0 .2em}
.obanner__text p{color:var(--ink-soft);margin:0;font-size:1rem}
.obanner__link{flex:none;display:inline-flex;align-items:center;gap:.4em;font-weight:600;color:var(--maroon);white-space:nowrap}
.obanner:hover .obanner__link .icon{transform:translateX(3px)}
@media(max-width:640px){
  .obanner{flex-direction:column;text-align:center;gap:14px;padding:26px 22px}
  .obanner__link{white-space:normal}
}

/* ---------- Auto-scrolling zigzag gallery ---------- */
.gscroll{position:relative;margin-top:12px}
.gscroll__track{display:flex;gap:18px;overflow-x:auto;
  /* auto, not the inherited smooth — the JS marquee writes scrollLeft ~60x/s,
     and on iOS each write would kick off a competing smooth animation (the
     "vibration"). Arrow buttons animate via scrollBy({behavior:'smooth'}). */
  scroll-behavior:auto;overscroll-behavior-x:contain;
  padding:48px 2px;-ms-overflow-style:none;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.gscroll__track::-webkit-scrollbar{display:none}
.gtile{flex:none;width:248px;aspect-ratio:3/4;margin:0;position:relative;
  border-radius:var(--radius);overflow:hidden;transition:transform .4s ease;
  background:linear-gradient(150deg,var(--sand-2),var(--gold-soft));border:1px solid var(--line);box-shadow:var(--shadow-md)}
/* the zigzag: alternate tiles ride high and low */
.gtile:nth-child(odd){transform:translateY(-32px)}
.gtile:nth-child(even){transform:translateY(32px)}
.gtile img{width:100%;height:100%;object-fit:cover;display:block}
.gtile__ph{position:absolute;inset:0;display:none;align-items:center;justify-content:center;color:var(--gold-deep)}
.gtile--ph img{display:none}
.gtile--ph .gtile__ph{display:flex}
.gscroll__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px;border-radius:50%;
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-md);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);transition:background .2s,color .2s,opacity .2s}
.gscroll__nav:hover{background:var(--ink);color:#fff}
.gscroll__nav--prev{left:6px}
.gscroll__nav--prev .icon{transform:rotate(180deg)}
.gscroll__nav--next{right:6px}
@media(min-width:861px){.gscroll__nav{opacity:0}.gscroll:hover .gscroll__nav{opacity:1}}
@media(max-width:860px){.gtile{width:200px}
  .gtile:nth-child(odd){transform:translateY(-22px)}
  .gtile:nth-child(even){transform:translateY(22px)}
  .gscroll__track{padding:36px 2px}.gscroll__nav{width:40px;height:40px}}
@media(max-width:520px){.gtile{width:168px}}

/* ---------- Steps ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:step}
.step{display:flex;gap:24px;padding:26px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step__n{font-family:var(--ff-head);font-size:1.5rem;font-weight:700;color:var(--gold);
  width:64px;flex:none;line-height:1}
.step__title{margin:.1em 0 .3em}
.step__body{margin:0;color:var(--ink-soft)}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.split--flip .split__text{order:2}
.split__panel{aspect-ratio:4/3;border-radius:var(--radius-lg);
  background:linear-gradient(150deg,var(--sand-2),var(--gold-soft));
  border:1px solid var(--line);box-shadow:var(--shadow-md);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.split__panel::after{content:"";position:absolute;inset:14px;border:1px solid rgba(138,106,59,.35);border-radius:16px}
.split__panel-inner{text-align:center;color:var(--gold-deep);font-family:var(--ff-head);font-size:1.3rem}
.panel-icon{width:56px!important;height:56px!important;margin:0 auto .3em;stroke-width:1.2}
.split__cta{margin-top:1.4em}

/* ---------- Quotes / testimonials (photo on the left) ---------- */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.quote{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:stretch;margin:0;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px 24px;box-shadow:var(--shadow-sm);position:relative}
.quote__body{min-width:0;display:flex;flex-direction:column}
.quote__mark{color:var(--gold-soft)}
.quote__mark .icon{width:30px;height:30px}
.quote blockquote{margin:.25em 0 1em;font-size:1.02rem;line-height:1.6;color:var(--ink)}
.quote__by{display:flex;align-items:center;gap:12px;margin-top:auto}
.quote__meta{display:flex;flex-direction:column;min-width:0}
.quote__name{font-family:var(--ff-head);font-weight:700;font-size:1.05rem}
.quote__role{font-size:.86rem;color:var(--ink-mute)}

/* Testimonial photo — image on the left, initials fallback */
.qphoto{position:relative;width:94px;height:94px;flex:none;border-radius:16px;overflow:hidden;
  background:linear-gradient(135deg,var(--maroon),var(--maroon-deep));
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
.qphoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.qphoto__i{font-family:var(--ff-head);font-weight:700;color:#fff;font-size:1.6rem;letter-spacing:.02em}
.qphoto--noimg img{display:none}
.qphoto--lg{width:160px;height:196px;border-radius:18px}
.qphoto--lg .qphoto__i{font-size:2.4rem}

/* Avatars (kept for any legacy references) */
.avatar{position:relative;width:50px;height:50px;flex:none;border-radius:50%;overflow:hidden;
  background:linear-gradient(135deg,var(--maroon),var(--maroon-deep));
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avatar__i{font-family:var(--ff-head);font-weight:700;color:#fff;font-size:1.02rem;letter-spacing:.02em}
.avatar--noimg img{display:none}

/* Framed photo (e.g. founder portrait) with graceful fallback panel */
.photo-frame{position:relative;aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;margin:0;
  background:linear-gradient(150deg,var(--sand-2),var(--maroon-soft));
  border:1px solid var(--line);box-shadow:var(--shadow-md)}
.photo-frame img{width:100%;height:100%;object-fit:cover;display:block}
.photo-frame__fallback{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
  color:var(--maroon);font-family:var(--ff-head);font-size:1.2rem;gap:.2em;text-align:center;padding:1em}
.photo-frame__fallback .panel-icon{width:54px;height:54px;stroke-width:1.2}
.photo-frame--noimg img{display:none}
/* Landscape variant, for 4:3 photos sitting beside a column of copy. */
.photo-frame--wide{aspect-ratio:4/3}
/* Book covers: show the artwork whole. `cover` would crop the title off the
   top and the imprint off the bottom. The ratio is the cover's own, so the box
   is reserved before the image loads and nothing shifts. */
.photo-frame--book{aspect-ratio:1050/1489;background:var(--sand-2);border-radius:0;border:0}
.photo-frame--book img{object-fit:contain}
.photo-frame--noimg .photo-frame__fallback{display:flex}

/* Featured testimonial — larger photo on the left, larger quote */
.tfeatures{display:grid;gap:22px;max-width:900px;margin-inline:auto}
.quote--portrait{grid-template-columns:auto 1fr;gap:28px;align-items:center;max-width:880px;margin-inline:auto;
  padding:28px 32px;background:linear-gradient(160deg,var(--paper),var(--sand));border-color:var(--gold-soft)}
.quote--portrait .quote__mark .icon{width:34px;height:34px}
/* Body face, upright. The display italic was handsome but hard to read at
   length; size and leading carry the emphasis instead. */
.quote--portrait blockquote{font-size:1.18rem;font-family:var(--ff-body);font-style:normal;
  line-height:1.66;color:var(--ink);margin:.15em 0 .9em}

@media(max-width:860px){.quotes{grid-template-columns:1fr}}
@media(max-width:560px){
  .quote{grid-template-columns:1fr;justify-items:start;gap:14px}
  .qphoto{width:80px;height:80px}
  /* Grid cards on mobile: quote first, then a bigger photo beside the name. */
  .quotes .quote{grid-template-columns:auto 1fr;justify-items:stretch;align-items:center;
    grid-template-areas:"mark mark" "text text" "photo by";column-gap:14px;row-gap:0;padding:20px}
  .quotes .quote__body{display:contents}
  .quotes .quote__mark{grid-area:mark}
  .quotes .quote blockquote{grid-area:text;margin-bottom:1.1em}
  .quotes .quote__by{grid-area:by;margin-top:0}
  .quotes .qphoto{grid-area:photo;width:92px;height:92px;border-radius:14px}
  .quotes .qphoto__i{font-size:1.5rem}
  .quote--portrait{grid-template-columns:1fr;justify-items:center;text-align:center;gap:16px;padding:24px 22px}
  .quote--portrait .quote__by{justify-content:center}
  .qphoto--lg{width:132px;height:158px}
  .quote--portrait blockquote{font-size:1.05rem;line-height:1.68}
}

/* Proof card tucked under the How It Works CTA, filling the column beside the
   long step list. Hidden on narrow screens, where there is no gap to fill. */
.hiw-proof{margin-top:2.6em;display:grid;gap:16px}
.hiw-proof .kicker{margin:0}
.hiw-proof .quote{background:var(--sand);border-color:var(--gold-soft);margin:0}
@media(max-width:900px){.hiw-proof{display:none}}

/* ---------- Inline CTA card (sits in the testimonial grid) ---------- */
.quote--cta{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:.15em;text-align:left;border-color:transparent;color:#fff;
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(176,141,87,.28), transparent 60%),
    linear-gradient(160deg, var(--maroon), var(--maroon-deep))}
.quote--cta__kick{font-family:var(--ff-body);text-transform:uppercase;letter-spacing:.2em;
  font-size:.74rem;font-weight:600;color:rgba(255,255,255,.7);margin:0 0 .6em}
.quote--cta h3{color:#fff;font-family:var(--ff-head);font-size:clamp(1.45rem,3vw,1.8rem);
  line-height:1.15;margin:0 0 .35em}
.quote--cta p{color:rgba(255,255,255,.88);font-size:1rem;line-height:1.55;margin:0 0 1.3em}
.quote--cta .btn--ghost{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.55);margin-top:auto}
.quote--cta .btn--ghost:hover{--bg:#fff;--fg:var(--maroon)}

/* A quieter secondary action beside a primary button. */
.cta-pair{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:center}
.cta-pair .link-quiet{font-family:var(--ff-body);font-weight:500;font-size:.98rem;
  color:var(--ink-soft);text-decoration:underline;text-decoration-color:var(--line-2);
  text-underline-offset:4px}
.cta-pair .link-quiet:hover{color:var(--ink);text-decoration-color:var(--gold)}

/* ---------- City / language tag lists ---------- */
.taglist{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:.2em 0 1em}
.taglist li{font-size:.85rem;line-height:1;padding:7px 11px;border-radius:999px;
  background:var(--sand);border:1px solid var(--line);color:var(--ink-soft);white-space:nowrap}

/* ---------- "Become an interviewer" footer block ---------- */
.joinus{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
  max-width:820px;margin-inline:auto;padding:28px 30px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.joinus__icon{color:var(--gold-deep);flex:none}
.joinus__icon .icon{width:34px;height:34px}
.joinus__title{font-size:1.35rem;margin:0 0 .35em}
.joinus p{color:var(--ink-soft);margin:0 0 .8em}
.joinus__list{margin:0 0 1em;padding-left:1.15em;color:var(--ink-soft)}
.joinus__list li{margin:.25em 0}
@media(max-width:560px){
  .joinus{grid-template-columns:1fr;gap:14px;padding:24px 22px}
}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin-inline:auto;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 4px;font-family:var(--ff-head);font-size:1.16rem;font-weight:600;color:var(--ink)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__plus{position:relative;width:18px;height:18px;flex:none}
.faq__plus::before,.faq__plus::after{content:"";position:absolute;background:var(--gold-deep);border-radius:2px;transition:.25s}
.faq__plus::before{top:8px;left:0;width:18px;height:2px}
.faq__plus::after{left:8px;top:0;width:2px;height:18px}
.faq__item[open] .faq__plus::after{transform:rotate(90deg);opacity:0}
.faq__a{padding:0 4px 24px;color:var(--ink-soft)}
.faq__a p{margin:0}

/* ---------- Comparison table ---------- */
.ctable-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow-sm);background:var(--paper)}
.ctable{width:100%;border-collapse:collapse;min-width:560px}
.ctable th,.ctable td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.ctable thead th{font-family:var(--ff-head);font-size:1.1rem;background:var(--sand);position:sticky;top:0}
.ctable tbody th{font-weight:600;color:var(--ink);font-family:var(--ff-body);font-size:1rem}
.ctable__us{background:rgba(176,141,87,.09)}
.ctable thead .ctable__us{background:var(--ink);color:#fff}
.ctable__feat{width:34%}
.ctable td{text-align:center}
.ctable tbody th{text-align:left}
.ok{color:#2e7d54;display:inline-flex}.ok .icon{width:22px;height:22px;stroke-width:2.4}
.no{color:#b3492f;display:inline-flex;opacity:.7}.no .icon{width:20px;height:20px;stroke-width:2.2}
.ctable .txt{font-size:.95rem}
.ctable tr:last-child th,.ctable tr:last-child td{border-bottom:0}

/* ---------- Checklist ---------- */
.checklist{list-style:none;margin:1.4em 0;padding:0;display:grid;gap:.7em}
.checklist li{display:flex;gap:.7em;align-items:flex-start;color:var(--ink-soft)}
.checklist .icon{color:var(--gold-deep);margin-top:.28em;width:20px;height:20px;stroke-width:2.4;flex:none}

/* ---------- Lead form ---------- */
.leadform{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);padding:clamp(28px,4vw,44px);max-width:680px;margin-inline:auto}
.leadform__head{text-align:center;margin-bottom:1.6em}
.leadform__head p{color:var(--ink-soft);margin:0}
.lf{display:grid;gap:16px}
.lf__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end}
.lf label{display:flex;flex-direction:column;justify-content:flex-end;gap:.4em;font-size:.92rem;font-weight:600;color:var(--ink)}
.lf label>input,.lf label>select,.lf label>textarea{margin-top:auto}
.lf .opt{font-weight:400;color:var(--ink-mute)}
/* Keeps "(optional)" on the same line as its question — a bare text node plus a
   span would otherwise become two stacked flex items. */
.lf__lab{display:block}
.lf input,.lf select,.lf textarea{font-family:var(--ff-body);font-size:1rem;padding:.72em .9em;
  border:1.5px solid var(--line-2);border-radius:10px;background:var(--ivory);color:var(--ink);width:100%;transition:border-color .2s, box-shadow .2s}
.lf input:focus,.lf select:focus,.lf textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,141,87,.18)}
.lf textarea{resize:vertical}
.lf .hp{position:absolute;left:-9999px}
.lf__fine{text-align:center;font-size:.9rem;color:var(--ink-mute);margin:.2em 0 0}
.lf__status{padding:14px 16px;border-radius:10px;font-size:.96rem;text-align:center}
.lf__status.ok{background:#e7f4ec;color:#215c3c;display:block}
.lf__status.err{background:#fbeae6;color:#8a3320;display:block}

/* ---------- CTA banner ---------- */
.cta{background:
    radial-gradient(90% 140% at 100% 0%, rgba(176,141,87,.22), transparent 60%),
    var(--ink);
  color:var(--sand);text-align:center;padding:clamp(56px,8vw,96px) 0}
.cta__inner{max-width:640px;margin-inline:auto}
.cta h2{color:#fff;margin-bottom:.3em}
.cta p{color:rgba(244,236,221,.85);font-size:1.14rem;margin-bottom:1.8em}

/* ---------- Prose (blog + long copy) ---------- */
.prose{font-size:1.12rem;line-height:1.78;color:var(--ink)}
.prose h2{margin-top:1.7em;font-size:clamp(1.5rem,2.6vw,2rem)}
.prose h3{margin-top:1.4em}
.prose p{margin:0 0 1.15em}
/* :not(.btn) so a button dropped into prose keeps its own colour and pill —
   otherwise it renders as gold underlined text on the maroon fill. */
.prose a:not(.btn){color:var(--gold-deep);text-decoration:underline;text-decoration-color:var(--gold-soft);text-underline-offset:3px}
.prose a:not(.btn):hover{color:var(--ink)}
.prose ul,.prose ol{margin:0 0 1.3em;padding-left:1.3em}
.prose li{margin:.4em 0}
.prose blockquote{margin:1.6em 0;padding:.4em 0 .4em 1.4em;border-left:3px solid var(--gold);
  font-family:var(--ff-head);font-style:italic;font-size:1.3rem;color:var(--ink)}
.prose img{border-radius:var(--radius);margin:1.6em 0;box-shadow:var(--shadow-sm)}
.prose code{background:var(--sand);padding:.12em .4em;border-radius:5px;font-size:.9em}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}

/* ---------- Blog post ---------- */
.post{padding:clamp(40px,6vw,72px) 0}
.crumbs{display:flex;align-items:center;gap:.5em;font-size:.88rem;color:var(--ink-mute);margin-bottom:1.4em}
.crumbs .icon{width:14px;height:14px}
.post__tags{display:flex;gap:.5em;flex-wrap:wrap;margin-bottom:.8em}
.post__tags span{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;font-weight:600;
  color:var(--gold-deep);background:var(--sand);padding:.35em .8em;border-radius:999px}
.post__title{font-size:clamp(2rem,4.6vw,3.2rem)}
.post__meta{color:var(--ink-mute);font-size:.95rem;margin-bottom:0}
.post__body{margin-top:2.4em}
.post__cta{margin-top:3em;padding:36px;border-radius:var(--radius-lg);background:var(--sand);text-align:center}
.post__cta h3{margin-bottom:.3em}
.post__cta p{color:var(--ink-soft);max-width:460px;margin:0 auto 1.4em}

/* ---------- Stat / logos strip ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stat{padding:20px}
.stat__n{font-family:var(--ff-head);font-size:clamp(2rem,4vw,2.9rem);font-weight:800;color:var(--gold-deep);line-height:1}
.stat__l{color:var(--ink-soft);font-size:.98rem;margin-top:.3em}

/* ---------- Pricing ---------- */
.ptiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.ptier{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px 30px;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.ptier--feature{border-color:var(--gold);box-shadow:var(--shadow-lg);position:relative}
.ptier__badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--gold);color:#fff;
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:.35em 1em;border-radius:999px}
.ptier__name{font-family:var(--ff-head);font-size:1.4rem;font-weight:700;margin-bottom:.2em}
.ptier__price{font-family:var(--ff-head);font-size:2.2rem;font-weight:800;color:var(--ink);margin:.2em 0}
.ptier__price small{font-family:var(--ff-body);font-size:.9rem;font-weight:400;color:var(--ink-mute);display:block}
.ptier__desc{color:var(--ink-soft);font-size:.98rem;margin-bottom:1.2em}
.ptier .checklist{margin:0 0 1.6em}
.ptier .btn{margin-top:auto}

/* ---------- Misc layout helpers ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:start}
.mt-0{margin-top:0}
.narrow-copy{max-width:680px}
.badge-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:1.6em}
.badge{display:inline-flex;align-items:center;gap:.5em;background:var(--paper);border:1px solid var(--line);
  border-radius:999px;padding:.5em 1em;font-size:.9rem;color:var(--ink-soft);box-shadow:var(--shadow-sm)}
.badge .icon{color:var(--gold-deep);width:18px;height:18px}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:rgba(244,236,221,.72);padding:clamp(48px,7vw,80px) 0 32px;margin-top:0}
.site-footer a{color:rgba(244,236,221,.72)}
.site-footer a:hover{color:#fff}
.site-footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:36px}
.site-footer__brand p{font-size:.95rem;margin:.9em 0 0;max-width:34ch}
.site-footer__brand .muted{color:rgba(244,236,221,.5)}
.site-footer__col h4{font-family:var(--ff-body);font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--gold-soft);margin:0 0 1em}
.site-footer__col a{display:block;padding:.28em 0;font-size:.95rem}
.site-footer__bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:44px;padding-top:24px;border-top:1px solid rgba(244,236,221,.14);font-size:.88rem;color:rgba(244,236,221,.55)}
.site-footer__bar a{color:rgba(244,236,221,.7)}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
  .nav,.site-header__cta{display:none}
  .burger{display:flex}
  .cards--3,.cards--4,.ptiers,.stats{grid-template-columns:1fr 1fr}
  .quotes{columns:2}
  .split{grid-template-columns:1fr}
  .split--flip .split__text{order:0}
  .split__panel{max-width:480px;order:-1}
  .site-footer__grid{grid-template-columns:1fr 1fr}
  .site-footer__brand{grid-column:1 / -1}
}
@media(max-width:640px){
  body{font-size:17px}
  .cards--3,.cards--4,.cards--2,.ptiers,.stats,.grid-2{grid-template-columns:1fr}
  .quotes{columns:1}
  .lf__row{grid-template-columns:1fr}
  .hero__cta{flex-direction:column}
  .hero__cta .btn{width:100%;justify-content:center}
  .site-footer__grid{grid-template-columns:1fr}
  .step{gap:14px}
  .step__n{width:44px;font-size:1.2rem}
  .trustbar__inner{font-size:.86rem}
}

/* ---------- Mobile nav panel ---------- */
@media(max-width:1080px){
  .mobile-nav{display:block;position:fixed;inset:74px 0 auto 0;background:var(--ivory);
    border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);
    max-height:0;overflow:hidden;transition:max-height .35s ease;z-index:99}
  .mobile-nav[data-open]{max-height:calc(100vh - 74px);overflow-y:auto;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  /* Deliberately vh, not dvh. On iOS, 100vh is taller than the visible area, so
     the last item can sit below the fold — the generous bottom padding on the
     list (plus the panel scrolling) is what actually clears the phone's
     navigation bar, and it behaves identically on every engine. */
  .mobile-nav ul{list-style:none;margin:0;
    padding:16px 24px calc(40px + env(safe-area-inset-bottom))}
  .mobile-nav li{border-bottom:1px solid var(--line);padding:2px 0}
  .mobile-nav li:last-child{border-bottom:0;padding-top:16px}
  .mobile-nav__cta{padding-bottom:24px}
  /* :not(.btn) so the CTA keeps the button's own colour, centring and padding —
     otherwise it renders as dark heading text jammed against the left edge. */
  .mobile-nav a:not(.btn){display:block;padding:.75em 0;font-family:var(--ff-head);font-size:1.15rem;color:var(--ink)}
  .mobile-nav a.sub{font-family:var(--ff-body);font-size:1rem;padding:.5em 0 .5em 1em;color:var(--ink-soft)}
  /* Collapsible sections — the heading toggles, the links inside navigate. */
  .mnav__group>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:.75em 0;font-family:var(--ff-head);font-size:1.15rem;color:var(--ink);
    cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
  .mnav__group>summary::-webkit-details-marker{display:none}
  .mnav__group>summary::marker{content:""}
  .mnav__chev{width:10px;height:10px;flex:none;margin-right:4px;
    border-right:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s ease}
  .mnav__group[open]>summary .mnav__chev{transform:rotate(-135deg) translate(-2px,-2px)}
  .mnav__group>a.sub:last-child{padding-bottom:.9em}
  body[data-nav-open]{overflow:hidden}
}

/* ---------- Free tools ---------- */
.tool{max-width:820px;margin-inline:auto;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:clamp(24px,4vw,40px)}
.tool--tree,.tool--cover{max-width:1020px;display:grid;grid-template-columns:350px 1fr;gap:28px;align-items:start}
.tool__bar{display:flex;justify-content:space-between;gap:12px;font-size:.8rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--gold-deep);font-weight:600;margin-bottom:1em}
.tool__q{font-family:var(--ff-head);font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.25;margin:0 0 .8em;color:var(--ink)}
.tool__ans{width:100%;font-family:var(--ff-body);font-size:1.05rem;padding:.9em 1em;
  border:1.5px solid var(--line-2);border-radius:12px;background:var(--ivory);resize:vertical}
.tool__ans:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,141,87,.18)}
.tool__controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.tool__hint{font-size:.86rem;color:var(--ink-mute);margin:.9em 0 0}
.tool hr{border:0;border-top:1px solid var(--line);margin:1.4em 0}
.tool__actions{display:flex;gap:10px;flex-wrap:wrap}
.tool__status{margin:1em 0 0;padding:12px 14px;border-radius:10px;font-size:.95rem}
.tool__status.ok{background:#e7f4ec;color:#215c3c}
.tool__status.err{background:#fbeae6;color:#8a3320}
.mic-dot{width:9px;height:9px;border-radius:50%;background:currentColor;display:inline-block;margin-right:.15em;opacity:.6;vertical-align:middle}
#iv-mic.is-live{--bg:#9d2f2e;--bd:transparent}
#iv-mic.is-live .mic-dot{opacity:1;background:#fff;animation:micpulse 1s infinite}
@keyframes micpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.5);opacity:.5}}
.tool__cta{max-width:820px;margin:2em auto 0;text-align:center;background:var(--sand);border-radius:var(--radius-lg);padding:28px}
.tool__cta p{max-width:540px;margin:0 auto 1.1em;color:var(--ink-soft)}
/* family tree */
.ft-form fieldset{border:1px solid var(--line);border-radius:12px;padding:14px 16px 16px;margin:0 0 16px}
.ft-form legend{font-family:var(--ff-head);font-weight:700;padding:0 .5em;font-size:1rem}
.ft-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ft-form label{display:flex;flex-direction:column;gap:.35em;font-size:.84rem;font-weight:600;color:var(--ink)}
.ft-form .opt{font-weight:400;color:var(--ink-mute)}
.ft-form input{font-family:var(--ff-body);font-size:.98rem;padding:.6em .8em;border:1.5px solid var(--line-2);border-radius:9px;background:var(--ivory)}
.ft-form input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,141,87,.18)}
.ft-preview{background:var(--sand);border:1px solid var(--line);border-radius:var(--radius);padding:14px;overflow:auto}
/* dynamic family-tree editor */
.ft-help{font-size:.86rem;color:var(--ink-mute);margin:0 0 12px;line-height:1.45}
.ft-editor{max-height:460px;overflow:auto;padding:2px 2px 2px 0}
.ft-node{margin:.3em 0}
.ft-node .ft-node{border-left:2px solid var(--line);margin-left:.5em;padding-left:.7em}
.ft-row{display:flex;gap:.4em;align-items:center;flex-wrap:wrap;margin:.28em 0}
.ft-in{flex:1 1 96px;min-width:0;font-family:var(--ff-body);font-size:.92rem;padding:.42em .6em;border:1.5px solid var(--line-2);border-radius:8px;background:var(--ivory);color:var(--ink)}
.ft-in:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,141,87,.18)}
.ft-btn{flex:0 0 auto;font-family:var(--ff-body);font-size:.8rem;font-weight:600;padding:.4em .6em;border:1.5px solid var(--line-2);border-radius:8px;background:var(--paper);color:var(--gold-deep,var(--gold));cursor:pointer;line-height:1}
.ft-btn:hover{border-color:var(--gold);background:var(--sand)}
.ft-btn--x{color:#8a3320;font-size:1.05rem;padding:.2em .55em}
/* book cover */
.bc-form label{display:flex;flex-direction:column;gap:.4em;font-size:.9rem;font-weight:600;margin-bottom:14px;color:var(--ink)}
.bc-form input,.bc-form select{font-family:var(--ff-body);font-size:1rem;padding:.6em .8em;border:1.5px solid var(--line-2);border-radius:9px;background:var(--ivory)}
.bc-form input:focus,.bc-form select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,141,87,.18)}
.bc-stage{display:flex;align-items:flex-start;justify-content:center;background:var(--sand);border-radius:var(--radius);padding:24px}
.bc-stage canvas{max-width:100%;height:auto;box-shadow:var(--shadow-lg);border-radius:2px}
@media(max-width:860px){.tool--tree,.tool--cover{grid-template-columns:1fr}}
@media(max-width:520px){.ft-grid{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

/* reveal on scroll */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
[data-reveal].in{opacity:1;transform:none}