/* ============================================================
   Mist Cloud — AWS-first sibling site (mistcloud.ai)
   Forked from website-cloud-neutral/ then re-themed:
   - Segoe UI system stack (no Google webfont / render-blocking import)
   - brand palette re-tinted: blue #0073B7 + teal lead, AWS-orange pop
   - darker "platform/console" feel; tighter technical bento grid
   - animated gradient-mesh "sky" hero, gated by prefers-reduced-motion
   - node/trace graphic accents echoing the Mist Cloud logo
   Typography: Segoe UI stack for body AND display; system mono for stats.
   ============================================================ */

:root{
  /* Unconditional dark theme — folded in from the former
     @media (prefers-color-scheme: dark) block so the site renders the
     same in OS light and OS dark (no OS-conditional theme switching). */
  color-scheme: dark;
  --bg:#0f1626;
  --bg-alt:#141d31;
  --white:#1a2338;
  --ink:#eef3fb;
  --ink-soft:#aab6cc;
  --ink-faint:#7f8aa3;
  --line:#2a3650;
  --navy:#002A4B;
  --blue:#0073B7;         /* brand blue (re-tinted from reference #0d6dbf) */
  --blue-d:#005a90;
  --blue-l:#15283f;
  --teal:#17A2B8;         /* secondary accent — sky/cloud lead */
  --teal-l:#0f2e33;
  --orange:#FF9900;       /* AWS-adjacent orange — signature pop */
  --orange-d:#c1670a;
  --orange-l:#33260f;
  --green:#28A745;
  --green-l:#123022;
  --purple:#6F42C1;
  --purple-l:#241d3f;
  --radius:14px;
  --radius-sm:10px;
  --maxw:1220px;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --sans:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shadow:0 1px 2px rgba(0,0,0,0.3), 0 12px 28px rgba(0,0,0,0.4);
  --shadow-hover:0 4px 10px rgba(0,0,0,0.4), 0 20px 44px rgba(0,0,0,0.5);

  /* Iridescent accents — pulled from the glassy cloud logo (v3) */
  --iris-violet:#8B7FF0;        /* soft violet — primary iridescent accent */
  --iris-teal:#4FD1E0;          /* bright aqua-teal — secondary accent */
  --iris-pearl:#DCE3F2;         /* pale pearl/lavender — light text & hairlines on dark */
  --iris-violet-deep:#5B4BC4;   /* deeper violet for gradient stops */

  /* Dark section surfaces (home-page dark bands) */
  --dk-1:#001B31;               /* deepest navy band */
  --dk-2:#002A4B;               /* = --navy, standard dark band */
  --dk-3:#06233E;               /* mid dark band for alternation */
  --dk-card:rgba(255,255,255,0.055);  /* glass card fill on dark */
  --dk-line:rgba(255,255,255,0.12);   /* hairline on dark */
  --dk-ink:#EAF2FB;             /* primary text on dark */
  --dk-ink-soft:rgba(234,242,251,0.82); /* secondary text on dark (>=4.5:1 on navy) */
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased; position:relative; overflow-x:hidden; transition:background .2s, color .2s;}

/* ambient drift blobs (re-tinted blue/teal/orange) — dark values folded in
   from the former prefers-color-scheme:dark block for unconditional dark. */
body::before{
  content:""; position:fixed; inset:-10%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(620px circle at 6% 2%, rgba(0,115,183,0.14), transparent 62%),
    radial-gradient(680px circle at 96% 10%, rgba(23,162,184,0.14), transparent 60%),
    radial-gradient(620px circle at 92% 80%, rgba(255,153,0,0.1), transparent 60%);
  animation: ambient-drift 28s ease-in-out infinite alternate;
}
@keyframes ambient-drift{
  0%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-1.4%,1.2%) scale(1.03);}
  100%{transform:translate(1.2%,-1%) scale(1.01);}
}
@media (prefers-reduced-motion: reduce){
  body::before{animation:none;}
}

h1,h2,h3,h4,.display{font-family:var(--sans); letter-spacing:-0.01em;}
.mono{font-family:var(--mono);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 28px;}

/* ── nav (Path A — dark bar; the v3 glassy cloud reads on dark everywhere) ── */
.navbar{position:sticky; top:0; z-index:100;
  background:linear-gradient(135deg,rgba(0,33,59,0.92),rgba(0,42,75,0.92) 60%,rgba(0,27,49,0.94));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.10);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:94px;}
/* brand lockup: one glassy cloud master (dark nav + dark footer) + live CSS text. */
.nav-logo{display:flex; align-items:center; gap:12px; transition:transform .2s;}
.nav-logo:hover{transform:scale(1.03);}
.brand-icon{height:56px; width:auto;}
.brand-word{font-family:var(--sans); font-size:1.5rem; letter-spacing:0.02em; line-height:1; font-weight:600; color:#F2F6FC; white-space:nowrap;}
.brand-word strong{font-weight:800;}
/* footer is the same dark chrome -> same icon size + white word. */
.footer .brand-icon{height:58px;}
.footer .brand-word{color:#fff;}
.nav-links{list-style:none; display:flex; gap:4px; margin:0; padding:0; align-items:center;}
.nav-links a{position:relative; font-size:0.9rem; color:var(--iris-pearl); padding:10px 15px; border-radius:100px; font-weight:600; transition:.2s;}
.nav-links a:not(.nav-cta)::after{content:""; position:absolute; left:15px; right:15px; bottom:5px; height:2px; background:var(--orange); border-radius:2px; transform:scaleX(0); transform-origin:center; transition:transform .25s;}
.nav-links a:not(.nav-cta):hover::after{transform:scaleX(1);}
.nav-links a:hover{color:#fff; background:rgba(255,255,255,0.08);}
.nav-links a:focus-visible{outline:2px solid var(--iris-teal); outline-offset:2px;}
.nav-ext{color:var(--iris-teal) !important; font-weight:700 !important;}
.nav-cta{background:linear-gradient(135deg,var(--blue),var(--navy)) !important; color:#fff !important; box-shadow:var(--shadow); border:1px solid rgba(255,255,255,0.18);}
.nav-cta:hover{color:#fff !important; background:linear-gradient(135deg,#1e86c9,var(--blue)) !important;}
.nav-toggle{display:none; background:none; border:none; color:#F2F6FC; font-size:1.5rem; cursor:pointer;}
.nav-toggle:focus-visible{outline:2px solid var(--iris-teal); outline-offset:2px;}

/* ── buttons ── */
.btn{display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:var(--radius-sm); font-weight:700; font-size:0.94rem; transition:.2s; border:1px solid transparent; cursor:pointer;}
.btn-primary{background:linear-gradient(135deg,var(--blue) 0%,var(--navy) 100%); color:#fff; box-shadow:var(--shadow);}
.btn-primary:hover{transform:translateY(-2px) scale(1.015); box-shadow:var(--shadow-hover);}
.btn-primary:active{transform:translateY(0) scale(0.99);}
.btn-accent{background:linear-gradient(135deg,#ffb547,var(--orange)); color:#1a1200; box-shadow:var(--shadow);}
.btn-accent:hover{transform:translateY(-2px) scale(1.015); box-shadow:var(--shadow-hover);}
.btn-ghost{background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.4); color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,0.18); transform:translateY(-2px);}
.btn:focus-visible{outline:2px solid #fff; outline-offset:2px;}

/* ============================================================
   HERO — animated gradient-mesh "sky"
   Multi-stop radial gradients in blue/teal/navy with an orange
   sunrise glow, slow-drifting. Motion is GATED by
   prefers-reduced-motion (static fallback below).
   ============================================================ */
.hero{position:relative; overflow:hidden; color:#eaf4fd; background:var(--navy);}
.hero-mesh{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 70% at 18% 22%, rgba(23,162,184,0.55), transparent 60%),
    radial-gradient(55% 65% at 82% 18%, rgba(0,115,183,0.60), transparent 62%),
    radial-gradient(45% 55% at 60% 40%, rgba(139,127,240,0.24), transparent 62%),
    radial-gradient(50% 60% at 72% 82%, rgba(255,153,0,0.30), transparent 60%),
    radial-gradient(70% 80% at 30% 88%, rgba(0,42,75,0.70), transparent 65%),
    linear-gradient(160deg,#003a66 0%,#002A4B 60%,#001b31 100%);
  background-size:160% 160%, 170% 170%, 165% 165%, 150% 150%, 180% 180%, 100% 100%;
  background-position:0% 0%, 100% 0%, 50% 40%, 70% 90%, 20% 100%, 0 0;
  animation: mesh-drift 24s ease-in-out infinite alternate;
}
@keyframes mesh-drift{
  0%{background-position:0% 0%, 100% 0%, 50% 40%, 70% 90%, 20% 100%, 0 0;}
  50%{background-position:30% 20%, 70% 25%, 60% 55%, 40% 60%, 55% 70%, 0 0;}
  100%{background-position:10% 35%, 90% 10%, 45% 30%, 85% 95%, 0% 90%, 0 0;}
}
.hero-mesh::after{   /* faint node/trace grid echoing the Mist Cloud logo */
  content:""; position:absolute; inset:0; opacity:0.5;
  background-image:
    radial-gradient(rgba(255,255,255,0.14) 1.5px, transparent 1.6px);
  background-size:42px 42px;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 40%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 40%, transparent);
}
@media (prefers-reduced-motion: reduce){
  .hero-mesh{animation:none;}
}
.hero-inner{position:relative; z-index:1; padding:52px 0 60px;}
.hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;}
.hero-grid > *{min-width:0;}
.hero-grid .hero-text{padding-top:6px;}
.hero-text h1{font-size:3rem; line-height:1.1; font-weight:700; margin:18px 0 16px; color:#fff;}
.hero-text h1 .hl{color:var(--orange);}
.hero-sub{font-size:1.1rem; color:rgba(234,244,253,0.86); max-width:620px; margin:0 0 28px; line-height:1.6;}
.hero-cta-row{display:flex; gap:12px; flex-wrap:wrap;}

/* ============================================================
   HERO STAGE — layered glass-morphism composition
   Floating cards at varying depth, animated data wires, a glowing
   cloud core and orbiting nodes. All motion gated by
   prefers-reduced-motion.
   ============================================================ */
.hero-stage{position:relative; min-height:480px; min-width:0; perspective:1200px;}

/* animated connection wires */
.stage-wires{position:absolute; inset:0; width:100%; height:100%; z-index:1; overflow:visible;}
.stage-wires .wire{stroke:url(#wire); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:7 10; opacity:0.75; filter:drop-shadow(0 0 6px rgba(79,195,220,0.5));
  animation:wire-flow 2.6s linear infinite;}
@keyframes wire-flow{to{stroke-dashoffset:-34;}}

/* glowing cloud core */
.stage-core{position:absolute; top:60px; left:50%; transform:translateX(-50%); z-index:3;
  width:230px; display:flex; flex-direction:column; align-items:center; animation:float-a 7s ease-in-out infinite;}
.stage-core svg{width:116px; height:auto; position:relative; z-index:2;
  filter:drop-shadow(0 10px 26px rgba(0,20,40,0.55));}
.core-glow{position:absolute; top:-26px; left:50%; transform:translateX(-50%);
  width:220px; height:220px; border-radius:50%; z-index:0;
  background:radial-gradient(circle, rgba(79,195,220,0.55), transparent 62%);
  animation:pulse-glow 4.5s ease-in-out infinite;}
.core-ring{position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  width:150px; height:150px; border-radius:50%; z-index:1;
  border:1px solid rgba(127,224,242,0.35); box-shadow:0 0 0 10px rgba(127,224,242,0.05);
  animation:ring-spin 18s linear infinite;}
.core-ring::after{content:""; position:absolute; top:-4px; left:calc(50% - 4px);
  width:8px; height:8px; border-radius:50%; background:#7FE0F2; box-shadow:0 0 10px #7FE0F2;}
.core-label{margin-top:14px; font-size:0.72rem; font-weight:700; letter-spacing:0.04em;
  text-transform:uppercase; color:rgba(234,244,253,0.78); position:relative; z-index:2;
  white-space:nowrap; text-align:center;}

/* floating glass cards */
.gcard{position:absolute; z-index:4; display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.22);
  border-radius:16px; padding:13px 15px; width:208px;
  backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2);
  box-shadow:0 14px 40px rgba(0,16,34,0.45), inset 0 1px 0 rgba(255,255,255,0.25);}
.gcard b{display:block; font-size:0.92rem; color:#fff; line-height:1.2;}
.gcard span{display:block; font-size:0.72rem; color:rgba(234,244,253,0.72); margin-top:3px; line-height:1.3;}
.gc-ic{flex-shrink:0; width:40px; height:40px; border-radius:11px; display:grid; place-items:center; box-sizing:border-box; overflow:hidden; padding:9px;}
.gc-ic svg{width:100%; height:100%; display:block;}
.gc-body{display:flex; flex-direction:column; justify-content:center; min-width:0;}
.ic-c1{background:linear-gradient(150deg,#1E9BD7,#0073B7);}
.ic-c2{background:linear-gradient(150deg,#8FE7F6,#2BC0D4);}
.ic-c3{background:linear-gradient(150deg,#17A2B8,#0E6FB0);}
.gc-compute{top:272px; left:0; animation:float-b 8s ease-in-out infinite;}
.gc-genai{top:300px; right:0; animation:float-a 6.4s ease-in-out infinite;}
.gc-genai.pop{background:linear-gradient(150deg,rgba(127,224,242,0.95),rgba(43,192,212,0.92));
  border-color:rgba(255,255,255,0.5);}
.gc-genai.pop b{color:#06303a;} .gc-genai.pop span{color:rgba(6,48,58,0.82);}
.gc-ops{top:398px; left:50%; transform:translateX(-50%); width:238px; animation:float-b 9s ease-in-out infinite;}

/* live metric chip — pinned top-right, clear of the centered core label */
.gchip{position:absolute; z-index:5; top:40px; right:-10px; display:flex; align-items:center; gap:10px;
  background:rgba(2,24,42,0.82); border:1px solid rgba(127,224,242,0.35); border-radius:14px;
  padding:10px 14px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 10px 30px rgba(0,16,34,0.5); animation:float-a 7.6s ease-in-out infinite;}
.gchip b{font-family:var(--mono); font-size:1.15rem; color:#7FE0F2; line-height:1;}
.gchip small{display:block; font-size:0.64rem; color:rgba(234,244,253,0.7); margin-top:3px; max-width:120px;}
.gchip-dot{width:9px; height:9px; border-radius:50%; background:#36D399; box-shadow:0 0 10px #36D399; animation:blink 2s ease-in-out infinite;}

/* orbiting accent nodes */
.orb{position:absolute; border-radius:50%; z-index:2;}
.orb1{width:10px; height:10px; top:60px; left:30px; background:#4FC3DC; box-shadow:0 0 12px #4FC3DC; animation:float-a 6s ease-in-out infinite;}
.orb2{width:7px; height:7px; top:112px; left:40px; background:#7FE0F2; box-shadow:0 0 10px #7FE0F2; animation:float-b 7s ease-in-out infinite;}
.orb3{width:6px; height:6px; bottom:14px; left:70px; background:#2BC0D4; box-shadow:0 0 9px #2BC0D4; animation:float-a 8s ease-in-out infinite;}

@keyframes float-a{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
@keyframes float-b{0%,100%{transform:translateY(0);}50%{transform:translateY(10px);}}
.gc-ops{animation-name:float-ops;}
@keyframes float-ops{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-11px);}}
@keyframes pulse-glow{0%,100%{opacity:0.6; transform:translateX(-50%) scale(1);}50%{opacity:1; transform:translateX(-50%) scale(1.1);}}
@keyframes ring-spin{to{transform:translateX(-50%) rotate(360deg);}}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0.35;}}

@media (prefers-reduced-motion: reduce){
  .stage-core,.gcard,.gchip,.orb,.core-glow,.core-ring,.stage-wires .wire{animation:none;}
}

/* ── AWS capability bar ── */
.credbar{padding:28px 0; background:var(--white); border-bottom:1px solid var(--line);}
.credbar-row{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;}
.cred-item{display:inline-flex; align-items:center; gap:8px; background:var(--blue-l); border:1px solid var(--line); border-radius:100px; padding:9px 16px; transition:.2s;}
.cred-item:hover{border-color:var(--orange); transform:translateY(-2px);}
.cred-item span{font-size:0.82rem; font-weight:700; color:var(--navy);}
.cred-item i{width:7px; height:7px; border-radius:50%; background:var(--teal); display:inline-block;}

/* ── section shell ── */
.section{padding:64px 0;}
.section.band{background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.section-head{max-width:680px; margin:0 0 40px;}
.section-head.center{margin:0 auto 40px; text-align:center;}
.kicker{display:inline-block; font-size:0.78rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--blue-d); background:var(--blue-l); padding:6px 14px; border-radius:100px; margin-bottom:14px;}
.section-head h2{font-size:2.25rem; margin:0 0 10px; font-weight:700; line-height:1.16;}
.section-head p{color:var(--ink-soft); font-size:1.02rem; line-height:1.6;}

/* ── services bento (tighter technical grid) ── */
.svc-bento{display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:14px;}
.svc-card{position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:24px; transition:.25s; box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden;}
.svc-card::before{content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:linear-gradient(90deg,var(--blue),var(--teal));}
.svc-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:var(--teal);}
.svc-card:hover .svc-icon{transform:scale(1.1) rotate(-4deg);}
.svc-icon{width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:15px; transition:transform .25s; background:var(--blue-l); color:var(--blue); padding:4px; box-sizing:border-box; overflow:visible;}
.svc-icon svg{width:20px; height:20px; display:block;}
.svc-icon.ic-teal{background:var(--teal-l); color:var(--teal);}
.svc-icon.ic-orange{background:var(--orange-l); color:var(--orange-d);}
.svc-icon.ic-green{background:var(--green-l); color:var(--green);}
.svc-icon.ic-purple{background:var(--purple-l); color:var(--purple);}
.svc-card h3{font-size:1.06rem; margin:0 0 8px;}
.svc-card p{font-size:0.88rem; color:var(--ink-soft); line-height:1.58; margin:0; flex:1;}
.svc-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px;}
.svc-tags span{font-size:0.72rem; font-weight:600; color:var(--ink-soft); background:var(--bg-alt); border:1px solid var(--line); border-radius:100px; padding:3px 10px;}
.svc-link{display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:0.84rem; font-weight:700; color:var(--blue-d);}
.svc-link:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}

/* ── stat tiles ── */
.stats-bento{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.stat-tile{border-radius:var(--radius); padding:28px 24px; color:#fff; box-shadow:var(--shadow);}
.stat-tile b{font-family:var(--mono); font-size:2.4rem; font-weight:700; display:block; line-height:1;}
.stat-tile span{font-size:0.84rem; opacity:0.92; display:block; margin-top:10px;}
.stat-tile.bg-blue{background:linear-gradient(150deg,#2a8fdc,var(--blue) 55%,#064f8d);}
.stat-tile.bg-teal{background:linear-gradient(150deg,#2bc0d4,var(--teal) 55%,#0e7585);}
.stat-tile.bg-orange{background:linear-gradient(150deg,#ffb547,var(--orange) 55%,#d97d00); color:#1a1200;}

/* ============================================================
   CO-SELL / PLB dark band
   ============================================================ */
.cosell{position:relative; overflow:hidden; background:linear-gradient(160deg,#003a66,#002A4B 70%,#001b31); color:#eaf4fd;}
.cosell::before{content:""; position:absolute; inset:0; opacity:0.5; pointer-events:none;
  background:
    radial-gradient(50% 60% at 85% 20%, rgba(23,162,184,0.4), transparent 60%),
    radial-gradient(45% 55% at 15% 90%, rgba(255,153,0,0.22), transparent 60%);}
.cosell .container{position:relative; z-index:1; padding:68px 28px;}
.cosell .kicker{background:rgba(255,255,255,0.1); color:#ffd79a;}
.cosell h2{color:#fff; font-size:2.1rem; margin:0 0 12px; max-width:720px;}
.cosell > .container > p{color:rgba(234,244,253,0.84); font-size:1.02rem; max-width:720px; margin:0 0 32px;}
.cosell-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.cosell-point{background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14); border-radius:var(--radius); padding:24px; backdrop-filter:blur(4px);}
.cosell-point .ic{width:42px; height:42px; border-radius:11px; background:rgba(23,162,184,0.25); color:#5fd0e0; display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.cosell-point .ic svg{width:20px; height:20px;}
.cosell-point h4{margin:0 0 7px; font-size:1rem; color:#fff;}
.cosell-point p{margin:0; font-size:0.86rem; color:rgba(234,244,253,0.78); line-height:1.55;}

/* ── case study summary cards ── */
.case-bento{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.case-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); display:flex; flex-direction:column; transition:.25s;}
.case-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:var(--blue);}
.case-tag{display:inline-flex; align-items:center; gap:7px; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--teal); margin-bottom:12px;}
.case-tag i{width:7px; height:7px; border-radius:50%; background:var(--teal);}
.case-card h3{font-size:1.04rem; margin:0 0 8px;}
.case-card p{font-size:0.88rem; color:var(--ink-soft); line-height:1.58; margin:0 0 14px; flex:1;}
.case-card .cc-note{font-size:0.78rem; font-weight:700; color:var(--ink-faint);}

/* ── approach tiles ── */
.adv-bento{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.adv-card{position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow); transition:.25s; overflow:hidden;}
.adv-card::before{content:""; position:absolute; left:0; top:0; width:3px; height:100%; background:linear-gradient(180deg,var(--teal),var(--blue));}
.adv-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:var(--blue);}
.adv-card:hover .adv-icon{transform:scale(1.1) rotate(-4deg);}
.adv-icon{width:44px; height:44px; border-radius:11px; margin-bottom:18px; display:flex; align-items:center; justify-content:center; transition:transform .25s; background:var(--teal-l); color:var(--teal); padding:4px; box-sizing:border-box; overflow:visible;}
.adv-icon svg{width:19px; height:19px; display:block;}
.adv-card h3{font-size:1.03rem; margin:0 0 10px;}
.adv-card p{color:var(--ink-soft); font-size:0.9rem; line-height:1.6; margin:0;}

/* ── contact ── */
.contact-wrap{display:grid; grid-template-columns:0.85fr 1.15fr; gap:48px;}
.contact-info h2{font-size:2.2rem; margin:0 0 12px;}
.contact-info p{color:var(--ink-soft); font-size:1.02rem; margin:0 0 32px;}
.contact-item{display:flex; gap:14px; align-items:flex-start; margin-bottom:20px;}
.contact-item .ic{width:38px; height:38px; border-radius:10px; background:var(--teal-l); color:var(--teal); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.contact-item .lbl{font-size:0.74rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-faint); margin-bottom:2px;}
.contact-item .val{font-size:0.96rem; color:var(--ink); font-weight:500;}
.contact-item a.val:hover{color:var(--blue-d);}
.contact-form{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
.form-field{display:flex; flex-direction:column; gap:6px;}
.form-field.full{grid-column:1/3;}
.form-field label{font-size:0.82rem; font-weight:600; color:var(--ink-soft);}
.form-field input, .form-field textarea{font-family:var(--sans); font-size:0.94rem; padding:11px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); color:var(--ink); resize:vertical;}
.form-field input:focus, .form-field textarea:focus{outline:none; border-color:var(--blue); background:var(--white);}
.form-submit{margin-top:6px;}

/* ── contact page — navy + iridescent glass treatment (mistcloud identity) ──
   Scoped to .contact-glass so the rest of the site is untouched. BOXED glass
   inputs with an iridescent aqua focus ring — deliberately different from the
   corporate underline-style form. ── */
.contact-glass{position:relative; overflow:hidden; color:var(--dk-ink);
  background:linear-gradient(160deg,#013154,var(--dk-2) 62%,#00213B);}
.contact-glass::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(48% 60% at 85% 8%, rgba(139,127,240,0.20), transparent 60%),
    radial-gradient(42% 56% at 8% 96%, rgba(79,209,224,0.16), transparent 60%);}
.contact-glass > .container{position:relative; z-index:1;}
.contact-glass .contact-info h2{color:#fff;}
.contact-glass .contact-info p{color:var(--dk-ink-soft);}
.contact-glass .contact-item .ic{background:rgba(79,209,224,0.12); color:var(--iris-teal); border:1px solid rgba(79,209,224,0.3);}
.contact-glass .contact-item .lbl{color:var(--iris-pearl);}
.contact-glass .contact-item .val{color:var(--dk-ink);}
.contact-glass .contact-item a.val:hover{color:var(--iris-teal);}
.contact-glass .contact-form{background:var(--dk-card); border:1px solid var(--dk-line);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 22px 50px rgba(0,16,34,0.5), inset 0 1px 0 rgba(255,255,255,0.14);}
.contact-glass .form-field label{color:var(--iris-pearl);}
.contact-glass .form-field input, .contact-glass .form-field textarea{
  background:rgba(255,255,255,0.05); border:1px solid var(--dk-line);
  border-radius:var(--radius-sm); color:var(--dk-ink);}
.contact-glass .form-field input::placeholder, .contact-glass .form-field textarea::placeholder{color:rgba(220,227,242,0.5);}
.contact-glass .form-field input:focus, .contact-glass .form-field textarea:focus{
  outline:none; background:rgba(255,255,255,0.08); border-color:var(--iris-teal);
  box-shadow:0 0 0 3px rgba(79,209,224,0.25);}

/* ── footer ── */
.footer{padding:48px 0 36px; background:var(--navy); color:#cfe0ef;}
.footer-row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,0.12);}
.footer-nav{display:flex; gap:22px; list-style:none; margin:0; padding:0; flex-wrap:wrap;}
.footer-nav a{font-size:0.9rem; color:#cfe0ef; font-weight:500;}
.footer-nav a:hover{color:var(--orange);}
.footer-social a{color:#cfe0ef; display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.2); transition:.2s;}
.footer-social a:hover{color:var(--navy); background:var(--orange); border-color:var(--orange);}
.footer-bottom{padding-top:20px; font-size:0.82rem; color:rgba(207,224,239,0.7); text-align:center; line-height:1.6;}
.footer-bottom a{color:#9ecbee; font-weight:600;}
.footer-bottom a:hover{color:var(--orange);}

/* ── scroll reveal (motion.js) ── */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal-in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ============================================================
   HOME-PAGE ENRICHMENT  (scoped under .home — zero bleed to the
   other 14 pages that load this shared stylesheet)
   Dark-leaning iridescent rhythm + image-beside-text feature rows
   + authored SVG scene illustrations. Additive; see design-direction §2–§8.
   ============================================================ */

/* reusable iridescent glow overlay (shared utility) */
.iris-glow{position:relative; overflow:hidden;}
.iris-glow::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(48% 60% at 85% 12%, rgba(139,127,240,0.20), transparent 60%),
    radial-gradient(42% 55% at 12% 92%, rgba(79,209,224,0.16), transparent 60%);}
.iris-glow > .container{position:relative; z-index:1;}

/* dark architecture-frame variant (reuse PNGs on dark bands) */
.arch-frame.on-dark{background:var(--dk-card); border:1px solid var(--dk-line);
  box-shadow:0 20px 50px rgba(0,16,34,0.5);}

/* ── dark band base ── */
.home .home-dark{position:relative; overflow:hidden; color:var(--dk-ink);
  background:linear-gradient(160deg,#013154,var(--dk-2) 62%,#00213B);}
.home .home-dark.band-3{background:linear-gradient(160deg,#083054,var(--dk-3) 60%,#041d33);}
.home .home-dark .section-head h2{color:#fff;}
.home .home-dark .section-head p{color:var(--dk-ink-soft);}
.home .home-dark .kicker{background:rgba(139,127,240,0.18); color:var(--iris-pearl);}
.home .home-dark > .container{position:relative; z-index:1;}

/* credbar tint (home-only cosmetic — scoped so other pages keep flat white) */
.home .credbar{background:linear-gradient(180deg,#F4F8FD,#EAF2FB); border-bottom:1px solid var(--line);}

/* ── alternating image-beside-text feature rows ── */
.home .home-rows{display:flex; flex-direction:column; gap:34px; margin-top:8px;}
.home .home-row{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:40px; align-items:center;}
.home .home-row.reverse .home-row-media{order:2;}
.home .home-row.reverse .home-row-body{order:1;}
.home .home-row-body h3{font-size:1.5rem; margin:0 0 12px; font-weight:700; color:#fff; line-height:1.2;}
.home .home-row-body p{font-size:1rem; color:var(--dk-ink-soft); line-height:1.65; margin:0 0 16px;}
.home .home-row-kicker{display:inline-flex; align-items:center; gap:8px; font-size:0.74rem; font-weight:700;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--iris-teal);
  background:rgba(79,209,224,0.12); border:1px solid rgba(79,209,224,0.25);
  padding:6px 13px; border-radius:100px; margin-bottom:14px;}
.home .home-row-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;}
.home .home-row-tags span{font-size:0.76rem; font-weight:600; color:var(--iris-pearl);
  background:rgba(255,255,255,0.06); border:1px solid var(--dk-line); border-radius:100px; padding:4px 12px;}
.home .home-row-link{display:inline-flex; align-items:center; gap:7px; margin-top:16px;
  font-size:0.9rem; font-weight:700; color:var(--iris-teal);}
.home .home-row-link:hover{color:#8FE7F6;}
.home .home-row-link:focus-visible{outline:2px solid var(--iris-teal); outline-offset:3px; border-radius:4px;}

/* glass panel that holds the scene illustration */
.home .home-row-media{margin:0;}
.home .home-scene{position:relative; border-radius:18px; padding:22px;
  background:var(--dk-card); border:1px solid var(--dk-line);
  backdrop-filter:blur(10px) saturate(1.15); -webkit-backdrop-filter:blur(10px) saturate(1.15);
  box-shadow:0 22px 50px rgba(0,16,34,0.5), inset 0 1px 0 rgba(255,255,255,0.18);}
.home .home-scene svg{width:100%; height:auto; display:block;}
.home .home-scene figcaption{margin-top:12px; font-size:0.78rem; color:var(--dk-ink-soft);
  text-align:center; line-height:1.45;}

/* scene illustration palette helpers */
.scene-stroke{stroke:var(--iris-teal);}
.scene-violet{fill:var(--iris-violet);}
.scene-node{fill:var(--iris-teal);}
.scene-pearl{fill:var(--iris-pearl);}
.scene-flow{stroke:var(--iris-violet); stroke-dasharray:6 8; animation:wire-flow 2.8s linear infinite;}

/* dark-band service cards (glass, on the "What we build" dark band) */
.home .home-dark .svc-card{background:var(--dk-card); border:1px solid var(--dk-line);
  box-shadow:0 14px 40px rgba(0,16,34,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--dk-ink);}
.home .home-dark .svc-card h3{color:#fff;}
.home .home-dark .svc-card p{color:var(--dk-ink-soft);}
.home .home-dark .svc-card .svc-tags span{color:var(--iris-pearl); background:rgba(255,255,255,0.06); border-color:var(--dk-line);}
.home .home-dark .svc-link{color:var(--iris-teal);}
.home .home-dark .svc-card:hover{border-color:rgba(79,209,224,0.5);}

/* dark-band case cards (glass) */
.home .home-dark .case-card{background:var(--dk-card); border:1px solid var(--dk-line);
  box-shadow:0 14px 40px rgba(0,16,34,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--dk-ink);}
.home .home-dark .case-card h3{color:#fff;}
.home .home-dark .case-card p{color:var(--dk-ink-soft);}
.home .home-dark .case-card .case-tag{color:var(--iris-teal);}
.home .home-dark .case-card .case-tag i{background:var(--iris-teal);}
.home .home-dark .case-card .cc-note{color:var(--iris-pearl);}
.home .home-dark .case-card:hover{border-color:rgba(79,209,224,0.5);}

/* featured engagement row with a reused architecture PNG */
.home .home-feature{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:36px; align-items:center; margin-top:32px;}
.home .home-feature .home-row-body h3{color:#fff;}

/* reveal states for new home rows (reuse the shared .reveal transition) */
.home .home-row.reveal{transform:translateY(22px);}
@media (prefers-reduced-motion: reduce){
  .home .home-row.reveal{transform:none;}
  .scene-flow{animation:none;}
}

/* ── home responsive: side-by-side rows stack graphic-first then text ── */
@media (max-width:980px){
  .home .home-row{grid-template-columns:1fr; gap:22px;}
  .home .home-row.reverse .home-row-media{order:1;}
  .home .home-row.reverse .home-row-body{order:2;}
  .home .home-feature{grid-template-columns:1fr; gap:22px;}
}

/* ── responsive ── */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:28px;}
  .svc-bento{grid-template-columns:1fr 1fr;}
  .stats-bento{grid-template-columns:1fr;}
  .cosell-grid{grid-template-columns:1fr;}
  .case-bento{grid-template-columns:1fr;}
  .adv-bento{grid-template-columns:1fr;}
  .contact-wrap{grid-template-columns:1fr; gap:32px;}
  .hero-text h1{font-size:2.4rem;}
  /* keep the glass stage centered and contained when it drops below the copy */
  .hero-stage{max-width:460px; margin:0 auto; width:100%;}
}
@media (max-width:520px){
  /* keep the brand lockup compact on phones so it fits the mobile nav. */
  .brand-icon{height:40px;}
  .footer .brand-icon{height:44px;}
  .brand-word{font-size:1.2rem;}
  /* at phone widths the absolute composition would overflow; shrink it and
     tuck the side chip/cards inward so nothing clips the viewport. */
  .hero-stage{min-height:420px; transform:scale(0.86); transform-origin:top center; margin-bottom:-40px;}
  .gchip{right:0;}
  .gc-compute{left:0;} .gc-genai{right:0;}
}
@media (max-width:700px){
  /* dark dropdown panel to match the dark bar */
  .nav-links{position:absolute; top:94px; left:0; right:0;
    background:linear-gradient(180deg,#06233E,#002A4B);
    flex-direction:column; padding:14px 20px; display:none;
    border-top:1px solid var(--dk-line); border-bottom:1px solid var(--dk-line);
    box-shadow:0 18px 40px rgba(0,16,34,0.5); align-items:stretch;}
  .nav-links.open{display:flex;}
  .nav-links a{color:var(--iris-pearl); padding:12px 14px;}
  .nav-links a:hover{color:#fff; background:rgba(255,255,255,0.08);}
  .nav-toggle{display:block;}
  .svc-bento{grid-template-columns:1fr;}
  .hero-text h1{font-size:2rem;}
  .section{padding:52px 0;}
  .form-row{grid-template-columns:1fr;}
  .form-field.full{grid-column:1;}
  .footer-row{flex-direction:column; align-items:flex-start;}
}

/* ============================================================
   Dark theme — now UNCONDITIONAL (OS-theme independent). The dark
   :root tokens and body::before ambient were folded into the base
   styles above; these component overrides, formerly gated by
   @media (prefers-color-scheme: dark), are now applied always so the
   site renders identically in OS light and OS dark.
   ============================================================ */
/* nav is always dark chrome now (Path A); keep links light-on-dark */
.nav-links a{color:var(--iris-pearl);}
.nav-links a:hover{color:#fff; background:rgba(255,255,255,0.08);}
.credbar{background:var(--white);}
.cred-item{background:var(--blue-l); color:var(--ink);}
.cred-item span{color:#9ecbee;}
.svc-icon.ic-orange{color:#ffb547;}

/* ============================================================
   PORTED COMPONENT LIBRARY  (FEAT-001 — appended)
   Component rules ported from website-cloud-neutral/css/style.css so
   the richer source section markup (practice/case-study pages) can be
   reused almost verbatim on mistcloud.ai. Re-tinted to the mistcloud
   palette tokens defined in :root above. Palette mapping applied:
     ic-violet  -> --purple        (there is no --violet token here)
     --violet-l -> --purple-l
     ic-pink    -> --teal          (second accent; --orange if a third is needed)
     --orange-dark -> --orange-d
     'Sora'/'Inter' display+body   -> var(--sans)  (Segoe UI stack)
     'JetBrains Mono' stats        -> var(--mono)
   Responsive (@media 980 / 900 / 700) and dark-mode blocks for these
   classes are grouped at the end of this ported block. The existing
   component rules used by the home (navbar, btn, hero-*, credbar,
   section, svc-*, stats-bento/stat-tile, case-*, adv-*, contact-*,
   footer) are left untouched above.
   ============================================================ */

/* ── pill (hero credential / tag chip) ── */
.pill{display:inline-flex; align-items:center; gap:8px; background:var(--white); border:1px solid var(--line); padding:8px 18px; border-radius:100px; font-size:0.82rem; color:var(--ink-soft); font-weight:600; box-shadow:var(--shadow); max-width:100%; flex-wrap:wrap;}
.pill img{height:22px;}

/* ── hero mark (faint oversized logo watermark) + shared hero-grid ── */
.hero-mark{position:absolute; top:-60px; right:-80px; width:520px; height:520px; opacity:0.06; pointer-events:none; z-index:0;}
.hero-mark img{width:100%; height:100%; object-fit:contain;}
.hero-mark img.mark-dark{display:none;}

/* ── capability bento grid (3x2 practices) ── */
.cap-bento{display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:16px;}
.cap-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:26px; transition:.25s; box-shadow:var(--shadow); display:flex; flex-direction:column;}
.cap-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:var(--orange);}
.cap-card:hover .cap-icon{transform:scale(1.12) rotate(-4deg);}
.cap-icon{width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; transition:transform .25s; padding:4px; box-sizing:border-box; overflow:visible;}
.cap-icon svg{width:19px; height:19px; display:block;}
.cap-card h3{font-size:1.04rem; margin:0 0 8px;}
.cap-card p{font-size:0.88rem; color:var(--ink-soft); line-height:1.58; margin:0; flex:1;}
.cap-link{display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:0.85rem; font-weight:700; color:var(--blue-d);}
.cap-link:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}

/* ── icon-chip tint utilities (shared by cap-icon / feature-tag / case-row / discipline-head) ── */
.cap-icon.ic-blue, .ic-blue{background:var(--blue-l); color:var(--blue);}
.cap-icon.ic-teal, .ic-teal{background:var(--teal-l); color:var(--teal);}
.cap-icon.ic-orange, .ic-orange{background:var(--orange-l); color:var(--orange-d);}
.cap-icon.ic-green, .ic-green{background:var(--green-l); color:var(--green);}
.cap-icon.ic-violet, .ic-violet{background:var(--purple-l); color:var(--purple);}  /* ic-violet -> --purple */
.cap-icon.ic-pink, .ic-pink{background:var(--teal-l); color:var(--teal);}           /* ic-pink -> --teal */

/* ── stats variants: 2-up grid + violet (purple) stat tile ── */
.stats-bento-2{grid-template-columns:repeat(2,1fr);}
.stat-tile.bg-violet{background:linear-gradient(150deg,#8a63f3,var(--purple) 52%,#4a24b0);}  /* bg-violet -> purple family */

/* ── skills bench ── */
.bench-note{background:var(--blue-l); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 20px; font-size:0.88rem; color:var(--ink-soft); line-height:1.6; margin-bottom:24px;}
.bench-note strong{color:var(--ink);}
.skills-bento{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.skill-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); color:var(--ink);}
.skill-card h4{font-size:0.98rem; margin:0 0 10px; color:var(--navy);}
.skill-card span{color:var(--ink);}

/* Guard: white-surface cards must carry dark text regardless of where they
   sit (e.g. a .skill-card dropped inside the dark .hero would otherwise
   inherit the hero's near-white color and render invisible). */
.cap-card, .case-card, .svc-card, .skill-card, .aidlc-step,
.kpi-panel, .roadmap, .embed-box, .agent-diagram, .feature-split{color:var(--ink);}
.cap-card h3, .case-card h3, .svc-card h3, .skill-card h4,
.aidlc-step h4, .embed-box h5{color:var(--navy);}
.skill-tags{display:flex; flex-wrap:wrap; gap:6px;}
.skill-tag{font-size:0.74rem; font-weight:600; color:var(--ink-soft); background:var(--bg-alt); border:1px solid var(--line); border-radius:100px; padding:4px 10px;}

/* ── proof band attribution note ── */
.proof-note{font-size:0.78rem; color:var(--ink-faint); text-align:center; max-width:720px; margin:16px auto 0; line-height:1.55;}

/* ── named engagements as a divided list (case studies) ── */
.case-list{border-top:1px solid var(--line);}
.case-row{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px; padding:22px 4px; border-bottom:1px solid var(--line); text-decoration:none; transition:.2s;}
.case-row:hover{background:var(--bg-alt);}
.case-row .cap-icon{margin:0;}
.case-row .cr-body h3{font-size:1.02rem; margin:0 0 3px;}
.case-row .cr-meta{display:block; font-size:0.78rem; font-weight:600; color:var(--ink-faint); margin:0 0 5px;}
.case-row .cr-body p{font-size:0.88rem; color:var(--ink-soft); margin:0; line-height:1.5;}
.case-row .cr-arrow{color:var(--blue-d); font-weight:700; font-size:1.1rem; flex-shrink:0;}

/* ── deeper write-ups as a split feature panel ── */
.feature-split{display:flex; flex-direction:column; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
.feature-row{display:grid; grid-template-columns:220px 1fr; gap:28px; padding:30px 28px; align-items:center;}
.feature-row:not(:last-child){border-bottom:1px solid var(--line);}
.feature-tag{display:inline-flex; align-items:center; gap:8px; font-size:0.78rem; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.04em;}
.feature-tag .cap-icon{width:32px; height:32px; margin:0;}
.feature-tag .cap-icon svg{width:16px; height:16px;}
.feature-row h3{font-size:1.08rem; margin:0 0 6px;}
.feature-row p{font-size:0.92rem; color:var(--ink-soft); margin:0 0 10px; line-height:1.6;}

/* ── grouped disciplines as heading + tag pills ── */
.discipline-list{display:flex; flex-direction:column; gap:28px;}
.discipline-row{display:grid; grid-template-columns:260px 1fr; gap:24px; padding-bottom:24px; border-bottom:1px solid var(--line);}
.discipline-row:last-child{border-bottom:none; padding-bottom:0;}
.discipline-head{display:flex; align-items:flex-start; gap:12px;}
.discipline-head .cap-icon{margin:0; flex-shrink:0;}
.discipline-head h3{font-size:1rem; margin:0; line-height:1.3;}
.discipline-tags{display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start;}
.discipline-tags span{font-size:0.82rem; font-weight:600; color:var(--ink-soft); background:var(--bg-alt); border:1px solid var(--line); border-radius:100px; padding:6px 14px;}

/* ── professional services: AIDLC flow ── */
.aidlc-flow{display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-top:28px;}
.aidlc-step{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:24px 18px 20px; box-shadow:var(--shadow); position:relative; transition:.2s;}
.aidlc-step:hover{transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:var(--orange);}
.aidlc-step .num{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; background:var(--orange-l); font-family:var(--mono); font-size:0.85rem; font-weight:700; color:var(--orange-d);}
.aidlc-step h4{font-size:1rem; margin:14px 0 8px; font-weight:700;}
.aidlc-step p{font-size:0.82rem; color:var(--ink-soft); line-height:1.55; margin:0;}
.aidlc-step .gate{display:inline-flex; align-items:center; gap:5px; margin-top:14px; font-size:0.7rem; font-weight:700; color:var(--teal); text-transform:uppercase; letter-spacing:0.03em; background:var(--teal-l); padding:5px 10px; border-radius:100px;}
.aidlc-step .gate svg{width:12px; height:12px;}
.aidlc-arrow{display:none; position:absolute; right:-26px; top:32px; width:22px; height:22px; border-radius:50%; background:var(--bg-alt); border:1px solid var(--line); color:var(--orange-d); font-size:0.85rem; align-items:center; justify-content:center; z-index:2;}
@media (min-width:901px){ .aidlc-step:not(:last-child) .aidlc-arrow{display:flex;} }

/* ── embedded-delivery diagram (client env <-> team) ── */
.embed-diagram-wrap{background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:36px 28px; margin-top:32px;}
.embed-diagram{display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap;}
.embed-box{background:var(--white); border:1px solid var(--line); border-top:4px solid var(--line); border-radius:var(--radius); padding:26px 26px; width:240px; text-align:center; transition:.2s; box-shadow:var(--shadow);}
.embed-box.c-blue{border-top-color:var(--blue); background:var(--blue-l);}
.embed-box.c-teal{border-top-color:var(--teal); background:var(--teal-l);}
.embed-box.hub{border-top-color:var(--orange); background:var(--orange-l); border-width:2px; border-top-width:4px; box-shadow:0 0 0 4px rgba(255,153,0,0.18), var(--shadow-hover); transform:scale(1.06);}
.embed-box .ic{width:52px; height:52px; border-radius:14px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,0.08);}
.embed-box .ic svg{width:26px; height:26px;}
.embed-box h5{margin:0 0 5px; font-size:1rem; font-weight:700; color:var(--ink);}
.embed-box p{margin:0; font-size:0.8rem; color:var(--ink-soft); line-height:1.4;}
.embed-link{display:flex; flex-direction:column; align-items:center; gap:6px; padding:0 22px; color:var(--ink-faint);}
.embed-link span{font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; font-weight:700; color:var(--orange-d); background:var(--orange-l); padding:3px 10px; border-radius:100px; border:1px solid var(--orange);}
.embed-link svg{color:var(--orange);}

/* ── BVR phase roadmap (connected line + milestone markers) ── */
.roadmap{position:relative; margin-top:40px; padding:32px 28px 8px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);}
.roadmap-line{position:absolute; top:66px; left:9%; right:9%; height:4px; background:var(--line); border-radius:2px;}
.roadmap-line-fill{position:absolute; top:66px; left:9%; height:4px; width:82%; background:linear-gradient(90deg,var(--blue),var(--orange),var(--teal)); border-radius:2px; opacity:0.55;}
.roadmap-row{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative;}
.roadmap-phase{text-align:center;}
.roadmap-dot{width:36px; height:36px; border-radius:50%; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--mono); font-size:0.9rem; font-weight:700; position:relative; z-index:2; box-shadow:0 0 0 6px var(--white);}
.roadmap-card{background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius-sm); padding:20px 18px; text-align:left;}
.roadmap-when{font-family:var(--mono); font-size:0.72rem; color:var(--orange-d); text-transform:uppercase; letter-spacing:0.04em; display:block; margin-bottom:8px; font-weight:700;}
.roadmap-card h4{margin:0 0 10px; font-size:1rem; font-weight:700;}
.roadmap-card ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px;}
.roadmap-card li{font-size:0.82rem; color:var(--ink-soft); padding-left:16px; position:relative; line-height:1.5;}
.roadmap-card li::before{content:"\2192"; position:absolute; left:0; color:var(--orange-d); font-size:0.78rem; font-weight:700;}

/* ── KPI baseline -> target gauges ── */
.kpi-panel{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:32px 28px; margin-top:24px;}
.kpi-panel-title{font-size:0.86rem; font-weight:700; color:var(--ink); margin:0 0 24px; display:flex; align-items:center; gap:8px;}
.kpi-panel-title svg{width:16px; height:16px; color:var(--orange-d);}
.kpi-gauges{display:flex; flex-direction:column; gap:26px;}
.kpi-gauge-row{display:grid; grid-template-columns:200px 1fr 130px; align-items:center; gap:18px;}
.kpi-gauge-label{font-size:0.88rem; font-weight:700; color:var(--ink);}
.kpi-gauge-track{position:relative; height:10px; background:var(--line); border-radius:6px;}
.kpi-gauge-fill{position:absolute; top:0; left:0; height:10px; border-radius:6px; background:linear-gradient(90deg,var(--orange),var(--teal));}
.kpi-gauge-pt{position:absolute; top:50%; transform:translate(-50%,-50%); width:16px; height:16px; border-radius:50%; border:3px solid var(--white); box-shadow:0 0 0 1px var(--line), 0 2px 4px rgba(0,0,0,0.15);}
.kpi-gauge-pt.base{background:var(--ink-faint);}
.kpi-gauge-pt.target{background:var(--teal);}
.kpi-gauge-vals{font-family:var(--mono); font-size:0.86rem; color:var(--ink-soft); text-align:right; white-space:nowrap;}
.kpi-gauge-vals b{color:var(--ink); font-size:0.95rem;}
.kpi-legend{display:flex; gap:20px; margin-top:8px; padding-top:16px; border-top:1px solid var(--line); font-size:0.78rem; color:var(--ink-faint);}
.kpi-legend span{display:inline-flex; align-items:center; gap:6px;}
.kpi-legend i{width:10px; height:10px; border-radius:50%; display:inline-block;}

/* ── agentic AI featured section accents ── */
.agentic-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
.agentic-grid .desc p{color:var(--ink-soft); font-size:1.05rem; line-height:1.7; margin:0 0 20px;}
.agentic-list h4{font-size:0.82rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-faint); margin:0 0 14px; font-weight:700;}
.agentic-feat{list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:12px;}
.agentic-feat li{display:flex; gap:10px; align-items:flex-start; font-size:0.94rem; color:var(--ink);}
.agentic-feat li svg{flex-shrink:0; margin-top:2px; color:var(--purple);}  /* violet -> purple */
.agentic-usecases{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.agentic-usecases li{font-size:0.92rem; color:var(--ink-soft); padding-left:16px; border-left:2px solid var(--line); position:relative;}

/* ── agentic workflow diagram (trigger -> supervisor -> specialists -> gate -> outcome) ── */
.agent-diagram{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:36px 28px; margin:32px 0 8px;}
.agent-tier{display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;}
.agent-tier + .agent-tier{margin-top:8px;}
.agent-connector{display:flex; justify-content:center; padding:10px 0;}
.agent-connector svg{color:var(--ink-faint);}
.agent-node{background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 20px; text-align:center; min-width:150px;}
.agent-node.trigger{background:var(--blue-l); border-color:var(--blue);}
.agent-node.trigger .lbl{color:var(--blue);}
.agent-node.supervisor{background:var(--purple); border-color:var(--purple); color:#fff; min-width:220px; padding:18px 26px; box-shadow:0 0 0 5px var(--purple-l);}  /* violet -> purple */
.agent-node.supervisor .lbl{color:rgba(255,255,255,0.75);}
.agent-node.supervisor h5{color:#fff;}
.agent-node.specialist{background:var(--white); box-shadow:var(--shadow);}
.agent-node.gate{background:var(--teal-l); border-color:var(--teal); min-width:260px;}
.agent-node.gate .lbl{color:var(--teal);}
.agent-node.outcome{background:var(--orange-l); border-color:var(--orange);}
.agent-node.outcome .lbl{color:var(--orange-d);}
.agent-node .lbl{font-size:0.66rem; text-transform:uppercase; letter-spacing:0.05em; font-weight:700; color:var(--ink-faint); display:block; margin-bottom:5px;}
.agent-node h5{margin:0; font-size:0.88rem; font-weight:700; color:var(--ink);}
.agent-node p{margin:5px 0 0; font-size:0.74rem; color:var(--ink-faint); line-height:1.4;}
.agent-fanout{display:flex; align-items:flex-start; justify-content:center; gap:0; position:relative; margin:6px 0;}
.agent-fanout svg{color:var(--ink-faint); flex-shrink:0;}

/* ── architecture diagram frame (case studies) ── */
.arch-frame{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); max-width:1000px; margin:0 auto; background:var(--white);}
.arch-frame img{width:100%; display:block;}

/* ── ported-component responsive ── */
@media (max-width:980px){
  .cap-bento{grid-template-columns:1fr 1fr;}
  .stats-bento-2{grid-template-columns:1fr;}
  .agentic-grid{grid-template-columns:1fr; gap:32px;}
  .aidlc-flow{grid-template-columns:1fr 1fr;}
  .skills-bento{grid-template-columns:1fr 1fr;}
}
@media (max-width:900px){
  .embed-diagram{flex-direction:column;}
  .embed-link{padding:10px 0; flex-direction:row;}
  .embed-link svg{transform:rotate(90deg);}
  .roadmap-row{grid-template-columns:1fr;}
  .roadmap-line,.roadmap-line-fill{display:none;}
  .kpi-gauge-row{grid-template-columns:1fr; gap:8px;}
  .kpi-gauge-vals{text-align:left;}
  .agent-diagram{padding:24px 16px;}
  .agent-tier{flex-direction:column;}
  .agent-fanout{flex-direction:column; align-items:center;}
  .agent-fanout svg{display:none;}
}
@media (max-width:700px){
  .cap-bento{grid-template-columns:1fr;}
  .aidlc-flow{grid-template-columns:1fr;}
  .skills-bento{grid-template-columns:1fr;}
  .case-row{grid-template-columns:auto 1fr; grid-template-areas:"icon body" ". arrow"; row-gap:8px;}
  .case-row .cr-arrow{grid-area:arrow; justify-self:start;}
  .feature-row{grid-template-columns:1fr; gap:12px;}
  .discipline-row{grid-template-columns:1fr;}
  .hero-mark{display:none;}
}

/* ── ported-component dark styling — now UNCONDITIONAL (OS-theme
   independent; formerly gated by @media prefers-color-scheme:dark) ── */
.cap-card, .skill-card, .aidlc-step, .kpi-panel, .roadmap,
.embed-diagram-wrap, .agent-diagram, .feature-split{background:var(--white);}
.cap-icon.ic-orange, .ic-orange{color:#ffb547;}
.cap-icon.ic-violet, .ic-violet{background:var(--purple-l); color:#9d7bf5;}
.cap-icon.ic-pink, .ic-pink{background:var(--teal-l); color:#2fc3b2;}
.hero-mark{opacity:0.08;}
.hero-mark img.mark-light{display:none;}
.hero-mark img.mark-dark{display:block;}
.arch-frame{background:#fff;}
.embed-box.hub{box-shadow:0 0 0 4px rgba(255,153,0,0.18), var(--shadow-hover);}

/* ============================================================
   DARK-BAND FOUNDATION  (FEAT-001 — appended AFTER the ported guard)
   Generic (NOT .home-scoped) overrides keyed on .home-dark so the ported
   component cards read legibly on a dark iridescent band on the 14 rolled
   pages, plus the home services-bento scene wrapper + 5-card layout.
   Placed last so they win over the ".cap-card,.svc-card...{color:var(--ink)}"
   guard above on source order + equal-or-higher specificity.
   Does NOT touch any existing ".home ..." rule or the base white .arch-frame.
   ============================================================ */

/* section head + kicker on any dark band (parallels the .home versions) */
.home-dark .section-head h2{color:#fff;}
.home-dark .section-head p{color:var(--dk-ink-soft);}
.home-dark .kicker{background:rgba(139,127,240,0.18); color:var(--iris-pearl);}

/* glass card variants on a dark band: capability bento cards */
.home-dark .cap-card{background:var(--dk-card); border:1px solid var(--dk-line);
  box-shadow:0 14px 40px rgba(0,16,34,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--dk-ink);}
.home-dark .cap-card:hover{border-color:rgba(79,209,224,0.5);}
.home-dark .cap-card h3{color:#fff;}
.home-dark .cap-card p{color:var(--dk-ink-soft);}
.home-dark .cap-card .cap-link{color:var(--iris-teal);}

/* glass card variants on a dark band: skill cards */
.home-dark .skill-card{background:var(--dk-card); border:1px solid var(--dk-line);
  box-shadow:0 14px 40px rgba(0,16,34,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--dk-ink);}
.home-dark .skill-card h4{color:#fff;}
.home-dark .skill-card span{color:var(--dk-ink-soft);}
.home-dark .skill-card .skill-tag{color:var(--iris-pearl);
  background:rgba(255,255,255,0.06); border-color:var(--dk-line);}

/* glass variant on a dark band: feature-split panel */
.home-dark .feature-split{background:var(--dk-card); border:1px solid var(--dk-line);
  box-shadow:0 20px 50px rgba(0,16,34,0.5); color:var(--dk-ink);}
.home-dark .feature-split .feature-row:not(:last-child){border-bottom:1px solid var(--dk-line);}
.home-dark .feature-split h3{color:#fff;}
.home-dark .feature-split p{color:var(--dk-ink-soft);}
.home-dark .feature-split .feature-tag{color:var(--iris-pearl);}

/* ---- home services-bento: per-service mini-scene glass inset ----
   A smaller sibling of .home-scene used inside each dark .svc-card. */
.svc-scene{position:relative; border-radius:14px; padding:14px; margin-bottom:16px;
  background:rgba(255,255,255,0.04); border:1px solid var(--dk-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.14);}
.svc-scene svg{width:100%; height:auto; display:block;}

/* ---- 5-card services bento: 3 on row 1, 2 CENTERED on row 2 (no orphan) ----
   Flex fallback keeps the trailing pair centered; collapses to 2-col then 1-col. */
.svc-bento.svc-5{display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  grid-template-columns:none; grid-auto-rows:auto;}
.svc-bento.svc-5 > .svc-card{flex:0 1 calc((100% - 28px) / 3); min-width:0;}
@media (max-width:980px){
  .svc-bento.svc-5 > .svc-card{flex:0 1 calc((100% - 14px) / 2);}
}
@media (max-width:700px){
  .svc-bento.svc-5 > .svc-card{flex:0 1 100%;}
}

/* reduced-motion guard for the new dark-band foundation. The only animation
   reused inside .svc-scene is .scene-flow (already gated above); reassert it
   here so the newly-introduced wrapper is explicitly covered. */
@media (prefers-reduced-motion: reduce){
  .svc-scene .scene-flow{animation:none;}
}

/* ============================================================
   REFERENCE-LOOK FOUNDATION  (FEAT-002 — appended AFTER FEAT-001)
   Generic (NOT .home-scoped) parallels of the home dark-band base, the
   image-beside-text feature rows, the scene-panel wrapper, and the featured
   PNG row — so the 7 practice/overview pages (which intentionally do NOT carry
   class="home" on <body>) get the exact home vocabulary. The home's own
   ".home ..." rules are MORE specific and continue to win on index.html, so
   these bare rules never alter the already-approved home layout.
   ============================================================ */

/* dark band base (mirror of ".home .home-dark") */
.home-dark{position:relative; overflow:hidden; color:var(--dk-ink);
  background:linear-gradient(160deg,#013154,var(--dk-2) 62%,#00213B);}
.home-dark.band-3{background:linear-gradient(160deg,#083054,var(--dk-3) 60%,#041d33);}
.home-dark > .container{position:relative; z-index:1;}

/* alternating image-beside-text feature rows (mirror of ".home .home-row*") */
.home-rows{display:flex; flex-direction:column; gap:34px; margin-top:8px;}
.home-row{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:40px; align-items:center;}
.home-row.reverse .home-row-media{order:2;}
.home-row.reverse .home-row-body{order:1;}
.home-row-body h3{font-size:1.5rem; margin:0 0 12px; font-weight:700; color:#fff; line-height:1.2;}
.home-row-body p{font-size:1rem; color:var(--dk-ink-soft); line-height:1.65; margin:0 0 16px;}
.home-row-kicker{display:inline-flex; align-items:center; gap:8px; font-size:0.74rem; font-weight:700;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--iris-teal);
  background:rgba(79,209,224,0.12); border:1px solid rgba(79,209,224,0.25);
  padding:6px 13px; border-radius:100px; margin-bottom:14px;}
.home-row-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;}
.home-row-tags span{font-size:0.76rem; font-weight:600; color:var(--iris-pearl);
  background:rgba(255,255,255,0.06); border:1px solid var(--dk-line); border-radius:100px; padding:4px 12px;}
.home-row-link{display:inline-flex; align-items:center; gap:7px; margin-top:16px;
  font-size:0.9rem; font-weight:700; color:var(--iris-teal);}
.home-row-link:hover{color:#8FE7F6;}
.home-row-link:focus-visible{outline:2px solid var(--iris-teal); outline-offset:3px; border-radius:4px;}

/* glass panel that holds the scene illustration (mirror of ".home .home-scene") */
.home-row-media{margin:0;}
.home-scene{position:relative; border-radius:18px; padding:22px;
  background:var(--dk-card); border:1px solid var(--dk-line);
  backdrop-filter:blur(10px) saturate(1.15); -webkit-backdrop-filter:blur(10px) saturate(1.15);
  box-shadow:0 22px 50px rgba(0,16,34,0.5), inset 0 1px 0 rgba(255,255,255,0.18);}
.home-scene svg{width:100%; height:auto; display:block;}
.home-scene figcaption{margin-top:12px; font-size:0.78rem; color:var(--dk-ink-soft);
  text-align:center; line-height:1.45;}

/* featured engagement row with a reused architecture PNG (mirror of ".home .home-feature") */
.home-feature{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:36px; align-items:center; margin-top:32px;}
.home-feature .home-row-body h3{color:#fff;}

/* reveal states for the rows (reuse the shared .reveal transition) */
.home-row.reveal{transform:translateY(22px);}

/* responsive: rows stack graphic-first then text (mirror of the home media query) */
@media (max-width:980px){
  .home-row{grid-template-columns:1fr; gap:22px;}
  .home-row.reverse .home-row-media{order:1;}
  .home-row.reverse .home-row-body{order:2;}
  .home-feature{grid-template-columns:1fr; gap:22px;}
}

/* reduced-motion guard for the newly-generic animated classes */
@media (prefers-reduced-motion: reduce){
  .home-row.reveal{transform:none;}
  .home-scene .scene-flow{animation:none;}
}

/* forward-looking note — understated, distinct from delivered-capability copy */
.fwd-note{margin-top:14px; padding:12px 16px; border-left:2px solid var(--iris-teal,#2BC0D4);
  background:rgba(79,195,220,0.06); border-radius:0 10px 10px 0;
  font-size:0.88rem; color:rgba(234,244,253,0.78); line-height:1.6;}
.fwd-note::before{content:"Where we're heading"; display:block; font-size:0.68rem;
  text-transform:uppercase; letter-spacing:0.07em; font-weight:700;
  color:var(--iris-teal,#2BC0D4); margin-bottom:5px;}