:root {
  --ink: #0f172a;
  --serif: 'Frank Ruhl Libre', Georgia, serif;
  --sans: 'DM Sans', Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Custom black-pen cursor everywhere by default; clickable elements
     (below) override back to a pointer. Hotspot sits at the pen's tip. */
  cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8cG9seWdvbiBwb2ludHM9IjIzLjIsMS4yIDI5LjMsNi4zIDI2LjEsMTAuMiAyMC4wLDUuMCIgZmlsbD0iIzExMTExMSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cG9seWdvbiBwb2ludHM9IjIxLjgsNS4yIDI1LjYsOC40IDEyLjgsMjMuNyA4LjksMjAuNSIgZmlsbD0iIzExMTExMSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cG9seWdvbiBwb2ludHM9IjguOSwyMC41IDEyLjgsMjMuNyA2LjQsMjcuNSIgZmlsbD0iIzExMTExMSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==") 6 28, auto;
}

a,
button {
  cursor: pointer;
}

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

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

.page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  isolation: isolate;
  background: #000000;
}

/* Intro reveal sequence: the background is visible immediately; the hero
   name types on top of it while everything else stays hidden. Once typing
   finishes, script.js removes the "intro" class and the rest fades in. */

.site-header,
.m-header,
.hero-subtitle,
.m-hero-subtitle,
.scroll-indicator,
.m-scroll-indicator,
.main-content,
.m-project-list,
.m-collab-footer {
  opacity: 1;
  transition: opacity 1.1s ease;
}

.page.intro .site-header,
.page.intro .m-header,
.page.intro .hero-subtitle,
.page.intro .m-hero-subtitle,
.page.intro .scroll-indicator,
.page.intro .m-scroll-indicator,
.page.intro .main-content,
.page.intro .m-project-list,
.page.intro .m-collab-footer {
  opacity: 0;
}

/* Background decor */

.bg-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.bg-gradient {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(119.27deg, rgba(194, 222, 255, 0.8) 8.31%, rgba(223, 242, 255, 0.8) 21.5%, rgba(229, 255, 241, 0.8) 42.59%, rgba(218, 231, 254, 0.8) 79.65%, rgba(208, 234, 255, 0.8) 96.33%),
    linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
}

.bg-texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.1;
}

/* Header / nav */

.site-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 16px 0;
  transition: opacity 0.35s ease;
}

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

.nav-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 12px 16px;
  border-radius: 100px;
  border: 1px solid #ffffff;
  background: rgba(255, 255, 255, 0.23);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0px 4px 16px 0px rgba(120, 90, 200, 0.06);
}

.nav-link {
  padding: 6px 14px;
  border-radius: 20px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 19.5px;
  letter-spacing: 0.91px;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.7);
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.5);
  color: var(--ink);
}

/* Contrast-adaptive nav: whenever a dark card image/media block scrolls
   underneath the sticky nav, script.js adds this class so the text (and,
   on mobile, the menu icon) switch to light-on-dark instead of staying
   dark-on-dark — keeping WCAG-adequate contrast either way. */
.site-header.nav-on-dark .nav-link {
  color: rgba(255, 255, 255, 0.85);
}

.site-header.nav-on-dark .nav-link:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* Hero */

.hero {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 230px 24px;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1091.92px;
}

.hero-title {
  position: relative;
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 140px;
  line-height: 1.05;
  letter-spacing: -0.6px;
  text-align: center;
  white-space: nowrap;
  /* Lives on the wrapper, not the masked span below, purely so the ::after
     caret can read it without also being clipped by the text's own mask
     (masking an element clips its whole subtree, pseudo-elements
     included) — that's what let a sliver of "J" leak out alongside the
     caret before typing had even started. */
  --reveal: 0%;
}

.hero-title-text {
  padding: 0 0.06em;
  background-image: linear-gradient(22.63deg, rgb(55, 55, 55) 15.5%, rgb(0, 110, 189) 45.2%, rgb(27, 27, 27) 119.38%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Typing reveal: the text itself never changes and the box never
     resizes — only this mask sweeps left to right — so nothing about the
     element's layout or its gradient fill ever needs to recompute. */
  -webkit-mask-image: linear-gradient(to right, #000 var(--reveal), transparent var(--reveal));
  mask-image: linear-gradient(to right, #000 var(--reveal), transparent var(--reveal));
}

/* Typewriter caret riding the reveal edge — `left` reuses the same
   --reveal custom property as the mask sweep, so the bar tracks the
   typing progress without any timing logic of its own. script.js adds
   .typing-done the instant the sweep finishes to shut it off. */
.page.intro .hero-title::after {
  content: "";
  position: absolute;
  top: 0.14em;
  bottom: 0.08em;
  left: var(--reveal);
  width: 4px;
  background: #006ebd;
  animation: caret-blink 0.9s steps(1) infinite;
}

.page.intro .hero-title.typing-done::after {
  display: none;
}

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

@media (prefers-reduced-motion: reduce) {
  .page.intro .hero-title::after {
    animation: none;
  }
}

.hero-subtitle {
  margin: 0;
  padding: 0 0.06em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 50px;
  line-height: 1.05;
  letter-spacing: -0.6px;
  text-align: center;
  white-space: nowrap;
  background-image: linear-gradient(49.93deg, rgb(55, 55, 55) 15.5%, rgba(1, 35, 60, 0.58) 45.2%, rgb(27, 27, 27) 119.38%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Scroll-down hint: glass pill styling matches the nav and project cards.
   script.js fades it out permanently on the first scroll — it's a one-time
   nudge, not a persistent nav element, so it never comes back on scroll-up. */
.scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 56px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid #ffffff;
  background: rgba(255, 255, 255, 0.23);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0px 4px 16px 0px rgba(120, 90, 200, 0.06);
  transition: opacity 1.1s ease, background 0.2s ease;
}

/* Same hover treatment as .nav-link: background brightens on hover. */
.scroll-indicator:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* viewBox is "0 0 60 60" — the same coordinate space as the 60px circle
   itself, since the chevron coordinates were lifted directly from Figma's
   circle-local geometry. So the icon must fill the whole circle (not a
   smaller inner box) or that space gets rescaled a second time, shrinking
   the chevrons well below spec. */
.scroll-indicator-icon {
  width: 100%;
  height: 100%;
}

/* Main content wrapper */

.main-content {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
}

.double-rule {
  width: 100%;
  height: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

/* Work / case study cards */

.work-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  width: 100%;
  max-width: 1254px;
  padding: 0 24px;
}

.project-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
  height: 600px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.23);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0px 4px 16px 0px rgba(120, 90, 200, 0.06);
  transition: box-shadow 0.4s ease;
  overflow: clip;
}

.project-card[data-case-study],
.m-project-card[data-case-study] {
  cursor: pointer;
}

.project-card:hover,
.m-project-card:hover {
  box-shadow: 0px 32px 128px 0px rgba(80, 60, 160, 0.2);
}

/* Animated gradient stroke on hover — colors pulled straight from the
   site's own palette (ink navy, the hero's signature blue, the page
   background's light blue) so it reads as part of the same system. Drawn
   as a ring inset flush with the card's own edge (never extending past
   it) so it isn't clipped by the card's overflow:clip, and built with a
   mask instead of a solid background so only the border area shows. */
.project-card::before,
.m-project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(115deg, #0f172a, #006ebd, #c2deff, #006ebd, #0f172a);
  background-size: 250% 250%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  animation: card-border-flow 5s linear infinite;
  animation-play-state: paused;
}

.project-card:hover::before,
.m-project-card:hover::before {
  opacity: 1;
  animation-play-state: running;
}

@keyframes card-border-flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-card::before,
  .m-project-card::before {
    animation: none;
  }
}

/* Scroll reveal: cards start slightly lower and transparent, then ease
   up into place as they enter the viewport — the Apple product-page
   pattern of easing content in with a smooth deceleration curve rather
   than a linear fade, triggered once per card via IntersectionObserver. */
.project-card,
.m-project-card {
  opacity: 0;
  transform: translateY(56px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.project-card.is-revealed,
.m-project-card.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .project-card,
  .m-project-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.project-card--image-left {
  padding-right: 24px;
}

.project-card--image-right {
  padding-left: 24px;
}

.project-media {
  flex: 1 0 0;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-media--dark {
  position: relative;
  background: #000000;
  border-radius: 20px;
  padding: 24px 20px;
  overflow: hidden;
}

/* Looping backdrop behind the phone mockup, shared by the desktop card
   (.project-media--dark) and the stacked mobile/tablet one (.m-media) —
   both are already positioned+clipping parents, so this just fills
   edge-to-edge behind the phone-frame, which sits above it (z-index: 1
   from .phone-frame itself). */
.project-media__bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contained-image {
  width: 240.5px;
  height: auto;
  max-width: 100%;
  max-height: 520px;
  object-fit: contain;
  filter: drop-shadow(0px 32px 128px rgba(80, 60, 160, 0.2));
}

.project-media--framed {
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 20px;
  overflow: hidden;
}

.framed-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-body {
  position: relative;
  flex: 0 0 auto;
  width: 457px;
  max-width: 100%;
  height: 100%;
  padding: 47px 9px 40px;
}

.project-heading {
  display: flex;
  flex-direction: column;
}

.project-number {
  position: relative;
  display: block;
  margin-left: -6px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 160px;
  line-height: 0.6;
  color: rgba(15, 23, 42, 0.12);
}

/* Three attempts at a gradient *fill* via -webkit-background-clip: text
   on an overlaid pseudo-element all showed the same symptom — part of
   the glyph intermittently losing its color and showing the faint base
   number through — regardless of whether the background was panned,
   filtered, or just recolored via @property. Rather than fight that
   masking technique further, this drops it entirely: no pseudo-element,
   no background-image, no clip. Just the real number's own `color`,
   animated directly through the site's navy → blue → light-blue
   palette. A solid text color can't have a partial-coverage bug —
   there's no mask for the browser to mis-render. */
.project-number,
.m-project-number {
  transition: color 0.4s ease;
}

.project-card:hover .project-number,
.m-project-card:hover .m-project-number {
  animation: number-color-cycle 4s ease-in-out infinite;
}

@keyframes number-color-cycle {
  0%,
  100% {
    color: #0f172a;
  }
  50% {
    color: #006ebd;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-card:hover .project-number,
  .m-project-card:hover .m-project-number {
    animation: none;
    color: #006ebd;
  }
}

.project-title {
  margin: 6px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 60px;
  line-height: 1;
  letter-spacing: -1.59px;
  color: rgba(15, 23, 42, 0.75);
}

.project-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  max-width: 448px;
  margin-top: 14px;
}

.project-eyebrow {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.4);
}

.project-subtitle {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 21.216px;
  line-height: 31.824px;
  color: rgba(15, 23, 42, 0.5);
}

.hairline {
  width: 100%;
  height: 1px;
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  margin: 1px 0;
}

.project-copy {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 23.8px;
  color: rgba(15, 23, 42, 0.6);
}

.project-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
}

.project-link[hidden] {
  display: none;
}

/* Lower section (collaborate + footer share width) */

.lower-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1326px;
  padding: 0 24px;
}

/* On the homepage, .lower-section's own 1326px cap runs wider than
   .work-section's 1254px cap, so the footer drifts out past the project
   cards above it on wide screens. Below 1100px .work-section gives way to
   .m-project-list (16px gutter, no cap of its own) instead, so the footer
   needs to match that gutter there too rather than keeping its own 24px. */
.main-content .lower-section {
  max-width: 1254px;
}

@media (max-width: 1100px) {
  .main-content .lower-section {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.collaborate-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 56px 40px 72px;
}

.collaborate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 587px));
  gap: 24px;
  margin-top: 24px;
}

.panel {
  border-radius: 20px;
}

.collaborate-panel {
  padding: 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.panel-heading {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26.52px;
  line-height: 31.824px;
  color: var(--ink);
}

.panel-copy {
  margin: 0;
  max-width: 515px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  color: rgba(15, 23, 42, 0.6);
}

.contact-panel {
  overflow: clip;
}

.contact-panel-header {
  padding: 24px 28px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.contact-heading {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: 0.18px;
  color: var(--ink);
}

.contact-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 28px;
}

.contact-label {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  line-height: 19.5px;
  letter-spacing: 0.26px;
  color: rgba(15, 23, 42, 0.45);
}

.contact-value {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 19.5px;
  color: var(--ink);
}

.hairline--light {
  border-top-color: rgba(255, 255, 255, 0.45);
  margin: 0 28px;
  width: auto;
}

/* Footer */

.site-footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 40px 40px;
}

.footer-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-top: 20px;
}

.footer-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-copyright {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 16.5px;
  letter-spacing: 0.66px;
  color: rgba(15, 23, 42, 0.45);
}

.footer-tagline {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 11px;
  line-height: 16.5px;
  color: rgba(26, 26, 46, 0.4);
}

.back-to-top {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  line-height: 16.5px;
  letter-spacing: 0.88px;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.45);
  white-space: nowrap;
}

/* Responsive adjustments */

@media (max-width: 1100px) {
  /* Below 1100px the two-column desktop project cards no longer have room
     to lay out well, so swap in the mobile card design instead (already
     tuned for narrow widths) rather than reflowing the desktop version. */
  .work-section {
    display: none;
  }

  .m-project-list.mobile-only {
    display: flex;
  }

  /* The scroll-down hint is a desktop-only flourish — hidden here so it
     doesn't linger through the tablet range, and never shown on mobile
     at all (see .m-scroll-indicator). */
  .scroll-indicator {
    display: none;
  }
}

@media (max-width: 900px) {
  .hero {
    padding: 140px 24px;
  }
  .hero-title {
    font-size: 72px;
    white-space: normal;
  }
  .hero-subtitle {
    font-size: 28px;
  }
  .collaborate-grid {
    grid-template-columns: 1fr;
  }
  .panel-copy {
    max-width: 100%;
  }
}

/* ============================= */
/* Mobile layout (<= 640px)       */
/* ============================= */

.mobile-only {
  display: none;
}

@media (max-width: 640px) {
  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: flex;
  }
}

/* Mobile header */

.m-header {
  position: sticky;
  top: 0;
  z-index: 4;
  width: 100%;
  justify-content: flex-end;
  padding: 16px;
  transition: opacity 0.35s ease;
}

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

.m-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid #ffffff;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.23);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0px 4px 16px 0px rgba(120, 90, 200, 0.06);
  cursor: pointer;
}

.m-menu-icon {
  width: 30px;
  height: 30px;
  color: rgba(15, 23, 42, 0.7);
  transition: color 0.2s ease;
}

.m-header.nav-on-dark .m-menu-icon {
  color: rgba(255, 255, 255, 0.9);
}

.m-nav-menu {
  position: absolute;
  top: 78px;
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 180px;
  padding: 8px;
  border: 1px solid #ffffff;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0px 4px 16px 0px rgba(120, 90, 200, 0.1);
}

.m-nav-menu[hidden] {
  display: none;
}

.m-nav-link {
  padding: 12px 14px;
  border-radius: 14px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.91px;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.7);
}

.m-nav-link:hover {
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
}

/* Mobile hero */

.m-hero {
  position: relative;
  z-index: 3;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 80px 16px;
}

.m-heading-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.m-hero-title {
  position: relative;
  margin: 0;
  width: 100%;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.5px;
  text-align: center;
  --reveal: 0%;
}

.m-hero-title-text {
  display: block;
  width: 100%;
  padding: 0 0.06em;
  background-image: linear-gradient(37.1deg, rgb(55, 55, 55) 15.5%, rgb(0, 110, 189) 45.2%, rgb(27, 27, 27) 119.38%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-mask-image: linear-gradient(to right, #000 var(--reveal), transparent var(--reveal));
  mask-image: linear-gradient(to right, #000 var(--reveal), transparent var(--reveal));
}

.page.intro .m-hero-title::after {
  content: "";
  position: absolute;
  top: 0.1em;
  bottom: 0.06em;
  left: var(--reveal);
  width: 3px;
  background: #006ebd;
  animation: caret-blink 0.9s steps(1) infinite;
}

.page.intro .m-hero-title.typing-done::after {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .page.intro .m-hero-title::after {
    animation: none;
  }
}

.m-hero-subtitle {
  margin: -4px 0 0;
  padding: 0 0.06em;
  width: 100%;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 24px;
  letter-spacing: -0.2px;
  text-align: center;
  background-image: linear-gradient(9.61deg, rgb(55, 55, 55) 15.5%, rgba(1, 35, 60, 0.58) 45.2%, rgb(27, 27, 27) 119.38%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.m-scroll-indicator {
  /* Desktop-only flourish — never shown on mobile. Kept fully styled
     (rather than deleted) in case it's wanted back for mobile later. */
  display: none;
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #ffffff;
  background: rgba(255, 255, 255, 0.23);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0px 4px 16px 0px rgba(120, 90, 200, 0.05);
  transition: opacity 1.1s ease, background 0.2s ease;
}

.m-scroll-indicator:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Mobile project cards */

.m-project-list {
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  padding: 0 16px 64px;
  z-index: 2;
}

.m-project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 700px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.23);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0px 4px 16px 0px rgba(120, 90, 200, 0.05);
  transition: box-shadow 0.4s ease;
  overflow: hidden;
}

.m-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 280px;
  background: #090b10;
  border-radius: 12px;
  overflow: hidden;
}

.m-phone-mockup {
  width: 120px;
  height: 260px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0px 16px 64px rgba(80, 60, 160, 0.2));
}

/* .phone-frame is a fixed-size component (252.5x532, built for the
   myagent.html case-study sections) — scaled down here to match the
   footprint of the mockup it replaces rather than resized directly,
   so the bezel, notch, and buttons all shrink together in proportion. */
.m-media .phone-frame {
  transform: scale(0.49);
}

.m-horizon-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m-project-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 16px;
}

.m-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.m-project-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 32px;
  line-height: 1.15;
  color: var(--ink);
}

.m-project-number {
  position: relative;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 60px;
  line-height: 1;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  color: rgba(15, 23, 42, 0.12);
}

.m-project-tagline {
  margin: -13px 0 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
  color: rgba(15, 23, 42, 0.6);
}

.m-project-copy {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: rgba(15, 23, 42, 0.6);
}

.m-link-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--ink);
}

.m-link-button[hidden] {
  display: none;
}

/* Mobile collaborate + footer */

.m-collab-footer {
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
  padding: 0 16px 40px;
  z-index: 1;
}

.m-collab-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  padding: 24px;
  border-radius: 20px;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

.m-collab-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.m-collab-heading {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26.52px;
  line-height: 31.824px;
  color: var(--ink);
}

.m-collab-copy {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: rgba(15, 23, 42, 0.6);
}

.m-contact-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.m-contact-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.m-contact-label {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  line-height: 16px;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.45);
}

.m-contact-value {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 19.5px;
  color: var(--ink);
}

.m-contact-value--linkedin {
  font-size: 15px;
  line-height: normal;
}

.m-footer-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.m-footer-text-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.m-footer-copyright {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 10px;
  line-height: 15px;
  color: rgba(15, 23, 42, 0.45);
}

.m-footer-tagline {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 10px;
  line-height: 15px;
  color: rgba(26, 26, 46, 0.4);
}

.m-back-to-top {
  padding-top: 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.45);
  white-space: nowrap;
}

/* ============================= */
/* MyAgent case study page        */
/* ============================= */

/* Same page-background treatment as the homepage, just with this page's
   own gradient angle/stops from the Figma frame. */
.bg-gradient--case {
  background-image:
    linear-gradient(101.16deg, rgba(194, 222, 255, 0.8) 8.31%, rgba(223, 242, 255, 0.8) 21.5%, rgba(229, 255, 241, 0.8) 42.59%, rgba(218, 231, 254, 0.8) 79.65%, rgba(208, 234, 255, 0.8) 96.33%),
    linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
}

.case-main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.case-rule {
  max-width: 1326px;
  margin: 0 auto;
  padding: 0 64px;
}

/* .lower-section is shared with the homepage footer, which uses its own
   24px gutter — on this page it needs to match .case-section's wider
   128px gutter instead, so the footer content lines up with everything
   else rather than running noticeably wider than it. */
.case-main .lower-section {
  padding-left: 128px;
  padding-right: 128px;
}

/* .collaborate-section/.site-footer and their panels add their own
   horizontal padding on top of .lower-section's gutter — harmless on the
   homepage, but on this page it indents "Let's collaborate" and the
   footer well past the flush-left copy in .case-section (e.g. the
   Outcome paragraph), which has no such nested padding of its own.
   Zeroing it here lines everything back up to the same 128px gutter. */
.case-main .collaborate-section,
.case-main .site-footer {
  padding-left: 0;
  padding-right: 0;
}

.case-main .collaborate-panel,
.case-main .contact-panel-header,
.case-main .contact-row {
  padding-left: 0;
  padding-right: 0;
}

.case-main .hairline--light {
  margin-left: 0;
  margin-right: 0;
}

/* Match the collaborate panel's copy width to .section-narrow-copy
   (e.g. the Outcome paragraph) so both wrap at the same line length —
   .panel-copy's own max-width (515px, or 100% under 900px for the
   homepage's single-column layout) is otherwise a different value. */
.case-main .panel-copy {
  max-width: 503px;
}

.case-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 56px;
  width: 100%;
  max-width: 1326px;
  margin: 0 auto;
  padding: 100px 128px;
}

.case-section--tight {
  padding: 80px 128px;
}

.case-section--media-only {
  padding: 64px 128px;
}

.case-section--narrow {
  gap: 24px;
}

/* Header */

.case-intro {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  max-width: 1326px;
  margin: 0 auto;
  padding: 72px 128px 64px;
}

.case-intro-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 800px;
}

.case-title {
  margin: 16px 0 0;
  width: 100%;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 80px;
  line-height: 1.05;
  letter-spacing: -0.6px;
  text-align: left;
  white-space: nowrap;
  background-image: linear-gradient(53.59deg, rgb(55, 55, 55) 15.5%, rgb(0, 110, 189) 45.2%, rgb(27, 27, 27) 119.38%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.case-intro-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 448px;
}

.case-subtitle {
  margin: 8px 0 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 21.216px;
  line-height: 31.824px;
  color: rgba(15, 23, 42, 0.5);
  white-space: nowrap;
}

.case-intro-copy {
  margin: 0;
  max-width: 800px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 23.8px;
  color: rgba(15, 23, 42, 0.6);
}

.case-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  width: 100%;
  padding-top: 40px;
}

.case-fact {
  display: flex;
  flex-direction: column;
}

.case-fact-label {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.35);
}

.case-fact-value {
  margin: 4px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
  white-space: nowrap;
}

/* Section headers: label + heading on the left, copy on the right */

.section-header {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  width: 100%;
}

.section-header__meta {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  gap: 12px;
}

.section-header__copy {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(15, 23, 42, 0.65);
}

.section-header__copy p {
  margin: 0;
}

.section-header__copy--lg {
  font-size: 16px;
}

.section-label {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink);
}

.section-heading {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
  color: var(--ink);
}

.section-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 503px;
}

.section-narrow-copy {
  margin: 0;
  max-width: 503px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(15, 23, 42, 0.65);
}

/* Guiding-philosophy principle cards */

.principle-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  width: 100%;
}

.principle-card {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

.principle-number {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 32px;
  line-height: 32px;
  color: rgba(15, 23, 42, 0.12);
}

.principle-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.3;
  color: var(--ink);
}

.principle-copy {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}

/* Media frames: the bordered glass boxes holding one or two phone mockups */

.case-media-frame {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 48px;
  width: 100%;
  min-height: 480px;
  padding: 48px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 24px;
  box-shadow: 0px 4px 16px 0px rgba(120, 90, 200, 0.06);
  overflow: hidden;
}

/* Real looping video backdrop for the hero phone (a smoke/ink clip),
   replacing the earlier CSS gradient animation entirely. It's absolutely
   positioned with inset:0, so it already fills the frame edge to edge
   regardless of the frame's own padding — no override needed here, which
   keeps this section's padding consistent with every other media frame. */
.case-media-frame__bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The background photo lives on this absolutely-positioned child (not the
   frame itself) so the --tinted variant can dial its opacity down without
   also affecting the frame's own border/shadow. */
.case-media-frame__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--frame-bg);
  background-size: cover;
  background-position: center;
}

.case-media-frame--tinted {
  background-color: rgba(255, 255, 255, 0.23);
}

.case-media-frame--tinted .case-media-frame__bg {
  opacity: 0.8;
}

/* iPhone bezel shared by every mockup on this page */

.phone-frame {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 252.5px;
  height: 532px;
  border: 2px solid #404040;
  border-radius: 40px;
  overflow: hidden;
  background: #121212;
  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.25), inset 0px 1px 2px 0px rgba(255, 255, 255, 0.05);
}

.phone-frame img,
.phone-frame video {
  position: absolute;
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  object-fit: cover;
  object-position: top;
}

.phone-frame--glow img,
.phone-frame--glow video {
  filter: drop-shadow(0px 32px 128px rgba(80, 60, 160, 0.2));
}

/* A more literal device mockup — Dynamic Island + side buttons — used only
   where a phone mockup is the page's main focal point (the case-study
   hero). The screen content clips to its own inner wrapper instead of the
   frame itself, so these buttons can protrude past the bezel edge instead
   of being cut off by the frame's own overflow:hidden. */
.phone-frame--device {
  overflow: visible;
}

.phone-frame-screen {
  position: absolute;
  inset: 4px;
  border-radius: 36px;
  overflow: hidden;
}

.phone-frame-screen video,
.phone-frame-screen img {
  position: static;
  inset: auto;
  width: 100%;
  height: 100%;
  display: block;
}

.phone-frame-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 18px;
  border-radius: 999px;
  background: #000000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  z-index: 2;
}

.phone-frame-button {
  position: absolute;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #2c2c2c, #494949 45%, #2c2c2c);
}

.phone-frame-button--mute {
  left: -2px;
  top: 100px;
  height: 20px;
  box-shadow: -1px 0 1px rgba(0, 0, 0, 0.4);
}

.phone-frame-button--vol-up {
  left: -2px;
  top: 132px;
  height: 38px;
  box-shadow: -1px 0 1px rgba(0, 0, 0, 0.4);
}

.phone-frame-button--vol-down {
  left: -2px;
  top: 178px;
  height: 38px;
  box-shadow: -1px 0 1px rgba(0, 0, 0, 0.4);
}

.phone-frame-button--power {
  right: -2px;
  top: 150px;
  height: 70px;
  box-shadow: 1px 0 1px rgba(0, 0, 0, 0.4);
}

/* Results stat cards */

.stat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  width: 100%;
}

.stat-card {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

.stat-date {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--ink);
}

.stat-number {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 40px;
  color: var(--ink);
}

.stat-label {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  color: var(--ink);
}

.stat-divider {
  width: 100%;
  height: 1px;
  background: rgba(15, 23, 42, 0.12);
}

.stat-bullet {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

@media (max-width: 900px) {
  .case-intro,
  .case-section,
  .case-main .lower-section {
    padding-left: 24px;
    padding-right: 24px;
  }

  .case-rule {
    padding: 0 24px;
  }

  .case-title {
    font-size: 56px;
    white-space: normal;
  }

  .case-subtitle {
    white-space: normal;
  }

  .case-media-frame {
    padding: 24px;
  }
}