:root {
  color-scheme: dark;
  --bg: rgb(235, 240, 239);
  --bg-soft: #0c0a18;
  --text: #000000;
  --muted: #818181;
  --faint: rgba(251, 248, 255, 0.66);
  --line: rgba(221, 213, 255, 0.17);
  --glass: rgba(255, 255, 255, 0.075);
  --glass-strong: rgba(255, 255, 255, 0.12);
  --ink: #f3f2f8;
  --max: 1180px;
  --radius: 8px;
  --shadow: 0 24px 90px rgba(0, 0, 0, 0.42);
  --brand-purple: #0033ff;
}
* { box-sizing: border-box; }
html, body {
  ::-webkit-scrollbar {
    display: none;
  }
  
  -ms-overflow-style: none;  
  scrollbar-width: none; 
}

html { scroll-behavior: smooth; overflow-x: clip; interpolate-size: allow-keywords; }
body { margin: 0; min-width: 320px; color: var(--text); background: var(--bg); font-family: 'Space Grotesk', sans-serif; line-height: 1.65; overflow-x: clip; text-rendering: optimizeLegibility; }
body.menu-open, body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.page-aura { position: fixed; inset: -20%; z-index: -3; pointer-events: none; animation: auraShift 18s ease-in-out infinite alternate; }
.ambient-noise { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0.13; background-size: 3px 3px; mix-blend-mode: overlay; }
.section-shell { width: min(100% - 40px, var(--max)); margin-inline: auto; }
.section-shell2 { width:100%; margin-inline: auto; padding-top: 50px; padding-right: 50px; padding-left: 50px; }
.site-header { position: fixed; top: 4px; left: 50%; z-index: 50; width: min(calc(70% - 32px), var(--max)); min-height: 64px; transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 12px 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(6, 5, 15, 0.72); backdrop-filter: blur(24px); box-shadow: var(--shadow); transition: background 180ms ease, border-color 180ms ease; }
.site-header.is-scrolled { background: rgba(6, 5, 15, 0.91); border-color: rgba(251,248,255,0.24); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: max-content; font-weight: 850; letter-spacing: 0; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(251,248,255,0.18); border-radius: 12px; box-shadow: 0 0 28px rgba(251,248,255,0.12); }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.08) drop-shadow(0 0 14px rgba(251,248,255,0.36)); }
.brand-word { font-size: 1rem; }
.nav-panel { display: flex; align-items: center; gap: 4px; }
.nav-panel a, .nav-panel button {cursor:none; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 15px; color: var(--muted); border: 0; border-radius: 999px; background: transparent; transition: color 180ms ease, background 180ms ease, transform 180ms ease; }
.nav-panel a:hover, .nav-panel button:hover { color: var(--text); background: rgba(251,248,255,0.08); transform: translateY(-1px); }
.nav-panel .nav-cta { color: var(--ink); background: linear-gradient(135deg, var(--lavender), var(--amber)); font-weight: 850; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--text); }
.menu-toggle span { display: block; width: 17px; height: 2px; margin: 5px auto; background: currentColor; transition: transform 180ms ease; }
/* ═══════════════════════════════════════════════════════════════
   HERO: Scroll-Driven Frame Sequence
   ═══════════════════════════════════════════════════════════════ */
.hero-sequence-wrapper {
  position: relative;
  height: 300vh; 
  background: transparent;
}

.hero-sequence-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Cinematic vignette + bottom fade */
.hero-sequence-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* Bottom fade for content readability */
    linear-gradient(to top, rgba(5, 4, 13, 0.92) 0%, rgba(5, 4, 13, 0.5) 25%, transparent 55%),
    /* Top subtle fade */
    linear-gradient(to bottom, rgba(5, 4, 13, 0.4) 0%, transparent 18%),
    /* Radial vignette */
    radial-gradient(ellipse at center, transparent 40%, rgba(5, 4, 13, 0.6) 100%);
  z-index: 1;
}

/* Hero content overlay — centered and fixed during scroll */
.hero-sequence-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: var(--text);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: var(--max);
  margin-inline: auto;

}

.hero-sequence-content .eyebrow {
  margin-bottom: 18px;
}

.hero-sequence-content .display {
  max-width: 880px;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
}

.hero-sequence-content .hero-lede {
  max-width: 680px;
  margin-top: 20px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.hero-sequence-content .hero-body {
  max-width: 640px;
  margin-top: 14px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

.hero-sequence-content .hero-actions {
  margin-top: 20px;
}

.hero-sequence-content .microcopy {
  margin-top: 16px;
}

/* Scroll progress indicator */
.hero-scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  will-change: opacity, transform;
  animation: scrollBounce 2s ease-in-out infinite;
}

.hero-scroll-track {
  width: 2px;
  height: 48px;
  border-radius: 999px;
  background: rgba(251, 248, 255, 0.15);
  overflow: hidden;
}

.hero-scroll-progress {
  width: 100%;
  height: 0%;
  border-radius: 999px;
  background: linear-gradient(to bottom, var(--amber), var(--coral));
  transition: height 60ms ease-out;
}

.hero-scroll-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* Legacy (keep for other sections that may use it) */
#motion-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.58; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 390px); gap: clamp(30px, 6vw, 92px); align-items: end; }
.hero-copy-block { max-width: 880px; }
.eyebrow, .section-kicker { margin: 0 0 18px; color: var(--cobalt); font-size: 0.75rem; line-height: 1.4; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.display, h1, h2 { margin: 0; font-weight: 840; letter-spacing: 0; line-height: 1.02; }
.display { max-width: 900px; font-size: clamp(3.05rem, 6.9vw, 6.25rem); }
h2 { font-size: clamp(2.25rem, 4.8vw, 4.85rem); }
h3 { margin: 0; font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.18; }
p { margin: 0; }
.hero-lede { max-width: 680px; margin-top: 24px; font-size: clamp(1.20rem, 2.2vw, 1.75rem); line-height: 1.35; color: var(--text); }
.hero-body { max-width: 640px; margin-top: 10px; color: var(--faint); font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 22px; border: 1px solid var(--line); border-radius: 999px; font-weight: 850; transition: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;}
.button:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(242,186,95,0.15); }
.button.primary { color: var(--ink); background: linear-gradient(135deg, var(--lavender), var(--coral) 52%, var(--amber)); border-color: transparent; }
.button.secondary { color: var(--text); background: rgba(251,248,255,0.06); }
.microcopy { margin-top: 18px; color: var(--muted); font-size: 1.94rem; }
.hero-card { display: grid; gap: 14px; }
.brand-orbit { position: relative; min-height: 245px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(0,0,0,0.5); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), var(--shadow); }
.brand-orbit::before { content: ""; position: absolute; width: 170px; height: 170px; border: 1px solid rgba(208,208,240,0.32); border-radius: 50%; animation: spin 15s linear infinite; }
.brand-orbit img { width: 145px; height: 152px; object-fit: cover; border-radius: 24px; filter: drop-shadow(0 0 28px rgba(251,248,255,0.55)); }
.glass-card, .signal-card, .hero-metrics span, .service-panel, .testimonial-card, .contact-method, .contact-form, .cta-panel, .insight-card, .content-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 25px; background: rgba(199, 199, 199, 0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), var(--shadow); backdrop-filter: blur(5px); }
.glass-card::after, .service-panel::after, .insight-card::after, .project-card::before, .contact-method::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.16) 42%, transparent 56%); transform: translateX(-120%); transition: transform 620ms cubic-bezier(.2,.8,.2,1); }
.glass-card:hover::after, .service-panel:hover::after, .insight-card:hover::after, .project-card:hover::before, .contact-method:hover::after { transform: translateX(120%); }
.signal-card { padding: 22px; }
.signal-card span, .service-panel span, .project-card span, .why-grid span, .timeline span, .content-card span { display: inline-flex; margin-bottom: 18px; font-size: 1.25rem; font-weight: 750; letter-spacing: 0.11em; text-transform: uppercase; }
.insight-card span { display: inline-flex; margin-bottom: 18px; }
.signal-card strong { display: block; font-size: 1.35rem; line-height: 1.18; }
.signal-card p, .service-panel p, .service-panel li, .why-grid p, .insight-card p, .content-card p { margin-top: 12px; color: rgb(82, 81, 81); }
.hero-metrics, .impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hero-metrics span, .impact-grid span { min-height: 108px; display: grid; align-content: center; padding: 16px; }
.hero-metrics strong, .impact-grid strong { display: block; font-size: 2rem; line-height: 1; }
.hero-metrics span:nth-child(1) strong::after, .hero-metrics span:nth-child(2) strong::after, .impact-grid span:nth-child(1) strong::after, .impact-grid span:nth-child(2) strong::after { content: "+"; }
.hero-metrics span:nth-child(3) strong::after, .impact-grid span:nth-child(4) strong::after { content: "%"; }
.impact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 42px; }
.trust-band { width: min(100% - 40px, var(--max)); margin: 0 auto; padding: 32px 0 54px; }
.trust-band p { color: var(--muted); text-align: center; font-size: 1.25rem; }
.logo-marquee { display: flex; overflow: hidden; border-block: 1px solid var(--line); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.logo-track { flex: 0 0 auto; display: flex; gap: 28px; padding: 22px 14px; animation: marquee 24s linear infinite; }
.logo-track span { min-width: max-content; color: rgba(0, 0, 0, 0.44); font-size: clamp(1rem, 2vw, 1.45rem); font-weight: 850; filter: grayscale(1); transition: color 180ms ease, filter 180ms ease; }
.logo-track span:hover { color: var(--lavender); filter: none; }
.problem, .services, .showreel, .work, .impact, .why, .founder, .testimonials, .process, .insights, .faq, .content-hero, .content-section { padding-block: clamp(82px, 11vw, 150px); }
.editorial-grid, .split-heading, .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.62fr); gap: clamp(28px, 6vw, 82px); align-items: start; }
.prose, .split-heading > p { color: var(--muted); font-size: clamp(1.05rem, 1.7vw, 1.24rem); line-height: 1.78; display: grid; gap: 18px; }
.why-grid,.content-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 42px; }
.insight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 42px; }
.insight-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 42px; }
.diagnostic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 42px; }
.testimonial-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 42px;}
.diagnostic-grid article, .why-grid article, .testimonial-card, .insight-card, .content-card { padding: 24px; }
.diagnostic-grid p { font-size: clamp(1.05rem, 1.7vw, 1.32rem); line-height: 1.35; }
.service-stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 42px; }
.service-panel { min-height: 470px; display: flex; flex-direction: column; padding: 26px; }
.service-icon { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 24px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(135deg, rgba(3, 3, 245, 0.22), rgba(223,130,111,0.14)); color: var(--text); font-size: 2.05rem;}
.service-panel ul { display: grid; gap: 10px; margin: 20px 0 0; padding-left: 18px; }
.service-panel a, .insight-card strong, .project-card strong, .content-card a { display: inline-flex; margin-top: auto; padding-top: 24px; color: var(--cobalt); }
.video-shell { position: relative; min-height: clamp(360px, 52vw, 620px); display: grid; align-items: end; overflow: hidden; padding: clamp(22px, 5vw, 48px); border: 1px solid var(--line); border-radius: var(--radius); background: #07060f; box-shadow: var(--shadow); }
.video-shell > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.48; z-index: 0; }
.video-shell::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(5,4,13,0.92), rgba(5,4,13,0.28)); }
.video-copy { position: relative; z-index: 2; max-width: 720px; }
.play-inline { position: relative; z-index: 2; margin-top: 24px; min-height: 52px; display: inline-flex; align-items: center; gap: 12px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: rgba(5,4,13,0.66); color: var(--text); }
.play-inline span { width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 13px solid var(--amber); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 18px; }
.filter { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,0.04); color: var(--muted); }
.filter.active, .filter:hover { color: var(--ink); background: var(--cobalt); }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(300px, auto); gap: 14px; }
/* .project-card { position: relative; min-height: 320px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); isolation: isolate; transition: opacity 220ms ease, transform 220ms ease; }
.project-card.feature { grid-row: span 2; }
.project-card.wide { grid-column: span 2; }
.project-card.is-hidden { opacity: 0.18; pointer-events: none; transform: scale(0.985); }
.project-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 800ms cubic-bezier(.2,.8,.2,1); }
.project-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(5,4,13,0.91)); }
.project-card div { position: absolute; inset: auto 20px 20px; }
.project-card p { margin-top: 10px; color: var(--muted); }
.project-card strong { opacity: 0; transform: translateY(8px); transition: opacity 180ms ease, transform 180ms ease; }
.project-card:hover img { transform: scale(1.06); }
.project-card:hover strong { opacity: 1; transform: translateY(0); } */
.project-card {
    position: relative;
    min-height: 320px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    isolation: isolate;
    transition: opacity 220ms ease, transform 220ms ease;
}

.project-card.feature {
    grid-row: span 2;
}

.project-card.wide {
    grid-column: span 2;
}

.project-card.is-hidden {
    opacity: 0.18;
    pointer-events: none;
    transform: scale(0.985);
}

/* Image & Video */
.project-card img,
.project-card video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform 800ms cubic-bezier(.2,.8,.2,1);
}

/* Dark overlay */
.project-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,.04),
        rgba(5,4,13,.91)
    );
}

.project-card div {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
}

.project-card p {
    margin-top: 10px;
    color: var(--muted);
}

.project-card strong {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease;
}

/* Hover effect */
.project-card:hover img,
.project-card:hover video {
    transform: scale(1.06);
}

.project-card:hover strong {
    opacity: 1;
    transform: translateY(0);
}

.video-wrapper {
    position: relative;
}

.mute-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,.6);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    backdrop-filter: blur(8px);
}

.mute-btn:hover {
    background: rgba(0,0,0,.8);
}
.founder-card { display: grid; grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr); gap: clamp(24px, 6vw, 72px); align-items: center; padding: clamp(24px, 5vw, 54px); }
.founder-visual { display: grid; place-items: center; border-radius: var(--radius); background: radial-gradient(circle, rgba(208,208,240,0.22), transparent 58%); }
.founder-visual img { width: min(190px, 58%); border-radius: 28px; filter: drop-shadow(0 0 34px rgba(251,248,255,0.28)); }
.founder-card p:not(.eyebrow) { margin-top: 18px; color: var(--muted); font-size: 1.08rem; line-height: 1.75; }
.inline-actions { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 26px; color: var(--cobalt); font-weight: 850; }
.inline-actions button { border: 0; padding: 0; background: transparent; color: inherit; font-weight: inherit; }
.testimonial-card { min-height: 320px; display: flex; flex-direction: column; justify-content: space-between; }
.portrait { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 50%; background: radial-gradient(circle at 35% 25%, var(--lavender), var(--plum)); color: var(--ink); font-size: 0.72rem; font-weight: 900; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-card p { font-size: clamp(1.04rem, 1.6vw, 1.25rem); line-height: 1.5; }
.testimonial-card span { margin-top: 24px; color: var(--muted); }
.timeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-block: 1px solid var(--line); margin-top: 42px; gap: 10px; }
.timeline div {padding: 22px; border-right: 1px solid var(--line); }
.timeline div:last-child { border-right: 0; }
.timeline p { margin-top: 12px; color: var(--muted); }
/* 2. Accordion Container */
.accordion { 
  display: grid; 
  gap: 10px; 
  margin-top: 36px; 
}

/* 3. Individual Details Panels */
.accordion details { 
  position: relative; 
  padding: 12px; 
  padding-left:20px;  
  border: 1px solid var(--cobalt); 
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgb(171, 171, 171);
  /* Removed 'overflow: hidden' to allow native transition interpolation */
  transition: opacity 0.3s ease-out, transform 0.3s ease-out; 
}

/* 4. Interactive Summary Rows */
.accordion summary { 
  min-height: 44px; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 16px; 
  cursor: pointer; /* Allows users to see it is an interactive button */
  font-weight: 700; 
}

/* 5. Custom Content Slide Transitions */
/* Targets the browser's native inner container content frame slot */
.accordion details::details-content {
  height: 0;
  opacity: 0;
  overflow: hidden; /* Kept isolated inside the content box rather than the parent card */
  transition: height 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
              opacity 0.25s ease-out, 
              content-visibility 0.35s allow-discrete;
}

/* Expanded state parameters triggered when [open] runs */
.accordion details[open]::details-content {
  height: auto;
  opacity: 1;
}

/* 6. Typography and Visual Elements */
.accordion p { 
  padding-top: 12px; 
  color: var(--muted); 
}

/* Pseudo-indicator layout updates */
.accordion summary::after { 
  content: "+"; 
  color: var(--cobalt); 
}

.accordion details[open] summary::after { 
  content: "-"; 
}
.cta-panel { padding: clamp(30px, 7vw, 76px); margin-bottom: 18px; background: linear-gradient(135deg, rgba(141,121,230,0.24), transparent 52%), linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)); }
.cta-panel h2 { max-width: 980px; font-size: clamp(3rem, 8.3vw, 7.5rem); }
.cta-panel p:not(.eyebrow) { max-width: 690px; margin-top: 20px; color: var(--muted); font-size: 1.12rem; }
.contact-methods { display: grid; gap: 12px; }
.contact-method { min-height: 92px; display: flex; flex-direction: column; justify-content: center; padding: 18px; text-align: left; color: var(--text); border-color: var(--line); }
.contact-method span { font-weight: 850; }
.contact-method small { margin-top: 4px; color: var(--muted); }
.contact-form { display: grid; gap: 14px; padding: 18px; }
.contact-form label { display: grid; gap: 8px; color: var(--muted); font-size: 0.92rem; }
.contact-form input, .contact-form textarea, .contact-form select { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(187, 187, 187, 0.22); color: var(--text); padding: 13px 14px; outline: none; }
.contact-form textarea { resize: vertical; }
.budget-field { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; }
.budget-field legend { grid-column: 1 / -1; margin-bottom: 2px; color: var(--muted); font-size: 0.92rem; }
.budget-field label { display: block; }
.budget-field input { position: absolute; opacity: 0; pointer-events: none; }
.budget-field span { min-height: 48px; display: flex; align-items: center; justify-content: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,0.055); color: var(--text); text-align: center; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; }
.budget-field input:checked + span { border-color: transparent; background: linear-gradient(135deg, var(--cobalt)); color: var(--ink); font-weight: 850; }
.form-status { min-height: 24px; color: var(--amber); }
.sticky-contact { position: fixed; right: 18px; bottom: 18px; z-index: 45; display: grid; gap: 8px; }
.sticky-contact a, .sticky-contact button { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(5,4,13,0.76); color: var(--text); font-size: 0.72rem; font-weight: 900; backdrop-filter: blur(12px); transition: width 180ms ease, border-radius 180ms ease, background 180ms ease, color 180ms ease; }
.sticky-contact a:hover, .sticky-contact button:hover { width: 88px; border-radius: 999px; background: var(--lavender); color: var(--ink); }
.showreel-modal, .booking-modal { width: min(940px, calc(100% - 32px)); border: 1px solid var(--line); border-radius: var(--radius); padding: 0; background: var(--bg); color: var(--text); box-shadow: var(--shadow); }
.booking-modal { width: min(1100px, calc(100% - 32px)); }
.showreel-modal::backdrop, .booking-modal::backdrop { background: rgba(0,0,0,0.78); backdrop-filter: blur(8px); }
.modal-close { position: absolute; top: 12px; right: 12px; z-index: 3; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(0,0,0,0.54); color: var(--text); }
.modal-frame, .booking-frame { padding: 12px; }
.modal-frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
.modal-frame p { padding: 12px 4px 4px; color: var(--muted); }
.booking-frame { display: grid; grid-template-columns: 0.46fr 1fr; gap: 12px; min-height: 650px; }
.booking-copy { padding: clamp(22px, 4vw, 42px); border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, rgba(141,121,230,0.18), rgba(223,130,111,0.09)); }
.booking-copy p:not(.eyebrow) { margin-top: 18px; color: var(--muted); }
.booking-frame iframe { width: 100%; min-height: 626px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.content-page .site-header { position: sticky; transform: none; left: auto; margin: 16px auto 0; }
.content-hero { padding-top: clamp(56px, 8vw, 96px); }
.content-hero .display { max-width: 980px; }
.content-hero p:not(.eyebrow) { max-width: 720px; margin-top: 22px; color: var(--muted); font-size: 1.16rem; }
.content-card { min-height: 320px; display: flex; flex-direction: column; }
.case-study-list { display: grid; gap: 18px; margin-top: 42px; }
.case-study { padding: clamp(24px, 5vw, 46px); }
.case-study-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 22px; margin-top: 24px; }
.case-study-grid div { border-top: 1px solid var(--line); padding-top: 16px; }
.case-study-grid h4 { margin: 0 0 8px; color: var(--lavender); }
.case-study-grid p { color: var(--muted); }
.reveal { opacity: 0; transform: translateY(24px); filter: blur(8px); transition: opacity 760ms ease, transform 760ms cubic-bezier(.2,.8,.2,1), filter 760ms ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); filter: blur(0); }
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 80; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); }
.cursor-dot { width: 7px; height: 7px; background: var(--amber); }
.cursor-ring { width: 36px; height: 36px; border: 1px solid rgba(208,208,240,0.58); transition: width 160ms ease, height 160ms ease, border-color 160ms ease; }
.cursor-ring.is-hover { width: 58px; height: 58px; border-color: rgba(242,186,95,0.68); }
@keyframes slowZoom { from { transform: scale(1.02); } to { transform: scale(1.09) translate3d(1.4%, -1%, 0); } }
@keyframes marquee { to { transform: translateX(-100%); } }
@keyframes gradientDrift { from { transform: translate3d(-1%, -1%, 0) scale(1); } to { transform: translate3d(2%, 1.5%, 0) scale(1.08); } }
@keyframes auraShift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(2%, -1%, 0) scale(1.04); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 1400px) { .sticky-contact { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.001ms !important; } #motion-canvas, .cursor-dot, .cursor-ring { display: none; } .reveal { opacity: 1; transform: none; filter: none; } }
@media (max-width: 1040px) { .menu-toggle { display: block; } .nav-panel { position: fixed; inset: 82px 0 auto; display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 22px; background: rgba(5,4,13,0.96); opacity: 0; pointer-events: none; transform: translateY(-14px); transition: opacity 180ms ease, transform 180ms ease; } .menu-open .nav-panel { opacity: 1; pointer-events: auto; transform: translateY(0); } .menu-open .menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); } .menu-open .menu-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); } .hero-grid, .editorial-grid, .split-heading, .contact-grid, .founder-card, .booking-frame, .case-study-grid { grid-template-columns: 1fr; } .hero-card { max-width: 620px; } .service-stack, .why-grid, .testimonial-track, .insight-grid, .diagnostic-grid, .content-grid, .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } .timeline div { border-bottom: 1px solid var(--line); } }
@media (max-width: 680px) { .section-shell, .trust-band { width: min(100% - 24px, var(--max)); } .site-header { top: 10px; width: calc(100% - 20px); min-height: 66px; } .brand-mark { width: 38px; height: 38px; } .brand-word { font-size: 0.98rem; } .hero-sequence-wrapper { height: 250vh; } .hero-sequence-content { padding: 0 20px 36px; } .hero-sequence-content .eyebrow { display: none; } .hero-sequence-content .display { font-size: clamp(2.2rem, 9vw, 3rem); line-height: 1.12; } .hero-sequence-content .hero-lede { font-size: 1.05rem; } .hero-sequence-content .hero-body { display: none; } .hero-sequence-content .hero-actions .button { flex: 1 1 100%; } .hero-scroll-indicator { bottom: 18px; } .display { font-size: clamp(2.45rem, 10.2vw, 3.35rem); line-height: 1.12; } .hero-lede { margin-top: 22px; font-size: 1.08rem; line-height: 1.45; } .hero-actions .button, .filters .filter { flex: 1 1 100%; } .trust-band { padding-top: 12px; } .problem, .services, .showreel, .work, .impact, .why, .founder, .testimonials, .process, .insights, .faq, .final-cta, .content-hero, .content-section { padding-block: 76px; } .diagnostic-grid, .service-stack, .why-grid, .testimonial-track, .insight-grid, .project-grid, .timeline, .content-grid, .impact-grid, .budget-field { grid-template-columns: 1fr; } .project-card, .project-card.feature, .project-card.wide { grid-column: auto; grid-row: auto; min-height: 320px; } .video-shell { min-height: 420px; } .founder-visual { min-height: 220px; } .timeline div { border-right: 0; } .booking-frame iframe { min-height: 560px; } .cursor-dot, .cursor-ring { display: none; } }
.muted { color: var(--muted); }
.text-center { text-align: center; margin-top: 40px; margin-bottom: 20px; }
.page-aura {display: none !important;}
@keyframes premium-twinkle {0%, 100% {transform: scale(0) rotate(0deg);opacity: 0;filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0));}15%, 85% {opacity: 0.15;}50% {transform: scale(1) rotate(90deg);opacity: 0.95;filter: drop-shadow(0 0 8px rgba(226, 232, 240, 0.8));}}


.center {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #reveal-nav {
            position: fixed;
            top: 5px;
            left: 0;
            right: 0;
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600; 
            margin: 0 auto;
            height: 65px;
            width: 65px;
            background: transparent;
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: 24px; /* Increased border radius */
            overflow: hidden;
            z-index: 1000;
            padding: 10px;
            display: flex;
            align-items: center;
            border: 1px solid rgba(0, 0, 0, 0.05);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

        .nav-logo-box {
            border-radius: 14px; /* Increased border radius for the logo container */
            min-width: 45px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        #nav-routes {
            display: flex;
            align-items: center;
            gap: 40px;
            margin-left: 40px;
            padding-right: 20px;
            opacity: 0;
            pointer-events: none;
            list-style: none;
            white-space: nowrap;
        }

        .route-item {
            color: rgb(0, 0, 0);
            font-size: 1.125rem;
            cursor: pointer;
            transition: opacity 0.2s;
        }

        .route-item:hover {
            color: var(--cobalt);

        }

        .scroll-indicator {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }

        @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cormorant+Garamond:ital,wght@1,300;1,700&family=Inter:wght@300;400;900&display=swap');

.font-bold-display { font-family: 'Bebas Neue', sans-serif; }
.font-serif { font-family: 'Cormorant Garamond', serif; }


                .font-impact { font-family: 'Bebas Neue', cursive; }
        .font-mono { font-family: 'Space Grotesk', sans-serif; font-weight: 300; }

        /* Custom Scrollbar styled for Light Theme */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: var(--space); }
        ::-webkit-scrollbar-thumb { background: var(--cobalt); border-radius: 3px; }

        /* Fixed Background Canvas Setup */
        #canvas-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 0;
            pointer-events: none;
        }

        /* Speed Line Animation over white bg */
        .speed-line {
            position: absolute;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--cobalt), transparent);
            width: 100%;
            opacity: 0.25;
            transform: scaleX(0);
            transform-origin: left;
        }

        /* Hub Row Glassmorphism Transitions */
        .hub-row {
            border-top: 1px solid var(--border-tint);
            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .hub-details {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Premium Glassmorphism styling for Hub & Forms */
        .glass-panel {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(0, 51, 255, 0.08);
            box-shadow: 0 10px 30px -15px rgba(0, 51, 255, 0.05);
        }

        /* Mobile Active Logic adapting to Light Theme */
        @media (max-width: 1023px) {
            .is-active-hub {
                background: rgba(0, 51, 255, 0.03);
                padding: 3rem 1.5rem !important;
                margin: 1rem 0;
                border-top: 1px solid var(--cobalt);
                border-bottom: 1px solid var(--cobalt);
            }
            .is-active-hub .hub-details {
                max-height: 1000px;
                opacity: 1;
                margin-top: 2rem;
            }
            .is-active-hub h3 { color: var(--cobalt); }
        }

        /* Desktop Hover interactions over white bg */
        @media (min-width: 1024px) {
            .hub-row:hover {
                background: rgba(0, 51, 255, 0.02);
                padding-left: 2rem;
                padding-right: 2rem;
            }
            .hub-details {
                opacity: 0;
                transform: translateX(40px);
            }
            .hub-row:hover .hub-details {
                opacity: 1;
                transform: translateX(0);
                max-height: 800px;
                margin-top: 3rem;
            }
        }

        .tilt-card {
            transform: perspective(1000px) rotateY(-15deg);
            transition: transform 0.5s ease;
        }
        .is-active-hub .tilt-card {
            transform: perspective(1000px) rotateY(0deg);
        }

       .outline-text {
            color: transparent;
            -webkit-text-stroke: 3px var(--cobalt);
        }

        .liquid-card {
            background: rgba(199, 199, 199, 0.08);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            transition: transform 0.2s ease, border-color 0.2s ease;
            color: rgb(5, 5, 5);
            border-radius: 25px;
        }

        .animated-gradient-bg{
            background: linear-gradient(60deg, rgb(30, 64, 175), rgb(6, 182, 212), rgb(16, 185, 129));
        }




         .blob-bg {
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

         .blob-1 {
            border-radius: 42% 40% 19% 30% / 45% 45% 55% 55%;
        }