/* ============================================================
   CASE STUDIES
   ============================================================ */
.cases { display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.case {
  border:1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow:hidden;
  display:flex; flex-direction:column; transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.case:hover { transform: translateY(-6px); border-color: var(--accent-line); box-shadow: var(--shadow-md); }
.case__viz { height: 168px; position:relative; overflow:hidden; border-bottom:1px solid var(--border-soft);
  background: radial-gradient(ellipse 80% 120% at 20% 0%, var(--accent-soft), transparent 60%), var(--bg-elev); }
.case__viz svg { position:absolute; inset:0; width:100%; height:100%; }
.case__tag { position:absolute; top:14px; left:14px; z-index:2; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); background: color-mix(in srgb,var(--bg) 70%, transparent); padding:5px 10px; border-radius:7px; border:1px solid var(--border-soft); }
.case__metric { position:absolute; bottom:14px; right:14px; z-index:2; text-align:right; }
.case__metric b { font-family:var(--font-mono); font-size:28px; font-weight:700; color: var(--emerald); line-height:1; }
.case__metric small { display:block; font-size:11px; color:var(--text-faint); }
.case__b { padding: 22px 22px 24px; flex:1; display:flex; flex-direction:column; }
.case__co { font-family:var(--font-mono); font-size:12px; color:var(--text-faint); letter-spacing:.05em; }
.case__t { font-size: 19px; font-weight:700; margin: 7px 0 14px; letter-spacing:-.01em; }
.case__pa { display:flex; flex-direction:column; gap:11px; flex:1; }
.case__pa div { font-size:13.5px; color:var(--text-dim); line-height:1.5; }
.case__pa div b { color:var(--text); font-weight:600; display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:3px; color:var(--text-faint); }
.case__link { margin-top:18px; display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--accent); }
.case__link svg{width:15px;height:15px; transition: transform .2s;}
.case:hover .case__link svg{ transform: translateX(3px); }

/* ============================================================
   EXPERTISE
   ============================================================ */
.exp-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.exp {
  border:1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 24px;
  transition: all .3s var(--ease); cursor: default; position:relative; overflow:hidden;
}
.exp::before { content:""; position:absolute; inset:0; opacity:0; transition:opacity .3s; background: radial-gradient(ellipse 100% 80% at 50% 0%, var(--accent-soft), transparent 70%); }
.exp:hover { transform: translateY(-4px); border-color: var(--accent-line); }
.exp:hover::before { opacity:1; }
.exp__ic { width:44px;height:44px;border-radius:12px; background: var(--accent-soft); color:var(--accent); display:grid;place-items:center; margin-bottom:16px; position:relative; transition: all .3s; }
.exp:hover .exp__ic { background: var(--accent); color:#fff; }
.exp__ic svg{width:22px;height:22px}
.exp h4 { font-size:17px; margin-bottom:7px; position:relative; }
.exp p { font-size:13.5px; color:var(--text-faint); position:relative; }
.exp__tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; position:relative; }
.exp__tags span { font-size:11.5px; padding:4px 9px; border-radius:7px; background:var(--surface-2); color:var(--text-dim); border:1px solid var(--border-soft); font-family:var(--font-mono); }

/* ============================================================
   LEADERSHIP
   ============================================================ */
.lead { background: var(--bg-elev); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }
.principles { display:grid; grid-template-columns: repeat(2,1fr); gap: 0 56px; }
.principle { display:flex; gap:20px; padding: 26px 0; border-bottom:1px solid var(--border-soft); align-items:flex-start; }
.principle__n { font-family:var(--font-mono); font-size:14px; font-weight:700; color:var(--accent); width:34px; flex:none; padding-top:3px; }
.principle h4 { font-size:19px; margin-bottom:7px; letter-spacing:-.01em; }
.principle p { color:var(--text-dim); font-size:14.5px; line-height:1.6; }

/* ============================================================
   NOW — live status
   ============================================================ */
.now-grid { display:grid; grid-template-columns: .85fr 1.15fr; gap: 40px; align-items:center; }
.now-card { border:1px solid var(--border); border-radius: var(--radius-lg); background:
  radial-gradient(ellipse 70% 60% at 0% 0%, var(--accent-soft), transparent 60%), var(--surface); padding: 28px; }
.now-card__top { display:flex; align-items:center; gap:11px; margin-bottom:22px; }
.now-card__top .live { display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color: var(--emerald); }
.now-card__top .live .dot { width:8px;height:8px;border-radius:50%;background:var(--emerald); animation:pulse 2.4s infinite; }
.now-card__top time { margin-left:auto; font-size:12.5px; color:var(--text-faint); font-family:var(--font-mono); }
.now-list { display:flex; flex-direction:column; gap:2px; }
.now-list li { list-style:none; display:flex; align-items:center; gap:13px; padding:13px 0; border-bottom:1px solid var(--border-soft); font-size:15px; }
.now-list li:last-child{border-bottom:0;}
.now-list li .ni { width:32px;height:32px;border-radius:9px;background:var(--surface-2); display:grid;place-items:center; color:var(--accent); flex:none; }
.now-list li .ni svg{width:17px;height:17px}
.now-side h3 { font-size: clamp(24px,3vw,32px); margin-bottom:16px; letter-spacing:-.02em; }
.now-side p { color:var(--text-dim); font-size:16px; line-height:1.7; margin-bottom:14px; }

/* ============================================================
   WRITING
   ============================================================ */
.writing__head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:42px; }
.write-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.post { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:24px; display:flex; flex-direction:column; transition: all .3s var(--ease); min-height: 200px; }
.post:hover { transform:translateY(-4px); border-color:var(--accent-line); box-shadow:var(--shadow-md); }
.post__cat { display:inline-flex; align-self:flex-start; white-space:nowrap; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); padding:5px 10px; border-radius:7px; margin-bottom:16px; }
.post h4 { font-size:18px; line-height:1.32; margin-bottom:10px; letter-spacing:-.01em; }
.post p { font-size:14px; color:var(--text-faint); line-height:1.55; flex:1; }
.post__foot { display:flex; align-items:center; gap:10px; margin-top:18px; font-size:12.5px; color:var(--text-faint); }
.post__foot .rd { margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:var(--accent); font-weight:600; }
.post__foot .rd svg{width:14px;height:14px}
.post.featured { background: radial-gradient(ellipse 90% 80% at 100% 0%, var(--accent-soft), transparent 60%), var(--surface); }

/* ============================================================
   SOCIAL PROOF
   ============================================================ */
.proof-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.proof { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:26px; }
.proof h5 { font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); margin-bottom:18px; font-weight:600; }
.proof ul { display:flex; flex-direction:column; gap:0; }
.proof li { list-style:none; display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border-soft); font-size:15px; font-weight:500; }
.proof li:last-child{border-bottom:0;}
.proof li .pd { width:7px;height:7px;border-radius:50%; background:var(--accent); flex:none; }
.proof li small { margin-left:auto; font-size:12px; color:var(--text-faint); font-family:var(--font-mono); }

/* ============================================================
   CONTACT + FOOTER
   ============================================================ */
.contact { background: var(--bg-elev); border-top:1px solid var(--border-soft); position:relative; overflow:hidden; }
.contact__inner { text-align:center; max-width: 720px; margin:0 auto; position:relative; z-index:2; }
.contact h2 { font-size: clamp(34px,5vw,60px); letter-spacing:-.03em; margin-bottom:20px; }
.contact h2 .grad { background:linear-gradient(100deg,var(--text),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.contact p { color:var(--text-dim); font-size: clamp(16px,1.8vw,19px); line-height:1.6; margin-bottom:36px; }
.contact__cta { display:flex; flex-wrap:wrap; gap:13px; justify-content:center; }
.contact__bg { position:absolute; inset:0; z-index:0; opacity:.5;
  background: radial-gradient(ellipse 50% 60% at 50% 100%, var(--accent-soft), transparent 60%); }

.footer { padding: 50px 0 40px; border-top:1px solid var(--border-soft); }
.footer__inner { display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.footer__left { display:flex; align-items:center; gap:13px; color:var(--text-faint); font-size:13.5px; }
.footer__links { display:flex; gap:6px; }
.footer__links a { width:38px;height:38px;border-radius:10px;border:1px solid var(--border); background:var(--surface); display:grid;place-items:center; color:var(--text-dim); transition:all .2s; }
.footer__links a:hover { color:var(--text); border-color:var(--accent-line); transform:translateY(-2px); }
.footer__links a svg{width:18px;height:18px}

/* ============================================================
   LOGO TILES + CHIPS
   ============================================================ */
.logo-tile { display:inline-flex; align-items:center; height:42px; border-radius:10px; overflow:hidden; border:1px solid var(--border); background:#fff; flex:none; }
.logo-tile img { height:100%; width:auto; display:block; }
.logo-tile--text { padding:0 16px; background:var(--surface-2); border-color:var(--border); color:var(--text); font-weight:700; font-size:15px; letter-spacing:-.01em; font-family:var(--font-sans); }
.logo-tile.sm { height:26px; border-radius:7px; }
.logo-chip { display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px; border-radius:7px; background:var(--surface-2); border:1px solid var(--border-soft); font-size:11.5px; font-weight:600; color:var(--text-dim); font-family:var(--font-mono); }
.logo-chip .lc-e { font-size:13px; }
.trust__row .logo-tile { opacity:.92; transition:opacity .2s, transform .2s; }
.trust__row .logo-tile:hover { opacity:1; transform:translateY(-2px); }
.md__logos { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-top:14px; position:relative; z-index:1; }

/* ============================================================
   HORIZONTAL SCROLL RAIL (Beyond + Expertise)
   ============================================================ */
.hscroll-rail { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--border) transparent; padding-bottom:14px; }
.hscroll-rail::-webkit-scrollbar { height:8px; }
.hscroll-rail::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
.hscroll-rail::-webkit-scrollbar-track { background:transparent; }
.hscroll { display:flex; gap:18px; width:max-content; padding:4px max(28px, calc((100vw - var(--maxw))/2 + 28px)); }

.bcard { flex:none; width:300px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); overflow:hidden; display:flex; flex-direction:column; transition:transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.bcard:hover { transform:translateY(-5px); border-color:var(--accent-line); box-shadow:var(--shadow-md); }
.bcard__viz { height:140px; display:grid; place-items:center; border-bottom:1px solid var(--border-soft); color:var(--accent);
  background:radial-gradient(ellipse 80% 100% at 50% 0%, var(--accent-soft), transparent 65%), var(--bg-elev); }
.bcard__viz svg { width:60px; height:60px; }
.bcard__viz.is-football { color:var(--emerald); background:radial-gradient(ellipse 80% 100% at 50% 0%, rgba(var(--emerald-rgb),.14), transparent 65%), var(--bg-elev); }
.bcard__viz.is-football svg { width:98px; height:98px; }
.bcard__b { padding:20px 22px 24px; }
.bcard__tag { font-family:var(--font-mono); font-size:11.5px; color:var(--accent); background:var(--accent-soft); padding:4px 9px; border-radius:7px; display:inline-block; margin-bottom:12px; }
.bcard h4 { font-size:18px; margin-bottom:8px; letter-spacing:-.01em; }
.bcard p { font-size:13.5px; color:var(--text-dim); line-height:1.55; }

/* Expertise as compact rail */
.exp-rail .exp { width:236px; flex:none; padding:20px; }
.exp-rail .exp__ic { width:38px; height:38px; border-radius:10px; margin-bottom:13px; }
.exp-rail .exp__ic svg { width:19px; height:19px; }
.exp-rail .exp h4 { font-size:15.5px; }
.exp-rail .exp p { font-size:12.5px; }
.exp-rail .exp__tags span { font-size:11px; padding:3px 8px; }

/* ============================================================
   CONNECT POPOVER
   ============================================================ */
.cpop { position:fixed; inset:0; z-index:500; display:none; align-items:center; justify-content:center; padding:24px; }
.cpop.open { display:flex; }
.cpop__backdrop { position:absolute; inset:0; background:color-mix(in srgb, var(--navy) 72%, transparent); backdrop-filter:blur(6px); animation:cpopfade .25s var(--ease); }
.cpop__card { position:relative; z-index:1; width:min(440px,100%); background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius-lg); padding:30px 30px 26px; box-shadow:var(--shadow-lg); animation:cpopin .32s var(--ease); }
@keyframes cpopfade { from{opacity:0} to{opacity:1} }
@keyframes cpopin { from{opacity:0; transform:translateY(16px) scale(.97)} to{opacity:1; transform:none} }
.cpop__x { position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:9px; border:1px solid var(--border); background:var(--surface); color:var(--text-dim); display:grid; place-items:center; cursor:pointer; transition:all .2s; }
.cpop__x:hover { color:var(--text); border-color:var(--accent-line); }
.cpop__x svg { width:16px; height:16px; }
.cpop__card h3 { font-size:24px; margin:14px 0 8px; letter-spacing:-.02em; }
.cpop__card > p { color:var(--text-dim); font-size:14.5px; line-height:1.55; margin-bottom:22px; }
.cpop__cta { display:flex; flex-direction:column; gap:10px; }
.cpop__row { display:flex; align-items:center; gap:14px; padding:13px 14px; border:1px solid var(--border); border-radius:13px; background:var(--surface); transition:all .2s var(--ease); }
.cpop__row:hover { border-color:var(--accent-line); background:var(--surface-2); }
.cpop__ic { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; flex:none; }
.cpop__ic svg { width:21px; height:21px; }
.cpop__txt { display:flex; flex-direction:column; }
.cpop__txt b { font-size:15px; font-weight:600; }
.cpop__txt small { font-size:12.5px; color:var(--text-faint); }
.cpop__arr { width:18px; height:18px; margin-left:auto; color:var(--text-faint); transition:transform .2s, color .2s; }
.cpop__row:hover .cpop__arr { transform:translateX(3px); color:var(--accent); }

/* nav active link (scrollspy) */
.nav__links a.active { background:var(--surface-2); color:var(--text); }

/* Writing as horizontal rail */
.write-rail .post { width:330px; flex:none; min-height:0; }

/* ============================================================
   MOBILE STATION CARDS (Journey)
   ============================================================ */
.metro__cards-rail { display:none; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory; scrollbar-width:none; }
.metro__cards-rail::-webkit-scrollbar { display:none; }
.metro__cards { display:flex; gap:16px; width:max-content; padding:4px 24px 8px; }
.mcard { flex:none; width:min(82vw, 360px); scroll-snap-align:center; border:1px solid var(--border); border-radius:var(--radius-lg);
  background:var(--bg-elev); overflow:hidden; box-shadow:var(--shadow-md); display:flex; flex-direction:column; }
.mcard__head { padding:22px 22px 18px; border-bottom:1px solid var(--border-soft); position:relative; overflow:hidden; }
.mcard__head::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse 70% 100% at 90% 0%, var(--accent-soft), transparent 65%); pointer-events:none; }
.mcard.future .mcard__head::after { background:radial-gradient(ellipse 70% 100% at 90% 0%, rgba(var(--emerald-rgb),.14), transparent 65%); }
.mcard__top { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; }
.mcard__emoji { font-size:30px; line-height:1; }
.mcard__step { font-family:var(--font-mono); font-size:12px; color:var(--text-faint); letter-spacing:.04em; }
.mcard .md__yr { margin:12px 0 10px; position:relative; z-index:1; }
.mcard__co { font-size:23px; font-weight:800; letter-spacing:-.02em; position:relative; z-index:1; }
.mcard__body { padding:20px 22px 24px; }

/* ============================================================
   SECTION DOT NAV (hanging dots, right edge — mobile)
   ============================================================ */
.dotnav { display:none; position:fixed; z-index:90; right:12px; top:50%; transform:translateY(-50%);
  flex-direction:column; align-items:flex-end; gap:2px; padding:10px 4px; }
.dotnav::before { content:""; position:absolute; right:11px; top:14px; bottom:14px; width:1.5px;
  background:var(--border); border-radius:2px; }
.dot { position:relative; display:flex; align-items:center; gap:9px; padding:7px 4px; text-decoration:none; }
.dot__pt { width:9px; height:9px; border-radius:50%; background:var(--border); border:1.5px solid transparent;
  transition:all .3s var(--ease); flex:none; position:relative; z-index:1; }
.dot.active .dot__pt { background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); transform:scale(1.15); }
.dot__lbl { font-size:11.5px; font-weight:600; color:var(--text); background:var(--bg-elev); border:1px solid var(--border);
  padding:4px 10px; border-radius:8px; box-shadow:var(--shadow-sm); white-space:nowrap; opacity:0; transform:translateX(8px) scale(.9);
  transition:all .25s var(--ease); pointer-events:none; }
.dot.active .dot__lbl { opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px){
  .hero__inner { grid-template-columns: 1fr; gap:40px; }
  .hero__portrait { order:-1; }
  .about__grid { grid-template-columns:1fr; }
  .now-grid { grid-template-columns:1fr; gap:30px; }
  .proof-grid { grid-template-columns: repeat(3,1fr); }
  .kpi-grid { grid-template-columns: repeat(3,1fr); }
  /* swap desktop metro map for mobile station cards */
  .metro { display:none; }
  .metro__cards-rail { display:block; }
  .odyssey { overflow:visible; }
  /* hanging dot nav for tablet + phone */
  .dotnav { display:flex; }
}
@media (max-width: 760px){
  :root { scroll-padding-top: 76px; }
  .wrap { padding:0 20px; }
  .sec-pad { padding: 68px 0; }
  .sec-head { margin-bottom:34px; }
  .nav { padding:12px 18px; }
  .nav__brand small { display:none; }
  .nav__links { display:none; }
  .nav__toggle { display:grid; }
  .nav.menu-open .nav__links { display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; padding:14px; gap:4px; background: color-mix(in srgb,var(--bg) 96%, transparent); border-bottom:1px solid var(--border); backdrop-filter: blur(14px); }
  .nav.menu-open .nav__links a { padding:14px; font-size:15px; }
  #connectBtn { padding:9px 13px; font-size:13px; }
  /* 2-up KPI grid on phones */
  .kpi-grid { grid-template-columns: repeat(2,1fr); }
  .kpi { padding:26px 18px; }
  .kpi:nth-child(odd){ border-right:1px solid var(--border-soft); }
  .kpi:nth-child(even){ border-right:0; }
  .kpi-grid .kpi:nth-last-child(-n+2){ border-bottom:0; }
  .kpi-grid .kpi:nth-last-child(1):nth-child(odd){ grid-column:1 / -1; }
  /* writing + proof stack-friendly */
  .proof-grid { grid-template-columns:1fr; }
  .write-rail .post { width:80vw; max-width:330px; }
  /* hero polish */
  .hero{ padding-top:100px; min-height:auto; padding-bottom:50px; }
  /* Mobile order: heading → image → status/lede/chips/CTAs */
  .hero__inner { display:flex; flex-direction:column; gap:22px; }
  .hero__copy { display:contents; }
  .hero h1 { order:-2; margin-bottom:0; }
  .hero__portrait { order:-1; margin:2px 0 4px; }
  .hero__status { order:0; margin-bottom:0; }
  .hero__lede { order:0; margin:0; }
  .hero__role { gap:6px; order:0; margin:0; }
  .hero__cta { gap:9px; order:0; }
  .hero__cta .btn { flex:1 1 auto; justify-content:center; }
  .portrait-ring { width:min(64vw, 300px); }
  .portrait-tag.t1{ left:-2%; } .portrait-tag.t2{ right:-2%; }
  .portrait-tag .pt-num { font-size:15px; }
  .hero__scroll { display:none; }
  /* writing head wraps */
  .writing__head { flex-direction:column; align-items:flex-start; gap:18px; }
  .odyssey__head { margin-bottom:28px; }
  .dotnav { right:8px; }
  .dot__lbl { font-size:11px; }
  /* contact buttons full-width */
  .contact__cta { flex-direction:column; }
  .contact__cta .btn { width:100%; justify-content:center; }
}
@media (max-width: 420px){
  .kpi-grid { grid-template-columns:1fr; }
  .kpi:nth-child(odd){ border-right:0; }
  .kpi-grid .kpi { border-bottom:1px solid var(--border-soft); }
  .kpi-grid .kpi:last-child{ border-bottom:0; }
}