/* ============================================================
   CACTUS — warm desert editorial
   Rules of the house:
     · No border-radius. Anywhere. Corners are 90°.
     · No pills, no chips, no glass, no gradient mesh.
     · Display = Newsreader. Text = IBM Plex Sans. Meta = IBM Plex Mono.
     · Hairlines do the dividing work, not shadows or cards.
   ============================================================ */

:root{
  --bg:      #F3EDE2;   /* parchment            */
  --bg-2:    #EAE2D4;   /* recessed panel       */
  --bg-3:    #E2D9C8;   /* deeper still         */
  --ink:     #14110D;   /* warm black           */
  --ink-2:   #3A342B;   /* secondary text       */
  --muted:   #6B6459;   /* tertiary / meta      */
  --rule:    #D6CCBA;   /* hairline             */
  --rule-2:  #C4B9A4;   /* hairline, emphasised */
  --accent:  #B4471F;   /* rust                 */
  --accent-w:#9A3B18;   /* rust, pressed        */

  --f-dsp: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --f-txt: "IBM Plex Sans", ui-sans-serif, "Helvetica Neue", Arial, sans-serif;
  --f-mno: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gut: clamp(1.25rem, 5vw, 5.5rem);
  --max: 84rem;

  --ease: cubic-bezier(.16,1,.3,1);
  --dur:  1.05s;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-txt);
  font-weight:400;
  font-size:clamp(1rem,.94rem + .28vw,1.125rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Paper tooth — keeps the flat parchment from reading as a swatch. */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:0;
  opacity:.5;
  background-image:
    radial-gradient(circle at 15% 12%, rgba(180,71,31,.045), transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(20,17,13,.05), transparent 46%);
}

img{ max-width:100%; display:block; }
hr{ border:0; border-top:1px solid var(--rule); margin:0; }

::selection{ background:var(--accent); color:var(--bg); }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ── shared type ─────────────────────────────────────────── */

.mono{
  font-family:var(--f-mno);
  font-size:.72em;
  letter-spacing:.06em;
}

.eyebrow{
  font-family:var(--f-mno);
  font-size:clamp(.625rem,.6rem + .1vw,.7rem);
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 1.75rem;
}

.dsp{
  font-family:var(--f-dsp);
  font-weight:400;
  font-size:clamp(2.1rem,1.15rem + 4.1vw,4.6rem);
  line-height:1.03;
  letter-spacing:-.028em;
  margin:0;
  text-wrap:balance;
}
.dsp em{
  font-style:italic;
  color:var(--accent);
}

.lede{
  font-size:clamp(1.1rem,1rem + .5vw,1.4rem);
  line-height:1.5;
  color:var(--ink);
  letter-spacing:-.011em;
}

p{ color:var(--ink-2); margin:0 0 1.15rem; }
p:last-child{ margin-bottom:0; }

/* Masked line reveal: the block clips, the inner span slides up into it. */
.line{ display:block; overflow:hidden; padding-bottom:.06em; }
.line > span{ display:block; }

/* ── buttons — square, bordered, no pill ─────────────────── */

.btn{
  --b:var(--ink);
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.5rem;
  border:1px solid var(--b);
  background:var(--ink); color:var(--bg);
  font-family:var(--f-mno);
  font-size:.78rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none;
  border-radius:0;
  transition:background .45s var(--ease), color .45s var(--ease),
             border-color .45s var(--ease), transform .45s var(--ease);
}
.btn:hover{ background:var(--accent); border-color:var(--accent); color:var(--bg); }
.btn:active{ transform:translateY(1px); }
.btn__arw{ transition:transform .45s var(--ease); }
.btn:hover .btn__arw{ transform:translateX(5px); }

.btn--ghost{
  background:transparent; color:var(--ink); border-color:var(--rule-2);
}
.btn--ghost:hover{ background:transparent; color:var(--accent); border-color:var(--accent); }

.btn--lg{ padding:1.2rem 2rem; font-size:.82rem; }

/* ── scroll progress ─────────────────────────────────────── */

.progress{
  position:fixed; top:0; left:0; right:0; height:2px;
  z-index:120; background:transparent; pointer-events:none;
}
.progress span{
  display:block; height:100%; width:0%;
  background:var(--accent);
  transform-origin:0 50%;
}

/* ── nav ─────────────────────────────────────────────────── */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease);
}
.nav.is-stuck{
  background:color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom-color:var(--rule);
}
.nav__in{
  max-width:var(--max); margin:0 auto;
  padding:1.15rem var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}

.wordmark{
  display:inline-flex; align-items:center; gap:.55rem;
  color:var(--ink); text-decoration:none;
  font-family:var(--f-mno);
  font-size:.82rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
}
/* Product-led lockup: Randy reads as the name, Cactus Labs as the parent.
   The rule between them is what stops it reading as one long phrase. */
.wordmark__mark{
  width:.85rem; height:1.06rem; overflow:visible;
  fill:none; stroke:var(--accent); stroke-width:1.6;
  stroke-linecap:square;
}

.nav__links{ display:flex; align-items:center; gap:2rem; }
.nav__links a{
  color:var(--muted); text-decoration:none;
  font-family:var(--f-mno);
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.nav__links a:hover{ color:var(--ink); border-bottom-color:var(--accent); }
.nav__cta{ color:var(--ink) !important; }

@media (max-width:860px){
  .nav__links a:not(.nav__cta){ display:none; }
}

/* ── hero ────────────────────────────────────────────────── */

.hero{
  position:relative; z-index:1;
  max-width:var(--max); margin:0 auto;
  padding:clamp(9rem,17vh,13rem) var(--gut) 0;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
}
.hero__grid{ max-width:62rem; }

.hero__eyebrow{ margin-bottom:clamp(2rem,5vh,3.5rem); }

.hero__h1{
  font-family:var(--f-dsp);
  font-weight:300;
  font-size:clamp(3rem,1.1rem + 9.4vw,9.5rem);
  line-height:.94;
  letter-spacing:-.042em;
  margin:0 0 clamp(1.75rem,4vh,2.75rem);
}
.hero__h1 em{ font-style:italic; color:var(--accent); }

.hero__sub{
  max-width:36rem;
  font-size:clamp(1.05rem,.98rem + .45vw,1.3rem);
  line-height:1.55; color:var(--ink-2);
  letter-spacing:-.008em;
  margin-bottom:clamp(2rem,4.5vh,3rem);
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; }

.hero__meta{
  margin-top:auto;
  padding:clamp(3rem,8vh,5rem) 0 1.1rem;
  display:flex; flex-wrap:wrap; gap:clamp(1.25rem,4vw,3.25rem);
}
.hero__meta span{
  font-family:var(--f-mno);
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
}

.hero__rule{ height:1px; }
.hero__rule i{
  display:block; height:1px; background:var(--rule-2);
  transform:scaleX(0); transform-origin:0 50%;
}

/* ── who's who band ──────────────────────────────────────── */

.roles{
  position:relative; z-index:1;
  padding:0 var(--gut);
  border-bottom:1px solid var(--rule);
}
.roles__list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.roles__list li{ padding:2.25rem 1.75rem 2.5rem 0; }
.roles__list li + li{ border-left:1px solid var(--rule); padding-left:1.75rem; }
.roles__k{
  display:block; margin-bottom:.7rem;
  font-family:var(--f-mno); font-size:.72rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
}
.roles__list p{
  margin:0; font-size:.95rem; line-height:1.5;
  color:var(--ink); letter-spacing:-.008em;
}

/* ── generic section ─────────────────────────────────────── */

.sec{
  position:relative; z-index:1;
  max-width:var(--max); margin:0 auto;
  padding:clamp(6rem,15vh,11rem) var(--gut);
}
.sec--alt{
  max-width:none; background:var(--bg-2);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
/* Full-bleed sections carry the gutter on the section itself, so their
   contents need one inner wrapper at the same content width the padded
   .sec sections resolve to. Centring each child individually instead would
   re-centre any child that sets its own narrower max-width, dragging it off
   the left grid — see .sec__body and .cta__sub. */
.wrap{ max-width:calc(var(--max) - 2 * var(--gut)); margin-inline:auto; }

.sec__head{ margin-bottom:clamp(3rem,7vh,5rem); }

.sec__body{
  max-width:44rem;
  margin-left:auto;   /* asymmetric: body hangs right of the headline */
  margin-bottom:clamp(3.5rem,8vh,6rem);
}

/* ── facts strip ─────────────────────────────────────────── */

.facts{
  list-style:none; margin:0; padding:0;
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  border-top:1px solid var(--rule);
}
.facts li{
  padding:2rem 1.75rem 2rem 0;
  border-bottom:1px solid var(--rule);
}
.facts li + li{ border-left:1px solid var(--rule); padding-left:1.75rem; }
.facts__n{
  display:block; margin-bottom:.9rem;
  font-family:var(--f-mno); font-size:.7rem;
  letter-spacing:.18em; color:var(--accent);
}
.facts p{
  margin:0; font-size:1.02rem; line-height:1.48;
  color:var(--ink); letter-spacing:-.01em;
}

/* ── 02 pinned thread ────────────────────────────────────── */

.thread{ position:relative; z-index:1; }

.thread__intro{
  max-width:var(--max); margin:0 auto;
  padding:clamp(6rem,14vh,10rem) var(--gut) clamp(2rem,5vh,3.5rem);
}
.thread__cue{
  margin-top:2.25rem;
  font-family:var(--f-mno); font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}

/* The stage is tall; the sticky child holds the frame while it scrolls. */
.thread__stage{ height:340svh; position:relative; }
.thread__sticky{
  position:sticky; top:0;
  height:100svh;
  display:flex; align-items:center;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  background:var(--bg-2);
  overflow:hidden;
}
.thread__cols{
  max-width:var(--max); margin:0 auto; width:100%;
  padding:0 var(--gut);
  display:grid; gap:clamp(2rem,6vw,5rem);
  grid-template-columns:1fr minmax(0,26rem);
  align-items:center;
}
@media (max-width:880px){
  .thread__cols{ grid-template-columns:1fr; }
  .thread__side{ display:none; }
}

.thread__side-h{
  font-family:var(--f-dsp); font-size:clamp(2rem,4vw,3.2rem);
  line-height:1.05; letter-spacing:-.03em; margin:0 0 1.1rem; color:var(--ink);
}
.thread__side-p{ max-width:26rem; }

.thread__status{
  margin-top:2.25rem; padding-top:1.1rem;
  border-top:1px solid var(--rule-2);
  display:flex; align-items:center; gap:.65rem;
}
.thread__status .mono{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink);
}
.dot{
  width:7px; height:7px; background:var(--accent);
  display:inline-block; flex:none;   /* square. deliberately not a circle. */
}

/* phone frame — square, drawn in hairlines, not a glossy mockup */
.phone{
  border:1px solid var(--rule-2);
  background:var(--bg);
  height:min(74svh,40rem);
  display:flex; flex-direction:column;
}
.phone__bar{
  display:flex; justify-content:space-between; align-items:center;
  padding:.85rem 1.1rem;
  border-bottom:1px solid var(--rule);
  flex:none;
}
.phone__bar .mono{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
}
.phone__bar-r{ color:var(--muted) !important; }

.phone__msgs{
  flex:1; overflow:hidden;
  padding:1.4rem 1.1rem;
  position:relative;
  /* Older messages dissolve at the top edge instead of being sliced in half,
     so the reel reads as a thread scrolling rather than a clipping bug. */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 2.2rem);
          mask-image:linear-gradient(to bottom, transparent 0, #000 2.2rem);
}
/* The reel holds every bubble in flow and slides up as the thread grows,
   so the newest message stays pinned near the bottom — the way a real
   chat scrolls. Offset is set from JS; nothing here reflows. */
.phone__reel{
  display:flex; flex-direction:column; gap:.7rem;
  transform:translateY(0);
  transition:transform .75s var(--ease);
  will-change:transform;
}

.msg{
  max-width:82%;
  opacity:0;
  transform:translateY(14px) scale(.985);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.msg.is-on{ opacity:1; transform:none; }
.msg p{
  margin:0;
  padding:.7rem .95rem;
  font-size:.95rem; line-height:1.45; letter-spacing:-.006em;
  border:1px solid var(--rule-2);
  border-radius:0;              /* square bubbles — the whole point */
}
.msg--in{ align-self:flex-start; }
.msg--in p{ background:var(--bg-3); color:var(--ink); }
.msg--out{ align-self:flex-end; }
.msg--out p{ background:var(--ink); color:var(--bg); border-color:var(--ink); }

/* ── 03 steps ────────────────────────────────────────────── */

.steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  border-top:1px solid var(--rule-2);
}
.steps li{
  padding:2.5rem 1.75rem 2.75rem 0;
  border-bottom:1px solid var(--rule-2);
}
.steps li + li{ border-left:1px solid var(--rule-2); padding-left:1.75rem; }
.steps__n{
  display:block; margin-bottom:1.5rem;
  font-size:.7rem; letter-spacing:.2em; color:var(--accent);
}
.steps h3{
  font-family:var(--f-dsp); font-weight:400;
  font-size:1.6rem; letter-spacing:-.02em; line-height:1.1;
  margin:0 0 .8rem; color:var(--ink);
}
.steps p{ font-size:.95rem; line-height:1.55; margin:0; }
.steps em{ font-style:italic; color:var(--ink); }

/* ── 03 scope grid ───────────────────────────────────────── */

.scope{
  list-style:none; margin:0 0 clamp(3.5rem,8vh,6rem); padding:0;
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));
  border-top:1px solid var(--rule-2);
}
.scope li{
  padding:2.5rem 2rem 2.75rem 0;
  border-bottom:1px solid var(--rule-2);
}
.scope li + li{ border-left:1px solid var(--rule-2); padding-left:2rem; }
.scope__n{
  display:block; margin-bottom:1.4rem;
  font-size:.7rem; letter-spacing:.2em; color:var(--accent);
}
.scope h3{
  font-family:var(--f-dsp); font-weight:400;
  font-size:1.55rem; letter-spacing:-.022em; line-height:1.12;
  margin:0 0 .85rem; color:var(--ink);
}
.scope p{ font-size:.97rem; line-height:1.55; margin:0; }

/* Two-up on wide screens keeps the hairline grid even rather than leaving
   a lone orphan column at three-across. */
@media (min-width:60rem){
  .scope{ grid-template-columns:1fr 1fr; }
  .scope li:nth-child(odd){ border-left:0; padding-left:0; }
  .scope li:nth-child(even){ border-left:1px solid var(--rule-2); padding-left:2rem; }
  .scope li:nth-child(-n+2){ border-top:0; }
}

/* ── systems strip ───────────────────────────────────────── */

.systems{ border-top:1px solid var(--rule); padding-top:2.25rem; }
.systems__list{
  list-style:none; margin:0 0 1.75rem; padding:0;
  display:flex; flex-wrap:wrap; gap:0;
}
.systems__list li{
  font-family:var(--f-mno);
  font-size:.78rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink);
  padding:.35rem 1.15rem .35rem 0;
  margin-right:1.15rem;
  border-right:1px solid var(--rule-2);
}
.systems__list li:last-child{ border-right:0; }
.systems__note{
  max-width:44rem; font-size:.95rem; color:var(--muted);
}

/* ── 05 pricing ──────────────────────────────────────────── */

.price{
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
  border-top:1px solid var(--rule-2);
  border-bottom:1px solid var(--rule-2);
}
.price__col{ padding:2.75rem 2.25rem 3rem 0; }
.price__col + .price__col{ border-left:1px solid var(--rule-2); padding-left:2.25rem; }
.price__col .eyebrow{ margin-bottom:1.25rem; }
.price__fig{
  font-family:var(--f-dsp); font-weight:300;
  font-size:clamp(3.25rem,2rem + 4.4vw,5.5rem);
  line-height:.95; letter-spacing:-.04em;
  color:var(--ink); margin:0 0 1.25rem;
}
.price__per{
  font-size:.26em; letter-spacing:.02em; color:var(--muted);
  margin-left:.25em; vertical-align:baseline;
}
.price__d{ max-width:26rem; font-size:.97rem; line-height:1.55; margin:0; }

.price__notes{
  list-style:none; margin:2.25rem 0 0; padding:0;
  display:grid; gap:.85rem;
}
.price__notes li{ display:flex; gap:1rem; align-items:baseline; }
.price__notes .mono{
  flex:none; font-size:.68rem; letter-spacing:.18em; color:var(--accent);
}
.price__notes p{ margin:0; font-size:.95rem; color:var(--muted); }

/* ── marquee ─────────────────────────────────────────────── */

.marq{
  position:relative; z-index:1;
  overflow:hidden;
  border-bottom:1px solid var(--rule);
  padding:1.6rem 0;
}
.marq__track{
  display:flex; width:max-content;
  animation:marq 52s linear infinite;
}
.marq__set{ display:flex; align-items:center; flex:none; }
.marq__set span{
  font-family:var(--f-dsp); font-style:italic; font-weight:300;
  font-size:clamp(1.1rem,.9rem + .9vw,1.7rem);
  letter-spacing:-.02em; color:var(--ink-2);
  white-space:nowrap;
}
.marq__set i{
  color:var(--accent); font-style:normal;
  margin:0 clamp(1.25rem,3vw,2.5rem);
}
@keyframes marq{ to{ transform:translateX(-50%); } }
.marq:hover .marq__track{ animation-play-state:paused; }

/* ── CTA ─────────────────────────────────────────────────── */

.cta{
  position:relative; z-index:1;
  background:var(--ink); color:var(--bg);
  border-top:1px solid var(--ink);
  padding:clamp(6rem,16vh,11rem) var(--gut);
}
.cta .eyebrow{ color:#8A8377; }
.cta__h{
  font-family:var(--f-dsp); font-weight:300;
  font-size:clamp(2.5rem,1.2rem + 6.2vw,6.5rem);
  line-height:.98; letter-spacing:-.038em;
  margin:0 0 clamp(2rem,5vh,3rem); color:var(--bg);
}
.cta__sub{
  max-width:38rem; margin:0 0 clamp(2rem,4.5vh,2.75rem);
  font-size:clamp(1rem,.95rem + .35vw,1.15rem); line-height:1.55;
  color:#C9BFAE;
}
/* The number itself, as the primary object of the section. */
.cta__num{
  display:inline-block; text-decoration:none;
  border-top:1px solid #3A342B; border-bottom:1px solid #3A342B;
  padding:1.4rem 0; margin-bottom:clamp(2rem,4.5vh,2.75rem);
}
.cta__num-l{
  display:block; margin-bottom:.7rem;
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:#8A8377;
}
.cta__num-n{
  display:block;
  font-family:var(--f-mno); font-weight:500;
  font-size:clamp(1.5rem,1rem + 2.1vw,2.6rem);
  letter-spacing:.02em; color:var(--bg);
  transition:color .45s var(--ease);
}
.cta__num:hover .cta__num-n{ color:var(--accent); }

.cta__actions{ display:flex; flex-wrap:wrap; gap:.75rem; }
.cta .btn{ background:var(--bg); color:var(--ink); border-color:var(--bg); }
.cta .btn:hover{ background:var(--accent); border-color:var(--accent); color:var(--bg); }
.cta .btn--ghost{ background:transparent; color:var(--bg); border-color:#3A342B; }
.cta .btn--ghost:hover{ background:transparent; color:var(--accent); border-color:var(--accent); }
.cta__fine{
  margin-top:clamp(2.5rem,6vh,3.5rem);
  font-size:.85rem; color:#8A8377;
}
.cta__fine .mono{ color:var(--bg); letter-spacing:.14em; }

/* ── footer ──────────────────────────────────────────────── */

.foot{
  position:relative; z-index:1;
  background:var(--ink); color:#8A8377;
  border-top:1px solid #3A342B;
}
.foot__in{
  max-width:var(--max); margin:0 auto;
  padding:1.5rem var(--gut);
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
}
.foot .mono{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; }
.foot__c{ color:#5A544A; }
.foot__links{ margin-left:auto; display:flex; gap:1.5rem; flex-wrap:wrap; }
.foot__links a{
  color:#8A8377; text-decoration:none;
  font-family:var(--f-mno); font-size:.7rem;
  letter-spacing:.13em; text-transform:uppercase;
  transition:color .4s var(--ease);
}
.foot__links a:hover{ color:var(--bg); }

/* ── motion: entry states ────────────────────────────────── */

[data-anim]{ will-change:transform,opacity; }

[data-anim="fade"]{
  opacity:0; transform:translateY(18px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
[data-anim="rise"]{
  opacity:0; transform:translateY(105%);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* Inside a .line mask the slide is pure translate — no fade, cleaner edge. */
.line > [data-anim="rise"]{ opacity:1; }

[data-anim].is-in{ opacity:1; transform:none; }

[data-anim="rule"]{ transition:transform 1.4s var(--ease); }
[data-anim="rule"].is-in{ transform:scaleX(1); }

/* Staggering, driven by data-delay */
[data-delay="1"]{ transition-delay:.07s; }
[data-delay="2"]{ transition-delay:.14s; }
[data-delay="3"]{ transition-delay:.21s; }
[data-delay="4"]{ transition-delay:.28s; }
[data-delay="5"]{ transition-delay:.35s; }
[data-delay="6"]{ transition-delay:.42s; }

/* ── reduced motion: everything resolves, nothing moves ──── */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-anim]{ opacity:1 !important; transform:none !important; }
  [data-anim="rule"]{ transform:scaleX(1) !important; }
  .msg{ opacity:1 !important; transform:none !important; }
  .thread__stage{ height:auto; }
  .thread__sticky{ position:static; height:auto; padding:4rem 0; }
  .phone{ height:auto; }
  .phone__msgs{ overflow:visible; -webkit-mask-image:none; mask-image:none; }
  .phone__reel{ transform:none !important; }
  .marq__track{ animation:none; }
}

/* ── live status dot: breathes while work is open, solid when done ── */
.dot{ animation:breathe 2.4s var(--ease) infinite; }
.dot.is-done{ animation:none; background:var(--ink); }
@keyframes breathe{
  0%,100%{ opacity:1;   transform:scale(1);   }
  50%    { opacity:.35; transform:scale(.72); }
}
@media (prefers-reduced-motion:reduce){
  .dot{ animation:none !important; }
}