/* ============================================================
   sweetslips — design system
   Palette: bone & ember
   ============================================================ */
:root{
  /* Dark roast — the same family as the light palette, one step further into
     the bake. Both themes now come off the one fortune-cookie photograph:
     #DBCDB2 sand  #3D2814 chocolate  #6F481E brown  #906938 caramel
     #A78258 tan   #B09F84 greige     #D9B687 wheat  */
  --base:#211407;
  --bg:#2E1D0C;
  --surface:#45301A;
  --text:#F0E3CC;
  --muted:#C4A87F;
  --line:#8A6739;
  --line-soft:#45301A;
  --accent:#D9B687;
  --accent-soft:#6F481E;
  --ink:#211407;
  --gradient:linear-gradient(36.97deg,#F5EAD6 10.09%,#D9B687 82%,#906938 140%);
  --nav-h:84px;
  --ease:cubic-bezier(.075,.82,.165,1);
  --container:1440px;
  --gutter:16px;
  /* rgb triplets so scrims and washes can be themed */
  --scrim:33,20,7;
  --text-rgb:240,227,204;
  --cookie-edge:transparent;
  --cookie-edge-w:0;
  --btn-deep:#150C03; --ink-on-deep:#F0E3CC;
  --on-gradient:#211407; --on-gradient-rgb:33,20,7;
  --glow-top-1:#4A3116; --glow-top-2:#2E1D0C;
  --glow-bot-1:#3E2911; --glow-bot-2:#211407;
}


@media (min-width:768px){ :root{ --gutter:48px; } }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

body{
  background:var(--bg);
  color:var(--text);
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:400;font-size:16px;line-height:1.4;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button,input,textarea{font:inherit;color:inherit}
::selection{background:var(--accent);color:var(--ink)}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- type ---------- */
h1,h2,h3,h4,.title,.h1,.h2,.h4{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;letter-spacing:-.025em}
.title,.h1{font-size:clamp(27px,6.2vw,50px);line-height:1;letter-spacing:-.02em}
/* Display type is balanced rather than left to fill-and-orphan. The hero ran
   794 / 554 / 298 px across three lines, so "everywhere." sat alone on the
   last one; balanced it runs 495 / 578 / 573. The sub-heading was worse in
   proportion — 405 / 149. This is also why the copy does not have to be
   hand-fitted to a particular container width any more. */
.h2{font-size:clamp(32px,7vw,80px);line-height:1;letter-spacing:-.02em;text-wrap:balance}
.h4{font-size:clamp(26px,5.4vw,45px);line-height:1.3;letter-spacing:-.02em;text-wrap:balance}
.body-m-140{font-size:16px;font-weight:300;line-height:1.4;letter-spacing:.01em}
.text-muted{color:var(--muted)}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* slip type — the printed-fortune voice */
.slip{font-family:Georgia,"Times New Roman",serif;font-style:italic;line-height:1.35;color:var(--text)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 20px;
  border-radius:100px;border:1px solid transparent;
  background:var(--text);color:var(--ink);
  font-size:16px;font-weight:400;line-height:1;white-space:nowrap;cursor:pointer;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.btn svg{flex:none}
.btn:hover{background:#fff;color:var(--ink)}
.btn--outline{background:transparent;border-color:var(--line);color:var(--text)}
.btn--outline:hover{background:rgba(var(--text-rgb),.08);color:var(--text);border-color:var(--text)}
.btn--ember{background:var(--ink);color:var(--text)}
.btn--ember:hover{background:var(--btn-deep);color:var(--ink-on-deep)}
.btn--ghost{background:rgba(var(--scrim),.65);border:0;color:var(--text)}
.btn--dark{background:var(--ink);color:var(--text)}
.btn--dark:hover{background:var(--btn-deep);color:var(--ink-on-deep)}
.btn--lg{height:52px;padding:0 28px;font-size:18px}

/* ---------- skip link ---------- */
.skip-link{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;left:50%;translate:-50% 0;top:12px;z-index:200;
  width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;
  background:var(--text);color:var(--ink);padding:10px 18px;border-radius:100px;font-size:14px}

/* ---------- background ---------- */
.underlay{position:fixed;inset:0;z-index:-10;background:var(--base);pointer-events:none}
.underlay::before,.underlay::after{content:"";position:absolute;left:0;right:0;height:74vh}
.underlay::before{top:0;background:radial-gradient(120% 92% at 50% 0%,var(--glow-top-1) 0%,var(--glow-top-2) 44%,transparent 74%)}
.underlay::after{bottom:0;background:radial-gradient(120% 92% at 50% 100%,var(--glow-bot-1) 0%,var(--glow-bot-2) 46%,transparent 76%)}
.grain{position:fixed;inset:0;z-index:-9;pointer-events:none;opacity:.2;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.5'/></svg>")}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{position:fixed;inset:0 0 auto;z-index:120;height:var(--nav-h);display:flex;align-items:center;
  transition:background .4s var(--ease),backdrop-filter .4s var(--ease)}
.site-header.is-stuck{background:rgba(var(--scrim),.78);backdrop-filter:blur(14px)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;letter-spacing:-.02em;font-size:21px;
  letter-spacing:-.02em;color:var(--text)}
.brand svg{width:23px;height:21px;color:var(--text)}
.nav{display:none}
.nav ul{display:flex;align-items:center;gap:28px}
.nav a{font-size:15px;font-weight:300;position:relative;padding:4px 0;opacity:.92;transition:opacity .3s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav a:hover{opacity:1}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

.nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  align-items:flex-end;background:none;border:0;cursor:pointer}
.nav-toggle span{display:block;height:1.5px;width:24px;background:var(--text);border-radius:2px;
  transition:transform .4s var(--ease),width .4s var(--ease)}
.nav-toggle span:last-child{width:16px}
.header-cta{display:none}
@media (min-width:1024px){
  .nav{display:flex}
  .nav-toggle{display:none}
  .header-cta{display:inline-flex}
}
body.menu-open .nav-toggle span:first-child{transform:translateY(6.5px) rotate(45deg)}
body.menu-open .nav-toggle span:last-child{transform:translateY(-6.5px) rotate(-45deg);width:24px}

.mobile-menu{position:fixed;inset:0;z-index:110;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;padding:var(--nav-h) var(--gutter) 40px;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);pointer-events:none}
body.menu-open .mobile-menu{clip-path:inset(0 0 0 0);pointer-events:auto}
.mobile-menu ul{display:flex;flex-direction:column;gap:8px}
.mobile-menu a{font-family:"Plus Jakarta Sans",sans-serif;font-size:clamp(30px,9vw,46px);line-height:1.25;letter-spacing:-.02em;
  opacity:0;transform:translateY(20px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
body.menu-open .mobile-menu a{opacity:1;transform:none}
body.menu-open .mobile-menu li:nth-child(1) a{transition-delay:.14s}
body.menu-open .mobile-menu li:nth-child(2) a{transition-delay:.2s}
body.menu-open .mobile-menu li:nth-child(3) a{transition-delay:.26s}
body.menu-open .mobile-menu li:nth-child(4) a{transition-delay:.32s}
body.menu-open .mobile-menu li:nth-child(5) a{transition-delay:.38s}

/* ============================================================
   HERO
   ============================================================ */
/* 300vh put ~2,300px of decorative sequence between the visitor and the
   first real sentence. 200vh halves that and the scrubbed timeline just
   plays over a shorter distance. */
.home-hero{position:relative;width:100%;height:200vh}
.hero-pin{position:sticky;top:0;height:100vh;height:100svh;width:100%;overflow:hidden;
  display:flex;align-items:center;justify-content:center}

.hero-frame{position:absolute;border:1px solid var(--line);border-radius:48px;pointer-events:none;
  left:50%;top:50%;translate:-50% -50%;height:56vh;opacity:0;
  /* Never narrower than the 820px text column it frames, never wider than the screen. */
  width:min(calc(100vw - 24px),900px)}
.hero-frame--b{width:min(calc(100vw - 6px),1100px);height:70vh;border-radius:56px}

.hero-title-wrap{position:relative;z-index:10;text-align:center;padding-inline:32px;width:100%;
  display:flex;flex-direction:column;align-items:center}
.hero-title{max-width:820px;margin-inline:auto;text-wrap:balance}
/* will-change is promised only while the chars are actually moving. Left on,
   58 of them hold 58 GPU layers for the life of the page, which costs memory
   on a phone and buys nothing once the intro has landed — home.js clears it
   when the intro completes. */
.hero-title .char{display:inline-block;opacity:0;will-change:transform,opacity}
.hero-title.is-settled .char{will-change:auto}
.hero-title .word{white-space:nowrap;display:inline-block}
.hero-sub{margin-top:24px;max-width:440px;opacity:.9;text-wrap:balance}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:40px}
@media (min-width:768px){.hero-actions{gap:24px}}

/* wish marquee */
.marquee{position:absolute;left:0;right:0;bottom:56px;z-index:6;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;width:max-content;align-items:center;animation:marquee 60s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee .slip{font-size:16px;color:var(--muted);white-space:nowrap;padding-inline:28px;transition:color .4s}
@media (min-width:768px){.marquee .slip{font-size:19px;padding-inline:40px}}
.marquee .slip:hover{color:var(--text)}
.marquee .sep{flex:none;width:15px;height:14px;color:var(--muted);opacity:.5}

/* stage two: drifting wall of wishes */
.hero-grid{position:absolute;inset:0;z-index:2;overflow:hidden;opacity:0;visibility:hidden}
.grid-wrapper{position:absolute;left:50%;top:50%;translate:-50% -50%;
  display:flex;flex-direction:column;gap:24px;width:auto}
.grid-row{display:flex;gap:24px;will-change:transform}
.tile{flex:none;width:236px;height:236px;border:1px solid var(--line);border-radius:28px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  padding:22px;background:rgba(var(--text-rgb),.015)}
@media (min-width:768px){.tile{width:300px;height:300px;border-radius:32px;padding:30px;gap:11px}}

/* The two pieces of the unit: the fortune, and the sponsor strip that
   finishes it. Both are printed paper, so both sit on white by default. */
.paper{width:100%;border-radius:2px;padding:11px 12px;text-align:center;
  box-shadow:0 6px 16px rgba(0,0,0,.34)}
@media (min-width:768px){.paper{padding:13px 14px}}
.paper--fortune{background:#F4F2ED;color:#15130F}
.paper--fortune p{font-family:"Plus Jakarta Sans",sans-serif;font-weight:400;font-size:11.5px;line-height:1.35}
.paper__nums{display:block;margin-top:6px;font-size:8.5px;letter-spacing:.06em;color:#5C5850}
@media (min-width:768px){
  .paper--fortune p{font-size:13px}
  .paper__nums{font-size:9.5px;margin-top:7px}
}
.paper--ad{background:var(--ad-bg);color:var(--ad-fg);
  display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left}
.paper--ad .qr{flex:none;opacity:.85;color:var(--ad-fg)}
.paper__tag{font-family:"Plus Jakarta Sans",sans-serif;font-weight:400;font-size:11px;line-height:1.25;flex:1;min-width:0}
@media (min-width:768px){.paper__tag{font-size:12.5px}}
.paper__id{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex:none;text-align:right}
.paper__id b{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:12px;letter-spacing:-.01em;line-height:1.1}
.paper__id em{font-style:normal;font-size:7.5px;letter-spacing:.02em;opacity:.8;line-height:1.1}
@media (min-width:768px){.paper__id b{font-size:14px}.paper__id em{font-size:8.5px}}

.hero-grid__copy{position:absolute;z-index:10;left:50%;top:68%;translate:-50% -50%;width:100%;max-width:290px}
@media (min-width:1024px){.hero-grid__copy{left:55%;top:50%;translate:0 -50%;max-width:380px}}
.hero-grid__copy p{font-size:clamp(18px,1.8vw,22px);font-weight:300;line-height:1.3}
.hero-grid__copy .actions{display:flex;align-items:center;gap:24px;margin-top:32px}
.hero-grid__note{display:block;margin-top:10px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);opacity:.6}
.hero-grid::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(46% 62% at 62% 50%,rgba(var(--scrim),.92) 0%,rgba(var(--scrim),.6) 55%,transparent 100%),
    radial-gradient(120% 96% at 50% 50%,transparent 34%,rgba(var(--scrim),.68) 76%,var(--base) 100%)}
@media (max-width:1023px){
  /* Copy is centred rather than side-anchored below 1024, so centre what sits
     under it too, and darken the wall enough to read against. */
  .hero-grid__copy{text-align:center;max-width:340px;padding-inline:20px}
  .hero-grid__copy .actions{justify-content:center}
  .hero-grid::after{
    background:
      radial-gradient(70% 34% at 50% 68%,rgba(var(--scrim),.94) 0%,rgba(var(--scrim),.7) 60%,transparent 100%),
      linear-gradient(180deg,rgba(var(--scrim),.55) 0%,rgba(var(--scrim),.2) 22%,rgba(var(--scrim),.9) 62%,var(--base) 100%)}
}

.keep-scrolling{position:absolute;left:50%;translate:-50% 0;bottom:29px;z-index:12;opacity:0;pointer-events:none}
.scroll-cue{display:inline-flex;align-items:center;gap:8px}
.scroll-cue svg{animation:bob 1.8s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{position:relative;width:100%;padding:96px 0}
@media (min-width:768px){.section{padding:150px 0}}
.section--tight{padding:72px 0}
.section__head{max-width:760px;margin-bottom:64px}
.section__head.is-centered{margin-inline:auto;text-align:center}
.section__head h2{margin-bottom:20px;line-height:1.25}
.section__head p{color:var(--muted);font-size:clamp(16px,1.6vw,19px);max-width:560px}
.section__head.is-centered p{margin-inline:auto}
.section__head .eyebrow{margin-bottom:20px}

/* ---------- why it works ---------- */
.reasons{display:grid;gap:16px}
@media (min-width:768px){.reasons{grid-template-columns:repeat(2,1fr);gap:24px}}
.reason{position:relative;border:1px solid var(--line);border-radius:32px;padding:32px;
  display:flex;flex-direction:column;gap:16px;overflow:hidden;
  transition:border-color .5s var(--ease),transform .5s var(--ease)}
@media (min-width:768px){.reason{padding:40px}}
.reason:hover{border-color:var(--text);transform:translateY(-3px)}
.reason__n{font-family:"Plus Jakarta Sans",sans-serif;font-size:14px;letter-spacing:.14em;color:var(--accent)}
.reason h3{font-size:clamp(22px,2.4vw,30px);line-height:1.2;letter-spacing:-.01em}
.reason p{color:var(--muted);font-size:16px;line-height:1.55;max-width:46ch}

/* ---------- formats ---------- */
.formats{display:grid;gap:16px}
@media (min-width:768px){.formats{grid-template-columns:repeat(2,1fr);gap:24px}}
@media (min-width:1200px){.formats{grid-template-columns:repeat(3,1fr)}}
.formats > li{display:flex}
.format{flex:1;position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:16px;
  border:1px solid var(--line);border-radius:32px;padding:28px;min-height:248px;overflow:hidden;
  transition:border-color .5s var(--ease),transform .5s var(--ease)}
.format__bg{position:absolute;inset:0;background-image:var(--gradient);opacity:0;
  transition:opacity .5s var(--ease)}
.format > *:not(.format__bg){position:relative;z-index:1}
.format .meta{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  transition:color .5s var(--ease)}
.format h3{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:25px;line-height:1.2;letter-spacing:-.025em;margin-top:12px;
  transition:color .5s var(--ease)}
.format p{color:var(--muted);font-size:15px;line-height:1.55;transition:color .5s var(--ease)}
.format .know{display:inline-flex;align-items:center;gap:6px;font-size:15px;margin-top:20px;
  transition:color .5s var(--ease)}
.format .know svg{color:var(--accent);transition:color .5s var(--ease)}
.format:hover{border-color:rgba(var(--on-gradient-rgb),.22);transform:translateY(-4px)}
.format:focus-visible{border-color:rgba(var(--on-gradient-rgb),.34);transform:translateY(-4px)}
.format:hover .format__bg,.format:focus-visible .format__bg{opacity:1}
.format:hover .meta,.format:hover h3,.format:hover p,.format:hover .know,.format:hover .know svg,
.format:focus-visible .meta,.format:focus-visible h3,.format:focus-visible p,
.format:focus-visible .know,.format:focus-visible .know svg{color:var(--on-gradient)}

/* A photograph in the wall, sized like a slip tile so the two intermix.

   Doubled up as `.tile.tile--photo` on purpose. A single class ties with the
   plain `.tile` rules on specificity, so whichever is written later wins —
   and the phone breakpoint further down sets padding:13px, which used to
   inset the picture and leave a band of tile background around it with the
   image's own square corners showing inside the tile's rounded ones. Two
   classes beat one at every breakpoint, whatever the source order.

   The radius is inherited by the image rather than left to overflow:hidden
   alone: the wall is GPU-transformed (GSAP scales it 1.45 -> 1), and WebKit
   is unreliable about clipping to a rounded box inside a transformed
   ancestor. Cheap insurance against hairline square corners on iOS. */
.tile.tile--photo{padding:0;overflow:hidden;position:relative;display:block}
.tile.tile--photo img{width:100%;height:100%;object-fit:cover;display:block;
  border-radius:inherit}
.tile__credit{position:absolute;left:8px;bottom:7px;font-size:9px;letter-spacing:.05em;
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);opacity:.85}

/* --- case studies -------------------------------------------------------- */
.cases{list-style:none;margin:0;padding:0;display:grid;gap:20px}
@media (min-width:900px){.cases{grid-template-columns:repeat(2,1fr);gap:24px}}

.case{border:1px solid var(--line);border-radius:28px;padding:30px 28px;
  display:flex;flex-direction:column;gap:14px}
.case__head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.case__brand{font-weight:800;font-size:19px;letter-spacing:-.02em}
.case__where{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.case__title{font-weight:700;font-size:clamp(20px,2.2vw,25px);line-height:1.22;letter-spacing:-.025em;margin:0}
.case__body{color:var(--muted);font-size:15.5px;line-height:1.55;margin:0}

.case__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0 0;
  padding-top:18px;border-top:1px solid var(--line-soft)}
.case__stats dt{font-weight:800;font-size:clamp(19px,2.2vw,24px);line-height:1.05;
  letter-spacing:-.03em;color:var(--accent)}
.case__stats dd{margin:6px 0 0;font-size:12.5px;line-height:1.35;color:var(--muted)}

/* whoever actually ran it — never us, and never hidden */
.case__by{margin:2px 0 0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);opacity:.8}

.cases__note{margin-top:26px;font-size:14px;line-height:1.6;color:var(--muted);max-width:70ch}
.cases__note a{color:var(--text);text-decoration:underline;text-underline-offset:3px}

@media (max-width:520px){
  .case{padding:24px 20px;border-radius:24px}
  .case__stats{grid-template-columns:1fr 1fr;gap:12px}
}

/* ---------- the unit: a slip you can look at ---------- */
.unit{display:grid;gap:48px;align-items:center}
@media (min-width:1024px){.unit{grid-template-columns:1fr minmax(0,520px);gap:80px}}
/* A single printed slip, shown flat (formats / why-it-works). */
.slip-card{position:relative;background:var(--gradient);color:var(--on-gradient);border-radius:18px;
  padding:38px 30px 28px;text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.45);
  transform:rotate(-1.6deg);transition:transform .6s var(--ease)}
.slip-card:hover{transform:rotate(0deg) scale(1.02)}
.slip-card .slip{font-size:clamp(19px,2.4vw,26px);color:var(--on-gradient)}
.slip-card .brandline{margin-top:22px;padding-top:16px;border-top:1px solid rgba(var(--on-gradient-rgb),.24);
  font-family:"Plus Jakarta Sans",sans-serif;font-style:normal;font-weight:700;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(var(--on-gradient-rgb),.66)}
.slip-card .nums{display:block;margin-top:8px;font-size:12px;letter-spacing:.16em;
  color:rgba(var(--on-gradient-rgb),.55)}

/* --- the unit ------------------------------------------------------------
   The slip on its own. It used to float over a cracked cookie, which cropped
   both and explained neither; here the printed slip is the whole subject. */
.spec{display:flex;flex-direction:column;gap:8px;width:min(100%,420px);
  margin-inline:auto;transform:rotate(-1.4deg);transition:transform .6s var(--ease)}
.spec:hover{transform:rotate(0deg)}
.spec .paper{box-shadow:0 26px 52px rgba(0,0,0,.42)}
.spec .paper--fortune{padding:30px 24px 22px}
.spec .paper--fortune p{font-size:clamp(16px,2.1vw,20px);line-height:1.35}
.spec .paper__nums{font-size:clamp(12px,1.5vw,13.5px);margin-top:11px}
.spec .paper--ad{padding:15px 17px}
.spec .paper__tag{font-size:clamp(12px,1.5vw,13.5px)}
.spec .paper__id b{font-size:clamp(13.5px,1.7vw,15.5px)}
.spec .paper__id em{font-size:clamp(10px,1.2vw,11.5px)}


/* ---------- stat / target strip ---------- */
/* Three figures, given the room to actually land. The numbers were set at
   body-adjacent sizes and read as captions; at this scale they carry the
   section, and the rules between them do the separating instead of gaps. */
.targets{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:68px 0}
.targets__grid{display:grid;gap:0}
@media (min-width:768px){
  .targets__grid{grid-template-columns:repeat(3,1fr)}
  .target{padding:4px 44px}
  .target + .target{border-left:1px solid var(--line-soft)}
  .target:first-child{padding-left:0}
  .target:last-child{padding-right:0}
}
.target .num{font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;
  font-size:clamp(54px,7.4vw,92px);line-height:.92;letter-spacing:-.05em;color:var(--accent)}
.target .label{margin-top:16px;color:var(--muted);font-size:16px;line-height:1.5;max-width:250px}

/* ---------- journal ---------- */

/* ---------- closing ---------- */
.closing{padding:96px 0 120px;text-align:center}
@media (min-width:768px){.closing{padding:150px 0 180px}}
.closing h2{margin-bottom:16px}
.closing p{color:var(--muted);margin-bottom:40px;font-size:clamp(18px,2vw,22px)}
.closing .btn{margin-inline:auto}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:64px 0 40px}
.footer-grid{display:grid;gap:48px}
@media (min-width:768px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr;gap:32px}}
.site-footer h2{font-size:16px;font-family:"Plus Jakarta Sans",sans-serif;font-weight:500;margin-bottom:20px}
.site-footer ul{display:flex;flex-direction:column;gap:12px}
.site-footer a{font-size:15px;color:var(--muted);transition:color .3s}
.site-footer a:hover{color:var(--text)}
.footer-mail{font-family:"Plus Jakarta Sans",sans-serif;font-size:clamp(22px,3vw,34px);letter-spacing:-.02em;
  color:var(--text) !important;display:inline-block}
.footer-mail:hover{color:var(--accent) !important}

/* The LinkedIn line under the address. Deliberately quieter than the mail —
   the address is the ask, this is the reassurance that there is a company
   behind it. The arrow is the same one every outbound link on the site uses. */
.footer-social{margin:14px 0 0}
.footer-social a{display:inline-flex;align-items:center;gap:7px;font-size:14px;
  color:var(--muted);text-decoration:none}
.footer-social a:hover{color:var(--text)}
.footer-social svg{flex:none;transition:transform .25s var(--ease)}
.footer-social a:hover svg{transform:translate(2px,-2px)}
.footer-bottom{margin-top:64px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;
  font-size:14px;color:var(--muted)}
.footer-bottom ul{flex-direction:row;gap:24px;flex-wrap:wrap}
.footer-bottom a{font-size:14px}

/* ---------- sticky cta ---------- */
.sticky-cta{position:fixed;left:16px;right:16px;bottom:16px;z-index:100;
  background:var(--text);color:var(--ink);border-radius:16px;
  display:flex;align-items:center;gap:16px;padding:14px 16px;
  transform:translateY(160%);transition:transform .7s var(--ease);box-shadow:0 18px 50px rgba(0,0,0,.5)}
@media (min-width:768px){.sticky-cta{padding:16px 20px;border-radius:20px;left:24px;right:24px}}
.sticky-cta.is-visible{transform:none}
.sticky-cta.is-dismissed{transform:translateY(160%) !important}
.sticky-cta h3{font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;font-size:clamp(17px,2.2vw,28px);
  color:var(--ink);line-height:1.3}
.sticky-cta p{display:none;color:#4A6B5C;font-size:16px}
@media (min-width:768px){.sticky-cta p{display:block}}
.sticky-cta .spacer{margin-left:auto}
.sticky-cta .btn{background:var(--ink);color:var(--text)}
.sticky-cta .btn:hover{background:var(--btn-deep);color:var(--ink-on-deep)}
.sticky-close{position:absolute;top:-46px;right:0;width:32px;height:32px;border-radius:100px;
  border:1px solid var(--line);background:rgba(var(--scrim),.85);color:var(--text);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.3s}
.sticky-close:hover{background:var(--text);color:var(--ink)}

/* ---------- cookie ---------- */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:130;max-width:680px;
  background:var(--text);color:var(--ink);border-radius:16px;padding:18px;
  display:flex;flex-direction:column;gap:16px;box-shadow:0 18px 50px rgba(0,0,0,.5);
  transform:translateY(180%);transition:transform .7s var(--ease)}
@media (min-width:768px){.cookie{flex-direction:row;align-items:center;gap:24px;padding:16px 20px;left:24px}}
.cookie.is-visible{transform:none}
.cookie p{font-size:13px;line-height:1.45;color:#274438}
.cookie__actions{display:flex;align-items:center;gap:10px;flex:none}
.cookie__actions .btn{height:38px;font-size:15px}
.cookie__actions .link{font-size:15px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;
  background:none;border:0;color:var(--ink)}

.modal{position:fixed;inset:0;z-index:140;display:none;align-items:center;justify-content:center;padding:16px}
.modal.is-open{display:flex}
.modal__scrim{position:absolute;inset:0;background:rgba(var(--scrim),.78);backdrop-filter:blur(4px)}
.modal__panel{position:relative;background:var(--text);color:var(--ink);border-radius:20px;
  width:100%;max-width:560px;max-height:86vh;overflow:auto;padding:28px}
.modal__panel h2{font-size:24px;margin-bottom:8px}
.modal__panel > p{font-size:14px;color:#3E5C4E;margin-bottom:24px}
.pref{display:flex;gap:16px;padding:16px 0;border-top:1px solid #B9D6C3}
.pref__body h3{font-family:"Plus Jakarta Sans",sans-serif;font-weight:500;font-size:15px;margin-bottom:4px}
.pref__body p{font-size:13px;color:#4A6B5C;line-height:1.45}
.switch{position:relative;flex:none;width:44px;height:26px;margin-left:auto}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch i{position:absolute;inset:0;background:#B9D6C3;border-radius:100px;transition:.3s;pointer-events:none}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;transition:.3s}
.switch input:checked + i{background:var(--ink)}
.switch input:checked + i::after{transform:translateX(18px)}
.switch input:disabled + i{opacity:.55}
.modal__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid #B9D6C3}
.modal__close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:100px;
  border:1px solid #B9D6C3;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* ---------- inner pages ---------- */
.page-hero{padding:calc(var(--nav-h) + 72px) 0 56px}
@media (min-width:768px){.page-hero{padding:calc(var(--nav-h) + 140px) 0 80px}}
.page-hero h1{max-width:1000px;line-height:1.15}
.page-hero p{margin-top:24px;max-width:600px;color:var(--muted);font-size:clamp(16px,1.6vw,20px)}

/* ---------- contact ---------- */
.contact-grid{display:grid;gap:48px;padding-bottom:120px}
@media (min-width:1024px){.contact-grid{grid-template-columns:1fr minmax(0,620px);gap:80px}}
.form{display:grid;gap:24px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;color:var(--muted)}
.field input,.field textarea{background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:12px 0;font-size:17px;font-weight:300;transition:border-color .35s var(--ease)}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--text)}
.field .error{font-size:13px;color:#F2A6A6;display:none}
.field.is-invalid input,.field.is-invalid textarea{border-color:#F2A6A6}
.field.is-invalid .error{display:block}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-success{border:1px solid var(--line);border-radius:24px;padding:28px;display:none}
.form-success.is-visible{display:block}
.form-success--error{border-color:#F2A6A6}
.form-success--error h3{color:#F2A6A6}
.form-success h3{font-size:26px;margin-bottom:8px}
.form-success p{color:var(--muted)}

/* ============================================================
   MOBILE PASS
   ============================================================ */
@media (max-width:767px){
  /* The decorative frames are sized in vw, so on a phone they ended up
     narrower than the text they are meant to contain. Give them the width
     of the screen instead. */
  .hero-frame{height:62vh;border-radius:36px}
  .hero-frame--b{height:72vh;border-radius:40px}
  /* The wall is background texture, not something to read. At 236px the
     slips cropped mid-card and looked broken; smaller they tile properly
     and sit behind the copy instead of fighting it. */
  /* Scoped to .tile: these sizes are for the wall, which is texture. The same
     component is real, readable content in the unit section, so it must not
     inherit 7px type there. */
  .tile{width:150px;height:150px;border-radius:18px;padding:13px;gap:6px}
  .tile .paper{padding:7px 7px;box-shadow:0 3px 9px rgba(0,0,0,.3)}
  .tile .paper--fortune p{font-size:8px;line-height:1.3}
  .tile .paper__nums{font-size:6px;margin-top:3px}
  .tile .paper--ad{gap:5px}
  .tile .paper--ad .qr{width:15px;height:15px}
  .tile .paper__tag{font-size:7.5px;line-height:1.2}
  .tile .paper__id b{font-size:8px}
  .tile .paper__id em{font-size:5.5px}
  .grid-row{gap:14px}
  .grid-wrapper{gap:14px}
  .keep-scrolling{bottom:20px}

  /* Footer and utility links sat at 19-21px tall. Padding gives them a
     thumb-sized target without changing how they look. */
  .site-footer a,.footer-bottom a{display:inline-block;padding:9px 0}
  .footer-mail{padding:9px 0}   /* also the one in the contact sidebar */
  .footer-social a{padding:9px 0}
  .cookie .link{padding:10px 4px}
  .brand{padding:4px 0}

  .hero-title-wrap{padding-inline:22px}
  .hero-sub{max-width:32ch;margin-top:18px}
  .hero-actions{margin-top:30px}
  .marquee{bottom:36px}

  /* Tighter vertical rhythm — the desktop spacing left large dead zones. */
  .section{padding:72px 0}
  .section--tight{padding:56px 0}
  .section__head{margin-bottom:36px}
  .page-hero{padding:calc(var(--nav-h) + 48px) 0 36px}
  .page-hero p{margin-top:18px}
  .closing{padding:72px 0 88px}
  .unit{gap:32px}
  .targets{padding:44px 0}
  .targets__grid{gap:0}
  .target + .target{border-top:1px solid var(--line-soft);margin-top:30px;padding-top:30px}
  .target .label{font-size:15.5px;max-width:none}

  /* Reasons and formats become horizontal, snapping scrollers on a phone.
     Stacked they ran to several screens each; this keeps them to one, and the
     part-visible next card is the affordance that there is more. */
  .reasons,.formats{
    display:flex;flex-wrap:nowrap;gap:12px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    /* bleed past the container so cards reach the screen edge */
    margin-inline:calc(var(--gutter) * -1);
    padding:2px var(--gutter) 10px;
    scrollbar-width:none;
  }
  .reasons::-webkit-scrollbar,.formats::-webkit-scrollbar{display:none}
  .reasons:focus-visible,.formats:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
  .reasons > *,.formats > li{flex:0 0 84%;scroll-snap-align:start}
  .reason{height:auto}

  /* Cards sized by their content rather than a fixed height, so the title
     and body stop being pushed to opposite ends of an empty box. */
  .format{min-height:0;gap:18px;padding:24px}
  .format h3{font-size:22px;margin-top:10px}
  .format .know{margin-top:14px}
  .reason{padding:26px;gap:12px}
  .reason h3{font-size:22px}
  .slip-card{padding:32px 24px}

  /* Consent bar was eating a third of the screen. */
  .cookie{padding:14px;gap:12px;border-radius:14px}
  .cookie p{font-size:12px;line-height:1.45}
  .cookie__actions{gap:8px}
  .cookie__actions .btn{height:34px;font-size:14px;padding:0 15px}
  .cookie__actions .link{font-size:14px}
  .sticky-cta{padding:12px 14px;border-radius:14px}
  .sticky-cta .btn{height:38px;font-size:15px;padding:0 16px}
  .modal__panel{padding:22px}
  .site-footer{padding:48px 0 32px}
  .footer-grid{gap:36px}
  .footer-bottom{margin-top:44px}
}

/* ============================================================
   STATIC HERO FALLBACK
   No scroll animation (reduced motion, or GSAP unavailable), so the two
   hero stages stack down the page instead of overlaying one another.
   ============================================================ */
.home-hero.is-static{height:auto}
.home-hero.is-static .hero-pin{position:relative;height:auto;overflow:visible;
  flex-direction:column;gap:72px;padding:calc(var(--nav-h) + 72px) 0 0}
.home-hero.is-static .hero-frame,
.home-hero.is-static .keep-scrolling{display:none}
.home-hero.is-static .hero-title-wrap{position:relative}
.home-hero.is-static .hero-title .char{opacity:1}
.home-hero.is-static .marquee{position:relative;bottom:auto;width:100%}
.home-hero.is-static .hero-grid{position:relative;inset:auto;width:100%;height:520px;
  opacity:1;visibility:visible}
.home-hero.is-static .grid-wrapper{scale:1}
.home-hero.is-static .hero-grid__copy{left:50%;top:50%;translate:-50% -50%;
  max-width:420px;text-align:center}
.home-hero.is-static .hero-grid__copy .actions{justify-content:center}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
  .hero-title .char{opacity:1 !important;transform:none !important}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}