@font-face{
  font-family:'Above the Beyond';
  src:url('../fonts/Above the Beyond Serif Regular.otf') format('opentype');
  font-weight:normal;font-style:normal;font-display:swap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Elevate with AI — "Poolside Light"
   Paper-led rework. Ink is now ink, not ground. Display type is a light serif
   rather than bold sans, so nothing shouts. One accent, one rule, lots of air.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Paper is the ground, in three tonal steps so sections can breathe apart
     without introducing a new hue. Ink is reserved for type. */
  --paper:#F6F3EF;
  --paper-hi:#FCFAF8;      /* cards, raised surfaces */
  --paper-lo:#EDE5DD;      /* warm shade, for alternating bands */

  --ink:#17101A;
  --ink-70:rgba(23,16,26,.70);
  --ink-55:rgba(23,16,26,.55);
  --line:rgba(23,16,26,.13);
  --line-soft:rgba(23,16,26,.08);

  --signal:#DE0866;
  --signal-dk:#B8064F;     /* Signal as text on Paper */
  --mute:#6B636D;          /* what got cut, on a light ground */

  --display:'Cormorant Garamond','Freight Text Pro',Georgia,serif;
  --serif:'EB Garamond','Freight Text Pro',Georgia,serif;
  --sans:'Inter','Söhne','Helvetica Neue',Arial,sans-serif;

  --wrap:1280px;
  --gut:clamp(20px,5vw,72px);
  --pad:clamp(90px,11vw,180px);
  --arch:50vw 50vw 0 0 / 26% 26% 0 0;

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.75;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--signal);color:#fff;}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);}
.section{padding-block:var(--pad);position:relative;}
.band-lo{background:var(--paper-lo);}
.band-hi{background:var(--paper-hi);}

/* ─── Type ──────────────────────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--serif);font-size:clamp(11px,.92vw,13px);
  text-transform:uppercase;letter-spacing:.18em;font-weight:500;
  color:var(--signal-dk);margin:0 0 26px;
}
.eyebrow.quiet{color:var(--mute);}

h1,h2,h3,h4{margin:0;font-weight:400;}
/* Display is the light serif. Nothing here goes above 400. */
.d-xl{font-family:var(--sans);font-weight:700;
  font-size:clamp(44px,6.4vw,104px);line-height:1.0;letter-spacing:-.042em;}
.d-lg{font-family:var(--sans);font-weight:700;
  font-size:clamp(34px,4.4vw,68px);line-height:1.05;letter-spacing:-.036em;}
.d-md{font-family:var(--sans);font-weight:600;
  font-size:clamp(25px,2.8vw,42px);line-height:1.15;letter-spacing:-.028em;}
.d-sm{font-family:var(--sans);font-weight:600;
  font-size:clamp(21px,1.9vw,27px);line-height:1.28;letter-spacing:-.022em;}

.lede{font-size:clamp(18px,1.55vw,23px);line-height:1.65;color:var(--ink-70);font-weight:400;}
.body{color:var(--ink-70);line-height:1.85;font-size:16.5px;}
.mute{color:var(--mute);}
.sig{color:var(--signal-dk);}

/* The one device, drawn finer now that it sits on paper. */
.struck{position:relative;color:var(--mute);white-space:nowrap;}
.struck::after{content:'';position:absolute;left:-.03em;right:-.03em;top:52%;
  height:.042em;min-height:2px;background:var(--signal);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.05s var(--e-out) var(--d,.3s);}
.in .struck::after,.struck.in::after{transform:scaleX(1);}

.hair{height:1px;background:var(--line);border:0;margin:0;}

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--sans);font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  padding:19px 36px;border-radius:100px;border:1px solid var(--signal);
  background:var(--signal);color:#fff;cursor:pointer;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out),color .4s;
}
.btn::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--signal-dk);
  transform:translateY(101%);transition:transform .5s var(--e-out);}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 36px -18px rgba(222,8,102,.6);}
.btn:hover::before{transform:translateY(0);}
.btn .arw{transition:transform .5s var(--e-out);}
.btn:hover .arw{transform:translateX(5px);}

.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink);}
.btn.ghost::before{background:var(--ink);}
.btn.ghost:hover{color:var(--paper);border-color:var(--ink);box-shadow:none;}

.txtlink{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  padding-bottom:7px;position:relative;}
.txtlink::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--signal);transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--e-out);}
.txtlink:hover::after{transform:scaleX(1);transform-origin:left;}

/* ─── Nav ───────────────────────────────────────────────────────────────── */
.pnav{position:fixed;inset:0 0 auto;z-index:200;padding:22px 0;
  transition:padding .5s var(--e-out),background .5s,backdrop-filter .5s,border-color .5s;
  border-bottom:1px solid transparent;}
.pnav.stuck{padding:12px 0;background:rgba(246,243,239,.86);
  backdrop-filter:saturate(150%) blur(18px);-webkit-backdrop-filter:saturate(150%) blur(18px);
  border-bottom-color:var(--line-soft);}
.pnav-in{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:24px;}
.pnav-logo img{height:54px;width:auto;transition:height .5s var(--e-out);}
.pnav.stuck .pnav-logo img{height:42px;}
.pnav-links{display:flex;align-items:center;gap:36px;}
.pnav-links a{font-size:13.5px;font-weight:400;letter-spacing:.01em;
  color:var(--ink);position:relative;padding:4px 0;transition:color .3s;}
.pnav-links a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--signal);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--e-out);}
.pnav-links a:hover{color:var(--ink);}
.pnav-links a:hover::after,.pnav-links a.here::after{transform:scaleX(1);transform-origin:left;}
.pnav-links a.pnav-cta{background:var(--signal);color:#fff;padding:13px 26px;border-radius:100px;
  font-weight:500;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  transition:background .35s,transform .45s var(--e-out);}
.pnav-links a.pnav-cta::after{display:none;}
.pnav-links a.pnav-cta:hover{background:var(--signal-dk);transform:translateY(-2px);}
.burger{display:none;width:32px;height:20px;position:relative;cursor:pointer;background:none;border:0;padding:0;}
.burger span{position:absolute;left:0;height:1px;width:100%;background:var(--ink);
  transition:transform .45s var(--e-out),opacity .3s;}
.burger span:nth-child(1){top:2px;} .burger span:nth-child(2){top:9px;} .burger span:nth-child(3){top:16px;}
.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);}

/* ─── Hero: type on paper, photograph alongside ─────────────────────────── */
.hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  min-height:100svh;align-items:stretch;background:var(--paper);}
.hero-body{display:flex;flex-direction:column;justify-content:center;position:relative;
  padding:150px var(--gut) clamp(96px,9vw,130px) max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));}
.hero-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:clamp(22px,3vw,34px);}
.hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--signal);flex:none;
  animation:pulse 2.8s var(--e-io) infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.3;transform:scale(.7);}}
.hero-eyebrow span{font-family:var(--serif);font-size:clamp(10.5px,.9vw,12.5px);
  text-transform:uppercase;letter-spacing:.24em;color:var(--mute);}

.hero-title{max-width:11ch;margin:0 0 clamp(26px,3vw,38px);}
.hero-title .ln{display:block;overflow:hidden;}
.hero-title .ln > i{display:block;font-style:normal;transform:translateY(104%);
  transition:transform 1.15s var(--e-out);}
.hero.go .hero-title .ln > i{transform:translateY(0);}
.hero.go .hero-title .ln:nth-child(2) > i{transition-delay:.1s;}
.hero-title .keep{color:var(--signal-dk);font-style:normal;}
.hero.go .hero-title .struck::after{transform:scaleX(1);transition-delay:1s;}

.hero-sub{max-width:40ch;color:var(--ink-70);margin:0 0 clamp(32px,4vw,44px);
  font-size:clamp(16.5px,1.35vw,19.5px);line-height:1.75;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;}
.hero-fade{opacity:0;transform:translateY(24px);
  transition:opacity .9s var(--e-out),transform .9s var(--e-out);}
.hero.go .hero-fade{opacity:1;transform:none;}
.hero.go .hero-eyebrow{transition-delay:.18s;}
.hero.go .hero-sub{transition-delay:.42s;}
.hero.go .hero-actions{transition-delay:.54s;}

.hero-media{position:relative;overflow:hidden;}
.hero-media::after{content:'';position:absolute;inset:0 0 auto;height:190px;z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(246,243,239,.94),rgba(246,243,239,.55) 45%,rgba(246,243,239,0));}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--pos,50% 50%);
  transform:scale(1.16);opacity:0;animation:heroIn 2.4s var(--e-out) .15s forwards;}
@keyframes heroIn{to{transform:scale(1.01);opacity:1;}}
.hero-cap{position:absolute;z-index:2;left:clamp(18px,2vw,30px);bottom:clamp(18px,2vw,30px);
  background:rgba(246,243,239,.9);backdrop-filter:blur(8px);
  font-family:var(--serif);font-size:10.5px;text-transform:uppercase;letter-spacing:.2em;
  color:var(--ink);padding:10px 18px;border-radius:100px;}

.scroll-cue{position:absolute;left:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));
  bottom:clamp(26px,3.2vw,40px);display:flex;align-items:center;gap:12px;
  font-family:var(--serif);font-size:10.5px;text-transform:uppercase;letter-spacing:.24em;
  color:var(--mute);}
.scroll-cue .ln2{width:52px;height:1px;background:var(--signal);transform-origin:left;
  animation:cue 2.6s var(--e-io) infinite;}
@keyframes cue{0%{transform:scaleX(0);}45%{transform:scaleX(1);}100%{transform:scaleX(0);transform-origin:right;}}

/* ─── Marquee ───────────────────────────────────────────────────────────── */
.marq{border-block:1px solid var(--line-soft);padding:19px 0;overflow:hidden;background:var(--paper);}
.marq-track{display:flex;width:max-content;animation:slide 48s linear infinite;}
.marq-track span{font-family:var(--serif);font-size:clamp(11.5px,1vw,14px);
  text-transform:uppercase;letter-spacing:.24em;color:var(--mute);
  padding-inline:30px;white-space:nowrap;display:flex;align-items:center;gap:30px;}
.marq-track span::after{content:'';width:4px;height:4px;background:var(--signal);
  border-radius:50%;flex:none;}
@keyframes slide{to{transform:translateX(-50%);}}
.marq:hover .marq-track{animation-play-state:paused;}

/* ─── Reveals ───────────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(34px);
  transition:opacity 1s var(--e-out),transform 1s var(--e-out);}
.rv.in{opacity:1;transform:none;}
.rv[data-d="1"]{transition-delay:.1s;} .rv[data-d="2"]{transition-delay:.2s;}
.rv[data-d="3"]{transition-delay:.3s;} .rv[data-d="4"]{transition-delay:.4s;}
.rv[data-d="5"]{transition-delay:.5s;} .rv[data-d="6"]{transition-delay:.6s;}

.rv-img{overflow:hidden;position:relative;}
.rv-img img{transform:scale(1.18);transition:transform 1.6s var(--e-out);}
.rv-img.in img{transform:scale(1);}
.rv-img::after{content:'';position:absolute;inset:0;background:var(--paper);
  transform-origin:bottom;transition:transform 1.15s var(--e-io);}
.rv-img.in::after{transform:scaleY(0);}

.spl .w{display:inline-block;overflow:hidden;vertical-align:bottom;}
.spl .w > i{display:inline-block;font-style:normal;transform:translateY(104%);
  transition:transform .95s var(--e-out);}
.spl.in .w > i{transform:none;}

/* The arch. A soft top on a hard grid, and the only curve in the system. */
.arch{border-radius:var(--arch);overflow:hidden;}

/* ─── Plain English ─────────────────────────────────────────────────────── */
.head2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);
  gap:clamp(32px,6vw,88px);align-items:end;margin-bottom:clamp(56px,7vw,100px);}
.head2 h2{max-width:15ch;}
.head2 .lede{font-size:clamp(16.5px,1.25vw,19.5px);}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3.6vw,56px);}
.trio-item .tn{font-family:var(--serif);font-size:12px;letter-spacing:.22em;
  color:var(--signal-dk);display:block;margin-bottom:20px;}
.trio-item .tfig{margin:0 0 26px;}
.trio-item .tfig img{width:100%;aspect-ratio:4/5;object-fit:cover;
  object-position:var(--pos,50% 50%);}
.trio-item h3{margin-bottom:12px;}
.trio-item p{margin:0;font-size:15.5px;line-height:1.8;color:var(--ink-70);}

/* ─── The cut ───────────────────────────────────────────────────────────── */
.cut-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(40px,7vw,110px);align-items:start;}
.cut-list{list-style:none;margin:0;padding:0;}
.cut-list li{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(21px,2.4vw,36px);line-height:1.3;letter-spacing:-.03em;
  padding:19px 0;border-bottom:1px solid var(--line);color:var(--mute);
  opacity:0;transform:translateX(-20px);
  transition:opacity .8s var(--e-out),transform .8s var(--e-out);}
.cut-list.in li{opacity:1;transform:none;}
.cut-list.in li:nth-child(1){transition-delay:.05s;}
.cut-list.in li:nth-child(2){transition-delay:.15s;}
.cut-list.in li:nth-child(3){transition-delay:.25s;}
.cut-list.in li:nth-child(4){transition-delay:.35s;}
.cut-list.in li:nth-child(5){transition-delay:.45s;}
.cut-list li span{
  background-image:linear-gradient(var(--signal),var(--signal));
  background-repeat:no-repeat;background-position:0 55%;background-size:0% 2px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .8s var(--e-out);}
.cut-list.in li:nth-child(1) span{transition-delay:.35s;}
.cut-list.in li:nth-child(2) span{transition-delay:.5s;}
.cut-list.in li:nth-child(3) span{transition-delay:.65s;}
.cut-list.in li:nth-child(4) span{transition-delay:.8s;}
.cut-list.in li:nth-child(5) span{transition-delay:.95s;}
.cut-list.in li span{background-size:100% 2px;}
.cut-keep{font-family:var(--sans);font-weight:700;margin-top:34px;letter-spacing:-.035em;
  font-size:clamp(23px,2.8vw,42px);line-height:1.18;color:var(--ink);}
.cut-keep em{font-style:normal;color:var(--signal-dk);}

/* ─── Split band ────────────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  min-height:min(90vh,840px);}
.split-media{position:relative;overflow:hidden;}
.split-media img{position:absolute;inset:0;width:100%;height:114%;object-fit:cover;
  object-position:var(--pos,50% 50%);}
.split-body{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(56px,7vw,110px) clamp(28px,5vw,90px);}
.split.flip .split-media{order:2;}
.split-cap{position:absolute;z-index:3;left:clamp(18px,2vw,32px);bottom:clamp(18px,2vw,32px);
  background:rgba(246,243,239,.9);backdrop-filter:blur(8px);border-radius:100px;
  font-family:var(--serif);font-size:10.5px;text-transform:uppercase;letter-spacing:.2em;
  color:var(--ink);padding:10px 18px;}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px);
  margin-top:clamp(40px,5vw,64px);}
.stat .num{font-family:var(--sans);font-weight:700;letter-spacing:-.05em;
  font-size:clamp(42px,4.4vw,70px);line-height:1;color:var(--signal-dk);
  display:block;white-space:nowrap;}
.stat .num u{text-decoration:none;font-size:.36em;letter-spacing:.02em;
  margin-left:.14em;vertical-align:.34em;font-family:var(--sans);font-weight:400;}
.stat .lbl{font-family:var(--serif);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--mute);margin-top:14px;display:block;
  line-height:1.6;max-width:22ch;}
.stat .bar{height:1px;background:var(--line);margin-top:20px;position:relative;}
.stat .bar::after{content:'';position:absolute;inset:0;background:var(--signal);
  transform:scaleX(0);transform-origin:left;transition:transform 1.3s var(--e-out) .3s;}
.stats.in .stat .bar::after{transform:scaleX(1);}

/* ─── Work cards ────────────────────────────────────────────────────────── */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,40px);}
.work-card{display:flex;flex-direction:column;
  transition:transform .7s var(--e-out);}
.work-card:hover{transform:translateY(-8px);}
.work-media{aspect-ratio:4/5;overflow:hidden;position:relative;
  border-radius:var(--arch);}
.work-media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);
  transition:transform 1.1s var(--e-out);}
.work-card:hover .work-media img{transform:scale(1.05);}
.work-body{padding:28px 4px 0;display:flex;flex-direction:column;flex:1;}
.work-body .who{font-family:var(--serif);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.18em;color:var(--signal-dk);margin-bottom:14px;
  min-height:1.6em;line-height:1.6;}
.work-body h3{margin-bottom:14px;}
.work-body p{font-size:15.5px;line-height:1.8;color:var(--ink-70);margin:0 0 24px;}
.work-body ul{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:11px;}
.work-body li{font-size:14.5px;color:var(--ink-70);padding-left:20px;position:relative;line-height:1.6;}
.work-body li::before{content:'';position:absolute;left:0;top:.7em;width:10px;height:1px;background:var(--signal);}
.work-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding-top:20px;border-top:1px solid var(--line);}
.work-foot .price{font-size:14.5px;font-weight:500;}
.work-foot .price small{display:block;font-family:var(--serif);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-weight:400;margin-top:4px;}

/* ─── Steps ─────────────────────────────────────────────────────────────── */
.steps{display:grid;margin-top:clamp(44px,5vw,72px);}
.step{display:grid;grid-template-columns:clamp(66px,7.5vw,124px) minmax(0,1fr) minmax(0,1.3fr);
  gap:clamp(18px,3vw,50px);align-items:start;
  padding:clamp(28px,3.4vw,46px) 0;border-top:1px solid var(--line);
  transition:background .5s;}
.step:last-child{border-bottom:1px solid var(--line);}
.step:hover{background:rgba(23,16,26,.018);}
.step .sn{font-family:var(--serif);font-size:clamp(12px,1vw,14px);letter-spacing:.2em;
  color:var(--signal-dk);padding-top:.7em;}
.step p{margin:0;font-size:16px;line-height:1.85;color:var(--ink-70);padding-top:.5em;}

/* ─── About ─────────────────────────────────────────────────────────────── */
.about-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(36px,6vw,96px);align-items:center;}
.about-photo{position:relative;}
.about-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--arch);}
.about-sig{position:absolute;right:-14px;bottom:24px;background:var(--paper);
  padding:18px 26px;border-radius:100px;box-shadow:0 12px 40px -16px rgba(23,16,26,.3);
  white-space:nowrap;}
.about-sig strong{display:block;font-family:var(--sans);font-weight:600;
  font-size:18px;letter-spacing:-.02em;line-height:1.2;}
.about-sig span{font-family:var(--serif);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.18em;color:var(--mute);display:block;margin-top:3px;}
.quote{font-family:var(--sans);font-weight:700;letter-spacing:-.035em;
  font-size:clamp(23px,2.7vw,40px);line-height:1.2;margin:0 0 28px;}
.quote em{font-style:normal;color:var(--signal-dk);}

/* ─── Guide ─────────────────────────────────────────────────────────────── */
.guide-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(36px,6vw,80px);align-items:center;}
.guide-media img{width:100%;aspect-ratio:4/5;object-fit:cover;
  object-position:var(--pos,50% 50%);border-radius:var(--arch);}
.guide-meta{font-family:var(--serif);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.18em;color:var(--mute);margin-top:22px;display:block;}

/* ─── Newsletter ────────────────────────────────────────────────────────── */
.news-box{border:1px solid var(--line);border-radius:6px;padding:clamp(36px,5vw,80px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,5vw,80px);align-items:center;background:var(--paper-hi);}
.news form{display:flex;gap:12px;flex-wrap:wrap;}
.news input[type=email]{flex:1;min-width:210px;background:var(--paper);
  border:1px solid var(--line);color:var(--ink);
  padding:18px 22px;border-radius:100px;font-family:var(--sans);font-size:15px;
  transition:border-color .35s;}
.news input[type=email]:focus{outline:none;border-color:var(--signal);}
.news input::placeholder{color:var(--mute);}
.news .small{font-size:13px;color:var(--mute);margin-top:16px;}
.news .small a{text-decoration:underline;text-underline-offset:3px;}

/* ─── Finale ────────────────────────────────────────────────────────────── */
.finale{position:relative;overflow:hidden;isolation:isolate;
  min-height:78vh;display:flex;align-items:center;text-align:center;}
.finale-media{position:absolute;inset:0;z-index:-2;}
.finale-media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);}
.finale-scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(246,243,239,.9),rgba(246,243,239,.78) 45%,rgba(246,243,239,.94));}
.finale .wrap{display:flex;flex-direction:column;align-items:center;gap:24px;}
.finale h2{max-width:15ch;}
.finale .lede{max-width:50ch;}

/* ─── Footer ────────────────────────────────────────────────────────────── */
.pfoot{background:var(--paper-lo);padding-block:clamp(56px,6vw,92px) 32px;}
.pfoot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));
  gap:clamp(32px,5vw,70px);}
.pfoot img{height:70px;width:auto;margin-bottom:22px;}
.pfoot h4{font-family:var(--serif);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.2em;color:var(--signal-dk);margin-bottom:22px;font-weight:500;}
.pfoot ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.pfoot a{color:var(--ink-70);font-size:15px;transition:color .3s;}
.pfoot a:hover{color:var(--signal-dk);}
.pfoot p{color:var(--ink-70);font-size:15px;margin:0 0 16px;}
.pfoot-tag{font-family:var(--serif);font-size:12.5px;text-transform:uppercase;
  letter-spacing:.22em;color:var(--ink);}
.pfoot-bot{margin-top:clamp(44px,5vw,70px);padding-top:26px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;
  font-size:13px;color:var(--mute);}

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .head2,.cut-grid,.about-grid,.guide-grid,.news-box{grid-template-columns:1fr;}
  .trio,.work-grid{grid-template-columns:1fr 1fr;}
  .split{grid-template-columns:1fr;min-height:0;}
  .split-media{min-height:62vh;}
  .split.flip .split-media{order:0;}
  .step{grid-template-columns:54px 1fr;}
  .step p{grid-column:2;}
  .about-photo{max-width:440px;}
  .hero{grid-template-columns:1fr;min-height:0;}
  .hero-body{padding:140px var(--gut) clamp(44px,7vw,70px);}
  .hero-media{min-height:64vh;}
  .scroll-cue{display:none;}
}
@media (max-width:860px){
  .pnav-links{position:fixed;inset:0 0 auto;top:0;padding:110px var(--gut) 46px;
    flex-direction:column;align-items:flex-start;gap:20px;
    background:rgba(246,243,239,.98);backdrop-filter:blur(20px);
    clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--e-out);}
  .pnav-links.open{clip-path:inset(0 0 0 0);}
  .pnav-links a{font-family:var(--sans);font-size:28px;font-weight:600;letter-spacing:-.03em;}
  .pnav-links a.pnav-cta{font-family:var(--sans);font-size:11.5px;margin-top:8px;}
  .burger{display:block;z-index:210;}
  .trio,.work-grid,.stats,.pfoot-grid{grid-template-columns:1fr;}
  .stats{gap:28px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;}
  html{scroll-behavior:auto;}
  .rv,.hero-fade{opacity:1!important;transform:none!important;}
  .spl .w>i,.hero-title .ln>i{transform:none!important;}
  .rv-img::after{transform:scaleY(0)!important;}
  .rv-img img{transform:none!important;}
  .cut-list li{opacity:1!important;transform:none!important;}
  .struck::after,.stat .bar::after{transform:scaleX(1)!important;}
  .cut-list li span{background-size:100% 2px!important;}
  .hero-media img{opacity:1!important;transform:scale(1.01)!important;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   v2 additions — brought in from the two reference artifacts
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* Pastel bloom family, used ONLY as blurred light behind the CTA.
     Never as fills, never on type. Signal stays the only accent that touches text. */
  --lilac:#C7C9FF; --amber:#FFCF87; --peach:#FFAE95; --pinkbloom:#FD8FE5; --mint:#B7E3DC;
  --e-quart:cubic-bezier(.77,0,.175,1);
}

/* ─── One logo, two placements ──────────────────────────────────────────── */
.brandmark{display:block;color:var(--ink);}
.brandmark svg{height:58px;width:auto;display:block;transition:height .5s var(--e-out);}
.pnav.stuck .brandmark svg{height:44px;}

/* ─── Rolling tools ─────────────────────────────────────────────────────── */
.tools{padding:clamp(56px,7vw,88px) 0;text-align:center;background:var(--paper);}
.mq{position:relative;overflow:hidden;margin-top:28px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.mq + .mq{margin-top:14px;}
.mq-row{display:flex;gap:14px;width:max-content;animation:roll 46s linear infinite;}
.mq.rev .mq-row{animation-direction:reverse;animation-duration:56s;}
.mq:hover .mq-row{animation-play-state:paused;}
@keyframes roll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.chip{display:flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:15.5px;font-weight:400;color:var(--ink-70);
  padding:12px 22px;border:1px solid var(--line);border-radius:999px;background:var(--paper-hi);
  transition:border-color .4s,color .4s,transform .5s var(--e-out);}
.chip i{width:6px;height:6px;border-radius:2px;background:var(--signal);opacity:.6;display:block;flex:none;}
.chip:hover{border-color:var(--signal);color:var(--ink);transform:translateY(-3px);}

/* ─── Animated examples ─────────────────────────────────────────────────────
   Tightened right down from the reference: the three sat ~160px apart, which
   read as three unrelated pages. They now share one band and one rule. */
.ex{background:var(--paper-hi);border-top:1px solid var(--line-soft);}
.ex-row{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(26px,3.6vw,56px);align-items:center;
  padding:clamp(34px,3.8vw,52px) 0;border-top:1px solid var(--line);}
.ex-row:first-of-type{border-top:0;}
.ex-n{font-family:var(--serif);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--signal-dk);display:block;margin-bottom:12px;}
.ex-row h3{margin-bottom:10px;}
.ex-row > div > p{font-size:15.5px;line-height:1.75;color:var(--ink-70);margin:0;max-width:40ch;}
/* The thing the reference was missing: a plain sentence saying what you're watching. */
.ex-watch{margin-top:16px;display:flex;gap:10px;align-items:flex-start;
  font-size:13.5px;line-height:1.6;color:var(--ink);background:var(--paper-lo);
  border-radius:10px;padding:12px 14px;max-width:42ch;}
.ex-watch b{font-family:var(--serif);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--signal-dk);flex:none;padding-top:2px;}

.scene{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 2px 6px rgba(23,16,26,.04),0 26px 54px -34px rgba(60,20,60,.28);
  overflow:hidden;--w:930;--h:430;aspect-ratio:calc(var(--w) / var(--h));color:var(--ink);}
.scene .stage{position:absolute;top:0;left:0;width:calc(var(--w) * 1px);height:calc(var(--h) * 1px);
  transform-origin:top left;transform:scale(var(--s,1));font-size:14px;font-family:var(--sans);}
.scene .bar{display:flex;align-items:center;gap:7px;padding:11px 16px;border-bottom:1px solid var(--line);
  background:var(--paper);}
.scene .bar b{width:9px;height:9px;border-radius:50%;background:#DCD6DF;display:block;}
.scene .bar span{margin-left:8px;font-size:12.5px;color:var(--mute);}
.scene .body{position:absolute;inset:42px 0 0 0;padding:18px;}
.cursor{position:absolute;width:19px;height:19px;z-index:9;pointer-events:none;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.28));opacity:0;}
.playing .cursor{opacity:1;}

/* scene 1 — the inbox */
.s1 .cols{display:grid;grid-template-columns:34% 1fr;gap:13px;height:100%;}
.s1 .list{display:flex;flex-direction:column;gap:8px;}
.s1 .msg{border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:#fff;
  transition:border-color .4s,background .4s;}
.s1 .msg .who{font-weight:600;font-size:13.5px;margin:0;}
.s1 .msg .pre{font-size:12.5px;color:var(--mute);margin:3px 0 0;}
.s1 .msg .tag{display:inline-block;margin-top:7px;font-size:11px;font-weight:600;padding:2px 7px;
  border-radius:4px;background:var(--paper-lo);color:var(--mute);}
.s1 .msg .tag.hot{background:#FFE0E9;color:#A8004C;}
.s1.playing .msg.sel{border-color:var(--signal);background:#FFF5F9;}
.s1 .pane{border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;}
.s1 .subj{font-weight:600;font-size:14.5px;margin:0;}
.s1 .from{font-size:12.5px;color:var(--mute);margin:2px 0 0;}
.s1 .quote{margin:11px 0 0;font-size:13px;color:var(--ink-70);line-height:1.5;}
.s1 .draft{margin-top:auto;border:1px dashed var(--line);border-radius:8px;padding:9px;background:var(--paper);}
.s1 .draft .lbl{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--signal-dk);margin:0;}
.s1 .typed{font-size:13px;line-height:1.5;color:var(--ink);margin:5px 0 0;min-height:2.4em;}
.s1 .typed span{display:inline-block;overflow:hidden;white-space:nowrap;width:0;vertical-align:bottom;}
.s1 .send{align-self:flex-end;margin-top:11px;font-size:12.5px;font-weight:500;color:#fff;
  background:var(--signal);padding:6px 15px;border-radius:999px;}
.s1.playing .typed span{animation:type 1.5s steps(38) 1.4s both;}
.s1.playing .send{animation:press 5.6s linear infinite;}
.s1.playing .cursor{animation:c1 5.6s var(--e-quart) infinite;}
@keyframes type{to{width:100%;}}
@keyframes press{0%,52%{transform:none;}56%{transform:scale(.9);}60%,100%{transform:none;}}
@keyframes c1{0%{transform:translate(60px,150px);}14%{transform:translate(84px,72px);}
  40%{transform:translate(84px,72px);}56%{transform:translate(560px,258px);}
  84%{transform:translate(560px,258px);}100%{transform:translate(60px,150px);}}

/* scene 2 — one yes, a cascade */
.s2{--h:410;}
.s2 .trig{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--line);border-radius:10px;padding:10px 13px;background:#fff;}
.s2 .trig .t{font-weight:600;font-size:14.5px;}
.s2 .yes{font-size:12.5px;font-weight:600;color:#0C5C3F;background:#D6F5E6;padding:4px 12px;border-radius:999px;}
.s2 .spine{position:relative;margin-top:14px;padding-left:24px;display:flex;flex-direction:column;gap:10px;}
.s2 .spine::before{content:'';position:absolute;left:7px;top:2px;bottom:12px;width:2px;background:var(--line);}
.s2 .spine::after{content:'';position:absolute;left:7px;top:2px;width:2px;height:0;background:var(--signal);}
.s2.playing .spine::after{animation:grow 4.6s var(--e-quart) infinite;}
@keyframes grow{0%{height:0;}55%{height:calc(100% - 12px);}92%{height:calc(100% - 12px);}100%{height:0;}}
.s2 .step2{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:10px;
  padding:10px 13px;background:#fff;position:relative;opacity:.42;transform:translateX(-6px);}
.s2 .step2 .tick{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--line);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;}
.s2 .step2 .tick svg{width:9px;height:9px;opacity:0;}
.s2 .step2 .n{font-size:13.5px;}
.s2 .step2 .ms{margin-left:auto;font-size:12px;color:var(--mute);}
.s2.playing .step2{animation:fire 4.6s var(--e-quart) infinite;animation-delay:calc(.45s + var(--n) * .42s);}
.s2.playing .step2 .tick svg{animation:tickin 4.6s var(--e-quart) infinite;animation-delay:calc(.45s + var(--n) * .42s);}
@keyframes fire{0%{opacity:.42;transform:translateX(-6px);}
  10%,88%{opacity:1;transform:none;border-color:#F3C6D9;}
  100%{opacity:.42;transform:translateX(-6px);}}
@keyframes tickin{0%{opacity:0;transform:scale(.4);}10%,88%{opacity:1;transform:none;}100%{opacity:0;}}
.s2.playing .cursor{animation:c2 4.6s var(--e-quart) infinite;}
@keyframes c2{0%{transform:translate(420px,175px);}12%{transform:translate(392px,38px);}
  30%,100%{transform:translate(392px,36px);}}

/* scene 3 — one conversation, a month of posts */
.s3 .cols{display:grid;grid-template-columns:38% 1fr;gap:13px;height:100%;}
.s3 .talk{border:1px solid var(--line);border-radius:10px;padding:11px;display:flex;
  flex-direction:column;gap:7px;background:var(--paper);}
.s3 .talk .lbl{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--signal-dk);margin:0;}
.s3 .bub{font-size:12.5px;line-height:1.45;background:#fff;border:1px solid var(--line);
  border-radius:9px;padding:7px 9px;opacity:0;transform:translateY(6px);margin:0;}
.s3.playing .bub{animation:bub 6s var(--e-quart) infinite;animation-delay:calc(var(--n) * .5s);}
@keyframes bub{0%{opacity:0;transform:translateY(6px);}8%,90%{opacity:1;transform:none;}100%{opacity:0;}}
.s3 .grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:8px;}
.s3 .post{border-radius:10px;padding:10px;font-size:11.5px;line-height:1.35;
  opacity:0;transform:scale(.86);display:flex;flex-direction:column;justify-content:space-between;}
.s3 .post .d{font-size:9.5px;opacity:.65;font-weight:600;letter-spacing:.06em;}
.s3.playing .post{animation:pop 6s var(--e-quart) infinite;animation-delay:calc(1.9s + var(--n) * .17s);}
@keyframes pop{0%{opacity:0;transform:scale(.86);}9%{opacity:1;transform:scale(1.03);}
  14%,88%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(.86);}}
.s3.playing .cursor{animation:c3 6s var(--e-quart) infinite;}
@keyframes c3{0%{transform:translate(120px,120px);}18%{transform:translate(196px,190px);}
  46%{transform:translate(470px,120px);}72%{transform:translate(660px,235px);}
  100%{transform:translate(120px,120px);}}

/* ─── Meet Jess ─────────────────────────────────────────────────────────── */
.meet{padding-block:clamp(76px,9vw,120px);border-top:1px solid var(--line-soft);}
.meet-in{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(36px,5vw,64px);align-items:center;}
.portrait{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:var(--paper-lo);}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;}
.portrait::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(222,8,102,.10),rgba(23,16,26,0) 52%);}
.meet h2{margin-top:18px;}
.meet p{margin-top:20px;font-size:16.5px;line-height:1.78;color:var(--ink-70);max-width:54ch;}
.meet .sign{margin-top:28px;font-family:var(--serif);font-weight:400;font-size:30px;color:var(--ink);}

/* ─── CTA with blooms ───────────────────────────────────────────────────── */
.cta{position:relative;overflow:hidden;padding:clamp(88px,11vw,130px) 0;text-align:center;
  background:var(--paper-hi);border-top:1px solid var(--line-soft);}
.bloom{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;}
.bloom.e{width:760px;height:520px;left:50%;margin-left:-380px;top:-30%;
  background:radial-gradient(circle,var(--pinkbloom),transparent 66%);opacity:.6;}
.bloom.f{width:620px;height:460px;left:6%;top:26%;
  background:radial-gradient(circle,var(--lilac),transparent 66%);opacity:.62;}
.bloom.g{width:600px;height:440px;right:4%;top:20%;
  background:radial-gradient(circle,var(--amber),transparent 66%);opacity:.6;}
.bloom.h{width:520px;height:400px;left:30%;bottom:-18%;
  background:radial-gradient(circle,var(--mint),transparent 68%);opacity:.5;}
.cta-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:22px;}
.cta-in h2{max-width:14ch;}
.cta-in .lede{max-width:48ch;}

/* ─── Footer, dark, one anchor at the base of a light page ──────────────── */
.foot{background:var(--ink);color:rgba(246,243,239,.72);padding:clamp(56px,7vw,74px) 0 36px;font-size:15px;}
.foot .brandmark{color:#F6F3EF;}
.foot .brandmark svg{height:124px;}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(32px,5vw,52px);padding-bottom:44px;}
.foot h5{font-family:var(--serif);font-size:11.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--amber);margin:0;}
.foot ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:11px;}
.foot a{transition:color .35s;}
.foot a:hover{color:#F6F3EF;}
.foot .tag{margin-top:16px;font-family:var(--serif);font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:#F6F3EF;}
.foot-bot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:24px;
  border-top:1px solid rgba(246,243,239,.13);font-size:13px;color:rgba(246,243,239,.5);}

@media (max-width:980px){
  .ex-row,.meet-in,.foot-in{grid-template-columns:1fr;}
  .foot-in{gap:34px;}
}
@media (max-width:720px){
  .scene{--w:560;}
  .s1{--h:360;} .s2{--h:410;} .s3{--h:400;}
  .s1 .cols,.s3 .cols{grid-template-columns:1fr;}
  .s1 .list,.s3 .talk{display:none;}
  .cursor{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .mq-row{animation:none !important;}
  .scene .cursor{display:none;}
  .s1 .typed span{width:100% !important;}
  .s2 .step2{opacity:1 !important;transform:none !important;}
  .s3 .bub,.s3 .post{opacity:1 !important;transform:none !important;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Ink sections
   Black as punctuation, not as the ground. The problem (struck Mute on Ink is
   the brand's whole argument) and the examples (white UI reads far better
   against it), plus the sticky nav. Everything inside flips its own tokens.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{ --signal-lt:#FF5C9B; }   /* Signal as small text on Ink */

.band-ink{
  background:#17101A;           /* a literal: custom props resolve after the rule */
  color:rgba(246,243,239,.78);
  --ink:#F6F3EF;
  --ink-70:rgba(246,243,239,.74);
  --ink-55:rgba(246,243,239,.55);
  --line:rgba(246,243,239,.16);
  --line-soft:rgba(246,243,239,.09);
  --paper:#17101A;
  --paper-hi:#211823;
  --paper-lo:#2C2130;
  --signal-dk:var(--signal-lt); /* the light-ground accent is unreadable here */
  --mute:#9A929C;               /* Mute's on-Ink value */
}
.band-ink .eyebrow{color:var(--signal-lt);}
.band-ink .eyebrow.quiet{color:#9A929C;}
.band-ink h1,.band-ink h2,.band-ink h3{color:#F6F3EF;}
.band-ink .cut-keep{color:#F6F3EF;}
.band-ink .btn{background:#F6F3EF;border-color:#F6F3EF;color:#17101A;}
.band-ink .btn::before{background:var(--signal);}
.band-ink .btn:hover{color:#fff;border-color:var(--signal);}
.band-ink .txtlink{color:#F6F3EF;}

/* The scenes keep their white chrome: that contrast is the point of them. */
.band-ink .scene{background:#fff;border-color:rgba(246,243,239,.18);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.55);}
.band-ink .scene .bar{background:#F6F3EF;border-bottom-color:rgba(23,16,26,.12);}
.band-ink .scene .bar span,.band-ink .scene .stage,.band-ink .scene .body{color:#17101A;}
.band-ink .scene .msg,.band-ink .scene .pane,.band-ink .scene .trig,
.band-ink .scene .step2,.band-ink .scene .bub{border-color:rgba(23,16,26,.13);}
.band-ink .scene .msg .pre,.band-ink .scene .from,.band-ink .scene .ms{color:#6B636D;}
.band-ink .scene .quote{color:rgba(23,16,26,.72);font-family:var(--sans);font-weight:400;
  font-size:13px;letter-spacing:0;margin:11px 0 0;}
.band-ink .scene .draft{background:#F6F3EF;border-color:rgba(23,16,26,.16);}
.band-ink .scene .talk{background:#F6F3EF;}
.band-ink .scene .spine::before{background:rgba(23,16,26,.13);}
.band-ink .scene .step2 .tick{border-color:rgba(23,16,26,.18);}
.band-ink .ex-watch{background:rgba(246,243,239,.07);color:#F6F3EF;}
.band-ink .ex-row > div > p{color:rgba(246,243,239,.72);}
.band-ink.ex{background:#17101A;border-top-color:rgba(246,243,239,.12);}

/* Sticky nav goes Ink, so the black reads from the first scroll. */
.pnav.stuck{background:rgba(23,16,26,.92);border-bottom-color:rgba(246,243,239,.12);}
.pnav.stuck .pnav-links a{color:rgba(246,243,239,.86);}
.pnav.stuck .pnav-links a:hover{color:#F6F3EF;}
.pnav.stuck .brandmark{color:#F6F3EF;}
.pnav.stuck .burger span{background:#F6F3EF;}
.pnav.stuck .pnav-links a.pnav-cta{background:#F6F3EF;color:#17101A;}
.pnav.stuck .pnav-links a.pnav-cta:hover{background:var(--signal);color:#fff;}

/* ═══════════════════════════════════════════════════════════════════════════
   "Mix" — the amalgamation
   Base is V2 with the brand fonts (nav, split hero, beige band, marquee chips).
   On top of that: rectangles instead of arches, the Haute treatment for the
   examples and the Friday band, the dark version's framed cards and Jess block,
   and three deliberate Ink sections.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Rectangles, not arches, wherever a photo appears ──────────────────── */
.arch{border-radius:0;}
.trio-item .tfig img,
.work-media,
.guide-media img,
.about-photo img{border-radius:0;}
.work-media{border-radius:0;}

/* ─── "Pick your pace" on Ink: the framed cards from the dark version ───── */
.band-ink .work-grid{gap:clamp(18px,2vw,30px);}
.band-ink .work-card{
  border:1px solid rgba(246,243,239,.13);
  background:#17101A;
  transition:transform .7s var(--e-out),border-color .5s,background .5s;}
.band-ink .work-card:hover{
  transform:translateY(-10px);
  border-color:rgba(222,8,102,.55);
  background:#211823;}
.band-ink .work-media{aspect-ratio:4/3;position:relative;}
.band-ink .work-media img{filter:saturate(.82) brightness(.94);
  transition:transform 1.1s var(--e-out),filter .8s;}
.band-ink .work-card:hover .work-media img{filter:saturate(1) brightness(1);}
/* The number rides the corner of the photograph, as it did on the dark cut. */
.band-ink .work-media .px{position:absolute;top:0;left:0;background:var(--signal);color:#fff;
  font-family:var(--serif);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding:10px 18px;z-index:2;}
.band-ink .work-body{padding:clamp(24px,2.4vw,34px);}
.band-ink .work-body h3{color:#F6F3EF;}
.band-ink .work-body p,.band-ink .work-body li{color:rgba(246,243,239,.68);}
.band-ink .work-foot{border-top-color:rgba(246,243,239,.13);}
.band-ink .work-foot .price{color:#F6F3EF;}
.band-ink .work-foot .price small{color:#9A929C;}
.band-ink .txtlink{color:#F6F3EF;}

/* ─── About Jess: the dark version's block, on Paper ────────────────────── */
.about-sig{position:absolute;right:-16px;bottom:-18px;
  background:var(--signal);color:#fff;padding:20px 28px;border-radius:0;
  box-shadow:none;white-space:nowrap;}
.about-sig strong{display:block;font-family:var(--sans);font-weight:600;
  font-size:19px;letter-spacing:-.02em;line-height:1.2;color:#fff;}
.about-sig span{font-family:var(--serif);font-size:11px;text-transform:uppercase;
  letter-spacing:.17em;opacity:.92;display:block;margin-top:5px;color:#fff;}

/* ─── Bold headings throughout ──────────────────────────────────────────── */
.trio-item h3{font-weight:700;letter-spacing:-.03em;}
.guide h2,.finale h2{font-weight:700;}

@media (max-width:860px){
  .about-sig{right:auto;left:0;bottom:-14px;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mix 2 — colour balance
   Same parts, re-ordered so no two Ink blocks touch, plus a few tonal moves
   that stop the page reading as light-then-dark-then-light in three big slabs.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The three Ink sections are the same ground, but they are doing different
   jobs, so each gets a different amount of air. The problem is the loudest and
   sits tightest; the offer is the longest and gets the most room. */
.band-ink{padding-block:clamp(84px,10vw,150px);}
.band-ink.ex{padding-block:clamp(76px,9vw,130px);}
.band-ink#work{padding-block:clamp(92px,11vw,168px);}

/* A hairline of Signal where a light section meets a dark one, so the joins
   read as deliberate rather than as two pages stitched together. */
.band-ink{border-top:3px solid var(--signal);}
.band-ink + .split .split-body{border-top:3px solid var(--signal);}

/* The Friday band is the bridge out of the first black, so its Paper half is
   the lighter step rather than the mid beige. */
.split-body{background:var(--paper-hi);}

/* Beige bookends: "I take" opens the middle, the guide closes it. Nudge the
   guide a shade warmer so the two are related but not identical. */
.guide.band-lo{background:#EAE0D6;}

/* Pink earns one full-strength moment per screen rather than only ever being a
   3px accent: the numbers on the Friday band carry it at scale. */
.split-body .stat .num{color:var(--signal);}
.split-body .stat .bar::after{background:var(--signal);}

/* On Ink, the struck list is the brand's argument, so give it more presence
   than the body copy around it. */
.band-ink .cut-list li{font-size:clamp(22px,2.5vw,38px);}

/* ─── Logo pair: F inline in the nav, E stacked in the footer ───────────── */
/* Both are one artwork each, drawn in currentColor, so the colour comes from
   whatever ground they sit on. */
.pnav-logo{display:block;color:var(--ink);}
.mark-h{height:42px;width:auto;display:block;transition:height .5s var(--e-out);}
.pnav.stuck .mark-h{height:34px;}
.pfoot .mark-stacked{height:104px;width:auto;display:block;color:var(--ink);margin-bottom:18px;}
@media (max-width:600px){ .mark-h{height:34px;} }

/* ─── "3 jobs" moves onto Paper ─────────────────────────────────────────── */
/* The scene cards are white, so on a light ground they need a real edge and a
   cast shadow or they dissolve into the page. */
.section.ex{background:var(--paper);border-top:1px solid var(--line);}
.section.ex .scene{border:1px solid rgba(23,16,26,.16);
  box-shadow:0 3px 8px rgba(23,16,26,.05),0 28px 56px -30px rgba(60,20,60,.34);}
.section.ex .ex-watch{background:var(--paper-lo);}

/* ─── About Jess: black and light, meeting down the middle ──────────────── */
.jess-section{padding-block:clamp(80px,10vw,150px);background:var(--paper);}
/* A hairline of Ink closes the two halves into one object. Without it the light
   side has no right edge and the band reads as two unrelated panels. */
.jess-band{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  border:1px solid var(--ink);overflow:hidden;}
.jess-ink{background:#17101A;display:flex;align-items:center;justify-content:flex-end;
  padding:clamp(56px,7vw,110px) clamp(26px,3.6vw,64px);}
.jess-lite{background:var(--paper);display:flex;align-items:center;
  padding:clamp(56px,7vw,110px) clamp(26px,3.6vw,64px);}
.jess-ink .about-photo{width:100%;max-width:430px;position:relative;}
.jess-lite > div{max-width:560px;}
/* On Ink the signature block reads as light-on-dark, so it keeps its Signal fill
   but gains a little breathing room from the photograph's edge. */
.jess-band .about-sig{right:-14px;bottom:-16px;}
.jess-band .quote{margin-bottom:24px;}
@media (max-width:1080px){
  .jess-band{grid-template-columns:1fr;}
  .jess-section{padding-block:clamp(56px,8vw,90px);}
  .jess-ink{justify-content:center;padding-block:clamp(48px,7vw,80px);}
  .jess-ink .about-photo{max-width:380px;}
  .jess-lite{padding-top:clamp(40px,6vw,64px);}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MIX 3 — the current edit of Mix 2
   Everything above is Mix 2 untouched. Everything below is the edit, kept in
   one block so the two are easy to tell apart and easy to unpick.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. No strikethrough, anywhere ──────────────────────────────────────────
   The hero rule and the cut-list rule both come off. The cut list can't be
   left as a plain grey list though: without the rule it reads as a list of
   recommendations rather than a list of things to ignore. A Mute cross carries
   the same meaning without drawing a line through the words. */
.struck::after{display:none;}
.struck{color:inherit;white-space:normal;}
.cut-list li span{background-image:none;}
.cut-list li{display:flex;align-items:baseline;gap:.55em;}
.cut-list li::before{content:'\00D7';flex:none;color:var(--mute);
  font-weight:400;font-size:.72em;line-height:1;opacity:.75;}

/* ── 2. Hero video, in place of the still ──────────────────────────────── */
.hero-media video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--pos,50% 50%);
  transform:scale(1.16);opacity:0;
  animation:heroIn 2.4s var(--e-out) .15s forwards;}

/* ── 3. Intro band: the quote carried over from the existing site ──────── */
.intro-band{background:var(--paper-lo);padding-block:clamp(58px,7vw,104px);}
.intro-band p{
  max-width:30ch;margin:0 auto;text-align:center;
  font-family:var(--sans);font-weight:600;
  font-size:clamp(22px,2.5vw,38px);line-height:1.3;letter-spacing:-.03em;
  color:var(--ink);}
.intro-band p span{color:var(--signal-dk);}

/* ── 4. Merged "what you get back" + Example 01 ────────────────────────────
   The split band and the example now read as one unit, so the example loses
   its own top padding and its top border. */
.ex.merged{padding-top:clamp(44px,5vw,76px);border-top:0;}

/* ── 5. Newsletter, on Signal ──────────────────────────────────────────────
   The pink band from the existing site. Signal is a fill here, which is what
   it is for, and everything on it goes to white for contrast. */
.news.pink{background:var(--signal);}
.news.pink .news-box{border:0;padding:0;background:transparent;}
.news.pink .eyebrow{color:rgba(255,255,255,.9);}
.news.pink h2{color:#fff;}
.news.pink .body,.news.pink p{color:rgba(255,255,255,.94);}
.news.pink input[type=email]{background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.5);color:#fff;}
.news.pink input::placeholder{color:rgba(255,255,255,.7);}
.news.pink input[type=email]:focus{border-color:#fff;
  background:rgba(255,255,255,.2);}
.news.pink .btn{background:#fff;border-color:#fff;color:var(--signal);}
.news.pink .btn::before{background:var(--ink);}
.news.pink .btn:hover{color:#fff;border-color:var(--ink);}
.news.pink .small{color:rgba(255,255,255,.82);}
.news.pink .small a{color:#fff;}

/* ── 6. Footer: tagline aligned to the start of the logo's rule ────────────
   The stacked mark is a 460×148 viewBox and its Signal rule starts at x=88,
   so the offset is height × 88/148. Tied to one custom property so changing
   the logo height keeps the alignment. */
.pfoot{--markh:104px;}
.pfoot .mark-stacked{height:var(--markh);}
.pfoot .brand-align{padding-left:calc(var(--markh) * 88 / 148);}
@media (max-width:760px){ .pfoot{--markh:84px;} }

/* ── 7. Ways to work with me: no pricing, so the card foot is just the link */
.work-foot{justify-content:flex-end;}

/* ── 8. Small print ────────────────────────────────────────────────────── */
.pfoot-bot a{font-size:13px;}

/* ── 9. Finale on Urban ───────────────────────────────────────────────────
   Urban is a pale, hazy skyline. Under Mix 2's 0.9-opacity paper scrim it
   vanished completely, so the scrim comes back to the point where the city is
   still legible and Ink type still clears contrast on top of it. */
.finale-media img{filter:contrast(1.07) saturate(1.04);}
.finale-scrim{background:linear-gradient(180deg,
  rgba(246,243,239,.70),rgba(246,243,239,.52) 45%,rgba(246,243,239,.84));}

/* ═══ TWEAKS ══════════════════════════════════════════════════════════════ */

/* ── 10. "Pick 3 things" in pink ───────────────────────────────────────────
   On Ink, pink type has to be Signal Light. DE0866 on this ground is too dark
   to read as an accent, it just goes muddy. */
.band-ink .cut-keep{color:var(--signal-lt);}

/* ── 11. One pink rule, right across, between the problem and what you get
   back. Was only drawn under the text half of the split. */
.band-ink + .split{border-top:3px solid var(--signal);}
.band-ink + .split .split-body{border-top:0;}

/* ── 12. "See it working" now sits inside the left column of the split ─────
   The stage is a fixed-width canvas scaled by JS to whatever it is given, so
   in a half-width column it needs a narrower canvas or the chrome renders too
   small to read. */
.ex-inline{margin-top:clamp(32px,3.6vw,48px);padding-top:clamp(26px,3vw,38px);
  border-top:1px solid var(--line);max-width:none;}
.ex-inline .ex-n{display:block;font-family:var(--serif);font-size:11px;
  text-transform:uppercase;letter-spacing:.2em;color:var(--signal-dk);margin-bottom:14px;}
.ex-inline h3{margin-bottom:10px;}
.ex-inline > p{margin:0 0 22px;font-size:15.5px;line-height:1.75;color:var(--ink-70);
  max-width:44ch;}
.ex-inline .scene{--w:930;--h:430;}

/* ── 13. The process, laid out as it is on the existing site ───────────────
   Four columns divided by hairlines, with the big Signal numerals. Values are
   the existing site's, carried over unchanged. */
.process-strip-header{margin-bottom:56px;}
.process-strip-header h2{max-width:14ch;}
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.process-step{padding:34px;border-right:1px solid rgba(23,16,26,.16);position:relative;}
.process-step:last-child{border-right:none;}
.process-step:first-child{padding-left:0;}
.process-num{font-family:var(--sans);font-size:48px;font-weight:700;
  letter-spacing:-.04em;color:var(--signal);opacity:.6;line-height:1;margin-bottom:20px;}
.process-step h4{font-family:var(--sans);font-size:20px;font-weight:700;
  letter-spacing:-.022em;color:var(--ink);margin:0 0 10px;}
.process-step p{font-size:15px;font-weight:400;color:rgba(23,16,26,.7);
  line-height:1.7;margin:0;}
@media (max-width:900px){
  .process-steps{grid-template-columns:1fr 1fr;}
  .process-step{border-bottom:1px solid rgba(23,16,26,.16);}
  .process-step:nth-child(2n){border-right:none;}
}
@media (max-width:600px){
  .process-steps{grid-template-columns:1fr;}
  .process-step{border-right:none;padding-left:0;padding-right:0;}
}

/* ── 14. Finale: let Urban actually show ──────────────────────────────────
   Urban is a pale, hazy skyline, so the paper scrim was erasing it. The wash
   is now light enough to read as a photograph, and the type stays Ink, which
   still clears contrast against a picture this light. */
.finale-media img{filter:contrast(1.24) saturate(1.14) brightness(.97);}
.finale-scrim{background:linear-gradient(180deg,
  rgba(246,243,239,.46),rgba(246,243,239,.20) 42%,rgba(246,243,239,.60));}