/* ============================================================
   TECH QUARTERS · SHARED SITE STYLES
   Every page loads tokens.css (the theme) then this file.
   Values come from tokens.css only. Source: consulting (v2).
   Page specific components live in each page's own style block.
   ============================================================ */

/* ---------- base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--canvas);color:var(--text);line-height:1.6;font-size:var(--fs-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 20px}
@media(min-width:761px){.wrap{padding:0 32px}}
h1,h2,h3{font-family:var(--display);line-height:1.14;letter-spacing:-0.02em}
h1{font-size:var(--fs-h1);font-weight:800}
h2{font-size:var(--fs-h2);font-weight:700;max-width:720px}
h3{font-size:var(--fs-h3);font-weight:600}
p{font-size:var(--fs-body)}
a{color:inherit}
img{display:block;max-width:100%}
::selection{background:#7C5CFF33}
section{padding:var(--sect-y) 0}
.icn{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- section rhythm · label, headline, lede ---------- */
.eye{font-weight:700;font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:10px;margin-bottom:16px;color:var(--text)}
.eye::before{content:"";width:20px;height:3px;border-radius:2px;background:currentColor;flex-shrink:0}
.eye.inv{color:#fff}
.eye.center{justify-content:center}
.lede{font-size:var(--fs-lede);color:var(--muted);max-width:620px;margin-top:12px}
.hlx{color:var(--indigo-deep)}

/* section thread · the route motif as connective tissue */
.thread{display:flex;flex-direction:column;align-items:center;gap:7px;padding:4px 0}
.thread i{width:4px;height:4px;border-radius:50%;background:#C3CBDA}
.thread i:nth-child(2){opacity:.65}.thread i:nth-child(3){opacity:.35}

/* liveness dot · the only infinite loop outside mocks */
.live{width:7px;height:7px;border-radius:50%;background:var(--action);display:inline-block;flex-shrink:0;animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- nav · bar that detaches into a pill ---------- */
nav#nav{position:fixed;top:0;left:0;right:0;z-index:70;background:var(--night);border-bottom:1px solid #ffffff10;transition:all var(--t-nav) ease}
.navin{display:flex;align-items:center;justify-content:space-between;height:60px;max-width:var(--wrap-max);margin:0 auto;padding:0 20px;transition:all var(--t-nav) ease}
@media(min-width:761px){.navin{padding:0 32px;height:64px}}
nav#nav.pill{top:10px;left:50%;right:auto;transform:translateX(-50%);width:min(880px,calc(100% - 24px));border-radius:var(--r-pill);border:1px solid #ffffff14;box-shadow:0 18px 44px rgba(12,18,32,.35)}
nav#nav.pill .navin{height:54px;padding:0 10px 0 18px}
.logo{width:32px;height:32px;border-radius:8px;background:var(--g-logo);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:13px;color:#fff;text-decoration:none;flex-shrink:0}
.logo:focus-visible,.navlinks a:focus-visible,footer a:focus-visible{outline:3px solid #7C5CFF;outline-offset:2px}
.navlinks{display:flex;gap:22px;align-items:center}
.navlinks a{color:#B9C2D4;text-decoration:none;font-size:14px;font-weight:500;transition:color var(--t-hover)}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:#fff}
.navcta{background:var(--action);color:var(--action-ink)!important;padding:9px 16px;border-radius:var(--r-pill);font-weight:600!important;font-size:13.5px!important;box-shadow:var(--glow-action)}
@media(max-width:820px){.navlinks a:not(.navcta){display:none}}

/* ---------- buttons ---------- */
.btn{font-family:var(--body);font-weight:600;font-size:var(--fs-body);padding:14px 24px;border-radius:12px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;transition:transform var(--t-hover),box-shadow var(--t-hover),border-color var(--t-hover);cursor:pointer}
.btn:focus-visible{outline:3px solid #7C5CFF;outline-offset:2px}
.btn.primary{background:var(--action);color:var(--action-ink);box-shadow:var(--glow-action)}
.btn.primary:hover{transform:translateY(-2px)}
.btn.ghost{border-color:#C8D0DE;color:var(--text)}
.btn.ghost:hover{border-color:var(--text)}
.btn.ghostd{border-color:#ffffff2c;color:var(--dtext)}
.btn.ghostd:hover{border-color:#ffffff55}
.ctarow{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
@media(max-width:560px){.ctarow .btn{width:100%}}
.micro{font-size:12.5px;font-weight:500;color:var(--faint);margin-top:14px}

/* ---------- floating elements · both on every page ---------- */
.fab-call{position:fixed;bottom:22px;right:22px;z-index:65;background:var(--action);color:var(--action-ink);font-weight:600;font-size:14px;padding:14px 22px;border-radius:var(--r-pill);text-decoration:none;box-shadow:var(--glow-fab);transition:transform var(--t-hover)}
.fab-chat{position:fixed;bottom:22px;left:22px;z-index:65;width:52px;height:52px;border-radius:50%;background:var(--night);border:2px solid var(--action);color:var(--action);display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 14px 34px rgba(12,18,32,.3);transition:transform var(--t-hover)}
.fab-chat .icn{width:22px;height:22px}
.fab-call:hover,.fab-chat:hover{transform:translateY(-3px)}
.fab-call:focus-visible,.fab-chat:focus-visible{outline:3px solid #7C5CFF;outline-offset:3px}
@media(max-width:560px){.fab-call{bottom:16px;right:16px;padding:13px 20px}.fab-chat{bottom:16px;left:16px;width:48px;height:48px}}

/* ---------- shared card anatomy · icon tile, label, title, body ---------- */
.tile{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;flex-shrink:0}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:var(--pad-card);transition:transform var(--t-card) ease,box-shadow var(--t-card) ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--lift)}
.card h3{margin-bottom:6px}
.card p{font-size:13.5px;color:var(--muted)}
.island{background:var(--s1);border-radius:var(--r-island);padding:var(--pad-island);box-shadow:var(--lift);color:var(--dtext);position:relative;overflow:hidden}
.island.top::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--tc,var(--steel))}
.island h1,.island h2,.island h3{color:#fff}
.island .lede{color:var(--dmuted)}

/* numbered stage cards (consulting deep dive, home process, branch steps) */
.stagegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-cards);margin-top:40px;position:relative}
.stagegrid.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:960px){.stagegrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.stagegrid.three{grid-template-columns:1fr}}
@media(max-width:560px){.stagegrid{grid-template-columns:1fr}}
.stagegrid::before{content:"";position:absolute;top:44px;left:4%;right:4%;height:1px;background:var(--border)}
@media(max-width:960px){.stagegrid::before{display:none}}
.stage{position:relative;z-index:1}
.stage .tile{background:var(--sc,var(--indigo-deep));color:#fff;font-weight:700;font-size:13px;box-shadow:0 8px 20px color-mix(in srgb,var(--sc,var(--indigo-deep)) 32%,transparent)}
.stage.dark{background:var(--s1);border-color:var(--s1);box-shadow:var(--lift)}
.stage.dark h3{color:#fff}
.stage.dark p{color:var(--dmuted)}

/* before / after ledger */
.ledger{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:28px;box-shadow:0 3px 10px rgba(12,18,32,.05)}
@media(max-width:560px){.ledger{padding:20px}}
.lhead{display:grid;grid-template-columns:1fr 28px 1fr;gap:10px;font-weight:700;font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding-bottom:14px;border-bottom:1px solid var(--border);margin-bottom:6px}
.lrow{display:grid;grid-template-columns:1fr 28px 1fr;gap:10px;align-items:center;padding:13px 0;border-bottom:1px solid var(--border);font-size:13.5px}
.lrow:last-child{border-bottom:none}
.lbefore{color:var(--faint)}
.lafter{color:var(--text);font-weight:500}
.lx{color:#C6CEDC;font-weight:700;margin-right:8px}
.lc{color:var(--action);font-weight:700;margin-right:8px;text-shadow:0 2px 8px rgba(0,229,114,.35)}
.larrow{color:var(--faint);text-align:center}

/* ---------- closing CTA island ---------- */
.bcta{padding-bottom:96px}
@media(max-width:760px){.bcta{padding-bottom:72px}}
.ctaisland{text-align:center}
.ctaisland h2{color:#fff;margin:0 auto 12px}
.ctaisland h2 .hl{color:var(--action)}
.ctaisland p{font-size:var(--fs-body);color:var(--dmuted);max-width:520px;margin:0 auto 28px}
.ctaisland .ctarow{justify-content:center;margin-top:0}
.ctaisland .micro{color:var(--dfaint)}

/* ---------- footer · the bottom frame ---------- */
footer{background:var(--night);color:var(--dmuted);padding:32px 0;font-size:13px}
footer .wrap{display:flex;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;align-items:center}
.fbrand{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.fmark{height:22px;width:auto}
footer a{color:#B9C2D4;text-decoration:none}
footer a:hover{color:#fff}
.flinks{display:flex;gap:6px 14px;flex-wrap:wrap}
@media(max-width:560px){footer{padding:32px 0 96px}}

/* ---------- reveal + motion discipline ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity var(--t-reveal) var(--ease-reveal),transform var(--t-reveal) var(--ease-reveal)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:var(--d-1)}.d2{transition-delay:var(--d-2)}.d3{transition-delay:var(--d-3)}.d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important;transition:none!important}
}