/* Castlestar. Sovereign and technical: black, ivory, steel blue.
   Small, exact type; a visible grid; every piece of work read like a vision system reads a scene. */
:root{
  --bg:#09090a; --panel:#0e0f10;
  --ivory:#e9e6e0; --ivory2:rgba(233,230,224,.68); --dim:rgba(233,230,224,.42); --faint:rgba(233,230,224,.2);
  --line:rgba(233,230,224,.11); --line2:rgba(233,230,224,.2);
  --steel:#8fa3b8; --steel2:rgba(143,163,184,.55); --steel3:rgba(143,163,184,.14);
  --fg-rgb:233,230,224; --steel-rgb:143,163,184; --bg-rgb:9,9,10;
  --veil:rgba(9,9,10,.86); --on-steel:#0a0c0e; --ink-max:#fff; --warn:#d7a08c; --warn2:#c98d7b; --screen:#000;
  --display:"Noto Serif Display",Georgia,serif; --sans:"Inter Tight",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --frame:1360px; --pad:40px;
  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ivory);font-family:var(--sans);font-size:15px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
p,h1,h2,h3,ol,ul,dl,dd,figure,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:400}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ivory);color:var(--bg);padding:8px 12px;z-index:200;font-size:13px}
.skip:focus{left:8px}
:focus-visible{outline:1px solid var(--steel);outline-offset:3px}
::selection{background:var(--steel);color:var(--bg)}
.frame{max-width:var(--frame);margin:0 auto;padding-inline:var(--pad)}
.grow{flex:1}
.pip{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--steel);margin-right:8px;vertical-align:1px;box-shadow:0 0 0 3px var(--steel3)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;border-bottom:1px solid transparent;transition:background .5s,border-color .5s}
.nav.stuck{background:var(--veil);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--line)}
.nav-in{max-width:var(--frame);margin:0 auto;padding:0 var(--pad);height:56px;display:flex;align-items:center;gap:28px}
.brand{text-decoration:none;font-family:var(--sans);font-weight:600;font-size:11.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--ivory)}
.nav-read{color:var(--dim);flex:1;text-align:center}
.nav-read b{font-weight:400;color:var(--ivory2)}
.nav-read .sep{margin:0 8px;color:var(--faint)}
.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-links a{text-decoration:none;color:var(--ivory2);transition:color .3s}
.nav-links a:hover{color:var(--ivory)}
.menu-btn{display:none;margin-left:auto;width:40px;height:40px;border:0;background:none;cursor:pointer;position:relative;margin-right:-8px}
.menu-btn i,.menu-btn i::before{position:absolute;left:10px;right:10px;height:1px;background:var(--ivory);transition:transform .4s var(--ease)}
.menu-btn i{top:17px}.menu-btn i::before{content:"";left:0;right:0;top:6px}
.menu-btn[aria-expanded="true"] i{transform:translateY(3px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i::before{transform:translateY(-6px) rotate(-90deg)}
.menu{padding:8px var(--pad) 24px;display:flex;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--line)}
.menu[hidden]{display:none}
.menu a{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:14px 0;border-bottom:1px solid var(--line)}

/* hero: mostly empty, a measured field */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:120px 0 0;overflow:hidden;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:120px 120px;background-position:center -1px}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 45%,transparent 30%,var(--bg) 85%);pointer-events:none}
.ticks i{position:absolute;width:14px;height:14px;border-color:var(--steel2);border-style:solid;border-width:0;z-index:1}
.ticks i:nth-child(1){top:76px;left:24px;border-top-width:1px;border-left-width:1px}
.ticks i:nth-child(2){top:76px;right:24px;border-top-width:1px;border-right-width:1px}
.ticks i:nth-child(3){bottom:24px;left:24px;border-bottom-width:1px;border-left-width:1px}
.ticks i:nth-child(4){bottom:24px;right:24px;border-bottom-width:1px;border-right-width:1px}
.hero-in{position:relative;z-index:2;width:100%;padding-bottom:72px}
.idx{color:var(--steel);margin-bottom:28px}
.hero-title{font-family:var(--display);font-weight:300;font-size:clamp(34px,4vw,58px);line-height:1.04;letter-spacing:-.02em;max-width:13em;text-wrap:balance}
.hero-sub{margin-top:18px;max-width:34em;color:var(--ivory2);font-size:16px}
.hero-links{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}
.book{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.book-k{flex-basis:100%}
button.go{font:inherit;color:inherit;background:none;cursor:pointer}
.book-k{color:var(--dim);margin:0}
.strip{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line2);margin-bottom:48px}
.strip div{padding:16px 16px 0 0}
.strip dt{color:var(--dim);margin-bottom:6px}
.strip dd{color:var(--ivory)}
/* the reticle follows the pointer in the hero */
.reticle{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .4s}
.hero:hover .reticle{opacity:1}
.rx,.ry{position:absolute;background:var(--steel3)}
.rx{left:0;right:0;height:1px;top:var(--y,50%)}
.ry{top:0;bottom:0;width:1px;left:var(--x,50%)}
.rl{position:absolute;left:calc(var(--x,50%) + 10px);top:calc(var(--y,50%) + 10px);color:var(--steel)}

/* sections */
.sec{padding:120px 0;border-top:1px solid var(--line)}
.sec-bar{display:flex;align-items:center;gap:18px;padding-bottom:14px;border-bottom:1px solid var(--line2);color:var(--ivory2);margin-bottom:40px}
.sec-bar .id{color:var(--steel)}
.sec-title{font-family:var(--display);font-weight:300;font-size:clamp(24px,2.3vw,34px);line-height:1.15;letter-spacing:-.012em;max-width:22em;text-wrap:balance;margin-bottom:44px}
.body{color:var(--ivory2);max-width:36em}
.body + .body{margin-top:14px}
.muted{color:var(--dim)}
.lead{color:var(--ivory);font-size:17px;line-height:1.55;max-width:30em;margin-bottom:28px}
.split2{display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:start}
.split2 .sec-title{margin-bottom:0}
.inline-link{color:inherit;text-decoration:underline;text-decoration-color:var(--steel2);text-decoration-thickness:1px;text-underline-offset:.16em}
.inline-link:hover{text-decoration-color:var(--ivory)}

/* buttons that look like controls */
.go{display:inline-flex;align-items:center;gap:22px;justify-content:space-between;min-width:200px;padding:12px 14px;border:1px solid var(--line2);text-decoration:none;font-size:13px;font-weight:500;color:var(--ivory);transition:border-color .3s,background .3s}
.go:hover{border-color:var(--steel);background:var(--steel3)}
.go .mono{color:var(--steel);font-size:13px}

/* table */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-weight:400;color:var(--dim);padding:0 16px 12px 0;border-bottom:1px solid var(--line2)}
.tbl td{padding:22px 16px 22px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ivory2)}
.tbl td:first-child{color:var(--steel);width:80px}
.tbl .q{font-family:var(--display);font-weight:300;font-size:20px;line-height:1.3;color:var(--ivory);width:34%}
.tbl td:last-child{width:170px}
.ref{color:var(--ivory2);text-decoration:none;border-bottom:1px solid var(--steel2);padding-bottom:2px}
.ref:hover{color:var(--ivory)}

/* spec sheets */
.sheet{margin-top:72px}
.sheet:first-of-type{margin-top:0}
.sheet-bar{display:flex;align-items:center;gap:18px;padding:10px 0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line);color:var(--ivory2)}
.sheet-bar .id{color:var(--steel)}
.sheet-bar .nm{color:var(--ivory)}
.sheet-body{display:grid;grid-template-columns:4fr 8fr;gap:40px;padding-top:28px;align-items:start}
.sheet-title{font-family:var(--display);font-weight:300;font-size:clamp(26px,2.4vw,34px);line-height:1.1;letter-spacing:-.012em;margin-bottom:24px}
.sheet-title.big{font-size:clamp(34px,3.6vw,52px)}
.kv{border-top:1px solid var(--line)}
.kv div{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.kv dt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);padding-top:2px}
.kv dd{color:var(--ivory);font-size:14px}
.kv-text{margin-top:22px}
.kv-text dd{color:var(--ivory2);line-height:1.55}
.spec .go{margin-top:24px}

/* the vision frame */
.cv{position:relative}
.cv-frame{position:relative;overflow:hidden;background:#000;outline:1px solid var(--line2);outline-offset:-1px}
.cv-img{display:block;position:relative}
.cv-img img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.cv-layer{position:absolute;inset:0;pointer-events:none}
.bx{position:absolute;border:1px solid var(--steel);box-shadow:inset 0 0 0 1px rgba(var(--bg-rgb),.25);opacity:0;transform:scale(1.04);transition:opacity .5s var(--ease) var(--d),transform .7s var(--ease) var(--d)}
.bx::before,.bx::after{content:"";position:absolute;width:6px;height:6px;border:1.5px solid var(--steel)}
.bx::before{left:-2px;top:-2px;border-right:0;border-bottom:0}
.bx::after{right:-2px;bottom:-2px;border-left:0;border-top:0}
.tag{position:absolute;left:-1px;bottom:100%;white-space:nowrap;font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;background:var(--steel);color:var(--on-steel);padding:2px 6px 1px;line-height:1.5}
.tag em{font-style:normal;opacity:.6;margin-left:8px}
.bx.low .tag{bottom:auto;top:100%}
.scan{position:absolute;left:0;right:0;top:0;height:30%;background:linear-gradient(to bottom,transparent,rgba(var(--steel-rgb),.12) 85%,rgba(var(--steel-rgb),.5) 100%);transform:translateY(-110%);pointer-events:none}
.cv-cap{display:flex;gap:18px;justify-content:space-between;padding-top:10px;color:var(--dim)}
.js .cv.reveal .cv-img img{filter:grayscale(1) brightness(.6);transition:filter 1.2s var(--ease) .5s}
.js .cv.reveal.in .cv-img img{filter:none}
.js .cv.reveal.in .scan{animation:scan 1.4s var(--ease) forwards}
.js .cv.reveal.in .bx{opacity:1;transform:none;transition-delay:calc(.9s + var(--d))}
.cv:hover .bx{opacity:.25}
@keyframes scan{to{transform:translateY(360%)}}
html:not(.js) .bx{opacity:1;transform:none}
/* live preview: real hero video under the page's own layer */
.cv-img.live{background:#fff}
.live-v{position:absolute;left:0;top:0;width:100%;height:77.78%;overflow:hidden}
.live-v video{width:100%;height:100%;object-fit:cover}
.cv-img.live .ws-overlay{position:relative;z-index:1}
.js .cv.reveal .cv-img.live img,.js .cv.reveal .cv-img.live video{filter:none}

/* product modules and steps */
.cells,.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line2);margin-top:48px}
.cells li,.steps li{padding:18px 20px 4px 0;display:grid;gap:8px;align-content:start;border-right:1px solid var(--line)}
.cells li + li,.steps li + li{padding-left:20px}
.cells li:last-child,.steps li:last-child{border-right:0}
.cells .mono,.steps .mono{color:var(--steel)}
.cells b{font-weight:500;font-size:15px}
.cells span:last-child,.steps p{color:var(--ivory2);font-size:14px;line-height:1.55}
.steps{margin-top:0}
.steps h3{font-family:var(--display);font-weight:300;font-size:22px;line-height:1.2}

/* creed */
.creed{margin-top:72px;padding-top:36px;border-top:1px solid var(--line2);text-align:center}
.creed p{font-family:var(--display);font-weight:300;font-size:clamp(22px,2.4vw,34px);line-height:1.25;max-width:22em;margin:0 auto;text-wrap:balance}

/* form */
.form{display:grid;gap:28px}
.chips{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.chips legend{margin-bottom:12px;padding:0}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;padding:9px 14px;border:1px solid var(--line2);font-size:13px;color:var(--ivory2);transition:border-color .3s,color .3s,background .3s}
.chips label:hover span{border-color:var(--steel2);color:var(--ivory)}
.chips input:checked + span{border-color:var(--steel);color:var(--bg);background:var(--steel)}
.chips input:focus-visible + span{outline:1px solid var(--steel);outline-offset:3px}
.field-l{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.input{width:100%;margin-top:8px;background:none;border:0;border-bottom:1px solid var(--line2);color:var(--ivory);font-family:var(--sans);font-size:16px;padding:8px 0 10px;border-radius:0}
.input:focus{outline:none;border-color:var(--steel)}
.input::placeholder{color:var(--faint)}
.textarea{min-height:110px;resize:vertical}
.btn{justify-self:start;display:inline-flex;align-items:center;gap:14px;padding:14px 22px;background:var(--ivory);color:var(--bg);border:0;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;transition:background .3s}
.btn:hover{background:var(--ink-max)}
.w-form-done,.w-form-fail{display:none}
.fail{margin-top:16px;color:var(--warn)}

/* footer */
.foot{border-top:1px solid var(--line);padding:28px 0 36px}
.foot-in{display:flex;align-items:center;gap:28px;flex-wrap:wrap;color:var(--dim)}
.foot-in .brand{color:var(--ivory)}
.foot-links{display:flex;gap:20px;flex-wrap:wrap;margin-right:auto}
.foot-links a{text-decoration:none;color:var(--ivory2)}
.foot-links a:hover{color:var(--ivory)}

/* 404 */
.nf .hero-in{padding-bottom:120px}

@media (max-width:1100px){.hide-m{display:none}.strip{grid-template-columns:repeat(3,minmax(0,1fr))}.strip div:nth-child(n+4){display:none}}
@media (max-width:900px){
  :root{--pad:22px}
  .nav-links{display:none}.menu-btn{display:block}
  .sheet-body,.split2{grid-template-columns:1fr;gap:28px}
  .cells,.steps{grid-template-columns:1fr 1fr}
  .cells li:nth-child(3),.steps li:nth-child(3){padding-left:0}
  .cells li:nth-child(2n),.steps li:nth-child(2n){border-right:0}
  .tbl thead{display:none}
  .tbl tr{display:grid;grid-template-columns:60px 1fr;gap:6px 12px;padding:18px 0;border-bottom:1px solid var(--line)}
  .tbl td{padding:0;border:0;width:auto!important}
  .tbl td:nth-child(3),.tbl td:nth-child(4){grid-column:2}
  .sec{padding:84px 0}
}
@media (max-width:600px){
  .hide-s{display:none}
  .strip{grid-template-columns:1fr 1fr}.strip div:nth-child(n){display:none}.strip div:nth-child(2),.strip div:nth-child(4){display:block}
  .cells,.steps{grid-template-columns:1fr}
  .cells li,.steps li{border-right:0;padding-left:0!important;border-bottom:1px solid var(--line);padding-bottom:16px}
  .row2{grid-template-columns:1fr}
  .tag{font-size:8px;padding:1px 4px}
  .tag em{display:none}
  .cv-cap span:nth-child(2){display:none}
  .reticle{display:none}
  .foot-in{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.bx{opacity:1!important;transform:none!important}.js .cv.reveal .cv-img img{filter:none}}
.cv-layer{z-index:2}
.scan{z-index:3}
.split2 .sec-title + .body{margin-top:18px}
.sheet-bar .id,.sheet-bar .nm{white-space:nowrap}
@media (max-width:900px){.sheet-body .cv{order:-1}}
@media (max-width:600px){.sheet-bar > span:nth-child(4){display:none}.sheet-bar .nm{overflow:hidden;text-overflow:ellipsis}}

/* ===== HUD ===== */
/* precision cursor */
html{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 2v7M12 15v7M2 12h7M15 12h7' stroke='%23e9e6e0' stroke-width='1'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%238fa3b8'/%3E%3C/svg%3E") 12 12,crosshair}
a,button,label,.go,.btn,.chips span,#map{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 2v7M12 15v7M2 12h7M15 12h7' stroke='%238fa3b8' stroke-width='1.5'/%3E%3Crect x='8.5' y='8.5' width='7' height='7' fill='none' stroke='%238fa3b8'/%3E%3C/svg%3E") 12 12,pointer}
input,textarea{cursor:text}

/* system map in the hero */
.map{position:absolute;z-index:1;right:0;top:56px;bottom:150px;width:58%}
.map canvas{display:block;width:100%;height:100%}
.map-card{position:absolute;left:0;top:0;display:grid;gap:3px;min-width:200px;padding:10px 12px;background:var(--veil);border:1px solid var(--steel2);color:var(--ivory2);pointer-events:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.map-card b{font-weight:500;color:var(--steel)}
.map-card span:first-of-type{color:var(--ivory)}
.map-card i{font-style:normal;color:var(--steel);margin-top:4px}
.map-cap{position:absolute;right:var(--pad);bottom:0;color:var(--dim)}
.hero-in{pointer-events:none}.hero-in a{pointer-events:auto}
.hero:hover .reticle{opacity:.6}

/* telemetry */
.tele{color:var(--dim);white-space:nowrap}
.tele.ok{color:var(--steel)}
.tele.ok::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--steel);margin-right:7px;vertical-align:1px}
.tele.bad{color:var(--warn2)}

/* targeting box */
.target{position:fixed;left:0;top:0;z-index:60;pointer-events:none;opacity:0;transition:opacity .25s}
.target.on{opacity:1}
.target i{position:absolute;width:9px;height:9px;border:0 solid var(--steel)}
.target i:nth-child(1){left:0;top:0;border-top-width:1px;border-left-width:1px}
.target i:nth-child(2){right:0;top:0;border-top-width:1px;border-right-width:1px}
.target i:nth-child(3){left:0;bottom:0;border-bottom-width:1px;border-left-width:1px}
.target i:nth-child(4){right:0;bottom:0;border-bottom-width:1px;border-right-width:1px}
.t-lab{position:absolute;left:0;bottom:100%;margin-bottom:4px;font-size:9.5px;color:var(--steel);white-space:nowrap}
.t-lab::after{content:"  " attr(data-xy);color:var(--dim)}

/* scroll instrument */
.rail{position:fixed;z-index:40;right:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--dim);font-size:10px;pointer-events:none}
.r-sec{writing-mode:vertical-rl;transform:rotate(180deg);color:var(--ivory2);white-space:nowrap}
.r-scale{position:relative;width:9px;height:160px;background:repeating-linear-gradient(to bottom,var(--line2) 0 1px,transparent 1px 16px);border-left:1px solid var(--line2)}
.r-mark{position:absolute;left:-1px;width:12px;height:1px;background:var(--steel);box-shadow:0 0 0 1px rgba(var(--steel-rgb),.15)}
@media (max-width:1100px){.rail{display:none}}
@media (max-width:900px){.map{width:100%;top:56px;bottom:auto;height:56vh}.map-cap{display:none}.hero-in{padding-top:52vh}}
@media (max-width:600px){.map{height:56vh}}
@media (prefers-reduced-motion:reduce){.target{display:none}}
.hero.inspect .reticle{opacity:0!important}
.t-lab{background:var(--bg);padding:1px 5px 0;margin-bottom:3px}
.map-card[hidden]{display:none}

/* ===== interface type: Archivo, light and expanded. The serif lives only in the creed. ===== */
:root{--display:"Archivo","Inter Tight",system-ui,sans-serif}
.hero-title,.sec-title,.sheet-title,.steps h3,.tbl .q,.lead{font-family:var(--display);font-stretch:118%;font-weight:300;font-variation-settings:normal}
.hero-title{font-weight:250;font-size:clamp(30px,3.5vw,52px);line-height:1.08;letter-spacing:-.025em;max-width:15em}
.sec-title{font-weight:300;font-size:clamp(21px,2vw,30px);line-height:1.2;letter-spacing:-.018em}
.sheet-title{font-weight:300;font-size:clamp(22px,2vw,30px);letter-spacing:-.018em}
.sheet-title.big{font-weight:250;font-size:clamp(30px,3.2vw,46px);letter-spacing:-.025em}
.tbl .q{font-weight:300;font-size:17px;letter-spacing:-.01em}
.steps h3{font-weight:400;font-size:18px;letter-spacing:-.01em}
.lead{font-weight:300;font-size:17px;letter-spacing:-.005em;font-stretch:108%}
/* buttons speak the interface's language */
.go > span:first-child{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:500}

/* ===== intelligence layer ===== */
#map{touch-action:pan-y}
.map.dragging{cursor:grabbing}
.map-cap{right:auto;left:0;bottom:-2px}
/* focus panel */
.map-focus{position:absolute;right:var(--pad);top:50%;width:300px;transform:translate(16px,-50%);opacity:0;transition:opacity .35s var(--ease),transform .5s var(--ease);background:rgba(var(--bg-rgb),.9);border:1px solid var(--steel2);padding:16px 16px 18px;color:var(--ivory2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:3}
.map-focus.on{opacity:1;transform:translate(0,-50%)}
.map-focus[hidden]{display:none}
.f-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--line2)}
.f-top b{color:var(--steel);font-weight:500}
.f-x{background:none;border:0;color:var(--dim);font:inherit;letter-spacing:inherit;text-transform:inherit;padding:4px 0}
.f-x:hover{color:var(--ivory)}
.f-name{font-family:var(--display);font-stretch:118%;font-weight:300;font-size:24px;letter-spacing:-.015em;text-transform:none;color:var(--ivory);margin:14px 0 10px}
.map-focus dl div{display:grid;grid-template-columns:72px 1fr;gap:8px;padding:7px 0;border-bottom:1px solid var(--line)}
.map-focus dt{color:var(--dim)}
.map-focus dd{color:var(--ivory)}
.f-sig.ok{color:var(--steel)}
.f-go{margin-top:16px;width:100%}
/* session readout, top left of the hero */
.session{position:absolute;z-index:2;left:var(--pad);top:96px;width:230px;color:var(--dim)}
@media (min-width:1401px){.session{left:calc((100vw - var(--frame))/2 + var(--pad))}}
.s-h{color:var(--steel);margin-bottom:8px}
.session dl div{display:grid;grid-template-columns:86px 1fr;gap:8px;padding:5px 0;border-top:1px solid var(--line)}
.session dd{color:var(--ivory2)}
/* activity log, bottom right of the hero */
.log{position:absolute;z-index:2;right:var(--pad);bottom:150px;width:min(420px,40vw);list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;color:var(--dim);pointer-events:none}
@media (min-width:1401px){.log{right:calc((100vw - var(--frame))/2 + var(--pad))}}
.log li{display:flex;gap:12px;white-space:nowrap;overflow:hidden;opacity:.55;animation:logIn .5s var(--ease) forwards}
.log li:last-child{opacity:1;color:var(--ivory2)}
.log .lt{color:var(--steel);opacity:.8}
@keyframes logIn{from{transform:translateY(6px)}to{transform:none}}
.map-cap{display:none}
@media (max-width:900px){
  .session{display:none}
  .log{position:relative;right:auto;bottom:auto;width:100%;margin:0 0 24px;order:0}
  .map-focus{left:var(--pad);right:var(--pad);width:auto;top:auto;bottom:8px;transform:translateY(16px)}
  .map-focus.on{transform:none}
  .map-focus dl div:nth-child(4){display:none}
}
@media (max-width:900px){
  .hero-in{order:1;padding-bottom:28px}
  .log{order:2;padding:0 var(--pad);margin:0 0 22px;font-size:10px}
  .log li{gap:8px}
  .strip{order:3}
}
/* the map uses the whole hero so nothing is ever clipped */
@media (min-width:901px){.map{left:0;right:0;width:auto;top:56px;bottom:0}.map-focus{right:calc(var(--pad) + 24px)}}
@media (min-width:1401px){.map-focus{right:calc((100vw - var(--frame))/2 + var(--pad) + 24px)}}
@media (min-width:901px){.map-focus{top:42%}}
.hero.focused .log{opacity:.3;transition:opacity .4s}
/* Openlight: two sides of one system */
.cells-head{display:grid;grid-template-columns:1fr 1fr;margin-top:48px;color:var(--dim)}
.cells-head span:last-child{padding-left:20px}
.cells.six{grid-template-columns:repeat(6,minmax(0,1fr));margin-top:10px}
.cells.six li:nth-child(4){border-left:1px solid var(--line2)}
@media (max-width:1100px){.cells.six{grid-template-columns:repeat(3,minmax(0,1fr))}.cells.six li:nth-child(3){border-right:0}.cells.six li:nth-child(4){padding-left:0;border-left:0}.cells-head{display:none}}
@media (max-width:600px){.cells.six{grid-template-columns:1fr}}
/* steady map height on phones: ignore the browser bar growing and shrinking */
@media (max-width:900px){.map{height:56vh;height:56svh}.hero-in{padding-top:52vh;padding-top:52svh}}
.legal{padding-top:140px;border-top:0}
.legal .kv div{grid-template-columns:130px 1fr;padding:16px 0}
.legal .kv dd{color:var(--ivory2);line-height:1.6}
@media (max-width:600px){.legal .kv div{grid-template-columns:1fr;gap:6px}}

/* ---------- live sites ---------- */
.cv-enter{position:absolute;left:14px;bottom:14px;z-index:3;display:inline-flex;align-items:center;gap:10px;padding:9px 12px;background:rgba(var(--bg-rgb),.82);color:var(--ivory);border:1px solid var(--steel2);cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:border-color .3s,background .3s}
.cv-enter i,.cv-on i,.lv-dot{width:6px;height:6px;border-radius:50%;background:var(--steel);box-shadow:0 0 0 3px var(--steel3);display:inline-block;flex:none}
.cv-enter:hover,.cv-frame:hover .cv-enter{border-color:var(--steel);background:rgba(var(--bg-rgb),.94)}
.cv[data-live] .cv-img{cursor:pointer}
.cv-on,.cv-ctl{display:none}
.cv.is-live .cv-src,.cv.is-live .cv-dim,.cv.is-live .cv-enter{display:none}
.cv.is-live .cv-on{display:inline-flex;align-items:center;gap:10px;color:var(--ivory)}
.cv.is-live .cv-ctl{display:inline-flex;gap:18px}
.cv-ctl button,.cv-ctl a{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--dim);background:none;border:0;padding:0;cursor:pointer;text-decoration:none;transition:color .25s}
.cv-ctl button:hover,.cv-ctl a:hover{color:var(--ivory)}
.cv.is-live .cv-frame{outline-color:var(--steel2)}
.cv.is-live .cv-frame > .cv-img{visibility:hidden}
.cv-live{position:absolute;inset:0;z-index:4;background:#000;overflow:hidden}
.cv-live iframe{position:absolute;left:0;top:0;width:1440px;height:900px;border:0;transform:scale(var(--s,.5));transform-origin:0 0;opacity:0;transition:opacity .6s var(--ease)}
.cv-live.ready iframe,.lv-body.ready iframe{opacity:1}
.cv-wait{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:var(--steel);animation:cvw 1.2s steps(2) infinite}
.cv-wait span{color:var(--dim)}
@keyframes cvw{50%{opacity:.35}}
.lv{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;flex-direction:column}
.lv[hidden]{display:none}
.lv-bar{display:flex;align-items:center;gap:12px;height:52px;padding:0 16px;border-bottom:1px solid var(--line2);flex:none}
.lv-bar .grow{flex:1}
.lv-host{color:var(--ivory);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-open,.lv-close{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--dim);background:none;border:0;padding:10px 4px;cursor:pointer;text-decoration:none;white-space:nowrap}
.lv-close{color:var(--ivory)}
.lv-body{position:relative;flex:1;background:#000}
.lv-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .5s var(--ease)}
html.lv-on,html.lv-on body{overflow:hidden}
@media (max-width:600px){.cv-enter{left:10px;bottom:10px;padding:8px 10px}}
/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line2);list-style:none;margin:0;padding:0}
.tiers > li{padding:22px 28px 28px 0;display:grid;gap:14px;align-content:start;border-right:1px solid var(--line)}
.tiers > li + li{padding-left:28px}
.tiers > li:last-child{border-right:0}
.tiers > li > .mono{color:var(--steel)}
.tiers h3{font-family:var(--display);font-stretch:118%;font-weight:300;font-size:22px;line-height:1.2}
.t-price{font-family:var(--display);font-stretch:118%;font-weight:300;font-size:clamp(30px,2.8vw,40px);line-height:1;letter-spacing:-.02em;color:var(--ivory);display:flex;align-items:baseline;gap:12px;margin:6px 0 2px}
.t-price .mono{font-size:11px;letter-spacing:.06em;color:var(--dim)}
.t-price.sm{font-size:22px;margin:0}
.t-for{color:var(--ivory2);font-size:15px;line-height:1.5;margin:0}
.t-inc{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--line)}
.t-inc li{padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ivory2);display:flex;gap:12px}
.t-inc li::before{content:"+";font-family:var(--mono);color:var(--steel)}
.t-meta{margin:4px 0 0}
.t-meta div{display:flex;justify-content:space-between;gap:12px}
.t-meta dt{color:var(--dim)}
.t-meta dd{margin:0;color:var(--ivory)}
.care{display:grid;grid-template-columns:auto auto auto 1fr;align-items:baseline;gap:12px 28px;margin-top:28px;padding:20px 0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.care > .mono{color:var(--steel)}
.care b{font-weight:500;font-size:15px}
.care-txt{color:var(--ivory2);font-size:14px}
.t-note{color:var(--dim);margin-top:18px}
@media (max-width:900px){
  .tiers{grid-template-columns:1fr}
  .tiers > li,.tiers > li + li{padding:22px 0 28px;border-right:0;border-bottom:1px solid var(--line)}
  .care{grid-template-columns:1fr;gap:10px}
  .care-txt{grid-column:1 / -1}
}
.t-go{justify-self:start;margin-top:6px}
/* ---------- questions ---------- */
.qas{border-top:1px solid var(--line2)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;display:grid;grid-template-columns:52px 1fr auto;gap:16px;align-items:baseline;padding:18px 0;cursor:pointer}
.qa summary::-webkit-details-marker{display:none}
.qa summary .mono{color:var(--steel)}
.qa-q{font-size:17px;color:var(--ivory);line-height:1.4}
.qa-x{color:var(--dim);font-size:15px;transition:transform .3s var(--ease)}
.qa[open] .qa-x{transform:rotate(45deg);color:var(--ivory)}
.qa summary:hover .qa-q{color:var(--ink-max)}
.qa p{margin:0 0 20px 68px;color:var(--ivory2);font-size:15px;line-height:1.6;max-width:36em}
@media (max-width:600px){.qa summary{grid-template-columns:44px 1fr auto;gap:10px}.qa p{margin-left:54px}}
/* ---------- capabilities ---------- */
.caps{display:grid;grid-template-columns:160px repeat(3,minmax(0,1fr));gap:0 28px;margin-top:56px;padding-top:22px;border-top:1px solid var(--line2)}
.caps-k{color:var(--dim);margin:0}
.cap-h{display:flex;gap:12px;color:var(--ivory);margin:0 0 14px}
.cap-h span{color:var(--steel)}
.cap ul{list-style:none;margin:0;padding:0}
.cap li{padding:9px 0;border-top:1px solid var(--line);font-size:14px;color:var(--ivory2)}
@media (max-width:900px){.caps{grid-template-columns:1fr;gap:28px}}
/* quieter: captions only while a site is live; three-item strip */
.cv[data-live]:not(.is-live) .cv-cap{display:none}
.strip{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){.strip{grid-template-columns:repeat(3,minmax(0,1fr))}.strip div:nth-child(n+4){display:block}}
@media (max-width:600px){.strip{grid-template-columns:1fr 1fr}.strip div,.strip div:nth-child(n){display:block}.strip div:nth-child(3){grid-column:1 / -1}}

/* ---------- light mode: ivory paper and ink, same system. Follows the device unless the visitor picks one. ---------- */
:root[data-theme="light"]{
  --bg:#f3f1ec; --panel:#ebe8e1;
  --ivory:#141517; --ivory2:rgba(20,21,23,.72); --dim:rgba(20,21,23,.5); --faint:rgba(20,21,23,.24);
  --line:rgba(20,21,23,.12); --line2:rgba(20,21,23,.22);
  --steel:#4a6580; --steel2:rgba(74,101,128,.6); --steel3:rgba(74,101,128,.12);
  --fg-rgb:20,21,23; --steel-rgb:74,101,128; --bg-rgb:243,241,236;
  --veil:rgba(243,241,236,.88); --on-steel:#fff; --ink-max:#000; --warn:#a4523c; --warn2:#a4523c;
  color-scheme:light;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
  --bg:#f3f1ec; --panel:#ebe8e1;
  --ivory:#141517; --ivory2:rgba(20,21,23,.72); --dim:rgba(20,21,23,.5); --faint:rgba(20,21,23,.24);
  --line:rgba(20,21,23,.12); --line2:rgba(20,21,23,.22);
  --steel:#4a6580; --steel2:rgba(74,101,128,.6); --steel3:rgba(74,101,128,.12);
  --fg-rgb:20,21,23; --steel-rgb:74,101,128; --bg-rgb:243,241,236;
  --veil:rgba(243,241,236,.88); --on-steel:#fff; --ink-max:#000; --warn:#a4523c; --warn2:#a4523c;
  color-scheme:light;
  }
  :root:not([data-theme="dark"]){cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 2v7M12 15v7M2 12h7M15 12h7' stroke='%23141517' stroke-width='1'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%234a6580'/%3E%3C/svg%3E") 12 12,crosshair}
}
:root[data-theme="light"]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 2v7M12 15v7M2 12h7M15 12h7' stroke='%23141517' stroke-width='1'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%234a6580'/%3E%3C/svg%3E") 12 12,crosshair}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) a,:root:not([data-theme="dark"]) button,:root:not([data-theme="dark"]) label,:root:not([data-theme="dark"]) .go,:root:not([data-theme="dark"]) .btn,:root:not([data-theme="dark"]) .chips span,:root:not([data-theme="dark"]) #map{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 2v7M12 15v7M2 12h7M15 12h7' stroke='%234a6580' stroke-width='1.5'/%3E%3Crect x='8.5' y='8.5' width='7' height='7' fill='none' stroke='%234a6580'/%3E%3C/svg%3E") 12 12,pointer}}
:root[data-theme="light"] a,:root[data-theme="light"] button,:root[data-theme="light"] label,:root[data-theme="light"] .go,:root[data-theme="light"] .btn,:root[data-theme="light"] .chips span,:root[data-theme="light"] #map{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 2v7M12 15v7M2 12h7M15 12h7' stroke='%234a6580' stroke-width='1.5'/%3E%3Crect x='8.5' y='8.5' width='7' height='7' fill='none' stroke='%234a6580'/%3E%3C/svg%3E") 12 12,pointer}
.theme-btn{background:none;border:0;padding:0;color:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:7px}
.theme-btn:hover{color:var(--ivory)}
.theme-btn i{width:9px;height:9px;border-radius:50%;border:1px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
@media (max-width:900px){.theme-btn{margin-left:auto}.menu-btn{margin-left:4px}}