/* ===== ewright.tech · base: Oxblood & Bone tokens, kit (controls, devices, motion), shared modules =====
   Dark is the default. [data-mode="light"] switches the palette. Generated pages live in public/site. */
:root{
  --f-sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif; --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --max:1280px; --gutter:clamp(16px,4vw,56px);
  /* dark (default) */
  --bg:#110B0C; --bg-2:#190F11; --surface:#211418; --surface-2:#2A191E; --ink:#F2E8DF; --muted:#A99690; --line:rgba(242,232,223,.09); --line-2:rgba(242,232,223,.22);
  --accent:#C24A5B; --accent-ink:#fff; --accent-2:#D8707F; --band:#2B141A; --glow:rgba(194,74,91,.16); --shadow-tint:rgba(0,0,0,.75);
  --inv-bg:#3A1119; --inv-ink:#F2E8DF; --inv-muted:#CDAFA8; --inv-line:rgba(242,232,223,.16); --menu-bg:#F2E8DF; --menu-ink:#110B0C;
  --good:#D8707F; --bar-base:rgba(242,232,223,.28);
  color-scheme:dark;
}
:root[data-mode="light"]{
  --bg:#F1ECE4; --bg-2:#E8E0D5; --surface:#FAF7F2; --surface-2:#F3EDE5; --ink:#1F1414; --muted:#6C5D59; --line:rgba(31,20,20,.09); --line-2:rgba(31,20,20,.2);
  --accent:#6E1423; --accent-ink:#F7EFE7; --accent-2:#6E1423; --band:#EAD7CF; --glow:rgba(110,20,35,.12); --shadow-tint:rgba(60,20,24,.30);
  --inv-bg:#2A0E14; --inv-ink:#F1ECE4; --inv-muted:#C0A8A2; --inv-line:rgba(241,236,228,.16); --menu-bg:#2A0E14; --menu-ink:#F1ECE4;
  --good:#6E1423; --bar-base:rgba(31,20,20,.22);
  color-scheme:light;
}
body{transition:background-color .5s,color .5s}
/* ===== Kit v3: minimal controls, device mockups, scroll utilities =====
   Page tokens: --bg --bg-2 --ink --muted --line --line-2 --accent --accent-ink --f-sans --f-mono --shadow-tint */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--f-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:500;letter-spacing:-.03em}
p{margin:0}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.wrap{max-width:var(--max,1280px);margin-inline:auto;padding-inline:var(--gutter,clamp(16px,4vw,56px))}
.eyebrow{font:500 12px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- buttons: crisp pills with a sliding arrow disc ---- */
.btn{position:relative;display:inline-flex;align-items:center;gap:14px;height:54px;padding:0 7px 0 24px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;
  font:500 15.5px/1 var(--f-sans);letter-spacing:-.01em;color:var(--btn-ink,var(--bg));background:var(--btn-bg,var(--ink));
  transition:background .4s cubic-bezier(.2,.8,.2,1),transform .4s cubic-bezier(.2,.8,.2,1)}
.btn .ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;overflow:hidden;background:var(--accent);color:var(--accent-ink)}
.btn .ic svg{width:16px;height:16px;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.btn:hover .ic svg{transform:translateX(3px) rotate(-45deg)}
.btn:active{transform:scale(.98)}
.btn-line{height:54px;padding:0 24px;display:inline-flex;align-items:center;gap:10px;border-radius:999px;text-decoration:none;white-space:nowrap;
  font:500 15.5px/1 var(--f-sans);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow .3s,background .3s}
.btn-line:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.btn-sm{height:44px;font-size:14px}.btn-sm .ic{width:32px;height:32px}
.btn-line.btn-sm{height:44px;padding:0 18px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:3px}
.link-arrow:hover{border-color:var(--ink)}

/* ---- avatar placeholder ---- */
.avatar{--s:40px;flex:none;width:var(--s);height:var(--s);border-radius:50%;display:grid;place-items:center;overflow:hidden;
  font:600 calc(var(--s)*.34)/1 var(--f-sans);color:var(--accent-ink);background:var(--avatar,var(--accent))}

/* ---- top bar + floating round menu ---- */
.top{position:absolute;inset:0 0 auto 0;z-index:50;padding-top:env(safe-area-inset-top,0px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand b{font-weight:500;font-size:16px;letter-spacing:-.01em}
.brand small{display:block;color:var(--muted);font-size:13px}
.top nav{display:flex;align-items:center;gap:28px}
.top nav a.l{text-decoration:none;font-size:15px;color:var(--muted);transition:color .2s;padding-block:12px}
.top nav a.l:hover{color:var(--ink)}
@media (max-width:820px){.top nav a.l{display:none}}
@media (max-width:420px){.brand small{display:none}.top .wrap{padding-block:16px}}
.fab{position:fixed;z-index:60;top:calc(env(safe-area-inset-top,0px) + 18px);right:clamp(16px,3vw,40px);width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;color:var(--accent-ink);background:var(--accent);box-shadow:0 12px 30px -10px var(--shadow-tint,rgba(0,0,0,.4));
  transform:scale(0);transition:transform .5s cubic-bezier(.2,.9,.25,1.2)}
.fab.show,.fab[aria-expanded="true"]{transform:scale(1)}
.fab i{position:relative;display:block;width:20px;height:2px;background:currentColor;border-radius:2px;transition:transform .35s}
.fab i::before{content:"";position:absolute;left:0;top:-6px;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .35s}
.fab i::after{content:"";position:absolute;left:6px;top:6px;width:14px;height:2px;border-radius:2px;background:currentColor;transition:transform .35s,width .35s,left .35s}
.fab[aria-expanded="true"] i{background:transparent}
.fab[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.fab[aria-expanded="true"] i::after{left:0;width:20px;transform:translateY(-6px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:55;background:var(--menu-bg,var(--ink));color:var(--menu-ink,var(--bg));display:grid;align-content:center;padding:max(96px,env(safe-area-inset-top,0px)) var(--gutter,24px) 48px;
  clip-path:circle(0 at calc(100% - 60px) 48px);visibility:hidden;transition:clip-path .7s cubic-bezier(.7,0,.2,1),visibility 0s .7s}
.menu.open{clip-path:circle(150% at calc(100% - 60px) 48px);visibility:visible;transition:clip-path .7s cubic-bezier(.7,0,.2,1)}
.menu ul{list-style:none;margin:0 auto;padding:0;width:min(100%,1180px)}
.menu li a{display:flex;align-items:baseline;gap:18px;text-decoration:none;font-size:clamp(40px,7vw,96px);font-weight:400;letter-spacing:-.045em;line-height:1.08;padding-block:4px}
.menu li a small{font:500 13px/1 var(--f-mono);opacity:.5;letter-spacing:.06em}
.menu li a:hover{color:var(--accent)}
.menu .foot{width:min(100%,1180px);margin:40px auto 0;display:flex;flex-wrap:wrap;gap:12px 28px;opacity:.7;font-size:15px}
@media (prefers-reduced-motion:reduce){.menu,.menu.open{transition:none}.fab{transition:none}}

/* ---- device mockups ---- */
.laptop{position:relative;width:100%;max-width:100%;padding-inline:6%}
.laptop .lid{position:relative;aspect-ratio:16/10.3;border-radius:3.2% 3.2% 1% 1%/5% 5% 1.5% 1.5%;padding:2.1% 2.1% 2.6%;
  background:linear-gradient(180deg,#1b1b1e,#0c0c0e);box-shadow:inset 0 0 0 1px #3b3b40,0 0 0 1.5px #c9c9ce,0 0 0 2.5px #9a9aa0}
.laptop .lid::before{content:"";position:absolute;top:0;left:50%;width:11%;height:3.1%;transform:translateX(-50%);border-radius:0 0 8px 8px;background:#0c0c0e;z-index:3}
.laptop .base{position:relative;height:0;padding-bottom:3.4%;width:113%;margin-left:-6.5%;border-radius:0 0 12% 12%/0 0 100% 100%;
  background:linear-gradient(180deg,#f1f1f3 0%,#d3d3d8 40%,#9b9ba1 100%);box-shadow:inset 0 1px 0 #fff}
.laptop .base::before{content:"";position:absolute;left:50%;top:0;width:15%;height:45%;transform:translateX(-50%);border-radius:0 0 10px 10px;background:linear-gradient(180deg,#bdbdc3,#d9d9de)}
.laptop::after{content:"";position:absolute;left:4%;right:4%;bottom:-6%;height:10%;border-radius:50%;background:radial-gradient(closest-side,var(--shadow-tint,rgba(0,0,0,.35)),transparent);filter:blur(10px);z-index:-1}
.phone{position:relative;aspect-ratio:9/19.3;border-radius:14%/6.6%;padding:0;max-width:100%;
  background:linear-gradient(145deg,#3a3a3f,#141416 40%,#2a2a2e);box-shadow:inset 0 0 0 1.5px #5c5c62,inset 0 0 0 4px #1a1a1d,0 40px 70px -30px var(--shadow-tint,rgba(0,0,0,.5)),0 12px 24px -12px rgba(0,0,0,.35)}
.phone::before{content:"";position:absolute;top:4.6%;left:50%;width:29%;height:3.1%;transform:translateX(-50%);border-radius:999px;background:#050506;z-index:3}
.screen{position:relative;height:100%;overflow:hidden;background:#fff;border-radius:.6%}
.phone .screen{position:absolute;inset:1.6% 3.5%;height:auto;border-radius:11%/5.1%;padding-top:13%;background:var(--status-bar,#DEE4EB)}
.screen img{display:block;width:100%;height:auto;will-change:transform}
.screen.pan img{animation:pan var(--dur,14s) cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes pan{0%,14%{transform:translateY(0)}86%,100%{transform:translateY(calc(-1 * var(--dist,0px)))}}
@media (prefers-reduced-motion:reduce){.screen.pan img{animation:none}}
.swap{position:absolute;inset:0}
.swap img{position:absolute;inset:0 0 auto 0;opacity:0;transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1);transform:scale(1.02)}
.swap img.on{opacity:1;transform:none}

/* ---- reveal (visible at rest; motion only adds lift) ---- */
@media (prefers-reduced-motion:no-preference){
  .rv{transform:translateY(34px);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
  .rv.in{transform:none}
}

/* ---- entrance motion below the hero (site.js). Only under html.mo, set before paint when motion is allowed. ---- */
@media (prefers-reduced-motion:no-preference){
  /* blocks: fade + soften in while the existing lift plays */
  .mo .mx{opacity:0;filter:blur(8px);transition:transform 1.1s cubic-bezier(.2,.8,.2,1) var(--d,0ms),opacity .9s ease var(--d,0ms),filter .9s ease var(--d,0ms)}
  .mo .mx.in{opacity:1;filter:none}
  /* headings and intros: word by word, blur to sharp */
  .mo .sp .w{display:inline-block;opacity:0;filter:blur(10px);translate:0 .35em;transition:opacity .7s ease,filter .8s ease,translate .9s cubic-bezier(.2,.8,.2,1);transition-delay:min(calc(var(--i) * 55ms),1.1s)}
  .mo .sp.sm .w{filter:blur(6px);translate:0 .25em;transition-delay:min(calc(var(--i) * 18ms),.9s)}
  .mo .sp.in .w{opacity:1;filter:none;translate:none}
  /* groups: children rise in sequence */
  .mo .gi{opacity:0;translate:0 28px;transition:opacity .8s ease,translate 1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(min(var(--i),7) * 90ms)}
  .mo .in > .gi{opacity:1;translate:none}
  /* device mockups: settle in from slightly small */
  .mo .sc{opacity:0;scale:.9;translate:0 24px;transition:opacity .9s ease,scale 1.3s cubic-bezier(.2,.8,.2,1),translate 1.3s cubic-bezier(.2,.8,.2,1)}
  .mo .sc.in{opacity:1;scale:1;translate:none}
}
.mo-set .mx,.mo-set .gi,.mo-set .sc,.mo-set .sp .w{transition:none!important}
@media print{.mo .mx,.mo .gi,.mo .sc,.mo .sp .w{transition:none!important;opacity:1!important;filter:none!important;translate:none!important;scale:none!important}}

/* ---- marquee rails ---- */
.rail{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.rail .track{display:flex;gap:var(--gap,28px);width:max-content;will-change:transform}

.copy{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.copy button{font:500 12px/1 var(--f-sans);color:var(--ink);height:36px;min-width:44px;padding:0 14px;border-radius:999px;border:0;cursor:pointer;background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
.copy button:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.proto{font:500 11px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ---- shared chrome ---- */
.mode{width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.mode:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.mode svg{width:18px;height:18px}.mode .moon{display:none}
:root[data-mode="light"] .mode .moon{display:block}:root[data-mode="light"] .mode .sun{display:none}
.top{position:absolute}
.crumb{display:inline-flex;align-items:center;gap:8px;font:500 13px/1 var(--f-mono);letter-spacing:.04em;color:var(--muted);text-decoration:none;padding-block:10px}
.crumb:hover{color:var(--ink)}

/* type */
.h-xl{font-size:clamp(44px,7vw,112px);line-height:.94;font-weight:400;letter-spacing:-.058em}
.h-l{font-size:clamp(32px,4.2vw,62px);line-height:1;font-weight:400;letter-spacing:-.05em}
.h-m{font-size:clamp(24px,2.4vw,34px);line-height:1.1;font-weight:400;letter-spacing:-.04em}
.lede{font-size:clamp(19px,1.7vw,23px);line-height:1.5;color:var(--ink);max-width:40ch}
.prose{display:grid;gap:18px;max-width:64ch;color:var(--muted);font-size:17.5px;line-height:1.7}
.prose strong{color:var(--ink);font-weight:500}
.kick{font:500 12px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2)}

.ev{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font:500 10.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:6px 9px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--muted)}
.ev::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ev.m{color:var(--ink);background:var(--surface-2)}
.ev.m::before{background:var(--accent)}
/* edge cases + alternatives */
.cards2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:820px){.cards2{grid-template-columns:1fr}}
.card{border-radius:20px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);padding:22px;display:grid;gap:10px;align-content:start}
.card h3,.card h4{margin:0;font-size:19px;font-weight:500;letter-spacing:-.02em}
.card p{color:var(--muted);font-size:15.5px;line-height:1.6}
.card .lbl{font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2)}
.card .st{font:500 11.5px/1.5 var(--f-mono);color:var(--muted);padding-top:10px;border-top:1px dashed var(--line-2)}

/* next steps list */
.next{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.next li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;color:var(--muted);font-size:16.5px;line-height:1.55}
.next li::before{content:"";width:18px;height:18px;margin-top:4px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--accent-2)}

/* before/after compare */
.seg{display:inline-flex;padding:4px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2)}
.seg button{height:40px;padding:0 18px;border-radius:999px;border:0;background:transparent;cursor:pointer;font:500 14px/1 var(--f-sans);color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.cmpScreen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:opacity .5s}
.cmpScreen img.hide{opacity:0}
.cap{font:500 11.5px/1.5 var(--f-mono);color:var(--muted)}


/* ---- contact band + footer ---- */
section.contact{padding-block:clamp(80px,11vw,150px)}
.contact{background:var(--inv-bg);color:var(--inv-ink);border-radius:clamp(24px,3vw,40px) clamp(24px,3vw,40px) 0 0;transition:background-color .5s,color .5s}
.cgrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:40px;align-items:end}
@media (max-width:860px){.cgrid{grid-template-columns:1fr}}
.contact .mark{font-size:clamp(60px,8vw,120px);font-weight:300;letter-spacing:-.06em;line-height:.8;color:var(--accent)}
.contact h2{margin-top:22px;font-size:clamp(30px,3.8vw,54px);line-height:1.06;font-weight:400;letter-spacing:-.045em;max-width:22ch}
.contact .ctas{margin-top:32px}
.contact .btn{--btn-bg:var(--inv-ink);--btn-ink:var(--inv-bg)}
.contact .btn-line{color:var(--inv-ink);box-shadow:inset 0 0 0 1px var(--inv-line)}
.idc{display:grid;gap:14px;padding-top:20px;border-top:1px solid var(--inv-line)}
.idc .me{display:flex;gap:14px;align-items:center}
.idc small{display:block;color:var(--inv-muted);font-size:13px}
.idc dl{margin:0;display:grid;gap:12px}
.idc dt{font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--inv-muted)}
.idc dd{margin:4px 0 0}
.idc .copy button{color:var(--inv-ink);box-shadow:inset 0 0 0 1px var(--inv-line)}
footer.f{background:var(--inv-bg);color:var(--inv-muted);font-size:13px;padding-block:28px calc(110px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--inv-line);transition:background-color .5s}
footer.f .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer.f .proto{color:var(--inv-muted)}
/* ---- site additions ---- */
img.avatar{object-fit:cover;background:var(--surface);padding:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:12px 16px;border-radius:999px;background:var(--ink);color:var(--bg);text-decoration:none;font-weight:500;transition:top .2s}
.skip:focus{top:12px}
.top nav .mode{flex:none}
.ctas{display:flex;flex-wrap:wrap;gap:10px}
.muted{color:var(--muted)}
.mt{margin-top:clamp(20px,2.4vw,32px)}
.chips,.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.chips li{font:500 13px/1 var(--f-sans);height:32px;display:inline-flex;align-items:center;padding:0 13px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2)}
.tags li{font:500 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;height:26px;display:inline-flex;align-items:center;padding:0 10px;border-radius:999px;background:var(--surface-2);color:var(--ink)}
.tags li+li{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--muted)}
.ev.h{color:var(--ink)}
.ev.h::before{background:var(--ink)}
.ev.p{color:var(--accent-2);box-shadow:inset 0 0 0 1px currentColor}
.ev.p::before{border-radius:1px;transform:rotate(45deg)}
.cmpDev{margin-top:22px}
.cmpScreen{aspect-ratio:auto}
.cmpWrap .cap{margin-top:18px}
.contact .copy a{color:inherit;text-decoration:none;border-bottom:1px solid var(--inv-line)}
.contact .idc a:hover{border-color:var(--inv-ink)}
.contact .idc b{font-weight:500}
.menu .foot a{color:inherit}
footer.f nav{display:flex;flex-wrap:wrap;gap:8px 20px}
footer.f a{color:inherit;text-decoration:none}
footer.f a:hover{color:var(--inv-ink);text-decoration:underline}
.crumb a{color:inherit;text-decoration:none}
.crumb a:hover{color:var(--ink)}
@media (max-width:560px){.top nav .btn{display:none}}
@media (forced-colors:active){.btn,.btn-line,.seg button,.chip{border:1px solid ButtonText}}
@media (max-width:820px){.fab{transform:scale(1)}.top nav{padding-right:66px}}

/* V6: propagation model (fictional programs) */
.inherit{border-radius:24px;background:var(--band);padding:clamp(20px,3vw,36px);display:grid;gap:22px}
.inherit-bar{display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:16px}
.inherit-bar .cap{margin-top:8px;max-width:48ch}
.layers{display:flex;align-items:center;gap:10px;font:500 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.layers i{flex:0 0 28px;height:1px;background:var(--line-2)}
.progs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:760px){.progs:not(.mini){grid-template-columns:1fr}}
.prog{--r:4px;--w:600;--case:uppercase;--track:.08em;border-radius:16px;overflow:hidden;background:#FBF8F4;color:#1C1717;box-shadow:0 24px 50px -32px var(--shadow-tint);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.inherit[data-shared="after"] .prog{--r:999px;--w:500;--case:none;--track:0}
.prog[data-font="serif"]{--pf:Georgia,"Times New Roman",serif}
.prog[data-font="sans"]{--pf:"Hanken Grotesk",system-ui,sans-serif}
.prog[data-font="mono"]{--pf:"JetBrains Mono",ui-monospace,monospace}
.prog-hero{padding:18px;background:var(--brand);color:#fff;display:grid;gap:6px;min-height:118px;align-content:end}
.prog[data-hero="split"] .prog-hero{background:linear-gradient(90deg,var(--brand) 60%,color-mix(in srgb,var(--brand) 78%,#000) 60%)}
.prog-name{font:600 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.prog-h{font-family:var(--pf);font-weight:500;font-size:19px;line-height:1.15;letter-spacing:-.01em}
.prog-field{height:26px;border-radius:6px;background:rgba(255,255,255,.9);margin-top:6px}
.prog-body{padding:16px 18px 18px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.prog-card{height:46px;border-radius:8px;background:#EDE7DF}
.prog-btn{grid-column:1/-1;justify-self:start;height:38px;display:inline-flex;align-items:center;padding:0 18px;border-radius:var(--r);background:var(--brand);color:#fff;font:var(--w) 13px/1 var(--pf);text-transform:var(--case);letter-spacing:var(--track);transition:border-radius .5s,letter-spacing .5s}
.inherit[data-shared="after"] .prog-btn{box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 0 4.5px var(--brand)}
@media (prefers-reduced-motion:reduce){.prog-btn{transition:none}}
.heroDemo{width:100%;max-width:640px}
.progs.mini{gap:10px}
.progs.mini .prog:nth-child(2){transform:translateY(-14px)}
.progs.mini .prog-hero{min-height:74px;padding:12px}
.progs.mini .prog-h{font-size:clamp(11px,1vw,14px);overflow-wrap:anywhere}
.progs.mini .prog-body{padding:12px}
.progs.mini .prog-card{height:30px}
.progs.mini .prog-btn{height:30px;padding:0 12px;font-size:11px}
:root[data-mode="light"] .contact .mark{color:#D8707F}

/* Thread: scroll-drawn line through home and case pages (scripts/thread.js) */
main{position:relative}
main > section{position:relative;z-index:1}
.thread{position:absolute;left:0;top:0;z-index:0;pointer-events:none;overflow:visible}
.thread .th-line{fill:none;stroke:var(--accent-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.thread .th-tip{fill:var(--accent-2);filter:drop-shadow(0 0 6px var(--accent-2));transition:opacity .2s}
.thread .th-node{fill:var(--bg);stroke:var(--line-2);stroke-width:1.5;transition:fill .3s,stroke .3s}
.thread .th-node.on{fill:var(--accent-2);stroke:var(--accent-2)}
.th .th-sec .eyebrow,.th .th-sec .n{transition:letter-spacing .9s cubic-bezier(.2,.8,.2,1),color .6s,opacity .6s}
.th .th-sec:not(.th-on) .eyebrow,.th .th-sec:not(.th-on) .n{letter-spacing:.42em;opacity:.45}
.th .th-sec.th-on .eyebrow{color:var(--accent-2)}
@media (prefers-reduced-motion:reduce){.th .th-sec .eyebrow,.th .th-sec .n{transition:none}}
@media print{.thread{display:none}}
@media (max-width:600px){.thread .th-line{stroke-width:1.5}.thread .th-node{r:3.5px}}