/* ============================================================
   LESREG — Koto hero + Anthropic body (index.html only).
   One giant statement, then a short, precise ivory page:
   two cards, a list, one statement, footer. Flat, calm, ink.
   ============================================================ */

/* ---------- self-hosted theme fonts ---------- */
@font-face{ font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/instrumentserif-normal-400.woff2') format('woff2'); }
@font-face{ font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap;
  src:url('fonts/instrumentserif-italic-400.woff2') format('woff2'); }
@font-face{ font-family:'Barlow'; font-style:normal; font-weight:300; font-display:swap;
  src:url('fonts/barlow-normal-300.woff2') format('woff2'); }
@font-face{ font-family:'Barlow'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/barlow-normal-400.woff2') format('woff2'); }
@font-face{ font-family:'Barlow'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/barlow-normal-500.woff2') format('woff2'); }
@font-face{ font-family:'Barlow'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/barlow-normal-600.woff2') format('woff2'); }
@font-face{ font-family:'Kanit'; font-style:normal; font-weight:900; font-display:swap;
  src:url('fonts/kanit-normal-900.woff2') format('woff2'); }

/* ---------- ivory base (flat, Anthropic-calm) ---------- */
:root{ --ax-bg:#f2ece0; --ax-card:#eae2d2; --ax-ink:#1f1b16; --ax-soft:rgba(31,27,22,.7);
  --ax-faint:rgba(31,27,22,.45); --ax-line:rgba(31,27,22,.16); --ax-spruce:#1f857a; }
html{ background:var(--ax-bg); }
body{ background:var(--ax-bg); color:var(--ax-ink); font-family:'Barlow',var(--ui),sans-serif; }
body::after{ content:none; }
::selection{ background:rgba(31,133,122,.3); color:var(--ax-ink); }
.fyon-reveal{ position:relative; z-index:1; }
#fyon,#kunder,#contact{ scroll-margin-top:76px; }

/* ============================================================
   NAV — clean Anthropic bar: lockup · links · one CTA
   ============================================================ */
.nav{ position:fixed; top:0; left:0; right:0; transform:none; width:auto; max-width:none; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:14px clamp(18px,4vw,48px); border-radius:0;
  background:rgba(242,236,224,.82); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:none; border-bottom:1px solid rgba(31,27,22,0); transition:border-color .3s ease; }
.nav.scrolled{ border-bottom-color:var(--ax-line); background:rgba(242,236,224,.92); box-shadow:none; }
.brand-l{ display:inline-flex; align-items:center; gap:10px; font-family:var(--sora,'Sora'),sans-serif; font-weight:600;
  font-size:19px; letter-spacing:-.02em; color:var(--ax-ink); }
.gn-links{ display:flex; align-items:center; gap:6px; }
.gn-links a{ padding:8px 12px; font-size:14.5px; font-weight:500; color:var(--ax-soft); border-radius:999px;
  transition:background .25s ease, color .25s ease; }
.gn-links a:hover{ background:rgba(31,27,22,.06); color:var(--ax-ink); }
.gn-cta{ position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; gap:7px;
  white-space:nowrap; background:rgba(31,27,22,.88); color:#f6f1e7;
  -webkit-backdrop-filter:blur(12px) saturate(180%); backdrop-filter:blur(12px) saturate(180%);
  border-radius:999px; padding:9px 17px; font-size:14px; font-weight:600;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.07);
  transition:transform .3s cubic-bezier(.2,.85,.25,1), box-shadow .3s ease; }
.gn-cta::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.2) 46%,
    rgba(255,255,255,.38) 50%, rgba(255,255,255,.2) 54%, transparent 68%);
  transform:translateX(-140%); transition:transform .9s cubic-bezier(.3,.7,.2,1); }
.gn-cta:hover::after{ transform:translateX(140%); }
.gn-cta:hover{ transform:translateY(-1px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.24), 0 10px 24px -12px rgba(31,27,22,.5), 0 0 0 5px rgba(31,27,22,.07); }
.gn-cta:active{ transform:scale(.95); transition-duration:.09s; box-shadow:inset 0 2px 6px rgba(0,0,0,.35); }
.gn-cta .ic{ width:15px; height:15px; }
@media(max-width:760px){ .gn-links{ display:none; } }

.ic{ width:18px; height:18px; flex:none; }

/* the Lesreg orbit mark */
.orbm{ position:relative; display:inline-block; width:var(--s,22px); height:var(--s,22px); flex:none; }
.orbm i{ position:absolute; width:23%; height:23%; border-radius:26%; background:var(--ax-ink); opacity:.9; }
.orbm .n{ top:0; left:38.5%; } .orbm .e{ top:38.5%; left:77%; }
.orbm .s2{ top:77%; left:38.5%; } .orbm .w{ top:38.5%; left:0; }
.orbm .c{ top:38.5%; left:38.5%; background:var(--ax-spruce); opacity:1; }

/* ============================================================
   HERO — Koto: the statement IS the section
   ============================================================ */
.khero{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:110px clamp(18px,4vw,48px) clamp(26px,4vh,44px); }
.kh{ margin:0 0 auto; padding-top:clamp(20px,6vh,60px); font-family:'Kanit','Barlow',sans-serif; font-weight:900;
  text-transform:uppercase; color:var(--ax-ink);
  font-size:clamp(3.4rem,12.5vw,12.5rem); line-height:.92; letter-spacing:-.012em; }
.kh .khl{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.kh .khl i{ display:inline-block; font-style:normal; transform:translateY(112%); transition:transform 1s cubic-bezier(.16,1,.3,1) .1s; will-change:transform; }
.kh .khl:nth-child(2) i{ transition-delay:.22s; }
.kh .khl:nth-child(3) i{ transition-delay:.34s; }
.khero.go .khl i{ transform:translateY(0); }
.kh .em{ color:var(--ax-spruce); }
.kmeta{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap;
  border-top:1px solid var(--ax-line); padding-top:18px;
  font-size:14px; font-weight:500; color:var(--ax-soft);
  opacity:0; transform:translateY(10px); transition:opacity .8s ease .7s, transform .9s cubic-bezier(.16,1,.3,1) .7s; }
.khero.go .kmeta{ opacity:1; transform:none; }
.kmeta b{ font-weight:600; color:var(--ax-ink); }
.kscroll{ font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ax-faint); }

/* ============================================================
   LATEST PRODUCTION — the mark assembles, then: Introducing Fyon
   ============================================================ */
.lpro .s-inner{ padding-top:clamp(70px,11vw,150px); padding-bottom:clamp(60px,9vw,130px); }
.lp-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; }
/* the Fyon mark — teal glass tile, double chevron (this IS Fyon, not Lesreg) */
.fmk{ position:relative; --s:clamp(84px,11vw,124px); width:var(--s); height:var(--s);
  margin-bottom:clamp(24px,4vw,40px); border-radius:24%; display:grid; place-items:center;
  background:linear-gradient(150deg,#34a596,#13635a);
  box-shadow:0 26px 52px -20px rgba(15,90,82,.55), 0 8px 18px -8px rgba(15,90,82,.35),
    inset 0 2px 2px rgba(214,245,239,.55), inset 0 0 0 1px rgba(150,222,211,.28); }
.fmk::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,.22), transparent 46%); }
.fmk svg{ width:57%; height:57%; overflow:visible; }
.fm-chev{ transform-box:fill-box; transform-origin:center; }
.lp-k{ margin:0 0 14px; font-family:'Instrument Serif',serif; font-style:italic; font-weight:400;
  font-size:clamp(19px,2.3vw,27px); color:var(--ax-soft); }
.lp-h{ margin:0 0 18px; font-family:'Instrument Serif',serif; font-style:italic; font-weight:400;
  font-size:clamp(3.1rem,9vw,7.4rem); line-height:.95; letter-spacing:-.02em; color:var(--ax-ink); }
.lp-h em{ font-style:italic; background:linear-gradient(96deg,#34a596,#1f857a 42%,#2b7b86);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.lp-sub{ margin:0 0 10px; font-size:clamp(15.5px,1.8vw,18.5px); font-weight:400;
  line-height:1.55; color:var(--ax-soft); max-width:46ch; }
.lp-tags{ margin:0 0 clamp(26px,4vw,38px); font-family:var(--mono,monospace); font-size:11.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ax-spruce); white-space:nowrap; }
.lp-note{ margin:18px 0 0; font-family:'Instrument Serif',serif; font-style:italic;
  font-size:clamp(14.5px,1.5vw,16.5px); color:var(--ax-faint); }

/* entrance — the tile springs in, then each chevron draws itself and rises */
.fmk.assemble{ opacity:0; transform:scale(.5) rotate(-6deg); }
.fmk.assemble .fm-chev{ stroke-dasharray:27; stroke-dashoffset:27; opacity:0; }
.fmk.assemble.play{ animation:fmPop .75s cubic-bezier(.34,1.56,.64,1) both; }
.fmk.assemble.play .fm-chev-1{ animation:fmDraw .65s cubic-bezier(.25,.46,.45,.94) .3s both; }
.fmk.assemble.play .fm-chev-2{ animation:fmDraw2 .65s cubic-bezier(.25,.46,.45,.94) .48s both; }
@keyframes fmPop{
  0%{ opacity:0; transform:scale(.5) rotate(-6deg); }
  60%{ opacity:1; }
  100%{ opacity:1; transform:scale(1) rotate(0deg); } }
@keyframes fmDraw{
  0%{ stroke-dashoffset:27; opacity:0; transform:translateY(5px); }
  30%{ opacity:1; }
  100%{ stroke-dashoffset:0; opacity:1; transform:translateY(0); } }
@keyframes fmDraw2{
  0%{ stroke-dashoffset:27; opacity:0; transform:translateY(5px); }
  30%{ opacity:.5; }
  100%{ stroke-dashoffset:0; opacity:.5; transform:translateY(0); } }
/* idle — the chevrons breathe upward in turn (the Fyon pulse) */
.fmk.bm-anim .fm-chev-1{ animation:bmBreathA 4.4s cubic-bezier(.45,0,.55,1) infinite; }
.fmk.bm-anim .fm-chev-2{ animation:bmBreathB 4.4s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes bmBreathA{ 0%,100%{ transform:translateY(.4px); opacity:.95 } 50%{ transform:translateY(-1px); opacity:1 } }
@keyframes bmBreathB{ 0%,100%{ transform:translateY(-.4px); opacity:.5 } 50%{ transform:translateY(.7px); opacity:.72 } }

/* ============================================================
   CTAS — buttons shared by lpro + kunder
   ============================================================ */
.ac-cta{ margin-top:auto; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.ac-cta.center{ margin-top:0; justify-content:center; }
/* liquid glass — Fyon's button language: bevel, blur, shine sweep, glow ring */
.abtn{ position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; gap:8px;
  border-radius:999px; padding:12px 23px; font-size:14.5px; font-weight:600; color:#fff;
  -webkit-backdrop-filter:blur(13px) saturate(180%); backdrop-filter:blur(13px) saturate(180%);
  transition:transform .35s cubic-bezier(.2,.85,.25,1), box-shadow .35s ease; }
.abtn::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.26) 46%,
    rgba(255,255,255,.48) 50%, rgba(255,255,255,.26) 54%, transparent 68%);
  transform:translateX(-140%); transition:transform .9s cubic-bezier(.3,.7,.2,1); }
.abtn.spruce{ text-shadow:0 1px 1px rgba(14,64,58,.35);
  background:linear-gradient(158deg, rgba(47,158,145,.96), rgba(22,107,98,.97));
  box-shadow:inset 0 1px 1px rgba(224,245,242,.7), inset 0 0 0 1px rgba(150,210,200,.3),
    0 10px 26px -8px rgba(18,80,72,.5); }
.abtn.ink{ background:rgba(31,27,22,.86);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.08),
    0 10px 26px -10px rgba(31,27,22,.55); }
.abtn.glass{ color:var(--ax-ink);
  background:rgba(255,255,255,.42);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.4),
    0 6px 18px -8px rgba(70,45,25,.4); }
.abtn.big{ padding:15px 30px; font-size:16px; }
.abtn:active{ transform:scale(.94); transition-duration:.09s;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.35); }
.abtn.glass:active{ box-shadow:inset 0 2px 8px rgba(70,45,25,.22); }
/* hover lift only on real pointer devices — on touch, a sticky :hover made the
   first tap "highlight" and only the second tap activate. Gating it here means a
   phone tap fires the link immediately. */
@media (hover:hover) and (pointer:fine){
  .abtn:hover::after{ transform:translateX(140%); }
  .abtn.spruce:hover{ transform:translateY(-2px) scale(1.02);
    box-shadow:inset 0 1px 1px rgba(230,248,245,1), inset 0 0 0 1px rgba(150,210,200,.5),
      0 16px 34px -8px rgba(18,80,72,.55), 0 0 0 6px rgba(52,165,150,.12); }
  .abtn.ink:hover{ transform:translateY(-2px) scale(1.02);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.26), inset 0 0 0 1px rgba(255,255,255,.12),
      0 14px 30px -10px rgba(31,27,22,.5), 0 0 0 6px rgba(31,27,22,.08); }
  .abtn.glass:hover{ transform:translateY(-2px) scale(1.02);
    box-shadow:inset 0 1px 1px rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,.5),
      0 12px 26px -8px rgba(70,45,25,.45); }
}
.mag{ display:inline-block; will-change:transform; }
.alink{ display:inline-flex; align-items:center; gap:7px; font-size:14.5px; font-weight:500; color:var(--ax-ink); }
.alink .ic{ width:14px; height:14px; color:var(--ax-spruce); transition:transform .3s cubic-bezier(.2,.85,.25,1); }
.alink:hover .ic{ transform:translateX(3px); }

/* ============================================================
   KUNDER — Spiis in detail: copy left, live mock right
   ============================================================ */
.arows .s-inner{ padding-top:clamp(24px,3vw,44px); padding-bottom:clamp(40px,6vw,80px); }
.arh{ margin:0 0 8px; font-family:'Instrument Serif',serif; font-style:italic; font-weight:400;
  font-size:clamp(2rem,4vw,3.1rem); color:var(--ax-ink); }
.ar-sub{ margin:0; font-size:clamp(15px,1.7vw,17.5px); line-height:1.55; color:var(--ax-soft); max-width:52ch; }
.kd-card{ margin-top:clamp(24px,3.4vw,40px); display:grid; grid-template-columns:5fr 4fr; gap:clamp(24px,4vw,56px);
  align-items:center; border-radius:clamp(22px,2.8vw,34px); padding:clamp(24px,3.6vw,52px);
  background:var(--ax-card); border:1px solid rgba(31,27,22,.1);
  transition:transform .4s cubic-bezier(.2,.85,.25,1), box-shadow .4s ease; }
.kd-card:hover{ transform:translateY(-3px); box-shadow:0 30px 64px -36px rgba(70,45,25,.4); }
.kd-head{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:6px; }
.kd-head h3{ margin:0; font-family:'Instrument Serif',serif; font-style:italic; font-weight:400;
  font-size:clamp(2.3rem,4.4vw,3.4rem); line-height:1; letter-spacing:-.02em; color:var(--ax-ink); }
.kd-live{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px;
  background:rgba(31,133,122,.1); box-shadow:inset 0 0 0 1px rgba(31,133,122,.25);
  font-size:12px; font-weight:600; color:var(--ax-spruce); white-space:nowrap; }
.kd-live i{ width:7px; height:7px; border-radius:50%; background:var(--ax-spruce);
  animation:kdLed 2.2s ease-in-out infinite; }
@keyframes kdLed{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(31,133,122,.35); } 50%{ opacity:.5; box-shadow:0 0 0 5px rgba(31,133,122,0); } }
.kd-tag{ margin:0 0 clamp(18px,2.4vw,26px); font-size:14px; font-weight:500; color:var(--ax-faint); }
.kd-rows{ display:flex; flex-direction:column; gap:clamp(14px,1.8vw,18px); }
.krow{ display:flex; gap:18px; align-items:flex-start; }
.krow .kk{ flex:none; width:86px; padding-top:3px; font-family:var(--mono,monospace); font-size:11px;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ax-spruce); }
.krow p{ margin:0; font-size:15.5px; line-height:1.62; color:var(--ax-soft); max-width:50ch; }
.kd-copy .ac-cta{ margin-top:clamp(22px,3vw,30px); }
@media(max-width:560px){ .krow{ flex-direction:column; gap:5px; } .krow .kk{ width:auto; padding-top:0; } }

/* the Spiis mock — a living miniature of spiis.dk, in THEIR warm palette
   (burnt orange · warm cream · brown ink — not Lesreg green) */
.kd-mock{ min-width:0; }
.sp-browser{ border-radius:18px; overflow:hidden; background:#faf3ea; border:1px solid rgba(33,29,24,.12);
  box-shadow:0 30px 64px -30px rgba(120,60,20,.5);
  transition:transform .5s cubic-bezier(.2,.8,.25,1); }
@media(hover:hover){ .kd-card:hover .sp-browser{ transform:translateY(-5px) rotate(-.5deg); } }
.sp-chrome{ display:flex; align-items:center; gap:6px; padding:10px 14px; background:#f1e7da;
  border-bottom:1px solid rgba(33,29,24,.08); }
.sp-chrome i{ width:9px; height:9px; border-radius:50%; background:rgba(33,29,24,.14); }
.sp-chrome span{ margin-left:8px; padding:3px 12px; border-radius:999px; background:rgba(33,29,24,.06);
  font-family:var(--mono,monospace); font-size:10.5px; color:#8c7f70; }
.sp-body{ padding:clamp(16px,2.4vw,26px); display:flex; flex-direction:column; gap:12px; }
.sp-eyebrow{ font-family:var(--mono,monospace); font-size:10px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:#c65a24; }
.sp-title{ font-family:'Newsreader','Instrument Serif',serif; font-weight:500; font-size:clamp(20px,2.4vw,26px);
  color:#2b2118; margin-top:-6px; }
.sp-card{ display:grid; grid-template-columns:auto 1fr; gap:0; align-items:stretch; overflow:hidden;
  border-radius:13px; background:#fffdf9;
  box-shadow:0 10px 26px -14px rgba(120,60,20,.4), inset 0 0 0 1px rgba(33,29,24,.05); }
.sp-left{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:16px 14px;
  background:linear-gradient(160deg,#d0662c,#b4511e); color:#fff7ef;
  font-family:'Newsreader',serif; font-style:italic; font-size:12.5px; }
.sp-left .steam{ display:inline-block; transform:rotate(90deg); letter-spacing:2px; font-size:11px; opacity:.75;
  animation:spSteam 2.6s ease-in-out infinite; }
@keyframes spSteam{ 0%,100%{ opacity:.4; transform:rotate(90deg) translateX(0); } 50%{ opacity:.85; transform:rotate(90deg) translateX(-2px); } }
.sp-right{ display:flex; flex-direction:column; gap:3px; min-width:0; padding:14px 16px; }
.sp-right b{ font-size:14.5px; font-weight:600; color:#2b2118; }
.sp-right span{ font-size:12px; color:#8c7f70; }
.sp-right .sp-btn{ margin-top:8px; align-self:flex-start; padding:7px 14px; border-radius:999px;
  background:linear-gradient(160deg,#d0662c,#b4511e); color:#fff7ef; font-size:11px; font-weight:600;
  box-shadow:inset 0 1px 1px rgba(255,240,228,.5), 0 6px 14px -6px rgba(180,81,30,.55); }
.sp-week{ display:flex; gap:6px; }
.sp-week span{ flex:1; text-align:center; padding:6px 0; border-radius:999px; font-size:10.5px; font-weight:500;
  font-family:var(--mono,monospace); color:#8c7f70; background:#fffdf9;
  box-shadow:inset 0 0 0 1px rgba(33,29,24,.07); }
.sp-week .on{ background:#2b2118; color:#fff7ef; font-weight:600; box-shadow:none; }
.sp-order{ display:flex; align-items:center; gap:9px; padding:9px 13px; border-radius:999px;
  background:rgba(198,90,36,.08); box-shadow:inset 0 0 0 1px rgba(198,90,36,.22);
  font-family:var(--mono,monospace); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#7a6c5c; }
.sp-led{ width:7px; height:7px; border-radius:50%; background:#c65a24; animation:spLed 1.8s ease-in-out infinite; }
@keyframes spLed{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(198,90,36,.4); } 50%{ opacity:.55; box-shadow:0 0 0 5px rgba(198,90,36,0); } }
@media(max-width:880px){
  .kd-card{ grid-template-columns:1fr; }
  .kd-mock{ order:-1; }
}

/* ============================================================
   STUDIET / KONTAKT — one scroll-lit statement, one door
   ============================================================ */
.abts .s-inner{ text-align:center; display:flex; flex-direction:column; align-items:center;
  padding-top:clamp(50px,8vw,110px); padding-bottom:clamp(60px,9vw,130px); }
.gk{ margin:0 0 18px; font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ax-spruce); }
.abt{ margin:0 0 clamp(28px,4vw,42px); max-width:720px; font-family:'Instrument Serif',serif; font-weight:400;
  font-size:clamp(1.5rem,3.2vw,2.3rem); line-height:1.35; letter-spacing:-.01em; color:var(--ax-ink); }
.abt span{ transition:opacity .18s linear; }
.gc-chips{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:clamp(28px,4vw,40px); }
/* static, decorative labels — not movable, not interactive */
.gc-chips span{ padding:9px 18px; border-radius:999px; font-size:13.5px; font-weight:500; color:var(--ax-ink);
  background:rgba(255,255,255,.4); cursor:default; user-select:none; pointer-events:none;
  -webkit-backdrop-filter:blur(10px) saturate(160%); backdrop-filter:blur(10px) saturate(160%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.38),
    0 5px 14px -7px rgba(70,45,25,.35); }
.alink.quiet{ margin-top:18px; font-family:var(--mono,monospace); font-size:13px; font-weight:500;
  color:var(--ax-faint); transition:color .25s ease; }
.alink.quiet:hover{ color:var(--ax-spruce); }

/* ============================================================
   FOOTER — quiet
   ============================================================ */
.footer{ border-top:1px solid var(--ax-line); }
.footer .brand{ color:var(--ax-ink); }
.footer .links{ color:var(--ax-soft); }
.footer .links a:hover{ color:var(--ax-ink); }
.footer .copy{ color:var(--ax-faint); }

/* intro keeps its original cream look from styles.css — no overrides */

/* ---------- speed: below-the-fold sections render lazily ---------- */
.arows{ content-visibility:auto; contain-intrinsic-size:auto 760px; }
.abts{ content-visibility:auto; contain-intrinsic-size:auto 620px; }
.footer{ content-visibility:auto; contain-intrinsic-size:auto 140px; }

/* ---------- small screens: CTAs stack full-width, mock leads ---------- */
@media(max-width:560px){
  .ac-cta.center{ flex-direction:column; align-items:stretch; width:100%; max-width:340px; gap:12px; }
  .ac-cta.center .mag{ display:block; }
  .ac-cta.center .abtn{ width:100%; justify-content:center; }
}

@media (prefers-reduced-motion: reduce){
  .kh .khl i{ transform:none; transition:none; }
  .kmeta{ opacity:1; transform:none; transition:none; }
  .abt span{ opacity:1 !important; transition:none; }
  .fmk.assemble{ opacity:1; transform:none; }
  .fmk.assemble .fm-chev{ stroke-dasharray:none; stroke-dashoffset:0; opacity:1; }
  .fmk .fm-chev{ animation:none !important; }
  .fmk.assemble.play{ animation:none; }
  .abtn::after,.gn-cta::after{ display:none; }
  .sp-led,.sp-left .steam,.kd-live i{ animation:none; }
}