/* ═══════════════════════════════════════════════════════
   STEM Solutions — Kuro-cloned Design System
   Monochrome neutral palette · Fraunces + Manrope
   ═══════════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS ─── */
:root {
  /* Surfaces */
  --bg:         #09090b;
  --bg-card:    #111113;
  --bg-raised:  #18181b;
  --bg-light:   #f4f4f5;
  --bg-cream:   #e8e8ec;

  /* Text */
  --text:       #fafafa;
  --text-mid:   rgba(250,250,250,0.65);
  --text-muted: rgba(250,250,250,0.45);
  --text-dark:  #18181b;
  --text-dark-mid: rgba(24,24,27,0.70);
  --text-dark-muted: rgba(24,24,27,0.55);

  /* Accent (subtle warm gray for the "crema" role) */
  --accent:     #a1a1aa;
  --accent-warm:#d4d4d8;

  /* Borders */
  --border:     rgba(250,250,250,0.10);
  --border-md:  rgba(250,250,250,0.15);
  --border-dark:rgba(24,24,27,0.12);

  /* Radii */
  --r-sm:  0.75rem;
  --r-md:  1.25rem;
  --r-lg:  1.75rem;
  --r-xl:  2rem;
  --r-full:9999px;

  /* Sizing */
  --max-w: 80rem;  /* 1280px */

  /* Shadows */
  --shadow-card:  0 30px 60px -20px rgba(0,0,0,0.55);
  --shadow-badge: 0 24px 50px -20px rgba(0,0,0,0.6);
  --shadow-nav:   0 18px 40px -20px rgba(0,0,0,0.8);

  /* Transitions — spring physics */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --t-fast:  0.35s;
  --t-med:   0.55s;
  --t-slow:  0.75s;

  /* Glassmorphism */
  --glass-dark:   rgba(255,255,255,0.045);
  --glass-dark-h: rgba(255,255,255,0.09);
  --glass-light:  rgba(255,255,255,0.60);
  --glass-light-h:rgba(255,255,255,0.90);
  --glass-blur:   blur(18px) saturate(180%);
  --glass-blur-h: blur(28px) saturate(220%);

  /* Glow shadows */
  --glow-dark:  0 0 0 1px rgba(255,255,255,0.12), 0 24px 60px -12px rgba(0,0,0,0.7), 0 0 40px -8px rgba(255,255,255,0.08);
  --glow-light: 0 0 0 1px rgba(0,0,0,0.08), 0 24px 60px -12px rgba(0,0,0,0.18), 0 0 40px -8px rgba(0,0,0,0.06);
}


/* ─── RESET & BASE ─── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display:block; max-width:100% }
a { color:inherit; text-decoration:none }
ul, ol { list-style:none }
button { font:inherit; cursor:pointer; border:none; background:none; color:inherit }
input { font:inherit }


/* ─── TYPOGRAPHY ─── */
.heading-lg {
  font-family: 'Fraunces', 'Georgia', serif;
  font-weight: 500;
  font-size: clamp(2.1rem, 5vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 100;
}
.heading-sm {
  font-family: 'Fraunces', 'Georgia', serif;
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 100;
}
.eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-dark-muted);
}
.eyebrow-accent { color: var(--accent) }
.section-desc {
  margin-top: 1.25rem;
  font-size: clamp(0.95rem, 1.5vw, 1.125rem);
  line-height: 1.7;
  color: var(--text-mid);
}


/* ─── LAYOUT ─── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width:640px) { .container { padding:0 2rem } }

.section-dark {
  background: var(--bg);
  color: var(--text);
  padding: 4rem 0;
}
.section-light {
  background: var(--bg-light);
  color: var(--text-dark);
  padding: 4rem 0;
}
@media (min-width:1024px) {
  .section-dark, .section-light { padding: 5.5rem 0 }
}
.section-top {
  display:flex; flex-direction:column; gap:2rem;
}
@media (min-width:1024px) {
  .section-top { flex-direction:row; align-items:flex-end; justify-content:space-between }
}
.section-top-text { max-width: 42rem }


/* ─── BUTTONS ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--r-full);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  transition: all 0.25s var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--text);
  color: var(--bg);
}
.btn-primary:hover { background: #fff }
.btn-outline {
  border: 1px solid var(--border-md);
  color: var(--text);
}
.btn-outline:hover { background: rgba(250,250,250,0.08) }
.btn-outline-light {
  border: 1px solid var(--border-md);
  color: var(--text);
}
.btn-outline-light:hover { background: rgba(250,250,250,0.08) }
.btn-card {
  width: 100%;
  background: var(--text);
  color: var(--bg);
}
.btn-card:hover { background: #fff }


/* ═══════════════════════════════════════════════════════
   NAVIGATION — Kuro-style sticky glassmorphism bar
   ═══════════════════════════════════════════════════════ */
.nav-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 0.75rem 0.75rem 0;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
  pointer-events: auto;
}
.nav-bar {
  background:rgba(9,9,11,0.44);
  border-color:rgba(255,255,255,0.20);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  box-shadow:0 12px 40px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.10);
}
.nav-header.scrolled .nav-bar {
  background:rgba(9,9,11,0.58);
  backdrop-filter:blur(26px);
  -webkit-backdrop-filter:blur(26px);
}
.nav-header .nav-bar {
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.nav-header.scrolled .nav-bar {
  background: rgba(9,9,11,0.92);
  box-shadow: var(--shadow-nav);
}
@media (min-width:640px) { .nav-header { padding:0.75rem 1.5rem 0 } }

.nav-bar {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: rgba(9,9,11,0.80);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  box-shadow: var(--shadow-nav);
  color: var(--text);
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.625rem;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variation-settings: "SOFT" 100;
}
.nav-logo-img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  border-radius: 0.375rem;
  filter: brightness(0) invert(1);
}
.nav-links {
  display: none;
  align-items: center;
  gap: 0.25rem;
}
@media (min-width:1024px) { .nav-links { display:flex } }
.nav-links a {
  border-radius: var(--r-full);
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-mid);
  transition: all 0.2s;
}
.nav-links a:hover {
  background: rgba(250,250,250,0.07);
  color: var(--text);
}
.nav-actions { display:flex; align-items:center; gap:0.5rem }
.nav-cta {
  display: none;
  border-radius: var(--r-full);
  background: var(--text);
  color: var(--bg);
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background 0.2s;
}
.nav-cta:hover { background:#fff }
@media (min-width:640px) { .nav-cta { display:inline-flex } }

.nav-menu-btn {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  color: var(--text-mid);
  transition: all 0.2s;
  background: rgba(250,250,250,0.04);
}
.nav-menu-btn:hover {
  background: rgba(250,250,250,0.08);
  color: var(--text);
}
@media (min-width:1024px) { .nav-menu-btn { display:none } }


/* ─── MOBILE DRAWER ─── */
.mobile-drawer {
  position: fixed; inset:0; z-index:200;
  pointer-events:none;
  visibility:hidden;
}
.mobile-drawer.open {
  pointer-events:auto;
  visibility:visible;
}
.drawer-overlay {
  position:absolute; inset:0;
  background:rgba(0,0,0,0.6);
  opacity:0;
  transition:opacity 0.35s;
}
.mobile-drawer.open .drawer-overlay { opacity:1 }
.drawer-panel {
  position:absolute; top:0; right:0;
  width:min(18rem,78vw); height:100%;
  background:var(--bg-card);
  border-left:1px solid var(--border);
  padding:1.125rem;
  overflow-y:auto;
  translate:100% 0;
  transition:translate 0.35s var(--ease);
}
.mobile-drawer.open .drawer-panel { translate:0 0 }
.drawer-header {
  display:flex; align-items:center; justify-content:space-between;
  gap:0.5rem;
}
.drawer-brand {
  display:flex; align-items:center; gap:0.5rem;
  width:max-content;
  font-family:'Fraunces', serif;
  font-size:1.625rem; font-weight:600;
  letter-spacing:-0.04em; line-height:1;
}
.drawer-logo-img {
  width:2rem; height:2rem;
  object-fit:contain; border-radius:0.375rem;
  filter:brightness(0) invert(1);
}
.drawer-close {
  display:grid; place-items:center;
  width:2.5rem; height:2.5rem;
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  color:var(--text-mid);
  transition:color 0.2s;
}
.drawer-close:hover { color:var(--text) }
.drawer-nav {
  display:flex; flex-direction:column; gap:0.5rem;
  margin-top:1.25rem;
}
.drawer-nav a {
  padding:0.625rem 0.75rem;
  border-radius:var(--r-sm);
  font-size:0.9375rem; font-weight:500;
  color:var(--text-mid);
  text-align:center;
  transition:all 0.2s;
}
.drawer-nav a:hover { background:rgba(250,250,250,0.06); color:var(--text) }
.drawer-cta {
  margin-top:0.5rem;
  background:var(--text) !important;
  color:var(--bg) !important;
  text-align:center;
  font-weight:600 !important;
  border-radius:var(--r-full) !important;
}
.drawer-cta:hover { background:#fff !important }


/* ═══════════════════════════════════════════════════════
   HERO — Full-screen video with overlay text
   ═══════════════════════════════════════════════════════ */
.hero {
  position: relative;
  width: 100%;
  min-height: 110svh;
  min-height: 110vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 60% center;
  transform: scale(1.05);
  z-index: 1;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(9,9,11,0.35) 0%,
    rgba(9,9,11,0.20) 40%,
    rgba(9,9,11,0.50) 80%,
    rgba(9,9,11,0.85) 100%
  );
  z-index: 2;
}
.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 1.25rem;
  max-width: 52rem;
  animation: heroFadeIn 1s var(--ease) both;
}
@keyframes heroFadeIn {
  from { opacity:0; translate:0 1.5rem }
  to   { opacity:1; translate:0 0 }
}
.hero-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--text);
  text-shadow: 0 6px 40px rgba(0,0,0,0.5);
  font-variation-settings: "SOFT" 100;
}
.hero-word {
  display: inline-block;
  opacity: 0;
  animation: wordReveal 0.7s var(--ease) forwards;
  animation-delay: calc(250ms + var(--i) * 120ms);
}
@keyframes wordReveal {
  from { opacity:0; translate:0 0.8em }
  to   { opacity:1; translate:0 0 }
}
.hero-sub {
  margin-top: 1.5rem;
  font-size: clamp(0.95rem, 1.8vw, 1.25rem);
  color: rgba(250,250,250,0.65);
  line-height: 1.6;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  animation: heroFadeIn 1s 0.6s var(--ease) both;
}
.hero-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  animation: heroFadeIn 1s 0.85s var(--ease) both;
}
.hero-scroll {
  position: absolute;
  bottom: 1.5rem;
  right: 1.25rem;
  z-index: 10;
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-mid);
  animation: heroFadeIn 1s 1.2s var(--ease) both;
}
@media (min-width:640px) { .hero-scroll { display:flex; right:2rem; bottom:2rem } }
.scroll-cue {
  display: grid;
  place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: var(--r-full);
  border: 1px solid rgba(250,250,250,0.2);
  animation: scrollBounce 2s infinite;
}
@keyframes scrollBounce {
  0%,100% { translate:0 0 }
  50%     { translate:0 4px }
}


/* ═══════════════════════════════════════════════════════
   MARQUEE — Infinite scroll ticker
   ═══════════════════════════════════════════════════════ */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
  background: var(--bg-light);
  color: var(--text-dark);
  padding: 1.125rem 0;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 30s linear infinite;
}
@keyframes marqueeScroll {
  to { translate: calc(-100% / 3) 0 }
}
.marquee-list {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.marquee-list li {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-right: 1.5rem;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variation-settings: "SOFT" 100;
}
@media (min-width:640px) { .marquee-list li { font-size:1.875rem } }
.marquee-sep { color: var(--text-dark-muted); flex-shrink:0 }


/* ═══════════════════════════════════════════════════════
   STORY — Two-column About section (light bg)
   ═══════════════════════════════════════════════════════ */
.grid-story {
  display: grid;
  gap: 3.5rem;
  align-items: center;
}
@media (min-width:1024px) {
  .grid-story { grid-template-columns: 5fr 7fr; gap: 4rem }
}
.story-image { position: relative }
.story-img-wrap {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--r-xl);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.35);
  background: #e4e4e7;
  display: grid;
  place-items: center;
}
.story-img {
  width: 55%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.15));
}
.story-badge {
  position: absolute;
  bottom: -1.5rem;
  right: 1rem;
  background: var(--bg);
  color: var(--text);
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  box-shadow: var(--shadow-badge);
}
@media (min-width:640px) { .story-badge { right:2rem } }
.badge-big {
  font-family: 'Fraunces', serif;
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1;
  font-variation-settings: "SOFT" 100;
}
.badge-small {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--text-mid);
}
.story-text .eyebrow { margin-bottom: 1rem }
.story-body {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.story-body p {
  font-size: clamp(0.95rem, 1.3vw, 1.125rem);
  line-height: 1.7;
  color: var(--text-dark-mid);
}
.stats-row {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 1rem;
  border-top: 1px solid var(--border-dark);
  padding-top: 2rem;
}
.stat { min-width:0; display:flex; flex-direction:column-reverse; align-items:center; gap:0.5rem; text-align:center }
.stat-num {
  font-family: 'Fraunces', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variation-settings: "SOFT" 100;
}
.stat-label {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-dark-muted);
  max-width:100%;
  text-wrap:balance;
}
@media (min-width:640px) { .stat-label { font-size:0.875rem } }


/* ═══════════════════════════════════════════════════════
   SERVICES — Card grid (dark bg, like Kuro's menu)
   ═══════════════════════════════════════════════════════ */
.services-grid {
  margin-top: 3.5rem;
  display: grid;
  gap: 1.25rem;
}
@media (min-width:640px)  { .services-grid { grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px) { .services-grid { grid-template-columns:repeat(4,1fr) } }

/* ─── SERVICE CARDS — frosted glass ─── */
.service-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--glass-dark);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  will-change: transform, box-shadow, background;
  transition:
    transform      var(--t-med) var(--ease-spring),
    box-shadow     var(--t-med) var(--ease-spring),
    background     var(--t-med) var(--ease-out),
    border-color   var(--t-med) var(--ease-out),
    color          var(--t-med) var(--ease-out),
    backdrop-filter var(--t-slow) var(--ease-out);
}
.service-card:hover {
  transform: translateY(-6px) scale(1.015);
  background: rgba(255,255,255,0.96);
  backdrop-filter: var(--glass-blur-h);
  -webkit-backdrop-filter: var(--glass-blur-h);
  border-color: rgba(255,255,255,0.9);
  color: var(--bg);
  box-shadow: var(--glow-dark);
}
.service-card:hover .card-desc,
.service-card:hover .card-tags li { color: rgba(9,9,11,0.60); transition: color var(--t-med) var(--ease-out) }
.service-card:hover .card-tags li { border-color: rgba(9,9,11,0.18) }
.service-card:hover .card-number  { background: rgba(9,9,11,0.07); border-color: rgba(9,9,11,0.12); color: var(--bg) }
.service-card:hover .card-icon    { border-color: rgba(9,9,11,0.15); background: rgba(9,9,11,0.05); color: var(--bg) }
.service-card:hover .btn-card     { background: var(--bg); color: var(--text) }

.card-icon-area {
  position: relative;
  padding: 1.5rem 1.25rem 3rem;
  background: linear-gradient(135deg, rgba(250,250,250,0.03) 0%, transparent 60%);
}
.card-number {
  position: absolute;
  top: 1.25rem; left: 1.25rem;
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--r-full);
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.card-icon {
  display: grid;
  place-items: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: var(--r-md);
  border: 1px solid var(--border-md);
  background: rgba(250,250,250,0.04);
  margin: 1rem auto 0;
  color: var(--accent-warm);
}

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 1.25rem 1.25rem;
}
@media (min-width:640px) { .card-body { padding:0 1.5rem 1.5rem } }

.card-title {
  font-family: 'Fraunces', serif;
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-variation-settings: "SOFT" 100;
}
.card-desc {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-mid);
}
.card-tags {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.card-tags li {
  border-radius: var(--r-full);
  border: 1px solid var(--border-md);
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  color: var(--text-mid);
}
.card-body .btn-card {
  margin-top: auto;
  padding-top: 1.5rem;
}

/* Deliverables bar (like Kuro's "Make it yours" bar) */
.deliverables-bar {
  margin-top: 4rem;
  display: grid;
  gap: 2rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: rgba(250,250,250,0.02);
  padding: 1.5rem;
}
@media (min-width:640px) {
  .deliverables-bar { grid-template-columns:repeat(3,1fr); padding:2rem }
}
@media (min-width:1024px) {
  .deliverables-bar { grid-template-columns:1.4fr repeat(3,1fr); align-items:center }
  .deliv-intro { grid-column:1 }
}
.deliv-intro h3 { color: var(--text) }
.deliv-sub {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-mid);
}
.deliv-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}
.deliv-value {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: rgba(250,250,250,0.85);
}

/* Full deliverables grid */
.deliv-grid {
  margin-top: 2rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width:640px)  { .deliv-grid { grid-template-columns: repeat(3, 1fr) } }
@media (min-width:1024px) { .deliv-grid { grid-template-columns: repeat(5, 1fr) } }

/* ─── DELIVERABLE CARDS — frosted glass ─── */
.deliv-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,0.07);
  background: var(--glass-dark);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: 1rem;
  will-change: transform, box-shadow, background;
  transition:
    transform      var(--t-med) var(--ease-spring),
    box-shadow     var(--t-med) var(--ease-spring),
    background     var(--t-med) var(--ease-out),
    border-color   var(--t-med) var(--ease-out),
    color          var(--t-med) var(--ease-out);
}
@media (min-width:640px) {
  .deliv-card { padding:0.875rem; gap:0.375rem }
  .deliv-icon { width:2.25rem; height:2.25rem }
  .deliv-card h4 { font-size:0.9375rem }
  .deliv-card p { font-size:0.75rem; line-height:1.5 }
}
.deliv-card:hover {
  transform: translateY(-6px) scale(1.02);
  background: rgba(255,255,255,0.96);
  backdrop-filter: var(--glass-blur-h);
  -webkit-backdrop-filter: var(--glass-blur-h);
  border-color: rgba(255,255,255,0.88);
  color: var(--bg);
  box-shadow: var(--glow-dark);
}
.deliv-card:hover .deliv-icon { border-color: rgba(9,9,11,0.15); background: rgba(9,9,11,0.05); color: var(--bg) }
.deliv-card:hover h4 { color: var(--bg) }
.deliv-card:hover p  { color: rgba(9,9,11,0.60) }
.deliv-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-md);
  background: rgba(250,250,250,0.04);
  color: var(--accent-warm);
  flex-shrink: 0;
}
.deliv-card h4 {
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variation-settings: "SOFT" 100;
}
.deliv-card p {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-mid);
}


/* ═══════════════════════════════════════════════════════
   PROCESS — 4-column step cards (light bg)
   ═══════════════════════════════════════════════════════ */
.process-grid {
  margin-top: 3.5rem;
  display: grid;
  gap: 1.25rem 1.25rem;
}
@media (min-width:640px) { .process-grid { grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .process-grid { grid-template-columns:repeat(4,1fr) } }

/* ─── PROCESS STEPS — frosted glass (light bg) ─── */
.process-step { display:flex; flex-direction:column }
.step-visual {
  position: relative;
  aspect-ratio: 5/4;
  border-radius: 1.5rem;
  background: var(--glass-light);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow: 0 8px 32px -8px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.8);
  display: grid;
  place-items: center;
  overflow: hidden;
  will-change: transform, box-shadow, background;
  transition:
    transform      var(--t-med) var(--ease-spring),
    background     var(--t-med) var(--ease-out),
    backdrop-filter var(--t-slow) var(--ease-out),
    box-shadow     var(--t-med) var(--ease-spring),
    border-color   var(--t-med) var(--ease-out);
}
.process-step:hover .step-visual {
  transform: translateY(-8px) scale(1.03);
  background: rgba(9,9,11,0.92);
  backdrop-filter: var(--glass-blur-h);
  -webkit-backdrop-filter: var(--glass-blur-h);
  border-color: rgba(9,9,11,0.8);
  box-shadow: var(--glow-light), 0 40px 80px -20px rgba(0,0,0,0.4);
}
.process-step:hover .step-num  { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.2); color: var(--text) }
.process-step:hover .step-icon { color: rgba(250,250,250,0.7); transform: scale(1.18) }
.step-num {
  position: absolute;
  top: 1rem; left: 1rem;
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--r-full);
  background: var(--bg);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.step-icon {
  color: var(--text-dark-muted);
  width: 3.5rem;
  height: 3.5rem;
  transition: transform 0.5s var(--ease), color 0.4s var(--ease);
}
.process-step:hover .step-title { color: var(--text-dark) }
@media (hover:none) {
  .process-step:hover .step-visual {
    transform:none;
    background:var(--glass-light);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    border-color:rgba(255,255,255,0.75);
    box-shadow:0 8px 32px -8px rgba(0,0,0,0.12),inset 0 1px 0 rgba(255,255,255,0.8);
  }
  .process-step:hover .step-num { background:var(--bg); border-color:var(--border); color:var(--text) }
  .process-step:hover .step-icon { color:var(--text-dark-muted); transform:none }
  .process-step:hover .step-title { color:inherit }
}

.step-title {
  margin-top: 1rem;
  font-family: 'Fraunces', serif;
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 100;
}
.step-desc {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-dark-mid);
}
@media (min-width:640px) {
  .step-visual { aspect-ratio: 4/3 }
  .step-desc { font-size:0.875rem }
}


/* ═══════════════════════════════════════════════════════
   DOMAINS — Two-column cards with contour bg (dark)
   ═══════════════════════════════════════════════════════ */
.domains-grid {
  margin-top: 3.5rem;
  display: grid;
  gap: 1.25rem;
}
@media (min-width:1024px) { .domains-grid { grid-template-columns:repeat(2,1fr) } }

/* ─── DOMAIN CARDS — frosted glass ─── */
.domain-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--glass-dark);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: 1.75rem;
  will-change: transform, box-shadow, background;
  transition:
    transform      var(--t-med) var(--ease-spring),
    box-shadow     var(--t-med) var(--ease-spring),
    background     var(--t-med) var(--ease-out),
    border-color   var(--t-med) var(--ease-out),
    color          var(--t-med) var(--ease-out),
    backdrop-filter var(--t-slow) var(--ease-out);
}
@media (min-width:640px) { .domain-card { padding:2.5rem } }
/* Keep the four project-domain cards compact across screen sizes. */
.domain-card { padding:1.5rem }
@media (min-width:640px) { .domain-card { padding:2rem } }
.domain-card:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.95);
  backdrop-filter: var(--glass-blur-h);
  -webkit-backdrop-filter: var(--glass-blur-h);
  border-color: rgba(255,255,255,0.85);
  color: var(--bg);
  box-shadow: var(--glow-dark);
}
.domain-card:hover .domain-sub        { color: rgba(9,9,11,0.55) }
.domain-card:hover .domain-desc       { color: rgba(9,9,11,0.60) }
.domain-card:hover .domain-meta       { border-color: rgba(9,9,11,0.10) }
.domain-card:hover .domain-meta dt    { color: rgba(9,9,11,0.45) }
.domain-card:hover .domain-meta dd    { color: var(--bg) }
.domain-card:hover .domain-badge      { border-color: rgba(9,9,11,0.18); background: rgba(9,9,11,0.05) }
.domain-card:hover .eyebrow-accent    { color: rgba(9,9,11,0.45) }

/* Subtle radial contour bg */
.domain-card::before {
  content: '';
  position: absolute;
  width: 22rem; height: 22rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250,250,250,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.domain-card:nth-child(odd)::before  { right:-6rem; bottom:-6rem }
.domain-card:nth-child(even)::before { left:-6rem; top:-6rem }

.domain-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.domain-name {
  margin-top: 0.75rem;
  font-family: 'Fraunces', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  font-variation-settings: "SOFT" 100;
}
.domain-sub {
  margin-top: 0.25rem;
  color: var(--text-mid);
}
.domain-badge {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: var(--r-full);
  border: 1px solid var(--border-md);
  background: rgba(250,250,250,0.04);
  flex-shrink: 0;
}
.domain-badge img, .domain-badge svg {
  width: 1.5rem; height: 1.5rem;
}
.domain-desc {
  margin-top: 2rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-mid);
  max-width: 28rem;
}
@media (min-width:640px) { .domain-desc { font-size:0.9375rem } }

.domain-meta {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}
.domain-meta dt {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}
.domain-meta dd {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
}


/* ═══════════════════════════════════════════════════════
   WHY US — 4-card grid (light bg)
   ═══════════════════════════════════════════════════════ */
.why-grid {
  margin-top: 3.5rem;
  display: grid;
  gap: 1.25rem;
}
@media (min-width:640px) { .why-grid { grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .why-grid { grid-template-columns:repeat(4,1fr) } }

/* ─── WHY-US CARDS — frosted glass (light bg) ─── */
.why-card {
  border-radius: var(--r-lg);
  background: var(--glass-light);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,0.75);
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 4px 24px -8px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9);
  will-change: transform, box-shadow, background;
  transition:
    transform      var(--t-med) var(--ease-spring),
    box-shadow     var(--t-med) var(--ease-spring),
    background     var(--t-med) var(--ease-out),
    border-color   var(--t-med) var(--ease-out),
    color          var(--t-med) var(--ease-out),
    backdrop-filter var(--t-slow) var(--ease-out);
}
.why-card:hover {
  transform: translateY(-8px) scale(1.025);
  background: rgba(9,9,11,0.90);
  backdrop-filter: var(--glass-blur-h);
  -webkit-backdrop-filter: var(--glass-blur-h);
  border-color: rgba(9,9,11,0.80);
  color: var(--text);
  box-shadow: var(--glow-light), 0 40px 80px -20px rgba(0,0,0,0.45);
}
.why-card:hover h3           { color: var(--text) }
.why-card:hover p            { color: var(--text-mid) }
.why-card:hover .why-metric  { color: var(--text) }
.why-card:hover .why-metric svg { color: var(--text) }
.why-metric {
  font-family: 'Fraunces', serif;
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variation-settings: "SOFT" 100;
  color: var(--text-dark);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
}
.why-metric svg { color: var(--text-dark) }
.why-card h3 {
  font-family: 'Fraunces', serif;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 100;
}
.why-card p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-dark-mid);
}


/* ═══════════════════════════════════════════════════════
   CONTACT — CTA card (dark bg)
   ═══════════════════════════════════════════════════════ */
.section-contact { padding-bottom:1.5rem }
@media (min-width:1024px) { .section-contact { padding-bottom:2rem } }

.contact-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--bg-light);
  color: var(--text-dark);
  padding: 3rem 1.5rem;
}
@media (min-width:640px) { .contact-card { padding:4rem 3rem } }
@media (min-width:1024px){ .contact-card { padding:5rem 4rem } }

.contact-content { max-width:38rem; position:relative }
.contact-content .eyebrow { color:var(--text-dark-muted) }
.contact-content .heading-lg { margin-top:1rem; color:var(--text-dark) }
.contact-desc {
  margin-top: 1.25rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-dark-mid);
}
@media (min-width:640px) { .contact-desc { font-size:1.0625rem } }

.contact-methods {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width:1024px) {
  #contact .contact-card {
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(300px,0.9fr);
    align-items:center;
    gap:clamp(2rem,5vw,5rem);
  }
  #contact .contact-content { max-width:none }
  #contact .contact-methods { margin-top:0; min-width:0 }
}
.contact-method {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.method-icon {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text);
  flex-shrink: 0;
}
.contact-method strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
}
.method-values {
  margin-top: 0.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.method-values a {
  font-size: 0.875rem;
  color: var(--text-dark-mid);
  transition: color 0.2s;
  overflow-wrap:anywhere;
}
@media (max-width:639px) {
  #contact .method-values a[href^="mailto:"] { font-size:0.875rem }
}
.method-values a:hover { color: var(--text-dark) }


/* ═══════════════════════════════════════════════════════
   FOOTER — Multi-column (Kuro-matched)
   ═══════════════════════════════════════════════════════ */
.footer {
  border-top: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.footer-grid {
  display: grid;
  gap: 3rem;
  padding-top: 2rem;
  padding-bottom: 0;
}
@media (min-width:768px) { .footer-grid { grid-template-columns:1.4fr 1fr 1fr } }

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Fraunces', serif;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variation-settings: "SOFT" 100;
}
.footer-logo-img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  border-radius: 0.375rem;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}
.footer-tagline {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-mid);
  max-width: 20rem;
}
.footer-heading {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}
.footer-nav ul {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.footer-nav a {
  font-size: 0.875rem;
  color: var(--text-mid);
  transition: color 0.2s;
}
.footer-nav a:hover { color: var(--text) }

.footer-touch p {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-mid);
  max-width: 20rem;
}
.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  transition: color 0.2s;
}
.footer-link:hover { color: var(--text) }

.footer-bottom {
  margin-top: 3.5rem;
  display: flex;
  flex-direction: column-reverse;
  gap: 1rem;
  border-top: 1px solid var(--border);
  padding: 1.5rem 0 2.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}
@media (min-width:640px) {
  .footer-bottom { flex-direction:row; align-items:center; justify-content:space-between }
}
.back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: color 0.2s;
}
.back-to-top:hover { color: var(--text) }


/* ═══════════════════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
   ═══════════════════════════════════════════════════════ */
.js-reveal-enabled [data-reveal] {
  opacity: 0;
  translate: 0 1.5rem;
  transition: opacity 0.7s var(--ease), translate 0.7s var(--ease);
}
.js-reveal-enabled [data-reveal="image"] { translate: 0 2rem }
.js-reveal-enabled [data-reveal].revealed {
  opacity: 1;
  translate: 0 0;
}

/* Word-by-word heading reveal */
.js-reveal-enabled [data-reveal="words"] {
  opacity: 1;
  translate: none;
  transition: none;
}
.js-reveal-enabled .word-reveal {
  display: inline-block;
  opacity: 0;
  translate: 0 0.6em;
  transition: opacity 0.55s var(--ease), translate 0.55s var(--ease);
  transition-delay: calc(var(--wi) * 70ms);
}
.js-reveal-enabled .words-visible .word-reveal {
  opacity: 1;
  translate: 0 0;
}


/* ═══════════════════════════════════════════════════════
   RESPONSIVE POLISH
   ═══════════════════════════════════════════════════════ */
@media (max-width:639px) {
  .hero { min-height:97vh }
  .hero-video { object-position: 70% center; transform: scale(1.3) }
  .hero-actions .btn { width:100%; justify-content:center }
  .stats-row { gap:0.5rem }
  .stat-label { font-size:0.6875rem }
}

/* Requested layout refinements: domains before process, centered sections, visible glass. */
main { display:flex; flex-direction:column }
main > #hero { order:0 }
main > .marquee { order:1 }
main > #project-domain { order:2 }
main > #our-services { order:3 }
main > #deliverables { order:4 }
main > #how-it-works { order:5 }
main > #our-story { order:6 }
main > #why-choose-us { order:7 }
main > #contact { order:8 }

.container { margin-inline:auto }
.section-top-text,
.section-top-text > *,
.section-desc { margin-inline:auto; text-align:center }
#how-it-works .section-top-text,
#how-it-works .section-top-text > *,
#how-it-works .section-desc { margin-left:0; margin-right:0; text-align:left }
.domains-grid,
.process-grid,
.deliv-grid { margin-inline:auto }

.hero {
  width:100vw;
  height:96vh;
  min-height:96vh;
  margin-inline:0;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.hero-video {
  left:0;
  right:0;
  width:100%;
  height:100%;
  margin-inline:auto;
  object-position:72% center;
  transform:scale(1.22);
  text-align:center;
}
.domain-card,
.deliv-card {
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.20);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 20px 45px rgba(0,0,0,0.24);
}
@media (min-width:640px) {
  .hero-video { transform:scale(1.10) }
}
@media (max-width:639px) {
  .hero {
    flex:0 0 auto;
    width:100vw;
    height:97vh;
    min-height:97vh;
    margin-inline:0;
  }
  .hero-video { object-position:center center; transform:scale(1.3) }
}

/* Final overrides: slightly smaller desktop hand and clearly visible frosted nav. */
@media (min-width:640px) {
  .hero-video {
    inset:0;
    width:100%;
    height:100%;
    transform:scale(1.05);
    object-position:72% 54%;
  }
}
.nav-header .nav-bar,
.nav-header.scrolled .nav-bar {
  background:rgba(0,0,0,0.70);
  border:1px solid rgba(255,255,255,0.22);
  backdrop-filter:blur(32px) saturate(155%);
  -webkit-backdrop-filter:blur(32px) saturate(155%);
  box-shadow:0 10px 36px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.24);
  color:#fff;
}
.nav-bar .nav-brand,
.nav-bar .nav-links a,
.nav-bar .nav-links a,
.nav-bar .nav-menu-btn { color:#fff; }
.nav-bar .nav-links a:hover { color:#fff; background:rgba(255,255,255,0.12); }
.nav-bar .nav-menu-btn { border-color:rgba(255,255,255,0.22); background:rgba(255,255,255,0.08); }
.nav-bar .nav-cta { background:#fff; color:#111; }
html { scroll-padding-top:6rem }
#why-choose-us .why-card:last-child .why-metric { color:#a1a1aa; filter:grayscale(1) }

/* Keep every page section full width; constrain only its inner content. */
main { display:flex; flex-direction:column; width:100%; min-width:0; align-items:stretch }
main > section,
main > .marquee { box-sizing:border-box; width:100%; max-width:none; min-width:0; margin-inline:0; flex:0 0 100% }
.section-dark,
.section-light { box-sizing:border-box; width:100%; max-width:none; margin-inline:0 }
.section-dark > .container,
.section-light > .container { width:100%; max-width:var(--max-w); margin-inline:auto }
#our-story { background:#09090b; color:#fafafa }
#our-story .eyebrow,
#our-story .story-body p,
#our-story .stat-label { color:rgba(250,250,250,0.72) }
#our-story .stats-row { border-color:rgba(255,255,255,0.18) }
#our-services { background:#fff; color:#111 }
#our-services .eyebrow,
#our-services .section-desc,
#our-services .service-desc,
#our-services .card-desc { color:rgba(17,17,17,0.68) }
#our-services .service-card {
  color:#111;
  background:#f4f4f5;
  border:1px solid rgba(17,17,17,0.16);
  box-shadow:0 16px 36px rgba(17,17,17,0.12),inset 0 1px 0 rgba(255,255,255,0.96);
}
#our-services .card-number,
#our-services .card-icon {
  color:#5b4ad5;
  background:rgba(91,74,213,0.12);
  border-color:rgba(91,74,213,0.24);
}
#our-services .card-title { color:#111 }
#our-services .card-desc,
#our-services .card-tags li { color:rgba(17,17,17,0.68) }
#our-services .btn-outline-light { color:#111; border-color:rgba(17,17,17,0.3) }
.deliv-icon,
.domain-badge {
  color:#6657d8;
  background:rgba(102,87,216,0.13);
  border:1px solid rgba(102,87,216,0.25);
}
.hero-actions {
  position:absolute;
  z-index:12;
  left:50%;
  bottom:clamp(1.25rem,3vh,2.25rem);
  width:max-content;
  max-width:calc(100% - 2rem);
  margin:0;
  transform:translateX(-50%);
  gap:0.75rem;
}
.hero-content {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:100%;
  max-width:none;
}
@media (min-width:640px) {
  main > section,
  main > .marquee { box-sizing:border-box; width:100%; max-width:none; flex:0 0 100%; margin-inline:0 }
  main > #hero { width:100%; height:100vh; min-height:100vh }
}
@media (max-width:639px) {
  main > section,
  main > .marquee { width:100%; flex-basis:100% }
  main > #hero { width:100%; height:97vh; min-height:97vh; margin-inline:0 }
  .hero-actions { width:calc(100% - 2rem); bottom:1rem; flex-direction:column; gap:0.625rem }
  .hero-copy { width:100%; transform:translateY(-1.5rem) }
}

.glass-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.38), rgba(255,255,255,0.16));
  backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  box-shadow: 
    0 12px 34px rgba(0, 0, 0, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(255, 255, 255, 0.22);
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.9),
    transparent
  );
}
.glass-card:hover {
  background:linear-gradient(135deg,rgba(255,255,255,0.46),rgba(255,255,255,0.22));
  border-color:rgba(255,255,255,0.72);
}
.hero-audience {
  margin-top:0.55rem;
  color:rgba(250,250,250,0.78);
  font-size:clamp(0.78rem,1.2vw,0.95rem);
  font-weight:500;
  letter-spacing:0.035em;
}
@media (min-width:640px) {
  .hero-content {
    justify-content:flex-end;
    padding:0 1.25rem clamp(6.5rem,11vh,8.5rem);
  }
}
@media (max-width:639px) {
  .hero-audience { max-width:19rem; line-height:1.5 }
}
.domain-price-badge {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:0.3rem 0.65rem;
  width:max-content;
  max-width:100%;
  margin:0 auto 1.25rem;
  padding:0.45rem 0.85rem;
  border:1px solid rgba(255,255,255,0.22);
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  color:rgba(250,250,250,0.78);
  text-align:center;
  text-transform:uppercase;
  letter-spacing:0.11em;
  font-size:0.6rem;
  line-height:1.35;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.domain-price-badge strong {
  color:#fff;
  font-family:'Fraunces',serif;
  font-size:1.15rem;
  font-weight:500;
  letter-spacing:-0.02em;
  white-space:nowrap;
}
.domain-price-note { color:#c7c7cf; font-weight:700 }
.story-badge { left:50%; right:auto; transform:translateX(-50%) }
#contact .contact-card { background:transparent; color:var(--text); border:1px solid var(--border) }
#contact .contact-content .eyebrow { color:var(--text-mid) }
#contact .contact-content .heading-lg,
#contact .contact-method strong { color:var(--text) }
#contact .contact-desc,
#contact .method-values a { color:var(--text-mid) }
#contact .method-values a:hover,
#contact .method-values a:focus-visible {
  color:#fff;
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,0.72);
  text-underline-offset:4px;
}
#contact .method-icon { background:rgba(255,255,255,0.10); color:var(--text); border:1px solid var(--border-md) }
/* Compact vertical rhythm across content sections. */
.section-dark,
.section-light { padding-block:3rem }
#contact.section-contact { padding-bottom:0.75rem }
#deliverables .deliv-card { padding:0.75rem; gap:0.375rem }
#deliverables .deliv-card .deliv-icon { width:2rem; height:2rem }
#deliverables .deliv-card h4 { font-size:0.875rem }
#deliverables .deliv-card p { font-size:0.75rem; line-height:1.45 }
.grid-story { row-gap:2rem }
.services-grid,
.deliv-grid,
.process-grid,
.domains-grid,
.why-grid { margin-top:2.5rem }
@media (min-width:1024px) {
  .section-dark,
  .section-light { padding-block:4rem }
  #contact.section-contact { padding-bottom:1rem }
  #deliverables .deliv-card { padding:0.625rem; gap:0.25rem }
  #deliverables .deliv-card .deliv-icon { width:1.75rem; height:1.75rem }
  #deliverables .deliv-card h4 { font-size:0.8125rem }
  #deliverables .deliv-card p { font-size:0.6875rem; line-height:1.4 }
}

/* Non-domain card hovers keep their original foreground colors; glass only. */
@media (hover:hover) and (pointer:fine) {
  #our-services .service-card:hover,
  .deliv-card:hover,
  .process-step:hover .step-visual,
  .why-card:hover {
    transform:none;
    backdrop-filter:blur(22px) saturate(155%);
    -webkit-backdrop-filter:blur(22px) saturate(155%);
    box-shadow:0 16px 38px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.56);
  }
  #our-services .service-card:hover {
    background:rgba(255,255,255,0.48);
    border-color:rgba(17,17,17,0.18);
    color:#111;
  }
  #our-services .service-card:hover .card-desc,
  #our-services .service-card:hover .card-tags li { color:rgba(17,17,17,0.68) }
  #our-services .service-card:hover .card-tags li { border-color:rgba(17,17,17,0.14) }
  .deliv-card:hover {
    background:rgba(255,255,255,0.10);
    border-color:rgba(255,255,255,0.20);
    color:var(--text);
  }
  .deliv-card:hover .deliv-icon { background:rgba(102,87,216,0.13); border-color:rgba(102,87,216,0.25); color:#6657d8 }
  .deliv-card:hover h4 { color:var(--text) }
  .deliv-card:hover p { color:var(--text-mid) }
  .process-step:hover .step-visual {
    background:rgba(255,255,255,0.46);
    border-color:rgba(15,23,42,0.16);
  }
  .process-step:hover .step-num { background:var(--bg); border-color:var(--border); color:var(--text) }
  .process-step:hover .step-icon { color:var(--text-dark-muted); transform:none }
  .process-step:hover .step-title { color:var(--text-dark) }
  .why-card:hover {
    background:rgba(255,255,255,0.42);
    border-color:rgba(15,23,42,0.14);
    color:var(--text-dark);
  }
  .why-card:hover h3 { color:var(--text-dark) }
  .why-card:hover p { color:var(--text-dark-mid) }
  .why-card:hover .why-metric,
  .why-card:hover .why-metric svg { color:var(--text-dark) }
}

/* Mobile hero layout: video background, compact copy, price pill, then actions. */
@media (max-width:639px) {
  .hero { isolation:isolate }
  .hero-video {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
  }
  .hero-overlay { z-index:1 }
  .hero-content {
    z-index:2;
    position:absolute;
    inset:0;
    justify-content:center;
    padding:5.5rem 1rem max(2rem, env(safe-area-inset-bottom));
  }
  .hero-copy { width:100%; transform:translateY(-1.5rem) }
  .hero-sub {
    max-width:100%;
    margin-top:0.75rem;
    font-size:clamp(0.82rem,3.8vw,1rem);
    line-height:1.35;
    letter-spacing:0.01em;
    white-space:nowrap;
  }
  .hero-audience {
    max-width:100%;
    margin:0.5rem auto 0;
    padding-inline:0.25rem;
    font-size:clamp(0.74rem,3.45vw,0.875rem);
    line-height:1.45;
    letter-spacing:0.01em;
    text-wrap:balance;
  }
  #project-domain > .container > .domain-price-badge { display:none }
  .hero-price-badge {
    display:flex;
    position:relative;
    left:auto;
    bottom:auto;
    z-index:12;
    transform:none;
    margin:0.9rem auto 0;
    padding:0.5rem 0.85rem;
    background:rgba(255,255,255,0.16);
    border-color:rgba(255,255,255,0.32);
    backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
  }
  .hero-actions {
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    width:100%;
    max-width:100%;
    margin:0.9rem 0 0;
    flex-direction:column;
    gap:0.625rem;
  }
  .hero-actions .btn { width:100%; justify-content:center }
}

/* Keep the four hero details in one evenly spaced flow on every screen. */
.hero-stack {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  width:100%;
}
.hero-stack > .hero-sub,
.hero-stack > .hero-audience,
.hero-stack > .hero-price-badge,
.hero-stack > .hero-actions {
  margin:0;
}
.hero-stack > .hero-actions {
  position:relative;
  left:auto;
  bottom:auto;
  transform:none;
  width:max-content;
  max-width:100%;
}
@media (min-width:640px) {
  .hero-content {
    justify-content:center;
    gap:1rem;
    padding:5rem 1.25rem 3.5rem;
    transform:translateY(2.5rem);
  }
  .hero-stack { gap:1rem }
}
@media (max-width:639px) {
  /* Keep all five items in the same flow with a fixed, even mobile gap. */
  .hero,
  main > #hero {
    height:auto;
    min-height:0;
  }
  main > #hero { flex:0 0 auto }
  .hero-content {
    position:relative;
    inset:auto;
    width:100%;
    justify-content:flex-start;
    gap:1.25rem;
    padding:8rem 1rem max(1.5rem, env(safe-area-inset-bottom));
    transform:none;
  }
  .hero-copy { display:contents }
  .hero-title { margin:0 }
  .hero-title .hero-word { display:block }
  .hero-stack {
    display:flex;
    width:100%;
    gap:1.25rem;
  }
  .hero-stack > .hero-actions {
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    width:100%;
    max-width:100%;
    margin:0;
    transform:none;
    flex-direction:column;
    gap:0.625rem;
  }
  .hero-stack > .hero-actions .btn { width:100%; justify-content:center }
}