/* ---------- self-hosted typefaces ---------- */
@font-face{ font-family:"Sora"; font-weight:400; font-style:normal; font-display:swap;
  src:url("../assets/fonts/sora-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Sora"; font-weight:600; font-style:normal; font-display:swap;
  src:url("../assets/fonts/sora-latin-600-normal.woff2") format("woff2"); }
@font-face{ font-family:"Instrument Sans"; font-weight:400; font-style:normal; font-display:swap;
  src:url("../assets/fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Instrument Sans"; font-weight:500; font-style:normal; font-display:swap;
  src:url("../assets/fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); }
@font-face{ font-family:"Instrument Sans"; font-weight:600; font-style:normal; font-display:swap;
  src:url("../assets/fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-weight:400; font-style:normal; font-display:swap;
  src:url("../assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-weight:500; font-style:normal; font-display:swap;
  src:url("../assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

/* ============================================================
   Noovaree — AI Strategy • Business Transformation • Lasting Impact
   Design tokens sampled from brand mark:
   ink #02051A · horizon #00E8EF · cobalt #00A9D6 · iris #22C8E8
   ============================================================ */

:root{
  /* LIGHT THEME — classic-consultant surface with the dark brand mark.
     NOTE ON NAMING: the theme was originally dark, so two token names now hold
     inverted roles — `--ink` is the light PAGE background, `--frost` is the dark
     PRIMARY TEXT. Keeping the names lets every existing var() reference flip
     without touching hundreds of rules. Read them by role, not by name:
       --ink   = page background (off-white)
       --frost = primary text (near-black)
       --slate / --slate-dim = secondary / tertiary text
       --abyss / --panel = card + panel surfaces (white)                        */
  --ink:        #021822;                  /* page background (deep teal-navy) */
  --accent:     #00E8EF;                  /* practice accent — cyan */
  --accent-soft:rgba(0,232,239,.10);
  --accent-line:rgba(0,232,239,.30);
  --abyss:      #072A38;                  /* card surface */
  --panel:      #072A38;                  /* panel surface */
  --panel-2:    #0B3444;                  /* inset surface (form fields) */
  --line:       rgba(0,232,239,.14);
  --line-strong:rgba(0,232,239,.26);
  --horizon:    #00E8EF;
  --cobalt:     #00B4D8;
  --iris:       #2BC4E8;
  --frost:      #EAF6F8;                  /* primary text */
  --slate:      #93AFB9;                  /* secondary text */
  --slate-dim:  #6E8A95;                  /* tertiary text / mono labels */
  --grad:       linear-gradient(115deg,#5AF5F8 0%,#00E8EF 48%,#00A6D8 100%);
  --shadow-sm:  0 1px 2px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.34);
  --shadow-md:  0 2px 6px rgba(0,0,0,.28), 0 14px 34px rgba(0,0,0,.42);
  --font-display:"Sora",system-ui,sans-serif;
  --font-body:  "Instrument Sans",system-ui,sans-serif;
  --font-mono:  "IBM Plex Mono",ui-monospace,monospace;
  --wrap:       1180px;
  --radius:     14px;
  --ease:       cubic-bezier(.22,.61,.2,1);
}

.theme-enterprise{
  --accent:     #00A6D8;                 /* practice accent — purple (enterprise), legible on white */
  --accent-soft:rgba(0,166,216,.12);
  --accent-line:rgba(0,166,216,.34);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--ink);
  color:var(--frost);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-wrap:break-word;   /* long unbroken strings can't force a sideways scroll */
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

::selection{ background:rgba(0,232,239,.85); color:#02141d; }

/* ---------- utilities ---------- */

.wrap{ width:min(var(--wrap),92%); margin-inline:auto; }

.skip-link{
  position:absolute; left:1rem; top:-3.5rem; z-index:200;
  background:var(--iris); color:#02141d; padding:.6rem 1rem;
  border-radius:8px; font-weight:600; text-decoration:none;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:1rem; }

:focus-visible{ outline:2px solid var(--horizon); outline-offset:3px; border-radius:4px; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex; align-items:center; gap:.75rem;
}
.eyebrow::before{
  content:""; width:22px; height:8px; flex:none;
  background:
    linear-gradient(var(--horizon),var(--horizon)) 0 0/6px 6px,
    linear-gradient(var(--cobalt),var(--cobalt)) 9px 2px/5px 5px,
    linear-gradient(var(--iris),var(--iris)) 17px 4px/4px 4px;
  background-repeat:no-repeat;
}

.grad-text{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ---------- buttons ---------- */

.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-body); font-weight:600; font-size:.98rem;
  padding:.85rem 1.7rem; border-radius:999px;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.btn svg{ width:15px; height:15px; transition:transform .25s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }

.btn-primary{
  background:var(--grad); color:#02141d;
  box-shadow:0 8px 28px rgba(0,210,235,.28);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 36px rgba(0,200,232,.4); }

.btn-ghost{
  color:var(--frost); border-color:var(--line-strong);
  background:var(--panel);
}
.btn-ghost:hover{ border-color:var(--cobalt); background:rgba(0,190,224,.06); }

/* ---------- header ---------- */

.site-header{
  position:fixed; inset:0 0 auto; z-index:100;
  transition:background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(4,30,42,.86);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line);
  box-shadow:0 1px 24px rgba(16,24,48,.06);
}
/* CRITICAL: backdrop-filter makes an element a containing block for its
   position:fixed descendants. .nav-links lives inside .site-header, so while
   the header is blurred the "inset:0" overlay is measured against the 76px
   header box instead of the viewport — the menu renders as a clipped sliver.
   It only looks right at scrollY 0, before .is-scrolled is applied. Drop the
   blur (and the header's own backdrop) whenever the menu is open; the overlay
   supplies its own blur and background. */
.nav-open .site-header.is-scrolled{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom-color:transparent;
  /* and do NOT animate it: while backdrop-filter is mid-transition its value is
     still non-none, so the containing block survives the full .3s and the menu
     flashes as a clipped sliver before snapping to fullscreen */
  transition:none;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 0;
}
.brand{
  display:flex; align-items:center; gap:.7rem; text-decoration:none;
}
.brand img{ width:38px; height:auto; }
.brand-name{
  font-family:var(--font-display);
  font-weight:400; font-size:1.28rem;
  letter-spacing:.24em; color:var(--frost);
  transform:translateY(1px);
}
.nav-links{
  display:flex; align-items:center; gap:2.2rem; list-style:none;
}
.nav-links a:not(.btn){
  font-size:.95rem; font-weight:500; text-decoration:none;
  color:var(--slate); letter-spacing:.02em;
  transition:color .2s var(--ease);
}
.nav-links a:not(.btn):hover{ color:var(--frost); }
.nav-links a[aria-current="page"]{ color:var(--frost); }
.nav-links a[aria-current="page"]:not(.btn){
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.nav-links .btn{ padding:.6rem 1.3rem; font-size:.9rem; }

.nav-toggle{
  display:none; background:none; border:0; cursor:pointer; padding:.4rem;
}
.nav-toggle span{
  display:block; width:24px; height:2px; background:var(--frost);
  margin:5px 0; border-radius:2px; transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */

.hero{
  position:relative;
  min-height:100vh;          /* fallback for browsers without svh */
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:9.5rem 0 5rem;
  overflow:hidden;
}
.hero::after{ /* horizon tint — subtle on light */
  content:""; position:absolute; inset:auto -20% -55% -20%; height:80%;
  background:radial-gradient(50% 55% at 50% 100%, rgba(0,190,224,.09), rgba(0,200,232,.05) 45%, transparent 75%);
  pointer-events:none;
}
#signal-field{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none;
}
.hero-inner{ position:relative; z-index:2; max-width:60rem; }
.hero h1{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(2.5rem,6vw,4.35rem);
  line-height:1.07;
  letter-spacing:-.015em;
  margin:1.4rem 0 1.6rem;
  text-wrap:balance;   /* even line lengths instead of a stubby orphan last line */
}
.hero-sub{
  max-width:44rem; color:var(--slate);
  font-size:clamp(1.05rem,1.5vw,1.2rem);
  text-wrap:pretty;    /* no single-word final line */
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem; }

.pillars{
  position:relative; z-index:2;
  margin-top:5rem; padding-top:1.6rem;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.6rem 2.1rem;
  list-style:none;
}
.pillars li{
  font-family:var(--font-mono); font-size:.74rem;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--slate); white-space:nowrap;
  display:flex; align-items:center; gap:2.1rem;
}
.pillars li:not(:last-child)::after{
  content:""; width:5px; height:5px; background:var(--cobalt); flex:none;
}

/* ---------- sections ---------- */

.section{ padding:6.5rem 0; position:relative; }
.section-head{ max-width:46rem; margin-bottom:3.4rem; }
.section-head h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.9rem,3.6vw,2.7rem);
  line-height:1.15; letter-spacing:-.01em;
  margin-top:1.1rem;
  text-wrap:balance;
}
.section-head p:not(.eyebrow){ color:var(--slate); margin-top:1rem; }

/* pixel-trail divider between sections */
.px-divider{
  width:min(var(--wrap),92%); margin-inline:auto;
  height:10px; position:relative;
}
.px-divider::before{
  content:""; position:absolute; left:0; top:4px; right:0; height:1px;
  background:linear-gradient(90deg,var(--line-strong),transparent 70%);
}
.px-divider::after{
  content:""; position:absolute; left:0; top:0; width:64px; height:10px;
  background:
    linear-gradient(var(--horizon),var(--horizon)) 0 1px/8px 8px,
    linear-gradient(var(--cobalt),var(--cobalt))  13px 2px/6px 6px,
    linear-gradient(var(--cobalt),var(--cobalt))  24px 3px/5px 5px,
    linear-gradient(var(--iris),var(--iris))      34px 3px/4px 4px,
    linear-gradient(var(--iris),var(--iris))      43px 4px/3px 3px;
  background-repeat:no-repeat;
}

/* quote band */
.quote-band{ padding:7rem 0; text-align:center; position:relative; overflow:hidden; }
.quote-band::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(42% 60% at 50% 50%, rgba(0,200,232,.06), transparent 70%);
  pointer-events:none;
}
.quote-band blockquote{
  position:relative; max-width:52rem; margin-inline:auto;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.5rem,3vw,2.25rem); line-height:1.35;
  letter-spacing:-.005em;
  text-wrap:balance;
}
.quote-band blockquote em{ font-style:normal; }
.quote-band cite{
  display:inline-flex; align-items:center; gap:.7rem;
  margin-top:2rem; font-style:normal;
  font-family:var(--font-mono); font-size:.74rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--slate);
}

/* engage cards */
.engage-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;
}
.engage-card{
  background:var(--abyss);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2.1rem 1.9rem;
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.engage-card:hover{ transform:translateY(-4px); border-color:var(--line-strong); box-shadow:var(--shadow-md); }
.engage-card .glyph{
  width:44px; height:44px; border-radius:10px;
  display:grid; place-items:center; margin-bottom:1.4rem;
  background:rgba(0,210,235,.08); border:1px solid rgba(0,210,235,.18);
}
.engage-card .glyph svg{ width:20px; height:20px; stroke:var(--horizon); }
.engage-card h3{
  font-family:var(--font-display); font-weight:600;
  font-size:1.14rem; margin-bottom:.7rem; letter-spacing:.005em;
}
.engage-card p{ color:var(--slate); font-size:.99rem; }

/* capability grid (home) */
.cap-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem;
}
.cap-card{
  position:relative; display:block; text-decoration:none;
  background:var(--abyss);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:1.7rem 1.8rem 1.6rem;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cap-card::before{ /* gradient hairline that ignites on hover */
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--grad); opacity:0; transition:opacity .3s var(--ease);
}
.cap-card:hover{ border-color:var(--line-strong); background:var(--panel); transform:translateX(4px); box-shadow:var(--shadow-md); }
.cap-card:hover::before{ opacity:1; }
.cap-card .cap-top{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
}
.cap-num{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em;
  color:var(--slate-dim);
}
.cap-card h3{
  font-family:var(--font-display); font-weight:600; font-size:1.16rem;
  margin:.55rem 0 .55rem; letter-spacing:.005em;
}
.cap-card p{ color:var(--slate); font-size:.96rem; }
.cap-card .cap-go{
  position:absolute; right:1.4rem; top:1.5rem;
  color:var(--slate-dim); transition:color .3s var(--ease), transform .3s var(--ease);
}
.cap-card:hover .cap-go{ color:var(--horizon); transform:translate(2px,-2px); }
.cap-card .cap-go svg{ width:15px; height:15px; }

/* why noovaree */
.why-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.why-cell{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:2.2rem 2rem 2.4rem;
  position:relative; transition:background .3s var(--ease);
}
.why-cell:hover{ background:rgba(0,210,235,.045); }
.why-cell .why-key{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--iris); display:block; margin-bottom:1.1rem;
}
.why-cell h3{
  font-family:var(--font-display); font-weight:600; font-size:1.2rem;
  margin-bottom:.75rem;
}
.why-cell p{ color:var(--slate); font-size:.98rem; }
.why-cell.why-intro{
  display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(140deg,rgba(0,232,239,.08),rgba(0,200,232,.08));
}
.why-cell.why-intro h3{
  font-size:1.45rem; line-height:1.3;
}

/* CTA band */
.cta-band{
  position:relative; overflow:hidden;
  border-top:1px solid var(--line);
  padding:7.5rem 0;
  text-align:center;
}
.cta-band::before{
  content:""; position:absolute; inset:-40% -20% auto; height:120%;
  background:radial-gradient(45% 50% at 50% 0%, rgba(0,200,232,.09), rgba(0,190,224,.04) 50%, transparent 78%);
  pointer-events:none;
}
.cta-inner{ position:relative; z-index:2; }
.cta-band h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.1rem,4.4vw,3.3rem);
  line-height:1.12; letter-spacing:-.01em;
  max-width:44rem; margin:1.2rem auto 1.4rem;
  text-wrap:balance;
}
.cta-band p:not(.eyebrow){ max-width:40rem; margin:0 auto 2.4rem; color:var(--slate); }

/* ---------- footer ---------- */

.site-footer{
  border-top:1px solid var(--line);
  padding:4.5rem 0 2.5rem;
  background:linear-gradient(180deg,transparent,rgba(0,232,239,.05));
}
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:3rem;
  margin-bottom:3.5rem;
}
/* footer brand lockup — rebuilt from the gradient mark + dark wordmark so it no
   longer depends on logo-full.png (which has white text baked in for dark bg) */
.footer-logo{
  display:inline-flex; align-items:center; gap:.6rem;
  text-decoration:none; margin-bottom:1.2rem;
}
.footer-logo img{ width:34px; height:auto; }
.footer-logo span{
  font-family:var(--font-display); font-weight:400;
  font-size:1.18rem; letter-spacing:.2em; color:var(--frost);
}
.footer-brand p{ color:var(--slate); font-size:.95rem; max-width:24rem; }
.footer-col h4{
  font-family:var(--font-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--slate-dim); margin-bottom:1.2rem;
}
.footer-col ul{ list-style:none; }
.footer-col li{ margin-bottom:.7rem; }
.footer-col a{
  text-decoration:none; color:var(--slate); font-size:.97rem;
  transition:color .2s var(--ease);
}
.footer-col a:hover{ color:var(--frost); }
.footer-bottom{
  border-top:1px solid var(--line);
  padding-top:1.8rem;
  display:flex; flex-wrap:wrap; gap:.8rem; justify-content:space-between;
  font-size:.84rem; color:var(--slate-dim);
}
.footer-bottom .tagline{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.26em; text-transform:uppercase;
}

/* ---------- capabilities page ---------- */

.page-hero{
  position:relative; padding:11rem 0 4.5rem; overflow:hidden;
}
.page-hero::after{
  content:""; position:absolute; inset:auto -30% -80% -30%; height:100%;
  background:radial-gradient(50% 50% at 50% 100%, rgba(0,190,224,.16), transparent 70%);
  pointer-events:none;
}
.page-hero h1{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.3rem,5vw,3.6rem); line-height:1.1;
  letter-spacing:-.012em; margin:1.3rem 0 1.3rem; max-width:46rem;
  text-wrap:balance;
}
.page-hero p:not(.eyebrow){ max-width:42rem; color:var(--slate); font-size:1.12rem; }

.cap-layout{
  display:grid; grid-template-columns:250px 1fr; gap:4.5rem;
  align-items:start; padding-bottom:5rem;
}
.cap-index{
  position:sticky; top:6.2rem;
  border-left:1px solid var(--line);
}
.cap-index ul{ list-style:none; }
.cap-index a{
  display:flex; gap:.8rem; align-items:baseline;
  padding:.5rem 0 .5rem 1.15rem; margin-left:-1px;
  border-left:2px solid transparent;
  text-decoration:none; color:var(--slate-dim); font-size:.9rem;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.cap-index a .idx{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em;
}
.cap-index a:hover{ color:var(--frost); }
.cap-index a.is-active{ color:var(--frost); border-left-color:var(--accent); }

.cap-detail{ border-top:1px solid var(--line); }
.cap-section{
  padding:3.4rem 0; border-bottom:1px solid var(--line);
  scroll-margin-top:5.5rem;
}
.cap-section header{ display:flex; align-items:baseline; gap:1.4rem; margin-bottom:1rem; }
.cap-section .num{
  font-family:var(--font-mono); font-size:.85rem; letter-spacing:.15em;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cap-section h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.5rem,2.6vw,2rem); letter-spacing:-.005em;
}
.cap-section .cap-lede{ color:var(--slate); max-width:40rem; margin-bottom:1.8rem; }
.cap-list{
  list-style:none;
  display:grid; grid-template-columns:repeat(2,1fr); gap:.65rem 2.5rem;
}
.cap-list li{
  position:relative; padding-left:1.35rem;
  color:#93AFB9; font-size:.99rem;
}
.cap-list li::before{
  content:""; position:absolute; left:0; top:.56em;
  width:6px; height:6px; background:var(--grad);
}

/* ---------- contact page ---------- */

.contact-layout{
  display:grid; grid-template-columns:1fr 1.1fr; gap:4.5rem;
  padding-bottom:6rem; align-items:start;
}
.contact-info h2{
  font-family:var(--font-display); font-weight:600; font-size:1.5rem;
  margin-bottom:1rem;
}
.contact-info > p{ color:var(--slate); margin-bottom:2.2rem; }
.expect-list{ list-style:none; border-top:1px solid var(--line); }
.expect-list li{
  display:flex; gap:1.1rem; padding:1.15rem 0;
  border-bottom:1px solid var(--line);
}
.expect-list .step{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.15em;
  color:var(--accent); padding-top:.28em; flex:none;
}
.expect-list h3{ font-size:1.02rem; font-weight:600; margin-bottom:.25rem; font-family:var(--font-body); }
.expect-list p{ color:var(--slate); font-size:.94rem; }
.contact-direct{
  margin-top:2.4rem; padding:1.5rem 1.6rem;
  background:var(--abyss); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.contact-direct .label{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--slate-dim); display:block; margin-bottom:.5rem;
}
.contact-direct a{
  font-family:var(--font-display); font-size:1.15rem; text-decoration:none;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.contact-form{
  background:var(--abyss);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:2.5rem;
  box-shadow:var(--shadow-md);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.field{ margin-bottom:1.35rem; }
.field label{
  display:block; font-size:.85rem; font-weight:600;
  letter-spacing:.03em; margin-bottom:.5rem; color:var(--frost);
}
.field input,.field select,.field textarea{
  width:100%; padding:.8rem 1rem;
  background:var(--panel-2);
  border:1px solid var(--line-strong); border-radius:9px;
  color:var(--frost); font-family:var(--font-body); font-size:.97rem;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field select{ appearance:none; background-image:linear-gradient(45deg,transparent 49%,var(--slate) 50%),linear-gradient(-45deg,transparent 49%,var(--slate) 50%); background-position:calc(100% - 1.2rem) 55%,calc(100% - .85rem) 55%; background-size:6px 6px; background-repeat:no-repeat; }
.field textarea{ min-height:140px; resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:var(--slate-dim); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--horizon);
  box-shadow:0 0 0 3px rgba(0,232,239,.15);
}
.form-note{ font-size:.83rem; color:var(--slate-dim); margin-top:1.1rem; }
.form-status{
  display:none; margin-top:1.2rem; padding:.9rem 1.1rem; border-radius:9px;
  font-size:.92rem; border:1px solid rgba(0,232,239,.35);
  background:rgba(0,232,239,.08); color:var(--frost);
}
.form-status.is-visible{ display:block; }
.form-status.is-error{ border-color:rgba(228,85,85,.4); background:rgba(228,85,85,.09); }
.form-status a{ color:var(--horizon); }

/* ---------- reveal on scroll ---------- */

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.on{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }

/* hero entrance */
.hero .rise{ opacity:0; transform:translateY(30px); animation:rise .9s var(--ease) forwards; }
.hero .rise:nth-child(2){ animation-delay:.12s; }
.hero .rise:nth-child(3){ animation-delay:.24s; }
.hero .rise:nth-child(4){ animation-delay:.36s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* ---------- responsive ----------
   Breakpoints:
     ≤1180  tighten the desktop nav so it survives narrow laptops / iPad Pro portrait
     ≤980   two-up grids collapse, sticky capability index becomes a scroller
     ≤900   hamburger nav (covers iPad portrait 768 and all landscape phones)
     ≤720   single-column everywhere
     ≤400   small-phone tuning
     short landscape — hero stops reserving a full screen height
   ------------------------------------------------------------ */

/* keep the desktop nav from colliding before the hamburger takes over */
@media (max-width:1180px){
  .nav-links{ gap:1.5rem; }
  .nav-links a:not(.btn){ font-size:.9rem; }
  .nav-links .btn{ padding:.55rem 1.1rem; font-size:.85rem; }
  .brand-name{ font-size:1.15rem; letter-spacing:.18em; }
}
/* nav labels must never wrap mid-phrase */
.nav-links a{ white-space:nowrap; }

@media (max-width:980px){
  .engage-grid{ grid-template-columns:1fr 1fr; }
  .why-grid{ grid-template-columns:1fr 1fr; }
  .cap-layout{ grid-template-columns:1fr; gap:0; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .contact-layout{ grid-template-columns:1fr; gap:3rem; }

  /* the sticky rail can't survive a narrow column — become a horizontal scroller
     rather than vanishing, so long capability pages stay navigable */
  .cap-index{
    position:static; border-left:0;
    border-bottom:1px solid var(--line);
    margin-bottom:2.2rem; padding-bottom:.2rem;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .cap-index::-webkit-scrollbar{ display:none; }
  .cap-index ul{ display:flex; gap:.4rem; width:max-content; }
  .cap-index a{
    padding:.55rem .85rem; margin-left:0;
    border-left:0; border-bottom:2px solid transparent;
    white-space:nowrap;
  }
  .cap-index a.is-active{ border-left-color:transparent; border-bottom-color:var(--accent); }
}

@media (max-width:900px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:fixed; inset:0; z-index:90;
    flex-direction:column; justify-content:center; gap:1.6rem;
    padding:6rem 1.5rem 2rem;
    overflow-y:auto; overscroll-behavior:contain;
    background:rgba(3,22,31,.98);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
  }
  .nav-open .nav-links{ opacity:1; pointer-events:auto; }
  .nav-open{ overflow:hidden; }   /* don't let the page scroll behind the overlay */
  .nav-links a:not(.btn){ font-size:1.25rem; padding:.5rem 0; }
  .nav-links a:not(.btn)::after{ display:none; }   /* underline is desktop-only affordance */
  .site-header{ z-index:100; }
  .nav{ position:relative; z-index:95; }
  /* .nav-links is a child of .nav, so at z-index 90 it paints over the unpositioned
     brand and toggle — lift them above it or the close button is untappable */
  .brand,.nav-toggle{ position:relative; z-index:91; }
  /* restore full-size type: the ≤1180 shrink is meaningless inside the overlay */
  .brand-name{ font-size:1.2rem; letter-spacing:.2em; }
  /* roomier touch targets — the dense desktop link lists are ~20px tall */
  .nav-toggle{ padding:.6rem; margin-right:-.6rem; }
  .footer-col li{ margin-bottom:.2rem; }
  .footer-col a{ display:inline-block; padding:.55rem 0; }
  .practice-list{ gap:0 1.4rem; }
  .practice-list a{ padding:.6rem 0; align-items:center; }
  .cap-index a{ padding:.7rem .85rem; }
  .brand{ padding:.35rem 0; }
}

/* Touch devices, keyed off pointer type rather than width — a 1024px iPad Pro in
   portrait is still a finger-driven device and width alone never catches it. */
@media (pointer:coarse){
  /* 16px inputs — anything smaller makes iOS Safari zoom the page on focus */
  .field input,.field select,.field textarea{ font-size:16px; }
  .footer-col li{ margin-bottom:.2rem; }
  .footer-col a{ display:inline-block; padding:.55rem 0; }
  .practice-list{ gap:0 1.4rem; }
  .practice-list a{ padding:.6rem 0; align-items:center; }
  .cap-index a{ padding:.7rem .85rem; }
  .brand{ padding:.35rem 0; }
  .contact-direct a{ display:inline-block; padding:.4rem 0; }
  .expect-list a{ display:inline-block; padding:.4rem 0; }
}

@media (max-width:720px){
  .engage-grid{ grid-template-columns:1fr; }
  .cap-grid{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:1fr; border-left:0; }
  .why-cell{ border-right:0; padding:1.9rem 0 2rem; }
  .cap-list{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; gap:0; }
  .footer-grid{ grid-template-columns:1fr; gap:2.2rem; }
  .section{ padding:4.5rem 0; }
  .pillars{ gap:.6rem 1.4rem; }
  .pillars li{ gap:1.4rem; }

  .hero{ padding:7.5rem 0 4rem; }
  .page-hero{ padding:8rem 0 3rem; }
  .quote-band{ padding:4.5rem 0; }
  .cta-band{ padding:5rem 0; }
  .site-footer{ padding:3.5rem 0 2rem; }
  .contact-form{ padding:1.6rem 1.3rem; }
  .practice-panel{ padding:2rem 1.5rem; }
  .engage-card{ padding:1.7rem 1.4rem; }
  .cap-card{ padding:1.4rem 1.3rem; }
  .cap-section{ padding:2.6rem 0; }
  .cap-section header{ gap:.9rem; }
  .to-top{ width:42px; height:42px; right:1rem; bottom:1rem; }
  .field input,.field select,.field textarea{ font-size:16px; }  /* see pointer:coarse note */
  /* phone pages are tall and get flicked fast — a 0.7s fade leaves blank screens
     behind the scroll, so shorten it here */
  .reveal{ transition-duration:.45s; }
}

/* Phones. The base clamp floor of 2.5rem pinned the hero headline at 40px from
   320px right up to 430px, so it never adapted and broke as
   "Advisory for both / sides of / the AI economy." — let it scale with the
   viewport here instead. */
@media (max-width:480px){
  .hero h1{ font-size:clamp(1.8rem,7.4vw,2.25rem); margin:1.1rem 0 1.25rem; }
  .page-hero h1{ font-size:clamp(1.75rem,7vw,2.15rem); }
  .cta-band h2{ font-size:clamp(1.7rem,6.8vw,2.1rem); }
  .section-head h2{ font-size:clamp(1.6rem,6.2vw,2rem); }
  .quote-band blockquote,.thesis blockquote{ font-size:clamp(1.2rem,5vw,1.5rem); }
  /* stacked pills at mismatched widths read as a mistake — match them */
  .hero-cta{ gap:.7rem; }
  .hero-cta .btn,.practice-panel .btn,.cta-inner .btn{
    width:100%; justify-content:center;
  }
  .eyebrow{ font-size:.63rem; letter-spacing:.2em; gap:.55rem; }
}

@media (max-width:400px){
  .wrap,.px-divider{ width:min(var(--wrap),94%); }
  .hero{ padding:6.5rem 0 3rem; }
  .btn{ padding:.8rem 1.2rem; font-size:.92rem; }
  .brand img{ width:32px; }
  .brand-name{ font-size:1.05rem; letter-spacing:.16em; }
  .contact-form{ padding:1.3rem 1.1rem; }
  .practice-panel{ padding:1.7rem 1.2rem; }
  .footer-brand img{ width:126px; }
}

/* landscape phones: a full-height hero pushes the CTAs off-screen entirely */
@media (max-height:600px) and (orientation:landscape){
  .hero{ min-height:auto; padding:6.5rem 0 3rem; }
  .hero .ticker,.hero .pillars{ margin-top:2.25rem; }
  .page-hero{ padding:7rem 0 2.5rem; }
  .nav-links{ gap:1rem; padding-top:5rem; }
  .nav-links a:not(.btn){ font-size:1.05rem; padding:.35rem 0; }
}
/* ~390px-tall landscape phones — compress hard so the CTAs stay above the fold */
@media (max-height:480px) and (orientation:landscape){
  .hero{ padding:5rem 0 2.5rem; }
  .hero h1{ font-size:clamp(1.9rem,4.2vw,2.4rem); margin:.9rem 0 1rem; }
  .hero-sub{ font-size:.95rem; max-width:38rem; }
  .hero-cta{ margin-top:1.5rem; }
  .hero .ticker,.hero .pillars{ margin-top:1.75rem; padding-top:1.1rem; }
  .page-hero{ padding:5.5rem 0 2rem; }
  .page-hero h1{ font-size:clamp(1.8rem,4vw,2.4rem); margin:.9rem 0 .9rem; }
}

/* hover-only affordances — on touch these stick "on" after a tap */
@media (hover:none){
  .engage-card:hover,.practice-panel:hover{ transform:none; }
  .cap-card:hover{ transform:none; }
  .btn-primary:hover,.btn-sky:hover,.btn-iris:hover{ transform:none; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  .hero .rise{ opacity:1; transform:none; animation:none; }
}

/* ---------- sky (startup) button ---------- */
.btn-sky{
  background:linear-gradient(115deg,#6FF7F9,#00D2E8); color:#02141d;
  box-shadow:0 8px 28px rgba(0,232,239,.3);
}
.btn-sky:hover{ transform:translateY(-2px); box-shadow:0 12px 36px rgba(0,232,239,.45); }

/* ---------- iris (enterprise) button ---------- */
.btn-iris{
  background:linear-gradient(115deg,#0B7FA8,#12A6C8); color:#EAF6F8;
  box-shadow:0 8px 28px rgba(0,200,232,.3);
}
.btn-iris:hover{ transform:translateY(-2px); box-shadow:0 12px 36px rgba(0,200,232,.45); }

/* ---------- practices split (home signature) ---------- */
.practice-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.practice-panel{
  position:relative; display:flex; flex-direction:column;
  background:var(--abyss);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:2.6rem 2.4rem 2.4rem; overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), border-color .35s var(--ease), opacity .35s var(--ease), box-shadow .35s var(--ease);
}
.practice-panel:hover{ transform:translateY(-4px); border-color:var(--line-strong); box-shadow:var(--shadow-md); }
.practice-panel::before{ /* top gradient bar — each panel takes one end of the brand gradient */
  content:""; position:absolute; inset:0 0 auto; height:3px;
}
.practice-startup::before{ background:linear-gradient(90deg,#6FF7F9,#00D2E8); }
.practice-enterprise::before{ background:linear-gradient(90deg,#0B7FA8,#12A6C8); }
.practice-panel::after{
  content:""; position:absolute; inset:-40% -30% auto; height:70%;
  pointer-events:none;
}
.practice-startup::after{ background:radial-gradient(50% 60% at 50% 0%, rgba(0,232,239,.13), transparent 72%); }
.practice-enterprise::after{ background:radial-gradient(50% 60% at 50% 0%, rgba(0,200,232,.16), transparent 72%); }
.practice-kicker{
  position:relative; z-index:1;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.3em;
  text-transform:uppercase; margin-bottom:1.1rem;
}
.practice-startup .practice-kicker{ color:var(--horizon); }
.practice-enterprise .practice-kicker{ color:#4FD2EE; }
.practice-panel h3{
  position:relative; z-index:1;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.4rem,2.2vw,1.75rem); line-height:1.2;
  margin-bottom:.9rem; letter-spacing:-.005em;
}
.practice-panel > p:not(.practice-kicker){
  position:relative; z-index:1;
  color:var(--slate); font-size:.99rem; margin-bottom:1.7rem;
}
.practice-list{
  position:relative; z-index:1; list-style:none;
  display:grid; grid-template-columns:1fr 1fr; gap:.45rem 1.4rem;
  margin-bottom:2rem; padding-top:1.4rem;
  border-top:1px solid var(--line);
}
.practice-list a{
  display:flex; gap:.6rem; align-items:baseline;
  text-decoration:none; color:#93AFB9; font-size:.88rem; line-height:1.4;
  transition:color .2s var(--ease);
}
.practice-list a:hover{ color:var(--frost); }
.practice-list .idx{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em;
  color:var(--slate-dim); flex:none;
}
.practice-panel .btn{ position:relative; z-index:1; align-self:flex-start; margin-top:auto; }

/* ---------- dual thesis band (home) ---------- */
.thesis-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
}
.thesis{
  padding:1rem 3.2rem 1rem 0;
}
.thesis + .thesis{
  padding:1rem 0 1rem 3.2rem;
  border-left:1px solid var(--line);
}
.thesis blockquote{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.25rem,2vw,1.55rem); line-height:1.42;
  letter-spacing:-.003em;
  text-wrap:balance;
}
.thesis blockquote em{ font-style:normal; }
.thesis cite{
  display:inline-flex; align-items:center; gap:.7rem;
  margin-top:1.6rem; font-style:normal;
  font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--slate);
}

/* ---------- outcome strip (enterprise capability sections) ---------- */
.cap-outcome{
  margin-top:1.8rem; padding:1.05rem 1.3rem;
  background:var(--accent-soft);
  border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0;
}
.cap-outcome .o-label{
  display:block; font-family:var(--font-mono); font-size:.64rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--accent);
  margin-bottom:.35rem;
}
.cap-outcome p{ color:#93AFB9; font-size:.96rem; }

@media (max-width:980px){
  .practice-grid{ grid-template-columns:1fr; }
  .thesis-grid{ grid-template-columns:1fr; }
  .thesis{ padding:1.4rem 0; }
  .thesis + .thesis{ padding:1.6rem 0 0; border-left:0; border-top:1px solid var(--line); }
}
@media (max-width:720px){
  .practice-list{ grid-template-columns:1fr; }
}

/* ============================================================
   Interaction layer
   ============================================================ */

/* scroll progress bar */
.scroll-progress{
  position:fixed; top:0; left:0; z-index:130;
  height:3px; width:0; background:var(--grad);
  box-shadow:0 0 12px rgba(0,200,232,.55);
}

/* back to top */
.to-top{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:95;
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line-strong);
  background:rgba(9,40,53,.88);
  box-shadow:var(--shadow-md);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:grid; place-items:center; cursor:pointer;
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ border-color:var(--accent); }
.to-top svg{ width:16px; height:16px; stroke:var(--frost); }

/* cursor spotlight on cards */
.spot{ position:relative; }
.spot::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),
             rgba(0,232,239,.11), transparent 62%);
  opacity:0; transition:opacity .35s var(--ease); pointer-events:none;
}
.spot:hover::after{ opacity:1; }

/* choose-your-side: dim the practice panel you're not on */
@media (hover:hover){
  .practice-grid:hover .practice-panel:not(:hover){ opacity:.5; transform:scale(.985); }
}

/* gradient shimmer on hero + cta gradient text */
.hero h1 .grad-text, .page-hero h1 .grad-text, .cta-band h2 .grad-text{
  background-size:200% 100%;
  animation:shimmer 6.5s ease-in-out infinite;
}
@keyframes shimmer{
  0%{ background-position:0% 0; }
  50%{ background-position:100% 0; }
  100%{ background-position:0% 0; }
}

/* word-by-word headline entrance (spans added by JS) */
.w{
  display:inline-block; opacity:0;
  transform:translateY(.5em);
  animation:wordrise .65s var(--ease) forwards;
  animation-delay:calc(var(--wi) * 60ms + 100ms);
}
@keyframes wordrise{ to{ opacity:1; transform:none; } }
/* gradient word-units must run BOTH the reveal and the shimmer,
   otherwise the more specific shimmer rule cancels the reveal */
.hero h1 .grad-text.w, .page-hero h1 .grad-text.w{
  animation:wordrise .65s var(--ease) forwards, shimmer 6.5s ease-in-out infinite;
  animation-delay:calc(var(--wi) * 60ms + 100ms), 0s;
}
/* JS safety net: if any animation fails to run, force words visible */
.w-done .w{ opacity:1; transform:none; }

/* brand ticker (home hero) */
.ticker{
  position:relative; z-index:2; margin-top:5rem;
  border-top:1px solid var(--line); padding-top:1.6rem;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.ticker-track{
  display:flex; gap:2.4rem; width:max-content;
  animation:tick 30s linear infinite;
}
.ticker-track:hover{ animation-play-state:paused; }
.ticker-group{ display:flex; gap:2.4rem; align-items:center; }
.ticker-group span{
  font-family:var(--font-mono); font-size:.74rem;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--slate); white-space:nowrap;
}
.ticker-group .dot{ width:5px; height:5px; background:var(--cobalt); flex:none; letter-spacing:0; }
@keyframes tick{ to{ transform:translateX(-50%); } }

/* nav hover underline */
.nav-links a:not(.btn){ position:relative; }
.nav-links a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--grad); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-links a:not(.btn):hover::after{ transform:scaleX(1); }
.nav-links a[aria-current="page"]:not(.btn)::after{ transform:scaleX(1); }

/* button sheen sweep */
.btn-primary::before, .btn-sky::before, .btn-iris::before{
  content:""; position:absolute; top:0; bottom:0; left:-70%; width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);
  transition:left .55s var(--ease);
  pointer-events:none;
}
.btn-primary:hover::before, .btn-sky:hover::before, .btn-iris:hover::before{ left:135%; }

@media (prefers-reduced-motion:reduce){
  .ticker-track{ animation:none; transform:none; }
  .hero h1 .grad-text, .page-hero h1 .grad-text, .cta-band h2 .grad-text{ animation:none; }
  .w, .hero h1 .grad-text.w, .page-hero h1 .grad-text.w{ opacity:1; transform:none; animation:none; }
  .scroll-progress{ display:none; }
  .btn-primary::before, .btn-sky::before, .btn-iris::before{ display:none; }
}