/* ═══════════════════════════════════════════════════════
   Index page styles — Hero, Grid Sections, Cards, Footer
   Loaded after style.css to override base rules
   ═══════════════════════════════════════════════════════ */

/* --- Body: default light for hero area --- */
body {
  background-color: var(--page-bg);
  color: var(--page-text);
  overflow-x: hidden;
}
html {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

/* --- Hero: image layer kept simple for resize stability --- */
.hero > .hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background-color: var(--page-bg);
  visibility: visible;
  overflow: hidden;
}
.hero > .hero-bg .hero-bg-stack {
  position: absolute;
  top: clamp(24px, 7vh, 110px);
  left: calc(50px + 5%);
  right: calc(50px + 5%);
  bottom: clamp(24px, 7vh, 110px);
  overflow: hidden;
  background-color: transparent;
  min-height: clamp(220px, 42vh, 900px);
  display: flex;
  flex-direction: column;
  mix-blend-mode: lighten;
  opacity: 1;
  /* Wrapper-level fade on the bottom ~30% of the stack. The mask ramps
     the entire blend layer's contribution down to zero before the stack's
     bounding box ends, so there's no sharp line where `lighten` stops
     contributing to the backdrop. (The water image inside already has
     its own mask, but that only controls the water's alpha — the blend
     at the water's alpha-zero y-coordinate still ended abruptly, which
     showed as a faint seam against --page-bg. Fading the wrapper ramps
     the blend effect itself, not just the image alpha.) */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 70%,
    rgba(0, 0, 0, 0.55) 85%,
    rgba(0, 0, 0, 0.15) 95%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 70%,
    rgba(0, 0, 0, 0.55) 85%,
    rgba(0, 0, 0, 0.15) 95%,
    transparent 100%
  );
}
.hero > .hero-bg .hero-particle-canvas {
  position: absolute;
  top: clamp(24px, 7vh, 110px);
  left: calc(50px + 5%);
  right: calc(50px + 5%);
  bottom: clamp(24px, 7vh, 110px);
  z-index: 4;
  pointer-events: none;
}

.hero > .hero-bg .hero-bg-img {
  width: 100%;
  height: auto;
  display: block;
  flex: 0 0 auto;
}
.hero > .hero-bg::after {
  display: none;
}
@media (max-width: 768px) {
  .hero {
    position: relative;
  }
  .hero > .hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  body {
    touch-action: manipulation;
  }
  /* RESPONSIVE FIX: pull the hero-bg-stack insets way in on narrow viewports so
     the cityscape + water actually sit BEHIND the centered hero name. The desktop
     value `calc(50px + 5%)` consumes ~66px on each side at 320px wide, leaving
     the name floating over plain --page-bg with nothing for the blend modes
     (lighten on the stack, color-burn on the name) to operate against. Same
     insets applied to the (currently inert) particle canvas so it stays aligned
     with the stack if it's ever re-enabled. */
  .hero > .hero-bg .hero-bg-stack,
  .hero > .hero-bg .hero-particle-canvas {
    left: clamp(8px, 3vw, 24px);
    right: clamp(8px, 3vw, 24px);
    top: clamp(12px, 4vh, 60px);
    bottom: clamp(12px, 4vh, 60px);
  }
}
.hero::after {
  display: none;
}
.hero {
  background: var(--page-bg);
}

/* --- Hero content --- */
.hero-content {
  position: relative;
  z-index: 10;
}
.hero-reel {
  position: relative;
  z-index: 100;
}

/* --- Hero name — kept at previous dusty rose per request
       ("change all copy except the hero name to #d1d6ff"). --- */
.hero .hero-name {
  color: var(--accent-rose);
  text-shadow: none;
}
.hero-name .first-name {
  color: var(--accent-rose);
}
.hero-name .last-name {
  color: var(--accent-rose);
}

.hero-role {
  color: #000;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 450;
  font-size: 1.4em;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-transform: capitalize;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  text-shadow: none;
}
.hero-tagline {
  color: var(--page-text);
  text-shadow:
    -2px -1px 0 rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.5),
    0 6px 20px rgba(0, 0, 0, 0.4),
    0 12px 40px rgba(0, 0, 0, 0.3),
    0 20px 60px rgba(0, 0, 0, 0.2);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 450;
  font-size: 1.1em;
  line-height: 1.4;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  background: none;
  padding: 0.5em 0;
  position: relative;
  z-index: 1;
}
.hero-tagline::before {
  display: none;
}
.pillar-sep {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #fff;
  border: none;
  flex-shrink: 0;
}

/* --- Hero layout: centered name + full-bleed tagline bar ---
     !important overrides style.css responsive breakpoints --- */
.hero-reel {
  display: none !important;
}
.hero-backdrop-bar {
  display: none !important;
}
.hero-accent-line {
  display: none !important;
}
.hero {
  display: grid !important;
  place-content: center !important;
  place-items: center !important;
  grid-template-rows: 1fr !important;
  grid-template-columns: 1fr !important;
  min-height: 100vh !important;
  height: var(--vvh, 100svh) !important;
  overflow: visible !important;
  gap: 0 !important;
  padding: 0 !important;
}
.hero-content {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow: visible !important;
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  align-self: auto !important;
}
.hero-name {
  position: relative !important;
  z-index: 2 !important;
  margin-top: -10px !important;
  margin-bottom: 1.75rem !important;
  /* V5 — values from exploration 08 / Fatima's JSON: Jost 400 + tight tracking */
  font-family: "Jost", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  text-align: center !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.hero-tagline {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  max-width: none !important;
  margin: 0 !important;
  width: 100% !important;
}
.hero-tagline .pillar-text {
  white-space: nowrap;
}
.hero-tagline .pillar-sep {
  display: inline-block !important;
}

/* --- Transition edge: hero → dark sections ---
   The seam between .hero (isolated stacking context + mix-blend-mode on
   the image stack) and #ads was produced by two cooperating effects:
   (a) the old border-top: 1px solid var(--page-bg) on #ads — browsers
       anti-alias border edges independently of the block fill, so even
       an identically-colored border can render as a visible hairline;
   (b) subpixel compositing differences at the edge of the hero's
       isolation boundary, which can leave a 1px gap on some zoom levels.
   Fix: drop the border entirely, then pull #ads up by 1px so its fill
   overlaps any stray compositing gap. Both sides paint --page-bg so the
   overlap has no visual consequence other than killing the seam. */
#ads {
  position: relative;
  margin-top: -1px;
}

/* --- Grid sections --- */
#ads,
#landing {
  background: var(--page-bg);
  color: var(--page-text);
}
#emails {
  background: var(--page-bg);
  color: var(--page-text);
}
#emails .section-title {
  color: #c3ff42;
}
#emails .card-caption {
  color: var(--page-text);
}
#emails .card-image-container {
  background: #fff;
}
#emails .back-to-top,
#emails .back-to-top.back-to-top-red {
  color: var(--page-text);
}

/* --- Section headers --- */
.section-header {
  clip-path: none;
  opacity: 1;
  margin-bottom: 0.75rem;
}
.section-label {
  display: none;
}
.section-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  /* V6.x — reduced per request (was clamp(1.3rem, 2.75vw, 1.85rem)). */
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  color: #3d9bff;
  letter-spacing: -0.01em;
  margin-bottom: 0;
  text-transform: uppercase;
  background: none;
  display: inline-block;
  padding: 0;
  position: relative;
  z-index: 1;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.section-divider {
  display: none;
}
.grid-banners,
.grid-emails,
.grid-lp {
  margin-top: 2rem;
}

/* --- Cards: dark treatment --- */
.card {
  cursor: pointer;
  outline: none;
}
.card.animated {
  opacity: 1;
  pointer-events: auto;
}
.card-image-container::after {
  display: none;
}
.card-caption {
  opacity: 1;
  visibility: visible;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: -0.02em;
  color: var(--page-text);
  /* V6.x — tuned per request: more readable caption size. */
  font-size: calc(0.95rem - 4.5px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  /* Extra breathing room above to push the caption away from the grid item's
     bottom edge. V6.x — margin-top bumped 1.1rem → 1.85rem per request. */
  padding: 0.4rem 0 0.4rem;
  margin-top: 1.85rem;
  position: relative;
  /* V6.x — high z so image-container shadows (22px+ blur) never bleed
     over the caption text below. */
  z-index: 20;
  transform: translateY(0);
  transition:
    color 0.35s ease,
    transform 0.35s ease;
}
.card:hover .card-caption {
  transform: translateY(-5px);
}
.card:hover {
  transform: translateY(-5px);
}
.card:hover .card-image {
  transform: scale(1.15);
}
.card-image-container {
  border: none;
  outline: none;
  background: var(--page-bg);
  border-radius: 0;
  box-shadow: none;
  transition: box-shadow 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.card:hover .card-image-container {
  border: none;
  outline: none;
  box-shadow: none;
}
.card-image {
  border-radius: 0;
}

/* --- Email hover: subtle zoom, anchored to top --- */
.grid-emails .card:hover .card-image {
  transform: scale(1.46);
  transform-origin: top center;
}
.grid-emails .card:nth-child(1) .card-image {
  transform: scale(1.26);
  transform-origin: top center;
}
.grid-emails .card:nth-child(1):hover .card-image {
  transform: scale(1.31);
  transform-origin: top center;
}
.grid-emails .card:nth-child(2) .card-image {
  transform: scale(1.3);
  transform-origin: top center;
}
.grid-emails .card:nth-child(2):hover .card-image {
  transform: scale(1.34);
  transform-origin: top center;
}
.grid-emails .card:nth-child(3):hover .card-image {
  transform: scale(1.9);
  transform-origin: top center;
}
.grid-emails .card:nth-child(4) .card-image {
  transform: scale(1.72);
  transform-origin: top center;
}
.grid-emails .card:nth-child(4):hover .card-image {
  transform: scale(1.77);
  transform-origin: top center;
}
.grid-emails .card:nth-child(5):hover .card-image,
.grid-emails .card:nth-child(6):hover .card-image {
  transform: scale(1.88);
  transform-origin: top center;
}

/* --- Responsive email image scales --- */
@media (max-width: 1400px) {
  .grid-emails .card:hover .card-image {
    transform: scale(1.36);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(1) .card-image {
    transform: scale(1.16);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(1):hover .card-image {
    transform: scale(1.22);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(2) .card-image {
    transform: scale(1.2);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(2):hover .card-image {
    transform: scale(1.26);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(3) .card-image {
    transform: scale(1.72);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(3):hover .card-image {
    transform: scale(1.77);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(4) .card-image {
    transform: scale(1.6);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(4):hover .card-image {
    transform: scale(1.66);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(5) .card-image,
  .grid-emails .card:nth-child(6) .card-image {
    transform: scale(1.69);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(5):hover .card-image,
  .grid-emails .card:nth-child(6):hover .card-image {
    transform: scale(1.75);
    transform-origin: top center;
  }
}
@media (max-width: 1024px) {
  .grid-emails .card:hover .card-image {
    transform: scale(1.26);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(1) .card-image {
    transform: scale(1.08);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(1):hover .card-image {
    transform: scale(1.13);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(2) .card-image {
    transform: scale(1.12);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(2):hover .card-image {
    transform: scale(1.16);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(3) .card-image {
    transform: scale(1.59);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(3):hover .card-image {
    transform: scale(1.63);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(4) .card-image {
    transform: scale(1.48);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(4):hover .card-image {
    transform: scale(1.53);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(5) .card-image,
  .grid-emails .card:nth-child(6) .card-image {
    transform: scale(1.57);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(5):hover .card-image,
  .grid-emails .card:nth-child(6):hover .card-image {
    transform: scale(1.62);
    transform-origin: top center;
  }
}
@media (max-width: 768px) {
  .grid-emails .card:hover .card-image {
    transform: scale(1.08);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(1) .card-image {
    transform: scale(0.89);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(1):hover .card-image {
    transform: scale(0.94);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(2) .card-image {
    transform: scale(0.92);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(2):hover .card-image {
    transform: scale(0.96);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(3) .card-image {
    transform: scale(1.31);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(3):hover .card-image {
    transform: scale(1.35);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(4) .card-image {
    transform: scale(1.22);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(4):hover .card-image {
    transform: scale(1.27);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(5) .card-image,
  .grid-emails .card:nth-child(6) .card-image {
    transform: scale(1.29);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(5):hover .card-image,
  .grid-emails .card:nth-child(6):hover .card-image {
    transform: scale(1.34);
    transform-origin: top center;
  }
}
@media (max-width: 640px) {
  .grid-emails .card:hover .card-image {
    transform: translateX(-50%) scale(1.02);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(1) .card-image {
    transform: translateX(-50%) scale(0.75);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(1):hover .card-image {
    transform: translateX(-50%) scale(0.79);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(2) .card-image {
    transform: translateX(-50%) scale(0.74);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(2):hover .card-image {
    transform: translateX(-50%) scale(0.77);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(3) .card-image {
    transform: translateX(-50%) scale(1.05);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(3):hover .card-image {
    transform: translateX(-50%) scale(1.09);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(4) .card-image {
    transform: translateX(-50%) scale(1.5);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(4):hover .card-image {
    transform: translateX(-50%) scale(1.56);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(5) .card-image,
  .grid-emails .card:nth-child(6) .card-image {
    transform: translateX(-50%) scale(1.872);
    transform-origin: top center;
  }
  .grid-emails .card:nth-child(5):hover .card-image,
  .grid-emails .card:nth-child(6):hover .card-image {
    transform: translateX(-50%) scale(1.944);
    transform-origin: top center;
  }
}

/* --- Back to top --- */
.back-to-top-wrapper {
  text-align: right;
  margin: 3.5rem 0 1rem;
  display: flex;
  justify-content: flex-end;
}
/* V6.x — match nav-item styling + join the flip rollover system.
   Red slide-in ::after removed; flip spans are injected by nav-flip.js and
   the pink 3D flip hover is defined in header.php. */
.back-to-top,
.back-to-top.back-to-top-red {
  font-family: "Work Sans", sans-serif;
  font-size: calc(0.95rem - 4.5px); /* ≈ 10.7px, matches nav */
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.03em;
  color: var(--page-text);
  text-decoration: none;
  background: none;
  padding: 0.45rem 0.8rem;
  display: inline-block;
  position: relative;
  white-space: nowrap;
  transition: color 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: none;
  z-index: 0;
}
.back-to-top .arrow {
  display: none;
}
.back-to-top:hover,
.back-to-top.back-to-top-red:hover {
  background: none;
  transform: none;
  box-shadow: none;
}

/* --- Footer ---
   Rules intentionally omitted — index.php inherits the canonical .footer
   styles from style.css. This file previously duplicated the entire
   .footer ruleset, drifting only on the bullet-dot colors (which are
   now unified to rgba(255,255,255,0.35) in style.css itself). Removed
   to prevent future drift. The one index-only rule that remains lives
   in style.css: body.with-section-nav .footer { margin-bottom: 65px }
   (to clear the fixed section-nav on index). */

/* --- Hero responsive --- */
@media (max-width: 990px) {
  .hero-tagline {
    flex-direction: column !important;
    gap: 0.4em !important;
  }
  .hero-tagline .pillar-sep {
    display: none !important;
  }
}
@media (max-width: 640px) {
  #emails {
    padding-left: 2%;
    padding-right: 2%;
  }
  .hero-name {
    margin-bottom: 0.75rem !important;
    font-size: clamp(2.5rem, 12vw, 5rem) !important;
    white-space: nowrap !important;
  }
  .hero-tagline {
    font-size: 0.75rem !important;
  }
  /* RESPONSIVE FIX: the old `filter: brightness(0.85)` on .hero-bg darkened the
     cityscape further on mobile, which was the wrong direction for the
     color-burn blend on .hero-content — color-burn over a dark backdrop clamps
     to black. Slight saturation/contrast bump instead so the underlying image
     stays vivid behind the blended teal name. */
  .hero > .hero-bg {
    filter: saturate(1.05) contrast(1.02);
  }
}
@media (max-width: 480px) {
  .hero-name {
    margin-bottom: 1rem !important;
    font-size: clamp(2.25rem, 12vw, 4.5rem) !important;
  }
  .hero-tagline {
    font-size: 0.7rem !important;
  }
}
@media (orientation: portrait), (max-aspect-ratio: 1/1), (max-width: 900px) {
  .hero {
    min-height: max(50vh, 320px) !important;
    height: max(50vh, 320px) !important;
  }
  #ads {
    padding-top: 1.25rem !important;
  }
  .grid-banners {
    margin-top: 1.25rem !important;
  }
}
@media (min-width: 901px) {
  #ads {
    padding-top: 6.5rem !important;
  }
}
@media (max-width: 1024px) and (min-width: 901px) {
  #ads {
    padding-top: 4.5rem !important;
  }
}

/* V6.6 — legacy navFadeIn / sectionNavFadeIn keyframe animations removed.
   They were fighting the GSAP hero-reveal timeline in index-scripts.js, which
   already fades the nav in at t+0.6s. The CSS animation's `from { opacity: 0 }`
   keyframe kicked in at its 1.2s delay and reset the nav logo to invisible
   right after GSAP had already faded it in → the "blink" in the top-left.
   GSAP now owns nav opacity entirely; no CSS-side opacity-0 default. */

/* --- WIP preview link --- */
.wip-preview {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 60px;
  display: flex;
  align-items: center;
  z-index: 1002;
  pointer-events: none;
  opacity: 0;
  animation: wipFadeIn 1s ease 1.2s forwards;
}
.wip-preview a {
  pointer-events: auto;
  font-family: "Work Sans", sans-serif;
  font-size: calc(0.95rem - 2px);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--page-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.45s ease;
}
.wip-preview a:hover {
  color: #ff0000;
}
.wip-preview .wip-tri {
  display: inline-block;
  margin-left: 0.9em;
  font-size: 1em;
  transform: scaleX(0.6);
  transform-origin: left baseline;
  vertical-align: baseline;
  line-height: 1;
  position: relative;
  top: 1px;
  left: -2px;
}
@keyframes wipFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -4px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

body.build-complete .hero-bg {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Prevent the hero stack from ever collapsing to 0 height */
#heroStack {
  min-height: 300px !important; /* Adjust based on your preferred mobile hero height */
  background-color: transparent !important; /* Transparent so blend modes don't create a visible bar */
}

/* Ensure both images stay visible once the intro animation is done */
body.build-complete .hero-bg-img {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   V2 SYNC — typography + WITHIN-style rollover stage + 3D tilt shadows
   Mirrors /portfolio-site/index.php inline styles. All rules below
   override the earlier declarations in this file via cascade order.
   Revert: delete this block (everything below this comment).
   ═══════════════════════════════════════════════════════════════════════ */

/* --- Section titles: DM Sans, ALL CAPS, tight tracking.
       V6.x — weight 700 → 600 per request; tighter letter-spacing;
       uppercase; color set to rollover blue #3d9bff. --- */
.section-title {
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  color: #3d9bff;
}
#emails .section-title {
  color: #3d9bff;
}

/* --- Card captions: DM Sans medium, tight tracking ---
       Selector uses body.with-section-nav so it wins over style.css line 852
       (`body.with-section-nav .card-caption { font-size: 1.05rem }`). --- */
.card-caption,
body.with-section-nav .card-caption {
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.02em;
  /* V6.x — tuned per request: bumped back up from 0.55-0.7rem (too small)
     to a more readable range, still smaller than style.css's 1.05rem. */
  font-size: calc(0.95rem - 4.5px);
  transition:
    color 0.35s ease,
    transform 0.35s ease,
    text-shadow 0.35s ease;
}

/* --- WITHIN-style caption stage (built by grid-card-hover.js / section-nav-within-hover.js)
       base line flips out on hover → Playfair italic red line flips in. --- */
.card-caption-within__stage {
  position: relative;
  perspective: 1280px;
  transform-style: preserve-3d;
  overflow: hidden;
  line-height: 1.2;
}
.card-caption-within__base {
  position: relative;
  z-index: 1;
}
.card-caption-within__inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  line-height: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.card-caption-within__em {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1em;
  display: contents;
}
.card-cap-ch {
  display: inline-block;
  transform-style: preserve-3d;
}
/* When within-mode is active, GSAP owns the text-shadow — drop the baseline one */
@media (hover: hover) {
  .grid-banners .card-caption[data-caption-within="1"],
  .grid-emails .card-caption[data-caption-within="1"],
  .grid-lp .card-caption[data-caption-within="1"] {
    text-shadow: none;
  }
}

/* --- 3D tilt: body.grid-tilt-active is toggled by grid-tilt-hover.js ---
       Card link gets a subtle lift; image container gets the depth shadow + red border on hover.
       Uses portfolio-site's #FF4747 border red (brighter than the #ff2e2e rollover text red). --- */
body.grid-tilt-active .grid-banners .card:hover,
body.grid-tilt-active .grid-emails .card:hover,
body.grid-tilt-active .grid-lp .card:hover {
  transform: translateY(-6px);
}
.grid-banners .card-image-container,
.grid-emails .card-image-container,
.grid-lp .card-image-container {
  transition:
    box-shadow 0.35s cubic-bezier(0.23, 1, 0.32, 1),
    border-color 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.48),
    0 2px 8px rgba(0, 0, 0, 0.3);
}
body.grid-tilt-active .grid-banners .card:hover .card-image-container,
body.grid-tilt-active .grid-emails .card:hover .card-image-container,
body.grid-tilt-active .grid-lp .card:hover .card-image-container {
  /* V3.6: red outline removed per request. Keep the depth shadow only — no
     border-color change on hover, no red glow ring. */
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.52),
    0 4px 11px rgba(0, 0, 0, 0.34) !important;
}

/* --- Nav active state: cyan #00fff9 (V6.4 — matches rollover). Current-page + active section nav. --- */
.nav .nav-links a.active,
.section-nav .section-nav-link.active {
  color: #00fff9;
}

/* --- Suppress live-site's translateY(-5px) on caption during hover ---
       WITHIN script owns the caption transform now; the old baseline
       caption lift would re-collide with the flip stage. --- */
.card:hover .card-caption {
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   V3 SYNC — fireflies, blend-mode hero name, Lenis compat.
   Appended under the V2 SYNC block. Delete from this comment onward to revert.
   ═══════════════════════════════════════════════════════════════════════ */

/* --- Fireflies (DOM-based, animated by hero-fireflies.js) --- */
.hero-stars {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
.hero-star {
  position: absolute;
  left: 50%;
  top: 100%;
  /* V6.2 — smaller fireflies (6×6 → 4×4 → 3×3 → 2×2 → 1.5×1.5).
     Single, very diffuse glow layer; the earlier discrete box-shadow
     rings created faint banding where one halo ended and the next
     began, so collapsing to one large shadow + heavier blur removes
     the hard edge entirely. */
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 0.35) 40%,
    rgba(210, 190, 255, 0.08) 75%,
    rgba(200, 180, 255, 0) 100%
  );
  box-shadow: 0 0 22px 2px rgba(220, 200, 255, 0.08);
  filter: blur(0.7px);
  opacity: 0;
  will-change: transform, opacity;
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) {
  .hero-stars {
    display: none;
  }
}

/* --- Hero name: mix-blend-mode: color-burn with #ff0000. ---
       V3.8 fix: blend moved from .hero-name → .hero-content. Two stacked
       bugs were killing the blend in V3.7:
       (1) .hero-content has `position: relative; z-index: 10` (earlier in
           this file) which creates a stacking context. That means a blend
           on .hero-name inside it could only blend with stuff inside
           .hero-content — and .hero-content only contains the name, so
           the blend had nothing to operate against.
       (2) `transform: translateZ(0)` + `will-change: transform` on
           .hero-name forced a GPU compositing layer, which on WebKit/Blink
           makes the layer opaque and bypasses the blend compositor.

       Solution: apply the blend at .hero-content level. Its stacking
       context is .hero (isolated), and .hero contains hero-bg. So the
       color-burn on hero-content now actually sees the cityscape +
       water strip behind it. Dropped all GPU-promotion hints from
       hero-name since we no longer need to fight performance there —
       color-burn is cheap per frame. --- */
.hero {
  isolation: isolate;
}
.hero .hero-content {
  mix-blend-mode: color-burn;
}
.hero .hero-name {
  /* Desktop hero name: pure red, blended via .hero-content mix-blend-mode:
     color-burn (declared above). color-burn(red × cityscape) produces a
     deep blood-red where the buildings are bright and clamps to black in
     shadow — that's the intended desktop look. */
  color: #ff0000 !important;
  text-shadow: none !important;
}
.hero .hero-name .first-name,
.hero .hero-name .last-name {
  color: #ff0000 !important;
}
/* RESPONSIVE FIX (mobile hero name color): on mobile the hero backdrop is
   cropped/compressed enough that no single blend mode produces the desktop
   look reliably:
     - color-burn(teal × dark navy fallback) → clamps to nearly black
     - hard-light(teal × dark navy fallback) → over-brightens to cyan/mint
   Cleanest answer: drop the blend on mobile and paint the name in a solid
   deep emerald-teal (#006e54). That value approximates the average output
   of color-burn(teal × cityscape) on desktop — rgb(0, ~110, ~75) — so the
   color reads like the desktop look but without depending on what's behind
   it pixel-for-pixel. Subtle blue undertone (B=84) gives it the "little
   blue in the green" emerald-teal feel. */
@media (max-width: 640px) {
  .hero .hero-content {
    mix-blend-mode: normal;
  }
  .hero .hero-name,
  .hero .hero-name .first-name,
  .hero .hero-name .last-name {
    /* Mobile: matches the HTML5 ADS section-title blue (#3d9bff) at full
       opacity, so the hero name visually ties to the section headings
       below. No blend mode — predictable, legible against the navy. */
    color: #3d9bff !important;
  }
}

/* Top hero image frame reset (remove debug border) + top-edge fade-out.
   mask-image fades the top ~18% of the buildings image into transparency
   so the cityscape dissolves into the page background rather than ending
   on a hard horizontal edge. */
.hero > .hero-bg .hero-bg-stack .hero-bg-img-top {
  border: 0;
  box-sizing: border-box;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 8%,
    #000 18%,
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 8%,
    #000 18%,
    #000 100%
  );
}

/* ═══════════════════════════════════════════════════════════════════════
   V3.9 rev2 — hero name "waterline" masked reveal (corrected).

   Mask design invariants:
     • Mask's content box height = h1's outer height (no padding, no extra space)
     • h1 has ZERO margin inside the mask so it sits flush against both edges
     • h1's original margin-top/bottom is HOISTED onto the mask to preserve
       the surrounding vertical rhythm in the hero layout
     • NO transform/will-change on the h1 at rest — GSAP owns transform fully
     • overflow:hidden on a static block → no stacking context, so the
       mix-blend-mode on .hero-content still flattens cleanly through here

   Starting state (from JS): .hero-name yPercent:110 → fully below mask edge.
   Ending state:            .hero-name yPercent:0   → flush at mask's bottom.
   ═══════════════════════════════════════════════════════════════════════ */
.hero .hero-name-mask {
  display: block;
  /* V6: overflow changed to VISIBLE — we're no longer clipping the h1
     vertically. The reveal is now a horizontal clip-path sweep on .hero-name
     itself (see runHeroReveal in index-scripts.js), so the mask just acts
     as a positioning wrapper. This eliminates the "bottom of letters cut off"
     problem entirely — no letterforms are clipped at any stage. */
  overflow: visible;
  position: relative;
  margin-top: -10px;
  margin-bottom: 1.75rem;
  padding-bottom: 0;
}
.hero .hero-name-mask .hero-name {
  margin-top: 0 !important;
  /* V6 — trim dropped to 0. Mask is overflow:visible now, so trimming
     the descender/leading area served no purpose. Full h1 box renders. */
  margin-bottom: 0 !important;
  line-height: 1 !important;
  /* Kill any phantom border (extension artifact). */
  border: 0 !important;
}
/* Responsive: hoist the original per-breakpoint margin-bottoms from .hero-name
   onto .hero-name-mask so vertical rhythm at small widths matches pre-mask. */
@media (max-width: 640px) {
  .hero .hero-name-mask {
    margin-bottom: 0.75rem;
  }
}
@media (max-width: 480px) {
  .hero .hero-name-mask {
    margin-bottom: 1rem;
  }
}

/* --- Lenis: keep the html + body at normal layout so Lenis's rAF scrollTop
       writes propagate. Matches portfolio-site/style.css lines 95–99. --- */
html.lenis,
html.lenis body {
  height: auto;
}
html.lenis {
  scroll-behavior: auto;
}

/* --- HTML Ads grid — override live-site's single auto-fill grid with portfolio's
       flex-of-screens structure. Ported from portfolio-site/style.css lines 855–896. --- */
/* V6.x — synced from portfolio-site: hoist --banner-row-gap to :root so the
   emails + LP grids can reference it too (portfolio declares it at :root). */
:root {
  --banner-row-gap: clamp(7rem, 15vh, 11rem);
}
.grid-banners {
  display: flex !important; /* win over style.css's grid layout */
  flex-direction: column;
  gap: var(--banner-row-gap);
  margin-top: 3rem;
}
.grid-banners-screen {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  align-items: start;
  min-height: 0;
  padding-block: 0;
  padding-right: clamp(1.5rem, 5vw, 4.25rem);
  row-gap: var(--banner-row-gap);
  column-gap: 0;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  scroll-margin-top: 4.75rem;
}
.grid-banners-screen .grid-banners-row {
  min-height: 0;
  align-self: start;
}
.grid-banners-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 2vh, 1.5rem) 2.15rem;
  width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
}
.grid-banners .card-banner {
  flex: 0 0 auto;
  /* V6.x — banners reduced from 288px per request (looked too big). */
  width: min(220px, 100%);
  max-width: 100%;
}
.grid-banners .card-banner .card-image-container {
  aspect-ratio: 6 / 5;
  overflow: hidden;
}
.grid-banners .card-banner .card-image-container .card-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #0a0a0a;
}

/* ═══════════════════════════════════════════════════════════════════════
   V3.2 FIX — water lives back INSIDE .hero-bg-stack as a flex sibling
   of buildings so the hero reads as one unified, dodged image (your
   original aesthetic). The stack keeps its color-dodge + 0.5 opacity;
   ripples inherit them and render as subtle dodged ripples over the
   water texture — integrated, not a separate strip.
   ═══════════════════════════════════════════════════════════════════════ */

/* Water is now a <div> instead of <img>, so we have to give it explicit
   dimensions for the flex stack to lay it out. Aspect ratio mirrors the
   portfolio's water.webp (wide strip). */
.hero > .hero-bg .hero-bg-stack .hero-bg-img-bottom,
.hero > .hero-bg .hero-bg-stack .hero-bg-bottom {
  width: 100%;
  aspect-ratio: 2912 / 679;
  background-size: cover;
  background-position: center top;
  flex: 0 0 auto;
  display: block;
  /* jquery.ripples wraps this element with a canvas; position:relative
     keeps the canvas pinned inside the div. */
  position: relative;
  /* Bottom-edge fade-out. The entire lower ~75% of the water strip
     gradually dissolves into transparency so the image blends into
     --page-bg and no horizontal seam survives between the hero and
     the next section (#ads also paints --page-bg, so once the water
     fades the boundary is mathematically invisible). Intermediate
     alpha stops keep the transition eased rather than linear. The
     mask also applies to the jquery.ripples canvas (sibling inside
     this element), so ripples fade alongside the water texture. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 25%,
    rgba(0, 0, 0, 0.75) 50%,
    rgba(0, 0, 0, 0.35) 75%,
    rgba(0, 0, 0, 0.10) 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 25%,
    rgba(0, 0, 0, 0.75) 50%,
    rgba(0, 0, 0, 0.35) 75%,
    rgba(0, 0, 0, 0.10) 90%,
    transparent 100%
  );
}

/* If ripples end up too muted under the stack's 0.5 opacity + color-dodge
   blend, tell me and I'll either (a) boost ripple amplitude/strength in
   hero-ripple.js, or (b) hoist the blend from the stack onto the buildings
   layer only. Keeping the current treatment by default since it preserves
   the exact look you had before any of this work started. */

/* ═══════════════════════════════════════════════════════════════════════
   V6.3 — nav bar blur on scroll.
   Over hero: both .nav and .section-nav are fully transparent with NO
   backdrop filter (keeps the hero art unobstructed).
   Scrolled past the hero (body.hero-passed, set by the scroll handler in
   index-scripts.js when hero.getBoundingClientRect().bottom <= 0):
   a translucent bg appears + 14px backdrop blur + slight saturation boost
   for a "frosted glass" feel over the content sections.
   Transition is smoothly eased (0.5s) both directions.

   Selector specificity: `body.hero-passed.with-section-nav` = (0,3,1) which
   beats style.css line 59's `body.hero-passed .nav` = (0,2,1). `!important`
   on background kept as extra safety against future CSS edits.
   ═══════════════════════════════════════════════════════════════════════ */
body.with-section-nav .nav,
body.with-section-nav .section-nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    background 0.5s ease,
    backdrop-filter 0.5s ease,
    -webkit-backdrop-filter 0.5s ease,
    box-shadow 0.5s ease;
}
body.hero-passed.with-section-nav .nav,
body.hero-passed.with-section-nav .section-nav {
  background: rgba(var(--page-bg-rgb), 0.55) !important;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  /* V6.x — 1px bottom hairline removed per request. */
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   V6.x — synced from portfolio-site: grid emails + landing pages.
   Switches from fixed card-image-container heights (live-site style.css) to
   aspect-ratio-based sizing (5/8 for emails, 2/3 for LPs), ported verbatim
   from portfolio-site/style.css lines 897–994. Uses body.with-section-nav
   for specificity so it wins over style.css.

   Structural note: live-site's .grid-lp is flat (no grid-lp-row--2/--3
   subrows), so the 2-col/3-col row overrides from portfolio are adapted to
   a single grid-template-columns on .grid-lp itself.
   ═══════════════════════════════════════════════════════════════════════ */

/* --- Emails: 3-col grid, 5/8 card-image aspect ratio --- */
body.with-section-nav .grid-emails {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  box-sizing: border-box;
  align-items: start;
  gap: var(--banner-row-gap) 3.25rem;
  row-gap: var(--banner-row-gap);
  column-gap: 3.25rem;
  padding-right: clamp(1.5rem, 5vw, 4.25rem);
  min-height: 0;
  justify-items: center;
}
body.with-section-nav .grid-emails .card {
  min-width: 0;
  width: 68%;
  max-width: 68%;
  height: 72%;
  max-height: 72%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  align-self: start;
}
body.with-section-nav .grid-emails .card-image-container {
  flex: 0 0 auto;
  height: auto;
  width: 100%;
  aspect-ratio: 5 / 8;
  box-shadow: none;
  min-width: 0;
}
/* Per-card image container heights from live-site style.css are neutralized
   by aspect-ratio above, so no nth-child overrides needed here. */

/* --- Landing pages: 2-col flat grid, 2/3 card-image aspect ratio.
       Portfolio uses sub-row grids (grid-lp-row--2/--3); live is flat so
       .grid-lp gets a single grid-template-columns matching portfolio's
       row--2 sizing (repeat(2, minmax(240px, 520px)) + 5rem column-gap). --- */
body.with-section-nav .grid-lp {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 520px));
  grid-template-rows: auto auto;
  box-sizing: border-box;
  gap: var(--banner-row-gap) 5rem;
  row-gap: var(--banner-row-gap);
  column-gap: 5rem;
  padding-right: clamp(1.5rem, 5vw, 4.25rem);
  min-height: 0;
  align-content: start;
}
body.with-section-nav .grid-lp .card {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-self: start;
}
body.with-section-nav .grid-lp .card-image-container {
  flex: 0 0 auto;
  min-height: 0;
  height: auto;
  width: 100%;
  aspect-ratio: 2 / 3;
  box-shadow: none;
}

/* --- Responsive, ported from portfolio-site/style.css @media blocks --- */
@media (max-width: 1400px) {
  body.with-section-nav .grid-emails {
    grid-template-columns: repeat(2, minmax(260px, 420px));
    grid-template-rows: auto auto auto;
    justify-content: start;
    justify-items: center;
    gap: 2.25rem;
    row-gap: var(--banner-row-gap);
    padding-right: clamp(1.25rem, 4vw, 3.5rem);
  }
  body.with-section-nav .grid-lp {
    gap: var(--banner-row-gap) 5rem;
    row-gap: var(--banner-row-gap);
  }
}
@media (max-width: 1024px) {
  body.with-section-nav .grid-emails {
    grid-template-columns: repeat(2, minmax(240px, 420px));
    grid-template-rows: auto auto auto;
    justify-content: start;
    justify-items: center;
    gap: 2rem;
    row-gap: var(--banner-row-gap);
    padding-right: clamp(1rem, 3.5vw, 2.75rem);
  }
  body.with-section-nav .grid-lp {
    grid-template-columns: repeat(2, minmax(220px, 480px));
    gap: var(--banner-row-gap) 3.5rem;
    row-gap: var(--banner-row-gap);
    column-gap: 3.5rem;
    padding-right: clamp(1rem, 3.5vw, 2.75rem);
  }
}
@media (max-width: 768px) {
  body.with-section-nav .grid-emails {
    grid-template-columns: repeat(2, minmax(220px, 380px));
    grid-template-rows: auto auto auto;
    justify-content: start;
    justify-items: center;
    gap: 1.75rem;
    row-gap: var(--banner-row-gap);
    padding-right: clamp(0.85rem, 3vw, 2.25rem);
  }
  body.with-section-nav .grid-lp {
    grid-template-columns: 1fr 1fr;
    gap: var(--banner-row-gap) 2rem;
    row-gap: var(--banner-row-gap);
    column-gap: 2rem;
    padding-right: clamp(0.85rem, 3vw, 2.25rem);
  }
}
@media (max-width: 640px) {
  body.with-section-nav .grid-emails {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(
      6,
      minmax(calc((100svh - 5rem) / 2 * 0.18), auto)
    );
    justify-content: stretch;
    justify-items: center;
    gap: 1.5rem;
    row-gap: var(--banner-row-gap);
    max-width: min(364px, 98vw);
    margin-left: auto;
    margin-right: auto;
    padding-right: clamp(0.85rem, 3vw, 2.25rem);
  }
  body.with-section-nav .grid-emails .card {
    width: 52%;
    max-width: 52%;
  }
  body.with-section-nav .grid-emails .card-image-container {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
  }
  body.with-section-nav .grid-lp {
    grid-template-columns: minmax(260px, 96vw);
    gap: var(--banner-row-gap);
    row-gap: var(--banner-row-gap);
    justify-content: stretch;
    padding-right: clamp(0.85rem, 3vw, 2.25rem);
  }
  /* RESPONSIVE FIX (banners): at narrow widths only one 220px banner fits per
     row, and the row stays justify-content: flex-start with the screen's
     padding-right intact — so each banner reads as a small left-aligned strip
     with empty space to its right. Two coordinated tweaks:
       1. Center the row so any leftover space is split L/R evenly.
       2. Drop the screen's right-only padding so the centering is symmetric
          inside the section's 5% gutter.
       3. Bump the banner up from 220px → min(280px, 92vw) so it fills more of
          the row (about 27% wider). Aspect ratio is 6:5 so a 280px banner is
          ~233px tall — still phone-friendly, no scroll cost.
     2-up rows (like the Paramount / HPE / Emirates pairs) keep working at
     wider mobile because flex-wrap still allows them when there's room. */
  .grid-banners-row {
    justify-content: center;
  }
  .grid-banners-screen {
    padding-right: 0;
  }
  .grid-banners .card-banner {
    width: min(280px, 92vw);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — ultrawide (>=1600px) and 4K (>=2200px).
   The grids below have no upper bound by default, so on a 27" / ultrawide /
   4K monitor cards span an uncomfortably wide area and reading rhythm drifts.
   Cap the comfortable line length while preserving the left-aligned, indented
   feel of the existing design (sections still own their 5% gutters from
   style.css; this just keeps content from going edge-to-edge on giant displays).
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1600px) {
  .grid-banners,
  body.with-section-nav .grid-emails,
  body.with-section-nav .grid-lp {
    max-width: 1500px;
  }
  .grid-banners-screen {
    /* Slightly more breathing room between the screens at large sizes. */
    padding-right: clamp(2rem, 4vw, 5.5rem);
  }
  /* Hero name has a max via clamp() in style.css (`clamp(4rem, 7vw, 8rem)`),
     so it already caps at 128px — no override needed here. */
}
@media (min-width: 2200px) {
  .grid-banners,
  body.with-section-nav .grid-emails,
  body.with-section-nav .grid-lp {
    max-width: 1800px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — extra-narrow phone (<=380px).
   Small Androids and the iPhone SE 1st-gen sit at 320–375px wide. Everything
   above (640/480 breakpoints) keeps the layout sane at 380px+, but the hero
   name + tagline + section-nav can crowd. These are the smallest tweaks needed
   to prevent overflow on the genuinely-tiny end of the spectrum.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  /* Hero name was clamp(2.25rem, 12vw, 4.5rem) — 12vw at 320px = 38.4px,
     fine for "FATIMA OSMAN" but tight. Drop the floor a touch. */
  .hero-name {
    font-size: clamp(2rem, 11vw, 4rem) !important;
  }
  /* Section-nav (HTML5 Ads / Emails / Landing Pages) is space-between at
     <=640px in style.css. At <=380px the labels can wrap-collide. Already
     `white-space: nowrap` so they'll just shrink to fit; tighten padding. */
  .section-nav .section-nav-link {
    padding: 0 0.25rem !important;
    font-size: 0.72rem !important;
  }
  /* Section labels (01/02/03) are display:none on index already. No-op. */
}

/* ═══════════════════════════════════════════════════════════════════════
   V6.x — Nav copy color + size override. Style.css sets nav links + nav-logo
   color to #c99c9c and font-size to calc(0.95rem - 2px) / calc(1.1rem - 2px).
   Matching that specificity here and updating color + reducing each size
   by another 2px.
   ═══════════════════════════════════════════════════════════════════════ */
body.with-section-nav .nav a,
body.with-section-nav .section-nav a {
  color: var(--page-text);
  /* V6.x — reduced a bit further (was calc(0.95rem - 4px) = 11.2px). */
  font-size: calc(0.95rem - 4.5px); /* ≈ 9.7px */
}
body.with-section-nav .nav .nav-logo {
  color: var(--page-text);
  /* V6.x — bumped back up slightly (was calc(1.1rem - 5.5px) = 12.1px). */
  font-size: calc(1.1rem - 4.5px); /* ≈ 13.1px */
}

/* V6.x — tighter horizontal gaps between nav items + section-nav items. */
body.with-section-nav .nav .nav-links {
  gap: 0.4rem;
}
body.with-section-nav .section-nav .section-nav-container {
  gap: 0.4rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — nav + section-nav sizes scale up on large desktops.
   The base sizes (~10.7px links, ~13.1px logo) are tuned for laptop
   widths. On a 1440px+ monitor they read as cramped — bump up at two
   breakpoints. Section-nav-container gap also opens up so the labels
   aren't crowded. Using the existing body.with-section-nav specificity
   so these win against style.css.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  body.with-section-nav .nav a,
  body.with-section-nav .section-nav a {
    font-size: calc(0.95rem - 1px); /* ≈ 14.2px */
  }
  body.with-section-nav .nav .nav-logo {
    font-size: calc(1.1rem + 1.5px); /* ≈ 19.1px */
  }
  body.with-section-nav .nav .nav-links {
    gap: 0.65rem;
  }
  body.with-section-nav .section-nav .section-nav-container {
    gap: 0.65rem;
  }
}
@media (min-width: 1920px) {
  body.with-section-nav .nav a,
  body.with-section-nav .section-nav a {
    font-size: calc(0.95rem + 1.5px); /* ≈ 16.7px */
  }
  body.with-section-nav .nav .nav-logo {
    font-size: calc(1.1rem + 4.5px); /* ≈ 22.1px */
  }
  body.with-section-nav .nav .nav-links {
    gap: 0.85rem;
  }
  body.with-section-nav .section-nav .section-nav-container {
    gap: 0.85rem;
  }
}