/* =====================================================================
   SOLIPHEX GROUP — Design System
   Charcoal / white / orange · editorial · premium restraint
   Inherits the Soliphex identity (orange accent, Manrope+Inter, motion),
   elevated to group grade: navy → deep near-black charcoal.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Brand thread (recognisably Soliphex) */
  --orange:#FF6B1A;  --orange-d:#EC5F12;  --orange-soft:rgba(255,107,26,.12);
  --blue:#2F80ED;    /* product/UI/system indicators only */

  /* GROUP signature dark surfaces (near-black charcoal) */
  --ink:#0A0D12;
  --graphite:#0E1319;
  --graphite-2:#141A22;
  --graphite-3:#1B232D;

  /* Light surfaces */
  --white:#FFFFFF; --soft:#F6F8FA; --soft-2:#EEF2F5;
  --border:#E2E8ED; --border-2:#CFD8DF;

  /* Text */
  --text:#0B1016; --muted:#5C6B7A; --muted-2:#8A97A5;
  --on-dark:#E8EEF3; --on-dark-muted:#93A3B2;
  --dark-border:rgba(255,255,255,.10); --dark-border-2:rgba(255,255,255,.18);

  /* Type */
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --display:'Manrope','Inter',sans-serif;

  /* Layout */
  --maxw:1280px; --pad:clamp(20px,5vw,80px);
  --radius:14px; --radius-sm:10px; --radius-lg:22px; --radius-xl:28px;

  /* Motion */
  --ease:cubic-bezier(.22,1,.36,1);

  /* Back-compat aliases (ported Solutions components) */
  --navy:var(--graphite); --navy-2:var(--graphite-2); --navy-3:var(--graphite-3);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
:target{ scroll-margin-top:96px; }
body{
  font-family:var(--font); color:var(--text); background:var(--white);
  line-height:1.6; font-size:17px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--orange); color:#fff; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; border-radius:4px; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(66px,9vw,132px); }
.section--tight{ padding-block:clamp(48px,6vw,86px); }
.section--dark{ background:var(--graphite); color:var(--on-dark); }
.section--ink{ background:var(--ink); color:var(--on-dark); }
.section--soft{ background:var(--soft); }
.divider{ border:0; border-top:1px solid var(--border); }

/* ---------- Typography ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.8rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--orange);
}
.eyebrow::before{ content:""; width:24px; height:1.5px; background:var(--orange); display:inline-block; }
.eyebrow--plain::before{ display:none; }

h1,h2,h3,h4{ font-family:var(--display); font-weight:800; line-height:1.08; letter-spacing:-.02em; color:inherit; }
.h-display{ font-size:clamp(2.7rem,6.4vw,5rem); letter-spacing:-.04em; line-height:1.0; }
.h1{ font-size:clamp(2.3rem,4.7vw,3.5rem); letter-spacing:-.03em; }
.h2{ font-size:clamp(2rem,3.8vw,3rem); letter-spacing:-.028em; }
.h3{ font-size:clamp(1.25rem,2vw,1.55rem); }
.lead{ font-size:clamp(1.06rem,1.5vw,1.25rem); color:var(--muted); line-height:1.6; max-width:62ch; }
.section--dark .lead,.section--ink .lead{ color:var(--on-dark-muted); }
.balance{ text-wrap:balance; }
.measure{ max-width:60ch; }

.section-head{ max-width:780px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head .lead{ margin-top:1.15rem; }
.section-head h2{ margin-top:1rem; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-weight:700; font-size:.98rem; line-height:1;
  padding:.98rem 1.45rem; border-radius:var(--radius-sm);
  border:1.5px solid transparent;
  transition:transform .25s var(--ease),background .2s,border-color .2s,color .2s,box-shadow .25s;
  white-space:nowrap;
}
.btn svg,.btn i{ width:18px; height:18px; }
.btn .arrow{ transition:transform .25s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }
.btn-primary{ background:var(--orange); color:#fff; box-shadow:0 10px 24px -10px rgba(255,107,26,.6); }
.btn-primary:hover{ background:var(--orange-d); transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(255,107,26,.65); }
.btn-secondary{ background:transparent; color:var(--text); border-color:var(--border-2); }
.btn-secondary:hover{ border-color:var(--text); transform:translateY(-2px); }
.section--dark .btn-secondary,.section--ink .btn-secondary,.btn-ghost-light{ color:#fff; border-color:var(--dark-border-2); }
.section--dark .btn-secondary:hover,.section--ink .btn-secondary:hover,.btn-ghost-light:hover{ border-color:#fff; background:rgba(255,255,255,.06); }
.btn-lg{ padding:1.1rem 1.75rem; font-size:1.05rem; }
.btn-block{ width:100%; justify-content:center; }

.link-arrow{ display:inline-flex; align-items:center; gap:.4rem; font-weight:700; color:var(--orange); font-size:.95rem; }
.link-arrow svg,.link-arrow i{ width:17px; height:17px; transition:transform .25s var(--ease); }
.link-arrow:hover svg,.link-arrow:hover i{ transform:translateX(4px); }

/* ---------- Badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:.4rem .7rem; border-radius:7px; border:1px solid var(--border);
  color:var(--muted); background:var(--soft);
}
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge--company{ color:#b45309; background:rgba(255,107,26,.08); border-color:rgba(255,107,26,.25); }
.badge--product{ color:#1d6fe0; background:rgba(47,128,237,.08); border-color:rgba(47,128,237,.22); }
.badge--venture{ color:#0f9d6b; background:rgba(16,185,129,.08); border-color:rgba(16,185,129,.22); }
.badge--client{ color:var(--muted); background:var(--soft-2); border-color:var(--border-2); }
.section--dark .badge,.section--ink .badge{ background:rgba(255,255,255,.05); border-color:var(--dark-border-2); color:var(--on-dark-muted); }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--graphite); border-bottom:1px solid var(--dark-border);
  transition:background .3s var(--ease);
}
.site-header .nav{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:80px; transition:height .3s var(--ease); }
.site-header.scrolled{ background:rgba(10,13,18,.82); backdrop-filter:blur(14px) saturate(160%); }
.site-header.scrolled .nav{ height:66px; }

.brand-lockup{ display:inline-flex; align-items:center; gap:.7rem; }
.brand-lockup .brand-img{ height:30px; width:auto; display:block; }
.brand-lockup .brand-group{
  font-family:var(--display); font-weight:700; font-size:.72rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--on-dark-muted);
  padding-left:.7rem; border-left:1px solid var(--dark-border-2);
}
@media (max-width:420px){ .brand-lockup .brand-group{ display:none; } }

.nav-links{ display:flex; align-items:center; gap:2rem; list-style:none; }
.nav-links a{ color:var(--on-dark); font-weight:500; font-size:.95rem; position:relative; padding:.3rem 0; transition:color .2s; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--orange); transition:width .25s var(--ease); }
.nav-links a:hover,.nav-links a[aria-current="page"]{ color:#fff; }
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{ width:100%; }

.nav-right{ display:flex; align-items:center; gap:1rem; }
.nav-toggle{ display:none; width:46px; height:46px; border:1px solid var(--dark-border-2); border-radius:10px; background:rgba(255,255,255,.04); color:#fff; align-items:center; justify-content:center; }
.nav-toggle svg,.nav-toggle i{ width:22px; height:22px; }

/* mobile drawer */
.mobile-nav{
  position:fixed; inset:0 0 0 auto; width:min(88vw,400px); z-index:200;
  background:var(--graphite-2); border-left:1px solid var(--dark-border);
  transform:translateX(100%); transition:transform .4s var(--ease);
  display:flex; flex-direction:column; padding:1.25rem; overflow-y:auto;
}
.mobile-nav.open{ transform:translateX(0); }
.mobile-nav-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.mobile-nav-head .brand-img{ height:28px; }
.mobile-nav-close{ width:44px; height:44px; border:1px solid var(--dark-border-2); border-radius:10px; background:transparent; color:#fff; display:flex; align-items:center; justify-content:center; }
.mobile-nav a.m-link{ color:var(--on-dark); font-family:var(--display); font-weight:700; font-size:1.3rem; padding:.85rem 0; border-bottom:1px solid var(--dark-border); }
.mobile-nav a.m-link:hover{ color:#fff; }
.mobile-nav .btn{ margin-top:1.4rem; }
.nav-scrim{ position:fixed; inset:0; background:rgba(5,8,12,.6); backdrop-filter:blur(2px); z-index:150; opacity:0; pointer-events:none; transition:opacity .35s; }
.nav-scrim.open{ opacity:1; pointer-events:auto; }

/* ---------- Hero ---------- */
.hero{ position:relative; background:var(--white); overflow:hidden; }
.hero::before{ /* faint top-right warmth, very restrained */
  content:""; position:absolute; top:-30%; right:-10%; width:60%; height:120%;
  background:radial-gradient(closest-side,rgba(255,107,26,.06),transparent 70%); pointer-events:none;
}
.hero-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; padding-block:clamp(52px,7vw,104px); position:relative; }
.hero h1{ margin:1.4rem 0 0; }
.hero .lead{ margin-top:1.5rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.2rem; }
.hero-meta{ margin-top:1.9rem; display:flex; flex-wrap:wrap; gap:1.4rem; }
.hero-meta .hm{ display:flex; flex-direction:column; gap:.1rem; }
.hero-meta .hm b{ font-family:var(--display); font-weight:800; font-size:1.05rem; color:var(--text); }
.hero-meta .hm span{ font-size:.8rem; color:var(--muted); }

/* ---------- Ecosystem visual ---------- */
.eco{ position:relative; aspect-ratio:1/1; max-width:540px; margin-inline:auto; width:100%; }
.eco-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.eco-line{ fill:none; stroke:var(--border-2); stroke-width:1.5; stroke-dasharray:4 5; opacity:0; transition:opacity .8s var(--ease); }
.eco.on .eco-line{ opacity:1; }
.eco-line.live{ stroke:var(--orange); stroke-dasharray:none; opacity:.0; animation:none; }
.eco.on .eco-line.live{ opacity:.9; }
.eco-node{
  position:absolute; transform:translate(-50%,-50%);
  background:#fff; border:1px solid var(--border); border-radius:14px;
  padding:.8rem .95rem; width:min(45%,210px);
  box-shadow:0 20px 44px -26px rgba(10,13,18,.35);
  opacity:0; transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.eco.on .eco-node{ opacity:1; }
.eco-node .en-badge{ font-size:.58rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }
.eco-node .en-name{ font-family:var(--display); font-weight:800; font-size:.98rem; letter-spacing:-.01em; margin-top:.15rem; }
.eco-node .en-desc{ font-size:.74rem; color:var(--muted); margin-top:.1rem; }
.eco-node.is-center{
  background:var(--graphite); color:#fff; border-color:var(--graphite-3);
  width:min(42%,190px); text-align:center; box-shadow:0 26px 60px -24px rgba(10,13,18,.6);
}
.eco-node.is-center .en-name{ font-size:1.35rem; color:#fff; }
.eco-node.is-center .en-desc{ color:var(--on-dark-muted); }
.eco-node.is-center .dot{ color:var(--orange); }
.eco-node[data-pos="center"]{ top:50%; left:50%; }
.eco-node[data-pos="tl"]{ top:16%; left:24%; transition-delay:.05s; }
.eco-node[data-pos="tr"]{ top:16%; left:76%; transition-delay:.15s; }
.eco-node[data-pos="bl"]{ top:84%; left:24%; transition-delay:.25s; }
.eco-node[data-pos="br"]{ top:84%; left:76%; transition-delay:.35s; }
.eco-node .en-accent{ color:var(--orange); }
.eco-fallback{ display:none; }
@media (max-width:860px){
  .eco{ display:none; }
  .eco-fallback{ display:grid; gap:.7rem; }
}
.eco-chip{ display:flex; align-items:center; gap:.8rem; background:#fff; border:1px solid var(--border); border-radius:12px; padding:.85rem 1rem; }
.eco-chip .ec-badge{ font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }
.eco-chip .ec-name{ font-family:var(--display); font-weight:800; }
.eco-chip .ec-desc{ font-size:.8rem; color:var(--muted); }

/* ---------- Pillars ---------- */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:2.8rem; }
.pillar{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.8rem; transition:transform .3s var(--ease),border-color .25s,box-shadow .3s; }
.pillar:hover{ transform:translateY(-3px); border-color:var(--border-2); box-shadow:0 24px 44px -30px rgba(10,13,18,.28); }
.pillar .p-ico{ width:48px; height:48px; border-radius:12px; display:grid; place-items:center; border:1px solid var(--border); background:var(--soft); color:var(--graphite); margin-bottom:1.1rem; }
.pillar .p-ico svg,.pillar .p-ico i{ width:23px; height:23px; }
.pillar .p-kicker{ font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); }
.pillar h3{ margin:.55rem 0 .5rem; }
.pillar p{ color:var(--muted); font-size:.96rem; }
.pillar .link-arrow{ margin-top:1.2rem; }
@media (max-width:860px){ .pillars{ grid-template-columns:1fr; } }

/* ---------- Ecosystem / entity cards ---------- */
.eco-grid{ display:grid; grid-template-columns:1.5fr 1fr; grid-auto-rows:1fr; gap:1.25rem; margin-top:2.8rem; }
.ecard{ position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:transform .35s var(--ease),border-color .25s,box-shadow .35s; }
.ecard:hover{ transform:translateY(-4px); border-color:var(--border-2); box-shadow:0 34px 60px -36px rgba(10,13,18,.35); }
.ecard-pad{ padding:clamp(1.5rem,2.4vw,2.1rem); display:flex; flex-direction:column; height:100%; }
.ecard .e-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.1rem; }
.ecard .e-name{ font-family:var(--display); font-weight:800; font-size:1.3rem; letter-spacing:-.01em; }
.ecard .e-tagline{ font-family:var(--display); font-weight:800; font-size:clamp(1.15rem,1.7vw,1.45rem); letter-spacing:-.02em; line-height:1.15; }
.ecard .e-desc{ color:var(--muted); font-size:.95rem; margin-top:.6rem; }
.ecard .e-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.1rem; }
.ecard .e-tag{ font-size:.72rem; font-weight:600; color:var(--graphite); background:var(--soft); border:1px solid var(--border); border-radius:100px; padding:.3rem .7rem; }
.ecard .link-arrow{ margin-top:1.4rem; }
.ecard .e-feats{ list-style:none; display:grid; gap:.5rem; margin-top:1.1rem; }
.ecard .e-feats li{ display:flex; align-items:center; gap:.55rem; font-size:.9rem; color:var(--text); }
.ecard .e-feats li svg,.ecard .e-feats li i{ width:16px; height:16px; color:var(--blue); flex-shrink:0; }

/* Solutions — largest card (spans two rows) */
.ecard--solutions{ grid-row:span 2; }
.ecard--solutions .e-tagline{ font-size:clamp(1.5rem,2.6vw,2.1rem); margin-top:.3rem; }
.ecard--solutions .ecard-pad{ background:linear-gradient(180deg,#fff, var(--soft)); }

/* Product cards — carry a UI preview strip */
.ecard--product .e-ui{ margin-top:auto; }
/* Venture card — distinct dark treatment */
.ecard--venture{ background:linear-gradient(160deg,var(--graphite-2),var(--graphite)); color:#fff; border-color:var(--graphite-3); }
.ecard--venture .e-desc{ color:var(--on-dark-muted); }
.ecard--venture .e-name,.ecard--venture .e-tagline{ color:#fff; }
.ecard--venture:hover{ box-shadow:0 34px 70px -34px rgba(10,13,18,.7); }

@media (max-width:860px){ .eco-grid{ grid-template-columns:1fr; } .ecard--solutions{ grid-row:auto; } }

/* ---------- Product UI mockup (browser frame) ---------- */
.ui-frame{ border:1px solid var(--border); border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 30px 60px -40px rgba(10,13,18,.4); }
.section--dark .ui-frame,.ecard--venture .ui-frame{ border-color:var(--graphite-3); }
.ui-top{ display:flex; align-items:center; gap:.6rem; padding:.7rem .9rem; background:var(--graphite); }
.ui-dots{ display:flex; gap:6px; }
.ui-dots i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.22); display:block; }
.ui-dots i:first-child{ background:rgba(255,107,26,.8); }
.ui-url{ font-size:.72rem; color:var(--on-dark-muted); font-weight:600; margin-left:.3rem; }
.ui-body{ padding:.9rem; background:var(--soft); display:flex; flex-direction:column; gap:.5rem; }
.ui-row{ display:flex; align-items:center; gap:.75rem; padding:.7rem .85rem; background:#fff; border:1px solid var(--border); border-radius:10px; }
.ui-row .ui-ico{ width:34px; height:34px; border-radius:8px; display:grid; place-items:center; background:var(--soft); border:1px solid var(--border); color:var(--graphite); flex-shrink:0; }
.ui-row .ui-ico svg,.ui-row .ui-ico i{ width:17px; height:17px; }
.ui-row.is-accent .ui-ico{ background:var(--orange); border-color:var(--orange); color:#fff; }
.ui-row .ui-meta{ flex:1; min-width:0; }
.ui-row .ui-meta .t{ font-weight:700; font-size:.84rem; }
.ui-row .ui-meta .s{ font-size:.72rem; color:var(--muted); }
.ui-row .ui-stat{ font-family:var(--display); font-weight:800; font-size:.84rem; color:var(--graphite); }
.ui-row .ui-stat.up{ color:#12805c; }
.ui-shot{ aspect-ratio:16/10; overflow:hidden; background:var(--graphite-2); }
.ui-shot img{ width:100%; height:100%; object-fit:cover; object-position:top; }

/* ---------- Principles (dark) ---------- */
.principles{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--dark-border); border:1px solid var(--dark-border); border-radius:var(--radius-lg); overflow:hidden; margin-top:2.8rem; }
.principle{ background:var(--graphite); padding:2rem 1.7rem; transition:background .3s; }
.principle:hover{ background:var(--graphite-2); }
.principle .pr-n{ font-family:var(--display); font-weight:800; font-size:.8rem; color:var(--orange); letter-spacing:.1em; }
.principle h3{ color:#fff; margin:.9rem 0 .55rem; font-size:1.2rem; }
.principle p{ color:var(--on-dark-muted); font-size:.93rem; }
@media (max-width:860px){ .principles{ grid-template-columns:1fr; } }

/* ---------- Building model (dark, scroll-linked) ---------- */
.model{ margin-top:3rem; display:grid; gap:0; position:relative; }
.model-track{ position:absolute; left:27px; top:14px; bottom:14px; width:2px; background:var(--dark-border); overflow:hidden; }
.model-track span{ position:absolute; inset:0 0 auto 0; height:0; background:var(--orange); transition:height .6s var(--ease); }
.model.on .model-track span{ height:100%; }
.mstep{ display:grid; grid-template-columns:56px 1fr; gap:1.3rem; align-items:center; padding:.9rem 0; position:relative; z-index:1;
  opacity:0; transform:translateX(16px); transition:opacity .55s var(--ease),transform .55s var(--ease); }
.model.on .mstep{ opacity:1; transform:none; }
.model.on .mstep:nth-child(2){ transition-delay:.05s; } /* nth-child(1) is the track */
.model.on .mstep:nth-child(3){ transition-delay:.14s; }
.model.on .mstep:nth-child(4){ transition-delay:.23s; }
.model.on .mstep:nth-child(5){ transition-delay:.32s; }
.model.on .mstep:nth-child(6){ transition-delay:.41s; }
.model.on .mstep:nth-child(7){ transition-delay:.5s; }
.mstep .m-dot{ width:56px; height:56px; border-radius:15px; display:grid; place-items:center; background:var(--graphite-2); border:1px solid var(--dark-border-2); color:var(--on-dark); font-family:var(--display); font-weight:800; }
.mstep .m-dot svg,.mstep .m-dot i{ width:22px; height:22px; color:var(--orange); }
.mstep.is-peak .m-dot{ background:var(--orange); border-color:var(--orange); color:#fff; }
.mstep.is-peak .m-dot svg,.mstep.is-peak .m-dot i{ color:#fff; }
.mstep .m-label{ font-family:var(--display); font-weight:800; font-size:clamp(1.15rem,2vw,1.55rem); color:#fff; letter-spacing:-.01em; }
.mstep .m-sub{ font-size:.88rem; color:var(--on-dark-muted); margin-top:.1rem; }

/* ---------- Work cards (CLIENT PROJECT) ---------- */
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:2.8rem; }
.work-card{ display:block; background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:transform .35s var(--ease),border-color .25s,box-shadow .35s; }
.work-card:hover{ transform:translateY(-4px); border-color:var(--border-2); box-shadow:0 30px 55px -34px rgba(10,13,18,.35); }
.work-shot{ aspect-ratio:16/10; overflow:hidden; background:var(--graphite-2); position:relative; border-bottom:1px solid var(--border); }
.work-shot img{ width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .5s var(--ease); }
.work-card:hover .work-shot img{ transform:scale(1.04); }
.work-shot .ph{ position:absolute; inset:0; background:linear-gradient(155deg,#18212c 0%,#0A0D12 78%); }
.work-shot .ph::before{ content:""; position:absolute; top:0; left:0; right:0; height:28px;
  background:radial-gradient(circle 3px at 16px 14px,var(--orange) 96%,transparent),
            radial-gradient(circle 3px at 29px 14px,rgba(255,255,255,.28) 96%,transparent),
            radial-gradient(circle 3px at 42px 14px,rgba(255,255,255,.2) 96%,transparent),
            rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.07); }
.work-shot .ph b{ position:absolute; left:16px; bottom:13px; z-index:2; font-family:var(--display); font-weight:700; font-size:.9rem; color:rgba(255,255,255,.92); }
.work-body{ padding:1.2rem 1.35rem 1.4rem; }
.work-body .w-top{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.work-cat{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); }
.work-body h3{ margin:.45rem 0 .45rem; font-size:1.18rem; }
.work-body p{ color:var(--muted); font-size:.9rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:1024px){ .work-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .work-grid{ grid-template-columns:1fr; } }

/* ---------- Insights ---------- */
.featured-article{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; margin-top:2.8rem; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; background:#fff; }
.featured-article .fa-img{ aspect-ratio:16/11; background:var(--graphite-2); }
.featured-article .fa-img .media-ph{ width:100%; height:100%; display:grid; place-items:center; background:radial-gradient(120% 100% at 50% 0%,#18212c 0%,var(--graphite) 70%); color:var(--on-dark-muted); }
.featured-article .fa-body{ padding:clamp(1.5rem,3vw,2.6rem); }
.a-cat{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); }
.featured-article h3{ font-size:clamp(1.4rem,2.4vw,2rem); margin:.6rem 0 .7rem; }
.featured-article p{ color:var(--muted); }
.featured-article .a-meta{ color:var(--muted-2); font-size:.82rem; margin-top:1.1rem; }
.article-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:1.5rem; }
.article-card{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:#fff; transition:transform .3s var(--ease),box-shadow .3s,border-color .25s; display:block; }
.article-card:hover{ transform:translateY(-3px); border-color:var(--border-2); box-shadow:0 24px 44px -30px rgba(10,13,18,.3); }
.article-card .a-img{ aspect-ratio:16/9; background:var(--graphite-2); }
.article-card .a-img .media-ph{ width:100%; height:100%; display:grid; place-items:center; background:radial-gradient(120% 100% at 50% 0%,#18212c 0%,var(--graphite) 70%); color:var(--on-dark-muted); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.article-card .a-body{ padding:1.3rem 1.4rem 1.5rem; }
.article-card h3{ font-size:1.08rem; margin:.5rem 0; }
.article-card p{ color:var(--muted); font-size:.9rem; }
.article-card .a-meta{ color:var(--muted-2); font-size:.78rem; margin-top:.9rem; }
@media (max-width:1024px){ .article-grid{ grid-template-columns:repeat(2,1fr); } .featured-article{ grid-template-columns:1fr; } .featured-article .fa-img{ order:-1; } }
@media (max-width:640px){ .article-grid{ grid-template-columns:1fr; } }

/* ---------- Next / split feature ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.split--rev .s-media{ order:-1; }
.s-media{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); aspect-ratio:4/3; background:var(--soft); }
.section--dark .s-media,.section--ink .s-media{ border-color:var(--dark-border-2); }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } .split--rev .s-media{ order:0; } }

/* ---------- Final CTA ---------- */
.final{ text-align:center; }
.final .btns{ display:flex; gap:.85rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:var(--on-dark); }
.footer-top{ padding-block:clamp(56px,8vw,104px); border-bottom:1px solid var(--dark-border); }
.footer-cta{ display:grid; grid-template-columns:1.3fr .7fr; gap:2rem; align-items:end; }
.footer-cta h2{ color:#fff; }
.footer-cta p{ color:var(--on-dark-muted); margin-top:1rem; max-width:46ch; }
.footer-cta .r{ display:flex; justify-content:flex-end; }
.footer-mid{ padding-block:3.4rem; display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:2rem; }
.footer-brand .brand-img{ height:30px; }
.footer-brand .f-tag{ font-family:var(--display); font-weight:700; color:#fff; margin-top:1rem; font-size:1.02rem; }
.footer-brand p{ color:var(--on-dark-muted); font-size:.9rem; margin-top:.5rem; max-width:34ch; }
.footer-brand .socials{ display:flex; gap:.6rem; margin-top:1.4rem; }
.footer-brand .socials a{ width:40px; height:40px; border:1px solid var(--dark-border-2); border-radius:10px; display:grid; place-items:center; color:var(--on-dark); transition:background .2s,color .2s,border-color .2s; }
.footer-brand .socials a:hover{ background:var(--orange); border-color:var(--orange); color:#fff; }
.footer-brand .socials svg,.footer-brand .socials i{ width:18px; height:18px; }
.footer-col h5{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-muted); margin-bottom:1.1rem; font-weight:700; }
.footer-col ul{ list-style:none; display:grid; gap:.65rem; }
.footer-col a{ color:var(--on-dark); font-size:.92rem; }
.footer-col a:hover{ color:var(--orange); }
.footer-rel{ padding-block:1.8rem; border-top:1px solid var(--dark-border); display:flex; flex-wrap:wrap; gap:.6rem 2rem; }
.footer-rel span{ font-size:.8rem; color:var(--on-dark-muted); }
.footer-rel b{ color:var(--on-dark); font-weight:700; }
.footer-bottom{ padding-block:1.5rem; border-top:1px solid var(--dark-border); display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.84rem; color:var(--on-dark-muted); }
.footer-bottom .links{ display:flex; gap:1.5rem; }
.footer-bottom a:hover{ color:#fff; }
@media (max-width:1024px){ .footer-mid{ grid-template-columns:1fr 1fr; } .footer-cta{ grid-template-columns:1fr; } .footer-cta .r{ justify-content:flex-start; } }
@media (max-width:560px){ .footer-mid{ grid-template-columns:1fr; } .footer-bottom{ flex-direction:column; align-items:flex-start; } }

/* ============ INNER PAGES ============ */

/* Generic grid + card */
.grid{ display:grid; gap:1.25rem; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:1024px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:860px){ .grid-2{ grid-template-columns:1fr; } }
@media(max-width:640px){ .grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.8rem; transition:transform .3s var(--ease),border-color .25s,box-shadow .3s; }
.card:hover{ transform:translateY(-3px); border-color:var(--border-2); box-shadow:0 24px 44px -30px rgba(10,13,18,.28); }
.section--dark .card,.section--ink .card{ background:var(--graphite-2); border-color:var(--dark-border); }
.card-ico{ width:48px; height:48px; border-radius:12px; display:grid; place-items:center; border:1px solid var(--border); color:var(--graphite); background:var(--soft); margin-bottom:1.1rem; }
.section--dark .card-ico,.section--ink .card-ico{ background:var(--graphite-3); border-color:var(--dark-border-2); color:var(--orange); }
.card-ico svg,.card-ico i{ width:23px; height:23px; }
.card h3,.card h4{ margin-bottom:.5rem; }
.card p{ color:var(--muted); font-size:.96rem; }
.section--dark .card p,.section--ink .card p{ color:var(--on-dark-muted); }

/* Page hero */
.page-hero{ background:var(--white); border-bottom:1px solid var(--border); }
.page-hero.on-soft{ background:var(--soft); }
.page-hero.on-dark{ background:var(--graphite); color:var(--on-dark); border-bottom-color:var(--dark-border); }
.page-hero.on-ink{ background:var(--ink); color:var(--on-dark); border-bottom-color:var(--dark-border); }
.page-hero .container{ padding-block:clamp(54px,7vw,96px); }
.page-hero .crumbs{ margin-bottom:1.3rem; }
.page-hero h1{ margin-top:1rem; }
.page-hero .lead{ margin-top:1.2rem; }
.page-hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.page-hero-media{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); aspect-ratio:4/3; }
.page-hero-media img{ width:100%; height:100%; object-fit:cover; }
.page-hero.on-dark .page-hero-media,.page-hero.on-ink .page-hero-media{ border-color:var(--dark-border-2); }
@media(max-width:860px){ .page-hero-grid{ grid-template-columns:1fr; } }

.crumbs{ font-size:.82rem; color:var(--muted); display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.page-hero.on-dark .crumbs,.page-hero.on-ink .crumbs{ color:var(--on-dark-muted); }
.crumbs a:hover{ color:var(--orange); }
.crumbs .sep{ opacity:.5; }

/* Evolution ladder (About) */
.evolution{ max-width:600px; margin-top:2.4rem; border-left:2px solid var(--border); padding-left:1.9rem; display:grid; gap:.1rem; }
.evo{ position:relative; padding:.52rem 0; }
.evo::before{ content:""; position:absolute; left:calc(-1.9rem - 7px); top:1rem; width:12px; height:12px; border-radius:50%; background:var(--border-2); box-shadow:0 0 0 4px var(--white); }
.evo .e-name{ font-family:var(--display); font-weight:700; color:var(--muted); font-size:.9rem; letter-spacing:.1em; text-transform:uppercase; }
.evo.is-last::before{ background:var(--orange); width:16px; height:16px; left:calc(-1.9rem - 9px); top:.85rem; }
.evo.is-last .e-name{ color:var(--text); font-size:1.3rem; letter-spacing:-.01em; text-transform:none; }

/* Team */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; margin-top:2.6rem; }
.member .m-photo{ aspect-ratio:1; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); margin-bottom:.9rem; background:var(--soft); }
.member .m-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.member .m-name{ font-family:var(--display); font-weight:700; }
.member .m-role{ color:var(--orange); font-size:.84rem; font-weight:600; }
.member .m-bio{ color:var(--muted); font-size:.86rem; margin-top:.35rem; }
@media(max-width:1024px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .team-grid{ grid-template-columns:1fr; } }

/* Capability chips */
.caps-grid{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2.4rem; }
.cap{ border:1px solid var(--border); border-radius:100px; padding:.7rem 1.3rem; font-weight:600; font-size:.92rem; background:#fff; }
.section--soft .cap{ background:#fff; }

/* Businesses — category groups */
.biz-group{ margin-top:clamp(2.6rem,5vw,4rem); }
.biz-group-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding-bottom:1.1rem; border-bottom:1px solid var(--border); margin-bottom:1.6rem; }
.biz-group-head h2{ font-size:clamp(1.3rem,2.2vw,1.8rem); }
.biz-group-head .bg-count{ font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); white-space:nowrap; }

/* Contact */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); }
.info-item{ display:flex; gap:.9rem; padding:1.1rem 0; border-bottom:1px solid var(--border); }
.info-item:last-of-type{ border-bottom:none; }
.info-item .i-ico{ width:42px; height:42px; border-radius:10px; background:var(--soft); border:1px solid var(--border); color:var(--orange); display:grid; place-items:center; flex-shrink:0; }
.info-item .i-ico svg,.info-item .i-ico i{ width:20px; height:20px; }
.info-item .lbl{ font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.info-item .val{ font-weight:600; }
.info-map{ margin-top:1.4rem; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); }
.info-map iframe{ width:100%; height:100%; border:0; filter:grayscale(.2); }
.form-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:clamp(1.5rem,3vw,2.4rem); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-size:.8rem; font-weight:600; color:var(--text); margin-bottom:.45rem; }
.field label .req{ color:var(--orange); }
.field input,.field select,.field textarea{ width:100%; font-family:inherit; font-size:.96rem; color:var(--text); padding:.8rem .95rem; border:1px solid var(--border); border-radius:10px; background:var(--soft); outline:none; transition:border-color .2s,box-shadow .2s,background .2s; min-height:48px; }
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--orange); background:#fff; box-shadow:0 0 0 3px var(--orange-soft); }
.form-privacy{ font-size:.82rem; color:var(--muted); margin-top:.9rem; text-align:center; }
@media(max-width:860px){ .contact-grid{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } }

/* Solutions bridge callout */
.bridge{ border-radius:var(--radius-lg); background:linear-gradient(160deg,var(--graphite-2),var(--graphite)); color:#fff; padding:clamp(2rem,4vw,3.2rem); display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center; }
.bridge h2{ color:#fff; }
.bridge p{ color:var(--on-dark-muted); margin-top:.8rem; }
.bridge .r{ display:flex; justify-content:flex-end; }
@media(max-width:860px){ .bridge{ grid-template-columns:1fr; } .bridge .r{ justify-content:flex-start; } }

/* FAQ accordion */
.faq{ max-width:860px; margin-top:2.4rem; }
.faq-item{ border-bottom:1px solid var(--border); }
.section--dark .faq-item,.section--ink .faq-item{ border-color:var(--dark-border); }
.faq-q{ width:100%; background:none; border:none; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.3rem 0; font-family:var(--display); font-weight:700; font-size:1.08rem; color:inherit; }
.faq-q svg,.faq-q i{ width:22px; height:22px; color:var(--orange); flex-shrink:0; transition:transform .3s var(--ease); }
.faq-item.open .faq-q svg,.faq-item.open .faq-q i{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq-a p{ padding:0 0 1.3rem; color:var(--muted); font-size:.98rem; max-width:72ch; }
.section--dark .faq-a p,.section--ink .faq-a p{ color:var(--on-dark-muted); }

/* Filter pills */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem; }
.filter{ font-weight:600; font-size:.9rem; padding:.6rem 1.1rem; border-radius:100px; border:1px solid var(--border); background:#fff; color:var(--text); cursor:pointer; transition:all .2s; }
.filter:hover{ border-color:var(--border-2); }
.filter.active{ background:var(--orange); border-color:var(--orange); color:#fff; }

/* "Built on" band (real facts, not invented metrics) */
.statband{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-top:2.6rem; }
.section--dark .statband,.section--ink .statband{ background:var(--dark-border); border-color:var(--dark-border); }
.statc{ background:#fff; padding:1.7rem 1.4rem; }
.section--dark .statc,.section--ink .statc{ background:var(--graphite-2); }
.statc .k{ font-family:var(--display); font-weight:800; font-size:clamp(1.15rem,1.8vw,1.4rem); color:var(--graphite); letter-spacing:-.01em; }
.section--dark .statc .k,.section--ink .statc .k{ color:#fff; }
.statc .l{ color:var(--muted); font-size:.84rem; margin-top:.35rem; }
.section--dark .statc .l,.section--ink .statc .l{ color:var(--on-dark-muted); }
@media(max-width:860px){ .statband{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .statband{ grid-template-columns:1fr; } }

/* Screenshot gallery */
.shots{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; margin-top:2.6rem; }
.shot{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); background:var(--graphite-2); }
.section--dark .shot,.section--ink .shot{ border-color:var(--dark-border-2); }
.shot.framed{ aspect-ratio:16/10; }
.shot.framed img{ width:100%; height:100%; object-fit:cover; object-position:top; }
@media(max-width:640px){ .shots{ grid-template-columns:1fr; } }

/* Prose (legal / long-form) */
.prose{ max-width:760px; }
.prose h2{ font-size:1.3rem; margin:2.2rem 0 .7rem; }
.prose h2:first-of-type{ margin-top:0; }
.prose p{ color:var(--muted); margin-bottom:1rem; }
.prose ul{ color:var(--muted); margin:0 0 1rem 1.2rem; display:grid; gap:.45rem; }
.prose a{ color:var(--orange); }
.prose .updated{ font-size:.85rem; color:var(--muted-2); margin-bottom:1.8rem; }

/* 404 */
.notfound{ min-height:72vh; display:grid; place-items:center; text-align:center; background:var(--ink); color:var(--on-dark); }
.notfound .big404{ font-family:var(--display); font-weight:800; font-size:clamp(5rem,18vw,12rem); line-height:1; color:#fff; letter-spacing:-.05em; }
.notfound .big404 span{ color:var(--orange); }
.notfound h1{ color:#fff; margin:.5rem 0 1rem; font-size:clamp(1.6rem,3vw,2.3rem); }
.notfound p{ color:var(--on-dark-muted); max-width:48ch; margin-inline:auto; }
.notfound .btns{ display:flex; gap:.85rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }
@media(max-width:560px){ .notfound .btns .btn{ width:100%; } }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
.reveal.visible{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; }

/* ---------- Responsive core ---------- */
@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-right .btn-primary{ display:none; }
  .nav-toggle{ display:flex; }
  .hero-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .btn{ width:100%; justify-content:center; }
  .hero-cta .btn,.final .btns .btn{ width:100%; }
  .footer-cta .r .btn{ width:auto; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .eco-node,.eco-line,.mstep,.model-track span{ opacity:1 !important; transform:none !important; transition:none !important; height:100% !important; }
  .btn,.card,.work-card,.ecard,.ui-row,.pillar{ transition:none !important; }
}