/* ============================================================
   YUME SYSTEMS — components the company site adds on top of the
   foundation. Same tokens; ink panels for product, paper for prose.
   ============================================================ */

/* ---- section rhythm ---- */
.sec{padding:112px 0}
.sec + .sec:not(.ink):not(.alt){border-top:1px solid var(--line)}
.sec.alt{background:var(--ring-1); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.sec-tight{padding:72px 0}
@media(max-width:700px){ .sec{padding:76px 0} .sec-tight{padding:56px 0} }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--mono);
  font-size:11.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin:0 0 18px;
}
.eyebrow::before{content:""; width:22px; height:1.5px; background:currentColor; opacity:.8}
.sec h2, .ph h1 + .lede + h2{font-size:clamp(32px,4.6vw,56px); max-width:20ch; letter-spacing:-.022em; font-weight:500}
.sec .intro{font-size:clamp(16.5px,1.8vw,19px); color:var(--fg-2); max-width:62ch; margin:20px 0 0; line-height:1.65}
.sec-head{display:grid; grid-template-columns:1.1fr .9fr; gap:28px 64px; align-items:end}
.sec-head .intro{margin:0}
@media(max-width:900px){ .sec-head{grid-template-columns:1fr} }
.more{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14.5px; color:var(--fg); text-decoration:none; border-bottom:1.5px solid var(--accent); padding-bottom:3px; transition:gap .25s var(--ease), color .2s}
.more:hover{gap:12px; color:var(--accent)}

/* ============================================================
   HOME HERO
   ============================================================ */
.hx{padding:84px 0 0; min-height:calc(100vh - 72px); display:flex; flex-direction:column}
.hx .field::before{-webkit-mask-image:radial-gradient(ellipse 70% 80% at 75% 35%,#000 10%,transparent 75%); mask-image:radial-gradient(ellipse 70% 80% at 75% 35%,#000 10%,transparent 75%)}
.hx-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:40px; align-items:center; flex:1; width:100%}
@media(max-width:1060px){ .hx-grid{grid-template-columns:1fr; gap:56px} .hx{min-height:0} }
.hx h1{font-size:clamp(44px,5.6vw,82px); font-weight:500; margin:26px 0 0; line-height:1; letter-spacing:-.032em; max-width:13.5ch}
.hx .lede{color:var(--ink-fg-2)}
.hx-facts{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:46px; padding-top:26px; border-top:1px solid var(--ink-line); max-width:560px}
@media(max-width:420px){ .hx-facts{grid-template-columns:1fr 1fr} }
.hx-facts b{display:block; font-family:var(--display); font-weight:500; font-size:32px; letter-spacing:-.02em; line-height:1; color:var(--ink-fg)}
.hx-facts span{display:block; margin-top:8px; font-size:13px; color:var(--ink-fg-3); line-height:1.45; max-width:22ch}

/* the composition */
.hx-art{position:relative; aspect-ratio:1/0.9; width:100%; max-width:720px; margin-inline:auto}
.hx-art .iso{position:absolute; left:-10%; top:-6%; width:64%; opacity:.9}
.hx-art .frame.main{position:absolute; right:0; top:20%; width:86%; z-index:2}
.hx-art .fc{position:absolute; z-index:3}
.hx-art .fc.pipe{left:-4%; bottom:2%; width:48%}
.hx-art .fc.code{right:-2%; bottom:-6%; width:48%; z-index:4}
.hx-art .fc.toast{right:-2%; top:4%; width:50%; z-index:4}
@media(max-width:560px){
  .hx-art{aspect-ratio:1/.92}
  .hx-art .iso, .hx-art .fc.pipe{display:none}
  .hx-art .frame.main{width:100%; right:0; top:15%}
  .hx-art .frame.main .bar{height:26px}
  .hx-art .fc.toast{width:82%; right:-2%; top:0; padding:10px 12px}
  .hx-art .fc.code{width:74%; right:-2%; bottom:-2%}
  .hx-art .fc.code pre{font-size:10.5px}
}
@media(prefers-reduced-motion:no-preference){
  .float-a{animation:floatA 9s ease-in-out infinite}
  .float-b{animation:floatB 11s ease-in-out infinite}
  .float-c{animation:floatA 13s ease-in-out infinite reverse}
}
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* browser frame — used for every real screenshot on the site */
.frame{
  border-radius:14px; overflow:hidden; background:#211d19;
  border:1px solid rgba(245,245,244,.14);
  box-shadow:var(--sh-3), 0 0 0 1px rgba(0,0,0,.2);
}
.frame .bar{display:flex; align-items:center; gap:7px; height:34px; padding:0 12px; background:#2a2520; border-bottom:1px solid rgba(245,245,244,.08)}
.frame .bar i{width:10px; height:10px; border-radius:50%; background:#4a433b; flex:none}
.frame .bar i:nth-child(1){background:#e2664d} .frame .bar i:nth-child(2){background:#ffb199} .frame .bar i:nth-child(3){background:#69b37d}
.frame .bar span{
  margin-left:10px; flex:1; height:20px; border-radius:6px; background:rgba(245,245,244,.07);
  font-family:var(--mono); font-size:10.5px; color:#b8ad9f; display:flex; align-items:center; padding:0 10px; gap:6px;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; letter-spacing:.02em; min-width:0;
}
.frame .bar span::before{content:""; width:7px; height:8px; border:1.5px solid #8f8576; border-radius:2px; flex:none}
.frame img{display:block; width:100%; height:auto; aspect-ratio:1200/749; object-fit:cover; object-position:top}
.frame.light{background:#fff; border-color:var(--line-2); box-shadow:var(--sh-2)}

/* floating cards */
.fc{
  border-radius:14px; padding:14px 16px; color:var(--ink-fg);
  background:rgba(32,30,29,.94); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(245,245,244,.14); box-shadow:0 24px 50px -20px rgba(0,0,0,.7);
  font-size:12.5px;
}
.fc .lbl{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-fg-3); display:flex; justify-content:space-between; gap:10px}
.fc .lbl b{color:var(--ink-accent); font-weight:500}
.pipe ol{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px}
.pipe li{display:grid; grid-template-columns:78px 1fr 18px; align-items:center; gap:10px; font-family:var(--mono); font-size:10.5px; color:var(--ink-fg-2); letter-spacing:.06em; text-transform:uppercase}
.pipe li i{height:6px; border-radius:6px; background:rgba(245,245,244,.08); position:relative; overflow:hidden}
.pipe li i::after{content:""; position:absolute; inset:0 auto 0 0; width:var(--w); border-radius:6px; background:linear-gradient(90deg,#ec3014,#ffb199)}
.pipe li em{font-style:normal; text-align:right; color:var(--ink-fg)}
.toast{display:flex; gap:12px; align-items:flex-start}
.toast .ic{flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:rgba(240,112,106,.16); color:#ff8f86}
.toast p{margin:0; line-height:1.45; color:var(--ink-fg-2); font-size:12.5px}
.toast p b{display:block; color:var(--ink-fg); font-weight:600; font-size:13px; margin-bottom:2px}
.code{padding:0; overflow:hidden; background:rgba(16,14,12,.92)}
.code .lbl{padding:10px 14px; border-bottom:1px solid rgba(245,245,244,.08)}
.code pre{margin:0; border:0; border-radius:0; background:transparent; padding:12px 14px 14px; font-size:11.5px; line-height:1.75; white-space:pre; overflow:hidden}

/* ---- marquee of the stack ---- */
.marq{margin-top:72px; border-top:1px solid var(--ink-line); padding:22px 0; overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marq-track{display:flex; gap:56px; width:max-content}
@media(prefers-reduced-motion:no-preference){ .marq-track{animation:marq 40s linear infinite} .marq:hover .marq-track{animation-play-state:paused} }
@keyframes marq{to{transform:translateX(-50%)}}
.marq span{font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-fg-3); white-space:nowrap; display:inline-flex; align-items:center; gap:14px}
.marq span::before{content:""; width:6px; height:6px; transform:rotate(45deg); background:var(--ink-accent); opacity:.7}

/* ============================================================
   PAGE HERO — inner pages
   ============================================================ */
.ph{padding:92px 0 96px}
.ph-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center}
.ph-grid.solo{grid-template-columns:1fr}
@media(max-width:980px){ .ph-grid{grid-template-columns:1fr; gap:48px} }
.ph h1{font-size:clamp(40px,5.8vw,76px); font-weight:500; margin:24px 0 0; line-height:1.02; letter-spacing:-.03em; max-width:16ch}
.ph .lede{color:var(--ink-fg-2)}
.ph-art{position:relative}
.ph-art > img{display:block; width:100%; border-radius:var(--r-lg)}
.crumbs{display:flex; gap:8px; align-items:center; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-fg-3); margin-bottom:22px}
.crumbs a{text-decoration:none; color:var(--ink-fg-3)} .crumbs a:hover{color:var(--ink-accent)}
.crumbs i{width:4px; height:4px; border-radius:50%; background:var(--ink-fg-3); opacity:.6}

/* ============================================================
   FACT STRIP
   ============================================================ */
.strip{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; background:var(--ring-0); box-shadow:var(--sh-1);
}
@media(max-width:900px){ .strip{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .strip{grid-template-columns:1fr} }
.strip div{padding:30px 28px; position:relative}
.strip div + div{border-left:1px solid var(--line)}
@media(max-width:900px){ .strip div:nth-child(3){border-left:0} .strip div:nth-child(n+3){border-top:1px solid var(--line)} }
@media(max-width:520px){ .strip div + div{border-left:0; border-top:1px solid var(--line)} }
.strip b{display:block; font-family:var(--display); font-size:36px; font-weight:500; letter-spacing:-.025em; color:var(--fg); line-height:1}
.strip b em{font-style:normal; color:var(--accent)}
.strip span{display:block; margin-top:12px; font-size:14px; color:var(--fg-3); line-height:1.5}
.strip-wrap{margin-top:-56px; position:relative; z-index:3}

/* ============================================================
   SERVICES BENTO
   ============================================================ */
.bento{display:grid; grid-template-columns:repeat(12,1fr); gap:18px; margin-top:56px}
.tile{
  grid-column:span 4; display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--ring-0); border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--sh-1); position:relative;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.tile:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--line-2)}
.tile.w7{grid-column:span 7} .tile.w5{grid-column:span 5} .tile.w12{grid-column:span 12; flex-direction:row}
.tile .il{background:var(--ink); aspect-ratio:16/9; position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.tile.w7 .il, .tile.w5 .il{aspect-ratio:auto; height:250px}
.tile .il img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.tile:hover .il img{transform:scale(1.04)}
.tile .tx{padding:24px 26px 28px; display:flex; flex-direction:column; flex:1}
.tile .n{font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.16em}
.tile h3{font-size:24px; margin:10px 0 10px; letter-spacing:-.015em; font-weight:600}
.tile p{color:var(--fg-2); font-size:15px; margin:0; line-height:1.6}
.tile .chips{margin-top:18px}
.tile .go{position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:rgba(245,245,244,.1); color:#f5f5f4; border:1px solid rgba(245,245,244,.16); backdrop-filter:blur(8px);
  transform:scale(.85); opacity:0; transition:all .3s var(--ease)}
.tile:hover .go, .tile:focus-visible .go{opacity:1; transform:none}
.tile.w12 .il{flex:0 0 46%; aspect-ratio:auto; min-height:240px; border-bottom:0; border-right:1px solid var(--line)}
.tile.w12 .tx{justify-content:center; padding:36px 40px}
@media(max-width:980px){ .tile, .tile.w7, .tile.w5{grid-column:span 6} .tile.w12{grid-column:span 12} }
@media(max-width:640px){
  .bento{gap:14px}
  .tile, .tile.w7, .tile.w5, .tile.w12{grid-column:span 12}
  .tile.w12{flex-direction:column} .tile.w12 .il{flex:none; aspect-ratio:16/9; min-height:0; border-right:0; border-bottom:1px solid var(--line)}
  .tile.w12 .tx{padding:24px 26px 28px}
  .tile.w7 .il, .tile.w5 .il{height:auto; aspect-ratio:16/9}
}

.chips{display:flex; flex-wrap:wrap; gap:6px}
.chips span{font-family:var(--mono); font-size:11px; letter-spacing:.04em; padding:5px 10px; border-radius:999px; border:1px solid var(--line-2); color:var(--fg-2); background:var(--bg-2)}
.ink .chips span{background:rgba(245,245,244,.04)}

/* ============================================================
   BANNER — a single sentence between sections
   ============================================================ */
.banner{padding:110px 0; text-align:left}
.banner .q{
  font-family:var(--display); font-size:clamp(28px,4.4vw,56px); font-weight:500;
  line-height:1.14; letter-spacing:-.025em; max-width:24ch; color:var(--fg); margin:0;
}
.banner .q em{font-style:italic}
.banner .by{margin:26px 0 0; font-family:var(--mono); font-size:12px; color:var(--fg-3); letter-spacing:.12em; text-transform:uppercase; display:flex; align-items:center; gap:12px}
.banner .by::before{content:""; width:28px; height:1.5px; background:var(--accent)}
.banner:not(.ink){background:var(--ring-1); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.banner.ink .q em{background:linear-gradient(100deg,#ff7a5e,#ec3014 50%,#ffb199); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ============================================================
   FEATURED WORK — case studies
   ============================================================ */
.case{display:grid; grid-template-columns:1.15fr .85fr; gap:64px; align-items:center; margin-top:72px}
.case.flip{grid-template-columns:.85fr 1.15fr}
.case.flip .case-art{order:2}
@media(max-width:980px){ .case, .case.flip{grid-template-columns:1fr; gap:36px} .case.flip .case-art{order:0} }
.case-art{position:relative; padding:28px; border-radius:var(--r-xl); background:var(--ink); overflow:hidden; isolation:isolate}
.case-art .glow{opacity:.5}
.case-art .frame{position:relative; z-index:1; transition:transform .5s var(--ease)}
.case:hover .case-art .frame{transform:translateY(-4px) rotate(-.3deg)}
.case-art .fc{position:absolute; z-index:2}
.case-art .fc.tl{left:14px; bottom:14px}
.case-art .fc.tr{right:14px; top:14px}
@media(max-width:560px){ .case-art{padding:16px} .case-art .fc{position:relative; left:auto!important; right:auto!important; top:auto!important; bottom:auto!important; margin-top:12px} }
.case h3{font-size:clamp(28px,3.4vw,40px); letter-spacing:-.02em; font-weight:500; margin:16px 0 14px}
.case p{color:var(--fg-2); margin:0 0 16px; line-height:1.7}
.case .tag{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:6px 11px; border-radius:999px; border:1px solid var(--accent-line); color:var(--accent); background:var(--accent-tint)}
.case .tag.live::before, .work .tag.live::before{content:""; width:7px; height:7px; border-radius:50%; background:#3fa465; box-shadow:0 0 0 3px rgba(63,164,101,.18)}
.kv{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; margin:24px 0 26px}
.kv div{background:var(--ring-0); padding:16px 18px}
.kv b{display:block; font-family:var(--display); font-size:26px; font-weight:500; letter-spacing:-.02em; line-height:1}
.kv span{display:block; margin-top:6px; font-size:13px; color:var(--fg-3)}
.stat-chip{display:flex; align-items:center; gap:10px}
.stat-chip b{font-family:var(--display); font-weight:500; font-size:24px; letter-spacing:-.02em; color:var(--ink-fg); line-height:1}
.stat-chip span{font-size:11.5px; color:var(--ink-fg-3); line-height:1.35; max-width:16ch}

/* ---- demo / work cards ---- */
.work{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px}
.work.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:980px){ .work, .work.two{grid-template-columns:1fr 1fr} }
@media(max-width:640px){ .work, .work.two{grid-template-columns:1fr} }
.work article{
  border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden;
  background:var(--ring-0); display:flex; flex-direction:column; box-shadow:var(--sh-1);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.work article:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--line-2)}
.work .shot{padding:20px 20px 0; background:linear-gradient(160deg,var(--ink-3),var(--ink)); position:relative; overflow:hidden}
.work .shot .frame{border-radius:10px 10px 0 0; border-bottom:0; box-shadow:0 -10px 40px -10px rgba(0,0,0,.5); transition:transform .5s var(--ease)}
.work .shot .frame .bar{height:26px} .work .shot .frame .bar i{width:8px; height:8px}
.work .shot .frame .bar span{height:16px; font-size:9.5px}
.work article:hover .shot .frame{transform:translateY(-6px)}
.work .shot .frame img{aspect-ratio:16/10}
.work .body{padding:24px 26px 28px; display:flex; flex-direction:column; flex:1}
.work .tag{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; padding:5px 10px; border-radius:999px;
  border:1px solid var(--line-2); color:var(--fg-2); background:var(--bg-2);
  align-self:flex-start; margin-bottom:14px;
}
.work .tag.live{border-color:var(--accent-line); color:var(--accent); background:var(--accent-tint)}
.work h3{font-size:22px; margin:0 0 10px; letter-spacing:-.015em}
.work p{color:var(--fg-2); font-size:15px; margin:0 0 14px; line-height:1.62}
.work .meta{margin-top:auto; padding-top:8px; display:flex; flex-wrap:wrap; gap:7px; align-items:center}
.work .meta a, a.more-sm{
  font-size:14px; font-weight:600; color:var(--fg); text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; border-bottom:1.5px solid var(--accent); padding-bottom:2px; transition:gap .25s var(--ease), color .2s;
}
.work .meta a:hover, a.more-sm:hover{color:var(--accent); gap:12px}

/* ============================================================
   WHY — ink section with a project feed
   ============================================================ */
.why-grid{display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center}
@media(max-width:980px){ .why-grid{grid-template-columns:1fr; gap:48px} }
.feed{position:relative; display:grid; gap:14px}
.feed::before{content:""; position:absolute; left:22px; top:20px; bottom:20px; width:1px; background:linear-gradient(var(--ink-line-2),transparent)}
.feed .fc{position:relative; margin-left:46px; padding:16px 18px}
.feed .fc::before{content:""; position:absolute; left:-30px; top:20px; width:11px; height:11px; border-radius:50%; background:var(--ink); border:2px solid var(--ink-accent)}
.feed .fc.now::before{background:var(--ink-accent); box-shadow:0 0 0 5px rgba(255,106,77,.18)}
.feed h4{font-family:var(--sans); font-size:14.5px; font-weight:600; color:var(--ink-fg); margin:8px 0 6px; letter-spacing:0}
.feed p{margin:0; font-size:13.5px; color:var(--ink-fg-2); line-height:1.55}
.feed ul{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; font-size:13px; color:var(--ink-fg-2)}
.feed li{display:flex; gap:10px; align-items:baseline}
.feed li b{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-fg-3); font-weight:500; flex:0 0 78px}
.callout{
  position:relative; background:var(--accent-tint); border:1px solid var(--accent-line);
  padding:20px 24px; border-radius:var(--r-lg); margin-top:30px;
  color:var(--fg-2); font-size:15.5px; line-height:1.68; max-width:70ch;
}
.callout b{color:var(--fg)}
.callout a{color:var(--fg); text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1.5px; text-underline-offset:3px}

/* comparison */
.compare{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; margin-top:72px}
@media(max-width:760px){ .compare{grid-template-columns:1fr} }
.compare > div{padding:30px 32px}
.compare > div + div{border-left:1px solid var(--line); background:linear-gradient(160deg,rgba(255,106,77,.09),transparent 60%)}
@media(max-width:760px){ .compare > div + div{border-left:0; border-top:1px solid var(--line)} }
.compare h4{font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); margin:0 0 18px}
.compare > div + div h4{color:var(--accent)}
.compare ul{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.compare li{display:grid; grid-template-columns:22px 1fr; gap:12px; font-size:15px; color:var(--fg-2); line-height:1.5}
.compare li::before{content:"\2715"; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:10px; border:1px solid var(--line-2); color:var(--fg-3)}
.compare > div + div li{color:var(--fg)}
.compare > div + div li::before{content:"\2713"; background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:700}

/* ============================================================
   TECHNOLOGY — a terminal, not a logo wall
   ============================================================ */
.term{margin-top:56px; border-radius:var(--r-xl); overflow:hidden; background:var(--ink); color:var(--ink-fg); border:1px solid var(--line-2); box-shadow:var(--sh-2)}
.term-bar{display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid var(--ink-line); font-family:var(--mono); font-size:12px; color:var(--ink-fg-3)}
.term-bar i{width:10px; height:10px; border-radius:50%; background:#4a433b}
.term-bar i:nth-child(1){background:#e2664d} .term-bar i:nth-child(2){background:#ffb199} .term-bar i:nth-child(3){background:#69b37d}
.term-bar span{margin-left:10px}
.term-body{display:grid; grid-template-columns:240px 1fr}
@media(max-width:800px){ .term-body{grid-template-columns:1fr} }
.term-tabs{border-right:1px solid var(--ink-line); padding:14px; display:flex; flex-direction:column; gap:4px}
@media(max-width:800px){ .term-tabs{flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--ink-line); scrollbar-width:none} }
.term-tabs button{
  all:unset; cursor:pointer; padding:11px 14px; border-radius:10px; font-family:var(--mono); font-size:13px; color:var(--ink-fg-3);
  display:flex; align-items:center; gap:10px; white-space:nowrap; transition:background-color .2s, color .2s;
}
.term-tabs button::before{content:"$"; color:var(--ink-fg-3); opacity:.6}
.term-tabs button:hover{color:var(--ink-fg); background:rgba(245,245,244,.05)}
.term-tabs button[aria-selected="true"]{color:var(--ink-fg); background:rgba(255,106,77,.12)}
.term-tabs button[aria-selected="true"]::before{color:var(--ink-accent); opacity:1}
.term-tabs button:focus-visible{outline:2px solid var(--ink-accent); outline-offset:-2px}
.term-pane{padding:26px 28px 30px; font-family:var(--mono); font-size:13.5px; min-height:330px}
.term-pane[hidden]{display:none}
.term-pane .cmd{color:var(--ink-fg-3); margin:0 0 18px}
.term-pane .cmd b{color:var(--ink-accent); font-weight:500}
.term-pane .cmd::after{content:""; display:inline-block; width:8px; height:15px; background:var(--ink-accent); vertical-align:-2px; margin-left:6px}
@media(prefers-reduced-motion:no-preference){ .term-pane .cmd::after{animation:blink 1.1s steps(1) infinite} }
@keyframes blink{50%{opacity:0}}
.term-list{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
@media(max-width:640px){ .term-list{grid-template-columns:1fr} }
.term-list div{border:1px solid var(--ink-line); border-radius:12px; padding:14px 16px; background:rgba(245,245,244,.02); transition:border-color .2s, background-color .2s}
.term-list div:hover{border-color:rgba(255,106,77,.4); background:rgba(255,106,77,.05)}
.term-list b{display:block; font-family:var(--sans); font-size:15px; font-weight:600; color:var(--ink-fg)}
.term-list span{display:block; margin-top:5px; font-family:var(--sans); font-size:13px; color:var(--ink-fg-3); line-height:1.5}

/* ============================================================
   PROCESS — a visual track
   ============================================================ */
.track{list-style:none; margin:64px 0 0; padding:0; display:grid; grid-template-columns:repeat(7,1fr); gap:14px; counter-reset:t; position:relative}
.track::before{content:""; position:absolute; left:24px; right:24px; top:23px; height:2px; background:repeating-linear-gradient(90deg,var(--line-2) 0 8px,transparent 8px 14px)}
.track li{counter-increment:t; position:relative}
.track li::before{
  content:counter(t,decimal-leading-zero); display:grid; place-items:center; width:48px; height:48px; border-radius:50%;
  background:var(--ring-0); border:1px solid var(--line-2); font-family:var(--mono); font-size:12.5px; color:var(--fg);
  position:relative; z-index:1; box-shadow:0 0 0 6px var(--bg); transition:all .3s var(--ease);
}
.sec.alt .track li::before{box-shadow:0 0 0 6px var(--ring-1)}
.track li:first-child::before{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.track li:hover::before{border-color:var(--accent); color:var(--accent); transform:scale(1.06)}
.track li:first-child:hover::before{color:var(--on-accent)}
.track strong{display:block; font-family:var(--display); font-size:19px; font-weight:600; margin:20px 0 8px; letter-spacing:-.012em; line-height:1.2}
.track span{display:block; color:var(--fg-2); font-size:14px; line-height:1.55}
.track em{display:inline-block; font-style:normal; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-top:12px}
@media(max-width:1080px){
  .track{grid-template-columns:1fr; gap:0; max-width:640px}
  .track::before{left:23px; right:auto; top:24px; bottom:24px; width:2px; height:auto; background:repeating-linear-gradient(180deg,var(--line-2) 0 8px,transparent 8px 14px)}
  .track li{display:grid; grid-template-columns:48px 1fr; gap:0 22px; padding-bottom:28px}
  .track li::before{grid-row:span 3}
  .track strong{margin:10px 0 6px}
}

/* ---- process, at length ---- */
.steps{counter-reset:s; list-style:none; padding:0; margin:56px 0 0; display:grid; gap:18px}
.steps li{
  counter-increment:s; display:grid; grid-template-columns:120px 1fr 1.3fr; gap:28px; align-items:start;
  padding:30px 32px; border:1px solid var(--line); border-radius:var(--r-xl); background:var(--ring-0); box-shadow:var(--sh-1);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.steps li:hover{border-color:var(--accent-line); transform:translateX(4px)}
.steps li::before{
  content:counter(s,decimal-leading-zero); font-family:var(--display); font-size:64px; font-weight:500; line-height:.85; letter-spacing:-.04em;
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 25%,transparent)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.steps strong{display:block; font-family:var(--display); font-size:24px; font-weight:600; letter-spacing:-.015em; line-height:1.2}
.steps strong small{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:500; margin-top:10px}
.steps span{color:var(--fg-2); font-size:15.5px; line-height:1.7}
@media(max-width:860px){ .steps li{grid-template-columns:1fr; gap:12px; padding:26px 24px} .steps li::before{font-size:48px} }

/* ============================================================
   PROOF — a typographic wall of delivered platforms
   ============================================================ */
.wall{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); margin-top:56px}
@media(max-width:980px){ .wall{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .wall > div{padding:20px 16px 22px} .wall b{font-size:18px} .wall span{font-size:12.5px} .wall svg{display:none} }
.wall > div{border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px 26px 30px; position:relative; transition:background-color .3s var(--ease)}
.wall > div:hover{background:var(--accent-tint)}
.wall .sx{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3)}
.wall b{display:block; font-family:var(--display); font-size:22px; font-weight:500; letter-spacing:-.015em; line-height:1.2; margin-top:14px; color:var(--fg)}
.wall span{display:block; font-size:13.5px; color:var(--fg-2); margin-top:8px; line-height:1.5}
.wall svg{position:absolute; right:22px; top:24px; width:22px; height:22px; color:var(--accent); opacity:.85}

/* ============================================================
   CONTACT BAND — the closing call
   ============================================================ */
.cband{
  position:relative; overflow:hidden; isolation:isolate; border-radius:32px; padding:72px 64px;
  background:radial-gradient(120% 140% at 100% 0%,#ec3014 0%,#d42a10 28%,#3b0f08 58%,#141312 85%);
  color:#fff; box-shadow:0 30px 60px -30px rgba(20,19,18,.5);
}
.cband::before{content:""; position:absolute; inset:0; z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:48px 48px; -webkit-mask-image:linear-gradient(200deg,#000,transparent 70%); mask-image:linear-gradient(200deg,#000,transparent 70%)}
.cband-grid{display:grid; grid-template-columns:1.25fr .75fr; gap:48px; align-items:end}
@media(max-width:900px){ .cband{padding:48px 28px; border-radius:24px} .cband-grid{grid-template-columns:1fr; gap:32px} }
.cband h2{font-size:clamp(34px,5vw,64px); font-weight:500; letter-spacing:-.03em; line-height:1.02; color:#fff; max-width:15ch}
.cband h2 em{color:#ffd2b3; -webkit-text-fill-color:#ffd2b3; background:none}
.cband p{color:rgba(255,255,255,.82); margin:20px 0 0; max-width:52ch; font-size:17px; line-height:1.6}
.cband .btn-p{background:#fff; color:#201e1d; box-shadow:0 14px 34px -12px rgba(0,0,0,.5)}
.cband .btn-p:hover{background:#ffe9da}
.cband .btn-s{color:#fff; border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.06)}
.cband .btn-s:hover{border-color:#fff; background:rgba(255,255,255,.12)}
.cband ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.cband li a, .cband li .row{display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); color:#fff; text-decoration:none; font-size:14.5px; backdrop-filter:blur(8px); transition:background-color .2s, border-color .2s}
.cband li a:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3)}
.cband li svg{flex:none; opacity:.9}
.cband li small{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.65)}

/* the older, plainer band — kept for inner pages that want it quiet */
.band{
  border:1px solid var(--line-2); border-radius:var(--r-xl); padding:44px;
  background:var(--ring-1); display:grid; grid-template-columns:1fr auto;
  gap:30px; align-items:center;
}
@media(max-width:760px){.band{grid-template-columns:1fr; padding:28px}}
.band h2{font-size:clamp(24px,3vw,34px); margin:0 0 10px; max-width:24ch}
.band p{color:var(--fg-2); margin:0; max-width:56ch; line-height:1.65}

/* ============================================================
   SERVICES PAGE — each line written out
   ============================================================ */
.svc-nav{display:flex; flex-wrap:wrap; gap:8px; margin-top:34px}
.svc-nav a{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; padding:8px 13px; border-radius:999px; border:1px solid var(--ink-line-2); color:var(--ink-fg-2); transition:all .2s var(--ease)}
.svc-nav a:hover{border-color:var(--ink-accent); color:var(--ink-fg); background:rgba(255,106,77,.08)}
.line{padding:72px 0; border-top:1px solid var(--line); scroll-margin-top:90px}
.line:first-of-type{border-top:0; padding-top:24px}
.line-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:64px; align-items:start}
@media(max-width:900px){.line-grid{grid-template-columns:1fr; gap:28px}}
.line:nth-of-type(even) .line-grid > div:first-child{order:2}
@media(max-width:900px){ .line:nth-of-type(even) .line-grid > div:first-child{order:0} }
.line .il{border-radius:var(--r-xl); overflow:hidden; background:var(--ink); aspect-ratio:16/10; margin-top:28px; box-shadow:var(--sh-2); position:relative}
.line .il img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.line .eyebrow{margin-bottom:12px}
.line h3{font-size:clamp(30px,3.6vw,44px); letter-spacing:-.022em; font-weight:500}
.line .who{margin-top:14px; font-family:var(--mono); font-size:12.5px; color:var(--fg-3); line-height:1.7}
.line p{color:var(--fg-2); line-height:1.75; margin:0 0 18px; font-size:16.5px}
.line .deliv{margin-top:26px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--ring-0); padding:24px 26px; box-shadow:var(--sh-1)}
.line .deliv b{display:block; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:16px}
.line .deliv ul{list-style:none; margin:0; padding:0; font-size:14.5px; color:var(--fg-2); display:grid; grid-template-columns:1fr 1fr; gap:10px 26px}
@media(max-width:600px){.line .deliv ul{grid-template-columns:1fr}}
.line .deliv li{padding-left:26px; position:relative; line-height:1.5}
.line .deliv li::before{content:""; position:absolute; left:0; top:3px; width:16px; height:16px; border-radius:50%; background:var(--accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23b9410b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; border:1px solid var(--accent-line)}

/* ---- generic card grid (delivered systems, beliefs, questions) ---- */
.svc{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; margin-top:52px}
.svc article{
  background:var(--ring-0); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:30px 28px; display:flex; flex-direction:column; box-shadow:var(--sh-1); position:relative; overflow:hidden;
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.svc article::after{content:""; position:absolute; right:-60px; top:-60px; width:140px; height:140px; border-radius:50%; background:radial-gradient(circle,var(--accent-glow),transparent 70%); opacity:0; transition:opacity .4s var(--ease)}
.svc article:hover{border-color:var(--line-2); transform:translateY(-3px); box-shadow:var(--sh-2)}
.svc article:hover::after{opacity:1}
.svc .n{font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.14em; text-transform:uppercase}
.svc .ico{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--accent-tint); border:1px solid var(--accent-line); color:var(--accent); margin-bottom:18px}
.svc h3{font-size:22px; margin:12px 0 10px; letter-spacing:-.015em}
.svc .ico + h3{margin-top:0}
.svc p{color:var(--fg-2); font-size:15px; margin:0 0 16px; line-height:1.64}
.svc ul{list-style:none; margin:auto 0 0; padding:16px 0 0; border-top:1px solid var(--line); font-size:13.5px; color:var(--fg-3); display:grid; gap:7px}
.svc li{padding-left:18px; position:relative; line-height:1.5}
.svc li::before{content:""; position:absolute; left:0; top:9px; width:8px; height:1.5px; background:var(--accent)}
.svc.big article{padding:36px 32px}
.svc.big .n{font-family:var(--display); font-size:56px; line-height:.9; letter-spacing:-.04em; text-transform:none; font-weight:500; opacity:.9}
.ink .svc article{background:rgba(245,245,244,.03); box-shadow:none}
.ink .svc article:hover{background:rgba(245,245,244,.05)}

/* ============================================================
   WORK PAGE — hero stack of real screens
   ============================================================ */
.stack{position:relative; aspect-ratio:4/3.3; width:100%}
.stack .frame{position:absolute; width:76%; transition:transform .6s var(--ease)}
.stack .frame .bar{height:26px} .stack .frame .bar i{width:8px;height:8px} .stack .frame .bar span{height:16px; font-size:9.5px}
.stack .s1{left:0; top:0; z-index:1}
.stack .s2{left:12%; top:24%; z-index:2}
.stack .s3{left:24%; top:48%; z-index:3}
.stack:hover .s1{transform:translate(-10px,-10px)}
.stack:hover .s3{transform:translate(10px,10px)}

/* ---- platform row ---- */
.plats{display:flex; flex-wrap:wrap; gap:8px; margin-top:30px}
.plats span{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; padding:7px 13px; border-radius:999px; border:1px solid var(--line-2); color:var(--fg-2)}
.plats span.on{border-color:var(--accent-line); background:var(--accent-tint); color:var(--accent)}

/* ============================================================
   PRICING
   ============================================================ */
.tracks{display:inline-flex; gap:4px; margin-top:36px; padding:5px; border-radius:999px; border:1px solid var(--ink-line-2); background:rgba(245,245,244,.04); flex-wrap:wrap}
.tracks button{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  padding:11px 18px; border-radius:999px; cursor:pointer; border:0; background:transparent; color:var(--ink-fg-3);
  transition:all .25s var(--ease);
}
.tracks button:hover{color:var(--ink-fg)}
.tracks button[aria-selected="true"]{background:linear-gradient(135deg,#ff6a4d,#ec3014); color:#fff; box-shadow:0 8px 20px -8px rgba(236,48,20,.7)}
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px; align-items:stretch}
@media(max-width:980px){ .plans{grid-template-columns:1fr; max-width:560px} }
.plans article{
  background:var(--ring-0); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:32px 30px; display:flex; flex-direction:column; box-shadow:var(--sh-1); position:relative;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.plans article:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.plans article.best{
  background:var(--ink); color:var(--ink-fg); border-color:transparent; box-shadow:var(--sh-3);
  --fg:var(--ink-fg); --fg-2:var(--ink-fg-2); --fg-3:var(--ink-fg-3); --line:var(--ink-line); --accent:var(--ink-accent);
  overflow:hidden; isolation:isolate;
}
.plans article.best::before{content:""; position:absolute; z-index:-1; right:-120px; top:-120px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle,rgba(236,48,20,.45),transparent 70%)}
.plans .flag{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; display:block; min-height:14px}
.plans .best .flag{display:inline-flex; align-self:flex-start; padding:5px 10px; border-radius:999px; background:rgba(255,106,77,.14); border:1px solid rgba(255,106,77,.4)}
.plans h3{font-size:24px; margin:0 0 4px; font-weight:600}
.plans .amt{font-family:var(--display); font-size:clamp(28px,3vw,36px); font-weight:500; letter-spacing:-.025em; color:var(--fg); margin:14px 0 2px; line-height:1.1}
.plans .for{color:var(--fg-3); font-size:14.5px; margin:8px 0 0; line-height:1.5}
.plans ul{list-style:none; padding:22px 0 0; margin:22px 0 0; font-size:14.5px; color:var(--fg-2); border-top:1px solid var(--line); display:grid; gap:11px}
.plans li{padding-left:26px; position:relative; line-height:1.5}
.plans li::before{content:"\2713"; position:absolute; left:0; top:1px; width:17px; height:17px; border-radius:50%; display:grid; place-items:center; font-size:9.5px; font-weight:700; background:var(--accent-tint); color:var(--accent); border:1px solid var(--accent-line)}
.plans .when{margin-top:auto; padding-top:22px; font-family:var(--mono); font-size:11.5px; color:var(--fg-3); line-height:1.6}
.plans ul + .when{margin-top:24px; border-top:1px dashed var(--line); padding-top:18px}

/* ============================================================
   TEAM
   ============================================================ */
.team{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:52px}
@media(max-width:1000px){ .team{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .team{grid-template-columns:1fr} }
.team article{border:1px solid var(--line); border-radius:var(--r-xl); padding:26px; background:var(--ring-0); box-shadow:var(--sh-1); transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.team article:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.team article.lead{grid-column:span 2; display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:start; background:var(--ink); color:var(--ink-fg); border-color:transparent; --fg:var(--ink-fg); --fg-2:var(--ink-fg-2); --fg-3:var(--ink-fg-3); --accent:var(--ink-accent); position:relative; overflow:hidden; isolation:isolate}
.team article.lead::before{content:""; position:absolute; z-index:-1; left:-80px; bottom:-120px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(236,48,20,.35),transparent 70%)}
@media(max-width:560px){ .team article.lead{grid-column:span 1; grid-template-columns:1fr} }
.team .av{
  width:72px; height:72px; border-radius:20px; margin-bottom:18px; display:grid; place-items:center; position:relative; overflow:hidden;
  background:linear-gradient(140deg,var(--ink-3),var(--ink)); color:var(--ink-fg);
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; border:1px solid var(--line-2);
}
.team .av::after{content:""; position:absolute; inset:auto -20% -40% auto; width:70%; height:70%; border-radius:50%; background:radial-gradient(circle,rgba(236,48,20,.55),transparent 70%)}
.team .av span{position:relative; z-index:1}
.team .av img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:2}
.team .lead .av{width:120px; height:120px; border-radius:28px; font-size:26px; font-family:var(--display); margin:0; letter-spacing:0}
.team h3{font-size:19px; margin:0 0 4px}
.team .lead h3{font-size:28px; font-weight:500}
.team .role{font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.1em; text-transform:uppercase; margin:6px 0 0}
.team p{color:var(--fg-3); font-size:14.5px; margin:12px 0 0; line-height:1.6}
.team .lead p{color:var(--ink-fg-2); font-size:15.5px}

/* ============================================================
   FACTS LIST, NEVER LIST, TIME ZONES
   ============================================================ */
.facts-list{list-style:none; padding:0; margin:36px 0 0; max-width:820px}
.facts-list li{display:grid; grid-template-columns:220px 1fr; gap:24px; padding:20px 0; border-top:1px solid var(--line); font-size:15.5px; transition:padding-left .3s var(--ease)}
.facts-list li:last-child{border-bottom:1px solid var(--line)}
.facts-list li:hover{padding-left:8px}
@media(max-width:620px){.facts-list li{grid-template-columns:1fr; gap:6px}}
.facts-list b{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); font-weight:500; padding-top:3px}
.facts-list span{color:var(--fg-2); line-height:1.65}
.facts-list.price span{font-family:var(--display); font-size:22px; color:var(--fg); letter-spacing:-.01em}
.facts-list.never li{grid-template-columns:36px 220px 1fr}
.facts-list.never li::before{content:"\2715"; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--accent-line); background:var(--accent-tint); color:var(--accent); font-size:11px}
@media(max-width:620px){ .facts-list.never li{grid-template-columns:36px 1fr} .facts-list.never li span{grid-column:2} }

.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start}
@media(max-width:900px){ .split{grid-template-columns:1fr; gap:40px} }
.split .facts-list{margin-top:0}

.tz{border-radius:var(--r-xl); background:var(--ink); color:var(--ink-fg); padding:30px 28px; box-shadow:var(--sh-2); position:relative; overflow:hidden; isolation:isolate}
.tz::before{content:""; position:absolute; z-index:-1; right:-100px; top:-100px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle,rgba(236,48,20,.35),transparent 70%)}
.tz h4{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-fg-3); margin:0 0 22px}
.tz-row{display:grid; grid-template-columns:110px 1fr 54px; gap:14px; align-items:center; margin-bottom:16px; font-size:13.5px}
.tz-row b{font-weight:600; color:var(--ink-fg)}
.tz-row em{font-style:normal; font-family:var(--mono); font-size:11.5px; color:var(--ink-fg-3); text-align:right}
.tz-bar{height:12px; border-radius:6px; background:rgba(245,245,244,.07); position:relative; overflow:hidden}
.tz-bar i{position:absolute; top:0; bottom:0; border-radius:6px; background:rgba(245,245,244,.25)}
.tz-row.home .tz-bar i{background:linear-gradient(90deg,#ec3014,#ffb199)}
.tz-bar u{position:absolute; top:-3px; bottom:-3px; border-left:1.5px dashed rgba(255,106,77,.8); text-decoration:none}
.tz p{margin:20px 0 0; font-size:13px; color:var(--ink-fg-3); line-height:1.6; border-top:1px solid var(--ink-line); padding-top:16px}
.tz-scale{display:grid; grid-template-columns:110px 1fr 54px; gap:14px; font-family:var(--mono); font-size:10px; color:var(--ink-fg-3)}
.tz-scale div{display:flex; justify-content:space-between}
@media(max-width:480px){ .tz-row, .tz-scale{grid-template-columns:76px 1fr 44px; gap:10px} }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid; grid-template-columns:1.45fr .85fr; gap:28px; align-items:start; margin-top:-64px; position:relative; z-index:3}
@media(max-width:980px){ .contact-grid{grid-template-columns:1fr; margin-top:-48px} }
.formcard{background:var(--ring-0); border:1px solid var(--line); border-radius:var(--r-xl); padding:40px; box-shadow:var(--sh-2)}
@media(max-width:620px){ .formcard{padding:26px 20px} }
.formcard h2{font-size:28px; font-weight:500; letter-spacing:-.02em; margin:0 0 6px}
.formcard > p{color:var(--fg-3); margin:0 0 26px; font-size:14.5px}
.frow2{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px}
@media(max-width:620px){.frow2{grid-template-columns:1fr}}
.cside{display:grid; gap:12px; align-content:start}
.cb{border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 22px; background:var(--ring-0); box-shadow:var(--sh-1)}
.cb h3{font-family:var(--sans); font-size:14.5px; font-weight:600; letter-spacing:0; display:flex; align-items:center; gap:10px}
.cb h3 svg{color:var(--accent); flex:none}
.cb p{margin:8px 0 0; font-size:14px; color:var(--fg-2); line-height:1.6}
.cb a{color:var(--fg); font-weight:600; text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px}
.cb a:hover{color:var(--accent)}
.cb.hot{background:var(--ink); border-color:transparent; --fg:var(--ink-fg); --fg-2:var(--ink-fg-2); --accent:var(--ink-accent); color:var(--ink-fg)}
.ok-msg{padding:20px 0}
.ok-msg b{display:block; font-family:var(--display); font-size:28px; font-weight:500; letter-spacing:-.02em; margin:16px 0 10px}
.ok-msg p{color:var(--fg-2); margin:0}
.ok-msg .tick{width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--on-accent)}

/* ---- banner with the "another tab" graphic ---- */
.banner-grid{display:grid; grid-template-columns:1.3fr .7fr; gap:56px; align-items:center}
@media(max-width:900px){ .banner-grid{grid-template-columns:1fr; gap:36px} }
.tabs-art{display:grid; gap:10px; max-width:380px; margin-left:auto; width:100%}
@media(max-width:900px){ .tabs-art{margin-left:0} }
.tabs-art a{display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:14px; text-decoration:none; color:var(--fg);
  background:var(--ring-0); border:1px solid var(--line); box-shadow:var(--sh-1); font-size:14px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s}
.tabs-art a:nth-child(2){margin-left:22px} .tabs-art a:nth-child(3){margin-left:44px}
.tabs-art a:hover{transform:translateX(-6px); box-shadow:var(--sh-2); border-color:var(--accent-line)}
.tabs-art .fav{flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-family:var(--mono); font-size:11px; font-weight:500; color:#fff; background:var(--ink)}
.tabs-art .fav.o{background:linear-gradient(135deg,#ff6a4d,#c22610)}
.tabs-art b{font-weight:600; display:block; line-height:1.3}
.tabs-art small{display:block; font-family:var(--mono); font-size:10.5px; color:var(--fg-3); letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tabs-art .st{margin-left:auto; flex:none; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--mint); display:flex; align-items:center; gap:6px}
.tabs-art .st::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.tabs-art span:not(.fav):not(.st){min-width:0}

/* ---- page-hero mosaic of illustrations ---- */
.mosaic{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.mosaic img{border-radius:var(--r-lg); border:1px solid var(--ink-line-2); box-shadow:0 30px 60px -30px rgba(0,0,0,.8); display:block; width:100%}
.mosaic img:nth-child(2), .mosaic img:nth-child(4){transform:translateY(28px)}
@media(max-width:560px){ .mosaic{gap:10px} .mosaic img:nth-child(2), .mosaic img:nth-child(4){transform:translateY(16px)} }
.cband .cta{align-self:center}

.case-art .fc p{color:var(--ink-fg-2); margin:0; font-size:12.5px; line-height:1.45}
.case-art .fc p b{color:var(--ink-fg)}

/* ---- pricing hero card ---- */
.paycard{border-radius:var(--r-xl); padding:28px; background:rgba(32,30,29,.9); border:1px solid var(--ink-line-2); box-shadow:var(--sh-3); backdrop-filter:blur(10px)}
.paycard .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-fg-3); margin-bottom:22px}
.pc-row{margin-bottom:20px}
.pc-row b{display:block; font-size:14px; font-weight:600; color:var(--ink-fg); margin-bottom:10px}
.seg{display:flex; gap:4px; height:44px}
.seg span{display:flex; align-items:center; padding:0 12px; border-radius:10px; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.seg span:nth-child(1){background:linear-gradient(135deg,#ff6a4d,#ec3014)}
.seg span:nth-child(2){background:rgba(255,106,77,.32)}
.seg span:nth-child(3){background:rgba(224,180,94,.28)}
.pc-foot{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ink-line); border:1px solid var(--ink-line); border-radius:14px; overflow:hidden; margin-top:26px}
.pc-foot div{background:var(--ink-2); padding:14px}
.pc-foot small{display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-fg-3)}
.pc-foot b{display:block; margin-top:6px; font-family:var(--display); font-weight:500; font-size:18px; color:var(--ink-fg); line-height:1.2}
@media(max-width:480px){ .pc-foot{grid-template-columns:1fr} .paycard{padding:20px} }

/* ---- team hero: how a project is staffed ---- */
.org{display:grid; justify-items:center; gap:0; max-width:460px; margin-inline:auto}
.org-node{width:100%; text-align:center; border-radius:18px; padding:18px 20px; background:rgba(32,30,29,.9); border:1px solid var(--ink-line-2); box-shadow:0 24px 50px -24px rgba(0,0,0,.8)}
.org-node small{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-fg-3)}
.org-node b{display:block; font-family:var(--display); font-weight:500; font-size:24px; color:var(--ink-fg); margin-top:6px; letter-spacing:-.01em}
.org-node span{display:block; font-size:12.5px; color:var(--ink-fg-2); margin-top:6px}
.org-node.you{width:70%}
.org-node.pm{background:linear-gradient(135deg,rgba(236,48,20,.28),rgba(32,30,29,.92) 70%); border-color:rgba(255,106,77,.5)}
.org-link{width:2px; height:34px; background:linear-gradient(var(--ink-accent),rgba(255,106,77,.2))}
.org-team{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:100%}
.org-team span{text-align:center; padding:12px 8px; border-radius:12px; border:1px solid var(--ink-line-2); background:rgba(245,245,244,.03); font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--ink-fg-2)}
.org-note{display:flex; gap:10px; align-items:flex-start; margin-top:18px; font-size:12.5px; color:var(--ink-fg-3); line-height:1.5}
.org-note i{flex:none; width:7px; height:7px; border-radius:50%; background:#5fbf7f; margin-top:6px}

@media(max-width:520px){ .svc.big{grid-template-columns:1fr!important} }
.facts-list.never{max-width:none; margin-top:48px}
@media(max-width:480px){ .tracks button{padding:10px 12px; font-size:10.5px; letter-spacing:.06em} }
:root[data-theme="dark"] .plans article.best, :root[data-theme="dark"] .team article.lead, :root[data-theme="dark"] .cb.hot{border-color:rgba(255,106,77,.32)}

/* ---- a phone beside the desktop frame, so "works on a mid-range phone"
       is something you can see rather than only read ---- */
.case-art .phone{
  position:absolute; right:18px; bottom:-26px; width:19%; min-width:92px; max-width:132px;
  z-index:3; border-radius:12px; display:block; height:auto;
  box-shadow:0 20px 44px rgba(0,0,0,.42);
  transition:transform .5s var(--ease);
}
.case:hover .case-art .phone{transform:translateY(-6px)}
@media(max-width:900px){ .case-art .phone{right:12px; bottom:-18px; width:22%} }

/* ---- a row of phones, used where the point is the range of work ---- */
.phones{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:18px; margin-top:34px; align-items:start;
}
.phones figure{margin:0; text-align:center}
.phones img{
  width:100%; height:auto; display:block; border-radius:12px;
  box-shadow:0 16px 36px rgba(32,30,29,.18);
}
:root[data-theme="dark"] .phones img{box-shadow:0 16px 36px rgba(0,0,0,.5)}
.phones figcaption{
  margin-top:12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg-3);
}

/* ---- extra screens from inside one system ---- */
.screens{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px}
@media(max-width:700px){.screens{grid-template-columns:1fr}}
.screens figure{margin:0}
.screens img{
  width:100%; height:auto; display:block; border-radius:var(--r-md);
  border:1px solid var(--line); box-shadow:0 10px 26px rgba(32,30,29,.1);
}
:root[data-theme="dark"] .screens img{box-shadow:0 10px 26px rgba(0,0,0,.4)}
.screens figcaption{margin-top:9px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3)}

/* ============================================================
   SCROLLBAR — slim, and in the palette rather than the OS grey
   ============================================================ */
html{scrollbar-width:thin; scrollbar-color:var(--line-3) transparent}
::-webkit-scrollbar{width:9px; height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--fg-3) 55%, transparent);
  border-radius:999px; border:2px solid transparent; background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--fg-2) 70%, transparent); background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

/* ============================================================
   FAQ — grid-template-rows 0fr to 1fr, so the open and close
   animate smoothly whatever length the answer is. max-height
   guesses always either clip a long answer or crawl on a short one.
   ============================================================ */
.faq{max-width:860px; margin:40px auto 0}
.faq .qa{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--ring-0);
  margin-bottom:12px; overflow:hidden;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq .qa.is-open{border-color:var(--line-3); box-shadow:0 10px 30px -18px rgba(32,30,29,.3)}
:root[data-theme="dark"] .faq .qa.is-open{box-shadow:0 10px 30px -14px rgba(0,0,0,.6)}
.faq .qa-q{width:100%; text-align:left; background:none; border:0; font-family:var(--display); 
  display:flex; align-items:center; gap:16px; cursor:pointer; list-style:none;
  padding:22px 24px; font-family:var(--display); font-size:18.5px; font-weight:600;
  letter-spacing:-.012em; color:var(--fg); transition:color .22s var(--ease);
}
.faq .qa-q::-webkit-details-marker{display:none}
.faq .qa-q:hover{color:var(--accent)}
.faq .qa-q .q{flex:1}
.faq .qa-q .ico{
  flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-2); color:var(--fg-3);
  transition:transform .4s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.faq .qa.is-open summary .ico{transform:rotate(45deg); border-color:var(--accent); color:var(--accent)}
.faq .ans{overflow:hidden; height:auto; transition:height .4s var(--ease)}

.faq .ans > div{min-height:0}
.faq .ans p{
  margin:0 24px 22px; color:var(--fg-2); font-size:15.5px; line-height:1.72;
  opacity:0; transform:translateY(-6px);
  transition:opacity .3s var(--ease) .08s, transform .3s var(--ease) .08s;
}
.faq .qa.is-open .ans p{opacity:1; transform:none}
.faq .ans p + p{margin-top:-8px; padding-top:12px}
@media(prefers-reduced-motion:reduce){
  .faq .ans, .faq .ans p, .faq .qa-q .ico{transition:none}
}

/* ============================================================
   LEGAL / LONG-FORM PAGES
   ============================================================ */
.legal{max-width:760px}
.legal h2{font-size:clamp(22px,2.6vw,28px); margin:52px 0 14px; letter-spacing:-.015em}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:17.5px; margin:28px 0 10px}
.legal p, .legal li{color:var(--fg-2); line-height:1.74; font-size:15.8px}
.legal p{margin:0 0 15px}
.legal ul{margin:0 0 18px; padding-left:0; list-style:none}
.legal li{padding-left:22px; position:relative; margin-bottom:10px}
.legal li::before{content:""; position:absolute; left:0; top:11px; width:9px; height:1.5px; background:var(--accent)}
.legal .updated{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-3); padding-bottom:22px; border-bottom:1px solid var(--line); margin-bottom:38px;
}
.toc{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--ring-1);
  padding:22px 24px; margin:0 0 42px;
}
.toc b{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-3); margin-bottom:12px}
.toc ol{margin:0; padding-left:20px; columns:2; column-gap:30px}
@media(max-width:620px){.toc ol{columns:1}}
.toc li{margin-bottom:7px; break-inside:avoid}
.toc a{color:var(--fg-2); text-decoration:none; font-size:14.5px}
.toc a:hover{color:var(--accent)}

.ft-links{display:flex; gap:20px; flex-wrap:wrap}
.ft-links a{color:var(--ink-fg-2,var(--fg-3)); text-decoration:none; font-size:13.5px}
.ft-links a:hover{color:var(--accent)}

/* ============================================================
   TIGHTER VERTICAL RHYTHM
   112px between sections is generous on a 27-inch monitor and
   enormous on a laptop, where it means a whole screen of nothing
   between every idea. These scale with the viewport instead, so
   a large screen keeps the air and a small one stops scrolling
   through emptiness.
   ============================================================ */
section, .sec{padding:clamp(56px, 6.5vw, 96px) 0}
.sec-tight{padding:clamp(40px, 4.5vw, 64px) 0}
.page-hero{padding-top:clamp(52px, 6vw, 86px); padding-bottom:clamp(40px, 5vw, 70px)}
.sec-head{gap:clamp(18px, 2vw, 26px) clamp(32px, 4vw, 60px)}
.sec-head + *{margin-top:clamp(26px, 3vw, 40px)}
.svc, .work, .plans, .team, .phones{margin-top:clamp(26px, 3vw, 40px)}
.line{padding:clamp(34px, 4vw, 50px) 0}
.steps{margin-top:clamp(26px, 3vw, 40px)}
.steps li{padding-top:clamp(14px, 1.8vw, 20px); padding-bottom:clamp(14px, 1.8vw, 20px)}
.legal h2{margin-top:clamp(32px, 4vw, 48px)}
.faq{margin-top:clamp(26px, 3vw, 36px)}
.banner{padding:clamp(40px, 5vw, 60px) 0}



/* ---- density on the grids that are actually in the markup ----
   An earlier pass targeted .svc and .work, which the redesign no longer
   uses, so it changed nothing. These are the real ones. */
.bento{gap:14px}
.bento > *{padding:22px 20px}
.bento h3{font-size:18.5px; margin-bottom:8px}
.bento p{font-size:14.2px; line-height:1.56}
.wall{gap:12px}
.wall > *{padding:18px 20px}
.wall p{font-size:14px; line-height:1.55}
.track li{padding-top:14px; padding-bottom:14px}
.case{gap:clamp(26px,3vw,44px)}
.case p{font-size:15px; line-height:1.62; margin-bottom:12px}

/* ---- six tiles in the bento, not nine ----
   The grid is 12 columns and the first row is a 7 + 5 pair. With nine
   tiles the rest fell into clean rows of three; with six it left a lone
   tile on its own row with two thirds of the width empty. Pairing the
   remaining four gives 7+5 / 6+6 / 6+6 and no ragged edge. */
.bento .tile:nth-child(n+3){grid-column:span 6}
@media(max-width:860px){ .bento .tile{grid-column:span 12 !important} }

/* ---- closing state ----
   A <details> hides its content the instant `open` is removed, so the
   close never animates: it snaps. The script below keeps `open` on until
   the transition has finished and marks the element .closing meanwhile. */
.faq .qa-q{-webkit-tap-highlight-color:transparent}