/* ============================================================
   HUMOTIX — STUDIO (base)
   Shared chrome for every studio page: tokens, type, buttons,
   bands, reveals, nav/footer treatment.

   Page-specific layout lives beside this file — the capabilities
   page loads css/sections/capabilities.css on top.

   PALETTE — ember on paper and ink, per the brand brief.
   The page is paper; `.st-night` sections are ink. Both re-point
   the SAME token names, so every component below works in either
   without a second set of rules. Ember lifts a step on ink so it
   reads at the same strength against a dark ground.

   Ember is a signal, not a theme: under ~5% of any viewport, on
   numbers, rules, one word per headline, and the primary action.

   To re-theme the site, change §1 only. Nothing below hard-codes
   a colour.
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */
body.st{
  --st-bg:#F6F2EE;
  --st-bg-2:#EDE7E1;
  --st-surface:#FFFFFF;
  --st-text:#130F10;
  --st-text-2:#59524E;
  --st-text-3:#8A817C;
  --st-hair:rgba(19,15,16,.11);
  --st-hair-2:rgba(19,15,16,.20);

  --st-ember:#C25540;
  --st-ember-hi:#D96B52;
  --st-ember-deep:#9E4130;
  --st-ember-fill:rgba(194,85,64,.09);
  --st-ember-line:rgba(194,85,64,.30);
  --st-glow:rgba(194,85,64,.26);

  --st-maxw:1320px;
  --st-gutter:clamp(20px,5vw,72px);
  --st-bay:clamp(84px,11vw,168px);
  --st-r:16px;
  --st-r-lg:20px;
  --st-measure:64ch;

  --st-shadow:0 24px 60px -30px rgba(19,15,16,.30);
  --st-shadow-lg:0 46px 96px -44px rgba(19,15,16,.40);

  /* Film grain, the texture that stops flat CSS looking flat. */
  --st-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  background:var(--st-bg);
  color:var(--st-text);
}

/* Ink sections. Ember lifts so it holds the same weight on a dark ground. */
.st-night{
  --st-bg:#130F10;
  --st-bg-2:#1C1718;
  --st-surface:#1C1718;
  --st-text:#F6F2EE;
  --st-text-2:#B3ABA6;
  --st-text-3:#8A817C;
  --st-hair:rgba(246,242,238,.11);
  --st-hair-2:rgba(246,242,238,.21);

  --st-ember:#D96B52;
  --st-ember-hi:#EC8468;
  --st-ember-deep:#B4472F;
  --st-ember-fill:rgba(217,107,82,.11);
  --st-ember-line:rgba(217,107,82,.32);
  --st-glow:rgba(217,107,82,.34);

  --st-shadow:0 24px 60px -28px rgba(0,0,0,.70);
  --st-shadow-lg:0 46px 96px -40px rgba(0,0,0,.85);

  background:var(--st-bg);
  color:var(--st-text);
}

/* Re-point the product tokens layout.css uses for the nav and mobile menu. */
body.st{
  --bg:var(--st-bg); --ink:var(--st-text);
  --ink-soft:var(--st-text-2); --ink-faint:var(--st-text-3);
  --line:var(--st-hair); --line-2:var(--st-hair-2);
  --ember:var(--st-ember); --ember-soft:var(--st-ember-hi);
}

/* ============================================================
   2. LAYOUT
   ============================================================ */
.st-wrap{
  max-width:var(--st-maxw);
  margin-inline:auto;
  padding-inline:var(--st-gutter);
}

/* Grid and flex items default to min-width:auto and will not shrink below
   their content, which silently pushes tracks wider than the viewport on a
   phone. Every ch-based measure below is also capped at 100% for the same
   reason. */
.st-wrap > *, .st-split > *, .st-grid > *, .st-cols > *,
.st-cap-row > *, .st-sector > *{ min-width:0; }

.st-band{ padding-block:var(--st-bay); position:relative; }
.st-band + .st-band{ border-top:1px solid var(--st-hair); }
.st-night{ border-top:none !important; }
.st-night + .st-band{ border-top:none; }

/* Grain on ink only — on paper it muddies the page. */
.st-night::after{
  content:'';
  position:absolute; inset:0;
  background-image:var(--st-grain);
  background-size:200px 200px;
  opacity:.04;
  mix-blend-mode:overlay;
  pointer-events:none;
  z-index:0;
}
.st-night > *{ position:relative; z-index:1; }

.st-split{ display:grid; gap:clamp(40px,5vw,80px); align-items:center; }
@media (min-width:980px){
  .st-split{ grid-template-columns:1fr 1fr; }
  .st-split-wide{ grid-template-columns:1.1fr .9fr; }
}
.st-grid{ display:grid; gap:clamp(18px,2vw,26px); }
@media (min-width:720px){ .st-grid-2{ grid-template-columns:1fr 1fr; } }
@media (min-width:1040px){ .st-grid-4{ grid-template-columns:repeat(2,1fr); } }
.st-cols{ display:grid; gap:clamp(26px,3vw,44px); }
@media (min-width:720px){ .st-cols{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .st-cols{ grid-template-columns:repeat(3,1fr); } }

/* ============================================================
   3. TYPE
   Display is Space Grotesk 700 at -0.035em / 0.96. Exactly one
   Instrument Serif italic word per headline, with its trailing
   punctuation INSIDE the italic — a 90px sans full stop beside a
   serif italic reads as a stray dot.
   ============================================================ */
.st-h1,.st-h2,.st-h3,.st-h4{
  font-family:var(--font-sans);
  font-weight:700;
  letter-spacing:-.035em;
  line-height:.96;
  text-wrap:balance;
  color:var(--st-text);
  margin:0;
}
.st-h1{ font-size:clamp(2.75rem,7vw,6.5rem); }
.st-h2{ font-size:clamp(2.125rem,4.4vw,4rem); }
.st-h3{ font-size:clamp(1.375rem,2.1vw,2rem); letter-spacing:-.03em; line-height:1.06; }
.st-h4{ font-size:clamp(1.125rem,1.5vw,1.375rem); letter-spacing:-.025em; line-height:1.15; }

.st-ital{
  font-family:var(--font-serif);
  font-style:italic; font-weight:400;
  letter-spacing:-.01em;
  color:var(--st-ember);
}

.st-sub{
  font-size:clamp(1.0625rem,1.3vw,1.25rem);
  line-height:1.62;
  color:var(--st-text-2);
  max-width:min(var(--st-measure),100%);
  margin:0;
}
.st-body{
  font-size:1.0625rem; line-height:1.68;
  color:var(--st-text-2);
  max-width:min(var(--st-measure),100%);
  margin:0;
}
@media (min-width:761px){ .st-body{ font-size:1.125rem; } }

.st-mono{
  font-family:var(--font-mono); font-weight:500;
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--st-text-3);
}

.st-eyebrow{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-mono); font-weight:500;
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--st-ember);
  margin:0 0 clamp(18px,2.2vw,28px);
}
.st-eyebrow::before{
  content:''; width:24px; height:1px; flex:none;
  background:var(--st-ember);
}

/* A section header block. No max-width: a ch cap here resolves against the
   wrapper's 17px body text (~160px), not the 80px headline inside it, which
   overflowed the H2 and let its reveal mask slice the words in half. The
   headlines are hand-broken into lines instead. */
.st-head{ margin-bottom:clamp(40px,5vw,76px); }
.st-head .st-sub{ margin-top:clamp(18px,2.2vw,28px); }

/* ============================================================
   4. BUTTONS, LINKS, CHIPS
   ============================================================ */
.st-ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(14px,1.6vw,20px); }

.st-btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-sans); font-weight:600; font-size:.9375rem;
  letter-spacing:-.01em;
  padding:15px 26px;
  border-radius:999px;
  border:1px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:transform .25s var(--ease), background .25s var(--ease-soft),
             border-color .25s var(--ease-soft), box-shadow .25s var(--ease-soft),
             color .25s var(--ease-soft);
  will-change:transform;
}
.st-btn-primary{
  background:var(--st-ember); color:#FFF7F4;
  box-shadow:0 12px 34px -12px var(--st-glow);
}
.st-btn-primary:hover{ background:var(--st-ember-deep); box-shadow:0 16px 40px -10px var(--st-glow); }
.st-night .st-btn-primary:hover{ background:var(--st-ember-hi); }

.st-btn-ghost{ background:transparent; color:var(--st-text); border-color:var(--st-hair-2); }
.st-btn-ghost:hover{ border-color:var(--st-ember); color:var(--st-ember); }

.st-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-sans); font-weight:600; font-size:.9375rem;
  color:var(--st-text); text-decoration:none; position:relative;
}
.st-link::after{
  content:''; position:absolute; left:0; right:18px; bottom:-3px;
  height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.st-link:hover{ color:var(--st-ember); }
.st-link:hover::after{ transform:scaleX(1); }
.st-link .st-arrow{ transition:transform .4s var(--ease); }
.st-link:hover .st-arrow{ transform:translateX(4px); }

.st-chip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-weight:500;
  font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--st-text-2);
  padding:7px 13px;
  border:1px solid var(--st-hair);
  background:var(--st-ember-fill);
  border-radius:999px; white-space:nowrap;
}
.st-chip-on{ color:var(--st-ember); border-color:var(--st-ember-line); }
.st-chips{ display:flex; flex-wrap:wrap; gap:9px; margin:0; padding:0; list-style:none; }

/* ============================================================
   5. SURFACES
   ============================================================ */
.st-card{
  background:var(--st-surface);
  border:1px solid var(--st-hair);
  border-radius:var(--st-r-lg);
  box-shadow:var(--st-shadow);
  position:relative;
}
.st-night .st-card{ background:var(--st-bg-2); }
.st-card-lift{ transition:border-color .4s var(--ease-soft), transform .4s var(--ease); }
.st-card-lift:hover{ border-color:var(--st-ember-line); transform:translateY(-3px); }

/* ============================================================
   6. THE BRIDGE THREAD
   One 1px ember line down the page, filling as you scroll.
   Desktop only — on a phone it has nowhere to live.
   ============================================================ */
.st-thread{
  position:fixed; top:0;
  left:max(calc((100vw - var(--st-maxw))/2 + 26px), 26px);
  width:1px; height:100vh;
  pointer-events:none; z-index:2;
  background:rgba(138,129,124,.22);
  display:none;
}
.st-thread::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(var(--st-ember),var(--st-ember-hi));
  transform:scaleY(var(--st-progress,0));
  transform-origin:top;
}
@media (min-width:1280px){ .st-thread{ display:block; } }

/* ============================================================
   7. FOOTER
   ============================================================ */
.st-foot{
  background:#130F10; color:#F6F2EE;
  --st-text:#F6F2EE; --st-text-2:#B3ABA6; --st-text-3:#8A817C;
  --st-hair:rgba(246,242,238,.11);
  --st-ember:#D96B52; --st-ember-hi:#EC8468;
  /* The bottom padding is clearance for the wordmark below, not whitespace. */
  padding-block:clamp(64px,8vw,104px) clamp(104px,13vw,180px);
  position:relative; overflow:hidden;
}
/* Content sits above the wordmark. The old product footer used z-index:-1 on
   its wordmark, which worked because that footer had no background of its own
   — here the ink ground would paint straight over it. */
.st-foot .st-wrap{ position:relative; z-index:1; }

/* The wordmark: the brand set enormous at very low alpha and cropped by the
   bottom edge. Texture in the page, never a headline. Absolutely positioned,
   so it adds no height of its own. */
.st-foot-wordmark{
  position:absolute; left:50%; bottom:-.30em;
  transform:translateX(-50%);
  z-index:0;
  pointer-events:none; user-select:none; white-space:nowrap;
  font-family:var(--font-sans); font-weight:700;
  letter-spacing:-.055em; line-height:.8;
  font-size:clamp(96px,20.5vw,320px);
  color:var(--st-text); opacity:.07;
  -webkit-mask-image:linear-gradient(to bottom,#000 34%,rgba(0,0,0,.25) 100%);
          mask-image:linear-gradient(to bottom,#000 34%,rgba(0,0,0,.25) 100%);
}
@media (max-width:560px){
  /* Scaled off character count rather than the desktop ratio: "HUMOTIX" is
     ~4.2em wide at this tracking, so 26vw would clip the H and the X off both
     edges. 23vw lands it at ~97% — the full word, still edge to edge. */
  .st-foot-wordmark{ bottom:-.26em; font-size:23vw; letter-spacing:-.045em; opacity:.09; }
}
.st-foot-h{
  font-family:var(--font-sans); font-weight:700;
  font-size:clamp(2.25rem,6vw,5rem);
  letter-spacing:-.04em; line-height:.96;
  margin:0 0 clamp(36px,4.4vw,60px);
  max-width:min(18ch,100%);
  text-wrap:balance;
  color:var(--st-text);
}
.st-foot-cols{
  display:grid; gap:clamp(30px,4vw,52px);
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  padding-top:clamp(34px,4vw,52px);
  border-top:1px solid var(--st-hair);
}
.st-foot-col h4{
  font-family:var(--font-mono); font-weight:500;
  font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--st-text-3); margin:0 0 16px;
}
.st-foot-col a, .st-foot-col p{
  display:block; margin:0;
  font-size:.9375rem; line-height:1.85;
  color:var(--st-text-2); text-decoration:none;
  transition:color .25s var(--ease-soft);
}
.st-foot-col a:hover{ color:var(--st-ember-hi); }
.st-foot-base{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px;
  justify-content:space-between;
  margin-top:clamp(40px,5vw,64px); padding-top:24px;
  border-top:1px solid var(--st-hair);
  font-family:var(--font-mono); font-weight:500;
  font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--st-text-3);
}
.st-foot-base a{ color:inherit; text-decoration:none; }
.st-foot-base a:hover{ color:var(--st-ember-hi); }
.st-clock{ font-variant-numeric:tabular-nums; }

/* ============================================================
   8. MOBILE MENU on ink
   layout.css styles it for a light page; the nav itself is handled
   by the token re-point above plus `.over-hero`, which studio.js
   keeps in sync with whatever band is behind the bar.
   ============================================================ */
.mobile-menu{ background:rgba(19,15,16,.96); }
.mobile-menu a{ color:#F6F2EE; border-bottom-color:rgba(246,242,238,.11); }
.mobile-menu .btn{ background:#C25540; color:#FFF7F4; }
.mobile-menu .btn:hover{ background:#D96B52; color:#FFF7F4; }

/* ============================================================
   8b. HOME COMPONENTS
   Used by the studio home. Kept here rather than in a third
   stylesheet because they are generic studio furniture — the
   capabilities page can reach for any of them too.
   ============================================================ */

/* ---- Hero ---- */
.st-hero{ padding-top:clamp(140px,17vw,230px); padding-bottom:clamp(72px,9vw,124px); }
/* Full width, one column. The headline carries the hero on its own, so it runs
   at the page display scale rather than the reduced size it needed when it sat
   beside a panel. */
.st-hero .st-h1{ max-width:min(16ch,100%); }
.st-hero-in{ display:grid; gap:clamp(44px,5vw,80px); }
.st-hero-copy{ display:grid; gap:clamp(24px,2.6vw,34px); }
.st-hero-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  margin-top:clamp(48px,6vw,84px); padding-top:22px;
  border-top:1px solid var(--st-hair);
}
.st-avail{ display:inline-flex; align-items:center; gap:10px; }
.st-pulse{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--st-ember);
  box-shadow:0 0 0 0 var(--st-glow);
  animation:stPulse 2.4s var(--ease-soft) infinite;
}
@keyframes stPulse{
  0%{ box-shadow:0 0 0 0 var(--st-glow); }
  70%{ box-shadow:0 0 0 9px rgba(0,0,0,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,0,0,0); }
}

/* ---- Engagement tiers ---- */
.st-tiers{ display:grid; gap:clamp(18px,2vw,24px); }
@media (min-width:900px){ .st-tiers{ grid-template-columns:repeat(3,1fr); } }
/* Four steps: two up at tablet, four across once there is room. Four narrow
   columns below ~1180px squeeze the copy into ribbons. */
@media (min-width:680px){ .st-tiers-4{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1180px){ .st-tiers-4{ grid-template-columns:repeat(4,1fr); } }
.st-tier{ padding:clamp(26px,2.8vw,38px); display:grid; gap:14px; align-content:start; overflow:hidden; }
.st-tier-on{ border-color:var(--st-ember-line); }
.st-tier-tag{
  position:absolute; top:0; right:clamp(26px,2.8vw,38px);
  background:var(--st-ember); color:#FFF7F4;
  font-family:var(--font-mono); font-weight:500;
  font-size:.5625rem; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 11px; border-radius:0 0 9px 9px;
}
.st-tier-when{
  font-family:var(--font-mono); font-weight:500;
  font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--st-ember);
}
.st-tier p{ margin:0; font-size:.9375rem; line-height:1.6; color:var(--st-text-2); }
.st-tier-note{
  margin-top:4px; padding-top:14px;
  border-top:1px solid var(--st-hair);
  font-family:var(--font-mono); font-size:.6875rem;
  letter-spacing:.07em; color:var(--st-text-3);
}

/* ---- Sprint day timeline ---- */
.st-days{
  display:grid; gap:0;
  margin-top:clamp(32px,4vw,52px);
  border-top:1px solid var(--st-hair);
}
@media (min-width:860px){ .st-days{ grid-template-columns:repeat(4,1fr); } }
.st-day{
  padding:clamp(22px,2.4vw,30px) clamp(16px,2vw,26px) clamp(22px,2.4vw,30px) 0;
  border-bottom:1px solid var(--st-hair);
  display:grid; gap:9px; align-content:start; position:relative;
}
@media (min-width:860px){
  .st-day{ border-bottom:none; padding-inline:clamp(16px,2vw,26px); }
  .st-day:first-child{ padding-left:0; }
}
.st-day::before{
  content:''; position:absolute; top:-1px; left:0;
  width:26px; height:1px; background:var(--st-ember);
}
.st-day-when{
  font-family:var(--font-mono); font-weight:500;
  font-size:.625rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--st-ember);
}
.st-day b{ font-size:1.0625rem; font-weight:600; letter-spacing:-.02em; color:var(--st-text); }
.st-day span{ font-size:.875rem; line-height:1.55; color:var(--st-text-2); }

/* ---- "Also built for" ----
   Sits under the sector list. The four sectors read as depth; this reads as
   reach. Without it the list is a closed set and anyone outside it leaves. */
.st-sector-more{
  margin-top:clamp(34px,4.2vw,58px);
  display:grid; gap:18px; justify-items:start;
  max-width:min(80ch,100%);
}
.st-sector-more .st-body{ font-size:1rem; }

/* ---- Principles ---- */
.st-principle{ padding:clamp(24px,2.6vw,34px); display:grid; gap:10px; align-content:start; }
.st-principle b{ font-size:1.0625rem; font-weight:700; letter-spacing:-.025em; color:var(--st-text); }
.st-principle span{ font-size:.9375rem; line-height:1.6; color:var(--st-text-2); }

/* ---- Founder ---- */
.st-founder{
  border-radius:var(--st-r-lg); overflow:hidden;
  border:1px solid var(--st-hair-2);
  position:relative; aspect-ratio:4/5; max-width:400px;
  box-shadow:var(--st-shadow-lg);
}
.st-founder img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.06);
}
.st-sign{
  font-family:var(--font-serif); font-style:italic;
  font-size:clamp(1.5rem,2.2vw,1.875rem); color:var(--st-text); margin:0;
}
.st-sign-role{
  font-family:var(--font-mono); font-weight:500;
  font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--st-text-3); margin:6px 0 0;
}

/* ---- FAQ ---- */
.st-faq{ border-top:1px solid var(--st-hair); }
.st-faq details{ border-bottom:1px solid var(--st-hair); }
.st-faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:clamp(20px,2.2vw,28px) 0;
  cursor:pointer; list-style:none;
  font-size:clamp(1.0625rem,1.5vw,1.25rem); font-weight:600;
  letter-spacing:-.02em; color:var(--st-text);
  transition:color .25s var(--ease-soft);
}
.st-faq summary::-webkit-details-marker{ display:none; }
.st-faq summary:hover{ color:var(--st-ember); }
.st-faq summary::after{
  content:''; flex:none; width:11px; height:11px;
  border-right:1.5px solid var(--st-ember); border-bottom:1.5px solid var(--st-ember);
  transform:rotate(45deg) translate(-3px,-3px);
  transition:transform .3s var(--ease);
}
.st-faq details[open] summary::after{ transform:rotate(225deg) translate(-3px,-3px); }
.st-faq-a{
  padding:0 0 clamp(22px,2.4vw,30px);
  font-size:1rem; line-height:1.65; color:var(--st-text-2);
  max-width:min(70ch,100%); margin:0;
}

/* ---- Final CTA ---- */
.st-final{ position:relative; overflow:hidden; }
.st-final::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 120% at 50% 112%, var(--st-ember-fill), transparent 70%);
}
.st-final > *{ position:relative; }
.st-final .st-ctas{ margin-top:clamp(30px,3.6vw,44px); }

/* ============================================================
   9. REVEALS
   Reuses the one .reveal/.in IntersectionObserver in
   js/lib/motion.js — no second motion system.
   ============================================================ */
.st-rise{
  display:block; overflow:hidden;
  /* Display line-height is below 1, so descenders and the italic's swash fall
     outside the line box and the mask would shear them. The padding gives the
     mask room, the negative margin keeps the rhythm, and the child then has to
     travel past 100% to clear the taller mask. */
  padding-bottom:.14em; margin-bottom:-.14em;
  padding-right:.06em; margin-right:-.06em;
}
.st-rise > *{
  display:block;
  transform:translateY(125%);
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}
.st-rise.in > *{ transform:translateY(0); }
.st-rise-2.in > *{ transition-delay:.08s; }
.st-rise-3.in > *{ transition-delay:.16s; }

.st-fade{
  opacity:0; transform:translateY(16px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.st-fade.in{ opacity:1; transform:none; }
.st-fade-2.in{ transition-delay:.09s; }
.st-fade-3.in{ transition-delay:.18s; }
.st-fade-4.in{ transition-delay:.27s; }

/* ============================================================
   10. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .st-rise > *, .st-fade{
    transform:none !important;
    transition:opacity .2s linear !important;
  }
  .st-rise > *{ opacity:1; }
  .st-fade{ opacity:1; }
  .st-card-lift:hover{ transform:none; }
  .st-thread{ display:none; }
}

/* ============================================================
   11. FOCUS, SELECTION, SKIP
   ============================================================ */
.st :where(a,button,input,textarea,select,summary):focus-visible{
  outline:2px solid var(--st-ember);
  outline-offset:3px;
  border-radius:4px;
}
.st ::selection{ background:var(--st-ember); color:#FFF7F4; }

.st-skip{
  position:absolute; left:-9999px; top:0;
  background:var(--st-ember); color:#FFF7F4;
  padding:12px 20px; border-radius:0 0 10px 0;
  font-family:var(--font-sans); font-weight:600; font-size:.875rem;
  text-decoration:none; z-index:999;
}
.st-skip:focus{ left:0; }

/* ============================================================
   12. PHONE
   ============================================================ */
@media (max-width:760px){
  .st-ctas .st-btn{ width:100%; justify-content:center; }
  .st-foot-base{ flex-direction:column; align-items:flex-start; }
}