/* ============================================================
   Grow 2026 — Utsav's portfolio
   Design tokens measured from Figma (Grow 2026, node 339:13523)
   ============================================================ */

:root {
  --green: #009316;
  --charcoal: #424242;
  --gray-dark: #6b6b6b;
  --gray-medium: #aeadad;
  --gray-neutral: #d9d9d9;
  --gray-light: #eaeaea;
  --black: #222222;
  --white: #ffffff;

  --font: 'Albert Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* max-width values include the container's own padding (border-box),
     so the resulting content box matches the widths measured in Figma:
     1120px inside a 1440px frame, 1360px inside the same frame. */
  --content-width: 1168px;
  --stage-width: 1440px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--gray-light);
  color: var(--charcoal);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
}

.container {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 24px;
}

.stage-container {
  width: 100%;
  max-width: var(--stage-width);
  margin: 0 auto;
  padding: 0 40px;
}

/* ---------- media placeholder (real assets swap in automatically once
   dropped into assets/images/ with the filename shown) ---------- */

.media {
  position: relative;
  overflow: hidden;
  background: repeating-linear-gradient(
    135deg,
    rgba(107, 107, 107, 0.35),
    rgba(107, 107, 107, 0.35) 10px,
    rgba(107, 107, 107, 0.2) 10px,
    rgba(107, 107, 107, 0.2) 20px
  );
}

.media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--object-pos, 50% 50%);
}

.media.media-contain img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: var(--contain-w, 100%);
  max-height: var(--contain-h, 100%);
  object-fit: contain;
}

.media.media-top img {
  object-position: top;
}

.media .media-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  font-size: 11px;
  font-family: 'SFMono-Regular', Consolas, monospace;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.15);
  letter-spacing: 0.02em;
  word-break: break-all;
}

.media.loaded .media-label {
  display: none;
}

/* ---------- buttons / pills ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 16px 32px;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
}

.btn-primary {
  background: var(--green);
  color: var(--white);
}

.btn-dark {
  background: var(--black);
  padding: 16px 16px 16px 24px;
  color: var(--gray-light);
}

.btn-outline {
  background: transparent;
  border: 1.4px solid var(--gray-medium);
  color: var(--black);
  padding: 16px 32px;
}

.access-note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--gray-dark);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  background: rgba(107, 107, 107, 0.3);
  opacity: 0.7;
  color: var(--gray-neutral);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  padding: 4px 12px;
  border-radius: 4px;
  white-space: nowrap;
}

.icon-caption {
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  max-width: calc(100% - 40px);
}

.icon-caption .icon {
  flex-shrink: 0;
  font-size: 16px;
}

.case-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
}

.case-heading {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--gray-dark);
  margin: 24px 0 0;
}

.case-heading strong,
.case-heading .em {
  color: var(--white);
  font-weight: 700;
}

.case-heading .em {
  text-decoration: underline dotted;
  text-decoration-thickness: 8%;
}

.case-heading .dotted {
  text-decoration: underline dotted;
  text-decoration-thickness: 8%;
}

/* ============================================================
   Nav
   ============================================================ */

.site-nav {
  background: var(--gray-light);
  padding: 24px 0 0;
  position: relative;
  z-index: 20;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.site-nav.nav-hidden {
  opacity: 0;
  pointer-events: none;
}

.site-nav .container {
  max-width: var(--content-width);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 500;
  color: var(--charcoal);
}

.nav-badge .icon {
  color: var(--green);
}

.rotator {
  display: inline-block;
  white-space: nowrap;
  vertical-align: bottom;
}

.rotator-cursor {
  display: inline-block;
  margin-left: 1px;
  color: var(--green);
  animation: rotator-blink 0.9s step-end infinite;
}

@keyframes rotator-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rotator-cursor {
    animation: none;
  }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-item {
  position: relative;
}

.nav-trigger,
.nav-plain {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 16px;
  font-weight: 500;
  color: var(--charcoal);
  transition: color 0.15s ease;
}

.nav-trigger .icon {
  transition: transform 0.15s ease, color 0.15s ease;
}

.nav-item:hover .nav-trigger,
.nav-item.open .nav-trigger,
.nav-item:focus-within .nav-trigger {
  color: var(--green);
}

.nav-item:hover .nav-trigger .icon,
.nav-item.open .nav-trigger .icon,
.nav-item:focus-within .nav-trigger .icon {
  color: var(--green);
}

.nav-item.open .nav-trigger .icon,
.nav-item:hover .nav-trigger .icon,
.nav-item:focus-within .nav-trigger .icon {
  transform: rotate(180deg);
}

/* Invisible hit-area bridge: the dropdown starts flush against the
   trigger (top:100%) so moving the pointer down into it never crosses
   a dead zone; the visual gap comes from padding-top on this element,
   not from offsetting it, so :hover never drops mid-travel. */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  padding-top: 12px;
  display: none;
  z-index: 60;
}

/* Opens above the trigger instead of below — used where the trigger sits
   low enough that a downward panel would run past the viewport edge. */
.nav-dropdown-up {
  top: auto;
  bottom: 100%;
  padding-top: 0;
  padding-bottom: 12px;
}

.nav-dropdown-card {
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-item.open .nav-dropdown,
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  display: block;
}

/* The hero "let's talk" button reuses the dropdown mechanics but keeps
   its own button styling — don't let the plain nav-trigger colors leak in. */
.btn-dark.nav-trigger,
.nav-item:hover .btn-dark.nav-trigger,
.nav-item.open .btn-dark.nav-trigger,
.nav-item:focus-within .btn-dark.nav-trigger {
  color: var(--gray-light);
}

.btn-dark.nav-trigger .icon,
.nav-item:hover .btn-dark.nav-trigger .icon,
.nav-item.open .btn-dark.nav-trigger .icon,
.nav-item:focus-within .btn-dark.nav-trigger .icon {
  color: var(--gray-light);
}

/* Measured against get_design_context on 339:14651 ("work" dropdown)
   and 339:14635 ("socials") — title is 16px/600 #424242 (not the 14px
   black this had), icon-to-title gap is 6px (not 8), and the row's
   own radius is 4px (not 6). */
.dropdown-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  padding: 8px;
  border-radius: 4px;
  text-align: left;
  color: var(--charcoal);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}

.dropdown-row:hover {
  background: rgba(0, 147, 22, 0.08);
  color: var(--green);
}

.dropdown-row .icon {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  color: var(--gray-dark);
  transition: color 0.15s ease;
}

.dropdown-row:hover .icon {
  color: var(--green);
}

.dropdown-row:hover .dropdown-text small {
  color: var(--green);
  opacity: 0.75;
}

/* Figma's row is itself a flex-column of [icon+title line, subtitle
   line] — gap-[8px] between them — not an icon beside a two-line
   text column. Kept the icon-beside-text nesting (shared by every
   .dropdown-row usage), so .dropdown-text's own gap matches Figma's
   row-level gap, and the subtitle is pulled back by icon width + gap
   (16 + 6 = 22px) and widened by the same to span the full row
   instead of only the space left after the icon — the same fix
   applied to the floating menu's copy of this component, needed here
   too since the underlying markup pattern is identical. */
.dropdown-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.dropdown-text strong {
  font-weight: 600;
}

.dropdown-text small {
  margin-left: -22px;
  width: calc(100% + 22px);
  max-width: calc(100% + 22px);
  color: var(--charcoal);
  opacity: 0.8;
  font-size: 14px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-row-compact .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Measured against 339:14635 ("socials" dropdown) — same 16px/600
   #424242 title, 6px icon gap, 4px radius as .dropdown-row. */
.nav-dropdown-compact .dropdown-row-compact {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-radius: 4px;
  color: var(--charcoal);
  font-size: 16px;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-dropdown-compact .dropdown-row-compact:hover {
  background: rgba(0, 147, 22, 0.08);
  color: var(--green);
}

.nav-dropdown-compact .dropdown-row-compact:hover .icon {
  color: var(--green);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--black);
  border: 1px solid var(--gray-dark);
  border-radius: 12px;
  font-size: 20px;
  color: var(--gray-light);
}

/* ============================================================
   Floating menu — replaces the nav once the page is scrolled
   ============================================================ */

/* Figma (node 339:13556) places the trigger/panel right-aligned with the
   nav's own content edge, not centered — right edge sits flush with the
   same 1168px content column the site-nav uses, via the same max-width +
   padding math as .container. Sizing the row to that width and pushing
   its single child (trigger, or the open panel) to the end also keeps
   the panel from ever overflowing past the viewport edge. */
/* Sits 80px to the right of the nav's own content edge — but only
   where there's room: right is the content-edge inset
   ((100vw - content-width)/2 + 24px) minus 80px, floored at 24px so it
   never pushes past the viewport on narrower desktop widths (it just
   falls back to sitting flush at the standard edge there, same as
   before this shift). */
.floating-menu {
  position: fixed;
  top: 24px;
  left: 0;
  right: max(24px, calc((100vw - var(--content-width)) / 2 + 24px - 80px));
  z-index: 70;
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-16px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.floating-menu.visible {
  opacity: 1;
  transform: translateY(0);
}

.floating-menu.visible .floating-menu-trigger,
.floating-menu.visible .floating-menu-panel {
  pointer-events: auto;
}

.floating-menu-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  background: var(--black);
  border: 1px solid var(--gray-dark);
  color: var(--gray-light);
  font-size: 15px;
  font-weight: 500;
  padding: 0 12px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.floating-menu.open .floating-menu-trigger {
  display: none;
}

/* width: min(840px, 100%) — sized against the flex parent's own safe
   inner width, not 100vw, since 100vw includes the vertical scrollbar's
   width and can push the right edge past what's actually visible. */
.floating-menu-panel {
  display: none;
  width: min(840px, 100%);
  min-width: 0;
  background: var(--black);
  border: 1px solid var(--gray-dark);
  border-radius: 8px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15);
  padding: 32px;
}

.floating-menu.open .floating-menu-panel {
  display: block;
}

.floating-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

.floating-menu-header span {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-dark);
  opacity: 0.8;
}

.floating-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: var(--gray-light);
}

.floating-menu-columns {
  display: flex;
  align-items: stretch;
  gap: 24px;
}

/* get_design_context on 339:14014 gives each row an exact real content
   width — 150 / 201 / 112 / 169px — with the divider between columns a
   separate, independent element (a rotated hairline image), not a
   border folded into the column's own box. Folding it in via
   padding-right/border-right (border-box) ate into the declared width,
   squeezing every row's actual content area by 25px and clipping
   labels in every column but the last — that was the real bug, not
   the width numbers themselves. Using real sibling .floating-menu-divider
   elements instead means each column gets its full measured width for
   content, and align-items: stretch lets the dividers span the row's
   full height (matching Figma's self-stretch) instead of only as tall
   as their own column. */
.floating-menu-col {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fm-col-work { width: 150px; }
.fm-col-talk { width: 201px; }
.fm-col-socials { width: 112px; }
.fm-col-resume { width: 169px; }

/* Zero-width in the flex layout (matching Figma's own 0-width divider
   slot exactly, with the line drawn decoratively) rather than a real
   1px-wide flex item — a real 1px item plus the 24px gap on each side
   made the row a few px wider than the panel's 776px inner content
   area, eating into the last column's right padding. */
.floating-menu-divider {
  flex: 0 0 auto;
  width: 0;
  position: relative;
}

/* The actual line asset (imgLine11) is #424242 at 1.4px, but at 50%
   opacity — using it at full opacity (as before) reads as a
   noticeably darker/heavier line than Figma's faint divider. */
.floating-menu-divider::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1.4px;
  background: var(--charcoal);
  opacity: 0.5;
}

/* align-items: flex-start, not center — .dropdown-row rows with a
   subtitle stack icon+title above the (now full-width) subtitle line,
   so centering the icon against that whole two-line block floats it
   between the lines instead of level with the title. flex-start lines
   it up with the title's own line; .dropdown-row-compact (single-line,
   socials/resume) renders the same either way. */
.floating-menu-col .dropdown-row,
.floating-menu-col .dropdown-row-compact {
  display: flex;
  align-items: flex-start;
  width: 100%;
  white-space: nowrap;
  gap: 6px;
  padding: 8px;
  border-radius: 4px;
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
}

.floating-menu-col .dropdown-row:hover,
.floating-menu-col .dropdown-row-compact:hover {
  background: var(--charcoal);
  color: var(--white);
}

.floating-menu-col .dropdown-row .icon,
.floating-menu-col .dropdown-row-compact .icon {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.7);
}

.floating-menu-col .dropdown-row:hover .icon,
.floating-menu-col .dropdown-row-compact:hover .icon {
  color: var(--white);
}

/* In Figma's own layout (339:14014) the subtitle isn't nested next to
   the icon — it's a full-width sibling below the icon+title line, so
   it gets the row's whole content width (185px in a 201px column).
   Nesting it inside .dropdown-text next to the icon here left it only
   the space after the icon (163px), which was too narrow for
   "utsavsingh5600@gmail.com" and forced it to truncate. Pulling it
   left by icon width + gap (16 + 6) and widening it by the same
   reproduces that full-width layout without restructuring the shared
   .dropdown-row markup used elsewhere. */
.floating-menu-col .dropdown-text small {
  margin-left: -22px;
  width: calc(100% + 22px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% + 22px);
  color: var(--gray-medium);
  opacity: 0.8;
  font-size: 14px;
  font-weight: 400;
}

.floating-menu-col .dropdown-row:hover .dropdown-text small {
  color: var(--gray-medium);
  opacity: 0.8;
}

.floating-menu-col h4 {
  margin: 0 0 4px;
  padding: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-dark);
}

@media (max-width: 900px) {
  .floating-menu-panel {
    padding: 20px;
  }
  .floating-menu-columns {
    flex-wrap: wrap;
    row-gap: 20px;
  }
  .floating-menu-col {
    flex: 1 1 45%;
  }
  .floating-menu-divider {
    display: none;
  }
}

@media (max-width: 743px) {
  .floating-menu {
    display: none;
  }
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 80px 0;
}

.hero .container {
  max-width: var(--content-width);
}

.hero-inner {
  max-width: 840px;
}

.hero-eyebrow {
  font-size: 40px;
  font-weight: 400;
  color: var(--gray-dark);
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}

.hero-eyebrow strong {
  color: var(--green);
  font-weight: 700;
}

.hero-title {
  font-size: 160px;
  line-height: 1.02;
  font-weight: 700;
  color: var(--green);
  letter-spacing: -0.02em;
  text-decoration: underline;
  text-decoration-color: var(--gray-neutral);
  text-decoration-thickness: 2%;
  margin: 0;
}

.hero-sub {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--green);
  margin: 40px 0 0;
}

.hero-sub span {
  color: var(--gray-dark);
}

.hero-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 48px;
}

/* ============================================================
   Dark intro strip
   ============================================================ */

/* get_metadata on the real sequential page frame (339:14714 "desktop",
   not the scrolled-canvas snapshot used earlier) gives the actual
   gaps: hero-bottom to heading-top is 240px, heading-bottom to the
   case-study content start is 280px. Hero's own bottom padding is
   80px, and .case-study's own top padding (120px, shared by every
   case-study section) stays as-is, so .intro absorbs the remainder on
   both sides: 240 - 80 = 160 above, 280 - 120 = 160 below. */
.intro {
  background: var(--black);
  padding: 160px 0;
}

.intro .container {
  max-width: var(--content-width);
  position: relative;
}

.intro-heading {
  font-size: 60px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.02em;
  text-decoration: underline;
  text-decoration-color: var(--gray-dark);
  text-decoration-thickness: 6%;
  margin: 0;
  max-width: 1120px; /* real Figma text-box width (node 339:13559) — 1000px wrapped to 4 lines instead of 3 */
}

/* Figma's avatar isn't an 80x80 square crop: the visible frame is
   80x48, showing a 22px-to-70px vertical slice of the 80x80 source
   image (node 339:13561/13562) — sitting 13px below the heading's top
   edge and 89px inside the *text column's* (1120px) right edge. But
   .intro-avatar's containing block is .container's padding box
   (1168px, padding included), not its content box — so the CSS
   `right` offset needs the extra 24px of container padding added
   (89 + 24 = 113) or it lands 24px too far right, outside the text
   column entirely. */
.intro-avatar {
  position: absolute;
  top: 12px;
  right: 109px;
  width: 80px;
  height: 48px;
  border-radius: 4px;
  overflow: hidden;
}

.intro-avatar.media img {
  position: absolute;
  inset: auto;
  top: -22px;
  left: 0;
  width: 80px;
  height: 80px;
  object-fit: cover;
}

/* ============================================================
   Case studies (art-directed collage stages)
   ============================================================ */

.case-study {
  background: var(--black);
  padding: 120px 0;
}

.case-study.case-alt {
  background: #1a1a1a;
}

.case-eyebrow {
  font-size: 20px;
  font-weight: 500;
  color: var(--gray-dark);
  letter-spacing: -0.02em;
  margin: 0 0 48px;
}

.case-eyebrow span {
  color: var(--gray-medium);
}

.stage-item.case-eyebrow {
  margin: 0;
  z-index: 2;
}

.stage {
  position: relative;
  width: 100%;
}

.stage-item {
  position: absolute;
}

.stage-item .media,
.stage-item .card {
  width: 100%;
  height: 100%;
}

.rounded-sm { border-radius: 4px; }
.rounded { border-radius: 8px; }
.rounded-lg { border-radius: 12px; }

.card-dark {
  background: #0d0d0d;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 40px 36px;
  border-radius: 12px;
}

.card-dark .agent-dot-grid {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: rgba(0, 112, 255, 0.12);
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 12px;
}

.card-dark .agent-dot-grid span {
  background: #0070ff;
  border-radius: 1px;
}

.card-dark .agent-copy strong {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}

.card-dark .agent-copy span {
  font-size: 14px;
  opacity: 0.6;
}

/* z-index: 1 — the progressive image loader appends the real <img>
   after these (script.js's .media[data-src] handler), so once it
   loads it paints on top and hides them entirely without this. */
.bubble-tag {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #0070ff;
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  font-weight: 500;
  padding: 8px 13px;
  border-radius: 40px;
  box-shadow: 0 20px 20px rgba(88, 92, 95, 0.1);
  white-space: nowrap;
}

.cursor-flag {
  position: absolute;
  z-index: 1;
  font-size: 20px;
  color: var(--white);
  transform: rotate(170deg);
}

.scroll-note {
  font-size: 20px;
  font-weight: 500;
  color: var(--gray-dark);
  letter-spacing: -0.02em;
  margin: 0;
}

.scroll-note .dim {
  color: var(--gray-medium);
}

/* ============================================================
   Legacy work grid
   ============================================================ */

.legacy {
  background: #1a1a1a;
  padding: 120px 0 160px;
}

.legacy-block {
  margin-top: 120px;
}

.legacy-block:first-child {
  margin-top: 0;
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  background: var(--gray-light);
  padding: 48px 0;
}

.site-footer .container {
  max-width: var(--content-width);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  color: var(--gray-dark);
}

.footer-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gray-dark);
}

.footer-note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ============================================================
   Floating "ask anything" bar
   ============================================================ */

.ask-bar {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(24px);
  width: min(600px, calc(100vw - 32px));
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.ask-bar.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .ask-bar {
    transition: opacity 0.3s ease;
    transform: translateX(-50%);
  }
}

.ask-bar form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(34, 34, 34, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 8px 8px 8px 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.ask-bar input {
  flex: 1;
  background: none;
  border: none;
  color: var(--white);
  font-family: inherit;
  font-size: 16px;
  outline: none;
}

.ask-bar input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.ask-bar .ask-icon {
  color: rgba(255, 255, 255, 0.55);
  font-size: 16px;
}

.ask-bar button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ask-reply {
  margin: 10px 4px 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(34, 34, 34, 0.92);
  border-radius: 10px;
  padding: 10px 14px;
  display: none;
}

.ask-reply.show {
  display: block;
}

/* ============================================================
   Mobile nav overlay
   ============================================================ */

.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--black);
  border-left: 1px solid var(--gray-dark);
  z-index: 100;
  padding: 33px 15px;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.mobile-menu.open {
  transform: translateX(0);
}

.mobile-menu .nav-badge {
  color: var(--white);
}

.mobile-menu-close {
  position: absolute;
  top: 23px;
  right: 15px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gray-dark);
  border-radius: 8px;
  color: var(--white);
  font-size: 18px;
}

/* Figma (nodes 339:15813/15830/15861) has "work" and "let's talk" drill
   into their own full screens with a "back" row, not accordions that
   expand in place — each .mobile-menu-screen is one of those screens,
   toggled by script.js instead of all being laid out at once. */
.mobile-menu-screen {
  margin-top: 54px;
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
}

.mobile-menu-back + .mobile-menu-links {
  margin-top: 20px;
}

.mobile-plain-link,
.mobile-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 16px 12px;
  border-bottom: 1px solid var(--charcoal);
  color: var(--white);
  font-size: 20px;
  font-weight: 500;
  font-family: inherit;
  text-align: left;
}

.mobile-menu-item > span:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mobile-menu-back {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 16px 12px;
  color: var(--gray-medium);
  font-size: 20px;
  font-weight: 500;
  font-family: inherit;
}

.icon-flip {
  transform: scaleX(-1);
}

.mobile-pill {
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(107, 107, 107, 0.3);
  opacity: 0.7;
  color: var(--gray-neutral);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.mobile-menu-contact-pills {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 40px;
  padding: 0 12px;
}

.mobile-contact-pill {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  border-radius: 4px;
  background: rgba(107, 107, 107, 0.3);
  opacity: 0.7;
  color: var(--gray-neutral);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-family: inherit;
}

.mobile-contact-pill strong {
  font-weight: 500;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 900px) {
  .hero-title { font-size: 72px; }
  .intro-heading { font-size: 42px; }
}

@media (max-width: 743px) {
  .nav-links { display: none; }

  /* Fixed to the viewport instead of scrolling away with .site-nav —
     there's no floating-menu replacement on mobile (that's a
     desktop-only affordance), so the menu button has to stay reachable
     on its own while the page scrolls. */
  .nav-toggle {
    display: flex;
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 90;
  }

  /* Figma's mobile hero (node 339:15482) is top-aligned and content-sized
     (pt-144 + content + pb-80), not vertically centered in 100vh like
     desktop — and the whole headline (eyebrow + title) runs as one
     continuous 48px/600 block with no underline, not a small-label/
     giant-headline split. */
  .hero { min-height: 0; display: block; padding: 64px 0 80px; }
  .hero .container { padding: 0 16px; }
  .hero-inner { max-width: 100%; }
  .hero-eyebrow {
    font-size: 48px;
    font-weight: 600;
    line-height: 1;
    margin: 0;
  }
  .hero-eyebrow strong { font-weight: 600; }
  .hero-title {
    font-size: 48px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
  }
  .hero-sub { font-size: 18px; margin-top: 24px; }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .hero-actions .btn { width: 100%; }

  .intro { padding: 64px 0; }
  .intro-heading { font-size: 28px; }
  .intro-avatar { position: relative; top: auto; right: auto; margin-top: 24px; }
  .intro .container { display: flex; flex-direction: column; }

  .case-study { padding: 64px 0; }
  .case-heading { font-size: 24px; }

  .stage-desktop-only { display: none; }
  .stage-mobile-only { display: block; }

  .mobile-scroller {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    margin: 0 -24px 24px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .mobile-scroller .media,
  .mobile-scroller .card-dark,
  .mobile-scroller .card-shot {
    flex: 0 0 260px;
    scroll-snap-align: start;
    aspect-ratio: 320 / 280;
    border-radius: 12px;
  }

  .legacy-block .mobile-scroller .media { flex-basis: 220px; }

  .ask-bar { bottom: 16px; width: calc(100vw - 24px); }
  .ask-bar form { padding: 6px 6px 6px 16px; }

  .site-footer .container { flex-wrap: wrap; font-size: 15px; }
}

@media (min-width: 744px) {
  .stage-mobile-only { display: none; }
}