@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* ------------------------------------------------------------------
   ATT Agency, design system v2
   Layout DNA:  BASIC/DEPT editorial grids, oversized numbered sections
   Polish:      Ramotion typographic confidence
   Distinctly NOT econ.mom (no cream/lavender, no italic marquee)
   ------------------------------------------------------------------ */

:root {
  --paper: #fafaf7;
  --ink: #08080a;
  --ink-2: #131316;
  --ink-soft: #2a2a2e;
  --muted: #58585f;
  --muted-2: #909097;
  --line: rgba(8, 8, 10, 0.12);
  --line-strong: rgba(8, 8, 10, 0.85);
  --line-soft: rgba(8, 8, 10, 0.06);
  --line-dark: rgba(250, 250, 247, 0.14);

  --accent: #7C3AED;
  --accent-hot: #8B5CF6;
  --accent-deep: #5B21B6;

  --tile-1: #f1ede4;
  --tile-2: #d9d4c5;

  --max: 1480px;
  --gutter: clamp(20px, 4vw, 64px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

/* Visually hidden for SEO copy that should be read by screen readers and search engines */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--accent); color: #fff; }

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

a, button, input, textarea, select {
  transition:
    color 220ms var(--ease),
    background-color 220ms var(--ease),
    border-color 220ms var(--ease),
    opacity 220ms var(--ease),
    transform 280ms var(--ease),
    box-shadow 280ms var(--ease);
}

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

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

.container,
.nav-inner {
  width: min(var(--max), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}

/* ==================================================================
   HEADER
   ================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: background-color 280ms var(--ease), border-color 280ms var(--ease);
}

.site-header.is-scrolled {
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  border-bottom-color: var(--line);
}

.nav-inner {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: Inter, sans-serif;
  font-weight: 800;
  font-size: 1.55rem;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--ink);
}

.brand .sq {
  display: inline-block;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 0.7em;
  margin-left: 1px;
  color: var(--accent);
  transform: translateY(-0.35em);
}

.brand:hover .sq { color: var(--accent-deep); }

.nav-center {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 8, 10, 0.02);
}

.nav-center a {
  position: relative;
  isolation: isolate;
  padding: 9px 16px;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  overflow: hidden;
  transition:
    color 220ms var(--ease),
    transform 320ms var(--ease-out);
}

.nav-center a::before {
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: inherit;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  transform: translateX(-115%) scaleX(0.68);
  transform-origin: left center;
  transition:
    transform 360ms var(--ease-out),
    opacity 260ms var(--ease);
  opacity: 0;
  content: "";
}

.nav-center a::after {
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 0 18%, rgba(255, 255, 255, 0.45) 42%, transparent 66% 100%);
  transform: translateX(-125%);
  opacity: 0;
  content: "";
}

.nav-center a:hover,
.nav-center a:focus-visible {
  color: var(--ink);
  transform: translateY(-1px);
}

.nav-center a:hover::before,
.nav-center a:focus-visible::before {
  transform: translateX(0) scaleX(1);
  opacity: 1;
}

.nav-center a:hover::after,
.nav-center a:focus-visible::after {
  opacity: 1;
  animation: nav-tab-highlight 720ms var(--ease-out) both;
}

.nav-center a:focus-visible::before {
  transform: translateX(0) scaleX(1);
  opacity: 1;
}

.nav-center a[aria-current="page"] {
  background: var(--ink);
  color: var(--paper);
}

.nav-center a[aria-current="page"]::before {
  background: linear-gradient(110deg, transparent 0 18%, rgba(255, 255, 255, 0.2) 36%, transparent 54% 100%);
  transform: translateX(-115%);
  opacity: 1;
  animation: nav-current-sheen 3.2s var(--ease-out) infinite;
}

.nav-cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 8px 0 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  overflow: hidden;
}

.nav-cta span {
  position: relative;
  z-index: 1;
}

.nav-cta::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 0 20%, var(--accent) 45%, transparent 70% 100%);
  transform: translateX(-120%);
  transition: transform 460ms var(--ease-out);
  content: "";
}

.nav-cta .arrow {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.85rem;
  transition: transform 280ms var(--ease);
}

.nav-cta:hover { background: var(--ink); }
.nav-cta:focus-visible::before {
  transform: translateX(120%);
}
.nav-cta:hover .arrow { transform: rotate(-45deg); }

.nav-toggle {
  position: relative;
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  overflow: hidden;
}

.nav-toggle::before {
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  transform: scale(0.65);
  transition:
    transform 260ms var(--ease-out),
    opacity 220ms var(--ease);
  opacity: 0;
  content: "";
}

.nav-toggle:hover::before,
.nav-toggle:focus-visible::before {
  transform: scale(1);
  opacity: 1;
}

.nav-toggle span {
  position: relative;
  display: block;
  width: 16px; height: 1.5px;
  margin: 4px auto;
  background: currentColor;
  transition: transform 260ms var(--ease);
}

.site-header.is-open .nav-toggle span:first-child { transform: translateY(2.75px) rotate(45deg); }
.site-header.is-open .nav-toggle span:last-child  { transform: translateY(-2.75px) rotate(-45deg); }

@keyframes nav-current-sheen {
  0%, 42% { transform: translateX(-115%); }
  72%, 100% { transform: translateX(115%); }
}

@keyframes nav-tab-highlight {
  0% { transform: translateX(-125%); }
  100% { transform: translateX(125%); }
}

/* ==================================================================
   TYPOGRAPHY
   ================================================================== */

h1, h2, h3, h4, .display {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.006em;
  color: var(--ink);
}

h1 {
  font-size: clamp(3.6rem, 11vw, 11rem);
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: -0.002em;
}

h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

h2 {
  font-size: clamp(2.1rem, 4.7vw, 4.8rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.004em;
}

h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

h3 {
  font-size: clamp(1.45rem, 1.85vw, 1.9rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: 0;
}

h4 {
  font-family: Inter, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

p {
  margin: 16px 0 0;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.62;
  font-weight: 400;
}

.lead {
  max-width: 58ch;
  margin-top: 22px;
  font-size: clamp(1rem, 1.08vw, 1.14rem);
  line-height: 1.5;
  color: var(--ink-soft);
}

.large-copy {
  max-width: 22ch;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.45rem, 2.6vw, 2.7rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.004em;
  color: var(--ink);
}

.large-copy em { font-style: italic; color: var(--accent); font-weight: 400; }
.large-copy strong { font-weight: 600; color: var(--ink); font-style: normal; }

/* Section index numbers, BASIC/DEPT signature */
.section-num {
  display: inline-block;
  font-family: Inter, sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.section-num::before {
  display: none;
  content: "";
  color: var(--accent);
  font-size: 0.9em;
  vertical-align: 1px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-family: Inter, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
}

/* ==================================================================
   BUTTONS
   ================================================================== */

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 58px;
  padding: 0 10px 0 26px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: Inter, sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  border: 0;
  cursor: pointer;
  overflow: hidden;
}

.button .label { position: relative; z-index: 1; }

.button .arrow {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.95rem;
  transition: transform 320ms var(--ease);
}

.button::before {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform 380ms var(--ease-out);
  content: "";
}

.button:hover { transform: translateY(-2px); }
.button:hover::before { transform: translateY(0); }
.button:hover .arrow { background: #fff; color: var(--accent); transform: rotate(-45deg); }

.button.secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}

.button.secondary .arrow { background: var(--ink); color: var(--paper); }
.button.secondary:hover { color: #fff; border-color: var(--accent); }
.button.secondary:hover .arrow { background: #fff; color: var(--accent); }

.button.ghost {
  background: transparent;
  color: var(--ink);
  height: auto;
  padding: 0;
}
.button.ghost::before { content: none; }
.button.ghost .arrow {
  width: 36px; height: 36px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.button.ghost:hover { color: var(--accent); transform: none; }
.button.ghost:hover .arrow {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: rotate(-45deg);
}

/* ==================================================================
   SECTIONS / LAYOUT
   ================================================================== */

.page { overflow: hidden; }

.section { padding: clamp(72px, 9vw, 128px) 0; }
.section.tight { padding: clamp(52px, 6vw, 88px) 0; }

.section-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  margin-bottom: clamp(24px, 3.4vw, 44px);
  border-top: 1px solid var(--line-strong);
}

.section-bar.dark { border-top-color: rgba(250,250,247,0.32); }

.section-bar h4 {
  color: inherit;
}

.section-intro {
  display: grid;
  gap: 14px;
  max-width: 920px;
  margin-bottom: clamp(24px, 3.5vw, 48px);
}

.section-intro.compact {
  max-width: 720px;
  margin-bottom: clamp(24px, 3.2vw, 44px);
}

.section-intro h2 {
  max-width: 18ch;
}

.section-intro .lead {
  margin-top: 0;
  max-width: 62ch;
}

.data-intro {
  max-width: 1120px;
}

.data-intro h2 {
  max-width: 14ch;
}

.section-intro.dark .section-num,
.feature-band .section-intro .section-num {
  color: rgba(250,250,247,0.58);
}

.section-headline {
  margin-bottom: clamp(32px, 4.5vw, 64px);
  max-width: 26ch;
}

.section-lead {
  margin-bottom: clamp(32px, 4.8vw, 72px);
}

.section-lead .section-num {
  margin-bottom: 18px;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}

/* When the left column has an eyebrow ABOVE the H2, the right-column body copy
   starts higher than the H2's first line. Nudge the right column down so the
   first line of body copy lines up with the first line of the H2.
   On mobile (single-column) the offset isn't needed; reset it. */
.split > * + * {
  padding-top: clamp(28px, 3vw, 44px);
}

@media (max-width: 860px) {
  .split > * + * { padding-top: 0; }
}

.strategy-split {
  align-items: end;
}

.strategy-split .large-copy {
  max-width: 24ch;
  font-size: clamp(1.35rem, 2vw, 2.15rem);
}

.strategy-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.62fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--line);
}

.strategy-panel h2 {
  max-width: 16ch;
}

.strategy-panel .section-num {
  margin-bottom: 14px;
}

.strategy-panel .lead {
  margin-top: 0;
  max-width: 34ch;
}

/* ==================================================================
   HERO, oversized takeover
   ================================================================== */

.hero {
  position: relative;
  padding: clamp(48px, 7vh, 88px) 0 clamp(52px, 8vh, 96px);
}

.home-hero {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: calc(100svh - 78px);
  padding: clamp(56px, 7vh, 92px) 0 clamp(36px, 6vh, 64px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.home-hero > .container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.home-hero .hero-top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.home-hero .hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: Inter, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.home-hero .hero-meta .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.18);
  animation: pulse 2.4s ease-in-out infinite;
}

.home-hero .hero-meta .sep {
  color: var(--muted);
  opacity: 0.55;
}

.home-hero h1 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: none;
  margin: clamp(48px, 9vh, 120px) 0 clamp(48px, 9vh, 120px);
  font-size: clamp(3rem, 9.5vw, 8.2rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.home-hero h1 .line {
  display: block;
}

.home-hero h1 em {
  color: var(--accent);
  font-style: italic;
}

.home-hero .hero-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.home-hero .hero-founders {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.home-hero .hero-founders .label {
  font-family: Inter, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.home-hero .hero-founders .names {
  font-family: Inter, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
}

.home-hero .hero-founders .names .sep {
  color: var(--muted);
  opacity: 0.55;
  margin: 0 4px;
}

.home-hero .hero-domain {
  font-family: Inter, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.home-hero .hero-glow {
  position: absolute;
  top: 50%;
  right: -12%;
  width: 70vw;
  max-width: 1100px;
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  background:
    radial-gradient(circle at 50% 50%, rgba(167, 139, 250, 0.55) 0%, rgba(124, 58, 237, 0.28) 30%, rgba(124, 58, 237, 0.08) 55%, transparent 75%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 720px) {
  .home-hero { min-height: auto; padding-bottom: 56px; }
  .home-hero h1 {
    margin: 36px 0 56px;
    font-size: clamp(2.6rem, 12vw, 4.2rem);
  }
  .home-hero .hero-top { justify-content: flex-start; }
  .home-hero .hero-meta { font-size: 0.66rem; letter-spacing: 0.16em; gap: 8px; flex-wrap: wrap; }
  .home-hero .hero-bottom { flex-direction: column; align-items: flex-start; gap: 18px; }
  .home-hero .hero-glow { right: -40%; width: 120vw; }
}

.hero-eyebrow-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 28px;
  margin-bottom: clamp(48px, 8vh, 96px);
  border-bottom: 1px solid var(--line);
}

.hero-eyebrow-bar .meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: Inter, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-eyebrow-bar .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.18);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(124, 58, 237, 0.05); }
}

.hero h1 {
  max-width: 15ch;
  font-size: clamp(3.2rem, 10.5vw, 10.8rem);
}

.hero .first-line { display: block; }
.hero .second-line {
  display: block;
  margin-left: clamp(48px, 18vw, 280px);
}
.hero .third-line {
  display: block;
}

.hero-intro {
  padding: clamp(24px, 3.5vw, 44px) 0 clamp(56px, 7vw, 96px);
}

.hero-foot {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
  margin-top: clamp(36px, 6vh, 72px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.hero-intro .hero-foot {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.hero-foot .lead { margin-top: 0; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-self: end;
}

/* ==================================================================
   MARQUEE
   ================================================================== */

.marquee {
  width: 100%;
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--paper);
}

.marquee.dark {
  background: var(--ink);
  border-color: var(--line-dark);
}

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: scroll 38s linear infinite;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 16px 0;
  margin-right: 40px;
  color: var(--ink);
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 3.2vw, 3rem);
  letter-spacing: -0.004em;
  white-space: nowrap;
}

.marquee.dark .marquee-item { color: var(--paper); }

.marquee-item::after {
  content: "✺";
  font-style: normal;
  font-size: 0.55em;
  color: var(--accent);
  font-weight: 400;
}

@keyframes scroll {
  to { transform: translateX(-50%); }
}

/* ==================================================================
   WORK / CASE TILES, gradient mesh, oversized numbers
   ================================================================== */

.work-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(22px, 2.4vw, 40px) clamp(18px, 2vw, 28px);
}

.case-card {
  display: block;
  position: relative;
}

.case-card.span-7 { grid-column: span 7; }
.case-card.span-5 { grid-column: span 5; }
.case-card.span-12 { grid-column: span 12; }
.case-card.span-6 { grid-column: span 6; }

.case-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
  isolation: isolate;
  transition: transform 600ms var(--ease-out);
}

.case-card.span-12 .case-visual { aspect-ratio: 2.7 / 1; }
.case-card.span-7 .case-visual { aspect-ratio: 1.55 / 1; }
.case-card.span-5 .case-visual { aspect-ratio: 1 / 1.05; }
.case-card.span-6 .shot-frame { aspect-ratio: 4 / 3; }

.case-card:hover .case-visual { transform: scale(1.008); }

.case-visual .case-num {
  font-family: Inter, sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.78);
  text-transform: uppercase;
}

.case-visual .case-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.7rem, 3.5vw, 3.8rem);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.004em;
  color: #fff;
  max-width: 16ch;
}

.case-visual .case-title em { font-style: italic; color: rgba(255,255,255,0.7); }

.case-visual .tag {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px;
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.05);
}

/* gradient mesh variants */
.case-visual.mesh-ember {
  background:
    radial-gradient(ellipse 90% 60% at 14% 18%, #C4B5FD 0%, transparent 55%),
    radial-gradient(ellipse 80% 80% at 86% 14%, var(--accent) 0%, transparent 50%),
    radial-gradient(ellipse 60% 60% at 60% 100%, #2E1065 0%, transparent 55%),
    #180B2F;
}
.case-visual.mesh-graphite {
  background:
    radial-gradient(ellipse 70% 90% at 80% 20%, #56565d 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 10% 80%, #181a20 0%, transparent 60%),
    #0c0c10;
}
.case-visual.mesh-bone {
  background:
    radial-gradient(ellipse 80% 80% at 80% 20%, #ffe9d4 0%, transparent 55%),
    radial-gradient(ellipse 60% 60% at 14% 90%, #e7ddcb 0%, transparent 60%),
    #f4ecdb;
}
.case-visual.mesh-bone .case-title { color: var(--ink); max-width: 16ch; }
.case-visual.mesh-bone .case-title em { color: var(--accent-deep); }
.case-visual.mesh-bone .case-num { color: var(--ink-soft); }
.case-visual.mesh-bone .tag { color: var(--ink); border-color: var(--ink-soft); background: rgba(255,255,255,0.4); }

.case-visual.mesh-rust {
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, #A78BFA 0%, transparent 60%),
    radial-gradient(ellipse 60% 90% at 100% 100%, #4C1D95 0%, transparent 60%),
    var(--accent-deep);
}

.case-visual.mesh-blueprint {
  background:
    radial-gradient(ellipse 80% 80% at 30% 0%, #314359 0%, transparent 55%),
    radial-gradient(ellipse 70% 70% at 100% 100%, var(--accent) 0%, transparent 55%),
    #0d1620;
}

/* grain texture overlay on tiles */
.case-visual::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  content: "";
}

.case-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  flex: 1;
  margin-top: 16px;
}

.case-card.span-6 .case-foot {
  min-height: 128px;
}

.case-foot h3 {
  font-family: Inter, sans-serif;
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.002em;
  color: var(--ink);
  max-width: 38ch;
}

.case-foot .case-tags {
  display: none;
}

.case-arrow {
  display: inline-grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: 1rem;
  transition: transform 280ms var(--ease), background-color 280ms var(--ease), color 280ms var(--ease);
}

.case-card:hover .case-arrow {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: rotate(-45deg);
}

/* ==================================================================
   SCREENSHOT / VIDEO TILES, for real-site previews
   ================================================================== */

.shot-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.shot-frame {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--ink);
  isolation: isolate;
}

.case-card.span-12 .shot-frame { aspect-ratio: 21 / 9; }
.case-card.span-7 .shot-frame  { aspect-ratio: 16 / 11; }
.case-card.span-5 .shot-frame  { aspect-ratio: 5 / 6; }
.case-card.span-6 .shot-frame  { aspect-ratio: 16 / 11; }

.shot-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 800ms var(--ease-out);
}

.shot-card:hover .shot-frame img { transform: scale(1.04); }

.shot-frame img[src*="ryduzz"] { object-position: top left; }

.shot-frame::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8,8,10,0) 55%, rgba(8,8,10,0.55) 100%);
  content: "";
  opacity: 0;
  transition: opacity 360ms var(--ease);
}

.shot-card:hover .shot-frame::after { opacity: 1; }

.shot-frame .tag {
  display: none;
  position: absolute;
  top: 18px; left: 18px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(8,8,10,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 2;
}

.shot-frame .num {
  display: none;
  position: absolute;
  top: 18px; right: 18px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  z-index: 2;
}

.shot-frame .play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 3;
  pointer-events: none;
}

.shot-frame .play .pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 16px;
  border-radius: 999px;
  background: rgba(8,8,10,0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid rgba(255,255,255,0.18);
  transition: transform 320ms var(--ease), background-color 320ms var(--ease);
}

.shot-frame .play .pill .icon {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
}

.shot-card:hover .shot-frame .play .pill {
  transform: scale(1.04);
}

.shot-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.case-foot .domain {
  font-family: Inter, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-deep);
  letter-spacing: 0.01em;
}

.case-foot .domain::after { content: " ↗"; font-size: 0.85em; }

.discipline-grid,
.service-columns {
  display: grid;
  gap: clamp(22px, 2.8vw, 40px);
}

.discipline-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.discipline-grid article {
  padding-top: 24px;
}

.discipline-grid article + article {
  border-left: 1px solid var(--line);
  padding-left: clamp(18px, 2.4vw, 32px);
}

.discipline-grid h3,
.service-columns h3 {
  font-size: clamp(1.25rem, 1.7vw, 1.7rem);
}

.discipline-grid p,
.service-columns p {
  max-width: 36ch;
  font-size: 0.92rem;
}

.service-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(40px, 7vw, 100px);
  border-top: 1px solid var(--line);
}

.service-columns-wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(32px, 5vw, 72px);
}

.service-columns article {
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.service-columns-wide article {
  display: grid;
  grid-template-columns: minmax(180px, 0.52fr) minmax(0, 1fr);
  gap: clamp(18px, 2vw, 28px);
  align-items: baseline;
  padding: 18px 0;
}

.service-columns-wide h3 {
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
}

.service-columns-wide p {
  margin-top: 0;
  max-width: 42ch;
  font-size: 0.86rem;
  line-height: 1.45;
}

.digital-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(380px, 1fr);
  gap: clamp(36px, 7vw, 112px);
  align-items: start;
}

.digital-layout .section-intro {
  margin-bottom: 0;
}

.digital-layout h2 {
  max-width: 13ch;
}

.service-link-list {
  display: grid;
  border-top: 1px solid var(--line-dark);
}

.service-link-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: clamp(16px, 2vw, 24px) 0;
  border-bottom: 1px solid var(--line-dark);
}

.service-link-list h3 {
  grid-column: 1;
  font-size: clamp(1.15rem, 1.55vw, 1.55rem);
}

.service-link-list p {
  grid-column: 1;
  max-width: 48ch;
  margin-top: 6px;
  font-size: 0.88rem;
  line-height: 1.45;
}

.service-link-list span {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(250,250,247,0.32);
  border-radius: 999px;
  color: var(--paper);
  transition: transform 280ms var(--ease), background-color 280ms var(--ease), border-color 280ms var(--ease);
}

.service-link-list a:hover span,
.service-link-list a:focus-visible span {
  background: var(--accent);
  border-color: var(--accent);
  transform: rotate(-45deg);
}

/* ==================================================================
   FAQ ACCORDION (services page)
   ================================================================== */

.faq-list {
  border-top: 1px solid var(--line-strong);
}

.faq-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.faq-item > summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.3rem, 2vw, 1.85rem);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: color 220ms var(--ease);
}

.faq-item > summary::-webkit-details-marker { display: none; }

.faq-item > summary:hover { color: var(--accent-deep); }

.faq-toggle {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-family: Inter, sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--ink);
  transition: transform 320ms var(--ease), background-color 220ms var(--ease), color 220ms var(--ease);
}

.faq-item[open] .faq-toggle {
  transform: rotate(45deg);
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.faq-item > p {
  max-width: 70ch;
  margin: 0 0 24px;
  padding-right: 64px;
  color: var(--ink-soft);
  animation: faq-answer-in 280ms var(--ease-out) both;
}

@keyframes faq-answer-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.faq-item > p a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent);
}

.faq-item > p a:hover { color: var(--accent-deep); }

/* ==================================================================
   REEL BLOCK, vertical 9:16 video + copy layout (Work page lead)
   ================================================================== */

.reel-block {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  max-width: 980px;
  margin: 0;
}

.reel-feature {
  grid-template-columns: minmax(260px, 0.95fr) minmax(160px, 220px) minmax(0, 1fr);
  align-items: center;
  max-width: none;
}

.reel-heading {
  display: grid;
  gap: 14px;
}

.reel-heading h2 {
  max-width: 10ch;
}

.reel-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

.reel-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
  box-shadow: 0 30px 60px rgba(8, 8, 10, 0.18);
  transition: transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out);
}

.reel-trigger:hover .reel-frame {
  transform: translateY(-4px);
  box-shadow: 0 38px 72px rgba(8, 8, 10, 0.24);
}

.reel-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reel-frame .tag {
  position: absolute;
  top: 18px; left: 18px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(8,8,10,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 2;
}

.reel-frame .play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 3;
  pointer-events: none;
}

.reel-frame .play .pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 12px;
  border-radius: 999px;
  background: rgba(8,8,10,0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid rgba(255,255,255,0.18);
  transition: transform 320ms var(--ease), background-color 320ms var(--ease);
}

.reel-frame .play .pill .icon {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
}

.reel-trigger:hover .reel-frame .play .pill {
  transform: scale(1.04);
}

.reel-meta .reel-title {
  margin-top: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.45rem, 2.3vw, 2.25rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0;
  color: var(--ink);
}

.reel-meta .reel-title em { font-style: italic; color: var(--accent); font-weight: 400; }

@media (max-width: 920px) {
  .reel-block {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .reel-feature {
    grid-template-columns: 1fr;
  }
  .reel-frame { max-width: 220px; margin: 0 auto; }
}

/* ==================================================================
   VIDEO LIGHTBOX (work page)
   ================================================================== */

.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 64px);
  background: rgba(8, 8, 10, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: lb-fade 280ms var(--ease);
}

.video-lightbox.is-open { display: flex; }

@keyframes lb-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.video-lightbox .video-stage {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.video-lightbox video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-close {
  position: absolute;
  top: clamp(16px, 3vw, 32px);
  right: clamp(16px, 3vw, 32px);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 220ms var(--ease), transform 220ms var(--ease);
}

.video-close:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: rotate(90deg);
}

/* ==================================================================
   SERVICE PICKER, mix and match checkbox chips
   ================================================================== */

.service-picker {
  border: 0;
  padding: 0;
  margin: 0;
  display: block;
}

.service-picker legend {
  font-family: Inter, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.service-picker legend .muted {
  display: inline-block;
  margin-left: 8px;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 500;
  color: var(--muted-2);
}

.service-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

label.service-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: Inter, sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.002em;
  text-transform: none;
  cursor: pointer;
  user-select: none;
  transition: all 200ms var(--ease);
}

.service-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.service-chip:hover {
  border-color: var(--accent);
  color: var(--ink);
  transform: translateY(-1px);
}

.service-chip:has(input:checked) {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  padding-left: 36px;
}

.service-chip:has(input:checked)::before {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  content: "";
}

.service-chip:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ==================================================================
   POST-SUBMIT BOOKING / PAYMENT PANEL
   ================================================================== */

.success-panel {
  display: none;
  margin-top: clamp(40px, 6vw, 72px);
  padding: clamp(32px, 5vw, 56px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(8, 8, 10, 0.08);
}

.success-panel.is-open {
  display: block;
  animation: success-rise 540ms var(--ease-out);
}

@keyframes success-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.success-head {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  align-items: start;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.success-panel .check {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  flex-shrink: 0;
}

.success-panel .check svg {
  display: block;
}

.success-panel h3 {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.06;
  color: var(--ink);
}

.success-panel .success-head > div > p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.96rem;
  max-width: 60ch;
}

.next-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 28px);
  margin-top: clamp(28px, 4vw, 40px);
}

.next-step {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  transition: border-color 280ms var(--ease), transform 280ms var(--ease);
}

.next-step:hover {
  border-color: var(--line);
  transform: translateY(-2px);
}

.next-step > .label {
  font-family: Inter, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.next-step h4 {
  margin: 12px 0 8px;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.next-step p {
  margin: 0 0 18px;
  font-size: 0.92rem;
  color: var(--muted);
}

.next-step .button {
  align-self: flex-start;
  height: 48px;
  padding: 0 6px 0 18px;
  font-size: 0.82rem;
  white-space: nowrap;
}

.next-step .button .arrow { width: 36px; height: 36px; }

.next-step .button.secondary { padding: 0 18px; }
.next-step .button.secondary .arrow { width: 32px; height: 32px; }

@media (max-width: 640px) {
  .next-steps { grid-template-columns: 1fr; }
  .success-head { grid-template-columns: 1fr; gap: 16px; }
  .success-panel .check { width: 48px; height: 48px; }
}

/* Hide decorative arrow glyphs on mobile so buttons stay clean across devices */
@media (max-width: 720px) {
  .button .arrow,
  .nav-cta .arrow,
  .case-arrow,
  .case-foot .case-arrow,
  .service-link-list a > span[aria-hidden="true"] {
    display: none;
  }
  .button { padding-right: 28px; }
  .nav-cta { padding-right: 22px; }
  .case-foot .domain::after { content: ""; }
}

/* ==================================================================
   CAPABILITY ROWS
   ================================================================== */

.cap-rows {
  border-top: 1px solid var(--line-strong);
}

.cap-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1.25fr) minmax(260px, 0.95fr) 48px;
  gap: clamp(18px, 3vw, 36px);
  align-items: center;
  padding: clamp(18px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: padding-left 380ms var(--ease), color 380ms var(--ease);
}

.cap-row::before {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 520ms var(--ease-out);
  z-index: 0;
  content: "";
}

.cap-row > * { position: relative; z-index: 1; }

.cap-row:hover { padding-left: 18px; color: var(--paper); }
.cap-row:hover::before { transform: scaleX(1); }
.cap-row:hover .cap-num { color: var(--accent); }
.cap-row:hover .cap-desc { color: rgba(250,250,247,0.78); }
.cap-row:hover .cap-icon { background: var(--accent); border-color: var(--accent); transform: scale(1.2); }

.cap-num {
  font-family: Inter, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.cap-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.45rem, 2.7vw, 2.7rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.004em;
  color: inherit;
}

.cap-title em { font-style: italic; color: var(--accent); font-weight: 400; }

.cap-desc {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
  max-width: 44ch;
}

.cap-icon {
  display: grid;
  place-items: center;
  justify-self: end;
  width: 12px; height: 12px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: transparent;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  font-size: 0;
  transition: transform 320ms var(--ease), background-color 320ms var(--ease), color 320ms var(--ease);
}

/* ==================================================================
   PROCESS, vertical timeline
   ================================================================== */

.process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  position: relative;
  gap: 0;
}

.process-step {
  position: relative;
  padding: 34px clamp(22px, 3vw, 36px) 34px 24px;
  border-right: 1px solid var(--line-dark);
}

.process-step:last-child { border-right: 0; }

.process-step::before {
  position: absolute;
  top: -6px;
  left: 24px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  content: "";
}

.process-step .number {
  display: block;
  font-family: Inter, sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.process-clean .process-step {
  padding-top: 28px;
}

.process-clean .process-step::before,
.process-clean .process-step .number {
  display: none;
}

.process-step h3 {
  font-size: clamp(1.35rem, 1.9vw, 1.85rem);
  margin-bottom: 10px;
}

.process-step p {
  max-width: 34ch;
  color: rgba(250,250,247,0.7);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ==================================================================
   DARK BAND, feature-band overhaul
   ================================================================== */

.feature-band {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(72px, 9vw, 132px) 0;
  position: relative;
  overflow: hidden;
}

.feature-band-compact-end {
  padding-bottom: clamp(36px, 4vw, 60px);
}

.feature-band::before {
  content: none;
}

.feature-band h2,
.feature-band h3,
.feature-band h4,
.feature-band .large-copy,
.feature-band .section-num { color: var(--paper); }

.feature-band h2 em,
.feature-band .large-copy em { color: var(--accent); }

.feature-band h4 { color: rgba(250,250,247,0.6); }

.feature-band p { color: rgba(250,250,247,0.72); }

.feature-band .section-bar { border-top-color: rgba(250,250,247,0.32); }

.feature-band .button {
  background: var(--paper);
  color: var(--ink);
}
.feature-band .button .arrow { background: var(--accent); color: #fff; }
.feature-band .button::before { background: var(--accent); }
.feature-band .button:hover { color: #fff; }

/* ==================================================================
   QUOTE / PHILOSOPHY
   ================================================================== */

.quote-block {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
  gap: clamp(40px, 7vw, 112px);
  padding-top: 36px;
  border-top: 1px solid var(--line-strong);
}

.quote-block blockquote {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: clamp(1.7rem, 3.4vw, 3.4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--ink);
}

.quote-block blockquote::before {
  display: block;
  font-style: normal;
  font-size: 0.8em;
  color: var(--accent);
  content: "❝";
  margin-bottom: 12px;
}

.quote-block cite {
  display: block;
  margin-top: 28px;
  font-style: normal;
  font-family: Inter, sans-serif;
  font-size: 0.84rem;
  color: var(--muted);
}

.quote-block cite strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

/* ==================================================================
   TEAM
   ================================================================== */

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
}

.team-card {
  position: relative;
  padding: 0 0 24px;
}

.team-portrait {
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 28px;
  isolation: isolate;
  background: var(--ink);
  transition: transform 600ms var(--ease-out);
}

.team-card:hover .team-portrait { transform: translateY(-6px); }

.team-portrait .mono {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: clamp(3.4rem, 7.4vw, 6.4rem);
  font-weight: 500;
  line-height: 0.88;
  color: #fff;
  letter-spacing: -0.004em;
  position: relative;
  z-index: 1;
}

/* Real headshot inside the portrait frame */
.team-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  z-index: 0;
  transition: transform 700ms var(--ease-out), filter 700ms var(--ease-out);
  filter: saturate(1.02);
}

/* Per-person crop positioning since each photo has different framing */
.team-card#saras-totey .team-portrait img { object-position: center 18%; }
.team-card#ryder-thomas .team-portrait img { object-position: center 30%; }
.team-card#sunny-avula .team-portrait img { object-position: center 28%; transform: scale(1.18); }

.team-card:hover .team-portrait img {
  transform: scale(1.05);
  filter: saturate(1.1);
}
.team-card#sunny-avula:hover .team-portrait img {
  transform: scale(1.24);
}

/* When a real photo is in place, hide the placeholder initials and adjust pin */
.team-portrait.has-photo .mono { display: none; }
.team-portrait.has-photo { padding: 22px; }
.team-portrait.has-photo .role-pin {
  background: rgba(8, 8, 10, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(255, 255, 255, 0.25);
  z-index: 2;
}

.team-portrait .role-pin {
  position: absolute;
  top: 22px; right: 22px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  z-index: 1;
}

.team-portrait::after {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.28;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  content: "";
}

.team-card.tone-bone .team-portrait {
  background:
    radial-gradient(ellipse 90% 80% at 30% 20%, #ffe6c4 0%, transparent 55%),
    radial-gradient(ellipse 80% 80% at 80% 100%, #b8a883 0%, transparent 55%),
    #e0d2b0;
}
.team-card.tone-bone .team-portrait .mono { color: var(--ink); }
.team-card.tone-bone .team-portrait:not(.has-photo) .role-pin { color: var(--ink); border-color: rgba(8,8,10,0.3); }
.team-card.tone-bone .team-portrait.has-photo .role-pin {
  color: #fff;
  background: rgba(8, 8, 10, 0.55);
  border-color: rgba(255, 255, 255, 0.25);
}

.team-card.tone-stone .team-portrait {
  background:
    radial-gradient(ellipse 80% 80% at 100% 0%, #46464e 0%, transparent 55%),
    #0c0c10;
}

.team-card.tone-ember .team-portrait {
  background:
    radial-gradient(ellipse 90% 70% at 20% 0%, #C4B5FD 0%, transparent 50%),
    radial-gradient(ellipse 80% 90% at 100% 100%, #4C1D95 0%, transparent 60%),
    var(--accent);
}

.team-card h3 { margin-top: 22px; font-size: clamp(1.5rem, 2vw, 1.9rem); }

.team-card .role {
  display: inline-block;
  margin-top: 8px;
  color: var(--accent);
  font-family: Inter, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.team-card p { margin-top: 14px; font-size: 0.94rem; max-width: 38ch; }

/* ==================================================================
   SERVICE DETAIL PAGES
   ================================================================== */

.service-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.service-list li, .pill {
  display: inline-flex;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.service-list li:hover, .pill:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
}

/* ==================================================================
   PAGE HERO (interior)
   ================================================================== */

.page-hero {
  padding: clamp(52px, 7vw, 104px) 0 clamp(44px, 5.5vw, 76px);
  border-bottom: 1px solid var(--line);
}

.page-hero h1 {
  max-width: 18ch;
  font-size: clamp(2.8rem, 6.8vw, 7.2rem);
  letter-spacing: 0.004em;
}

.page-hero .lead { margin-top: 24px; }

/* ==================================================================
   CONTACT
   ================================================================== */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.58fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.contact-card {
  padding: clamp(28px, 4vw, 48px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.contact-card h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); margin-top: 6px; }
.contact-card p { margin-top: 14px; }
.contact-card .service-list { margin-top: 24px; }

.contact-aside {
  position: sticky;
  top: 112px;
  padding: clamp(24px, 3vw, 34px);
}

.fit-list {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.fit-list li {
  position: relative;
  padding-left: 20px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.45;
}

.fit-list li::before {
  position: absolute;
  left: 0;
  top: 0.64em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  content: "";
}

.contact-form { display: grid; gap: 28px; }

.field { display: grid; gap: 10px; }

label {
  font-family: Inter, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

input, textarea, select {
  width: 100%;
  min-height: 56px;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.02rem;
}

input::placeholder, textarea::placeholder { color: var(--muted-2); }

input:focus, textarea:focus, select:focus {
  border-bottom-color: var(--accent);
  outline: none;
  box-shadow: 0 1px 0 var(--accent);
}

textarea { min-height: 156px; resize: vertical; }

select option { background: #fff; color: var(--ink); }

[data-form-note] {
  margin: 0;
  min-height: 1.2em;
  color: var(--accent-deep);
  font-size: 0.86rem;
}

/* ==================================================================
   FOOTER
   ================================================================== */

.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(56px, 7vw, 96px) 0 28px;
  position: relative;
  overflow: hidden;
}

.site-footer-compact-start {
  padding-top: clamp(28px, 4vw, 52px);
}

.site-footer::before {
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 80%;
  aspect-ratio: 2 / 1;
  background: radial-gradient(ellipse, rgba(124, 58, 237, 0.24), transparent 60%);
  pointer-events: none;
  content: "";
}

.footer-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  padding-bottom: clamp(44px, 6vw, 76px);
  border-bottom: 1px solid var(--line-dark);
}

.footer-cta h2 {
  color: var(--paper);
  font-size: clamp(2rem, 4.4vw, 4.4rem);
  font-weight: 500;
  line-height: 1;
  max-width: 16ch;
}

.footer-cta h2 em { color: var(--accent); font-style: italic; font-weight: 400; }
.footer-cta h2 strong { font-weight: 500; color: var(--paper); font-style: normal; }

.footer-cta .right {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-self: end;
}

.footer-cta .right p {
  color: rgba(250,250,247,0.72);
  max-width: 36ch;
}

.footer-cta .right .button {
  background: var(--paper);
  color: var(--ink);
}
.footer-cta .right .button .arrow { background: var(--accent); color: #fff; }

.footer-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(5, minmax(0, 1fr));
  gap: 24px;
  padding-top: 40px;
}

@media (max-width: 980px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-grid > .footer-brand { grid-column: 1 / -1; }
}

.footer-grid h4 {
  margin: 0 0 18px;
  color: rgba(250,250,247,0.5);
}

.footer-grid a,
.footer-grid p {
  display: block;
  margin: 0 0 12px;
  color: rgba(250,250,247,0.84);
  font-size: 0.9rem;
}

.footer-grid a:hover { color: var(--accent); }

.footer-brand .brand { color: var(--paper); }

.footer-bottom {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--line-dark);
  color: rgba(250,250,247,0.55);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

/* ==================================================================
   REVEAL ANIMATIONS
   ================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-words] .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40%);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: calc(var(--word-i, 0) * 60ms);
}

[data-reveal-words].is-visible .word {
  opacity: 1;
  transform: translateY(0);
}

/* ==================================================================
   RESPONSIVE
   ================================================================== */

@media (max-width: 1180px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .case-card.span-7, .case-card.span-5, .case-card.span-6, .case-card.span-12 { grid-column: span 1; }
  .case-visual, .case-card.span-12 .case-visual, .case-card.span-7 .case-visual, .case-card.span-5 .case-visual { aspect-ratio: 4 / 3; }
}

@media (max-width: 1080px) {
  .discipline-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .discipline-grid article + article {
    border-left: 0;
    padding-left: 0;
  }

  .discipline-grid article {
    border-top: 1px solid var(--line);
  }

  .cap-row {
    grid-template-columns: 48px 1fr 42px;
    gap: 16px;
  }
  .cap-desc { display: none; }

  .process { grid-template-columns: 1fr; }
  .process-step {
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
    padding: 28px 0 28px 24px;
  }
  .process-step:last-child { border-bottom: 0; }
}

@media (max-width: 920px) {
  .nav-toggle { display: inline-grid; place-items: center; }
  .nav-center, .nav-cta { display: none; }

  .site-header.is-open .nav-center {
    position: absolute;
    top: 78px; left: var(--gutter); right: var(--gutter);
    display: grid;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
  }
  .site-header.is-open .nav-cta {
    position: absolute;
    top: 320px; left: var(--gutter); right: var(--gutter);
    display: inline-flex;
    justify-content: center;
  }

  .hero .second-line,
  .home-hero .second-line { margin-left: 0; }

  .hero-foot,
  .split,
  .strategy-panel,
  .quote-block,
  .contact-layout,
  .footer-cta,
  .footer-grid { grid-template-columns: 1fr; }

  .contact-aside {
    position: static;
  }

  .service-columns {
    grid-template-columns: 1fr;
  }

  .service-columns-wide article {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .digital-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .hero-actions { justify-self: start; }

  .team-grid { grid-template-columns: 1fr; }

  .work-grid { grid-template-columns: 1fr; }
  .discipline-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  :root { --gutter: 18px; }

  h1 { font-size: clamp(3.2rem, 16vw, 5rem); }
  .hero h1 { font-size: clamp(3rem, 16vw, 4.8rem); }
  .home-hero {
    padding: 56px 0 32px;
  }
  .home-hero h1 {
    font-size: clamp(3.2rem, 15vw, 4.9rem);
  }
  .hero-intro {
    padding: 24px 0 48px;
  }
  h2 { font-size: clamp(2rem, 9vw, 3.1rem); }

  .footer-bottom { flex-direction: column; }
  .hero-eyebrow-bar { flex-direction: column; align-items: flex-start; gap: 14px; }

  .section { padding: 56px 0; }
  .section.tight { padding: 44px 0; }
  .feature-band { padding: 56px 0; }
  .section-bar {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
  }
  .section-headline { margin-bottom: 28px; }
  .cap-row { padding: 18px 0; }
  .cap-title { font-size: clamp(1.45rem, 9vw, 2.2rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track { animation: none; }
  [data-reveal], [data-reveal-words] .word { opacity: 1; transform: none; }
}

/* ==================================================================
   LEGAL DOCUMENTS (terms.html, privacy.html)
   ================================================================== */
.legal-doc {
  font-family: Inter, sans-serif;
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--ink-soft);
}

.legal-doc h2 {
  margin: 56px 0 18px;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.4rem, 2.3vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.25;
}

.legal-doc h2:first-child { margin-top: 0; }

.legal-doc h3 {
  margin: 28px 0 12px;
  font-family: Inter, sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.005em;
}

.legal-doc p,
.legal-doc ul,
.legal-doc ol {
  margin: 14px 0;
}

.legal-doc ul,
.legal-doc ol {
  padding-left: 22px;
}

.legal-doc li {
  margin: 8px 0;
}

.legal-doc li::marker {
  color: var(--accent);
}

.legal-doc a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(124, 58, 237, 0.45);
  transition: color 200ms var(--ease), text-decoration-color 200ms var(--ease);
}

.legal-doc a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

.legal-doc strong {
  color: var(--ink);
  font-weight: 600;
}

/* ==================================================================
   RESULTS STRIP (homepage proof above the fold)
   ================================================================== */
.results-strip {
  padding: clamp(40px, 7vw, 88px) 0 clamp(24px, 5vw, 56px);
  border-bottom: 1px solid var(--line);
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 56px);
  align-items: start;
}

.result {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.result-num {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.result-num em {
  font-style: italic;
  color: var(--accent);
}

.result-label {
  font-family: Inter, sans-serif;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 24ch;
}

.results-quote {
  margin: clamp(40px, 6vw, 72px) 0 0;
  padding: clamp(24px, 3vw, 36px) 0 0;
  border-top: 1px solid var(--line);
  max-width: 880px;
}
.results-quote blockquote {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  line-height: 1.45;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.results-quote blockquote span {
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
  margin: 0 2px;
}
.results-quote figcaption {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-family: Inter, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.results-quote figcaption a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(124, 58, 237, 0.45);
}
.results-quote figcaption a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.results-quote figcaption .sep { opacity: 0.5; }

@media (max-width: 980px) {
  .results-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

@media (max-width: 520px) {
  .results-grid { grid-template-columns: 1fr; gap: 28px; }
  .results-cite { font-size: 0.82rem; }
}

/* ==================================================================
   CASE METRICS (inline numbers under work tile titles)
   ================================================================== */
.case-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 14px;
  font-family: Inter, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.case-metrics em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
  margin-right: 2px;
}
.case-metrics .sep { opacity: 0.45; }

@media (max-width: 720px) {
  .case-metrics { font-size: 0.74rem; gap: 6px 10px; }
}

/* ==================================================================
   PACKAGE PRICING (services.html)
   ================================================================== */
.service-packages article {
  display: flex;
  flex-direction: column;
}
.pkg-price {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-family: Inter, sans-serif;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.pkg-price .pkg-from {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.pkg-price em {
  font-style: normal;
  font-family: "Playfair Display", serif;
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.pkg-ecosystem-note {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 9%, var(--paper));
  color: var(--ink-soft);
}

/* ==================================================================
   MOBILE BEAUTIFICATION (final polish pass)
   ================================================================== */

/* Tighter horizontal gutters on phones so content never touches the edge.
   The base container width is min(--max, 100% - gutter*2) and on phones
   --gutter is 18px, but several full-bleed sections + the hero have
   their own flex/grid rules that collapse content to x:0. Fix at the
   page-shell level. */
@media (max-width: 720px) {
  :root { --gutter: 22px; }

  /* The home hero text was hitting the left edge because the
     container's children are flex column with no extra padding.
     Add a comfortable side-padding to the hero copy on phones. */
  .home-hero .container,
  .hero .container,
  .page-hero .container {
    padding-left: 4px;
    padding-right: 4px;
  }

  /* Tighten home hero typography for phones */
  .home-hero h1 {
    font-size: clamp(2.4rem, 11vw, 3.8rem);
    line-height: 1.02;
    margin: 28px 0 44px;
  }

  /* Founder + saras + ryder + sunny landing hero */
  .hero .display,
  .hero h1.display {
    font-size: clamp(2.1rem, 9.5vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
  }

  /* Generic page-hero h1 */
  .page-hero h1 {
    font-size: clamp(2.2rem, 10vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
  }

  /* Section headings stay punchy but not overwhelming */
  .section h2,
  .section-intro h2 {
    font-size: clamp(1.7rem, 7.5vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
  }

  /* Lead paragraphs get a hair more breathing room */
  .lead,
  p.lead {
    font-size: 1.02rem;
    line-height: 1.55;
  }

  /* Section vertical rhythm: a little more air on mobile */
  .section {
    padding: clamp(48px, 9vw, 80px) 0;
  }

  /* Hero-intro lead becomes the main paragraph on home, tighten it */
  .hero-intro .lead {
    font-size: 1.02rem;
    line-height: 1.55;
  }
  .hero-intro {
    padding-top: 8px;
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    justify-self: stretch;
  }
  .hero-actions .button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  /* The hero-foot parent often has a constrained max-width; remove on mobile */
  .hero-foot {
    width: 100%;
  }

  /* Contact form: stack name + email vertically on phones, fix overflow */
  .contact-form > div[style*="grid-template-columns:1fr 1fr"],
  .contact-form > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .contact-form input,
  .contact-form textarea {
    font-size: 16px; /* iOS will not zoom on focus below 16px */
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Project-fit aside is too prominent on phones, soften it */
  .contact-card .eyebrow {
    margin-bottom: 6px;
  }

  /* Service-link-list cells on services.html are sometimes cramped */
  .service-link-list a {
    padding: 22px 0;
  }
  .service-link-list h3 {
    font-size: 1.1rem;
  }

  /* Service columns (package cards) need more vertical air */
  .service-packages article {
    padding: 22px 0;
  }
  .service-columns-wide article h3 {
    font-size: 1.1rem;
  }

  /* Work-grid case cards: tighten the foot text */
  .case-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .case-foot h3 {
    font-size: 1.05rem;
    line-height: 1.35;
  }
  .case-metrics {
    font-size: 0.72rem;
    width: 100%;
  }

  /* Results strip on home: tighten metric numbers slightly + add bottom space */
  .results-strip {
    padding: clamp(36px, 8vw, 64px) 0 clamp(20px, 5vw, 40px);
  }
  .result-num {
    font-size: clamp(2.4rem, 11vw, 3.4rem);
  }
  .result-label {
    font-size: 0.84rem;
  }

  /* Pull-quote on home gets a hair more space and tighter type */
  .results-quote blockquote {
    font-size: 1.05rem;
    line-height: 1.5;
  }
  .results-quote figcaption {
    font-size: 0.74rem;
    letter-spacing: 0.06em;
  }

  /* Founder cards on about: more space + slightly smaller name */
  .team-card {
    margin-bottom: 28px;
  }
  .team-card h3 {
    font-size: 1.5rem;
  }

  /* FAQ items: bigger touch targets */
  .faq-item summary {
    padding: 18px 0;
    font-size: 1rem;
  }
  .faq-item p {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  /* Footer: more breathing room between columns when stacked */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 20px;
    padding-top: 48px;
  }
  .footer-grid > .footer-brand {
    grid-column: 1 / -1;
    margin-bottom: 8px;
  }
  .footer-grid h4 {
    margin-bottom: 14px;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
  }
  .footer-grid a {
    padding: 4px 0;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-top: 36px;
    margin-top: 32px;
    font-size: 0.78rem;
  }

  /* Footer CTA: stack and breathe */
  .footer-cta {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .footer-cta h2 {
    font-size: clamp(2rem, 10vw, 3rem);
    line-height: 1.05;
  }
  .footer-cta .right {
    align-items: stretch;
  }
  .footer-cta .right .button {
    width: 100%;
    justify-content: center;
  }

  /* Founder landing page: the contact-layout grid stacks single-col on mobile */
  .contact-layout {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  .team-portrait {
    max-width: 360px;
  }
}

/* Tighter still on very small phones */
@media (max-width: 380px) {
  .home-hero h1 { font-size: 2.4rem; }
  .hero h1.display { font-size: 2.1rem; }
  .page-hero h1 { font-size: 2.2rem; }
  .section h2, .section-intro h2 { font-size: 1.65rem; }
  .home-hero .hero-founders .names { font-size: 0.88rem; }
}

/* Make sure no horizontal scroll exists on mobile from any wide element */
@media (max-width: 720px) {
  html, body { overflow-x: hidden; }
  .page,
  .section,
  .container {
    max-width: 100%;
    overflow-x: clip;
  }
}

/* ==================================================================
   RESULTS PAGE + HOME RESULTS ENHANCEMENTS
   ================================================================== */

.results-eyebrow {
  margin-bottom: clamp(32px, 5vw, 56px);
}
.results-eyebrow h2 {
  margin-top: 12px;
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.results-cta {
  margin-top: clamp(32px, 5vw, 56px);
}

/* RESULTS PAGE: case study layout */
.case-study {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
}

.case-study-head .case-num {
  display: inline-block;
  font-family: Inter, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.case-study-head .case-num::before {
  content: "●";
  color: var(--accent);
  margin-right: 8px;
}
.case-study-head h2 {
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
}
.case-study-head h2 em {
  color: var(--accent);
  font-style: italic;
}
.case-tagline {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 60ch;
  margin-bottom: 22px;
}
.case-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: Inter, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.case-chips .sep { opacity: 0.4; }

.case-shot {
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  background: #0a0a0c;
  aspect-ratio: 16 / 10;
  text-decoration: none;
  transition: transform 400ms var(--ease-out);
}
.case-shot:hover { transform: translateY(-2px); }
.case-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.case-shot[href*="ryduzz"] img { object-position: top left; }
.case-shot-tag {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(8, 8, 10, 0.78);
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  backdrop-filter: blur(6px);
}

.case-shot-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.case-shot.half {
  aspect-ratio: 4 / 3;
}

.case-study-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px) clamp(40px, 6vw, 80px);
  font-family: Inter, sans-serif;
}
.case-block h3 {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--ink);
}
.case-block p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}

.case-stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.case-stats li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  align-items: baseline;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line);
}
.case-stats li:last-child { border-bottom: none; }
.case-stats em {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.case-stats span {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.case-quote {
  grid-column: 1 / -1;
  padding: clamp(20px, 3vw, 32px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 8px 0;
}
.case-quote blockquote {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink);
}
.case-quote blockquote span {
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
  margin: 0 2px;
}
.case-quote figcaption {
  margin-top: 14px;
  font-family: Inter, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.case-quote figcaption a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(124, 58, 237, 0.45);
}
.case-quote figcaption a:hover { color: var(--accent); }
.case-quote figcaption .sep { opacity: 0.5; margin: 0 4px; }

.case-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}

/* CTA BAND on results page */
.cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: end;
}
.cta-band h2 {
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.cta-band .section-num {
  display: inline-block;
  font-family: Inter, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.cta-band .section-num::before {
  content: "●";
  color: var(--accent);
  margin-right: 8px;
}

/* MOBILE: case studies stack cleanly */
@media (max-width: 720px) {
  .case-study-body {
    grid-template-columns: 1fr;
  }
  .case-shot-pair {
    grid-template-columns: 1fr;
  }
  .case-shot.half {
    aspect-ratio: 16 / 10;
  }
  .case-stats li {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .case-stats em { font-size: 1.4rem; }
  .case-stats span { font-size: 0.88rem; }
  .cta-band {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .case-actions { width: 100%; }
  .case-actions .button {
    width: 100%;
    justify-content: center;
  }
  .results-cta {
    width: 100%;
  }
  .results-cta .button {
    width: 100%;
    justify-content: center;
  }
}

/* Make sure results-strip border-top doesn't double up against hero */
.results-strip + .section {
  border-top: 1px solid var(--line);
}

/* ==================================================================
   MOBILE BUTTON-PAIR ALIGNMENT FIX (final)
   Wherever the layout has an inline flex group of buttons (hero CTAs,
   case-study CTAs, services CTAs), on mobile they should stack full-width
   so they line up cleanly and remain easy to tap.
   ================================================================== */
@media (max-width: 720px) {
  /* Any inline button row using flex+wrap stacks on mobile */
  div[style*="display:flex"][style*="flex-wrap:wrap"],
  div[style*="display: flex"][style*="flex-wrap: wrap"] {
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px !important;
  }
  div[style*="display:flex"][style*="flex-wrap:wrap"] > .button,
  div[style*="display: flex"][style*="flex-wrap: wrap"] > .button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* On mobile, make ghost/secondary buttons match the visual weight of the
     primary button so stacked CTAs read as a pair, not a button + a link. */
  .button.ghost,
  .case-actions .button.ghost,
  .results-cta .button.ghost,
  .hero-actions .button.secondary,
  div[style*="display:flex"] > .button.ghost,
  div[style*="display: flex"] > .button.ghost {
    height: 52px;
    padding: 0 22px;
    border: 1px solid var(--line);
    border-radius: 999px;
  }
  .button.ghost .arrow {
    margin-left: 6px;
  }
}

/* ==================================================================
   FOUNDER LANDING PAGES (saras / ryder / sunny)
   Tighter top padding and a smaller, more readable h1 than the
   home hero, since these pages are profile pages, not the brand splash.
   ================================================================== */

.founder-hero {
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.founder-hero h1.display {
  font-size: clamp(2.4rem, 6.4vw, 5.2rem);
  line-height: 1.06;
  letter-spacing: 0.006em;
  margin-top: 16px;
}

@media (max-width: 860px) {
  .founder-hero {
    padding-top: clamp(40px, 9vw, 68px);
    padding-bottom: clamp(32px, 8vw, 56px);
  }
  .founder-hero h1.display {
    font-size: clamp(2.0rem, 8.4vw, 3.0rem);
    line-height: 1.12;
    letter-spacing: 0.004em;
    margin-top: 14px;
  }
}

/* ==================================================================
   MONOGRAM PORTRAITS (until real headshots arrive)
   Dark ink tile, italic Playfair initials centered, subtle accent
   wash so each card has its own quiet character.
   ================================================================== */
.team-portrait.portrait-mono,
.team-card.tone-bone .team-portrait.portrait-mono,
.team-card.tone-stone .team-portrait.portrait-mono,
.team-card.tone-ember .team-portrait.portrait-mono {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background:
    radial-gradient(120% 80% at 30% 25%, rgba(124, 58, 237, 0.18), transparent 60%),
    radial-gradient(140% 90% at 75% 80%, rgba(124, 58, 237, 0.10), transparent 60%),
    var(--ink) !important;
  overflow: hidden;
  position: relative;
}
.portrait-mono::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(70% 50% at 50% 50%, rgba(255,255,255,0.04), transparent 70%);
  pointer-events: none;
}
.portrait-mono .mono,
.team-card.tone-bone .portrait-mono .mono,
.team-card.tone-stone .portrait-mono .mono,
.team-card.tone-ember .portrait-mono .mono {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(4.4rem, 11vw, 9rem);
  line-height: 1;
  letter-spacing: -0.008em;
  color: #fff !important;
  position: relative;
  z-index: 1;
  transform: translateY(-2px);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
/* Per-person quiet color shift. Glow is OFF-CENTER so the monogram
   itself sits on a darker ink area for max white-on-dark contrast. */
.team-card#saras-totey .portrait-mono {
  background:
    radial-gradient(90% 70% at 18% 18%, rgba(124, 58, 237, 0.42), transparent 60%),
    radial-gradient(110% 80% at 90% 90%, rgba(124, 58, 237, 0.12), transparent 60%),
    var(--ink) !important;
}
.team-card#ryder-thomas .portrait-mono {
  background:
    radial-gradient(90% 70% at 88% 18%, rgba(168, 121, 255, 0.36), transparent 60%),
    radial-gradient(110% 80% at 10% 90%, rgba(124, 58, 237, 0.20), transparent 60%),
    var(--ink) !important;
}
.team-card#sunny-avula .portrait-mono {
  background:
    radial-gradient(90% 70% at 18% 88%, rgba(124, 58, 237, 0.38), transparent 60%),
    radial-gradient(110% 80% at 90% 10%, rgba(168, 121, 255, 0.18), transparent 60%),
    var(--ink) !important;
}

/* Founder landing pages: monogram inside the profile card portrait */
.founder-hero .team-portrait.portrait-mono,
section .team-portrait.portrait-mono {
  background:
    radial-gradient(120% 80% at 30% 25%, rgba(124, 58, 237, 0.22), transparent 60%),
    radial-gradient(140% 90% at 75% 80%, rgba(124, 58, 237, 0.10), transparent 60%),
    var(--ink) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-portrait.portrait-mono .mono {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(4.8rem, 12vw, 10rem);
  line-height: 1;
  color: #fff;
  letter-spacing: -0.008em;
  position: relative;
  z-index: 1;
}

/* ==================================================================
   STAT CLARITY (home results strip)
   - sub line under the eyebrow heading
   - preamble paragraph before the MR pull quote so visitors know
     what econ.mom is before they read the quote.
   ================================================================== */
.results-sub {
  margin: 14px 0 0;
  max-width: 56ch;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.5;
  color: var(--ink-soft);
}
.quote-preamble {
  max-width: 70ch;
  margin: clamp(28px, 4vw, 48px) auto 0;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(124, 58, 237, 0.05);
}
.quote-preamble p {
  margin: 0;
  font-size: clamp(1.02rem, 1.25vw, 1.18rem);
  line-height: 1.6;
  color: var(--ink);
}
.quote-preamble strong { font-weight: 600; }
.quote-preamble a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.result-label strong {
  font-weight: 600;
  color: var(--ink);
}

@media (max-width: 720px) {
  .quote-preamble { padding: 18px 18px; }
}

/* ==================================================================
   CASE-TAGLINE (one-line "what it is" above the case-card h3)
   ================================================================== */
.case-tagline {
  display: block;
  margin: 6px 0 2px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(0.92rem, 1.05vw, 1rem);
  line-height: 1.45;
  color: var(--ink-soft);
  letter-spacing: 0.002em;
}

/* ==================================================================
   PACKAGE TIERS (services.html, post-AI-pricing-reset)
   Three-tier rows inside a single package card so the layout reads
   as a price ladder, not a separate card per price.
   ================================================================== */
.pkg-tiers {
  list-style: none;
  margin: 18px 0 4px;
  padding: 0;
  border-top: 1px solid var(--line);
}
.pkg-tiers li {
  display: grid;
  grid-template-columns: minmax(110px, 140px) 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-family: Inter, sans-serif;
  font-size: 0.92rem;
  line-height: 1.5;
}
.pkg-tiers li strong {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.04rem;
  color: var(--ink);
  letter-spacing: 0.002em;
}
.pkg-tiers li span {
  color: var(--ink-soft);
}
.pkg-tiers li em {
  font-style: normal;
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: 1.12rem;
  color: var(--accent);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .pkg-tiers li {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 12px;
  }
  .pkg-tiers li strong { grid-column: 1; grid-row: 1; }
  .pkg-tiers li em { grid-column: 2; grid-row: 1; }
  .pkg-tiers li span { grid-column: 1 / span 2; grid-row: 2; }
}

.pkg-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  font-family: Inter, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.12);
  color: var(--accent);
  vertical-align: middle;
}
.pkg-badge-shield {
  background: rgba(124, 58, 237, 0.12);
  color: var(--accent);
}

.pkg-cta-row {
  margin-top: 14px;
  font-family: Inter, sans-serif;
  font-size: 0.9rem;
}
.pkg-cta-row a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==================================================================
   "WHY US VS AI" SECTION (home, post AI commoditization era)
   Two-column comparison + honest-take line. Frames ATT as strategy +
   taste, not just code. Critical positioning section.
   ================================================================== */
.ai-vs-us-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 40px;
}
.ai-col {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
  background: var(--paper);
}
.ai-col h3 {
  font-family: Inter, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.ai-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ai-col li {
  position: relative;
  padding: 10px 0 10px 24px;
  border-bottom: 1px solid var(--line);
  font-family: Inter, sans-serif;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--ink);
}
.ai-col li:last-child { border-bottom: 0; }
.ai-col li::before {
  content: "·";
  position: absolute;
  left: 4px;
  top: 8px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink-soft);
}
.ai-col-us {
  border-color: rgba(124, 58, 237, 0.4);
  background:
    radial-gradient(80% 60% at 30% 0%, rgba(124, 58, 237, 0.06), transparent 60%),
    var(--paper);
}
.ai-col-us h3 { color: var(--accent); }
.ai-col-us li::before {
  content: "+";
  color: var(--accent);
  font-weight: 700;
  top: 10px;
}
.ai-vs-us-line {
  margin: 32px 0 0;
  max-width: 70ch;
  padding: 22px 26px;
  border-left: 3px solid var(--accent);
  background: rgba(124, 58, 237, 0.04);
  font-family: Inter, sans-serif;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink);
}

@media (max-width: 860px) {
  .ai-vs-us-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .ai-col { padding: 22px; }
  .ai-vs-us-line { padding: 18px 20px; font-size: 0.96rem; }
}