/* ==========================================================================
   Nextra Careers — built on the Nextra Careers design system tokens.
   Hairlines, never shadows. Paper, not white. One italic word. One accent.
   ========================================================================== */

:root{
  /* Colour — Paper theme */
  --paper:#F5F2EA;
  --paper-warm:#ECE6D9;
  --surface:#FFFFFF;
  --mist:#DFD8C8;
  --ink:#14201B;
  --slate:#4A5A52;
  --muted:#6A7A72;
  --forest:#1D4A38;
  --forest-deep:#133328;
  --gold:#C08A2E;
  --gold-bright:#E3AD4A;
  --on-forest:#F5F2EA;
  --on-forest-muted:#B6C7BD;
  --on-gold:#14201B;
  --danger:#9E3B2C;
  /* forest lightened, for the "after" document bars only */
  --forest-bar:#4E7466;
  /* Fiverr's brand green, for the dot in the review badge only */
  --fiverr:#1DBF73;

  /* Type */
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* Radius — the brand is nearly square */
  --r-sm:3px;   /* controls */
  --r-md:4px;   /* cards and panels */
  --r-badge:2px;

  /* Borders */
  --hairline:1px;
  --rule:1.5px;
  --focus:2.4px;

  /* Layout */
  --header-h:84px;
  --gutter:clamp(20px,5vw,72px);
  --band:clamp(56px,6.67vw,96px);
  --anchor:calc(var(--header-h) + 24px);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--slate);
  font:400 17px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}

/* hidden must beat component display rules (.lb is display:flex), or a closed
   overlay stays in the page, transparent but still catching every click */
[hidden]{display:none !important}

a{color:var(--forest);text-decoration:none}
a:hover{color:var(--forest-deep)}

h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;color:var(--ink)}

/* The one italic word */
em{font-style:italic;color:var(--forest);font-weight:inherit}

::selection{background:var(--gold-bright);color:var(--on-gold)}

:focus-visible{
  outline:var(--focus) solid var(--gold);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--forest);color:var(--on-forest);
  padding:var(--s3) var(--s5);border-radius:var(--r-sm);
  font-size:15px;font-weight:600;
}
.skip:focus{left:var(--s4);top:var(--s4)}

.honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* read by screen readers, not shown */
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:1440px;margin:0 auto;padding:0 var(--gutter)}

section[id]{scroll-margin-top:var(--anchor)}

/* ==========================================================================
   Type primitives
   ========================================================================== */

.eyebrow{
  display:flex;align-items:center;gap:var(--s3);
  margin:0;
  font-size:11.5px;font-weight:600;line-height:1;
  letter-spacing:3.6px;text-transform:uppercase;
  color:var(--slate);
}
.eyebrow .rule{display:block;width:34px;height:1px;background:var(--gold);flex:none}
.eyebrow-center{justify-content:center}

h1{
  font-size:clamp(46px,5.4vw,78px);
  line-height:1.04;
  letter-spacing:-.5px;
}

.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:var(--s7)}
.sec-head h2{font-size:clamp(34px,3.75vw,54px);line-height:1.05}
.sec-head .sub{margin:0;font-size:clamp(16px,1.18vw,17px);line-height:1.6;color:var(--slate);max-width:620px}
.sec-head-center{align-items:center;text-align:center}
.sec-head-center .sub{max-width:620px}

.lead{margin:0;font-size:clamp(17px,1.32vw,19px);line-height:1.6;color:var(--slate);max-width:540px}

.link{
  font-size:14px;font-weight:600;color:var(--forest);
  display:inline-flex;align-items:center;gap:6px;
}
.link:hover{color:var(--forest-deep)}

/* keeps a short trailing fragment (a day label) off a line of its own */
.nb{white-space:nowrap}

/* ==========================================================================
   Buttons — radius-sm, 1.5px rule, never a shadow
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 30px;
  border-radius:var(--r-sm);
  border:var(--rule) solid transparent;
  font-family:var(--sans);font-size:15.5px;font-weight:600;line-height:1;
  text-align:center;cursor:pointer;
  transition:background-color .18s,border-color .18s,color .18s;
}
.btn-sm{min-height:44px;padding:0 var(--s5);font-size:14.5px}
.btn-block{width:100%}

/* gold — the single accent, on the one action a screen wants taken */
.btn-primary{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.btn-primary:hover{background:#A9781f;border-color:#A9781f;color:var(--on-gold)}

/* gold-bright — gold when it sits on forest */
.btn-gold{background:var(--gold-bright);border-color:var(--gold-bright);color:var(--on-gold)}
.btn-gold:hover{background:#d09a35;border-color:#d09a35;color:var(--on-gold)}

.btn-forest{background:var(--forest);border-color:var(--forest);color:var(--on-forest)}
.btn-forest:hover{background:var(--forest-deep);border-color:var(--forest-deep);color:var(--on-forest)}

.btn-outline{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--paper)}

.section-dark .btn:focus-visible,
.footer .btn:focus-visible{outline-color:var(--gold-bright)}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header{
  position:sticky;top:0;z-index:60;
  background:var(--paper);
  border-bottom:var(--hairline) solid var(--mist);
}
.header-in{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:var(--s5)}
.brand{display:flex;align-items:center}
.brand-logo{display:block;height:30px;width:auto}

.nav{display:flex;align-items:center;gap:34px}
.nav a{font-size:14.5px;font-weight:500;color:var(--ink)}
.nav a:hover{color:var(--forest)}

.header-actions{display:flex;align-items:center;gap:var(--s4)}

.burger{
  display:none;width:44px;height:44px;padding:0;
  border:0;background:transparent;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile drawer */
.drawer{
  position:fixed;inset:var(--header-h) 0 0 0;z-index:55;
  background:var(--paper);
  border-top:var(--hairline) solid var(--mist);
  padding:var(--s6) var(--gutter) var(--s8);
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--s7);
  overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  /* visibility flips instantly on open and only waits on close, so the panel
     never depends on a transition actually running to become reachable */
  transition:opacity .2s,transform .2s,visibility 0s linear .2s;
}
.drawer.open{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .2s,transform .2s,visibility 0s;
}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{
  padding:var(--s4) 0;
  border-bottom:var(--hairline) solid var(--mist);
  font-family:var(--serif);font-size:25px;line-height:1.12;color:var(--ink);
}
.drawer nav a:hover{color:var(--forest)}
.drawer-cta{display:flex;flex-direction:column;gap:var(--s3)}

/* ==========================================================================
   Bands
   ========================================================================== */

.section{padding:var(--band) 0;background:var(--paper)}
.section-tint{background:var(--paper-warm)}

.section-dark{background:var(--forest)}
.section-dark h2,.section-dark h3{color:var(--on-forest)}
.section-dark .sub,.section-dark p{color:var(--on-forest-muted)}
.section-dark .eyebrow{color:var(--on-forest-muted)}
.section-dark .eyebrow .rule{background:var(--gold-bright)}
.section-dark em{color:var(--gold-bright)}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{padding:clamp(40px,6.1vw,88px) 0;background:var(--paper)}
.hero-grid{display:flex;flex-direction:row;gap:var(--s7);align-items:flex-start}
.hero-copy{display:flex;flex-direction:column;gap:30px;flex:1 1 auto;min-width:0}
.cta-row{display:flex;flex-direction:row;gap:var(--s3);flex-wrap:wrap}

/* Trust strip. Each item carries its dot in its left margin and the list is
   pulled left inside a clipping box, so a wrapped line never starts with one. */
.trust{overflow:hidden}
.trust ul{display:flex;flex-wrap:wrap;row-gap:2px;margin:0 0 0 -22px;padding:0;list-style:none}
.trust li{position:relative;margin-left:22px;font-size:14px;line-height:1.5;color:var(--slate);text-wrap:balance}
.trust li::before{content:"\00B7";content:"\00B7" / "";position:absolute;left:-22px;width:22px;text-align:center}
/* Fixed breaks keep the line count the same in the fallback font and in Work
   Sans, so the strip doesn't reflow (and shift the page) when the font swaps. */
.trust li:last-child{flex-basis:calc(100% - 22px)}

.hero-visual{display:flex;flex-direction:column;gap:14px;width:520px;flex:0 0 auto}

.doc{display:flex;flex-direction:column;gap:14px;padding:var(--s5);border-radius:var(--r-md)}
.doc-before{background:var(--surface);border:var(--hairline) solid var(--mist)}
.doc-after{background:var(--forest)}
.doc-head{
  display:flex;justify-content:space-between;
  font-size:11px;font-weight:600;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--muted);
}
.doc-after .doc-head span:first-child{color:var(--gold-bright)}
.doc-after .doc-head span:last-child{color:var(--on-forest-muted)}
.doc .bar{display:block;height:8px;border-radius:var(--r-badge);background:var(--paper-warm)}
.doc-after .bar{background:var(--forest-bar);transform-origin:left center}
.doc-after .bar-gold{background:var(--gold-bright)}
.doc-note{margin:0;font-size:14px;font-style:italic;color:var(--muted)}
.doc-after .doc-note{color:var(--on-forest-muted)}
.doc-step{
  display:flex;align-items:center;gap:10px;margin:0;padding-left:var(--s1);
  font-size:12px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--slate);
}
.doc-step svg{color:var(--gold);flex:none}

/* ==========================================================================
   Value strip
   ========================================================================== */

.strip{
  padding:var(--s7) 0;background:var(--paper-warm);
  border-top:var(--hairline) solid var(--mist);
  border-bottom:var(--hairline) solid var(--mist);
}
.strip-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)}
.strip-item{display:flex;gap:var(--s4);align-items:baseline}
.strip-n{font-family:var(--serif);font-size:28px;line-height:1;color:var(--gold);flex:none}
.strip-item p{margin:0;font-size:15px;line-height:1.5;color:var(--slate)}

/* ==========================================================================
   Services
   ========================================================================== */

.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.svc{
  display:flex;flex-direction:column;gap:var(--s3);
  padding:26px;background:var(--surface);
  border:var(--hairline) solid var(--mist);border-radius:var(--r-md);
}
.svc-num{font-size:11px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:var(--forest)}
.svc h3{font-size:25px;line-height:1.12}
.svc p{margin:0;font-size:15px;line-height:1.5;color:var(--slate)}
.svc .link{margin-top:auto;padding-top:var(--s2)}

/* ==========================================================================
   Pricing
   ========================================================================== */

.pkg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.pkg{
  position:relative;display:flex;flex-direction:column;gap:22px;
  padding:38px 34px;
  background:var(--paper);
  border:var(--hairline) solid var(--mist);border-radius:var(--r-md);
}
.pkg-feat{background:var(--forest);border-color:var(--forest)}
.pkg-badge{
  position:absolute;top:-12px;left:32px;
  padding:6px 9px;border-radius:var(--r-badge);
  background:var(--gold-bright);color:var(--on-gold);
  font-size:10px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
}
.pkg-head{display:flex;flex-direction:column;gap:var(--s2);padding-bottom:22px;border-bottom:var(--hairline) solid var(--mist)}
.pkg-feat .pkg-head{border-bottom-color:rgba(182,199,189,.35)}
.pkg-tier{margin:0;font-size:11px;font-weight:700;letter-spacing:2.8px;text-transform:uppercase;color:var(--muted)}
.pkg-price{margin:0;font-family:var(--serif);font-size:clamp(40px,3.2vw,46px);line-height:1;color:var(--ink)}
.pkg-desc{margin:0;font-size:14.5px;color:var(--slate)}
.pkg-feat .pkg-tier,.pkg-feat .pkg-desc{color:var(--on-forest-muted)}
.pkg-feat .pkg-price{color:var(--on-forest)}

.pkg-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.pkg-list li{font-size:15px;line-height:1.5;color:var(--slate)}
.pkg-list-head{font-size:11px !important;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:var(--ink) !important}
.pkg-feat .pkg-list li{color:var(--on-forest-muted)}
.pkg-feat .pkg-list-head{color:var(--gold-bright) !important}
.pkg-foot{margin-top:auto}
.pkg-feat .btn-outline{border-color:var(--on-forest);color:var(--on-forest)}

@media (hover:hover){
  .pkg:hover{border-color:var(--forest)}
  /* the featured card answers in gold-bright; its badge stays exactly as it is */
  .pkg-feat:hover{border-color:var(--gold-bright)}
  .pkg-feat:hover .btn-gold{background:var(--gold-bright);border-color:var(--gold-bright)}
}

.pkg-note{
  display:flex;align-items:center;justify-content:center;gap:var(--s4);
  margin:40px 0 0;font-size:15px;color:var(--slate);text-align:center;
}
.pkg-note .rule{display:block;width:60px;height:1px;background:var(--mist);flex:none}
.pkg-note a{text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   Samples
   ========================================================================== */

.sample-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}
.sample{
  display:flex;flex-direction:column;gap:14px;text-align:left;
  margin:0;padding:0;border:0;background:transparent;
  font-family:inherit;cursor:zoom-in;
}
.sample-thumb{
  display:block;aspect-ratio:3/4;overflow:hidden;
  background:var(--paper-warm);
  border:var(--hairline) solid var(--mist);border-radius:var(--r-sm);
}
.sample-thumb picture{display:block;width:100%;height:100%}
.sample-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .3s}
.sample:hover .sample-thumb img{transform:scale(1.02)}
.sample-kind{font-size:11px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:var(--forest)}
.sample-role{font-family:var(--serif);font-size:22px;line-height:1.15;color:var(--ink)}
.sample-desc{font-size:14.5px;line-height:1.5;color:var(--slate)}

/* ==========================================================================
   Split sections — resume transformation, LinkedIn
   ========================================================================== */

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s7);align-items:start}
.split-copy{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.split-copy h2{font-size:clamp(34px,3.06vw,44px);line-height:1.05}
.split-copy .sub{margin:0;font-size:clamp(16px,1.18vw,17px);line-height:1.6;color:var(--slate)}

.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;width:100%}
.checks li{
  position:relative;padding:14px 0 14px 26px;
  border-top:var(--hairline) solid var(--mist);
  font-size:15.5px;line-height:1.5;color:var(--slate);
}
.checks li:last-child{border-bottom:var(--hairline) solid var(--mist)}
.checks li::before{
  content:"";position:absolute;left:0;top:23px;
  width:12px;height:1px;background:var(--forest);
}

.ba{display:flex;flex-direction:column;gap:14px}
.ba-card{
  display:flex;flex-direction:column;gap:var(--s3);
  padding:var(--s5);border-radius:var(--r-md);
  background:var(--surface);border:var(--hairline) solid var(--mist);
}
.ba-card p{margin:0;font-size:15.5px;line-height:1.55;color:var(--slate)}
.ba-card .tag{font-size:11px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;color:var(--muted)}
.ba-after{background:var(--forest);border-color:var(--forest)}
.ba-after p{color:var(--on-forest)}
.ba-after .tag{color:var(--gold-bright)}
.ba-cap{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted)}

/* ==========================================================================
   Coaching
   ========================================================================== */

.coach-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.coach-item{display:flex;flex-direction:column;gap:10px;padding-top:22px;border-top:var(--hairline) solid var(--on-forest-muted)}
.coach-item h3{font-size:28px;line-height:1.12}
.coach-item p{margin:0;font-size:15.5px;line-height:1.55}
.coach-cta{margin-top:44px}

/* ==========================================================================
   Reviews — a wall of proof: every quote sits on the screenshot it came from
   ========================================================================== */

.rev-agg{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) 14px;
  margin:0 0 28px;
  font-size:15.5px;line-height:1.4;color:var(--slate);
}
.rev-agg strong{font-family:var(--serif);font-size:26px;font-weight:400;line-height:1;color:var(--ink)}
.rev-stars{display:block;flex:none;width:92px;height:16px;fill:var(--gold)}

/* Masonry from CSS columns: cards keep source order, reading down each column */
.rev-wall{columns:3;column-gap:var(--s5)}
.rev{
  display:flex;flex-direction:column;gap:20px;
  margin:0 0 var(--s5);padding:28px;
  break-inside:avoid;
  background:var(--surface);
  border:var(--hairline) solid var(--mist);border-radius:var(--r-md);
}
.rev:focus-visible{border-radius:var(--r-md)}
.rev:has(:focus-visible){border-color:var(--forest)}
.rev blockquote{
  margin:0;font-family:var(--serif);font-style:italic;
  font-size:22px;line-height:1.35;color:var(--ink);
}

/* thumbnail and caption are one control, so either opens the original */
.rev-proof{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);
  align-self:flex-start;
  margin:0;padding:0;border:0;background:none;
  font:inherit;text-align:left;cursor:zoom-in;
}
.rev-thumb{
  display:block;flex:none;width:144px;aspect-ratio:3/2;overflow:hidden;
  background:var(--surface);
  border:var(--hairline) solid var(--mist);border-radius:var(--r-sm);
}
.rev-thumb img{width:100%;height:100%;object-fit:cover}
.rev-proof-cap{font-size:14px;font-weight:600;color:var(--forest)}
.rev-proof:hover .rev-proof-cap{color:var(--forest-deep);text-decoration:underline;text-underline-offset:3px}

.rev figcaption{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px var(--s2);
  padding-top:var(--s4);border-top:var(--hairline) solid var(--mist);
  font-size:11px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:var(--muted);
}
/* "via" travels with the badge, so a wrapped line never ends on it */
.fv-via{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
/* Fiverr badge: the platform's lowercase name and green dot, in our own type */
.fv{
  display:inline-flex;align-items:baseline;gap:1px;
  padding:4px 6px;
  background:var(--surface);
  border:var(--hairline) solid var(--mist);border-radius:var(--r-badge);
  font-size:12px;font-weight:700;line-height:1;letter-spacing:-.2px;text-transform:none;color:var(--ink);
}
.fv-dot{width:4px;height:4px;border-radius:50%;background:var(--fiverr)}

.rev-more{display:none;justify-content:center;margin-top:var(--s2)}

@media (hover:hover){
  .rev:hover{border-color:var(--forest)}
}

/* ==========================================================================
   Process
   ========================================================================== */

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}
.steps li{display:flex;flex-direction:column;gap:var(--s3);padding-top:20px;border-top:var(--hairline) solid var(--mist)}
.step-n{font-family:var(--serif);font-size:40px;line-height:1;color:var(--gold)}
.steps h3{font-size:clamp(21px,1.67vw,24px);line-height:1.15}
.steps p{margin:0;font-size:15px;line-height:1.5;color:var(--slate)}

/* The hairline that connects the steps. script.js builds it from the steps'
   positions and sets how much of it is drawn. */
#process .wrap{position:relative}
.steps-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.steps-line path{fill:none;stroke:var(--forest);stroke-width:1;stroke-dasharray:1 2}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq-wrap .faq{max-width:820px;border-bottom:var(--hairline) solid var(--mist)}
.faq details{border-top:var(--hairline) solid var(--mist);scroll-margin-top:var(--anchor)}
.faq summary{
  list-style:none;cursor:pointer;
  padding:22px 34px 22px 0;position:relative;
  font-family:var(--serif);font-size:24px;line-height:1.25;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;
  width:10px;height:10px;margin-top:-7px;
  border-right:var(--rule) solid var(--forest);
  border-bottom:var(--rule) solid var(--forest);
  transform:rotate(45deg);transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
/* while an answer folds away, the chevron already points to closed */
.faq-anim details[open]:not(.is-open) summary::after{transform:rotate(45deg);margin-top:-7px}
.faq summary:hover{color:var(--forest)}
/* The answer sits in a one-row grid so it can unfold from 0fr to 1fr. The 6px
   of padding, cancelled by the margin, keeps link focus rings clear of the
   clipping edge. */
.faq-a{display:grid;grid-template-rows:1fr}
.faq-a-in{min-height:0;overflow:hidden;margin:-6px -6px 0;padding:6px 6px 0}
.faq-a p{margin:0;padding:0 34px 22px 0;font-size:15.5px;line-height:1.6;color:var(--slate)}
.faq-a a{text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   Standalone pages (privacy)
   ========================================================================== */

.page-head .wrap{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.page-head h1{font-size:clamp(40px,4.2vw,60px)}
.page-date{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted)}
.page-head .lead{max-width:720px}

.prose{max-width:720px}
.prose h2{
  font-size:30px;line-height:1.15;
  margin:0;padding-top:22px;
  border-top:var(--hairline) solid var(--mist);
}
.prose h2:first-child{padding-top:0;border-top:0}
.prose p{margin:14px 0 0;font-size:16.5px;line-height:1.65;color:var(--slate)}
.prose h2 + p{margin-top:12px}
.prose > * + h2{margin-top:var(--s6)}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--forest);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--forest-deep)}
.prose ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column}
.prose li{
  position:relative;padding:14px 0 14px 26px;
  border-top:var(--hairline) solid var(--mist);
  font-size:16.5px;line-height:1.6;color:var(--slate);
}
.prose li:last-child{border-bottom:var(--hairline) solid var(--mist)}
.prose li::before{content:"";position:absolute;left:0;top:25px;width:12px;height:1px;background:var(--forest)}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-grid{display:flex;flex-direction:row;gap:var(--s7);align-items:flex-start}
.contact-copy{display:flex;flex-direction:column;gap:22px;width:340px;flex:0 0 auto}
.contact-copy h2{font-size:clamp(34px,3.06vw,44px);line-height:1.05}
.contact-copy .sub{margin:0;font-size:16px;line-height:1.6;color:var(--slate)}
.channels{display:flex;flex-direction:column;gap:10px;padding-top:6px;border-top:var(--hairline) solid var(--mist)}
.channels a{font-size:16px;color:var(--forest)}
.channels a:first-child{padding-top:var(--s3)}

.cform{display:flex;flex-direction:column;gap:18px;flex:1 1 auto;min-width:0}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.field{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.field label{font-size:11px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:var(--ink)}
.field .opt{font-weight:400;letter-spacing:2.4px;color:var(--muted)}

.field input,.field select,.field textarea{
  width:100%;
  font:400 16px/1.4 var(--sans);color:var(--ink);
  background:var(--surface);
  border:var(--hairline) solid var(--mist);border-radius:var(--r-sm);
  padding:14px 16px;min-height:50px;
  appearance:none;-webkit-appearance:none;
  transition:border-color .18s;
  /* clear the sticky header when a control is scrolled to or focused */
  scroll-margin-top:var(--anchor);
}
.field textarea{min-height:130px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--slate)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:var(--focus) solid var(--gold);outline-offset:0;
  border-color:var(--gold);
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5A52' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
  padding-right:42px;cursor:pointer;
}

.file{position:relative;scroll-margin-top:var(--anchor)}
.file input{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;min-height:50px;
}
.file-ui{
  display:flex;align-items:center;gap:var(--s3);
  min-height:50px;padding:0 16px;
  background:var(--surface);
  border:var(--hairline) solid var(--mist);border-radius:var(--r-sm);
}
.file input:focus-visible + .file-ui{outline:var(--focus) solid var(--gold);border-color:var(--gold)}
.file-btn{
  font-size:11px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--forest);flex:none;
}
.file-name{font-size:14px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-name.has{color:var(--ink)}

.cform-foot{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.cform-note{margin:0;font-size:13.5px;color:var(--muted)}

.status{display:none;font-size:15px;line-height:1.5;color:var(--forest);padding:14px 16px;border:var(--hairline) solid var(--mist);border-radius:var(--r-sm);background:var(--surface)}
.status.show{display:block}
.status.error{color:var(--danger);border-color:var(--danger)}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer{padding:56px 0;background:var(--forest-deep)}
.foot-in{display:flex;flex-direction:row;justify-content:space-between;gap:28px;align-items:center}
.foot-brand{display:flex;flex-direction:column;gap:14px}
.brand-logo-footer{height:28px}
.foot-brand p{margin:0;font-size:13.5px;color:var(--on-forest-muted)}
.foot-nav{display:flex;flex-wrap:wrap;gap:28px}
.foot-nav a{font-size:14px;color:var(--on-forest-muted)}
.foot-nav a:hover{color:var(--on-forest)}
.footer :focus-visible{outline-color:var(--gold-bright)}

/* ==========================================================================
   Sticky mobile bar
   ========================================================================== */

.mbar{
  display:none;position:sticky;bottom:0;z-index:50;
  gap:10px;padding:12px 16px;
  background:var(--paper);border-top:var(--hairline) solid var(--mist);
}
.mbar .btn{flex:1 1 0;padding:0 var(--s4)}
/* the bar must never sit above an open lightbox */
body.lb-open .mbar{display:none}

/* ==========================================================================
   Lightbox
   ========================================================================== */

.lb{
  position:fixed;inset:0;z-index:100;
  background:rgba(19,51,40,.96);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s;
}
.lb.open{opacity:1}
/* .lb is display:none while [hidden], so the fade-in needs a starting point */
@starting-style{.lb.open{opacity:0}}
.lb-bar{
  position:absolute;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s4) var(--s5);
  font-size:11px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--on-forest-muted);
}
.lb-x{
  width:44px;height:44px;padding:0;line-height:1;
  border:var(--rule) solid var(--on-forest-muted);border-radius:var(--r-sm);
  background:transparent;color:var(--on-forest);font-size:26px;cursor:pointer;
}
.lb-x:hover{border-color:var(--on-forest)}
.lb-stage{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;padding:72px var(--s8);
}
.lb-stage img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  background:var(--surface);border-radius:var(--r-sm);
}
.lb-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;padding:0;line-height:1;
  border:var(--rule) solid var(--on-forest-muted);border-radius:var(--r-sm);
  background:transparent;color:var(--on-forest);font-size:30px;cursor:pointer;
}
.lb-arrow:hover{border-color:var(--on-forest)}
.lb-prev{left:var(--s5)}
.lb-next{right:var(--s5)}
.lb-tabs{position:absolute;bottom:var(--s5);left:0;right:0;display:flex;justify-content:center;gap:10px}
.lb-tabs button{
  min-height:40px;padding:0 var(--s4);
  border:var(--rule) solid var(--on-forest-muted);border-radius:var(--r-sm);
  background:transparent;color:var(--on-forest);cursor:pointer;
  font:600 12px/1 var(--sans);letter-spacing:2px;text-transform:uppercase;
}
.lb-tabs button.on{background:var(--gold-bright);border-color:var(--gold-bright);color:var(--on-gold)}
.lb :focus-visible{outline-color:var(--gold-bright)}

/* ==========================================================================
   Motion. Every animated state is declared inside no-preference, so a visitor
   who asks for reduced motion sees each element in its final state from the
   first frame: nothing fades, rises, draws or unfolds. Durations stay at or
   under 600ms; only the hero sequence runs longer, landing at 1.08s.
   ========================================================================== */

@keyframes mark-draw{from{stroke-dashoffset:1.05}to{stroke-dashoffset:0}}
@keyframes hv-fade{from{opacity:0}}
@keyframes hv-draw{from{transform:scaleX(0)}}
@keyframes rv-rise{from{opacity:0;transform:translateY(12px)}}

@media (prefers-reduced-motion:no-preference){
  /* Logo: the arrow draws itself once on load, shaft then head, 600ms in all.
     The dash gap is longer than the path, so the hidden start draws nothing. */
  .mark-arrow path{stroke-dasharray:1 1.1}
  .mark-shaft{animation:mark-draw .36s cubic-bezier(.65,0,.35,1) both}
  .mark-head{animation:mark-draw .24s cubic-bezier(.22,.61,.36,1) .36s both}

  /* Hero card: the Before bars fade in together; 400ms later the After bars
     draw from the left, 80ms apart, gold last. scaleX keeps it off layout. */
  .hv-armed .doc-before .bar{opacity:0}
  .hv-armed .doc-after .bar{transform:scaleX(0)}
  .hv-armed.in .doc-before .bar{opacity:1;animation:hv-fade .35s ease-out backwards}
  .hv-armed.in .doc-after .bar{
    transform:none;
    animation:hv-draw .44s cubic-bezier(.22,.61,.36,1) backwards;
    animation-delay:calc(400ms + var(--i,0) * 80ms);
  }

  /* Reveal: a 12px rise and fade. script.js staggers cards 60ms apart (--d). */
  .rv{opacity:0}
  .rv.in{opacity:1;animation:rv-rise .5s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:var(--d,0ms)}

  /* FAQ: answers unfold instead of jumping */
  .faq-anim .faq-a{grid-template-rows:0fr;transition:grid-template-rows .25s ease}
  .faq-anim details.is-open .faq-a{grid-template-rows:1fr}
}

@media (prefers-reduced-motion:no-preference) and (hover:hover){
  /* Cards answer hover by rising 2px. The featured package stays put. */
  .rev,.pkg{transition:border-color .2s ease,transform .2s ease}
  .rev:hover,.pkg:not(.pkg-feat):hover{transform:translateY(-2px)}
}

/* Whatever else moves (button fades, the drawer, the lightbox fade) is
   switched off outright, not shortened. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1100px){
  .hero-grid{flex-direction:column;gap:var(--s7)}
  .hero-visual{width:100%}
  .lead{max-width:none}
  .svc-grid,.pkg-grid,.coach-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sample-grid,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rev-wall{columns:2}
  .contact-grid{flex-direction:column}
  .contact-copy{width:100%}
  .cform{width:100%}
}

@media (max-width:900px){
  :root{--header-h:68px}
  .brand-logo{height:26px}
  .nav{display:none}
  .header-actions .btn{display:none}
  .burger{display:flex}
  .mbar{display:flex}
  .strip-grid{grid-template-columns:repeat(1,minmax(0,1fr));gap:var(--s5)}
  .split{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .split-rev .ba{order:2}
  .lb-stage{padding:72px var(--s5)}
  .lb-arrow{width:44px;height:44px;font-size:24px}
  .lb-prev{left:var(--s3)}
  .lb-next{right:var(--s3)}
}

@media (max-width:640px){
  .svc-grid,.pkg-grid,.coach-grid,
  .sample-grid,.steps,.row{grid-template-columns:repeat(1,minmax(0,1fr))}
  /* phones: one column, six cards, then a button for the rest */
  .rev-wall{columns:1}
  .rev{margin-bottom:var(--s4)}
  .rev-wall.is-clamped > .rev:nth-child(n+7){display:none}
  .rev-more{display:flex}
  .rev-more .btn{width:100%}
  /* stacked steps hang off a rail at the left edge */
  .steps.has-line li{padding-left:24px}
  .pkg{padding:32px 24px}
  .cta-row{flex-direction:column;align-items:stretch}
  .cta-row .btn{width:100%}
  .trust li{flex-basis:calc(100% - 22px)}
  .split-copy .btn,.coach-cta .btn,.cform-foot .btn{width:100%}
  .pkg-note{flex-direction:column;gap:var(--s3)}
  .pkg-note .rule{display:none}
  .foot-in{flex-direction:column;align-items:flex-start}
  .foot-nav{gap:18px}
  .steps h3{font-size:21px}
  .faq summary{font-size:24px}
  .lb-stage{padding:64px var(--s4) 88px}
}