/* ============================================================
   BLIZ BOND — MAIN STYLESHEET
   Design system: "Cinematic Powerhouse" (Stitch Futuristic Evolution)
   Colors:  #131313 surface | #00d4ff primary | #EBC77D gold
   Fonts:   Hanken Grotesk (display) | Inter (body) | JetBrains Mono (labels)
   ============================================================ */

/* ------------------------------------------------------------
   DESIGN TOKENS (from Stitch designTheme)
   ---------------------------------------------------------- */
:root {
  /* Surfaces */
  --surface:               #131313;
  --surface-dim:           #131313;
  --surface-container-low: #1c1b1b;
  --surface-container:     #201f1f;
  --surface-container-high:#2a2a2a;
  --surface-highest:       #353534;
  --surface-bright:        #3a3939;
  --surface-glass:         rgba(10,25,47,0.40);

  /* Text */
  --on-surface:            #e5e2e1;
  --on-surface-muted:      #bbc9cf;
  --on-surface-dim:        #859398;

  /* Primary – Electric Blue */
  --primary:               #00d4ff;
  --primary-dim:           #3cd7ff;
  --primary-soft:          #a8e8ff;
  --on-primary:            #003642;
  --primary-container:     #00d4ff;

  /* Gold accent (legacy brand) */
  --gold:                  #EBC77D;
  --gold-dim:              #feb528;

  /* Secondary – Navy */
  --secondary:             #b9c7e4;
  --secondary-container:   #3c4962;
  --on-secondary:          #233148;

  /* Borders */
  --border-glow:           rgba(0,212,255,0.20);
  --border-subtle:         rgba(255,255,255,0.08);
  --border-hover:          rgba(0,212,255,0.45);

  /* Outline */
  --outline:               #859398;
  --outline-variant:       #3c494e;

  /* Error */
  --error:                 #ffb4ab;

  /* Radii (Stitch "ROUND_FOUR" = 4px base) */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Spacing (8px unit) */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-6:  48px;
  --space-8:  64px;
  --space-10: 80px;
  --space-20: 160px;

  /* Typography */
  --font-display: 'Hanken Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Layout */
  --container:    1440px;
  --gutter:       32px;
  --nav-h:        72px;

  /* Transitions */
  --t-fast:   0.18s ease;
  --t-mid:    0.28s ease;
  --t-slow:   0.45s ease;
}

/* ------------------------------------------------------------
   RESET
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body  {
  background:  var(--surface);
  color:       var(--on-surface);
  font-family: var(--font-body);
  font-size:   1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
a    { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: var(--font-body); cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: var(--font-body); }

/* Accessibility */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}
.skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: 9999;
  background: var(--primary); color: var(--on-primary);
  padding: .5rem 1rem; font-weight: 600; font-size: .875rem;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 1rem; }

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* ------------------------------------------------------------
   LAYOUT
   ---------------------------------------------------------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-10);
}
section { padding: var(--space-20) var(--space-10); }

/* ------------------------------------------------------------
   TYPOGRAPHY
   ---------------------------------------------------------- */

/* Label caps — JetBrains Mono */
.label-caps {
  font-family:    var(--font-mono);
  font-size:      12px;
  font-weight:    500;
  line-height:    16px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color:          var(--primary);
}
.label-caps--gold { color: var(--gold); }

.section-title {
  font-family:    var(--font-display);
  font-size:      clamp(2.25rem, 4vw, 3.75rem);
  font-weight:    700;
  line-height:    1.1;
  letter-spacing: -.02em;
  color:          var(--on-surface);
}
.section-title em {
  font-style:  italic;
  background:  linear-gradient(135deg, var(--primary), #7fefff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-title .outline-text {
  color:                   transparent;
  -webkit-text-stroke:     1px var(--primary);
}

.display-xl {
  font-size:      clamp(3rem, 6vw, 5.25rem);
  font-weight:    800;
  letter-spacing: -.04em;
  line-height:    1.05;
}

.body-lg {
  font-size:   1.125rem;
  line-height: 2rem;
}
.muted { color: var(--on-surface-muted); }

/* Gradient text utility */
.gradient-text {
  background:              linear-gradient(135deg, var(--primary) 0%, var(--primary-soft) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
}

/* ------------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------- */
.btn {
  display:        inline-flex;
  align-items:    center;
  gap:            .5rem;
  font-family:    var(--font-display);
  font-size:      .875rem;
  font-weight:    600;
  letter-spacing: .04em;
  padding:        14px 28px;
  border-radius:  var(--radius-sm);
  transition:     all var(--t-mid);
  white-space:    nowrap;
  cursor:         pointer;
}
.btn-primary {
  background:  var(--on-surface); /* White on dark = max contrast */
  color:       var(--surface);
  border:      1px solid transparent;
}
.btn-primary:hover {
  background:  var(--primary);
  color:       var(--on-primary);
  box-shadow:  0 0 24px rgba(0,212,255,.35);
}
.btn-outline {
  background:   transparent;
  color:        var(--on-surface);
  border:       1px solid var(--border-subtle);
}
.btn-outline:hover {
  border-color: var(--primary);
  color:        var(--primary);
  box-shadow:   0 0 16px rgba(0,212,255,.15);
}
.btn-ghost {
  background:  transparent;
  color:       var(--primary);
  border:      none;
  padding-left:0; padding-right:0;
}
.btn-ghost:hover { opacity: .75; }

/* ------------------------------------------------------------
   GLASS CARD UTILITY
   ---------------------------------------------------------- */
.glass-card {
  background:    var(--surface-glass);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color var(--t-mid), box-shadow var(--t-mid);
}
.glass-card:hover {
  border-color: var(--border-hover);
  box-shadow:   0 0 32px rgba(0,212,255,.08);
}

/* Tonal surface card */
.surface-card {
  background:    var(--surface-container);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  transition:    border-color var(--t-mid);
}
.surface-card:hover { border-color: var(--border-hover); }

/* ------------------------------------------------------------
   NAVIGATION
   ---------------------------------------------------------- */
.site-header {
  position:  fixed;
  top: 0; left: 0; right: 0;
  z-index:   100;
  height:    var(--nav-h);
}
.main-nav {
  height:          100%;
  display:         flex;
  align-items:     center;
  background:      rgba(19,19,19,.75);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom:   1px solid var(--border-subtle);
  transition:      background var(--t-mid);
}
.main-nav.scrolled { background: rgba(19,19,19,.97); }

.nav-inner {
  width:           100%;
  max-width:       var(--container);
  margin:          0 auto;
  padding:         0 var(--space-10);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-4);
}

/* Logo */
.nav-logo a,
.site-logo-text {
  font-family:    var(--font-display);
  font-size:      1.375rem;
  font-weight:    800;
  letter-spacing: -.03em;
  color:          var(--on-surface);
  display:        flex;
  align-items:    center;
  gap:            2px;
}
.logo-accent { color: var(--primary); }
.nav-logo .custom-logo { max-height: 40px; width: auto; }

/* Nav menu */
.nav-menu {
  display:     flex;
  align-items: center;
  gap:         1.25rem;
}
.nav-menu li a {
  font-family:    var(--font-mono);
  font-size:      10px;
  font-weight:    500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--on-surface-muted);
  transition:     color var(--t-fast);
  white-space:    nowrap;
}
.nav-menu li a:hover,
.nav-menu li.current-menu-item > a,
.nav-menu li.current_page_item > a { color: var(--on-surface); }

.nav-actions { display: flex; align-items: center; gap: var(--space-2); }
.nav-cta {
  background:   var(--primary);
  color:        var(--on-primary);
  padding:      8px 16px;
  font-family:  var(--font-mono);
  font-size:    10px;
  font-weight:  500;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-radius:var(--radius-sm);
  border:       1px solid transparent;
  transition:   all var(--t-fast);
  white-space:  nowrap;
}
.nav-cta:hover { background: var(--primary-dim); box-shadow: 0 0 20px rgba(0,212,255,.4); color: var(--on-primary); }

/* Hamburger */
.hamburger {
  display:        none;
  flex-direction: column;
  gap:            5px;
  padding:        8px;
  background:     none;
  border:         none;
  cursor:         pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action:   manipulation;
  z-index:        101;
  position:       relative;
}
.hamburger span {
  display:    block;
  width:      24px;
  height:     2px;
  background: var(--on-surface);
  transition: all var(--t-mid);
  pointer-events: none;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--primary); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--primary); }

/* ------------------------------------------------------------
   HERO
   ---------------------------------------------------------- */
.hero {
  min-height: 100vh;
  display:    flex;
  align-items:center;
  position:   relative;
  overflow:   hidden;
  padding-top: calc(var(--nav-h) + var(--space-10));
  padding-bottom: var(--space-10);
}

/* Atmospheric background layers */
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(0,212,255,.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 70%, rgba(0,212,255,.06) 0%, transparent 50%),
    var(--surface);
}
/* Fine dot grid */
.hero-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    radial-gradient(rgba(0,212,255,.15) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}

.hero-content {
  position:   relative;
  z-index:    1;
  max-width:  860px;
  margin:     0 auto;
  text-align: center;
  padding:    0 var(--space-10);
}

.hero-badge {
  display:      inline-flex;
  align-items:  center;
  gap:          .5rem;
  padding:      6px 16px;
  border:       1px solid var(--border-glow);
  border-radius:var(--radius-full);
  background:   rgba(0,212,255,.06);
  margin-bottom:var(--space-4);
}
.badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  animation: blink 2.2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }

.hero h1 {
  font-family:    var(--font-display);
  font-size:      clamp(3rem, 7vw, 5.25rem);
  font-weight:    800;
  line-height:    1.05;
  letter-spacing: -.04em;
  margin-bottom:  var(--space-4);
}
.hero h1 .line-outline {
  color:               transparent;
  -webkit-text-stroke: 1px rgba(0,212,255,.55);
  display: block;
}
.hero-sub {
  font-size:    1.125rem;
  color:        var(--on-surface-muted);
  line-height:  1.8;
  max-width:    580px;
  margin:       0 auto var(--space-6);
  font-weight:  400;
}
.hero-btns {
  display:         flex;
  gap:             var(--space-2);
  justify-content: center;
  flex-wrap:       wrap;
}

/* Metrics strip */
.hero-metrics {
  display:         flex;
  justify-content: center;
  gap:             var(--space-8);
  flex-wrap:       wrap;
  margin-top:      var(--space-8);
  padding-top:     var(--space-8);
  border-top:      1px solid var(--border-subtle);
}
.metric {}
.metric-num {
  font-family:    var(--font-display);
  font-size:      2.25rem;
  font-weight:    800;
  letter-spacing: -.04em;
  line-height:    1;
  /* Powerhouse Metric glow effect from Stitch design system */
  color:          var(--on-surface);
  text-shadow:    0 0 24px rgba(0,212,255,.35);
}
.metric-num .accent { color: var(--primary); }
.metric-label {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color:          var(--on-surface-muted);
  margin-top:     4px;
}

/* ------------------------------------------------------------
   ABOUT SNAPSHOT
   ---------------------------------------------------------- */
.about-snap { background: var(--surface-container-low); }

.about-grid {
  display:     grid;
  grid-template-columns: 1fr 1fr;
  gap:         var(--space-10);
  align-items: center;
}
.about-text p {
  color:        var(--on-surface-muted);
  line-height:  1.85;
  margin-bottom:1.25rem;
  font-size:    1rem;
}

/* 2×2 pillar grid */
.pillar-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1px;
  background:            var(--border-subtle);
  border:                1px solid var(--border-subtle);
  border-radius:         var(--radius-lg);
  overflow:              hidden;
  margin-top:            var(--space-6);
}
.pillar {
  background:  var(--surface-container);
  padding:     var(--space-4);
  transition:  background var(--t-fast);
}
.pillar:hover { background: var(--surface-container-high); }
.pillar-icon  { font-size: 1.5rem; margin-bottom: var(--space-1); }
.pillar h3    { font-size: .875rem; font-weight: 600; margin-bottom: 4px; letter-spacing: .01em; }
.pillar p     { font-size: .8rem; color: var(--on-surface-muted); line-height: 1.6; }

/* Stats cards (right col) */
.about-stats-col {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}
.stat-card {
  padding:       var(--space-4);
  border-radius: var(--radius-xl);
}
.stat-card .stat-label {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color:          var(--primary);
  margin-bottom:  var(--space-1);
}
.stat-card .stat-number {
  font-family:    var(--font-display);
  font-size:      2.75rem;
  font-weight:    800;
  letter-spacing: -.04em;
  line-height:    1;
  text-shadow:    0 0 24px rgba(0,212,255,.25);
}
.stat-card .stat-desc {
  font-size: .8rem;
  color:     var(--on-surface-muted);
  margin-top: 4px;
}

/* ------------------------------------------------------------
   DIVISIONS
   ---------------------------------------------------------- */
.divisions-section { background: var(--surface); }

.div-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-3);
  margin-top:            var(--space-8);
}
.div-card {
  padding:    var(--space-6) var(--space-4);
  position:   relative;
  overflow:   hidden;
  cursor:     default;
}
/* Top glow line on hover */
.div-card::before {
  content:    '';
  position:   absolute;
  top: 0; left: 0; right: 0;
  height:     1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity:    0;
  transition: opacity var(--t-mid);
}
.div-card:hover::before { opacity: 1; }

.div-card-num {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: .15em;
  color:          var(--primary);
  margin-bottom:  var(--space-4);
  opacity:        .6;
}
.div-card-icon {
  width:           48px; height: 48px;
  border:          1px solid var(--border-subtle);
  border-radius:   var(--radius-md);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.4rem;
  margin-bottom:   var(--space-3);
  transition:      border-color var(--t-fast), box-shadow var(--t-fast);
}
.div-card:hover .div-card-icon {
  border-color: var(--border-hover);
  box-shadow:   0 0 16px rgba(0,212,255,.2);
}
.div-card h3 {
  font-family:    var(--font-display);
  font-size:      1.375rem;
  font-weight:    700;
  letter-spacing: -.02em;
  margin-bottom:  4px;
}
.div-tagline {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color:          var(--primary);
  margin-bottom:  var(--space-3);
}
.div-card > p {
  font-size:    .875rem;
  color:        var(--on-surface-muted);
  line-height:  1.8;
  margin-bottom:var(--space-4);
}
.div-services { border-top: 1px solid var(--border-subtle); padding-top: var(--space-3); }
.div-services li {
  font-size:    .8rem;
  color:        var(--on-surface-muted);
  padding:      6px 0;
  border-bottom:1px solid var(--border-subtle);
  display:      flex;
  align-items:  center;
  gap:          8px;
}
.div-services li::before {
  content:       '→';
  color:         var(--primary);
  font-size:     .7rem;
  flex-shrink:   0;
}
.div-outcome {
  margin-top:   var(--space-4);
  padding:      var(--space-2) var(--space-3);
  background:   rgba(0,212,255,.05);
  border-left:  2px solid var(--primary);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:    .8rem;
  color:        var(--on-surface-muted);
}
.div-outcome strong { color: var(--primary); }

/* ------------------------------------------------------------
   PORTFOLIO PREVIEW / GRID
   ---------------------------------------------------------- */
.portfolio-section { background: var(--surface-container-low); }

.port-filter {
  display:   flex;
  gap:       var(--space-1);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.filter-btn {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  background:     transparent;
  border:         1px solid var(--border-subtle);
  color:          var(--on-surface-muted);
  padding:        8px 16px;
  border-radius:  var(--radius-sm);
  cursor:         pointer;
  transition:     all var(--t-fast);
}
.filter-btn:hover,
.filter-btn.active {
  background:   rgba(0,212,255,.1);
  border-color: var(--primary);
  color:        var(--primary);
}

.port-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-3);
}
.port-item {
  border-radius: var(--radius-xl);
  overflow:      hidden;
  position:      relative;
  transition:    transform var(--t-mid), box-shadow var(--t-mid);
}
.port-item:hover {
  transform:  translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,.4);
}
.port-img-wrap {
  position:   relative;
  overflow:   hidden;
  aspect-ratio:4/3;
}
.port-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.port-item:hover .port-img-wrap img { transform: scale(1.06); }
.port-placeholder {
  width: 100%; height: 100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       3.5rem;
}
.port-overlay {
  position:        absolute; inset: 0;
  background:      rgba(19,19,19,.88);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-1);
  opacity:         0;
  transition:      opacity var(--t-mid);
}
.port-item:hover .port-overlay { opacity: 1; }
.port-overlay-label {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color:          var(--primary);
}
.port-overlay-cta {
  font-size:   .875rem;
  color:       var(--on-surface);
  font-weight: 500;
}
.port-info { padding: var(--space-3); background: var(--surface-container); }
.port-tag {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color:          var(--primary);
  margin-bottom:  6px;
  display:        block;
}
.port-info h3 { font-size: .95rem; font-weight: 600; margin-bottom: 4px; letter-spacing: -.01em; }
.port-info h3 a { color: var(--on-surface); transition: color var(--t-fast); }
.port-info h3 a:hover { color: var(--primary); }
.port-info p   { font-size: .8rem; color: var(--on-surface-muted); line-height: 1.55; }
.no-results    { color: var(--on-surface-muted); grid-column: 1/-1; text-align: center; padding: var(--space-8); }

/* ------------------------------------------------------------
   PROCESS
   ---------------------------------------------------------- */
.process-section { background: var(--surface); }

.process-track {
  display:  grid;
  grid-template-columns: repeat(5,1fr);
  gap:      0;
  margin-top: var(--space-10);
  position: relative;
}
.process-track::before {
  content:    '';
  position:   absolute;
  top:        28px; left:12%; right:12%;
  height:     1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity:    .25;
}
.process-step { text-align: center; padding: 0 var(--space-2); }
.step-node {
  width:           56px; height: 56px;
  border:          1px solid var(--border-subtle);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto var(--space-3);
  background:      var(--surface);
  position:        relative; z-index: 1;
  font-family:     var(--font-mono);
  font-size:       11px;
  font-weight:     500;
  letter-spacing:  .1em;
  color:           var(--primary);
  transition:      all var(--t-mid);
}
.process-step:hover .step-node {
  background:   rgba(0,212,255,.1);
  border-color: var(--primary);
  box-shadow:   0 0 20px rgba(0,212,255,.25);
}
.process-step h3 { font-size: .875rem; font-weight: 600; margin-bottom: 6px; letter-spacing: .01em; }
.process-step p  { font-size: .775rem; color: var(--on-surface-muted); line-height: 1.6; }

/* ------------------------------------------------------------
   CTA SECTION
   ---------------------------------------------------------- */
.cta-section {
  background:   var(--surface-container-low);
  border-top:   1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
  text-align:   center;
  padding:      var(--space-20) var(--space-10);
  position:     relative;
  overflow:     hidden;
}
.cta-section::before {
  content:    '';
  position:   absolute;
  top:-50%; left: 50%;
  transform:  translateX(-50%);
  width:      600px; height: 600px;
  background: radial-gradient(circle, rgba(0,212,255,.07) 0%, transparent 70%);
  pointer-events: none;
}
.cta-section h2 {
  font-family:    var(--font-display);
  font-size:      clamp(2rem,4vw,3.25rem);
  font-weight:    700;
  letter-spacing: -.02em;
  margin-bottom:  var(--space-2);
  position:       relative;
}
.cta-section p {
  color:         var(--on-surface-muted);
  font-size:     1.05rem;
  margin-bottom: var(--space-6);
  position:      relative;
}
.cta-section .btn-group {
  display:         flex;
  gap:             var(--space-2);
  justify-content: center;
  flex-wrap:       wrap;
  position:        relative;
}

/* ------------------------------------------------------------
   PAGE HERO (inner pages)
   ---------------------------------------------------------- */
.page-hero {
  padding-top:    calc(var(--nav-h) + var(--space-10));
  padding-bottom: var(--space-10);
  padding-left:   var(--space-10);
  padding-right:  var(--space-10);
  background:     var(--surface);
  position:       relative;
  overflow:       hidden;
}
.page-hero::after {
  content:    '';
  position:   absolute;
  bottom: 0; left: 0; right: 0;
  height:     1px;
  background: linear-gradient(90deg, transparent, var(--border-subtle), transparent);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 60% 80% at 100% 50%, rgba(0,212,255,.06) 0%, transparent 60%);
}

/* ------------------------------------------------------------
   ABOUT PAGE
   ---------------------------------------------------------- */
.about-story-section { background: var(--surface); padding: var(--space-20) var(--space-10); }
.about-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: start;
}
.about-story-text p {
  color:        var(--on-surface-muted);
  line-height:  1.9;
  margin-bottom:1.25rem;
  font-size:    1rem;
}

.mission-vision-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.mv-card {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-xl);
}
.mv-card p {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--on-surface);
  margin-top: var(--space-1);
}

/* Leadership */
.leadership-section { background: var(--surface-container-low); padding: var(--space-20) var(--space-10); }
.leadership-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.leader-card {
  padding:   var(--space-6) var(--space-4);
  position:  relative;
  overflow:  hidden;
}
.leader-card::after {
  content:    '';
  position:   absolute;
  bottom: 0; left: 0; right: 0;
  height:     2px;
  background: linear-gradient(90deg, var(--primary), transparent);
  opacity:    0;
  transition: opacity var(--t-mid);
}
.leader-card:hover::after { opacity: 1; }
.leader-avatar {
  width:           64px; height: 64px;
  border-radius:   50%;
  border:          1px solid var(--border-glow);
  background:      rgba(0,212,255,.08);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-display);
  font-size:       1.25rem;
  font-weight:     700;
  color:           var(--primary);
  margin-bottom:   var(--space-3);
}
.leader-card h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px; }
.leader-role    { font-family: var(--font-mono); font-size: 10px; letter-spacing:.15em; text-transform:uppercase; color:var(--primary); margin-bottom: var(--space-2); display: block; }
.leader-card p  { font-size: .85rem; color: var(--on-surface-muted); line-height: 1.75; }

/* ------------------------------------------------------------
   SERVICES PAGE
   ---------------------------------------------------------- */
.services-section { background: var(--surface); padding-bottom: var(--space-20); }
.service-block {
  display:    grid;
  grid-template-columns: 260px 1fr;
  gap:        var(--space-8);
  padding:    var(--space-10) 0;
  border-top: 1px solid var(--border-subtle);
}
.service-label-col {
  position: sticky;
  top:      calc(var(--nav-h) + var(--space-4));
  height:   fit-content;
}
.service-label-card {
  padding:       var(--space-4);
  border-radius: var(--radius-xl);
}
.service-label-card h3 {
  font-family:    var(--font-display);
  font-size:      1.125rem;
  font-weight:    700;
  letter-spacing: -.02em;
  margin:         var(--space-1) 0 6px;
}
.service-label-card p { font-size: .8rem; color: var(--on-surface-muted); }

.service-main-title {
  font-family:    var(--font-display);
  font-size:      1.75rem;
  font-weight:    700;
  letter-spacing: -.02em;
  margin-bottom:  var(--space-2);
}
.service-main > p {
  color:         var(--on-surface-muted);
  line-height:   1.85;
  margin-bottom: var(--space-6);
  font-size:     1rem;
}
.service-items-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
.sitem {
  padding:       var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  transition:    border-color var(--t-fast);
}
.sitem:hover { border-color: var(--border-hover) !important; }
.sitem h4 { font-size: .9rem; font-weight: 600; margin-bottom: 6px; }
.sitem p  { font-size: .8rem; color: var(--on-surface-muted); line-height: 1.65; }

/* ------------------------------------------------------------
   CONTACT PAGE
   ---------------------------------------------------------- */
.contact-section { background: var(--surface-container-low); padding: var(--space-10) var(--space-10) var(--space-20); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: var(--space-10);
}
.contact-info-col > p {
  color:        var(--on-surface-muted);
  line-height:  1.85;
  margin-bottom:var(--space-6);
}
.contact-detail {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-2);
  margin-bottom:var(--space-4);
}
.cd-icon {
  width: 40px; height: 40px;
  border:          1px solid var(--border-subtle);
  border-radius:   var(--radius-md);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1rem;
  flex-shrink:     0;
  background:      var(--surface-container);
  transition:      border-color var(--t-fast);
}
.contact-detail:hover .cd-icon { border-color: var(--primary); }
.cd-label { font-family:var(--font-mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--primary); margin-bottom:2px; }
.cd-val   { font-size:.9rem; color:var(--on-surface); }
a.cd-val:hover { color: var(--primary); }

.response-badge {
  padding:       var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  margin-top:    var(--space-6);
}
.response-badge .resp-time  { font-size: 1rem; font-weight: 600; color: var(--on-surface); margin-top: 4px; }
.response-badge .resp-note  { font-size: .8rem; color: var(--on-surface-muted); margin-top: 2px; }

/* Contact form */
.contact-form-card {
  padding:       var(--space-6);
  border-radius: var(--radius-xl);
}
.form-header { margin-bottom: var(--space-4); }
.form-header h2 {
  font-family:    var(--font-display);
  font-size:      1.375rem;
  font-weight:    700;
  letter-spacing: -.02em;
  margin-top:     4px;
}

.form-row  { display: grid; grid-template-columns:1fr 1fr; gap:var(--space-2); }
.form-group {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  margin-bottom:  var(--space-2);
}
.form-group label {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color:          var(--on-surface-muted);
}
.form-group input,
.form-group select,
.form-group textarea {
  background:    var(--surface-container);
  border:        1px solid var(--border-subtle);
  border-bottom: 1px solid var(--outline-variant);
  color:         var(--on-surface);
  padding:       12px 14px;
  font-family:   var(--font-body);
  font-size:     .9rem;
  border-radius: var(--radius-sm);
  outline:       none;
  transition:    border-color var(--t-fast), box-shadow var(--t-fast);
  -webkit-appearance: none; appearance: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--outline); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  box-shadow:   0 0 0 1px rgba(0,212,255,.2);
}
.form-group select option { background: var(--surface-container-high); color: var(--on-surface); }
.form-group textarea      { resize: vertical; min-height: 110px; line-height: 1.65; }
.required-mark            { color: var(--primary); }

.form-submit {
  width:          100%;
  background:     var(--primary);
  color:          var(--on-primary);
  padding:        14px;
  font-family:    var(--font-display);
  font-size:      .875rem;
  font-weight:    700;
  letter-spacing: .04em;
  border:         none;
  border-radius:  var(--radius-sm);
  cursor:         pointer;
  transition:     all var(--t-mid);
  margin-top:     var(--space-1);
}
.form-submit:hover    { background: var(--primary-dim); box-shadow: 0 0 24px rgba(0,212,255,.35); }
.form-submit:disabled { opacity: .6; cursor: not-allowed; }

.form-alert {
  padding:       var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size:     .875rem;
  margin-bottom: var(--space-3);
  display:       none;
}
.form-success {
  background:   rgba(0,212,255,.08);
  border:       1px solid rgba(0,212,255,.3);
  color:        var(--primary-soft);
}
.form-error {
  background:   rgba(255,180,171,.08);
  border:       1px solid rgba(255,180,171,.3);
  color:        var(--error);
}

/* ------------------------------------------------------------
   SINGLE PORTFOLIO (CASE STUDY)
   ---------------------------------------------------------- */
.project-hero          { padding-top: calc(var(--nav-h) + var(--space-10)); padding-bottom: var(--space-10); padding-left:var(--space-10); padding-right:var(--space-10); background:var(--surface-container-low); }
.project-division-tag  { font-family:var(--font-mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--primary); display:block; margin-bottom:var(--space-2); }
.project-hero h1       { font-family:var(--font-display); font-size:clamp(2rem,4vw,3.25rem); font-weight:700; letter-spacing:-.02em; margin-bottom:var(--space-2); }
.project-hero .excerpt { font-size:1.05rem; color:var(--on-surface-muted); max-width:640px; line-height:1.8; }

.project-results {
  display:    grid;
  grid-template-columns: repeat(3,1fr);
  gap:        var(--space-2);
  padding:    var(--space-8) var(--space-10);
  background: var(--surface);
}
.result-card { padding:var(--space-4); border-radius:var(--radius-xl); text-align:center; }
.result-num   { font-family:var(--font-display); font-size:2.25rem; font-weight:800; letter-spacing:-.04em; color:var(--primary); text-shadow:0 0 24px rgba(0,212,255,.35); }
.result-label { font-family:var(--font-mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--on-surface-muted); margin-top:4px; }

.project-body { max-width:760px; margin:0 auto; padding:var(--space-10) var(--space-10); }
.project-body h2 { font-family:var(--font-display); font-size:1.5rem; font-weight:700; letter-spacing:-.02em; margin:var(--space-6) 0 var(--space-2); color:var(--on-surface); }
.project-body h2:first-child { margin-top:0; }
.project-body p  { color:var(--on-surface-muted); line-height:1.9; margin-bottom:1.25rem; }

/* ------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */
.site-footer { background:var(--surface-container-low); border-top:1px solid var(--border-subtle); }
.footer-body {
  max-width: var(--container);
  margin:    0 auto;
  padding:   var(--space-10) var(--space-10) var(--space-4);
}
.footer-top {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:                   var(--space-8);
  padding-bottom:        var(--space-8);
  border-bottom:         1px solid var(--border-subtle);
  margin-bottom:         var(--space-4);
}
.footer-logo a,
.footer-logo .site-logo-text {
  font-family:    var(--font-display);
  font-size:      1.375rem;
  font-weight:    800;
  letter-spacing: -.03em;
  color:          var(--on-surface);
  display:        flex;
  align-items:    center;
  margin-bottom:  var(--space-2);
}
.footer-tagline {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color:          var(--primary);
  margin-bottom:  var(--space-2);
}
.footer-desc { font-size:.85rem; color:var(--on-surface-muted); line-height:1.75; max-width:280px; }
.footer-social { display:flex; gap:var(--space-2); margin-top:var(--space-3); }
.footer-social a { color:var(--on-surface-muted); transition:color var(--t-fast); }
.footer-social a:hover { color:var(--primary); }

.footer-col-title {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color:          var(--on-surface);
  margin-bottom:  var(--space-3);
}
.footer-col ul li { margin-bottom: var(--space-1); }
.footer-col ul li a { font-size:.85rem; color:var(--on-surface-muted); transition:color var(--t-fast); }
.footer-col ul li a:hover { color:var(--primary); }

.footer-bottom {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             var(--space-2);
}
.footer-bottom p, .footer-bottom a { font-size:.78rem; color:var(--outline); }
.footer-bottom a:hover { color:var(--primary); }

/* ------------------------------------------------------------
   SCROLL ANIMATIONS
   ---------------------------------------------------------- */
.reveal {
  opacity:    0;
  transform:  translateY(24px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.in-view { opacity:1; transform:translateY(0); }

/* ------------------------------------------------------------
   PORTFOLIO LOADING STATE
   ---------------------------------------------------------- */
.port-loading { display:none; text-align:center; padding:var(--space-8); color:var(--on-surface-muted); font-family:var(--font-mono); font-size:.8rem; letter-spacing:.1em; }

/* ------------------------------------------------------------
   DEFAULT PAGE (fallback)
   ---------------------------------------------------------- */
.default-page-content { max-width:860px; margin:0 auto; padding:var(--space-10); }
.default-page-content h1 { font-family:var(--font-display); font-size:2.5rem; font-weight:700; margin-bottom:var(--space-4); }
.default-page-content p  { color:var(--on-surface-muted); line-height:1.85; margin-bottom:1rem; }

/* ------------------------------------------------------------
   RESPONSIVE — TABLET ≤ 1024px
   ---------------------------------------------------------- */
@media (max-width:1024px) {
  .container   { padding: 0 var(--space-6); }
  section      { padding: var(--space-10) var(--space-6); }
  .nav-inner   { padding: 0 var(--space-6); }
  .nav-menu    { gap: .75rem; }
  .nav-menu li a { font-size: 9px; letter-spacing: .05em; }
  .nav-cta     { display: none; }
  .about-grid            { grid-template-columns: 1fr; }
  .about-stats-col       { flex-direction: row; flex-wrap: wrap; }
  .about-stats-col .stat-card { flex: 1; min-width: 200px; }
  .div-grid              { grid-template-columns: 1fr 1fr; }
  .service-block         { grid-template-columns: 1fr; }
  .service-label-col     { position: static; }
  .leadership-grid       { grid-template-columns: 1fr 1fr; }
  .footer-top            { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .contact-grid          { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   RESPONSIVE — MOBILE ≤ 768px
   ---------------------------------------------------------- */
@media (max-width:768px) {
  :root { --nav-h: 60px; --space-20: 80px; --space-10: 24px; }
  .container   { padding: 0 var(--space-3); }
  section      { padding: var(--space-10) var(--space-3); }

  /* Nav: show hamburger, hide desktop links */
  .hamburger   { display: flex !important; }
  .nav-links   { display: none !important; }

  /* Layout */
  .hero h1              { font-size: clamp(2.25rem,10vw,3rem); }
  .hero-metrics         { gap: var(--space-4); }
  .div-grid             { grid-template-columns: 1fr; }
  .port-grid            { grid-template-columns: 1fr; }
  .process-track        { grid-template-columns: 1fr; gap: var(--space-4); }
  .process-track::before{ display: none; }
  .leadership-grid      { grid-template-columns: 1fr; }
  .service-items-grid   { grid-template-columns: 1fr; }
  .form-row             { grid-template-columns: 1fr; }
  .project-results      { grid-template-columns: 1fr; padding: var(--space-4) var(--space-3); }
  .pillar-grid          { grid-template-columns: 1fr; }
  .footer-top           { grid-template-columns: 1fr; }
  .footer-bottom        { flex-direction: column; text-align: center; }
  .contact-form-card    { padding: var(--space-4); }
  .about-story-grid     { grid-template-columns: 1fr; }
  .page-hero            { padding-left: var(--space-3); padding-right: var(--space-3); }
}