/* ==================================================================
   bataltsev.com
   Mobile-first. Breakpoints go up: 560 / 900 / 1200.
   Palette and type scale are declared once, below, and never
   improvised further down the file.
   ================================================================== */

:root{
  /* colour ------------------------------------------------------- */
  --bg:        #0D0D0F;   /* page ground, flat, no gradients        */
  --surface:   #131317;   /* lifted panels: FAQ, form, offer        */
  --ink:       #F2F0EB;   /* body and headings            17.4:1    */
  --muted:     #8A8A93;   /* labels, captions, secondary   5.6:1    */
  --line:      #22222A;   /* hairlines and field borders            */
  --accent:    #E4E04A;   /* buttons, cursor, accent words 13.9:1   */
  --accent-ink:#0D0D0F;   /* text sitting on the accent    13.9:1   */

  /* type --------------------------------------------------------- */
  --display: 'Bricolage Grotesque', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body:    'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* space -------------------------------------------------------- */
  --gut:  20px;                       /* page gutter                */
  --maxw: 1180px;                     /* content measure            */
  --sect: clamp(50px, 5.4vw, 78px);    /* vertical rhythm            */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 900px){ :root{ --gut: 40px; } }
@media (min-width:1200px){ :root{ --gut: 56px; } }

/* ---- reset ------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body,h1,h2,h3,p,ul,ol,li,figure,blockquote,dl,dd{ margin:0; padding:0; }
ul,ol{ list-style:none; }
img{ max-width:100%; display:block; }
button,input,textarea{ font:inherit; color:inherit; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;                 /* clip, not hidden: keeps sticky working */
}

@media (min-width:900px){ body{ font-size:18px; } }

/* Faint film grain. The only texture on the page. */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:9998; pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- shared primitives ------------------------------------------ */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.section{ padding-block:var(--sect); }

.eyebrow{
  font-size:14px;
  line-height:1.4;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
  margin-bottom:18px;
}
/* The round brackets are decoration, so they live here rather than in the
   markup. Delete these two rules and every section label loses them. */
.eyebrow::before{ content:"( "; }
.eyebrow::after { content:" )"; }

h1,h2,h3,.h1,.h2,.h3{
  font-family:var(--display);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.028em;
  text-wrap:balance;
}

.h1{ font-size:clamp(2.25rem, 7.6vw, 5.6rem); }
.h2{ font-size:clamp(1.9rem, 5.6vw, 3.7rem); line-height:1.06; }
.h3{ font-size:clamp(1.25rem, 2.4vw, 1.5rem); font-weight:700; letter-spacing:-.015em; line-height:1.2; }

/* The accent voice: a second face, italic, in the accent colour.
   Used only inside headings, and only on words the copy leans on. */
.mark{
  font-family:var(--body);
  font-style:italic;
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--accent);
}

.lead{ font-size:clamp(1.05rem, 2.1vw, 1.32rem); line-height:1.55; color:var(--ink); }
.dim { color:var(--muted); }

a{ color:inherit; }

:where(a,button,summary):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}
input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ---- buttons ---------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 26px;
  font-size:16px; font-weight:500; letter-spacing:.005em;
  text-decoration:none; white-space:nowrap;
  border:1px solid transparent; border-radius:999px;
  background:none;
  transition:background-color 200ms var(--ease), color 200ms var(--ease),
             border-color 200ms var(--ease);
}
.btn--primary{ background:var(--accent); color:var(--accent-ink); font-weight:600; }
.btn--ghost  { border-color:var(--line); color:var(--ink); }
.btn--sm     { min-height:44px; padding:0 20px; font-size:15px; }

@media (hover:hover){
  .btn--primary:hover{ background:#F0ED6B; }
  .btn--ghost:hover  { border-color:var(--ink); }
}

.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---- link with a rule under it ---------------------------------- */
.tlink{
  display:inline-flex; align-items:center; gap:.5em;
  min-height:44px;
  font-weight:500; text-decoration:none;
  color:var(--accent);
  border-bottom:1px solid rgba(228,224,74,.35);
  transition:border-color 200ms var(--ease);
}
@media (hover:hover){ .tlink:hover{ border-bottom-color:var(--accent); } }

/* ==================================================================
   Header
   ================================================================== */
.head{
  position:sticky; top:0; z-index:100;
  background:rgba(13,13,15,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:translate 380ms var(--ease), opacity 260ms linear;
}
.head.is-hidden{ translate:0 -100%; opacity:0; }

.head__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  min-height:64px;
}
.brand{
  display:inline-flex; align-items:center;
  min-height:44px;                      /* tap target, not just text */
  font-family:var(--display); font-weight:800;
  font-size:17px; letter-spacing:-.02em;
  text-decoration:none; white-space:nowrap;
}
.brand b{ color:var(--accent); font-weight:800; }

.nav{ display:none; }
.nav a{
  display:inline-flex; align-items:center;
  min-height:44px; padding-inline:2px;
  font-size:15px; text-decoration:none; color:var(--muted);
  transition:color 200ms var(--ease);
}
@media (hover:hover){ .nav a:hover{ color:var(--ink); } }
.nav .sep{ color:var(--line); user-select:none; }

.head .btn{ display:none; }

/* burger */
.burger{
  width:44px; height:44px;
  /* flex, not grid: stretched grid rows would spread the three bars
     apart and the close state would never line up into an X */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:999px;
  background:none; cursor:pointer;
  transition:border-color 200ms var(--ease);
}
.burger span{
  display:block; width:17px; height:2px; background:var(--ink);
  transition:translate 220ms var(--ease), rotate 220ms var(--ease), opacity 160ms;
}
.burger span + span{ margin-top:5px; }
.burger[aria-expanded="true"] span:nth-child(1){ translate:0 7px; rotate:45deg; }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ translate:0 -7px; rotate:-45deg; }

/* mobile panel */
.panel{
  position:fixed; inset:64px 0 auto 0;
  z-index:99;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  padding:8px var(--gut) 28px;
  display:none;
}
.panel.is-open{ display:block; }
.panel a:not(.btn){
  display:flex; align-items:center;
  min-height:56px;
  font-family:var(--display); font-weight:700;
  font-size:1.5rem; letter-spacing:-.02em;
  text-decoration:none;
  border-bottom:1px solid var(--line);
}
.panel .btn{ width:100%; margin-top:22px; }

@media (min-width:900px){
  .head__in{ min-height:76px; }
  .brand{ font-size:19px; }
  .nav{ display:flex; align-items:center; gap:12px; }
  .head .btn{ display:inline-flex; }
  .burger,.panel{ display:none !important; }
}

/* ==================================================================
   1 — Hero
   ================================================================== */
.hero{ padding-block:clamp(36px, 6vw, 76px) clamp(44px, 7vw, 88px); }
.hero__title{ max-width:14ch; }
@media (min-width:900px){ .hero__title{ max-width:17ch; } }

.hero__copy{
  max-width:52ch;
  margin-top:clamp(24px, 3vw, 36px);
  color:var(--muted);
}
.hero__copy strong{ color:var(--ink); font-weight:500; }

.hero .btn-row{ margin-top:clamp(30px, 4vw, 44px); }

.hero__note{
  margin-top:22px;
  font-size:15px;
  color:var(--muted);
  display:flex; align-items:flex-start; gap:10px;
}
.hero__note::before{
  content:""; flex:0 0 auto;
  width:7px; height:7px; border-radius:50%;
  background:var(--accent);
  margin-top:.5em;            /* sits on the first line, not the block */
}

/* ==================================================================
   2 — Marquee (pure CSS, no JS)
   ================================================================== */
.marquee{
  overflow:hidden;
  border-block:1px solid var(--line);
  padding-block:16px;
}
.marquee__track{
  display:flex; width:max-content;
  animation:marq 34s linear infinite;
}
.marquee__seq{
  display:flex; flex:0 0 auto; gap:0;
  font-size:14px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  white-space:nowrap;
}
.marquee__seq span{ padding-inline:16px; }
.marquee__seq span:nth-child(even){ color:var(--accent); }
@keyframes marq{ from{ translate:0 } to{ translate:-50% } }

/* ==================================================================
   3 — The offer
   ================================================================== */
.offer{ background:var(--surface); border-block:1px solid var(--line); }
.offer__title{ max-width:16ch; }
.offer__body{
  margin-top:clamp(26px, 3vw, 38px);
  display:grid; gap:26px;
  max-width:60ch;
}
.offer__body p{ font-size:clamp(1.02rem, 1.9vw, 1.2rem); line-height:1.6; color:var(--muted); }
.offer__body p:first-child{ color:var(--ink); }
.offer__body em{
  font-style:normal; color:var(--ink); font-weight:500;
}
.offer .btn-row{ margin-top:clamp(28px, 3vw, 40px); }

/* ==================================================================
   5 — Selected work  ·  signature element
   The phone screenshot stands in front, whole; the desktop one goes
   behind it and is cut off by the edge of the page. Mobile first,
   literally. Used here and nowhere else on the site.
   ================================================================== */
.work-list{
  margin-top:clamp(30px, 4vw, 52px);
  padding-inline:var(--gut);        /* lines up with .wrap on small screens */
}
.work + .work{ margin-top:clamp(72px, 9vw, 116px); }

.work__media{
  position:relative;
  /* stacked below the text on small screens — the phone overhangs
     upwards, so the gap has to clear it */
  margin-top:clamp(46px, 9vw, 64px);
  margin-bottom:clamp(52px, 7vw, 64px);
}
.work__desk{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  aspect-ratio:16/10;
}
.work__desk img{ width:100%; height:100%; object-fit:cover; object-position:left top; }

.work__phone{
  position:absolute; z-index:2;
  left:3%;
  top:-7%;
  height:124%;
  width:auto;
  border:1px solid #2C2C34;
  border-radius:14px;
  box-shadow:0 26px 54px rgba(0,0,0,.72);
}

.work__tag{
  font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:500;
  margin-bottom:14px;
}
.work__tag b{ color:var(--accent); font-weight:500; }
.work__name{ font-size:clamp(1.7rem, 4.4vw, 2.6rem); }
.work__meta p{ margin-top:16px; color:var(--muted); max-width:46ch; }
.work__meta .tlink{ margin-top:10px; }

@media (min-width:900px){
  /* The list keeps the page's left margin but has no right one, so the
     desktop screenshot runs off the edge of the page instead of ending
     politely inside the grid. 100% here is the viewport width, which is
     what .wrap measures against too, so the two line up exactly. */
  .work-list{
    padding-left:max(var(--gut), calc((100% - var(--maxw)) / 2 + var(--gut)));
    padding-right:0;
  }
  .work{
    display:grid;
    grid-template-columns:minmax(300px, 38%) 1fr;
    align-items:center;
    column-gap:clamp(32px, 4vw, 56px);
  }
  .work__meta{ padding-right:clamp(24px, 3vw, 48px); }
  .work__media{ margin-block:0; }
  .work__desk{
    aspect-ratio:4/3;
    border-radius:10px 0 0 10px;
    border-right:0;
  }
  .work__phone{
    left:-5%;
    top:-6%;
    height:112%;
  }
}

/* ==================================================================
   5 — How it works
   Four cards that pin one after another and pile up. Built on
   position:sticky alone. Each card pins --peek lower than the one before,
   and --peek is set to clear the card's top padding plus its number line,
   so ( 1 ) ( 2 ) ( 3 ) stay readable along the top of the pile instead of
   being buried. Change the card padding and --peek has to follow.
   ================================================================== */
.process{
  --stick:84px;                 /* header height plus a little air */
  --peek:46px;                  /* exactly enough to keep a number showing */
  --gap:clamp(200px, 32vh, 300px);   /* scroll distance between two landings */
  --dwell:clamp(70px, 10vh, 110px);  /* how long the finished pile holds */
}

.steps-head{ margin-bottom:clamp(22px, 3vw, 32px); }

.steps{ display:grid; }

.step{
  position:sticky;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px clamp(20px, 2.6vw, 32px) clamp(22px, 2.6vw, 30px);
  display:grid; gap:8px;
  box-shadow:0 -14px 34px rgba(0,0,0,.55);   /* each card casts onto the pile */
  --ry:38px;                    /* floats up from further than the rest */
}
/* A sticky card lets go of its pin when the bottom of the list catches up
   with it. Card 4 pins lowest, so it would be caught first and would ride
   up over the three below it — the pile coming apart from the top.

   Fix: every card carries invisible trailing margin equal to the peek
   offsets of the cards after it. That lines all four margin-boxes up on the
   same edge, so they let go on the same scroll pixel and the pile leaves as
   one block. The margin above each card is reduced by the same amount, so
   the distance from one landing to the next stays --gap. */
.step:nth-child(1){
  top:calc(var(--stick) + var(--peek) * 0);
  margin-bottom:calc(var(--peek) * 3);
}
.step:nth-child(2){
  top:calc(var(--stick) + var(--peek) * 1);
  margin-bottom:calc(var(--peek) * 2);
  margin-top:max(0px, calc(var(--gap) - var(--peek) * 3));
}
.step:nth-child(3){
  top:calc(var(--stick) + var(--peek) * 2);
  margin-bottom:calc(var(--peek) * 1);
  margin-top:max(0px, calc(var(--gap) - var(--peek) * 2));
}
.step:nth-child(4){
  top:calc(var(--stick) + var(--peek) * 3);
  margin-top:max(0px, calc(var(--gap) - var(--peek) * 1));
}

/* Holds the finished pile still for a beat before it leaves. This has to be
   a box inside the list, not padding on it: a sticky child is bounded by
   its parent's CONTENT box, so padding on .steps buys it nothing. As the
   ::after of a grid container it becomes a grid item and costs no markup. */
.steps::after{
  content:"";
  display:block;
  height:var(--dwell);
}

.step__n{
  font-family:var(--display); font-weight:700;
  font-size:14px; line-height:1.3; letter-spacing:.06em;
  color:var(--accent);
}
.step p{ color:var(--muted); max-width:52ch; }

.steps__intro{
  margin-top:14px;
  font-size:clamp(1.15rem, 2.6vw, 1.7rem);
  font-family:var(--display); font-weight:700; letter-spacing:-.02em;
  line-height:1.15;
}

@media (min-width:900px){
  /* The heading moves into its own column and stays put while the cards
     stack beside it. That is what stops the section from turning into a
     wall of cards with no title in sight. */
  .process{
    --stick:100px; --peek:52px;
    display:grid;
    grid-template-columns:minmax(0, 30%) 1fr;
    column-gap:clamp(40px, 5vw, 80px);
    align-items:start;
  }
  .steps-head{
    position:sticky; top:var(--stick);
    margin-bottom:0;
  }
  .step{ padding:22px clamp(24px, 2.6vw, 34px) clamp(26px, 2.8vw, 34px); }
}

/* ==================================================================
   7 — Pricing
   ================================================================== */
.price{ padding-block:clamp(30px, 4vw, 44px); border-bottom:1px solid var(--line); }
.price:first-of-type{ border-top:1px solid var(--line); }
.price__head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px;
}
.price__name{ font-size:clamp(1.5rem, 3.4vw, 2.2rem); }
.price__fig{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.5rem, 3.4vw, 2.2rem);
  letter-spacing:-.03em;
  color:var(--accent);
  margin-left:auto;
}
.price p{ margin-top:14px; color:var(--muted); max-width:54ch; }

.price--founding .price__name{ color:var(--ink); }
.price--founding .price__fig{ color:var(--accent); }

.price--note{ border-bottom:0; }
.price--note p{ margin-top:0; }

/* ==================================================================
   8 — About
   ================================================================== */
.about__grid{ display:grid; gap:clamp(36px, 5vw, 56px); }
@media (min-width:900px){
  .about__grid{ grid-template-columns:minmax(0,36%) 1fr; column-gap:clamp(40px,4.5vw,72px); align-items:start; }
}
.about__photo{ max-width:420px; }

/* Nothing behind it, nothing over it. The edge fade is feathered into the
   file's alpha channel, so the page needs no mask and no backdrop. Replace
   the portrait with a hard-edged photo and that fade has to come back —
   as a mask-image here, not as anything drawn around the picture. */
.about__photo img{ display:block; width:100%; height:auto; }
.about__body{ display:grid; gap:22px; max-width:58ch; }
.about__body p{ color:var(--muted); }
.about__body p:first-of-type{ color:var(--ink); }
.about__title{
  margin-bottom:clamp(20px,2.5vw,28px);
  /* one size down from .h2 so the surname stays on the first line */
  font-size:clamp(1.75rem, 4.4vw, 3.05rem);
}
.about .btn-row{ margin-top:12px; }

/* ==================================================================
   9 — FAQ
   ================================================================== */
.faq{ border-top:1px solid var(--line); margin-top:clamp(26px,3vw,42px); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-height:72px; padding:18px 0;
  border:0; background:none; text-align:left; cursor:pointer;
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.08rem, 2.3vw, 1.42rem);
  letter-spacing:-.018em; line-height:1.25;
  color:var(--ink);
  transition:color 200ms var(--ease);
}
/* Questions arrive one after another, 70ms apart, while the rules they sit
   on stay put. Armed by JavaScript via [data-anim]; without it, nothing
   hides. The stagger delay is deliberately not on `color`, or hovering a
   revealed question would lag by up to half a second. */
.faq[data-anim] .faq__q{
  opacity:0; translate:-24px 0;
  transition:translate 520ms var(--ease) var(--fd, 0ms),
             opacity   400ms linear    var(--fd, 0ms),
             color     200ms var(--ease);
}
.faq[data-anim] .faq__item.is-in .faq__q{ opacity:1; translate:0 0; }
@media (hover:hover){ .faq__q:hover{ color:var(--accent); } }
.faq__ico{
  flex:0 0 auto; position:relative;
  width:22px; height:22px;
}
.faq__ico::before,.faq__ico::after{
  content:""; position:absolute; inset:50% 0 auto 0;
  height:1.5px; background:var(--accent);
  transition:rotate 260ms var(--ease), opacity 200ms var(--ease);
}
.faq__ico::after{ rotate:90deg; }
.faq__item.is-open .faq__ico::after{ rotate:0deg; }

.faq__a{ max-height:0; overflow:hidden; transition:max-height 380ms var(--ease); }
.faq__a p{ padding-bottom:26px; color:var(--muted); max-width:64ch; }

/* ==================================================================
   10 — Closing call + form
   ================================================================== */
.contact{ background:var(--surface); border-top:1px solid var(--line); }
.contact__grid{ display:grid; gap:clamp(38px, 5vw, 64px); }
@media (min-width:900px){
  .contact__grid{ grid-template-columns:1fr 1fr; column-gap:clamp(56px,7vw,110px); align-items:start; }
}
.contact__title{ max-width:12ch; }
.contact__copy{ margin-top:26px; color:var(--muted); max-width:34ch; }
.contact__foot{ margin-top:26px; font-size:15px; color:var(--muted); }

.field{ display:grid; gap:8px; margin-bottom:18px; }
.field label{ font-size:14px; letter-spacing:.04em; color:var(--muted); font-weight:500; }
.field input,.field textarea{
  width:100%;
  min-height:52px; padding:14px 16px;
  background:var(--bg);
  border:1px solid var(--line); border-radius:8px;
  font-size:16px; line-height:1.5;
  transition:border-color 200ms var(--ease);
}
.field textarea{ min-height:112px; resize:vertical; }
@media (hover:hover){
  .field input:hover,.field textarea:hover{ border-color:#33333D; }
}
.form .btn{ width:100%; margin-top:6px; }
@media (min-width:560px){ .form .btn{ width:auto; min-width:200px; } }

/* honeypot — off-screen but focusable-proof, not display:none */
.honeypot{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  border:0; clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

.form__msg{
  margin-top:18px; padding:14px 16px;
  border-radius:8px; font-size:15px; line-height:1.5;
  display:none;
}
.form__msg.is-on{ display:block; }
.form__msg.is-ok{ background:rgba(228,224,74,.10); border:1px solid rgba(228,224,74,.45); color:var(--ink); }
.form__msg.is-err{ background:rgba(255,255,255,.04); border:1px solid #3A3A44; color:var(--ink); }
.form__msg a{ color:var(--accent); }

/* ==================================================================
   10 — Footer
   ================================================================== */
.foot{ border-top:1px solid var(--line); padding-block:clamp(40px,5vw,60px); }

.foot__top{ display:grid; gap:26px; }
@media (min-width:640px){
  .foot__top{ grid-template-columns:1fr auto; column-gap:40px; align-items:start; }
}

.foot__name{
  font-family:var(--display); font-weight:800;
  font-size:1.15rem; letter-spacing:-.02em;
  margin-bottom:4px;
}
.foot p{ color:var(--muted); font-size:15px; }

.foot__links{ display:grid; justify-items:start; }
@media (min-width:640px){ .foot__links{ justify-items:end; } }
.foot__links a{
  display:inline-flex; align-items:center;
  min-height:44px;
  font-size:15px; color:var(--muted); text-decoration:none;
  transition:color 200ms var(--ease);
}
@media (hover:hover){ .foot__links a:hover{ color:var(--ink); } }

.foot__legal{
  margin-top:clamp(26px,3.5vw,38px);
  padding-top:22px;
  border-top:1px solid var(--line);
  font-size:14px;
}

/* ==================================================================
   Motion
   ================================================================== */
.rise{
  opacity:0; translate:0 var(--ry, 20px);
  transition:opacity 620ms var(--ease), translate 620ms var(--ease);
  transition-delay:var(--rd, 0ms);
}
.rise.is-in{ opacity:1; translate:0 0; }

/* A card can arrive from the side it actually sits on. Only once there are
   two columns to sit in — below that everything rises, like the rest. */
@media (min-width:760px){
  .rise[data-from="left"] { translate:-44px 0; }
  .rise[data-from="right"]{ translate: 44px 0; }
}

/* Headlines that reveal a word at a time. The hidden state hangs off .split,
   which JavaScript adds — with no JavaScript the words are simply there. */
.split .w{
  display:inline-block;
  opacity:0; translate:0 .45em;
  transition:opacity 460ms linear, translate 560ms cubic-bezier(.22, 1, .36, 1);
}
.split .w.is-on{ opacity:1; translate:0 0; }

/* ==================================================================
   Reduced motion — everything above degrades to static
   ================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .rise{ opacity:1; translate:none; }
  .split .w{ opacity:1; translate:none; }
  .step{ position:static; margin-bottom:0; }
  .step:not(:first-child){ margin-top:14px; }
  .step:first-child{ margin-top:0; }
  .steps-head{ position:static; }
  .faq[data-anim] .faq__q{ opacity:1; translate:none; }
  .marquee__track{ animation:none; }
}

/* ==================================================================
   Privacy page
   ================================================================== */
.doc{ max-width:70ch; }
.doc h2{ font-size:clamp(1.25rem,2.6vw,1.6rem); margin-top:44px; margin-bottom:12px; }
.doc p,.doc li{ color:var(--muted); }
.doc p + p,
.doc ul + p{ margin-top:14px; }
.doc ul{ margin-top:14px; display:grid; gap:10px; }
.doc li{ padding-left:20px; position:relative; }
.doc li::before{
  content:""; position:absolute; left:0; top:.66em;
  width:6px; height:6px; border-radius:50%; background:var(--accent);
}
.doc a{ color:var(--accent); }
.doc__date{ margin-top:22px; font-size:15px; }

/* ==================================================================
   Anchor offset — the sticky header must not cover section headings
   ================================================================== */
/* A section carries up to --sect of padding above its label. Landing on its
   border box would park the reader in front of that empty band, so the
   target is pulled up by the padding and pushed back down by the height of
   the header — the label ends up just under it either way. */
:where(#offer,#what,#work,#process,#pricing,#about,#faq,#start){
  scroll-margin-top:calc(112px - var(--sect));
}