/* =====================================================================
   bhavitverma.com v4 — base: reset, type, grid, buttons, shell
   ===================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  font-size: max(16px, var(--scale));
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  background: var(--bg);
}
body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--b-lg);
  line-height: 1.3;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; line-height: inherit; }
::selection { background: var(--accent); color: var(--fg); }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

/* Focus — custom visible ring (VM only had browser default) */
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: var(--r-xs); }
.btn:focus-visible, .navpill :focus-visible { outline-offset: 4px; border-radius: var(--r-full); }

.skip {
  position: fixed; left: var(--gutter); top: -4rem; z-index: calc(var(--z-nav) + 1);
  padding: 0.75rem 1.25rem; border-radius: var(--r-full);
  background: var(--fg); color: var(--bg);
  font-family: var(--font-mono); font-size: var(--link); text-transform: uppercase;
  transition: top 0.2s;
}
.skip:focus-visible { top: 1rem; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Typography ---------- */
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
.display em, .display i { font-style: italic; }
.h-xl  { font-size: var(--h-xl);  line-height: 1.05; }
.h-lg  { font-size: var(--h-lg);  line-height: 1.05; }
.h-md  { font-size: var(--h-md);  line-height: 1.05; }
.h-sm  { font-size: var(--h-sm);  line-height: 1.1; }
.h-xs  { font-size: var(--h-xs);  line-height: 1.15; }
.h-2xs { font-size: var(--h-2xs); line-height: 1.2; }
.b-xl  { font-size: var(--b-xl); }
.b-lg  { font-size: var(--b-lg); }
.b-sm  { font-size: var(--b-sm); }
.lead  { font-size: var(--h-sm); line-height: 1; text-wrap: pretty; letter-spacing: -0.01em; }
.mono {
  font-family: var(--font-mono);
  font-size: var(--link);
  line-height: 1;
  text-transform: uppercase;
}
.mono-xs { font-family: var(--font-mono); font-size: var(--b-xs); line-height: 1; text-transform: uppercase; color: var(--text-muted); }
.c-2 { color: var(--text-2); }
.c-muted { color: var(--text-muted); }
.c-subtle { color: var(--text-subtle); }
.c-ghost { color: var(--text-ghost); }
.c-accent { color: var(--accent); }

/* ---------- Layout ---------- */
.container { width: 100%; padding-inline: var(--gutter); }
.grid {
  display: grid;
  grid-template-columns: repeat(18, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--gap);
}
.section { position: relative; z-index: var(--z-section); padding-top: var(--section-pt); background: var(--bg); }
.section--clear { background: transparent; }
.bleed { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }

/* Label (5 cols) + body (13 cols) split */
.split__label { grid-column: 1 / 6; }
.split__body  { grid-column: 6 / 19; }

@media (max-width: 767px) {
  .grid--stack { display: flex; flex-direction: column; gap: 1.5rem; }
}

/* ---------- Icons ---------- */
.icon { width: 1rem; height: 1rem; flex: none; }
.icon--20 { width: 1.25rem; height: 1.25rem; }

/* ---------- Buttons ---------- */
.btn {
  --btn-h: 2.5rem;
  --btn-px: 1.25rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 1rem;
  height: var(--btn-h); padding-inline: var(--btn-px);
  border-radius: var(--r-full);
  font-family: var(--font-mono); font-size: var(--link); line-height: 1; text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--t-color), background-color var(--t-color);
}
.btn__text { padding-top: 2px; }
.btn--xs { --btn-h: 1.75rem; --btn-px: 0.875rem; }
.btn--lg { --btn-h: 4rem; --btn-px: 2rem; }
.btn--brand { background: var(--accent-fill); color: var(--fg); }
.btn--brand:hover { background: var(--accent-hover); }
.btn--light { background: var(--fg); color: var(--bg); }
.btn--light:hover { background: var(--n-100); }
.btn--neutral { background: var(--surface-raised); color: var(--text-2); }
.btn--neutral:hover { background: var(--n-850); color: var(--fg); }
.btn--glass { background: var(--glass); color: var(--fg); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }

.iconbtn {
  display: inline-grid; place-items: center;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--fg); color: var(--bg);
  flex: none;
}
.iconbtn .icon { transform: rotate(-45deg); transition: transform 0.25s var(--ease-featured); }

/* Scramble — keep width stable while characters swap */
[data-scramble] .scr { display: inline-block; white-space: pre; }

/* ---------- Reveal states (JS adds html.js) ---------- */
html.js [data-reveal] { visibility: hidden; }
html.js.reveal-off [data-reveal],
html.js.reveal-done [data-reveal] { visibility: visible; }
[data-reveal="media"] { overflow: clip; background: var(--media-ph); }
.split-line { overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { visibility: visible !important; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* =====================================================================
   WebGL fluid canvas (hero + footer)
   ===================================================================== */
.fluid {
  position: fixed; inset: 0; z-index: var(--z-canvas);
  width: 100svw; height: 100svh;
  pointer-events: none;
  opacity: 0; transition: opacity 0.6s ease;
}
.fluid.is-visible { opacity: 1; }
main { position: relative; z-index: var(--z-page); }

/* =====================================================================
   NAVBAR
   ===================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  height: var(--nav-h); padding-inline: var(--gutter);
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav__logo {
  position: absolute; left: var(--gutter); top: 1.625rem;
  font-family: var(--font-display); font-size: 1.75rem; line-height: 1;
  letter-spacing: -0.01em;
  transition: opacity 0.3s;
}
.nav__logo .logo { display: block; height: 2rem; width: auto; }
.footer__mark em { font-style: italic; }
.nav__right {
  position: absolute; right: var(--gutter); top: 1.375rem;
  display: flex; align-items: center;
}
.nav__links { display: flex; gap: 2rem; padding-right: 1.5rem; }
.nav__link { display: inline-block; padding-block: 0.75rem; color: var(--fg); transition: color var(--t-color); }
.nav__link[aria-current="page"] { color: var(--text-muted); }

/* Glass pill: CTA (top) ⇄ toggler (scrolled) */
.navpill {
  position: relative;
  display: grid; grid-template-columns: 1fr 0fr;
  height: 2.5rem;
  border-radius: var(--r-md);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  transition: grid-template-columns 0.5s var(--ease-nav), border-radius 0.5s var(--ease-pill);
}
.navpill > * { min-width: 0; overflow: hidden; }
.navpill__cta, .navpill__toggle {
  display: flex; align-items: center; gap: 0.625rem;
  height: 100%; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--link); line-height: 1; text-transform: uppercase;
  transition: opacity 0.35s ease;
}
/* Padding lives on the visible half only — padding can't shrink into a 0fr track */
.navpill__cta, .navpill__toggle { transition: opacity 0.35s ease, padding 0.5s var(--ease-nav); }
.navpill__cta { padding-inline: 0.9375rem; }
.navpill__toggle { padding-inline: 0; opacity: 0; justify-content: flex-end; }
.navpill__cta .icon { color: var(--accent); }
.is-scrolled .navpill, .nav--compact .navpill { grid-template-columns: 0fr 1fr; }
.is-scrolled .navpill__cta, .nav--compact .navpill__cta { opacity: 0; padding-inline: 0; }
.is-scrolled .navpill__toggle, .nav--compact .navpill__toggle { opacity: 1; padding-inline: 0.9375rem; }

/* Legibility fade behind the transparent bar once content scrolls under it */
.nav::before {
  content: ""; position: absolute; inset: 0 0 -1.5rem 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--bg) 20%, transparent);
  opacity: 0; transition: opacity 0.4s ease;
}
.nav.is-scrolled::before { opacity: 1; }

/* 4-dot toggler icon */
.dots { position: relative; width: 0.625rem; height: 0.625rem; flex: none; }
.dots i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%; background: currentColor;
  transition: transform 0.25s var(--ease-dot), opacity 0.2s;
}
.dots i:nth-child(1) { left: 0; top: 0; }
.dots i:nth-child(2) { right: 0; top: 0; }
.dots i:nth-child(3) { left: 0; bottom: 0; }
.dots i:nth-child(4) { right: 0; bottom: 0; }
.dots b {
  position: absolute; left: 0; top: calc(50% - 1px); width: 100%; height: 2px; background: currentColor;
  transform: scaleX(0); transition: transform 0.25s var(--ease-dot);
}
.navpill__toggle:hover .dots i:nth-child(1) { transform: translate(-2px, -2px); }
.navpill__toggle:hover .dots i:nth-child(2) { transform: translate(2px, -2px); }
.navpill__toggle:hover .dots i:nth-child(3) { transform: translate(-2px, 2px); }
.navpill__toggle:hover .dots i:nth-child(4) { transform: translate(2px, 2px); }
.menu-open .dots i { opacity: 0; transform: none !important; }
.menu-open .dots b { transform: scaleX(1); }

/* ---------- Dropdown menu ---------- */
.menu-backdrop {
  position: fixed; inset: 0; z-index: -1;
  background: var(--backdrop);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.menu-open .menu-backdrop { opacity: 1; visibility: visible; transition: opacity 0.5s ease; }

.menu {
  position: absolute; right: var(--gutter); top: 1.375rem;
  display: flex; gap: 0.5rem; align-items: flex-start;
  visibility: hidden;
}
.menu-open .menu { visibility: visible; }
.menu__tiles { display: flex; gap: 0.5rem; }
.menu__tile {
  position: relative; width: 7.625rem; height: 7.625rem; border-radius: var(--r-sm); overflow: clip;
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  opacity: 0; transform: translateX(20%);
  transition: opacity 0.4s ease, transform 0.5s var(--ease-nav);
}
.menu-open .menu__tile { opacity: 1; transform: none; transition-delay: 0.15s; }
.menu-open .menu__tile + .menu__tile { transition-delay: 0.22s; }
.menu__tile img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-xs); }
.menu__tile--case { padding: 0.25rem; }
.menu__tile--case .btn { position: absolute; left: 0.5rem; bottom: 0.5rem; }
.menu__tile--clock { display: grid; place-items: center; padding: 0.75rem 0.75rem 0.5rem; }
.clock { width: 4.5rem; height: 4.5rem; }
.clock__hand { transform-origin: 50% 50%; transition: transform 1s var(--ease-nav); }
.clock__chip {
  font-family: var(--font-mono); font-size: max(10px, 0.625rem); line-height: 1;
  background: var(--bg); color: var(--fg); border-radius: var(--r-xs); padding: 0.25rem 0.375rem;
}
.menu__main { width: 16rem; display: flex; flex-direction: column; gap: 0.5rem; }
.menu__panel {
  border-radius: var(--r-sm);
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  padding: 3rem 0.3125rem 0.5rem;
  clip-path: inset(0 0 100% 0 round var(--r-sm));
  transition: clip-path 0.5s var(--ease-nav);
}
.menu-open .menu__panel { clip-path: inset(0 0 0 0 round var(--r-sm)); }
.menu__link {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 0.625rem; border-radius: var(--r-xs);
  font-size: var(--b-xl); line-height: 1;
  transition: background-color var(--t-bg);
}
.menu__link:hover, .menu__link:focus-visible { background: var(--glass); }
.menu__link[aria-current="page"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.menu__cta { width: 100%; opacity: 0; transform: translateY(-0.5rem); transition: opacity 0.3s ease, transform 0.5s var(--ease-nav); }
.menu-open .menu__cta { opacity: 1; transform: none; transition-delay: 0.25s; }

/* The pill sits above the panel so the toggler stays in place while open */
.nav__right { z-index: 2; }
.menu { z-index: 1; }
.menu-open .nav__links { opacity: 0; pointer-events: none; }

@media (max-width: 991px) {
  .nav__links { display: none; }
  .navpill { height: 2.75rem; }
}
@media (max-width: 767px) {
  .menu-open .nav__logo { opacity: 0; }
}
@media (max-width: 479px) {
  .menu__tiles { display: none; }
  .menu { left: var(--gutter); }
  .menu__main { width: 100%; }
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer {
  position: relative; z-index: var(--z-section);
  padding-top: var(--section-pt); padding-bottom: var(--gutter);
  background: transparent;
  overflow: clip;
}
.footer::before {
  content: ""; position: absolute; inset: -1rem 0 0 0; z-index: -1;
  background: linear-gradient(180deg, var(--bg) 5%, transparent 50%);
  pointer-events: none;
}
.footer__cta { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.footer__heading { font-size: var(--h-md); line-height: 1.1; max-width: 14em; }
.footer__heading span { display: block; }
.footer__heading span:first-child { color: var(--text-muted); }
.footer__info { margin-top: 4rem; }
.footer__groups { grid-column: 1 / 13; display: flex; gap: 4rem; }
.footer__group { display: flex; flex-direction: column; gap: 0.25rem; }
.footer__group a, .footer__group span + span { color: var(--text-muted); transition: color var(--t-color); }
.footer__group a:hover { color: var(--fg); }
.footer__util { margin-top: 4rem; align-items: center; }
.footer__social, .footer__legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer__social { grid-column: 1 / 7; }
.footer__legal { grid-column: 7 / 13; }
.footer__copy { grid-column: 13 / 19; text-align: right; color: var(--text-muted); }
.footer__link { color: var(--text-muted); transition: color var(--t-color); padding-block: 0.25rem; }
.footer__link:hover { color: var(--fg); }
.footer__mark {
  margin-top: 16rem;
  font-family: var(--font-display); line-height: 0.8; letter-spacing: -0.02em;
  white-space: nowrap; font-size: 21vw;
  user-select: none;
}

@media (max-width: 991px) {
  .footer__social { grid-column: 1 / 10; }
  .footer__legal { grid-column: 10 / 19; }
  .footer__copy { grid-column: 1 / 19; text-align: left; margin-top: 1.5rem; }
  .footer__groups { grid-column: 1 / 19; }
  .footer__mark { margin-top: 8rem; }
}
@media (max-width: 767px) {
  .footer { padding-bottom: 1rem; }
  .footer__cta { flex-direction: column; align-items: flex-start; }
  .footer__groups { flex-direction: column; gap: 1.5rem; }
  .footer__mark { margin-top: 4rem; }
  .footer__link { display: inline-block; padding-block: 0.75rem; }
}
@media (max-width: 479px) {
  .footer__util { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
  .footer__social, .footer__legal { flex-direction: column; gap: 0; }
  .footer__copy { margin-top: 0; }
}

/* WebGL image distortion overlay (js/distort.js) */
.distort-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* =====================================================================
   SHARED COMPONENTS
   ===================================================================== */

/* Media card with crossfading slides + follow-cursor pill (home reel, services CTA) */
.reel {
  position: relative; margin-top: 2rem;
  margin-inline: calc(var(--gutter) * -0.5);
  aspect-ratio: 16 / 9; border-radius: var(--r-sm); overflow: clip;
  background: var(--surface);
  cursor: none;
}
.reel__slides { position: absolute; inset: 0; }
.reel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--surface); }
.reel__slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; animation: reelFade 16s infinite;
}
.reel__slide:nth-child(2) { animation-delay: 4s; }
.reel__slide:nth-child(3) { animation-delay: 8s; }
.reel__slide:nth-child(4) { animation-delay: 12s; }
@keyframes reelFade {
  0%   { opacity: 0; transform: scale(1.08); }
  8%   { opacity: 1; }
  30%  { opacity: 1; }
  38%  { opacity: 0; transform: scale(1); }
  100% { opacity: 0; }
}
.reel__shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, color-mix(in oklab, var(--bg) 55%, transparent)); }
.reel__caption {
  position: absolute; left: 1.5rem; bottom: 1.5rem; right: 1.5rem;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
}
.reel__link { position: absolute; inset: 0; z-index: 2; }
.follow {
  position: absolute; left: 0; top: 0; z-index: 3;
  pointer-events: none;
  background: var(--glass-dark); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  --btn-px: 0.9375rem;
  will-change: transform;
}
@media (max-width: 767px) {
  .reel { margin-inline: calc(var(--gutter) * -0.5); }
  .reel__caption { left: 1rem; bottom: 1rem; right: 1rem; }
  .reel__caption > :last-child { display: none; }
}
@media (hover: none), (max-width: 991px) {
  .reel { cursor: auto; }
  .follow { left: 50%; top: 50%; translate: -50% -50%; }
}


/* Big next-page row */
.nextcase {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1rem 2rem;
  margin-inline: calc(var(--gutter) * -1); margin-top: var(--section-pt);
  padding: 3rem var(--gutter);
  border-top: 1px solid var(--hairline-solid); border-bottom: 1px solid var(--hairline-solid);
  transition: background-color var(--t-bg) ease;
}
.nextcase:hover, .nextcase:focus-visible { background: var(--surface); }
.nextcase .mono { grid-column: 1 / -1; }
.nextcase__title { font-size: var(--h-lg); line-height: 1; }
.nextcase__arrow {
  display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%;
  background: var(--accent-fill); color: var(--fg);
  transition: transform 0.4s var(--ease-featured), background-color var(--t-bg);
}
.nextcase__arrow .icon { width: 1.5rem; height: 1.5rem; }
.nextcase:hover .nextcase__arrow { transform: translateX(0.5rem); background: var(--accent-hover); }

@media (max-width: 767px) {
  .nextcase__arrow { width: 3rem; height: 3rem; }
}