body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem,.94rem + .28vw,1.0625rem);
  line-height:1.78;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
section{position:relative}
[id]{scroll-margin-top:6.5rem}

/* type primitives -------------------------------------------- */
.eyebrow{
  font-family:var(--cond);font-weight:400;
  font-size:clamp(.8125rem,.765rem + .2vw,.875rem);
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);line-height:1;
}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:hover,.btn:focus-visible{color:var(--ink-deep);border-color:var(--apricot)}
.btn--light{--bg:var(--cream);--fg:var(--ink)}
.btn--light::before{background:var(--white)}
.btn--lg{padding:1.32em 2.35em;letter-spacing:.14em;font-size:clamp(.9375rem,.89rem + .3vw,1.0625rem)}

/* underline link ---------------------------------------------- */
.ulink{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--cond);font-weight:500;font-size:.9375rem;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  padding-bottom:.42em;position:relative;color:var(--ink);
}
.ulink::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform-origin:right;transform:scaleX(1);
  transition:transform .42s var(--ease);
}
.ulink:hover::after{transform:scaleX(0);transform-origin:left}
.ulink .arw{transition:transform .42s var(--ease)}
.ulink:hover .arw{transform:translateX(5px)}

/* ============================ NAV ============================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .5s var(--ease),box-shadow .5s var(--ease),padding .5s var(--ease);
  padding:1.6rem 0;
}
.nav__sublink[aria-current="page"]{color:var(--terracotta)}


/* ============================================================
   HERO
   The original opens with a headline over a blurred photograph. Here the
   photograph goes and the headline carries the screen alone, on cream lit
   from the corners — so the page opens quiet and the dark manifesto panel
   under it lands as a change of voice.
   ============================================================ */
.hero{
  background:var(--cream);
  /* not quite the full fold: at 100svh the centred block left a dead band under
     the scroll cue on tall screens. Trimming the box and the bottom padding
     together halves it — the leftover slack is what centring splits in two. */
  min-height:88vh;min-height:88svh;
  display:flex;align-items:center;
  padding:clamp(8.5rem,16vh,12rem) 0 clamp(1.5rem,3.5vh,2.5rem);
  overflow:hidden;isolation:isolate;
}
/* warm light pooling in from the corners, so the flat cream has depth */
.hero::before{
  content:"";position:absolute;inset:auto auto -30% -14%;width:54vw;aspect-ratio:1;
  border-radius:50%;pointer-events:none;z-index:-3;
  background:radial-gradient(circle,rgba(237,165,125,.5),transparent 68%);
}
.hero::after{
  content:"";position:absolute;inset:-26% -14% auto auto;width:46vw;aspect-ratio:1;
  border-radius:50%;pointer-events:none;z-index:-3;
  background:radial-gradient(circle,rgba(196,99,60,.2),transparent 70%);
}

.hero__in{position:relative;width:100%;text-align:center}
.hero__kicker{
  font-family:var(--script);font-weight:600;line-height:.9;color:var(--terracotta);
  font-size:clamp(2.1rem,1.4rem + 3.1vw,4.1rem);
  display:inline-block;transform:rotate(-2.5deg);
}
/* sized so the four written lines stay four rendered lines and the scroll cue
   still clears the fold on a 900px-tall window */
.hero__t{
  margin:clamp(1.4rem,2.8vw,2.2rem) auto 0;max-width:21ch;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.3rem,1.05rem + 5.2vw,5.5rem);
  line-height:.98;letter-spacing:-.042em;text-transform:uppercase;
}
/* each line is masked and slides up from under its own edge, one clearly after
   the other — the stagger is longer than half the animation, so a line has
   almost landed before the next one starts */
.hero__t .l{display:block;overflow:hidden;padding-bottom:.04em}
.hero__t .l > span{display:block;transform:translateY(104%);opacity:0}
.hero.is-lit .hero__t .l > span{
  animation:lineUp .34s var(--ease) forwards;
  animation-delay:calc(var(--i,0) * .2s + .06s);
}
@keyframes lineUp{to{transform:translateY(0);opacity:1}}
/* "(finally)" breaks the uppercase serif — it is the one word said out loud */
.hero__t .fin{
  font-family:var(--script);font-weight:600;font-style:normal;text-transform:none;
  color:var(--terracotta);font-size:1.06em;letter-spacing:0;
  display:inline-block;transform:rotate(-2deg);
}
.hero__rule{
  width:clamp(3.5rem,8vw,6.5rem);height:1px;background:var(--tan);
  margin:clamp(2rem,4vw,3rem) auto 0;transform-origin:center;
  transform:scaleX(0);transition:transform .44s var(--ease) 1s;
}
.hero.is-lit .hero__rule{transform:scaleX(1)}
.hero__cue{
  display:inline-flex;flex-direction:column;align-items:center;gap:.75rem;
  margin-top:clamp(1.3rem,2.4vw,1.9rem);text-decoration:none;
  /* double the old .8125rem; the clamp only pulls it back on narrow screens,
     where the wide tracking would otherwise run the label past the hero edge */
  /* 500 is the heaviest Barlow Condensed face we self-host — 600+ would be faux bold */
  font-family:var(--cond);font-weight:500;
  font-size:clamp(1.05rem,.55rem + 1.6vw,1.625rem);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);
  opacity:0;transition:opacity .4s var(--ease) 1.1s,color .4s var(--ease);
}
.hero.is-lit .hero__cue{opacity:1}
.hero__cue:hover{color:var(--terracotta)}
/* em-based, so the arrow keeps its old proportion to the label at the new size */
.hero__cue svg{width:1.385em;height:1.692em;animation:cueDrop 2.4s var(--ease) infinite}
@keyframes cueDrop{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(7px);opacity:1}}

/* ============================================================
   MANIFESTO — the four opening paragraphs, staged
   Dark panel so the hero's cream reads as daylight and this reads as the
   quiet talk that follows it. The paragraphs keep their original wording;
   only the pacing is new.
   ============================================================ */
.mani{
  --mani-bg:#413B3D;
  background:var(--mani-bg);color:rgba(245,242,241,.8);
  /* tighter at the foot than at the head: the panel hands off to the white
     section below, and the two stacked gaps read as one long pause */
  padding:clamp(3.75rem,7.5vw,6.375rem) 0 clamp(2.5rem,5vw,4.25rem);overflow:hidden;
}
.mani::before{
  content:"";position:absolute;inset:auto -12% -38% auto;width:48vw;aspect-ratio:1;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(196,99,60,.4),transparent 68%);
}
/* copy left, a stack of overlapping photographs right */
.mani__grid{
  position:relative;display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(2.5rem,6vw,5.5rem);align-items:center;
}
.mani__beat{
  padding:clamp(1.8rem,3.4vw,2.8rem) 0;
  border-top:1px solid rgba(245,242,241,.16);
}
.mani__beat:first-child{border-top:0;padding-top:0}
.mani__beat p{
  margin:0;color:var(--cream);
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.15rem,1rem + .78vw,1.72rem);
  line-height:1.42;letter-spacing:-.022em;
}
.mani__beat em{font-style:italic;color:var(--apricot)}
/* the loud one: display-sized kicker, then the line the whole page turns on */
.mani__beat--pull .kick{
  display:block;font-family:var(--cond);font-weight:400;color:var(--apricot);
  font-size:clamp(1.35rem,.9rem + 1.9vw,2.6rem);
  letter-spacing:.2em;text-transform:uppercase;line-height:1.2;
  margin-bottom:clamp(1rem,2vw,1.5rem);
}
.mani__beat--pull p{
  font-size:clamp(1.6rem,1.1rem + 2.1vw,3.1rem);
  line-height:1.1;letter-spacing:-.036em;
}
.mani__tough{
  display:block;margin-top:clamp(1rem,2vw,1.5rem);
  font-family:var(--script);font-weight:600;color:var(--apricot);
  font-size:clamp(1.6rem,1.1rem + 2vw,2.7rem);line-height:.95;
  transform:rotate(-2deg);
}
/* the struck-out word: a hand-drawn line that draws itself on reveal */
.strike{position:relative;display:inline-block;white-space:nowrap}
.strike svg{
  position:absolute;left:-2%;top:52%;width:104%;height:.42em;overflow:visible;
  pointer-events:none;
}
/* preserveAspectRatio="none" stretches the stroke with the box, so the width is
   set low and the rendered line lands at marker weight */
.strike path{
  fill:none;stroke:var(--terracotta);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:220;stroke-dashoffset:220;
}
.mani__beat--pull.is-in .strike path{transition:stroke-dashoffset 1s var(--ease) .45s;stroke-dashoffset:0}
/* the closing beat reads at the same size and upright weight as the other beats;
   its em stays italic like everywhere else, so no per-beat overrides here */
.mani__beat--close{border-top:1px solid rgba(245,242,241,.16)}

/* --- the photo stack ----------------------------------------
   Frames and plaques laid down the column one over the other, each turned a
   degree or two, so the run of paragraphs on the left has something falling
   alongside it the whole way down. Positions are percentages of the stack's
   own box, so the whole composition scales with the column. */
.mani__stack{position:relative;width:100%;aspect-ratio:1/1.85}
/* .mn-lead / .mn-rest are the phone's two groups (see the media query). Here
   they generate no box at all, so the five pieces inside them still resolve
   their percentages against .mani__stack and the composition is unchanged. */
.mn-lead,.mn-rest{display:contents}
.mani__stack figure,.mani__plaque{
  position:absolute;margin:0;border-radius:3px;overflow:hidden;
  box-shadow:0 44px 70px -40px rgba(12,10,10,.75);
}
.mani__stack img{width:100%;height:100%;object-fit:cover}
/* the tilt lives in --rot so the reveal below can restate it without hard-coding
   each angle a second time */
.mani__stack figure,.mani__plaque{transform:rotate(var(--rot,0deg))}
.mn-a{--rot:-2.2deg;left:0;top:0;width:58%;aspect-ratio:4/5;z-index:2}
.mn-b{--rot:2.4deg;right:0;top:15%;width:52%;aspect-ratio:3/4;z-index:3}
.mn-c{--rot:2deg;right:2%;top:55%;width:54%;aspect-ratio:4/5;z-index:5}
.mn-a img{object-position:50% 26%}
.mn-c img{object-position:50% 18%}
/* each frame and plaque reveals on its own as the column scrolls past, so the
   stack assembles piece by piece instead of landing complete. The extra
   selector weight is load-bearing: it has to outrank the global .rv rules,
   which would otherwise flatten the tilt to transform:none. */
.mani__stack .rv{opacity:0;transform:translateY(30px) rotate(var(--rot,0deg))}
.mani__stack .rv.is-in{opacity:1;transform:rotate(var(--rot,0deg))}
.mani__plaque{
  background:var(--terracotta);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;text-align:center;padding:1rem .7rem;
}
.mn-p1{--rot:-1.4deg;left:4%;top:36%;width:40%;aspect-ratio:1;z-index:4}
.mn-p2{--rot:-2deg;left:0;bottom:0;width:46%;aspect-ratio:1;z-index:6}
/* the lower plaque sits on the sand tone, so the two never read as one block */
.mn-p2{background:var(--tan)}
.mani__plaque .n{
  font-family:var(--serif);font-size:clamp(2.4rem,1.4rem + 3vw,3.9rem);
  line-height:.9;letter-spacing:-.03em;
}
.mani__plaque .n i{font-style:normal}
.mani__plaque .l{
  font-family:var(--cond);font-weight:500;font-size:clamp(.875rem,.8rem + .3vw,1.0625rem);
  /* tighter tracking plus a wider measure: at 14ch the uppercase label broke
     after almost every word inside the square */
  letter-spacing:.07em;text-transform:uppercase;line-height:1.4;max-width:20ch;
}

/* ============================================================
   WHAT IF YOU COULD… — the six aspirations, next to the portrait
   ============================================================ */
/* half the usual lead-in at the top — it picks up right after the dark panel's
   own trimmed foot, so the full pad would double up on that seam */
.wif{background:var(--white);padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(5rem,10vw,9rem);overflow:hidden}
.wif__grid{
  display:grid;grid-template-columns:1fr 1.04fr;
  gap:clamp(2.5rem,6vw,5.5rem);align-items:center;
}
.wif__art{position:relative}
.wif__fig{
  position:relative;z-index:1;margin:0 0 0 clamp(1.2rem,9%,4.5rem);
}
.wif__fig::before{
  content:"";position:absolute;z-index:0;inset:7% -9% -7% 9%;
  border:1px solid var(--apricot);border-radius:2px;
}
.wif__fig img{
  position:relative;z-index:1;width:100%;border-radius:2px;
  aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;
  box-shadow:0 44px 90px -60px rgba(20,18,17,.7);
}
.wif__t{
  font-family:var(--serif);font-size:clamp(2.2rem,1.35rem + 3.4vw,4.4rem);
  line-height:.98;letter-spacing:-.04em;text-transform:uppercase;
}
.wif__t em{font-style:italic;color:var(--terracotta);text-transform:none}
.checks{
  list-style:none;margin:clamp(1.8rem,3.4vw,2.6rem) 0 0;padding:0;
  display:grid;gap:clamp(1rem,2vw,1.5rem);
}
.checks li{
  display:flex;gap:clamp(.9rem,1.8vw,1.25rem);align-items:flex-start;
  font-size:clamp(.9375rem,.9rem + .25vw,1.0625rem);
  line-height:1.6;color:var(--ink-soft);
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
/* the list lands one line at a time. The <ul> is what gets observed (it is in
   the scroll-reveal selector at the bottom), the stagger rides on --i so the
   order survives adding or dropping a point — same trick as the hero lines. */
.checks.is-in li{
  opacity:1;transform:none;
  transition-delay:calc(var(--i,0) * .12s + .08s);
}
.checks .ico{
  flex:0 0 auto;color:var(--terracotta);margin-top:.12em;
  width:clamp(1.5rem,1.3rem + .8vw,2rem);
  height:clamp(1.5rem,1.3rem + .8vw,2rem);
}
.checks em{font-style:italic}

/* ============================================================
   PIPE DREAM — the terracotta interruption
   Three lines and a way down. Short on purpose: it is a breath between the
   list of what could be and the list of what is.
   ============================================================ */
.pipe{
  background:var(--terracotta);color:#fff;
  /* half the usual pad top and bottom: this is the short interruption between
     two long sections, and it should read as a beat rather than a stop */
  padding:clamp(2.25rem,4.5vw,3.75rem) 0;text-align:center;overflow:hidden;
}
.pipe::before{
  content:"";position:absolute;inset:-46% -12% auto auto;width:50vw;aspect-ratio:1;
  border-radius:50%;background:rgba(255,255,255,.1);pointer-events:none;
}
.pipe__in{position:relative}
.pipe__t{
  font-family:var(--serif);font-weight:400;color:#fff;
  font-size:clamp(2rem,1.2rem + 3.4vw,4.3rem);
  line-height:1.02;letter-spacing:-.036em;text-transform:uppercase;
  max-width:15ch;margin-inline:auto;
}
.pipe__t em{font-style:italic;text-transform:none}
.pipe__p{
  margin:clamp(1.6rem,3vw,2.4rem) auto 0;max-width:52ch;
  color:rgba(255,255,255,.94);font-size:clamp(1rem,.95rem + .3vw,1.15rem);line-height:1.75;
}
/* the middle line is the promise — it takes the serif and a rule of its own,
   rather than an underline that would break awkwardly across two lines */
.pipe__q{
  margin:clamp(1.4rem,2.6vw,2rem) auto 0;max-width:26ch;
  padding:clamp(1.2rem,2.2vw,1.7rem) 0;
  border-top:1px solid rgba(255,255,255,.42);border-bottom:1px solid rgba(255,255,255,.42);
  font-family:var(--serif);font-style:italic;color:#fff;
  font-size:clamp(1.2rem,1rem + .95vw,1.85rem);line-height:1.34;letter-spacing:-.022em;
}
.pipe__down{
  display:inline-flex;gap:clamp(1.6rem,4vw,3.2rem);align-items:center;
  margin-top:clamp(2rem,3.6vw,2.8rem);color:#fff;text-decoration:none;
  padding:.6rem 1.2rem;border-radius:999px;transition:background .4s var(--ease);
}
.pipe__down:hover{background:rgba(255,255,255,.14)}
.pipe__down svg{animation:arrowFall 2.1s var(--ease) infinite}
.pipe__down svg:nth-child(2){animation-delay:.22s;color:var(--blush)}
.pipe__down svg:nth-child(3){animation-delay:.44s}
@keyframes arrowFall{0%,100%{transform:translateY(0);opacity:.55}45%{transform:translateY(9px);opacity:1}}

/* ============================================================
   THIS IS FOR YOU IF… — six cards whose checkbox ticks itself
   ============================================================ */
/* 40% off both ends — the card grid carries its own internal air, so the panel
   does not need the full section pad on top of it */
.fyi{background:var(--sand);padding:clamp(3rem,6vw,5.4rem) 0;overflow:hidden}
.fyi__head{text-align:center;margin-bottom:clamp(2.6rem,5vw,4rem)}
/* no margin-top: the headline is the first thing in the section now, so the
   section pad alone sets the gap above it */
.fyi__t{
  font-family:var(--serif);font-size:clamp(2.1rem,1.3rem + 3.2vw,4.2rem);
  line-height:1;letter-spacing:-.04em;text-transform:uppercase;
}
.fyi__t em{font-style:italic;color:var(--terracotta);text-transform:none}
/* three pairs rather than two rows of three: it keeps each card's line count
   low enough that the tick stays centred against two or three lines instead of
   floating beside five. Held short of the wrap and centred — at the full 1320px
   two cards per row would run to an unreadable measure. */
.fyi__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.6rem);
  max-width:64rem;margin-inline:auto;
}
/* tick on the left, centred against the copy that sits beside it — the row
   keeps the card short instead of stacking mark over text */
.fyi__card{
  background:var(--paper);border:1px solid var(--hairline);border-radius:6px;
  padding:clamp(.9rem,1.5vw,1.2rem) clamp(1.3rem,2.2vw,1.75rem);
  display:flex;align-items:center;gap:clamp(1rem,2vw,1.5rem);
  font-size:.9875rem;line-height:1.68;color:var(--ink-soft);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),
             background .55s var(--ease),border-color .55s var(--ease);
}
/* the extra selector is load-bearing: these cards also carry .rv, and
   .rv.is-in{transform:none} sits later in the sheet — at equal specificity it
   would win and the lift would never happen */
.fyi__grid .fyi__card:hover{
  transform:translateY(-8px);background:var(--white);border-color:transparent;
  box-shadow:0 48px 78px -50px rgba(83,79,81,.6);
}
/* 600, not 700: Open Sans is variable here, and 700 next to the tan tick reads
   heavier than the rest of the page's copy hierarchy allows */
.fyi__card p{margin:0;font-weight:600;color:var(--ink)}
.tick{width:clamp(1.95rem,1.65rem + 1.05vw,2.55rem);height:clamp(1.95rem,1.65rem + 1.05vw,2.55rem);flex:0 0 auto;overflow:visible}
.tick circle{fill:none;stroke:var(--tan);stroke-width:1.3;stroke-dasharray:126;stroke-dashoffset:126}
.tick path{fill:none;stroke:var(--terracotta);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:32;stroke-dashoffset:32}
.fyi__card.is-in .tick circle{transition:stroke-dashoffset .8s var(--ease) .1s;stroke-dashoffset:0}
.fyi__card.is-in .tick path{transition:stroke-dashoffset .5s var(--ease) .6s;stroke-dashoffset:0}

/* ============================================================
   PACKAGES
   ============================================================ */
/* the headline sits close to the section boundary — a third of the usual
   lead-in above it, the normal rhythm kept below */
/* half the usual section foot: the discovery band already ends in a wide margin of
   its own blush, so the full value read as a hole between it and Love Notes */
.pkg{background:var(--white);padding:clamp(1.7rem,3.4vw,3.05rem) 0 clamp(2.5rem,5vw,4.5rem)}
.sec-head{margin-bottom:clamp(2.6rem,5vw,4.2rem);text-align:center}
.sec-head__t{
  font-family:var(--serif);font-size:clamp(2.4rem,1.3rem + 4.4vw,5.4rem);
  line-height:1;letter-spacing:-.04em;
}
.sec-head__t em{font-style:italic;color:var(--terracotta)}

.pkgs{display:grid;gap:clamp(1.6rem,3vw,2.6rem)}
.pk{
  position:relative;border:1.5px solid var(--apricot);border-radius:8px;
  background:var(--sand);padding:clamp(1.8rem,3.6vw,3.2rem);
  transition:box-shadow .55s var(--ease),transform .55s var(--ease);
}
/* same .rv override as on .fyi__card — see the note there */
.pkgs .pk:hover{transform:translateY(-6px);box-shadow:0 56px 92px -56px rgba(83,79,81,.55)}
/* both cards carry the apricot frame; the ribbon alone marks the recommended one */
.pk__ribbon{
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  background:var(--terracotta);color:#fff;
  font-family:var(--cond);font-weight:500;font-size:.875rem;
  letter-spacing:.16em;text-transform:uppercase;line-height:1;
  padding:.75em 1.5em;border-radius:999px;white-space:nowrap;
}
.pk__t{
  font-family:var(--serif);font-size:clamp(1.9rem,1.15rem + 3vw,3.7rem);
  line-height:1;letter-spacing:-.04em;text-transform:uppercase;text-align:center;
}
.pk__t .n{font-style:italic;color:var(--terracotta);text-transform:none}
.pk__sub{
  display:block;text-align:center;margin-top:clamp(.8rem,1.6vw,1.2rem);
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.05rem,.95rem + .5vw,1.4rem);color:var(--ink-soft);
}
.pk__grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(1.8rem,4vw,3.6rem);align-items:start;
  margin-top:clamp(2rem,3.8vw,3rem);
  padding-top:clamp(1.8rem,3.4vw,2.6rem);border-top:1px solid var(--hairline);
}
/* flipped layout: copy left, "Included" list right */
.pk--flip .pk__grid{grid-template-columns:.95fr 1.05fr}
.pk--flip .pk__inc{order:2}
.pk--flip .pk__copy{order:1}
/* the Power Hour is one session, so its "Included" list is shorter than the
   packages' — a single column of items keeps the two sides level instead of
   leaving a half-empty second column beside the copy. Body and foot share one
   measure so the button ends flush with the list above it; at the card's full
   width the short list left a wide gutter down the right. */
.pk--hour{--hour-w:56rem}
.pk--hour .pk__grid,.pk--hour .pk__foot{max-width:var(--hour-w);margin-inline:auto}
.pk--hour .pk__grid{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem)}
.pk--hour .inc{grid-template-columns:1fr}
.pk__kicker{display:block;text-align:center;color:var(--terracotta);margin-bottom:clamp(.9rem,1.8vw,1.3rem)}
.pk__lbl{
  display:block;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.05rem,.98rem + .34vw,1.3rem);color:var(--ink);margin-bottom:1.2rem;
}
.inc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.9rem clamp(1rem,2vw,1.8rem)}
.inc li{
  position:relative;padding-left:1.85rem;
  font-size:.9375rem;line-height:1.55;color:var(--ink-soft);
}
.inc li::before{
  content:"→";position:absolute;left:0;top:0;
  color:var(--apricot);font-family:var(--cond);font-size:1.05rem;line-height:1.5;
}
.pk__copy p{color:var(--ink-soft);font-size:.9875rem;line-height:1.82}
.pk__copy b{font-weight:600;color:var(--ink)}
/* the foot holds the button and nothing else on all three cards, so it needs no
   rule of its own: a second hairline plus the padding under it only opened an
   empty band between the copy and the button, and left the button stranded far
   above the card's bottom edge. One margin now sets the whole distance and the
   card closes right under the button. flex-end keeps it on the right, where
   space-between used to put it while a note still sat to its left; below 640px
   the foot is a stretched column and this has nothing to act on. */
.pk__foot{
  margin-top:clamp(1.4rem,2.6vw,2rem);
  display:flex;align-items:center;justify-content:flex-end;gap:1.2rem 2.5rem;flex-wrap:wrap;
}
/* the "Read more" control belongs to the phone layout alone — see the 640px
   block at the foot of the sheet. On a laptop the card is two columns wide and
   shows everything, so there is nothing for it to do. */
.pk__more{display:none}

/* discovery-call band ------------------------------------------
   ported from the corporate page's speaking CTA. --blush rather than the
   packages' white: it sits under the three cards but is not a fourth package,
   so it must not read as one. Narrower than the cards and centred. */
.speak-cta{
  margin:clamp(2.4rem,4.4vw,3.6rem) auto 0;
  max-width:min(100%,50rem);
  background:var(--blush);border-radius:8px;overflow:hidden;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:end;gap:clamp(1rem,2vw,1.8rem);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
/* the extra selector is load-bearing: the band also carries .rv, and
   .rv.is-in{transform:none} sits later in the sheet — at equal specificity it
   would win and the lift would never happen */
.pkg .speak-cta:hover{
  transform:translateY(-6px);
  box-shadow:0 48px 78px -50px rgba(83,79,81,.6);
}
/* she grows with the band rather than riding it flat. Origin at the floor so her
   feet stay planted — scaling from the centre lifts her off it. */
.pkg .speak-cta:hover .speak-cta__fig img{transform:scale(1.035)}
/* bottom-aligned and flush to the floor of the box — the alpha cut-out has no
   ground of its own, so anything else leaves her hovering. The inline margin is
   what walks her off the left edge: the PNG's own transparent margin scales with
   the image, so growing it alone barely shifts her. */
.speak-cta__fig{margin:0 0 0 clamp(.8rem,2.6vw,2.6rem);align-self:end}
.speak-cta__fig img{
  height:clamp(250px,24vw,370px);width:auto;max-width:100%;
  transform-origin:50% 100%;transition:transform .55s var(--ease);
}
/* symmetric padding + centred text, so the copy sits in the middle of what is
   left between the cut-out and the band's right edge */
.speak-cta__body{
  padding:clamp(1.9rem,3.2vw,2.9rem) clamp(1.5rem,2.6vw,2.2rem);
  text-align:center;
}
.speak-cta__label{
  display:block;font-family:var(--sans);font-weight:600;font-size:.8125rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--terracotta);
  margin-bottom:.75rem;
}
.speak-cta__t{
  font-family:var(--serif);font-size:clamp(1.35rem,1.1rem + .9vw,1.95rem);
  line-height:1.2;letter-spacing:-.02em;margin:0 0 .7rem;
}
.speak-cta__p{
  font-size:.9375rem;line-height:1.7;color:var(--ink-soft);
  margin:0 auto clamp(1.3rem,2.2vw,1.7rem);max-width:46ch;
}
/* the site button carries 1.02em of vertical padding, sized for the hero where it
   stands alone — inside the band that reads as a slab with a word floating in it.
   margin-bottom keeps the outermost pulse ring off the band's own edge. */
.speak-cta__body .btn{padding-block:.72em;margin-bottom:.4rem}

/* pulsing request button -------------------------------------
   three stacked box-shadow rings ripple outwards in the button's
   own pill shape, then fade — no extra elements needed */
.btn--pulse{
  animation:pulseRipple 3s infinite cubic-bezier(.25,.8,.25,1);
}
.btn--pulse:hover,.btn--pulse:focus-visible{animation:none}
@keyframes pulseRipple{
  0%{
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(196,99,60,.5),
               0 0 0 0 rgba(196,99,60,.3),
               0 0 0 0 rgba(196,99,60,.16);
  }
  50%{
    transform:scale(1.06);
    box-shadow:0 0 0 10px rgba(196,99,60,0),
               0 0 0 22px rgba(196,99,60,0),
               0 0 0 34px rgba(196,99,60,0);
  }
  100%{
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(196,99,60,0),
               0 0 0 0 rgba(196,99,60,0),
               0 0 0 0 rgba(196,99,60,0);
  }
}

/* ======================== LOVE NOTES ========================= */
/* half the usual lead-in above "Love Notes" — the script headline carries its
   own air at line-height .85, so the full pad on top of it read as a gap */
.notes{background:var(--dune);padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(5rem,10vw,9rem);position:relative;overflow:hidden}
.notes__head{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(.5rem,1.2vw,.9rem);margin-bottom:clamp(2.6rem,5vw,4rem);position:relative;
}
.notes__title{
  font-family:var(--script);font-size:clamp(3.2rem,2rem + 5vw,6.4rem);
  color:var(--terracotta);line-height:.85;transform:rotate(-2deg);display:inline-block;
}
.notes__sub{
  font-family:var(--cond);font-weight:500;font-size:clamp(.875rem,.82rem + .24vw,1rem);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
}
.slider{position:relative;max-width:1100px;margin-inline:auto}
.cf{
  display:grid;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
.cf-item{
  grid-area:1/1;justify-self:center;width:min(54%,600px);margin:0;
  background:var(--white);border-radius:6px;
  padding:clamp(1.7rem,2.9vw,2.7rem);
  display:flex;flex-direction:column;
  box-shadow:0 44px 84px -62px rgba(83,79,81,.75);
  transition:transform .75s var(--ease),opacity .75s var(--ease);
  will-change:transform,opacity;
}
.cf-item:not(.is-active){cursor:pointer}
/* pre-JS default. go() inline-styles the whole stack, but it only runs with the
   script at the foot of the page — until then every card sits in the same grid
   cell untransformed and the LAST one in the DOM paints on top, so the slider
   opened on the wrong quote. The scroll reveal normally covers that (.slider is
   .rv, opacity:0 until it enters the viewport), but under prefers-reduced-motion
   .rv is opaque from the first frame and the flash was on show. */
.cf-item:not(:first-child){opacity:0}
.quote-card__pull{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.15rem,.98rem + .8vw,1.65rem);
  line-height:1.26;letter-spacing:-.022em;position:relative;padding-top:.7em;
}
.quote-card__pull::before{
  content:"\201C";position:absolute;top:-.1em;left:-.06em;
  font-size:3.2em;line-height:1;color:var(--apricot);opacity:.5;font-style:normal;
}
.quote-card__body{margin-top:1.3rem;font-size:.9125rem;line-height:1.8;color:var(--ink-soft);flex:1}
.cf-item--long .quote-card__body{font-size:.855rem;line-height:1.76}
.cf-item--long .quote-card__pull{font-size:clamp(1.05rem,.92rem + .68vw,1.5rem)}
.quote-card__body p+p{margin-top:1em}
.quote-card__who{
  margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--hairline);
  display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;
}
.quote-card__initials{font-family:var(--serif);font-size:1.35rem;letter-spacing:.06em}
.quote-card__loc{font-family:var(--cond);font-weight:400;font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.slider__ui{display:flex;align-items:center;justify-content:center;gap:1.6rem;margin-top:clamp(2rem,3.6vw,2.8rem)}
.sbtn{
  width:52px;height:52px;border-radius:50%;border:1px solid var(--hairline);
  background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.sbtn:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.dots{display:flex;gap:.6rem}
.dot{width:7px;height:7px;border-radius:50%;border:0;padding:0;background:var(--ink-faint);cursor:pointer;transition:.4s var(--ease)}
.dot[aria-current="true"]{background:var(--terracotta);width:26px;border-radius:999px}

/* ============================================================
   FAQ — sticky heading, native <details> accordion
   <details> so the answers are readable and linkable with JS off.
   ============================================================ */
/* 30% off the foot, and sand rather than white — see the note on .rosie */
.faq{background:var(--sand);padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(3.5rem,7vw,6.3rem)}
/* The headline sits in its own row so the questions can start level with the
   photograph rather than with the top of the headline. Two rows, and the second
   holds the photograph and the list side by side — no hand-set offset to keep in
   step with however many lines the headline wraps to. */
.faq__grid{
  display:grid;grid-template-columns:.72fr 1.28fr;
  grid-template-areas:"head head" "fig list";
  column-gap:clamp(2.5rem,6vw,5.5rem);row-gap:clamp(1.8rem,3.4vw,2.6rem);
  align-items:start;
}
.faq__head{grid-area:head;text-align:center}
/* one line, centred, across the whole grid. The vw term is what keeps it to that
   one line: it sizes the headline off the viewport until the wrap stops growing,
   and the 4.4rem cap is the largest that still clears the gutters at 1320px. */
.faq__t{
  font-family:var(--serif);font-size:clamp(1rem,5.45vw,4.4rem);
  line-height:1;letter-spacing:-.038em;text-transform:uppercase;white-space:nowrap;
}
.faq__t em{font-style:italic;color:var(--terracotta);text-transform:none}
/* sits at the top of its grid area and stays put while the questions scroll.
   position:relative is what the offset frame below anchors to */
.faq__fig{grid-area:fig;margin:0;position:relative}
.faq__fig::before{
  content:"";position:absolute;inset:7% -8% -7% 8%;border:1px solid var(--apricot);border-radius:2px;
}
.faq__fig img{
  position:relative;width:100%;border-radius:2px;aspect-ratio:4/3;object-fit:cover;
  box-shadow:0 40px 80px -58px rgba(20,18,17,.65);
}
.faq__list{grid-area:list;display:grid}
.qa{border-top:1px solid var(--hairline)}
.qa:last-child{border-bottom:1px solid var(--hairline)}
.qa > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:1.5rem;
  padding:clamp(1.2rem,2.4vw,1.75rem) 0;
  font-family:var(--cond);font-weight:500;
  font-size:clamp(1rem,.92rem + .42vw,1.25rem);
  letter-spacing:.12em;text-transform:uppercase;line-height:1.35;
  color:var(--ink-soft);transition:color .4s var(--ease);
}
.qa > summary::-webkit-details-marker{display:none}
.qa > summary:hover{color:var(--terracotta)}
.qa__pm{flex:0 0 auto;width:1.5rem;height:1.5rem;position:relative}
.qa__pm::before,.qa__pm::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--terracotta);
  transform:translate(-50%,-50%);transition:transform .45s var(--ease),opacity .45s var(--ease);
}
.qa__pm::before{width:1.1rem;height:1.5px}
.qa__pm::after{width:1.5px;height:1.1rem}
.qa[open] .qa__pm::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.qa__a{
  padding:0 0 clamp(1.4rem,2.6vw,2rem);max-width:62ch;
  color:var(--ink-soft);font-size:.9875rem;line-height:1.82;
  animation:qaIn .55s var(--ease) both;
}
@keyframes qaIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.qa__a p{margin-bottom:1em}
.qa__a b{font-weight:600;color:var(--ink)}
.qa__a em{font-style:italic}
.qa__a a{color:var(--terracotta)}
.qa__a .fine{font-size:.875rem;color:var(--ink-faint);font-style:italic}

/* ============================================================
   I'M ROSIE
   ============================================================ */
/* white here and sand on the FAQ below, so the two swap the shade they used to
   carry when the FAQ came first. Half the usual pad at both ends. */
.rosie{background:var(--white);padding:clamp(2.5rem,5vw,4.5rem) 0;overflow:hidden}
.rosie::before{
  content:"";position:absolute;inset:-24% auto auto -14%;width:44vw;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(237,165,125,.34),transparent 66%);
  pointer-events:none;
}
.rosie__grid{
  position:relative;display:grid;grid-template-columns:.95fr 1.05fr;
  gap:clamp(2.5rem,6vw,5.5rem);align-items:center;
}
.rosie__art{position:relative}
.rosie__fig{margin:0;position:relative}
.rosie__fig img{
  width:100%;border-radius:2px;aspect-ratio:4/5;object-fit:cover;object-position:50% 24%;
  box-shadow:0 44px 90px -58px rgba(20,18,17,.7);
}
/* the same question-and-answer pair about.html opens with: display serif over a
   handwritten line, turned a couple of degrees. The label follows underneath
   here rather than sitting above the question. */
.rosie__t{
  font-family:var(--serif);font-size:clamp(2.4rem,1.5rem + 3.8vw,4.8rem);
  line-height:.96;letter-spacing:-.042em;text-transform:uppercase;
}
.rosie__t .sub{
  display:block;font-family:var(--script);text-transform:none;color:var(--terracotta);
  font-size:.68em;line-height:.86;margin-top:.1em;
  transform:rotate(-1.8deg);transform-origin:left;
}
/* the script line's .86 line-height already leaves air under it */
.rosie__eyebrow{display:block;margin-top:clamp(.9rem,1.8vw,1.4rem)}
.rosie__body{margin-top:clamp(1.5rem,2.8vw,2.2rem);color:var(--ink-soft);font-size:.9875rem;line-height:1.82}
.rosie__body p{margin-bottom:1.05em}
.rosie__body em{font-style:italic}
.rosie__cta{margin-top:clamp(1.8rem,3.2vw,2.4rem)}

/* =========================== CTA ============================= */
.cta{background:var(--apricot);color:var(--ink-deep);position:relative;overflow:hidden}
.cta::before{
  content:"";position:absolute;inset:-40% -10% auto auto;width:52vw;aspect-ratio:1;border-radius:50%;
  background:rgba(255,255,255,.24);
}
/* padding-block, not the shorthand — this element is also a .wrap, and a
   shorthand here would zero out the gutter it inherits from it */
.cta__in{
  /* half the lead-in, full pad at the foot before the footer */
  padding-block:clamp(2.5rem,5vw,4.25rem) clamp(5rem,10vw,8.5rem);position:relative;
  display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(2.5rem,6vw,5rem);align-items:center;
}
/* carried over from the FAQ section it used to close: serif question, then the
   handwritten answer on its own line */
.cta__q{
  font-family:var(--serif);font-size:clamp(2.15rem,1.75rem + 1.75vw,3.4rem);
  line-height:1.2;letter-spacing:-.022em;max-width:24ch;margin:0;
  color:var(--ink-soft);
}
.cta__q em{
  font-family:var(--script);font-style:normal;font-size:1.3em;
  line-height:1.05;color:#fff;
  display:inline-block;transform:rotate(-2deg);margin-top:.1em;
}
/* 52ch rather than 46: at the narrower measure the address was pushed onto a
   line of its own, and an orphaned email reads as a broken link */
.cta__p{margin-top:clamp(1.2rem,2.2vw,1.7rem);color:var(--ink-soft);font-size:.9875rem;line-height:1.8;max-width:52ch}
.mailto{
  font-weight:600;color:var(--ink-deep);text-decoration:none;
  border-bottom:1px solid rgba(53,50,51,.4);padding-bottom:1px;
  transition:border-color .35s var(--ease);
}
.mailto:hover{border-color:var(--ink-deep)}
.cta__btns{display:flex;flex-wrap:wrap;gap:clamp(.8rem,1.6vw,1.2rem);margin-top:clamp(2rem,3.6vw,2.8rem)}
/* The shared hover fill is apricot, which is this section's own background — both
   buttons dissolved into it. Here they keep .btn's default ink grey at rest and
   fill to terracotta, so each stays a solid shape against the panel throughout.
   Neither carries --terra or --ghost any more; the base .btn is already the grey. */
.cta .btn::before{background:var(--terracotta)}
.cta .btn:hover,.cta .btn:focus-visible{color:#fff;border-color:var(--terracotta)}
.cta__fig{margin:0;position:relative}
.cta__fig::before{
  content:"";position:absolute;inset:6% -7% -6% 7%;border:1px solid rgba(255,255,255,.7);border-radius:2px;
}
.cta__fig img{
  position:relative;width:100%;border-radius:2px;aspect-ratio:4/5;object-fit:cover;object-position:50% 26%;
  box-shadow:0 46px 90px -58px rgba(20,18,17,.65);
}

/* ========================= FOOTER ============================ */
.foot{background:var(--ink-deep);color:#FFFFFF;padding:clamp(2.75rem,5.5vw,4.25rem) 0 1.75rem}

/* ======================== REVEALS ============================ */
.rv{opacity:0;transform:translateY(28px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}.rv-d4{transition-delay:.4s}

/* ====================== RESPONSIVE =========================== */
@media (max-width:1080px){
  .nav__links{
    position:fixed;inset:0 0 auto;top:0;background:var(--cream);
    flex-direction:column;justify-content:center;gap:2rem;height:100dvh;
    clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);margin-bottom:0;
  }
  .nav.is-open .nav__links{clip-path:inset(0 0 0 0)}
  .nav__link{font-size:1.5rem;font-family:var(--serif);letter-spacing:.04em;text-transform:none}
  .burger{display:block;position:relative;z-index:2}

  .wif__grid,.rosie__grid,.faq__grid,.cta__in{grid-template-columns:1fr;gap:clamp(2.6rem,6vw,3.8rem)}
  .wif__art,.rosie__art,.cta__fig{max-width:520px;width:100%;margin-inline:auto}
  /* stacked, the portrait pushed the whole list below the fold before a single
     line of "What if you could…" had been read. It goes under the list instead,
     so the section opens on the headline and closes on her. Only .wif — the
     other two figures read fine where they are. */
  .wif__art{order:2}
  /* one column, so the areas collapse to a single stack */
  .faq__grid{grid-template-areas:"head" "fig" "list"}
  .faq__fig{max-width:420px}
  .fyi__grid{grid-template-columns:1fr 1fr}
  .pk__grid,.pk--flip .pk__grid{grid-template-columns:1fr;gap:2rem}
  .pk--flip .pk__inc{order:1}
  .pk--flip .pk__copy{order:2}
  /* The photo stack drops below the copy — but not all of it. The upper group
     (portrait and the 5+ plaque) rises between the second and third paragraph,
     so the reader meets it at the turn rather than after the last word;
     .mn-c and the 100+ plaque stay under the copy where they were.
     .mani__copy, .mani__art and .mani__stack go display:contents so the four
     beats and the two groups become direct children of the one-column grid and
     `order` can interleave them. The grid gap has to go with it — it would
     otherwise open between every beat, where the beats' own padding and rules
     already set the rhythm — so the two art groups carry their own margins. */
  .mani__grid{grid-template-columns:1fr;gap:0}
  .mani__copy,.mani__art,.mani__stack{display:contents}
  /* display:block undoes the contents above — without a box of their own they
     are no containing block, and the pieces would fall back to .mani__grid */
  .mn-lead,.mn-rest{display:block;position:relative;width:100%;max-width:460px;margin-inline:auto}
  /* The coffee frame only comes out here, on the phone — the desktop stack keeps
     all five pieces. Stacked in one column the three of them ran nearly a screen
     tall on their own, and the two photographs side by side left neither one big
     enough to read. The 5+ plaque takes the coffee's place on the right and
     overlaps the portrait, so what is left still reads as a collage rather than
     as a picture with a box parked under it. */
  .mn-lead .mn-b{display:none}
  /* Each group is cropped to just the piece heights it holds, in units of its
     own width: the portrait runs 0 → .725 and the plaque .42 → .86, so the lead
     is 1/.86; the rest spans 55% → 100% of the full stack's height, and
     1.85 × .45 = .8325. The tops below are those figures over the new box
     heights (.42 / .86 = .488); .mn-p2 keeps bottom:0 and .mn-c starts at the
     top of its own group. */
  .mn-lead{aspect-ratio:1/.86;margin-block:clamp(2.4rem,5.5vw,3.4rem)}
  .mn-rest{aspect-ratio:1/.8325;margin-top:clamp(2.8rem,6vw,4rem)}
  /* left:auto is load-bearing: .mn-p1 sets left:4% for the desktop, and left and
     right together would stretch the square instead of moving it */
  .mn-lead .mn-p1{left:auto;right:0;top:48.8%;width:44%}
  .mn-rest .mn-c{top:0}
  .mani__copy .mani__beat:nth-child(1){order:1}
  .mani__copy .mani__beat:nth-child(2){order:2}
  .mn-lead{order:3}
  .mani__copy .mani__beat:nth-child(3){order:4}
  .mani__copy .mani__beat:nth-child(4){order:5}
  .mn-rest{order:6}
  /* the rules under the last two beats come off here: the photographs already
     break the column into sections on a phone, and a hairline directly under a
     group of pictures reads as the edge of the pictures rather than as the head
     of the paragraph. The beats keep their padding, so the pacing holds. */
  .mani__copy .mani__beat:nth-child(3),
  .mani__copy .mani__beat:nth-child(4){border-top:0}
  .cf-item{width:min(78%,600px)}
}
@media (max-width:860px){
  /* the cut-out is a fixed-height figure, so the text column is what gives —
     stack before it gets too narrow to hold a sensible measure. Copy goes above
     the figure so she still stands on the floor of the box rather than on the text. */
  .speak-cta{grid-template-columns:1fr;gap:0}
  .speak-cta__body{
    grid-row:1;
    padding-inline:clamp(1.7rem,3vw,2.9rem);
    padding-bottom:clamp(1.5rem,2.6vw,2rem);
  }
  /* the desktop left margin walks her off the edge of a two-column row; stacked
     she is centred instead, and it would just throw the centring off */
  .speak-cta__fig{grid-row:2;justify-self:center;margin-left:0}
  .speak-cta__fig img{height:clamp(200px,42vw,260px)}
  .cf-item{width:min(88%,600px)}
  .cf{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  }
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}
}
@media (max-width:640px){
  .hero{min-height:auto;padding-block:clamp(8rem,20vh,10rem) clamp(3.5rem,8vh,5rem)}
  .fyi__grid{grid-template-columns:1fr}
  /* Nur auf dem Handy: einspaltig laufen dieselben drei bis vier Zeilen über
     sechs Karten hintereinander und die Liste füllt zwei Bildschirme. Die
     Schrift geht rund 11% zurück und die Zeilenhöhe von 1.68 auf 1.5 — bei drei
     Zeilen spart das gut eine Zeile pro Karte. Innenrand, Abstand zum Haken und
     der Haken selbst ziehen anteilig mit, sonst säße die kleinere Schrift in
     einer unverändert großen Box und die Karte wäre kaum kürzer. Das Verhältnis
     untereinander bleibt. */
  .fyi__card{
    font-size:.875rem;line-height:1.5;
    padding:.8rem 1rem;gap:.85rem;
  }
  .fyi__card .tick{width:1.7rem;height:1.7rem}
  .inc{grid-template-columns:1fr}
  .pk__ribbon{letter-spacing:.12em;padding-inline:1.1em}
  .pk__foot{flex-direction:column;align-items:stretch}
  .pk__foot .btn{justify-content:center}

  /* Nur auf dem Handy: die Karte zieht sich zusammen. Die Abstände sind für die
     zweispaltige Fassung gesetzt, wo sie neben einer breiten Spalte stehen und
     Luft brauchen; einspaltig untereinander gestapelt addieren sich dieselben
     Werte zu einer Karte, die auch aufgeklappt kaum auf den Schirm passt. Jeder
     Schritt geht rund ein Viertel zurück — Rand, Kopf, die Trennlinien über
     Liste und Fuß, die Zeilen der Liste und die Absätze der Copy. Das
     Verhältnis untereinander bleibt, nur die Karte wird kürzer.
     .pk--flip steht mit in den Selektoren, weil die 1080er Regel den Abstand
     unter demselben Namen setzt und sonst gewinnt — alle drei Karten tragen die
     Klasse. */
  .pk{padding:clamp(1.35rem,4.4vw,1.8rem)}
  .pk__sub{margin-top:.55rem}
  .pk__kicker{margin-bottom:.7rem}
  .pk__grid,.pk--flip .pk__grid{margin-top:1.4rem;padding-top:1.3rem;gap:1.5rem}
  .pk__lbl{margin-bottom:.85rem}
  .inc{gap:.7rem}
  .inc li{line-height:1.5}
  .pk__copy p{line-height:1.72;margin-bottom:.9em}
  .pk__foot{margin-top:1.15rem;gap:.9rem}

  /* Nur auf dem Handy: die drei Pakete klappen auf, wie die Keynote-Karten auf
     der Speaking-Seite. Hier läuft die "Included"-Liste einspaltig und die Copy
     steht darunter, also ist jede Karte über zwei Bildschirme hoch — geschnitten
     wird deshalb direkt unter dem dritten Aufzählungspunkt, der Rest (restliche
     Punkte plus die komplette Copy) kommt über den Button.
     Geschnitten wird .pk__grid selbst und nicht die zwei Blöcke darin: gestapelt
     sind Liste und Copy ein durchgehender Lauf, ein einziges max-height trennt
     also beide an derselben Stelle. Wo diese Stelle liegt, steht nicht hier —
     das hängt davon ab, wie viele der ersten drei Punkte umbrechen. Das Skript
     misst sie pro Karte, schreibt sie als --pk-clip hinein und setzt dazu
     .pk--collapsible. Ohne JS fehlt beides: max-height wird mit unbekannter
     Variable ungültig und fällt auf none zurück, der Button bleibt aus, die
     Karte steht ganz da.
     --pk-line ist eine Zeile der Liste (.9375rem mal 1.5 Zeilenhöhe, wie oben in
     diesem Block gesetzt) — alles hier drunter rechnet in Zeilen statt in runden
     rem-Werten, damit es nicht auseinanderläuft, sobald die Liste eine andere
     Größe bekommt. */
  .pk--collapsible .pk__grid{
    --pk-line:calc(.9375rem * 1.5);
    position:relative;overflow:hidden;max-height:var(--pk-clip);
    transition:max-height .55s var(--ease);
  }
  /* Der Übergang bricht nicht hart ab, sondern verblasst wie bei den
     Keynote-Karten: geschnitten wird am Fuß des vierten Punktes, und der ganze
     vierte Punkt löst sich im Kartengrund auf. Der dritte bleibt lesbar, der
     vierte ist ein Hinweis, keine Information.
     Die Höhe des Verlaufs steht in --pk-fade und wird gemessen: die Strecke vom
     Fuß des dritten Punktes bis zur Kante, plus 30%. Er nimmt den vierten Punkt
     damit über seine ganze Höhe weg statt nur die letzte Zeile, und die 30% sind
     das Stück, das er über den dritten hinausreicht — dessen Unterlängen liegen
     dadurch auf jeder Karte bei rund einem Drittel der Rampe, die Zeile selbst
     bleibt lesbar. Als Anteil der Strecke und nicht als feste Zeile, weil der
     vierte Punkt auf der 3-Monats-Karte zweizeilig läuft und auf den anderen
     beiden einzeilig: mit festem Zuschlag begann der Verlauf dort spürbar früher
     und graute eine Zeile ein, die die lange Karte stehen ließ.
     Die Stopps sind eine Kurve und keine gerade Rampe — gegen dunkle
     Schrift findet das Auge schon die ersten paar Prozent, ein Verlauf der oben
     lange bei null bleibt scheint deshalb später anzufangen als er es tut.
     Ab 88% steht voll --sand: die letzten Millimeter vor der Kante sind damit
     gedeckt, sonst stünden dort die abgeschnittenen Unterlängen und die Kante
     wäre doch wieder ein Schnitt.
     position:absolute ist Pflicht: .pk__grid ist ein Grid, ein ::after im Fluss
     würde darin eine eigene Zelle aufmachen. */
  .pk--collapsible .pk__grid::after{
    content:"";position:absolute;left:0;right:0;bottom:0;z-index:2;
    height:var(--pk-fade,calc(var(--pk-line) * 3));
    background:linear-gradient(to bottom,
      rgba(239,231,225,0)    0%,
      rgba(239,231,225,.14) 10%,
      rgba(239,231,225,.36) 26%,
      rgba(239,231,225,.58) 44%,
      rgba(239,231,225,.78) 62%,
      rgba(239,231,225,.93) 78%,
      var(--sand)           88%);
    pointer-events:none;transition:opacity .4s var(--ease);
  }
  .pk.is-open .pk__grid::after{opacity:0}
  .pk--collapsible .pk__more{
    display:flex;margin-top:1.15rem;
  }
  .pk__more .btn{
    width:100%;justify-content:center;
    padding:.85em 1.75em;font-size:.875rem;letter-spacing:.16em;
  }
  /* der Pfeil nickt nach unten statt zur Seite — er öffnet die Karte, in der er
     steht, und dreht sich um, sobald sie offen ist */
  .pk__toggle .arw{transform:none}
  .pk__toggle:hover .arw,.pk__toggle:focus-visible .arw{transform:translateY(3px)}
  .pk.is-open .pk__toggle .arw{transform:rotate(180deg)}
  .pk.is-open .pk__toggle:hover .arw,
  .pk.is-open .pk__toggle:focus-visible .arw{transform:rotate(180deg) translateY(3px)}

  /* Nur auf dem Handy: das Portrait steht nicht mehr über "Who am I?", sondern
     unter dem ersten Absatz ("I know what it's like to always feel out of
     place …"). Gleicher Griff wie im .intro-Abschnitt auf about.html: das Bild
     ist ein Geschwister von .rosie__copy und kann per order allein nicht
     zwischen dessen Absätze rutschen, also lösen sich .rosie__copy und
     .rosie__body hier per display:contents auf — Überschrift, Eyebrow, jeder
     Absatz, der Link und das Bild werden dadurch direkte Zellen von
     .rosie__grid und lassen sich frei sortieren. Zwei Folgen: der Grid-Gap
     stünde jetzt zwischen jedem Absatz, geht also auf 0, und die Abstände
     kommen wieder aus den Margins (.rosie__body gibt sein margin-top an den
     ersten Absatz ab, das Bild bekommt margin-block). Und .rosie__copy hat
     keine Box mehr, das Scroll-Reveal (.rv) greift für den Text hier also
     nicht — das Bild behält seines. Ab 641px ändert sich nichts. */
  .rosie__grid{gap:0}
  .rosie__copy,.rosie__body{display:contents}
  .rosie__t{order:1}
  .rosie__eyebrow{order:2}
  .rosie__body>p{order:5}
  /* der erste Absatz trägt den Abstand, den sonst .rosie__body setzt */
  .rosie__body>p:first-child{order:3;margin-top:clamp(1.5rem,2.8vw,2.2rem)}
  .rosie__art{order:4;margin-block:.8rem 2rem}
  .rosie__cta{order:6}
  .cta__btns .btn{width:100%;justify-content:center}
  /* on a phone the long quotes ran taller than the screen. the body drops
     another step, the card's padding and rules close up with it, and the
     --long variants are named too — they are two classes deep and a media
     query adds no specificity, so they would otherwise win on their own size. */
  .cf-item{padding:1.35rem 1.25rem 1.45rem}
  .quote-card__pull,
  .cf-item--long .quote-card__pull{font-size:1.06rem;line-height:1.3}
  .quote-card__body,
  .cf-item--long .quote-card__body{margin-top:.95rem;font-size:.8125rem;line-height:1.62}
  .quote-card__who{margin-top:1.1rem;padding-top:.9rem;gap:.6rem}
  .quote-card__initials{font-size:1.15rem}
  .quote-card__loc{font-size:.75rem;letter-spacing:.1em}
  /* all three cards sit in the same grid cell and stretch to the height of the
     longest one, so the two shorter notes were left with dead space under them.
     Their type goes up 10% to take some of it back — pull 1.06→1.17rem, body
     .8125→.89rem. The --long card keeps the sizes above; :not() puts these at
     (0,3,0), so they win on specificity as well as on order. */
  .cf-item:not(.cf-item--long) .quote-card__pull{font-size:1.17rem}
  .cf-item:not(.cf-item--long) .quote-card__body{font-size:.89rem}
  .foot__grid{grid-template-columns:1fr}

  /* Nur auf dem Handy: der Discovery-Call-Kasten läuft Label → Überschrift →
     Copy → Freisteller → Button, damit die Aktion unten steht statt über einem
     260px hohen Bild begraben zu sein. Dieselbe Umstellung wie im Kasten auf der
     Speaking-Seite. Der Button steckt im Textblock, kann also nicht per order an
     der Grafik vorbei — deshalb gibt der Textblock mit display:contents seine
     eigene Box ab und seine Kinder werden selbst Elemente des Kasten-Grids. Mit
     der Box geht sein Innenabstand verloren, den setzt jedes Kind neu.
     Das grid-row:2 der 860er-Regel muss mit weg: feste Platzierung schlägt die
     Sortierung über order. Desktop bleibt zweispaltig, Copy neben dem
     Freisteller. */
  .speak-cta{--sc-pad:1.5rem}
  .speak-cta__body{display:contents}
  .speak-cta__label{order:1;padding:1.5rem var(--sc-pad) 0;margin-bottom:.6rem}
  .speak-cta__t{order:2;padding-inline:var(--sc-pad);margin-bottom:.55rem}
  /* der eigene Abstand unter der Copy würde sich mit dem über der Grafik addieren */
  .speak-cta__p{order:3;padding-inline:var(--sc-pad);margin-bottom:0}
  .speak-cta__fig{order:4;grid-row:auto;margin:1.1rem 0 0}
  /* sie stand auf dem Boden des Kastens; mit dem Button unter ihr hält der
     kürzere Zuschnitt den Kasten davon ab, einen Schirm höher zu werden als
     nötig. Dadurch liegt aber die gerade Unterkante des Freistellers frei, die
     vorher die Kastenkante verdeckt hat — der Verlauf setzt sie zurück. */
  .speak-cta__fig img{
    height:clamp(180px,36vw,225px);
    -webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 74%,transparent 100%);
  }
  /* justify-self statt einer Breite: als Grid-Element würde der Button sonst zum
     Block und über die ganze Spalte ziehen */
  .speak-cta__body .btn{order:5;justify-self:center;margin:1.1rem var(--sc-pad) 1.6rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  /* outweighs .mani__stack .rv above, but keeps the tilt the layout depends on */
  .mani__stack .rv{opacity:1;transform:rotate(var(--rot,0deg))}
  .checks li{opacity:1;transform:none}
  .hero__t .l > span{transform:none;opacity:1}
  .hero__rule{transform:scaleX(1)}
  .hero__cue{opacity:1}
  .tick circle,.tick path,.strike path{stroke-dashoffset:0}
}