@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Hebrew:wght@300;400;500;600;700&display=swap');

:root{
  --ground:#F7F5F1; --surface:#FFFFFF; --sunk:#EFEDE7;
  --ink:#17181C; --muted:#6B6C70; --line:#E5E2DA; --line-2:#CFCBC1;
  --accent:#1F4FD8; --accent-ink:#FFFFFF; --accent-soft:#E7ECFB;
  --mark:#D9581F; --mark-soft:#FCEFE6;
  /* one committed light palette; the AI band is a deliberate dark section */
  --band:#12141A; --band-ink:#EDEEF2; --band-mut:#9497A2; --band-accent:#7E9CFF; --band-line:#242833;
  --r:3px; --measure:60ch;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink); direction:rtl;
  font-family:'IBM Plex Sans Hebrew','Segoe UI',system-ui,sans-serif;
  font-size:17px; line-height:1.6; -webkit-text-size-adjust:100%; overflow-x:hidden;
}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
h1,h2,h3{text-wrap:balance; margin:0; font-weight:700; letter-spacing:-.022em}
p{margin:0 0 1em}
.shell{max-width:1080px; margin:0 auto; padding:0 22px}
.narrow{max-width:var(--measure)}
.eyebrow{font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--muted); margin:0 0 14px}
.eyebrow.mark{color:var(--mark)}

/* reveal */
.js .rv{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1)}
.js .rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .js .rv{opacity:1; transform:none; transition:none} html{scroll-behavior:auto} }

/* ============ masthead ============ */
.masthead{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.masthead .shell{display:flex; align-items:center; gap:18px; height:60px}
.wordmark{font-weight:700; font-size:19px; letter-spacing:-.02em; text-decoration:none; line-height:1.1}
.wordmark span{display:block; font-weight:700; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.mast-nav{margin-inline-start:auto; display:flex; gap:22px; font-size:14.5px; font-weight:600}
.mast-nav a{text-decoration:none; color:var(--muted)}
.mast-nav a:hover{color:var(--ink)}
@media(max-width:820px){ .mast-nav{display:none} }
.btn{display:inline-block; text-decoration:none; font-weight:700; font-size:15px; padding:11px 24px;
  border-radius:var(--r); border:1.5px solid var(--accent); background:var(--accent); color:var(--accent-ink);
  transition:transform .15s ease, opacity .15s ease}
.btn:hover{transform:translateY(-1px); opacity:.92}
.btn.alt{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn.on-band{background:var(--band-accent); border-color:var(--band-accent); color:var(--band)}
@media(max-width:820px){ .masthead .btn{margin-inline-start:auto} }

/* ============ hero ============ */
.hero{position:relative; padding:84px 0 72px; overflow:hidden}
#flow{position:absolute; inset:0; width:100%; height:100%; opacity:.5; pointer-events:none}
.hero .shell{position:relative; z-index:1}
.hero h1{font-size:clamp(33px,6.6vw,62px); font-weight:700; line-height:1.1; letter-spacing:-.035em; margin-bottom:22px; max-width:17ch}
.hero h1 em{font-style:normal; color:var(--mark); display:block}
.hero .lead{font-size:clamp(18px,2.4vw,21px); color:var(--muted); max-width:46ch; margin-bottom:0}
.hero .role{margin:24px 0 0; font-size:12.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}

/* stat strip */
.stats{display:flex; flex-wrap:wrap; gap:0; margin-top:56px; border-top:1px solid var(--line-2)}
.stat{padding:18px 26px 0 0; flex:1 1 150px; min-width:130px}
.stat b{display:block; font-size:clamp(30px,4.5vw,42px); font-weight:600; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.stat span{display:block; font-size:13.5px; color:var(--muted); margin-top:6px; font-weight:600}

/* ============ generic section ============ */
section{padding:70px 0}
.hair{border-top:1px solid var(--line)}
.sec-head{margin-bottom:32px}
.sec-head h2{font-size:clamp(26px,3.6vw,34px); font-weight:700; line-height:1.2; margin-bottom:10px}
.sec-head p{color:var(--muted); max-width:var(--measure); margin:0}

/* ============ AI BAND ============ */
.band{background:var(--band); color:var(--band-ink); position:relative; overflow:hidden; padding:78px 0}
.band::after{content:""; position:absolute; inset-inline-end:-14%; top:-40%; width:64%; aspect-ratio:1;
  background:radial-gradient(circle, color-mix(in srgb, var(--band-accent) 22%, transparent) 0%, transparent 68%); pointer-events:none}
.band .shell{position:relative; z-index:1}
.band .eyebrow{color:var(--band-accent)}
.band h2{font-size:clamp(27px,4.4vw,42px); font-weight:700; line-height:1.14; letter-spacing:-.015em; max-width:17ch; margin-bottom:16px}
.band h2 em{font-style:normal; color:var(--band-accent)}
.band .lead{color:var(--band-mut); max-width:50ch; font-size:18.5px}
.band-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:46px; border-top:1px solid var(--band-line)}
@media(max-width:760px){ .band-grid{grid-template-columns:1fr} }
.band-cell{padding:24px 26px 6px 0; border-inline-start:1px solid var(--band-line)}
.band-cell:last-child{border-inline-start:0}
@media(max-width:760px){ .band-cell{border-inline-start:0; border-top:1px solid var(--band-line); padding-inline-end:0} .band-cell:first-child{border-top:0} }
.band-cell h3{font-size:19px; font-weight:700; margin-bottom:7px; color:var(--band-ink)}
.band-cell p{color:var(--band-mut); font-size:15.5px; margin:0}
.band .cta-row{margin-top:38px}

/* ============ the building: three floors ============ */
.bld{margin-top:26px; display:grid; grid-template-columns:1fr 96px;
  grid-template-rows:auto auto auto auto; gap:0;
  border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden; background:var(--surface)}
.flr{grid-column:1; position:relative; padding:22px 28px 24px; border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:1fr 220px; gap:30px; align-items:start;
  opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1)}
.flr[data-f="01"]{border-bottom:0}
.js .bld.in .flr{opacity:1; transform:none}
.flr[data-f="03"]{grid-row:2} .flr[data-f="02"]{grid-row:3} .flr[data-f="01"]{grid-row:4}
.js .bld.in .flr[data-f="02"]{transition-delay:.16s}
.js .bld.in .flr[data-f="01"]{transition-delay:.32s}
.flr-top{display:flex; align-items:baseline; gap:10px; margin-bottom:6px}
.flr-n{display:none; font-size:11px; font-weight:800; letter-spacing:.16em; color:var(--accent);
  font-variant-numeric:tabular-nums; line-height:1; white-space:nowrap}
.flr-base-lbl{font-size:11px; font-weight:800; letter-spacing:.16em; color:var(--mark); line-height:1}
.flr h3{font-size:21px; font-weight:700; margin:0; line-height:1.2}
.flr p{color:var(--muted); font-size:15.5px; margin:0}
.gives{display:flex; flex-direction:column; margin:0; padding:0; list-style:none}
.gives::before{content:'תוצרים אופייניים'; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:800; color:var(--line-2); padding-bottom:7px; border-bottom:1px solid var(--line-2)}
.gives li{font-size:13px; font-weight:600; color:var(--muted);
  padding:5px 0; border-bottom:1px solid var(--line)}
.gives li:last-child{border-bottom:0}

/* the ground floor carries the load */
.flr.base{background:var(--sunk)}


.flr.base::after{content:''; position:absolute; inset-inline:0; bottom:0; height:3px; background:var(--ink)}

/* --- the shaft: advisory, running the full height --- */
.shaft{grid-column:1/-1; grid-row:1; position:relative; z-index:1;
  background:var(--accent); color:var(--accent-ink); padding:13px 26px 14px;
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  border-bottom:1px solid rgba(255,255,255,.3)}

.shaft-t{font-size:14.5px; font-weight:800; letter-spacing:.01em}
.shaft-s{font-size:12.5px; font-weight:600; opacity:.8}

/* each floor extends the blue spine and carries its own number on it */
.flr::before{content:attr(data-f); position:absolute; top:0; bottom:0; inset-inline-end:-96px; width:96px;
  background:var(--accent); color:var(--accent-ink); display:grid; place-items:center;
  font-size:15px; font-weight:800; letter-spacing:.1em; font-variant-numeric:tabular-nums}
.flr[data-f="01"]::before{bottom:3px}

/* --- ground the building sits on --- */
.bld-note{margin-top:20px; font-size:14.5px; color:var(--muted); max-width:var(--measure)}
.bld-note b{color:var(--ink); font-weight:700}

@media (prefers-reduced-motion:reduce){
  .flr, .shaft{opacity:1; transform:none; clip-path:none; transition:none}
}
@media(max-width:900px){
  .flr{grid-template-columns:1fr; gap:16px}
}
@media(max-width:760px){
  .bld{grid-template-columns:1fr}
  .shaft{padding:12px 18px 13px}
  .flr::before, .dtop{display:none}
  .flr-n{display:inline}
  .flr{padding:18px 18px 20px}
  .flr h3{font-size:19px}
  .flr p{font-size:15px}
  .shaft{padding:14px 18px}
  .shaft-t{text-align:start; font-size:14.5px}
  .shaft-s{display:inline; text-align:start; font-size:12.5px; margin:0}
  .shaft-line{display:none}
}

/* ============ products ============ */
.prods{display:grid; grid-template-columns:1fr 1fr; gap:22px}
@media(max-width:820px){ .prods{grid-template-columns:1fr} }
.prod{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:28px 26px; display:flex; flex-direction:column; transition:border-color .2s}
.prod:hover{border-color:var(--accent)}
.prod .tagline{font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:12px}
.prod h3{font-size:26px; font-weight:700; margin-bottom:10px}
.prod > p{color:var(--muted); font-size:16px}
.prod ul{list-style:none; margin:6px 0 22px; padding:0}
.prod li{padding:10px 0; border-top:1px solid var(--line); font-size:15.5px}
.prod li b{font-weight:700}
.prod .btn{margin-top:auto; align-self:flex-start}

/* ============ domains ============ */
.domains{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
@media(max-width:880px){ .domains{grid-template-columns:repeat(2,1fr)} }
@media(max-width:540px){ .domains{grid-template-columns:1fr} }
.domain{background:var(--ground); padding:22px 20px 24px; transition:background .2s}
.domain:hover{background:var(--surface)}
.domain h3{font-size:17.5px; font-weight:700; line-height:1.3; margin-bottom:7px}
.domain p{font-size:14.5px; color:var(--muted); margin:0}
.domain.is-ai h3{color:var(--accent)}

/* ============ cases ============ */
.case-row{display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; gap:6px 22px;
  align-items:baseline; padding:22px 0; border-top:1px solid var(--line);
  text-decoration:none; transition:padding .2s}
.case-row:last-child{border-bottom:1px solid var(--line)}
.case-row:hover{padding-inline-start:8px}
.case-ico{grid-column:1; grid-row:1; align-self:center}
.case-tag{grid-column:2; grid-row:1; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:800; color:var(--muted); white-space:nowrap; min-width:10ch}
.case-tag.ai{color:var(--accent)}
.case-t{grid-column:3; grid-row:1; font-size:21px; font-weight:700; line-height:1.3}
.case-d{grid-column:3; grid-row:2; color:var(--muted); font-size:15.5px; margin:0}
.case-go{grid-column:4; grid-row:1; font-size:14px; font-weight:800; color:var(--accent); white-space:nowrap}


/* ============ clients ============ */
.wall{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
@media(max-width:820px){ .wall{grid-template-columns:repeat(3,1fr)} }
@media(max-width:480px){ .wall{grid-template-columns:repeat(2,1fr)} }
.wall span{background:var(--ground); display:grid; place-items:center; min-height:88px; padding:12px;
  font-size:clamp(15px,1.7vw,19px); font-weight:600; letter-spacing:-.015em; color:var(--muted);
  text-align:center; transition:color .25s, background .25s}
.wall span:hover{color:var(--ink); background:var(--surface)}
.wall span.more{color:var(--line-2); font-weight:500}

/* ============ about ============ */
.about-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:44px; align-items:start}
@media(max-width:820px){ .about-grid{grid-template-columns:1fr; gap:26px} }
.credgrp{font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--muted); margin:0 0 8px}
.credgrp + .creds{margin-bottom:22px}
.creds{list-style:none; margin:0; padding:0; font-size:15px}
.creds li{padding:9px 0; border-top:1px solid var(--line); display:flex; gap:12px}
.creds li:first-child{border-top:0}
.creds em{font-style:normal; color:var(--muted); font-size:13.5px; margin-inline-start:auto; text-align:end; white-space:nowrap}
.creds bdi{unicode-bidi:isolate}


/* ============ contact ============ */
.contact{background:var(--accent); color:var(--accent-ink)}
.contact h2{color:var(--accent-ink); font-size:clamp(27px,4vw,38px); margin-bottom:12px; max-width:20ch}
.contact p{color:var(--accent-ink); opacity:.82; max-width:48ch}
.contact .btn{background:var(--accent-ink); color:var(--accent); border-color:var(--accent-ink); margin-top:10px}
.contact .lines{margin-top:24px; font-size:16px; font-weight:700; display:flex; flex-wrap:wrap; gap:8px 24px}
.contact a{text-decoration:none; border-bottom:1px solid currentColor}
.foot{padding:26px 0 44px; font-size:13.5px; color:var(--muted)}
.foot .shell{display:flex; flex-wrap:wrap; gap:8px 20px}

/* ============ case page ============ */
.casepage{padding:52px 0 0}
.casepage h1{font-size:clamp(28px,5.2vw,44px); font-weight:700; line-height:1.13; letter-spacing:-.015em; max-width:19ch; margin-bottom:18px}
.case-meta{display:flex; flex-wrap:wrap; gap:5px 20px; font-size:14px; color:var(--muted); padding-bottom:22px; border-bottom:1px solid var(--line-2)}
.case-meta b{color:var(--ink); font-weight:700}
.case-body{max-width:var(--measure); padding:34px 0 20px}
.case-body h2{font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:800; margin:36px 0 12px}
.case-body h2:first-child{margin-top:0}
.case-body ul{padding-inline-start:0; list-style:none; margin:0 0 1em}
.case-body ul li{position:relative; padding-inline-start:20px; margin-bottom:10px}
.case-body ul li::before{content:""; position:absolute; inset-inline-start:2px; top:.72em; width:7px; height:2px; background:var(--accent)}
.pullquote{font-size:22px; line-height:1.45; font-weight:500; letter-spacing:-.012em;
  border-inline-start:3px solid var(--mark); padding-inline-start:20px; margin:28px 0}
.caveat{background:var(--sunk); border-radius:var(--r); padding:16px 18px; font-size:15.5px; color:var(--muted); margin:22px 0}
.caveat b{color:var(--ink)}
.backlink{display:inline-block; margin-top:30px; font-weight:800; color:var(--accent); text-decoration:none; font-size:15px}

/* preview bar */
.preview{background:var(--ink); color:var(--ground); font-size:12.5px; padding:8px 0; text-align:center; position:relative; z-index:50}
.preview button{background:none; border:1px solid currentColor; border-radius:3px; padding:2px 10px; margin-inline-start:8px; cursor:pointer; font-size:12px; font-weight:700}
.view[hidden]{display:none}

/* ---------- rotating word ---------- */
.rot{display:inline-grid; vertical-align:baseline; text-align:start}
.rot > span{grid-area:1/1; opacity:0; transform:translateY(.28em); transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1); color:var(--accent); white-space:nowrap}
.rot > span.on{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .rot > span{transition:none} }

/* ---------- icons ---------- */
.ico{width:26px; height:26px; display:block; margin-bottom:14px; color:var(--accent); stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.domain .ico{opacity:.9}
.case-ico{width:22px; height:22px; color:var(--line-2); stroke:currentColor; fill:none; stroke-width:1.6; flex:0 0 auto; transition:color .2s}
.case-row:hover .case-ico{color:var(--accent)}

@media(max-width:640px){
  .case-row{grid-template-columns:auto minmax(0,1fr); gap:4px 10px}
  .case-row>*{min-width:0}
  .case-ico{grid-column:1; grid-row:1}
  .case-tag{grid-column:2; grid-row:1; min-width:0}
  .case-t{grid-column:1/-1; grid-row:2}
  .case-d{grid-column:1/-1; grid-row:3}
  .case-go{grid-column:1/-1; grid-row:4; margin-top:4px}
}

/* ---------- ladder upgrade ---------- */
.rung{overflow:hidden}
.rung::before{content:""; position:absolute; inset-block-start:-2px; inset-inline:0; height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:right; transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.js .ladder.in .rung::before{transform:scaleX(1)}
.js .ladder.in .rung:nth-child(2)::before{transition-delay:.18s}
.js .ladder.in .rung:nth-child(3)::before{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){ .rung::before{transform:scaleX(1); transition:none} }
.rung{border-top:2px solid var(--line)}

/* ---------- counters ---------- */
.stat b{font-variant-numeric:tabular-nums}

/* ============ advisory roles strip ============ */
.roles{margin-top:20px; padding-top:18px; border-top:1px solid var(--line)}
.roles .lbl{font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:12px}
.roles ul{display:flex; flex-wrap:wrap; gap:7px; margin:0; padding:0; list-style:none}
.roles li{font-size:13.5px; font-weight:600; background:var(--surface); border:1px solid var(--line-2);
  border-radius:999px; padding:6px 14px; color:var(--ink)}

/* ============ deliverable mockups ============ */
.mocks{display:grid; grid-template-columns:1.25fr 1fr; gap:22px; align-items:start}
@media(max-width:900px){ .mocks{grid-template-columns:1fr} }
.mock{background:var(--surface); border:1px solid var(--line-2); border-radius:6px; overflow:hidden}
.mock-bar{display:flex; align-items:center; gap:8px; padding:9px 13px; border-bottom:1px solid var(--line); background:var(--sunk)}
.mock-bar i{width:8px; height:8px; border-radius:50%; background:var(--line-2); display:block}
.mock-bar span{font-size:12px; font-weight:600; color:var(--muted); margin-inline-start:6px}
.mock-body{padding:0}
.mock-cap{font-size:12.5px; color:var(--muted); margin-top:10px; display:flex; gap:6px; align-items:center}
.mock-cap b{color:var(--mark); font-weight:700}

/* --- simulation mockup --- */
.sim{display:grid; grid-template-columns:1.35fr 1fr}
@media(max-width:620px){ .sim{grid-template-columns:1fr} }
.sim-map{background:var(--surface); border-inline-start:1px solid var(--line); position:relative}
.sim-map svg{display:block; width:100%; height:auto}
.sim-legend{position:absolute; inset-block-end:10px; inset-inline-end:10px; background:var(--surface);
  border:1px solid var(--line); border-radius:4px; padding:7px 10px; font-size:10.5px; font-weight:600; color:var(--muted)}
.sim-legend p{margin:0 0 3px; display:flex; align-items:center; gap:6px}
.sim-legend p:last-child{margin:0}
.sim-legend i{width:14px; height:2px; display:block}
.sim-panel{padding:14px 15px}
.sim-panel h4{font-size:13px; font-weight:700; margin:0 0 3px}
.sim-panel .sub{font-size:11.5px; color:var(--muted); margin:0 0 12px}
.stop{border-top:1px solid var(--line); padding:9px 0}
.stop:first-of-type{border-top:0; padding-top:0}
.stop .r1{display:flex; align-items:baseline; gap:8px; font-size:12.5px; font-weight:700}
.stop .r1 em{font-style:normal; font-weight:600; color:var(--muted); font-size:11.5px; margin-inline-start:auto; font-variant-numeric:tabular-nums}
.stop .r2{font-size:11.5px; color:var(--muted); margin-top:2px; font-variant-numeric:tabular-nums}
.stop .acts{display:flex; gap:5px; margin-top:7px}
.pill{font-size:10.5px; font-weight:700; border-radius:3px; padding:3px 9px; border:1px solid var(--line-2); color:var(--muted)}
.pill.ok{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.pill.no{border-color:var(--line-2)}
.sim-foot{border-top:1px solid var(--line); padding:11px 15px; display:flex; gap:16px; align-items:flex-end}
.bar-lbl{font-size:10.5px; color:var(--muted); font-weight:600; margin-bottom:5px}
.barwrap{flex:1}
.barwrap .bar{height:7px; background:var(--sunk); border-radius:2px; overflow:hidden}
.barwrap .bar i{display:block; height:100%; background:var(--line-2)}
.barwrap .bar.hi i{background:var(--accent)}

/* --- governance mockup --- */
.gov{padding:16px 16px 18px}
.gov h4{font-size:13px; font-weight:700; margin:0 0 12px}
.gstep{display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start; padding:9px 0; border-top:1px solid var(--line)}
.gstep:first-of-type{border-top:0; padding-top:0}
.gstep b{width:22px; height:22px; border-radius:4px; background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center; font-size:10.5px; font-weight:700; font-variant-numeric:tabular-nums}
.gstep .t{font-size:12.5px; font-weight:700; line-height:1.35}
.gstep .d{font-size:11.5px; color:var(--muted); margin-top:1px}
.gate{margin-top:12px; padding:9px 11px; background:var(--mark-soft); border-radius:4px; font-size:11.5px; color:var(--ink)}
.gate b{color:var(--mark); font-weight:700}

.audience{font-size:15px; color:var(--muted); margin:14px 0 0; max-width:var(--measure);
  border-inline-start:2px solid var(--accent); padding-inline-start:14px}
.audience b{color:var(--ink); font-weight:700}

/* ============ case-page deliverable mockups ============ */
.mk-single{max-width:560px; margin:26px 0}
.tbl{width:100%; border-collapse:collapse; font-size:12.5px}
.tbl th{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700;
  text-align:start; padding:9px 12px; border-bottom:1px solid var(--line)}
.tbl td{padding:9px 12px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{font-weight:700}
.var{display:inline-flex; align-items:center; gap:7px}
.var i{display:block; height:6px; border-radius:2px; background:var(--accent); min-width:3px}
.var i.warn{background:var(--mark)}
.tbl .neg{color:var(--mark); font-weight:700}

.chart{padding:16px 16px 10px}
.chart .cw{display:grid; grid-template-columns:repeat(8,1fr); gap:8px; align-items:end; height:110px; position:relative}
.chart .cw b{display:block; background:#CBD9F6; border-radius:2px 2px 0 0; position:relative}
.chart .cw b::after{content:""; position:absolute; inset-inline:0; top:0; height:3px; background:var(--accent)}
.chart .cw{padding-bottom:1px; border-bottom:1px solid var(--line-2)}
.chart .xa{display:grid; grid-template-columns:repeat(8,1fr); gap:8px; margin-top:7px; font-size:10px; color:var(--muted); text-align:center; font-variant-numeric:tabular-nums}
.chart svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.chart .cap{font-size:11px; color:var(--muted); margin-top:10px; display:flex; gap:14px}
.chart .cap span{display:flex; align-items:center; gap:5px}
.chart .cap i{width:12px; height:2px; display:block}

.pipe{padding:16px}
.player{border:1px solid var(--line-2); border-radius:4px; padding:10px 12px; margin-bottom:0; position:relative; background:var(--ground)}
.player + .player{margin-top:20px}
.player + .player::before{content:""; position:absolute; top:-15px; inset-inline-start:50%; width:1px; height:11px; background:var(--line-2)}
.player + .player::after{content:""; position:absolute; top:-7px; inset-inline-start:calc(50% - 3px); width:6px; height:6px;
  border-inline-end:1px solid var(--line-2); border-block-end:1px solid var(--line-2); transform:rotate(45deg)}
.player .t{font-size:12.5px; font-weight:700}
.player .d{font-size:11.5px; color:var(--muted); margin-top:2px}
.player.hi{border-color:var(--accent); background:var(--accent-soft)}
.player.hi .t{color:var(--accent)}

.blocks{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin:16px}
.blocks div{background:var(--surface); padding:13px 14px}
.blocks .t{font-size:12.5px; font-weight:700}
.blocks .d{font-size:11.5px; color:var(--muted); margin-top:2px}

/* ============ tools & systems ============ */
.stack{border-top:1px solid var(--line-2)}
.srow{display:grid; grid-template-columns:190px 1fr; gap:8px 26px; padding:16px 0; border-bottom:1px solid var(--line); align-items:start}
@media(max-width:720px){ .srow{grid-template-columns:1fr; gap:9px} }
.srow h3{font-size:14px; font-weight:700; padding-top:4px; letter-spacing:-.01em}
.srow h3 small{display:block; font-weight:400; color:var(--muted); font-size:12px; margin-top:2px; letter-spacing:0}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none}
.chips li{font-size:13.5px; font-weight:500; background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r); padding:5px 11px; color:var(--ink); transition:border-color .2s, color .2s}
.chips li:hover{border-color:var(--accent); color:var(--accent)}
.srow.build .chips li{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.stack-note{font-size:14.5px; color:var(--muted); margin-top:20px; max-width:var(--measure);
  border-inline-start:2px solid var(--mark); padding-inline-start:14px}
.stack-note b{color:var(--ink); font-weight:700}

.personal{margin-top:26px; padding-top:16px; border-top:1px solid var(--line); font-size:14px; color:var(--muted)}
.personal b{color:var(--ink); font-weight:600}

/* ============ site photography band ============ */
.sites{padding:46px 0}
.site-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.site-strip figure{margin:0; overflow:hidden; border-radius:var(--r); border:1px solid var(--line-2); background:var(--sunk)}
.site-strip img{display:block; width:100%; height:230px; object-fit:cover;
  filter:saturate(.9) contrast(1.02); transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.site-strip figure:hover img{transform:scale(1.03)}
.site-cap{margin:14px 0 0; font-size:14px; color:var(--muted); max-width:var(--measure)}
@media(max-width:640px){
  .site-strip{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:10px; padding-bottom:10px}
  .site-strip figure{flex:0 0 80%; scroll-snap-align:start}
  .site-strip img{height:190px}
}
@media (prefers-reduced-motion:reduce){ .site-strip img{transition:none} .site-strip figure:hover img{transform:none} }

/* ============ logo mark ============ */
.wordmark{display:flex; align-items:center; gap:10px}
.wordmark .mark{width:30px; height:30px; display:block; flex:0 0 auto}
.wm-t{display:block; line-height:1.1}
.mark-foot{width:64px; height:64px; display:block; margin:0 0 20px; opacity:.45}
@media(max-width:480px){ .wordmark .mark{width:26px; height:26px} }