/* --- Document root: predictable zoom & no horizontal bleed --- */
html {
  width: 100%;
  overflow-x: hidden;
  font-size: 100%;
  /* iOS: discourage horizontal pan when a child briefly exceeds width */
  touch-action: manipulation;
}

/* --- Base (all pages) --- */
body {
  font-family: "Montserrat", sans-serif;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  font-size: clamp(0.875rem, 0.82rem + 0.2vw, 1.125rem);
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

/* Primary column: flex/grid children default to min-width:auto and can force page width past the viewport */
body > main {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

footer {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.page-home,
.page-about,
.page-insights {
  background-color: #171716;
  color: #fff;
}

.page-services {
  background-color: #121211;
  color: #fff;
}

/* NUVOND word + accent dot — one ratio everywhere (nav + footers) */
.logo-lockup {
  display: flex;
  align-items: center;
}

.logo-lockup-dot {
  box-sizing: border-box;
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  margin-left: -0.25rem;
  margin-bottom: 0.375rem;
  border-radius: 50%;
  background-color: #bb3f17;
}

/* --- Layout: shared max-width + 12-column grid (align all major sections) --- */
.site-container {
  box-sizing: border-box;
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

.site-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.4vw, 2rem);
  row-gap: clamp(1.25rem, 3vw, 2.5rem);
}

/* About metric strip: 3 metrics — stack on narrow viewports; 3 equal columns from md */
.about-metric-grid {
  display: grid;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(1.5rem, 4vw, 2.25rem);
  column-gap: clamp(1.25rem, 0.75rem + 2vw, 2.25rem);
}

@media (min-width: 768px) {
  .about-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 0;
  }
}

.about-metric-slot {
  min-height: clamp(2.75rem, 2rem + 4vw, 3.75rem);
  min-width: 0;
}

/* Home-only textured backdrop */
body.page-home::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(138, 136, 126, 0.03) 0%,
    transparent 80%
  );
  pointer-events: none;
  z-index: -1;
}

/* Navigation: backdrop from Tailwind (backdrop-blur-md) on .main-nav */

/* Fixed bar must not widen the document: logo + tracked links + CTA can exceed ~1024px */
#navbar .main-nav {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

@media (min-width: 1024px) {
  #navbar .nav-cluster {
    gap: clamp(1rem, 2.5vw, 4rem);
  }
}

.page-home .main-nav {
  /* bg-brand-dark/80 + backdrop-blur-md (on element) — reads cleanly against dropdown */
  background-color: rgba(23, 23, 22, 0.8);
  transition: background-color 0.5s ease, color 0.5s ease;
}

@media (min-width: 1024px) {
  .page-home .main-nav {
    background-color: transparent;
  }
}

.page-about .main-nav,
.page-insights .main-nav {
  background-color: rgba(23, 23, 22, 0.8);
}

.page-services .main-nav {
  background-color: rgba(18, 18, 17, 0.8);
}

/* Primary nav links: color is controlled only here — do not put Tailwind text-* on these anchors.
   The Play CDN reorders generated utilities after refresh(), which was overriding active (white) state. */
#navbar .main-nav a.nav-item[data-nav] {
  color: #7b796f;
}

#navbar .main-nav a.nav-item[data-nav]:hover {
  color: #ffffff;
}

#mobile-menu a.mobile-nav-item[data-nav] {
  color: #7b796f;
}

#mobile-menu a.mobile-nav-item[data-nav]:hover {
  color: #ffffff;
}

#navbar .main-nav a.nav-item[data-nav][aria-current="page"],
#mobile-menu a.mobile-nav-item[data-nav][aria-current="page"],
body.page-home #navbar a[data-nav="home"],
body.page-about #navbar a[data-nav="about"],
body.page-services #navbar a[data-nav="services"],
body.page-insights #navbar a[data-nav="insights"],
body.page-home #mobile-menu a[data-nav="home"],
body.page-about #mobile-menu a[data-nav="about"],
body.page-services #mobile-menu a[data-nav="services"],
body.page-insights #mobile-menu a[data-nav="insights"] {
  color: #ffffff !important;
}

/* Global focus styles for key interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid #bb3f17;
  outline-offset: 3px;
}

/* Narrow phones: hero labels only; nav logo must match on every page */
@media (max-width: 400px) {
  body.page-home .home-hero .font-header {
    letter-spacing: 0.2em !important;
  }

  .main-nav .text-nav-logo {
    letter-spacing: 0.3em !important;
  }
}

/* Mobile: reduce extreme tracking so the button label reads visually centered */
@media (max-width: 480px) {
  body.page-home #contact-form button span {
    letter-spacing: 0.4em !important;
  }
}

@media (min-width: 1024px) {
  .page-services .main-nav {
    background-color: transparent;
  }
}

.mobile-menu-backdrop {
  background-color: rgba(23, 23, 22, 0.95);
}

.page-services #mobile-menu .mobile-menu-backdrop {
  background-color: rgba(18, 18, 17, 0.95);
}

/* Hamburger: reliable taps on real devices (iOS stacking / 300ms quirks) */
#menu-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Hamburger bars: stable pivot when opening to X */
#menu-btn span {
  transform-origin: center;
}

/* Nav underline — default (about, services, insights spacing) */
.nav-link {
  position: relative;
  transition: color 0.3s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -4px;
  left: 0;
  background-color: #bb3f17;
  transition: width 0.3s ease-out;
}

@media (min-width: 1024px) {
  .nav-link:hover::after {
    width: 100%;
  }
}

/* --- Reveal (page-specific motion) --- */
.page-home .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.page-about .reveal,
.page-insights .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.page-services .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: #171716;
}

::-webkit-scrollbar-thumb {
  background: #bb3f17;
}

html.page-services ::-webkit-scrollbar {
  width: 5px;
}

html.page-services ::-webkit-scrollbar-track {
  background: #121211;
}

/* --- Blob: rem-capped size so desktop zoom doesn’t explode layout --- */
.blob {
  /* One size token: width/height and centering offsets must match or zoom feels “off” */
  --blob-size: min(26rem, 42vw);
  top: 0;
  left: 0;
  width: var(--blob-size);
  height: var(--blob-size);
  background: radial-gradient(
    circle,
    rgba(187, 63, 23, 0.12) 0%,
    rgba(23, 23, 22, 0) 70%
  );
  border-radius: 50%;
  z-index: 0;
  /* Heavy blur + will-change stacks badly with text/SVG (smudgy “print”); keep blur moderate */
  filter: blur(48px);
  pointer-events: none;
  margin-left: calc(var(--blob-size) / -2);
  margin-top: calc(var(--blob-size) / -2);
  opacity: 0;
  transition: opacity 1s ease;
}

/* Home: glow sits under #navbar (201) and under main/sections (z-index 1), above body fill */
body.page-home #cursor-blob {
  position: fixed;
  z-index: 0;
}

/* Cursor glow: fixed, softer than .blob default so hero type & SVG stay crisp */
.page-home .blob.blob--hero {
  filter: blur(40px);
  background: radial-gradient(
    circle,
    rgba(187, 63, 23, 0.055) 0%,
    rgba(23, 23, 22, 0) 72%
  );
}

/* Siblings after the blob must stack above it; opaque bands still hide the glow unless backgrounds allow it */
body.page-home > main,
body.page-home > section,
body.page-home > #footer {
  position: relative;
  z-index: 1;
}

/* Hero: same fill as body (no seam); vh then dvh for stable fold height */
.page-home .home-hero {
  background-color: #171716;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Main hero block: vertical rhythm; vh + rem track zoom */
.page-home .home-hero-main {
  padding-top: clamp(2.25rem, 10vh, 9rem);
  padding-bottom: clamp(1.5rem, 5vh, 4rem);
}

@media (min-width: 1024px) {
  .page-home .home-hero-main {
    padding-top: clamp(3rem, 14vh, 11rem);
    padding-bottom: clamp(2rem, 6vh, 5rem);
  }
}

.page-home .home-hero-explore {
  margin-top: clamp(0.25rem, 1.25vh, 1rem);
  padding-top: clamp(0.25rem, 1vh, 0.5rem);
  padding-bottom: clamp(1.25rem, 4vh, 2.5rem);
}

/* Services: long flat #171716 from the fold, then blend (avoids a visible step at 100% zoom) */
body.page-home #services.home-services-band {
  margin-top: -1px;
  padding-top: calc(clamp(4rem, 8vw, 10rem) + 1px);
  background: linear-gradient(
    180deg,
    #171716 0%,
    #171716 min(20vh, 16rem),
    #191918 50%,
    #1c1c1b 100%
  );
}

/* Fixed (not absolute) so blur/transform do not expand body scrollWidth on iPad/desktop */
.page-insights .blob {
  position: fixed;
  z-index: 0;
}

/* --- Home-only --- */
.page-home .card-hover:hover {
  border-color: #bb3f17;
  background-color: rgba(255, 255, 255, 0.02);
}

/* Home services cards: consistent padding + remove the small orange underline */
/* (keeps layout stable across zoom/breakpoints even if hover states feel inconsistent) */
.page-home #services .card-hover > div:first-child {
  width: 100% !important;
}

.strategy-transition-bg {
  background: linear-gradient(
    to bottom,
    #1c1c1b 0%,
    #e4e2dd 20%,
    #e4e2dd 80%,
    #171716 100%
  );
}

/* Home only: let the cursor glow read through the cream band (class is home-only today) */
body.page-home .strategy-transition-bg {
  background: linear-gradient(
    to bottom,
    rgba(28, 28, 27, 0.9) 0%,
    rgba(228, 226, 221, 0.9) 22%,
    rgba(228, 226, 221, 0.9) 78%,
    rgba(23, 23, 22, 0.92) 100%
  );
}

body.page-home #footer > footer {
  background-color: rgba(0, 0, 0, 0.9);
}

.modal-overlay {
  display: none;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 1.25rem);
}

.modal-overlay.active {
  display: flex;
}

/* --- Services --- */
.page-services .service-block {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 1024px) {
  .page-services .service-block:hover {
    background: rgba(255, 255, 255, 0.015);
  }
}

/* --- Insights: list row + desktop lift / glow --- */
.page-insights .insight-card {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: border-color 0.6s cubic-bezier(0.22, 1, 0.36, 1), background 0.6s ease;
}

@media (min-width: 1024px) {
  .page-insights article.insight-card {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s ease,
      border-color 0.6s ease, background 0.6s ease;
    will-change: transform;
  }

  .page-insights article.insight-card:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.4);
    border-bottom-color: #bb3f17;
    background: rgba(255, 255, 255, 0.02);
  }

  .page-insights article.insight-card:hover h2 {
    color: #bb3f17;
    transition: color 0.4s ease;
  }
}