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

/* ==========================================================================
   Fallback faces. Local fonts resized to the web fonts' average glyph width
   and given their ascent, descent and line gap, so text set in them takes the
   same space and nothing moves when the web fonts swap in.
   size-adjust is the web font's width over the fallback's, averaged over this
   page's own text; each override is the web font's metric divided by it.
   Instrument Serif: ascent 990, descent 310, gap 0 per 1000. Work Sans: 930,
   243, 0. Italic and bold get their own faces, so the browser never has to
   slant or embolden a regular font, which would change its widths.
   Each name has two sets of faces. Where faces share a name and style, the
   browser tries the last one first and skips any whose local font is missing,
   so Georgia and Arial (Windows, macOS, iOS) come last and Android, which has
   neither, falls through to Noto Serif and Roboto. The src lists carry full
   and PostScript names; the final plain "Roboto" and "Noto Serif" entries
   cover Android versions that ship one variable file instead of separate
   bold and italic files.
   ========================================================================== */

/* Android */
@font-face{
  font-family:"Instrument Serif Fallback";
  src:local("Noto Serif"),local("Noto Serif Regular"),local("NotoSerif-Regular"),local("NotoSerif");
  size-adjust:70.43%;ascent-override:140.56%;descent-override:44.01%;line-gap-override:0%;
}
@font-face{
  font-family:"Instrument Serif Fallback";font-style:italic;
  src:local("Noto Serif Italic"),local("NotoSerif-Italic"),local("Noto Serif");
  size-adjust:76.7%;ascent-override:129.07%;descent-override:40.42%;line-gap-override:0%;
}
@font-face{
  font-family:"Work Sans Fallback";font-weight:400 500;
  src:local("Roboto"),local("Roboto Regular"),local("Roboto-Regular");
  size-adjust:112.11%;ascent-override:82.96%;descent-override:21.68%;line-gap-override:0%;
}
@font-face{
  font-family:"Work Sans Fallback";font-weight:600 700;
  src:local("Roboto Bold"),local("Roboto-Bold"),local("Roboto");
  size-adjust:109.01%;ascent-override:85.31%;descent-override:22.29%;line-gap-override:0%;
}

/* Windows, macOS, iOS */
@font-face{
  font-family:"Instrument Serif Fallback";
  src:local("Georgia");
  size-adjust:75.87%;ascent-override:130.49%;descent-override:40.86%;line-gap-override:0%;
}
@font-face{
  font-family:"Instrument Serif Fallback";font-style:italic;
  src:local("Georgia Italic");
  size-adjust:79.2%;ascent-override:125%;descent-override:39.14%;line-gap-override:0%;
}
@font-face{
  font-family:"Work Sans Fallback";font-weight:400 500;
  src:local("Arial");
  size-adjust:111.78%;ascent-override:83.2%;descent-override:21.74%;line-gap-override:0%;
}
@font-face{
  font-family:"Work Sans Fallback";font-weight:600 700;
  src:local("Arial Bold");
  size-adjust:101.76%;ascent-override:91.39%;descent-override:23.88%;line-gap-override:0%;
}

: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","Instrument Serif Fallback",Georgia,"Times New Roman",serif;
  --sans:"Work Sans","Work Sans Fallback",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);

  /* Motion: one curve for things arriving, one for things changing state.
     Every transition and animation uses one of them (script.js reads them
     too); only the hero's GSAP timeline has its own. */
  --ease-out:cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
}

*,*::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;transition:color .18s var(--ease-in-out)}
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;
  /* the 1px hover rise and the 80ms settle on press are in the motion block */
  transition:background-color .18s var(--ease-in-out),border-color .18s var(--ease-in-out),
    color .18s var(--ease-in-out),transform .18s var(--ease-in-out);
}
.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)}
/* nav links, here and in the footer: a 1px underline that grows from the left
   on hover (it grows over 220ms in the motion block) */
.nav a,.foot-nav a{position:relative}
.nav a::after,.foot-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;
}
.nav a:hover::after,.foot-nav a:hover::after{transform:none}

.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 var(--ease-in-out),opacity .2s var(--ease-in-out)}
.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.
     Closing is a change of state; opening, below, is an arrival. */
  transition:opacity .2s var(--ease-in-out),transform .2s var(--ease-in-out),visibility 0s var(--ease-in-out) .2s;
}
.drawer.open{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),visibility 0s var(--ease-out);
}
.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
   ========================================================================== */

/* overflow-x:clip because the rotated card's overflow box, badge included, reaches
   past the right edge on phones even where nothing is painted; y stays visible
   so the card can hang into the band */
.hero{--hero-pad:clamp(40px,6.1vw,88px);padding:var(--hero-pad) 0;background:var(--paper);overflow-x:clip}
.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}

/* An abstract page on a tilted card. Its bottom edge runs 80px past the
   hero's, into the trust band, which is painted above it and cuts it off. */
.hero-visual{
  flex:0 0 auto;width:514px;align-self:flex-end;
  margin-bottom:calc(-1 * var(--hero-pad) - 80px);
}
.hero-card{
  position:relative;padding:var(--s4);
  background:var(--paper-warm);
  border:var(--hairline) solid var(--mist);border-radius:var(--r-md);
  rotate:-2deg;
}
/* The document: inline SVG in tokens only, 480 by 600 on desktop. Its markup
   is the finished page; the motion rules below paint it cluttered from the
   first frame, and script.js has GSAP play it from there to clean. width and
   aspect-ratio hold its box before anything is drawn. */
.hero-doc{display:block;width:100%;height:auto;aspect-ratio:4/5}
.hd-page{fill:var(--paper);stroke:var(--mist)}
.hd-block,.hd-x{fill:var(--mist)}
/* moved by CSS transform only: lines, left-overs and the block from their left edge */
.hd-ln,.hd-x,.hd-block{transform-box:fill-box;transform-origin:0 50%}
.hd-dot{transform-box:fill-box;transform-origin:50% 50%}
.hd-ink{fill:var(--ink)}
.hd-slate{fill:var(--slate)}
.hd-gold,.hd-dot{fill:var(--gold)}
.hd-arrow{fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.hd-chip rect{fill:var(--paper);stroke:var(--mist)}
.hd-chip text{font:700 10px/1 var(--sans);letter-spacing:1.6px;text-transform:uppercase;text-anchor:middle}
.hd-old{fill:var(--slate)}
.hd-new{fill:var(--ink)}
.hd-caret{fill:var(--ink);opacity:0}
.hero-badge{position:absolute;top:-16px;right:-16px;width:44px;height:44px}

/* ==========================================================================
   Trust band
   ========================================================================== */

/* positioned so it paints over the hero card's overhang */
.band{position:relative;z-index:1;padding:56px 0;background:var(--forest)}
.band-grid{display:flex;align-items:center;gap:var(--s7)}
.band-head{display:flex;flex-direction:column;gap:10px;flex:0 0 320px}
.band-head h2{font-size:30px;line-height:1.1;color:var(--on-forest)}
.band-head em{color:var(--gold-bright)}
.band-head p{margin:0;font-size:15.5px;line-height:1.55;color:var(--on-forest-muted)}
.stats{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  flex:1 1 auto;min-width:0;
}
.stats li{display:flex}
.stat{
  flex:1 1 auto;display:flex;flex-direction:column;gap:var(--s2);
  padding:var(--s5);border-left:var(--hairline) solid var(--on-forest-muted);
  color:var(--on-forest-muted);
}
/* a stretched flex item, so the digits script.js counts up through never move
   the label or the cards beside it */
.stat-n{font-family:var(--serif);font-size:56px;line-height:1;color:var(--gold-bright);font-variant-numeric:tabular-nums}
.stat-l{font-size:14px;line-height:1.4}
.stat:hover{color:var(--on-forest)}
.stat:hover .stat-l{text-decoration:underline;text-underline-offset:3px}
.band :focus-visible{outline-color:var(--gold-bright)}

/* ==========================================================================
   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(--slate)}
.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;text-align:left;
  margin:0;padding:0;border:0;background:transparent;
  font-family:inherit;cursor:zoom-in;
}
/* the top third of the page, cut from the full-size scan at 3:4 (see the
   exhibit-*-top images); the lightbox still opens the whole page */
.sample-thumb{
  position:relative;display:block;aspect-ratio:3/4;overflow:hidden;
  border:var(--hairline) solid var(--mist);border-radius:var(--r-md);
}
.sample-thumb picture{display:block;width:100%;height:100%}
.sample-thumb img{width:100%;height:100%;object-fit:cover;object-position:top left}
.sample-open{
  position:absolute;right:var(--s3);bottom:var(--s3);
  padding:7px 10px;
  background:var(--surface);
  border:var(--hairline) solid var(--mist);border-radius:var(--r-sm);
  font-size:14px;font-weight:600;line-height:1;color:var(--forest);
  opacity:0;
}
.sample:focus-visible .sample-open{opacity:1}
@media (hover:hover){
  .sample:hover .sample-open{opacity:1}
}
.sample-role{margin-top:var(--s4);font-family:var(--serif);font-size:22px;line-height:1.15;color:var(--ink)}
.sample-kind{margin-top:var(--s2);font-size:11px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:var(--forest)}
/* phones only, where the samples become a sideways row */
.sample-hint{display:none}

/* ==========================================================================
   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(--slate)}

/* ==========================================================================
   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);
}

/* The original screenshot, uncropped at the card's full width, and its label
   are one control that opens it in the viewer. width and height on the img
   hold its natural ratio before it loads. */
.rev-proof{
  display:flex;flex-direction:column;gap:var(--s2);width:100%;
  margin:0;padding:0;border:0;background:none;
  font:inherit;text-align:left;cursor:zoom-in;
}
.rev-shot{display:block;width:100%;height:auto;border:var(--hairline) solid var(--mist);border-radius:var(--r-md)}
.rev-proof-cap{align-self:flex-end;font-size:14px;font-weight:600;color:var(--forest);transition:color .18s var(--ease-in-out)}
.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);
  transition:color .18s var(--ease-in-out);
}
.faq summary::-webkit-details-marker{display:none}
/* The chevron is the bottom-right corner of a 10px square, turned 45deg. It
   turns about the centre of what is drawn (7.13px in from the square's top
   left), so the 180deg flip happens in place; right and margin-top keep the
   closed chevron exactly where it sat. */
.faq summary::after{
  content:"";position:absolute;right:8.13px;top:50%;
  width:10px;height:10px;margin-top:-6.12px;
  border-right:var(--rule) solid var(--forest);
  border-bottom:var(--rule) solid var(--forest);
  transform-origin:7.13px 7.13px;transform:rotate(45deg);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
/* while an answer folds away, the chevron already points to closed */
.faq-anim details[open]:not(.is-open) summary::after{transform:rotate(45deg)}
.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(--slate)}
.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(--slate)}

.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 var(--ease-in-out);
  /* 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(--slate)}

.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
   ========================================================================== */

/* script.js fades the viewer in and out and cross-fades its pictures (Web
   Animations, none under reduced motion) */
.lb{
  position:fixed;inset:0;z-index:100;
  background:rgba(19,51,40,.96);
  display:flex;align-items:center;justify-content:center;
}
.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);
}
/* the outgoing picture during a cross-fade: a copy pinned where it was drawn */
.lb-ghost{position:absolute;margin:0;background:var(--surface);border-radius:var(--r-sm);pointer-events:none}
.lb-x,.lb-arrow,.lb-tabs button{transition:border-color .18s var(--ease-in-out),background-color .18s var(--ease-in-out),color .18s var(--ease-in-out)}
.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. Two curves: --ease-out for things arriving, --ease-in-out for things
   changing state. Nothing runs longer than 700ms, with three set exceptions:
   the hero's GSAP timeline (2.1s, its own curves), the caret's 1.1s blink and
   the trust band's 900ms count (script.js). 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, counts or unfolds. Arrivals move only transform and opacity, so
   nothing shifts the layout.
   ========================================================================== */

@keyframes mark-draw{from{stroke-dashoffset:1.05}to{stroke-dashoffset:0}}
@keyframes hd-caret{0%{opacity:1}50%{opacity:0}}
@keyframes hd-fade{from{opacity:0}}
@keyframes rv-rise{from{opacity:0;transform:translateY(24px)}}
@keyframes rv-rise-in{from{opacity:0;transform:translateY(24px) scale(.98)}}

@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 var(--ease-in-out) both}
  .mark-head{animation:mark-draw .24s var(--ease-out) .36s both}

  /* Hero document. With JavaScript on, the first paint is already State A,
     the cluttered page, before any script has run: each line's style
     attribute holds its cluttered place as --a, and these rules apply it, in
     mist, until the timeline has finished (.is-idle). GSAP animates from what
     is showing. On the lite path (.lite: a slow device, Save-Data, or GSAP
     missing) the finished page fades in over 400ms instead, with no caret. */
  .js:not(.lite) .hero-doc:not(.is-idle) .hd-ln{transform:var(--a)}
  .js:not(.lite) .hero-doc:not(.is-idle) .hd-ln:not(.is-in){fill:var(--mist)}
  .js:not(.lite) .hero-doc:not(.is-idle) .hd-x,
  .js:not(.lite) .hero-doc:not(.is-idle) .hd-block{opacity:1}
  .js:not(.lite) .hero-doc:not(.is-idle) .hd-dot{transform:scale(0)}
  .js:not(.lite) .hero-doc:not(.is-idle) .hd-arrow path{stroke-dasharray:1 1.1;stroke-dashoffset:1.05}
  .js:not(.lite) .hero-doc:not(.is-idle) .hd-old{transform:none}
  .js:not(.lite) .hero-doc:not(.is-idle) .hd-new{transform:translateY(20px)}
  .lite .hd-content{animation:hd-fade .4s var(--ease-out)}
  /* a line takes its colour as it lands: script.js adds .is-in, and the fill
     turns over 120ms (only on the way in; a replay resets it at once) */
  .hd-ln.is-in{transition:fill .12s var(--ease-in-out)}
  /* while the timeline runs, each moving shape gets its own compositor layer,
     so a frame moves layers instead of repainting them */
  .hero-doc.is-moving .hd-ln,.hero-doc.is-moving .hd-x,.hero-doc.is-moving .hd-block,.hero-doc.is-moving .hd-dot{will-change:transform}
  /* once the timeline ends, a caret blinks at the last bullet every 1.1s; a
     blink is on or off, so it keeps its step timing */
  .hero-doc.is-idle .hd-caret{animation:hd-caret 1.1s step-end infinite}

  /* Reveal: a 24px rise and fade over 700ms, siblings 70ms apart (script.js
     sets --d). Samples and reviews also grow from 98%. */
  .rv{opacity:0}
  .rv.in{opacity:1;animation:rv-rise .7s var(--ease-out) backwards;animation-delay:var(--d,0ms)}
  .sample.rv.in,.rev.rv.in{animation-name:rv-rise-in}

  /* FAQ: the answer unfolds from 0fr to 1fr while the chevron turns 180deg,
     both over 280ms */
  .faq-anim .faq-a{grid-template-rows:0fr;transition:grid-template-rows .28s var(--ease-in-out)}
  .faq-anim details.is-open .faq-a{grid-template-rows:1fr}
  .faq summary::after{transition:transform .28s var(--ease-in-out)}

  /* nav links: the underline grows from the left over 220ms */
  .nav a::after,.foot-nav a::after{transition:transform .22s var(--ease-in-out)}
}

@media (prefers-reduced-motion:no-preference) and (hover:hover){
  /* Buttons rise 1px while their colour shifts (180ms), and settle back in
     80ms when pressed. */
  .btn:hover{transform:translateY(-1px)}
  .btn:active{transform:none;transition-duration:.08s}
  /* Cards answer hover over 220ms: a pricing card rises 4px as its border
     turns (the featured card stays put), a review 2px, a sample 4px while it
     shows where it opens. */
  .pkg,.rev{transition:border-color .22s var(--ease-in-out),transform .22s var(--ease-in-out)}
  .pkg:not(.pkg-feat):hover{transform:translateY(-4px)}
  .rev:hover{transform:translateY(-2px)}
  .sample{transition:transform .22s var(--ease-in-out)}
  .sample:hover{transform:translateY(-4px)}
  .sample-open{transition:opacity .22s var(--ease-in-out)}
}

/* Whatever else moves (colour fades, the drawer) is switched off outright, not
   shortened. The lightbox, the count and the process line are script, and
   script.js checks for reduced motion itself. */
@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)}
  /* below the text now, so it sits inside the hero with no overhang, and the
     hero can clip on both axes (also for browsers without overflow:clip) */
  .hero{overflow:hidden}
  .hero-visual{width:100%;max-width:514px;align-self:flex-start;margin-bottom:0}
  .band-grid{flex-direction:column;align-items:stretch;gap:var(--s5)}
  .band-head{flex:none}
  .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}
  .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,
  .steps,.row{grid-template-columns:repeat(1,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s4)}
  /* Samples become a sideways row. Cards are 78% of the screen, so the next
     one is cut by the edge; the 6px of padding keeps focus rings unclipped. */
  .sample-grid{
    display:flex;gap:var(--s4);
    margin:-6px calc(-1 * var(--gutter)) 0;padding:6px var(--gutter);
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
    scrollbar-width:none;
  }
  .sample-grid::-webkit-scrollbar{display:none}
  .sample{flex:0 0 78vw;scroll-snap-align:start}
  .sample-hint{display:block;margin:var(--s2) 0 0;text-align:right;font-size:13.5px;line-height:1.45;color:var(--slate)}
  /* 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%}
  .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}
}