/* ============================================================
   Sangam India - shared stylesheet
   Visual language from the Sangam deck:
   cream + royal indigo + orange, handwritten script headlines,
   bold geometric sans statements, hand-drawn circle accents.
   ============================================================ */

:root {
  /* Sangam brand palette (from brand guidelines) */
  --cream: #FCFCE4;       /* Sangam Cream - paper & text on navy */
  --cream-soft: #FEFEF4;
  --blue: #243C90;        /* Sangam Navy - primary, ~60% of layout */
  --blue-deep: #1B2E6E;
  --blue-chip: #6084C0;   /* Periwinkle - panels, stat cards, line-work */
  --blue-chip2: #456DAF;  /* Periwinkle, darkened for cream text (4.97:1) */
  --sky: #D8F0FC;         /* Sangam Sky - soft section backgrounds, breathers */
  --orange: #FC7848;      /* Sangam Orange - accent, ~10%, one word / CTA */
  --orange-deep: #E85F2C;
  --yellow: #F2C230;      /* expressive/social accent */
  --line: #e6e6cf;

  --font-display: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --font-hand: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --font-body: "Hanken Grotesk", -apple-system, "Helvetica Neue", sans-serif;

  --max: 1160px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--blue);
  line-height: 1.65;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

::selection { background: var(--yellow); color: var(--blue); }

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

/* ---------- Top band ---------- */
.texture-band {
  height: 6px;
  background: var(--blue);
}

/* ---------- Navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 245, 225, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1.5px solid var(--blue);
}

.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.005em;
  text-decoration: none;
  color: var(--blue);
}

/* sg monogram mark, recolourable via mask */
.sg-mark {
  display: inline-block;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background-color: var(--blue);
  -webkit-mask: url("../assets/img/sg-mark.png") center/contain no-repeat;
  mask: url("../assets/img/sg-mark.png") center/contain no-repeat;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

.nav-links a {
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--blue);
  transition: color 0.15s;
}

.nav-links a:hover, .nav-links a.active { color: var(--orange-deep); }

.nav-toggle { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 13px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.15s, background 0.15s, color 0.15s;
  border: 2px solid transparent;
  white-space: nowrap;
}

.btn:hover { transform: translateY(-1px) rotate(-0.5deg); }

/* Primary = Sangam Orange (brand-guideline spec) */
.btn-primary { background: var(--orange); color: var(--cream); }
.btn-primary:hover { background: var(--orange-deep); color: var(--cream); }

/* Secondary = Navy */
.btn-secondary { background: var(--blue); color: var(--cream); }
.btn-secondary:hover { background: var(--blue-deep); color: var(--cream); }

.btn-outline { border-color: var(--blue); color: var(--blue); }
.btn-outline:hover { background: var(--blue); color: var(--cream); }

.btn-light { background: var(--cream); color: var(--blue); }
.btn-light:hover { background: #fff; }

.btn-outline-light { border-color: rgba(251,245,225,.75); color: var(--cream); }
.btn-outline-light:hover { background: var(--cream); color: var(--orange-deep); }

/* ---------- Typography ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Display headline accent (Hanken Black) */
.hand, h1.hand, h2.hand {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-transform: none;
}

.kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin-bottom: 16px;
}

.lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--blue);
  opacity: 0.85;
  max-width: 720px;
}

/* Hand-drawn orange circle around a key word (deck motif) */
.circled, .hero h1 em, .page-hero h1 em {
  font-style: normal;
  color: inherit;
  position: relative;
  white-space: nowrap;   /* the ellipse only reads correctly on one line */
  padding: 0 0.12em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 72' preserveAspectRatio='none'%3E%3Cellipse cx='100' cy='36' rx='95' ry='29' fill='none' stroke='%23FC7848' stroke-width='2.6' transform='rotate(-2 100 36)'/%3E%3Cellipse cx='101' cy='35' rx='92' ry='31' fill='none' stroke='%23FC7848' stroke-width='1.6' transform='rotate(1.5 100 36)'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ---------- Hero ---------- */
.hero { padding: 100px 0 90px; }

.hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(44px, 6.4vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 16ch;
  margin-bottom: 28px;
}

.hero .lede { margin-bottom: 40px; }

.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-strip {
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1.5px solid var(--blue);
  display: flex;
  gap: 12px 40px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 600;
}

.hero-strip strong { color: var(--orange-deep); font-weight: 800; }

/* ---------- Marquee ticker (quirk: culture × commerce pairings) ---------- */
.marquee {
  overflow: hidden;
  background: var(--blue);
  color: var(--cream);
  padding: 13px 0;
}

.marquee-track {
  display: flex;
  gap: 44px;
  width: max-content;
  white-space: nowrap;
  animation: marquee 30s linear infinite;
}

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

.marquee-track span {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.marquee-track span::after {
  content: "✦";
  color: var(--orange);
  margin-left: 44px;
}

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

/* Marquee is a signature element: keep it moving even with reduced-motion. */

/* ---------- Sticker badge (quirk: rotated stamp) ---------- */
.hero-rel { position: relative; }

.sticker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--blue);
  border: 2.5px dashed var(--blue);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transform: rotate(-10deg);
  animation: sticker-wobble 5s ease-in-out infinite;
}

.sticker-float {
  position: absolute;
  top: -6px;
  right: 24px;
  z-index: 3;
}

@keyframes sticker-wobble {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(-4deg); }
}

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

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

/* ---------- Quirk hovers ---------- */
.card { transition: transform 0.18s, box-shadow 0.18s; }

.card:hover {
  transform: rotate(-0.8deg) translateY(-4px);
  box-shadow: 5px 6px 0 var(--blue);
}

.chip { transition: transform 0.15s; }
.chip:hover { transform: rotate(0deg) scale(1.06); }

.card-link:hover, .footer ul a:hover, .lede a:hover {
  text-decoration: underline wavy;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}

/* ---------- Photo marquee (scrolling film strip of real photos) ---------- */
.photo-marquee { overflow: hidden; padding: 8px 0 14px; }

.photo-track {
  display: flex;
  gap: 22px;
  width: max-content;
  animation: marquee 50s linear infinite;
}

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

.photo-track img {
  height: 200px;
  width: auto;
  border-radius: 12px;
  border: 3px solid var(--blue);
  transform: rotate(-1.2deg);
}

.photo-track img:nth-child(even) { transform: rotate(1.2deg); }

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

/* ---------- Vertical moving strips (marquee wall) ---------- */
.vwall {
  display: grid;
  gap: 16px;
  height: 520px;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 11%, #000 89%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 11%, #000 89%, transparent 100%);
}
.vwall-2 { grid-template-columns: 1fr 1fr; }
.vwall-3 { grid-template-columns: repeat(3, 1fr); }

.vcol {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: vscroll 30s linear infinite;
  will-change: transform;
}
.vcol.rev { animation-direction: reverse; }
.vcol.slow { animation-duration: 42s; }
.vwall:hover .vcol { animation-play-state: paused; }

@keyframes vscroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .vcol { animation: none; }
  .vwall { height: auto; -webkit-mask-image: none; mask-image: none; }
  /* hide the duplicated loop items when not animating */
  .vcol [aria-hidden="true"] { display: none; }
}
@media (max-width: 640px) {
  .vwall-3 { grid-template-columns: 1fr 1fr; }
}

/* Category chip used inside the vertical strip */
.vcat {
  border-radius: 14px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
}
.vcat .vcat-num { font-family: var(--font-hand); font-size: 22px; font-weight: 700; opacity: 0.5; line-height: 1; }
.vcat h4 { font-size: 15.5px; font-weight: 800; text-transform: uppercase; line-height: 1.15; }
.vcat:nth-child(6n+1) { background: var(--blue); color: var(--cream); }
.vcat:nth-child(6n+2) { background: var(--orange); color: var(--cream); }
.vcat:nth-child(6n+3) { background: var(--sky); color: var(--blue); }
.vcat:nth-child(6n+4) { background: var(--blue-chip); color: var(--cream); }
.vcat:nth-child(6n+5) { background: var(--yellow); color: var(--blue); }
.vcat:nth-child(6n+6) { background: var(--cream-soft); color: var(--blue); border: 2px solid var(--blue); }

/* ---------- Category tiles (solid colour blocks) ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.cat-tile {
  position: relative;
  min-height: 132px;
  padding: 18px 16px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.16s, box-shadow 0.16s;
}

/* palette cycle across the brand colours */
.cat-tile:nth-child(5n+1) { background: var(--blue); color: var(--cream); }
.cat-tile:nth-child(5n+2) { background: var(--orange); color: var(--cream); }
.cat-tile:nth-child(5n+3) { background: var(--yellow); color: var(--blue); }
.cat-tile:nth-child(5n+4) { background: var(--blue-chip); color: var(--cream); }
.cat-tile:nth-child(5n+5) { background: var(--cream-soft); color: var(--blue); border: 2px solid var(--blue); }

.cat-num {
  font-family: var(--font-hand);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  opacity: 0.55;
}

.cat-tile h4 {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.cat-tile:hover {
  transform: translateY(-4px) rotate(-1deg);
  box-shadow: 5px 7px 0 var(--blue);
}
.cat-tile:nth-child(5n+1):hover,
.cat-tile:nth-child(5n+4):hover { box-shadow: 5px 7px 0 var(--orange); }

/* ---------- Icon cards (problem infographic, on dark) ---------- */
/* ---------- The Stack funnel ---------- */
.funnel {
  max-width: 760px;
  margin: 8px auto 0;
  text-align: center;
}
.funnel-top {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin-bottom: 18px;
}
.funnel-band {
  display: block;
  margin: 0 auto;
  border-radius: 16px;
  padding: 20px 26px;
  text-decoration: none;
  color: var(--cream);
  transition: transform 0.16s, box-shadow 0.16s, filter 0.16s;
}
.funnel-band:hover { transform: translateY(-3px); box-shadow: 5px 7px 0 var(--blue); filter: saturate(1.08); }
.fb-1 { max-width: 100%;  background: var(--orange); }
.fb-2 { max-width: 82%;   background: var(--blue); }
.fb-3 { max-width: 64%;   background: var(--blue-chip); }
.fb-4 { max-width: 46%;   background: var(--blue-deep); }
.fb-2:hover, .fb-4:hover { box-shadow: 5px 7px 0 var(--orange); }

.fb-stage {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}
.fb-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(20px, 2.6vw, 28px);
  letter-spacing: -0.01em;
  margin: 2px 0 3px;
}
.fb-desc { display: block; font-size: 14px; font-weight: 500; opacity: 0.92; }

.funnel-arrow { color: var(--orange); font-size: 18px; line-height: 1; margin: 7px 0; }
.funnel-close {
  margin: 30px auto 4px;
  max-width: 560px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.2;
  color: var(--blue);
}
.funnel-cta { margin-top: 20px; }

.lede-sub { font-size: 16px; opacity: 0.8; margin-top: 16px; }
.lede-list {
  margin-top: 20px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--yellow);
}

@media (max-width: 640px) {
  .fb-2, .fb-3, .fb-4 { max-width: 100%; }
}

/* ---------- Founder note ---------- */
.founder-note {
  max-width: 720px;
  margin: 8px auto 0;
}
.founder-note p { margin-bottom: 18px; }

/* ---------- Founder note signature + actions ---------- */
.founder-sign {
  margin-top: 28px;
  font-weight: 800;
  font-size: 18px;
  color: var(--blue);
}
.founder-sign span {
  display: inline-block;
  margin-top: 2px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange-deep);
}
.founder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

/* ---------- Founder bio card ---------- */
.founder-bio {
  max-width: 720px;
  margin: 32px auto 0;
  padding: 24px 28px;
  background: var(--cream-soft);
  border-left: 4px solid var(--orange);
  border-radius: 10px;
}
.founder-bio p { font-size: 15px; color: var(--blue); opacity: 0.9; }
.founder-bio strong { font-weight: 800; opacity: 1; }

/* ---------- Team ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 20px;
}
.team-card { text-align: center; }
.team-photo {
  width: 128px;
  height: 128px;
  margin: 0 auto 14px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s;
}
.team-card:hover .team-photo { transform: translateY(-4px) rotate(-3deg); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-initials {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 44px;
  color: var(--cream);
}
.team-card:nth-child(7n+1) .team-initials { background: var(--blue); }
.team-card:nth-child(7n+2) .team-initials { background: var(--orange); }
.team-card:nth-child(7n+3) .team-initials { background: var(--blue-chip); }
.team-card:nth-child(7n+4) .team-initials { background: var(--blue); }
.team-card:nth-child(7n+5) .team-initials { background: var(--orange); }
.team-card:nth-child(7n+6) .team-initials { background: var(--blue-chip); }
.team-card:nth-child(7n+7) .team-initials { background: var(--blue); }
.team-card h4 { font-size: 17px; font-weight: 800; }
.team-card .role { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-deep); margin-top: 3px; }
.team-card .team-bio { font-size: 13.5px; line-height: 1.45; color: var(--blue); font-weight: 600; opacity: 0.92; margin-top: 8px; }
.team-card .team-bio2 {
  font-size: 12.5px; line-height: 1.4; color: var(--blue); font-style: italic;
  max-height: 0; opacity: 0; margin-top: 0; overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.25s ease;
}
.team-card:hover .team-bio2, .team-card:focus-within .team-bio2 {
  max-height: 60px; opacity: 0.62; margin-top: 6px;
}

/* ---------- Per-person figures: the photo is the head, this is the body ---------- */
.team-act {
  height: 72px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: -6px 0 2px;   /* tuck shoulders just under the photo */
}
.figy { overflow: visible; }
.figy line, .figy circle { stroke: var(--blue); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.figy .fy-ball { fill: var(--orange); stroke: none; }
.figy.accent line, .figy.accent circle { stroke: var(--orange); }
.figy.accent .fy-ball { fill: var(--blue); }
.fy-body, .fy-arm, .fy-leg, .fy-bar { transform-box: view-box; }
.fy-body { transform-origin: 32px 88px; }
.fy-arm-l, .fy-arm-r { transform-origin: 32px 12px; }
.fy-leg-l, .fy-leg-r { transform-origin: 32px 48px; }

/* wave (Kaanksha) */
.act-wave .fy-arm-r { animation: k-wave 0.85s ease-in-out infinite; }
.act-wave .fy-arm-l { animation: k-swa 1.7s ease-in-out infinite; }
/* juggle (Suhani, 97 tabs) */
.act-juggle .fy-arm-l { animation: k-jugL 0.5s ease-in-out infinite; }
.act-juggle .fy-arm-r { animation: k-jugR 0.5s ease-in-out infinite; }
.act-juggle .fy-ball.b1 { animation: k-toss 0.5s ease-in-out infinite; }
.act-juggle .fy-ball.b2 { animation: k-toss 0.5s ease-in-out infinite; animation-delay: 0.25s; }
/* run (Soham, ops mode) */
.act-run .fy-arm-l, .act-run .fy-leg-r { animation: k-swa 0.34s linear infinite; }
.act-run .fy-arm-r, .act-run .fy-leg-l { animation: k-swb 0.34s linear infinite; }
/* dance (Preet, diva) */
.act-dance .fy-body { animation: k-sway 0.72s ease-in-out infinite; }
.act-dance .fy-arm-l { animation: k-armUpL 0.72s ease-in-out infinite; }
.act-dance .fy-arm-r { animation: k-armUpR 0.72s ease-in-out infinite; }
/* carry (Shardul, lifting tables): arms out holding a bar, body heaves */
.act-carry .fy-body { animation: k-heave 0.95s ease-in-out infinite; }
/* kick (Jay): one big leg swing, arms out for balance */
.act-kick .fy-leg-r { animation: k-kick 0.6s ease-in-out infinite; }
.act-kick .fy-arm-l { transform: rotate(-28deg); }
.act-kick .fy-arm-r { transform: rotate(28deg); }
/* type (Rajas, Premiere Pro) */
.act-type .fy-arm-l { animation: k-tapA 0.3s ease-in-out infinite; }
.act-type .fy-arm-r { animation: k-tapB 0.3s ease-in-out infinite; }

@keyframes k-wave { 0%,100% { transform: rotate(-135deg); } 50% { transform: rotate(-105deg); } }
@keyframes k-swa { 0%,100% { transform: rotate(26deg); } 50% { transform: rotate(-26deg); } }
@keyframes k-swb { 0%,100% { transform: rotate(-26deg); } 50% { transform: rotate(26deg); } }
@keyframes k-armUpL { 0%,100% { transform: rotate(-30deg); } 50% { transform: rotate(-70deg); } }
@keyframes k-armUpR { 0%,100% { transform: rotate(30deg); } 50% { transform: rotate(70deg); } }
@keyframes k-jugL { 0%,100% { transform: rotate(-58deg); } 50% { transform: rotate(-96deg); } }
@keyframes k-jugR { 0%,100% { transform: rotate(58deg); } 50% { transform: rotate(96deg); } }
@keyframes k-toss { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes k-sway { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes k-heave { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes k-kick { 0%,100% { transform: rotate(6deg); } 50% { transform: rotate(-52deg); } }
@keyframes k-tapA { 0%,100% { transform: rotate(6deg); } 50% { transform: rotate(-6deg); } }
@keyframes k-tapB { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

@media (max-width: 720px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Work marquee (low, constantly-moving snapshot strip) ---------- */
.work-marquee {
  overflow: hidden;
  margin-top: 8px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.work-marquee-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: marquee 60s linear infinite;
  will-change: transform;
}
.work-marquee:hover .work-marquee-track { animation-play-state: paused; }
.work-mini {
  position: relative;
  flex-shrink: 0;
  width: 216px;
  height: 128px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--cream);
  text-decoration: none;
  display: block;
  background: var(--blue-chip);
  transition: transform 0.18s;
}
.work-mini:hover { transform: translateY(-4px); }
.work-mini img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.work-mini .wm-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 24px 12px 9px;
  background: linear-gradient(transparent, rgba(15,18,40,0.85));
}
.work-mini .wm-name { display: block; color: var(--cream); font-weight: 800; font-size: 14px; line-height: 1.12; }
.work-mini .wm-tag { display: block; color: var(--yellow); font-weight: 700; font-size: 11px; margin-top: 2px; }
/* cover tiles (brand-colour block, no screenshot yet) */
.work-mini.wm-cover { display: flex; align-items: center; justify-content: center; text-align: center; }
.work-mini.wm-cover .wm-label { position: static; background: none; padding: 12px; }
.work-mini.wm-cover .wm-name { font-size: 19px; }
.work-mini.c-orange { background: var(--orange); }
.work-mini.c-jamun  { background: #6D4AA8; }
/* This strip is a brand signature: it keeps moving even under reduced-motion. */

/* ---------- Selected work / portfolio grid ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.work-card { text-decoration: none; color: inherit; display: block; }

.work-shot {
  aspect-ratio: 4 / 5;
  border: 3px solid var(--blue);
  border-radius: 14px;
  overflow: hidden;
  background: var(--cream-soft);
  transition: transform 0.18s, box-shadow 0.18s;
}

.work-card:nth-child(2n) .work-shot { transform: rotate(1deg); }
.work-card:nth-child(3n) .work-shot { transform: rotate(-1deg); }

.work-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform 0.5s ease; }

.work-card:hover .work-shot { transform: rotate(0deg) translateY(-5px); box-shadow: 5px 7px 0 var(--orange); }
.work-card:hover .work-shot img { transform: scale(1.05); }

.work-meta { margin-top: 14px; }
.work-meta h4 { font-size: 17px; font-weight: 800; color: var(--blue); }
.work-meta .work-tag { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-deep); margin-top: 3px; }
.work-meta .work-do { font-size: 14px; color: var(--blue); opacity: 0.8; margin-top: 6px; }
.work-meta .work-link { font-size: 13px; font-weight: 700; color: var(--orange-deep); margin-top: 8px; display: inline-block; }
.work-card:hover .work-meta .work-link { text-decoration: underline wavy; text-underline-offset: 4px; }

/* link-only brand tiles (no screenshot yet) */
.work-shot.work-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: var(--cream);
  text-align: center;
  padding: 20px;
}
.work-shot.work-placeholder span {
  font-family: var(--font-hand);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--cream);
}

/* on blue sections */
.section-dark .work-shot { border-color: var(--cream); }
.section-dark .work-meta h4 { color: var(--cream); }
.section-dark .work-meta .work-do { color: var(--cream); opacity: 0.82; }
.section-dark .work-meta .work-tag,
.section-dark .work-meta .work-link { color: var(--yellow); }

@media (max-width: 920px) { .work-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .work-grid { grid-template-columns: 1fr; } }

.icon-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.icon-card {
  background: var(--blue-chip);
  border-radius: 14px;
  padding: 26px 22px;
}

.icon-card:nth-child(even) { transform: rotate(0.5deg); }
.icon-card:nth-child(odd) { transform: rotate(-0.5deg); }

.icon-card .ic {
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: rgba(251, 245, 225, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-card .ic svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--yellow);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-card h3 { font-size: 16px; text-transform: uppercase; margin-bottom: 8px; color: var(--cream); }

.icon-card p { font-size: 14px; color: var(--cream); opacity: 0.85; }

/* ---------- Big-number tiles (why-now infographic) ---------- */
.big-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.big-tile {
  border-radius: 16px;
  padding: 34px 28px;
  background: var(--blue);
  color: var(--cream);
}

.big-tile:nth-child(2) { background: var(--orange); transform: rotate(0.6deg); }
.big-tile:nth-child(3) { background: var(--yellow); color: var(--blue); transform: rotate(-0.6deg); }

.big-tile h3 {
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1.05;
  margin-bottom: 10px;
}

.big-tile p { font-size: 14.5px; font-weight: 600; }

.big-tile .src { display: block; margin-top: 10px; font-size: 12px; font-weight: 700; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- Photo grid strip ---------- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.photo-grid img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 12px;
  border: 3px solid var(--blue);
  transition: transform 0.15s;
}

.photo-grid img:nth-child(even) { transform: rotate(0.8deg); }
.photo-grid img:nth-child(odd) { transform: rotate(-0.8deg); }

.photo-grid img:hover { transform: rotate(0deg) scale(1.02); }

.img-frame {
  width: 100%;
  border-radius: 14px;
  border: 3px solid var(--blue);
  display: block;
}

@media (max-width: 920px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .icon-cards { grid-template-columns: 1fr 1fr; }
  .big-tiles { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .icon-cards { grid-template-columns: 1fr; }
  .photo-track img { height: 140px; }
}

/* ---------- Video frames ---------- */
.video-frame { position: relative; }

.video-frame video {
  width: 100%;
  display: block;
  border-radius: 16px;
  border: 3px solid var(--blue);
}

.video-frame .sticker {
  position: absolute;
  top: -30px;
  right: 20px;
  z-index: 2;
  width: 108px;
  height: 108px;
  font-size: 12px;
}

.video-inline {
  width: 100%;
  display: block;
  border-radius: 12px;
  margin-top: 24px;
}

/* ---------- Partner brand cards (co-building + home proof) ---------- */
.partner-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.partner-card {
  position: relative;
  background: var(--cream);
  color: var(--blue);
  border-radius: 16px;
  padding: 36px 32px;
  transition: transform 0.18s;
}

.partner-card:hover { transform: rotate(0.6deg) translateY(-4px); }

.partner-card video {
  width: 100%;
  display: block;
  border-radius: 10px;
  margin-bottom: 20px;
}

.partner-card h3 { font-size: 26px; text-transform: uppercase; margin-bottom: 4px; }

.partner-card .partner-sub {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin-bottom: 16px;
}

.partner-card p { font-size: 15px; }

.partner-card .chips .chip {
  font-size: 12.5px;
  padding: 7px 14px;
  background: var(--blue);
  color: var(--cream);
}

.partner-card .card-link {
  display: inline-block;
  margin-top: 20px;
  font-weight: 700;
  color: var(--orange-deep);
  text-decoration: none;
}

.partner-card .card-link:hover { text-decoration: underline wavy; text-underline-offset: 5px; }

.partner-card .sticker {
  position: absolute;
  top: -22px;
  right: -14px;
  width: 104px;
  height: 104px;
  font-size: 12px;
}

.partner-open {
  background: transparent;
  border: 2px dashed var(--blue-chip);
  color: var(--blue);
}

.section-dark .partner-open {
  border-color: rgba(251,245,225,.55);
  color: var(--cream);
}

.section-dark .partner-open h3 { color: var(--cream); }
.section-dark .partner-open .partner-sub { color: var(--yellow); }
.section-dark .partner-open .card-link { color: var(--yellow); }

@media (max-width: 920px) {
  .partner-grid { grid-template-columns: 1fr; }
}

/* ---------- Featured horizontal partner block (Kissa) ---------- */
.partner-featured {
  position: relative;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 38px;
  align-items: start;
  background: var(--cream);
  color: var(--blue);
  border-radius: 18px;
  padding: 34px;
}
.partner-featured .sticker {
  position: absolute;
  top: -22px; right: -14px;
  width: 104px; height: 104px;
  font-size: 12px;
  z-index: 3;
}
.pf-media { position: relative; }
.pf-media video {
  width: 100%;
  display: block;
  border-radius: 12px;
}
.pf-body h3 { font-size: 34px; text-transform: uppercase; margin-bottom: 4px; line-height: 1; }
.partner-featured .partner-sub {
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--orange-deep); margin-bottom: 16px;
}
.partner-featured p { font-size: 15px; line-height: 1.55; }
.partner-featured .chips { display: flex; flex-wrap: wrap; gap: 10px; }
.partner-featured .chips .chip {
  font-size: 12.5px; padding: 7px 14px;
  background: var(--blue); color: var(--cream); border-radius: 999px;
}
.pf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
.partner-featured .card-link { font-weight: 700; color: var(--orange-deep); text-decoration: none; }
.partner-featured .card-link:hover { text-decoration: underline wavy; text-underline-offset: 5px; }

/* Catalogue teaser card */
.catalogue-teaser {
  display: flex; gap: 14px; align-items: center;
  margin-top: 16px; padding: 12px 14px;
  background: #fff;
  border: 2px solid var(--blue);
  border-radius: 12px;
  text-decoration: none; color: var(--blue);
  transition: transform 0.16s, box-shadow 0.16s;
}
.catalogue-teaser:hover { transform: translateY(-3px); box-shadow: 5px 6px 0 var(--orange); }
.catalogue-teaser img {
  width: 72px; height: auto; border-radius: 6px; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22);
}
.ct-body { display: flex; flex-direction: column; }
.ct-label { font-weight: 800; font-size: 15px; }
.ct-sub { font-size: 12px; opacity: 0.68; margin: 2px 0 7px; }
.ct-cta { font-weight: 800; font-size: 13px; color: var(--orange-deep); }

/* Two smaller open slots side by side */
.partner-open-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.partner-open-row .partner-card { padding: 28px 26px; }

@media (max-width: 820px) {
  .partner-featured { grid-template-columns: 1fr; gap: 24px; }
  .partner-open-row { grid-template-columns: 1fr; }
}

/* ---------- Sections ---------- */
.section { padding: 96px 0; }

.section-dark {
  background-color: var(--blue);
  /* Signature dot texture: fine cream polka on navy (brand pattern) */
  background-image: radial-gradient(rgba(252, 252, 228, 0.10) 1.4px, transparent 1.5px);
  background-size: 24px 24px;
  color: var(--cream);
}

.section-dark .lede { color: var(--cream); opacity: 0.88; }
.section-dark .kicker { color: var(--yellow); }

.section-tint { background: var(--sky); }

/* ---------- Flywheel diagram ---------- */
.flywheel {
  max-width: 560px;
  margin: 8px auto 0;
}
.flywheel svg { width: 100%; height: auto; overflow: visible; }
.fw-hub {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: 0.02em;
  fill: var(--cream);
}
.fw-num { font-family: var(--font-hand); font-weight: 700; font-size: 17px; fill: var(--cream); }
.fw-name { font-family: var(--font-display); font-weight: 800; font-size: 15.5px; letter-spacing: 0.01em; fill: var(--cream); }
.fw-node:nth-child(4) .fw-name, .fw-node:nth-child(4) .fw-num { }
.fw-sub { font-family: var(--font-display); font-weight: 500; font-size: 11.5px; fill: var(--cream); opacity: 0.82; }

.flywheel-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin-top: 36px;
}
.flywheel-links a {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--blue);
  text-decoration: none;
}
.flywheel-links a:hover { color: var(--orange-deep); text-decoration: underline wavy; text-underline-offset: 4px; }

.flywheel-note {
  text-align: center;
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.8vw, 30px);
  font-weight: 900;
  letter-spacing: -0.015em;
  color: var(--blue);
}
.flywheel-note em { font-style: normal; color: var(--orange-deep); }

.section-head { max-width: 800px; margin-bottom: 56px; }

.section-head h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.section-head h2.hand {
  font-size: clamp(42px, 5.5vw, 64px);
  text-transform: none;
}

/* ---------- Pipeline - solid orange vertical cards (deck slide 7) ---------- */
.pipeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.pipeline-step {
  padding: 32px 26px;
  background: var(--orange);
  color: var(--cream);
  border-radius: 16px;
  position: relative;
  text-decoration: none;
  transition: transform 0.15s, background 0.15s;
}

.pipeline-step:nth-child(even) { transform: rotate(0.6deg); }
.pipeline-step:nth-child(odd) { transform: rotate(-0.6deg); }

.pipeline-step:hover { background: var(--orange-deep); transform: rotate(0deg) translateY(-3px); }

.pipeline-num {
  font-family: var(--font-hand);
  font-size: 26px;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 10px;
}

.pipeline-step h3 {
  font-size: 20px;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--cream);
}

.pipeline-step .stage {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}

.pipeline-step p { font-size: 14.5px; color: var(--cream); }

.pipeline-arrow {
  position: absolute;
  right: -21px;
  top: 40px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--cream);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* Pipeline on dark (venture studio page) */
.section-dark .pipeline-step { background: var(--orange); }
.section-dark .pipeline-arrow { background: var(--yellow); color: var(--blue); }

/* ---------- Card grids ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.card {
  background: var(--cream-soft);
  border: 2px solid var(--blue);
  border-radius: 20px;
  padding: 32px 28px;
}

.card h3 { font-size: 19px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0; }
.card p { font-size: 15px; opacity: 0.85; }

.card .card-link {
  display: inline-block;
  margin-top: 18px;
  font-weight: 700;
  font-size: 15px;
  color: var(--orange-deep);
  text-decoration: none;
}

.card .card-link:hover { text-decoration: underline; }

.card-accent { border-top: 6px solid var(--orange); }
.card-accent.marigold { border-top-color: var(--yellow); }
.card-accent.forest { border-top-color: var(--blue-chip); }
.card-accent.ink { border-top-color: var(--blue); }

/* ---------- Audience chips - rotated blue bubbles (deck slide 5) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 14px; }

.chip {
  padding: 11px 22px;
  background: var(--blue);
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--cream);
}

.chip:nth-child(odd) { transform: rotate(-1.5deg); background: var(--blue-chip); }
.chip:nth-child(even) { transform: rotate(1.2deg); }
.chip:nth-child(3n) { background: var(--orange); }

/* ---------- Stats - bold numbers, deck "Our Numbers" style ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.stat {
  background: var(--blue-chip);
  border-radius: 14px;
  padding: 28px 24px;
}

.stat h3 {
  font-size: clamp(34px, 4vw, 48px);
  color: var(--cream);
  margin-bottom: 6px;
}

.stat p { font-size: 14px; color: var(--cream); opacity: 0.9; }

/* stats on cream sections */
.section-tint .stat, .section .stat { background: var(--blue); }
.section-tint .stat h3, .section .stat h3 { color: var(--cream); }
/* stats on blue sections - lighter blue cards, yellow numbers (deck slide 6) */
.section-dark .stat { background: var(--blue-chip); }
.section-dark .stat h3 { color: var(--yellow); }

/* ---------- Split layout ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}

.split h2 {
  font-size: clamp(26px, 3.4vw, 38px);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.split h2.hand {
  font-size: clamp(40px, 5vw, 58px);
  text-transform: none;
}

/* ---------- Lists ---------- */
.feature-list { list-style: none; }

.feature-list li {
  padding: 18px 0;
  border-bottom: 1.5px solid var(--line);
  display: flex;
  gap: 16px;
  align-items: baseline;
}

.section-dark .feature-list li { border-color: rgba(251,245,225,.25); }

.feature-list li::before {
  content: "✦";
  color: var(--orange);
  font-size: 15px;
  flex-shrink: 0;
}

.section-dark .feature-list li::before { color: var(--yellow); }

.feature-list strong { font-weight: 800; }

/* ---------- Quote / founder note ---------- */
.pullquote {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.28;
  letter-spacing: -0.01em;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.pullquote-attr {
  text-align: center;
  margin-top: 24px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-deep);
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero { padding: 84px 0 66px; }

.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.03;
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin-bottom: 24px;
}

/* ---------- CTA band - solid orange (deck vertical cards) ---------- */
.cta-band {
  background: var(--orange);
  color: var(--cream);
  padding: 88px 0;
}

.cta-band h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin-bottom: 18px;
  color: var(--cream);
}

.cta-band p {
  font-size: 17px;
  font-weight: 500;
  max-width: 640px;
  margin-bottom: 36px;
  color: var(--cream);
}

.cta-band .btn-light { color: var(--orange-deep); }

/* ---------- Forms ---------- */
.form-card {
  background: var(--cream-soft);
  border: 2px solid var(--blue);
  border-radius: 16px;
  padding: 40px;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.field { margin-bottom: 20px; }

.field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}

.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--blue-chip);
  border-radius: 10px;
  background: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--blue);
}

.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2.5px solid var(--orange);
  outline-offset: 1px;
  border-color: transparent;
}

/* ---------- Footer - royal blue ---------- */
.footer {
  background: var(--blue);
  color: var(--cream);
  padding: 72px 0 36px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.005em;
  color: var(--cream);
  text-decoration: none;
}

.footer-logo .sg-mark { background-color: var(--cream); width: 30px; height: 30px; }
.footer-logo span { color: var(--orange); }

.footer-tagline { margin-top: 14px; font-size: 14.5px; max-width: 340px; opacity: 0.85; }

.footer h4 {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 18px;
}

.footer ul { list-style: none; }

.footer ul li { margin-bottom: 10px; }

.footer ul a {
  text-decoration: none;
  font-size: 14.5px;
  color: var(--cream);
  opacity: 0.85;
  transition: opacity 0.15s, color 0.15s;
}

.footer ul a:hover { opacity: 1; color: var(--yellow); }

.footer-support {
  border-top: 1.5px solid rgba(251,245,225,.25);
  padding: 30px 0 26px;
  text-align: center;
}
.support-label {
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--periwinkle, #6084C0);
  opacity: .9;
  margin: 0 0 18px;
}
.support-logos {
  display: flex;
  gap: 34px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.support-logo img { height: 46px; width: auto; display: block; opacity: .95; }
.support-fallback {
  display: none;
  flex-direction: column;
  line-height: 1.05;
  font-weight: 900;
  font-size: 24px;
  color: #FCFCE4;
}
.support-fallback small {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .68;
  margin-top: 5px;
}
.support-div {
  width: 1px;
  height: 34px;
  background: rgba(251,245,225,.28);
}

.footer-bottom {
  border-top: 1.5px solid rgba(251,245,225,.25);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  opacity: 0.75;
}

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .pipeline { grid-template-columns: 1fr 1fr; }
  .pipeline-arrow { display: none; }
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    border-bottom: 1.5px solid var(--blue);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px;
    gap: 18px;
  }

  .nav-links.open { display: flex; }

  .nav-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 26px;
    cursor: pointer;
    color: var(--blue);
    /* the glyph is only 23x26; pad it out to a 44x44 touch target
       (WCAG 2.5.5 / Apple HIG) without moving it visually */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: -10px;
    line-height: 1;
  }
}

@media (max-width: 640px) {
  .hero { padding: 64px 0 56px; }
  .section { padding: 64px 0; }
  .pipeline, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ============================================================
   Homepage restructure (7-section flow)
   ============================================================ */

/* 2. The Gap: split-screen */
.gap-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.gap-left h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.gap-left .gap-dim { color: var(--yellow); }
.gap-right {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-content: center;
}
.gap-tag {
  font-weight: 800;
  font-size: clamp(14px, 1.5vw, 18px);
  padding: 12px 20px;
  border: 2px solid rgba(251,245,225,0.35);
  border-radius: 999px;
  color: var(--cream);
  background: rgba(251,245,225,0.05);
  animation: gap-float 4s ease-in-out infinite;
}
.gap-right .gap-tag:nth-child(2n) { animation-duration: 5.2s; }
.gap-right .gap-tag:nth-child(3n) { animation-duration: 4.6s; animation-delay: 0.4s; }
.gap-right .gap-tag:nth-child(even) { transform: rotate(-1.5deg); }
.gap-right .gap-tag:nth-child(odd)  { transform: rotate(1.5deg); }
@keyframes gap-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (max-width: 760px) { .gap-split { grid-template-columns: 1fr; gap: 28px; } }
.gap-foot {
  margin: 46px auto 0;
  text-align: center;
  max-width: 720px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(18px, 2.3vw, 26px);
  color: var(--cream);
}

/* 3. Stack pathway */
.stack-path {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 8px;
}
.sp-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 22px;
  border-radius: 16px;
  text-decoration: none;
  color: var(--cream);
  transition: transform 0.18s, box-shadow 0.18s, flex-grow 0.25s;
}
.sp-step:hover { transform: translateY(-4px); }
/* Each card carries its own text colour so every pairing clears 4.5:1.
   Measured: navy on orange 4.76, cream on periwinkle-deep 4.97,
   cream on blue 9.50, cream on blue-deep 12.14. */
.sp-1 { background: var(--orange);     color: var(--blue-deep); }
.sp-2 { background: var(--blue-chip2); color: var(--cream); }
.sp-3 { background: var(--blue);       color: var(--cream); }
.sp-4 { background: var(--blue-deep);  color: var(--cream); }
/* the lift shadow must never be the card's own colour, or it reads as
   blue on blue when the card is tapped */
.sp-1:hover, .sp-2:hover { box-shadow: 5px 8px 0 var(--blue-deep); }
.sp-3:hover, .sp-4:hover { box-shadow: 5px 8px 0 var(--orange); }
.sp-num { font-size: 13px; font-weight: 800; letter-spacing: 0.12em; opacity: 0.85; }
.sp-name { font-family: var(--font-display); font-weight: 900; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.05; }
.sp-line { font-size: 14px; font-weight: 600; opacity: 0.94; }
.sp-arrow { align-self: center; color: var(--orange-deep); font-weight: 800; font-size: 22px; }
.sp-note {
  text-align: center;
  margin: 30px auto 22px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(17px, 2vw, 22px);
  color: var(--blue);
}
@media (max-width: 820px) {
  .stack-path { flex-direction: column; }
  .sp-arrow { transform: rotate(90deg); margin: 2px 0; }
}

/* 5. Kissa case study */
.case-study {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 44px;
  align-items: center;
}
.cs-media { position: relative; }
.cs-media video {
  width: 100%;
  display: block;
  border-radius: 16px;
}
.cs-badge {
  position: absolute;
  top: 16px; left: 16px;
  background: var(--yellow);
  color: var(--blue);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
}
.cs-body h2 { font-size: clamp(38px, 5vw, 60px); text-transform: uppercase; line-height: 1; margin-bottom: 10px; }
.cs-tag { font-size: 19px; font-weight: 700; color: var(--blue); margin-bottom: 22px; }
.cs-meta { font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-deep); margin-bottom: 2px; }
.cs-across { font-size: 16px; margin-bottom: 26px; }
.cs-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
}
.cs-slots .slot {
  border: 2px dashed var(--blue-chip);
  border-radius: 14px;
  padding: 24px 26px;
}
.cs-slots .slot h3 { font-size: 24px; }
.cs-slots .slot p { font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-deep); margin-top: 3px; }
.cs-slots .slot .card-link { margin-top: 12px; display: inline-block; font-weight: 700; color: var(--orange-deep); text-decoration: none; }
@media (max-width: 820px) {
  .case-study { grid-template-columns: 1fr; gap: 24px; }
  .cs-slots { grid-template-columns: 1fr; }
}

/* 6. Who it is for: category marquee */
.who .section-head { margin-bottom: 26px; }
.cat-marquee { overflow: hidden; padding: 6px 0; }
.cat-track {
  display: flex;
  gap: 0;
  width: max-content;
  white-space: nowrap;
  animation: marquee 26s linear infinite;
}
.cat-track span {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 5vw, 60px);
  color: var(--blue);
  opacity: 0.9;
  padding: 0 30px;
}
.cat-track span::after { content: "·"; color: var(--orange); margin-left: 30px; }
.cat-foot { text-align: center; margin-top: 26px; font-size: 15px; font-weight: 600; color: var(--blue); opacity: 0.8; }

/* 7a. Founder */
.founder-hero {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 48px;
  align-items: center;
}
.fh-portrait img {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 18px;
  border: 3px solid var(--blue);
}
.fh-body p { font-size: 17px; line-height: 1.6; margin-bottom: 14px; max-width: 56ch; }
.fh-body .founder-sign { font-weight: 800; margin-top: 22px; font-size: 17px; }
.fh-body .founder-sign span { font-weight: 600; color: var(--orange-deep); font-size: 14px; }
.fh-body .founder-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
@media (max-width: 760px) {
  .founder-hero { grid-template-columns: 1fr; gap: 26px; }
  .fh-portrait img { max-width: 260px; }
}

/* Confluence line */
.confluence {
  background: var(--blue-deep);
  color: var(--cream);
  text-align: center;
  padding: 26px 20px;
}
.confluence p {
  max-width: 680px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 1.8vw, 20px);
  opacity: 0.92;
}

/* ============================================================
   Homepage router: "What brings you here?" (airport, not museum)
   ============================================================ */
.router {
  background: var(--cream);
  padding: 56px 0 60px;
  border-bottom: 2px solid rgba(36,60,144,0.12);
}
.router-q {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 3.6vw, 44px);
  text-align: center;
  color: var(--blue);
  line-height: 1.05;
}
.router-sub {
  text-align: center;
  margin: 10px auto 34px;
  font-size: 16px;
  font-weight: 600;
  color: var(--blue);
  opacity: 0.72;
}
.router-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.route {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 26px;
  background: #fff;
  border: 2px solid rgba(36,60,144,0.14);
  border-radius: 14px;
  text-decoration: none;
  color: var(--blue);
  transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s;
}
.route:hover { transform: translateY(-4px); border-color: var(--orange); box-shadow: 5px 7px 0 var(--blue); }
.route:nth-child(3n-1):hover { box-shadow: 5px 7px 0 var(--orange); }
.route-i { font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-deep); }
.route-t { font-family: var(--font-display); font-weight: 900; font-size: 21px; line-height: 1.1; padding-right: 24px; }
.route-s { font-size: 13.5px; font-weight: 500; opacity: 0.72; }
.route-arrow { position: absolute; top: 22px; right: 22px; color: var(--orange); font-weight: 800; font-size: 20px; transition: transform 0.16s; }
.route:hover .route-arrow { transform: translateX(4px); }
@media (max-width: 820px) { .router-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .router-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Simplified nav: Ecosystem dropdown
   ============================================================ */
.has-drop { position: relative; }
.drop-toggle {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--blue);
}
.drop-toggle:hover, .drop-toggle.active { color: var(--orange-deep); }
.caret { font-size: 10px; transition: transform 0.15s; }
.has-drop:hover .caret { transform: translateY(1px) rotate(180deg); }
.drop-menu {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 210px;
  background: var(--cream-soft, #fff);
  border: 1.5px solid var(--blue);
  border-radius: 12px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, transform 0.15s;
  box-shadow: 0 12px 26px rgba(36,60,144,0.16);
  z-index: 120;
}
/* invisible hover bridge so the menu doesn't drop while moving the cursor */
.has-drop::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }
.has-drop:hover .drop-menu, .has-drop:focus-within .drop-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(6px);
}
.drop-menu li a {
  display: block;
  padding: 9px 13px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.drop-menu li a:hover { background: var(--sky); color: var(--blue); }

@media (max-width: 920px) {
  .drop-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    display: block;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 6px 0 0 14px;
    margin-top: 4px;
    min-width: 0;
  }
  .has-drop::after { display: none; }
  .caret { display: none; }
  .drop-menu li a { padding: 6px 0; }
}

/* ============================================================
   Stacked Oranges: conversion-led studio landing page
   ============================================================ */

.so-microproof {
  margin-top: 28px;
  font-size: 14px;
  font-weight: 700;
  color: var(--orange-deep);
  letter-spacing: 0.01em;
}

/* Service selector cards */
.so-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 8px;
}
.so-card {
  background: var(--cream);
  border: 2px solid var(--blue);
  border-radius: 14px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  transition: transform 0.16s, box-shadow 0.16s;
}
.so-card:hover { transform: translateY(-4px); box-shadow: 5px 7px 0 var(--orange); }
.so-card h3 { font-size: 19px; margin-bottom: 8px; }
.so-outcome { font-size: 14.5px; font-weight: 600; color: var(--orange-deep); margin-bottom: 10px; }
.so-includes { font-size: 14px; opacity: 0.82; line-height: 1.5; margin-bottom: 20px; flex-grow: 1; }
.so-card .so-cta { align-self: flex-start; padding: 10px 18px; font-size: 14px; }
.so-card-full { grid-column: span 1; }
@media (max-width: 920px) { .so-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .so-grid { grid-template-columns: 1fr; } }

.so-notsure { text-align: center; margin-top: 30px; font-size: 15px; font-weight: 600; }
.so-notsure a { color: var(--orange-deep); text-decoration: underline wavy; text-underline-offset: 4px; }

/* Pricing: quiet, indicative list (not a loud rate card) */
.price-list { margin-top: 6px; max-width: 720px; }
.price-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 15px 4px;
  border-bottom: 1px solid rgba(36,60,144,0.14);
}
.price-line:last-child { border-bottom: none; }
.pl-name { font-size: 16px; font-weight: 700; }
.pl-from { font-size: 14.5px; font-weight: 500; color: var(--blue-chip); white-space: nowrap; text-align: right; }
@media (max-width: 440px) {
  .price-line { flex-direction: column; gap: 2px; }
  .pl-from { text-align: left; }
}

/* Fit / not-fit (dark section variant) */
.fit-grid-so { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 10px; }
.fit-col-so { border: 2px solid rgba(251,245,225,0.3); border-radius: 14px; padding: 26px; }
.fit-col-so h3 { font-size: 20px; margin-bottom: 14px; color: var(--cream); }
.fit-yes-so h3::before { content: "✓  "; color: var(--yellow); }
.fit-no-so h3::before { content: "✕  "; color: var(--orange); }
.fit-col-so .feature-list li { color: var(--cream); }
@media (max-width: 760px) { .fit-grid-so { grid-template-columns: 1fr; } }

/* Form extras */
.so-filenote { font-size: 12.5px; opacity: 0.65; margin-top: 6px; }
.so-thanks {
  margin-top: 18px; padding: 14px 18px; border-radius: 10px;
  background: var(--sky); color: var(--blue); font-weight: 700; font-size: 14.5px;
}

/* Sticky CTA */
body.so-page { padding-bottom: 60px; }
.so-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 11px 20px;
  background: var(--blue); color: var(--cream);
  border-top: 2px solid var(--orange);
}
.so-sticky-text { font-weight: 700; font-size: 14.5px; }
.so-sticky .btn { padding: 9px 18px; font-size: 14px; }
@media (max-width: 600px) {
  .so-sticky { flex-direction: column; gap: 8px; padding: 10px 16px; }
  .so-sticky-text { font-size: 12.5px; text-align: center; }
  body.so-page { padding-bottom: 92px; }
}

/* ============================================================
   Client work strip (Stacked Oranges): vertical tiles, moving horizontally
   Each tile: image, brand, Instagram | Website, scope of work
   ============================================================ */
.cw-marquee {
  overflow: hidden;
  margin-top: 18px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
}
.cw-track {
  display: flex;
  gap: 18px;
  width: max-content;
  align-items: stretch;
  animation: marquee 70s linear infinite;
}
.cw-marquee:hover .cw-track { animation-play-state: paused; }
.cw-card {
  flex: 0 0 264px;
  width: 264px;
  background: var(--cream);
  border: 2px solid var(--blue);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cw-top {
  height: 150px;
  background: var(--blue);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cw-top img { width: 100%; height: 100%; object-fit: cover; }
.cw-cover span {
  font-family: var(--font-display); font-weight: 900; font-size: 21px;
  color: var(--cream); text-align: center; padding: 0 18px; line-height: 1.1;
}
.cw-cover.c-orange { background: var(--orange); }
.cw-cover.c-neel { background: var(--blue-deep); }
.cw-cover.c-jamun { background: #6D4AA8; }
.cw-cover.c-gulaal { background: #E23C87; }
.cw-cover.c-mehendi { background: #1F7A4C; }
.cw-body { padding: 15px 17px 17px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cw-name { font-size: 17px; font-weight: 800; line-height: 1.15; }
.cw-links { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; }
.cw-links a { color: var(--orange-deep); text-decoration: none; }
.cw-links a:hover { text-decoration: underline wavy; text-underline-offset: 3px; }
.cw-sep { color: var(--blue-chip); font-weight: 500; }
.cw-scope { font-size: 12px; line-height: 1.5; color: var(--blue); opacity: 0.82; margin-top: auto; }

/* ============================================================
   About page components
   ============================================================ */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* 2. Proof strip */
.about-proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; text-align: center; }
.about-proof .ap-cell h3 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(38px, 5.4vw, 62px); line-height: 1; color: var(--orange-deep);
}
.about-proof .ap-cell p { font-size: 14px; font-weight: 600; color: var(--blue); opacity: 0.85; margin-top: 8px; }
.about-proof-line { text-align: center; margin-top: 30px; font-weight: 700; font-size: 16px; color: var(--blue); opacity: 0.8; }
@media (max-width: 600px) { .about-proof { grid-template-columns: 1fr 1fr; gap: 30px 18px; } }

/* 5. Orange Economy chips */
.oe-chips { margin-top: 6px; gap: 10px; }
.oe-chips .chip { font-size: 14px; padding: 9px 16px; }
.oe-note { margin-top: 22px; font-size: 15px; font-weight: 500; color: var(--blue); opacity: 0.78; max-width: 640px; }

/* 6. Three pathways */
.pathways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pw-card {
  display: flex; flex-direction: column;
  background: var(--cream); border: 2px solid var(--blue); border-radius: 16px;
  padding: 28px 26px;
}
.pw-card h3 { font-size: clamp(19px, 2vw, 23px); line-height: 1.15; }
.pw-copy { font-size: 14.5px; line-height: 1.5; color: var(--blue); opacity: 0.85; margin: 12px 0 20px; }
.pw-actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; align-items: flex-start; }
.pw-actions .btn { width: 100%; text-align: center; }
.pw-routes { display: flex; flex-direction: column; gap: 16px; margin-top: auto; }
.pw-route { border-top: 1.5px solid rgba(36,60,144,0.16); padding-top: 15px; }
.pw-route strong { display: block; font-size: 15.5px; }
.pw-route span { display: block; font-size: 13px; opacity: 0.8; margin: 3px 0 8px; }
.pw-route .card-link { font-weight: 700; color: var(--orange-deep); text-decoration: none; font-size: 14px; }
.pw-route .card-link:hover { text-decoration: underline wavy; text-underline-offset: 3px; }
@media (max-width: 900px) { .pathways { grid-template-columns: 1fr; } }

/* 7. Co-built brands editorial card */
.cobuilt-card {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 0;
  background: var(--cream); border-radius: 18px; overflow: hidden;
  margin-top: 8px; box-shadow: 6px 8px 0 rgba(0,0,0,0.18);
}
.cb-media { min-height: 340px; background: var(--blue); }
.cb-media video, .cb-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-body { padding: 34px 38px; color: var(--blue); display: flex; flex-direction: column; align-items: flex-start; }
.cb-status {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; background: var(--yellow); color: var(--blue);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 14px;
}
.cb-name { font-size: clamp(30px, 4vw, 44px); text-transform: uppercase; line-height: 1; margin-bottom: 12px; }
.cb-desc { font-size: 16px; line-height: 1.5; margin-bottom: 16px; }
.cb-cat { font-size: 14.5px; margin-bottom: 24px; }
.cb-cat span { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-deep); margin-bottom: 2px; }
@media (max-width: 760px) { .cobuilt-card { grid-template-columns: 1fr; } .cb-media { min-height: 240px; } }

/* 9. Founder note: smaller vertical portrait on About */
.about-founder .fh-portrait img { max-width: 240px; aspect-ratio: 3 / 4; }
@media (max-width: 760px) { .about-founder .fh-portrait img { max-width: 168px; } }

/* 11. Final CTA secondary links */
.cta-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 22px; }
.cta-links a { font-size: 14px; font-weight: 700; color: var(--cream); text-decoration: underline; text-underline-offset: 3px; opacity: 0.9; }
.cta-links a:hover { opacity: 1; }

/* ============================================================
   Illustrated culture strip (homepage) — Sangam's illustration world
   ============================================================ */
.culture-strip {
  overflow: hidden;
  background:
    radial-gradient(rgba(36,60,144,0.05) 1.2px, transparent 1.3px) 0 0 / 20px 20px,
    var(--cream);
  padding: 26px 0;
  border-top: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
}
.culture-track {
  display: flex;
  gap: 20px;
  width: max-content;
  align-items: stretch;
  animation: marquee 64s linear infinite;
}
.culture-strip:hover .culture-track { animation-play-state: paused; }
.ci-tile {
  /* fluid across every screen instead of one 640px step */
  flex: 0 0 clamp(104px, 13vw, 168px);
  width: clamp(104px, 13vw, 168px);
  height: clamp(104px, 13vw, 168px);
  margin: 0;
  border: 2px solid var(--blue);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  box-shadow: 4px 5px 0 var(--blue);
  transition: transform 0.18s;
}
.ci-tile:hover { transform: translateY(-4px) rotate(-0.6deg); }
.ci-tile img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
/* rotating illustration-card tints */
.ci-tile.t-1 { background: var(--sky); }
.ci-tile.t-2 { background: #FCE9DE; }
.ci-tile.t-3 { background: #FBF3D0; }
.ci-tile.t-4 { background: #E7E0F3; }
.ci-tile.t-2 figcaption { background: var(--orange); }
.ci-tile.t-3 figcaption { background: var(--orange-deep); }
.ci-tile img { padding: clamp(7px, 1vw, 12px); }

/* ============================================================
   Illustrated cut-out decoration layer (ambient collage)
   ============================================================ */
.hero { position: relative; overflow: hidden; }
.hero-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-rel { position: relative; z-index: 2; }
.hd { position: absolute; display: block; height: auto; }
/* A single creative-community band, walking along the hero baseline */
.hd-row {
  bottom: 6px; right: 3%;
  width: clamp(260px, 52vw, 600px);
  opacity: 0.92;
}
@media (max-width: 760px) {
  .hd-row { width: min(88%, 420px); right: 4%; opacity: 0.8; }
}
/* The walking band is bottom-anchored in the hero and the CTA row is the
   last content block, so below ~1100px they fought for the same strip and
   the illustration sat on top of "Explore the ecosystem" (up to 215x55px
   of overlap). Give the band its own lane: the image is 1200x371, so its
   height is ~0.309 x its width, and the hero reserves that much space
   underneath the buttons. */
/* Reserve the lane at every width, not just on small screens: at 1280px+
   the band is 600px wide and was still rising into the headline. One rule
   that always holds beats a breakpoint that mostly holds. */
.hero { padding-bottom: calc(0.309 * clamp(260px, 52vw, 600px) + 76px); }
@media (prefers-reduced-motion: no-preference) {
  .hd { transition: transform 0.4s ease; }
}

/* ============================================================
   Illustration boxes inside the "Who it's for" section + section accents
   ============================================================ */
.culture-strip.who-strip {
  background: transparent;
  border: none;
  padding: 8px 0 4px;
  margin-top: 18px;
}
.who-strip .ci-tile {
  flex: 0 0 clamp(84px, 9.5vw, 124px);
  width: clamp(84px, 9.5vw, 124px);
  height: clamp(84px, 9.5vw, 124px);
  box-shadow: 3px 4px 0 var(--blue);
}
.who-strip .ci-tile img { padding: clamp(6px, 0.9vw, 11px); }

/* Section decorative accents (aligned, low opacity, behind content) */
.sec-deco { position: relative; overflow: hidden; }
.sec-deco .container { position: relative; z-index: 2; }
.sd { position: absolute; z-index: 0; pointer-events: none; display: block; height: auto; }
.sd-pencil { bottom: 0; right: 3%; width: clamp(150px, 22vw, 300px); opacity: 0.14; }
.sd-people { top: 8%; left: -6px; width: clamp(52px, 7vw, 84px); opacity: 0.4; }
@media (max-width: 900px) {
  .sd-pencil, .sd-people { display: none; }
}


/* ============================================================
   MOBILE / TABLET HARDENING
   Findings from a cross-page audit at 320-1024px.
   ============================================================ */

/* The hand-drawn ellipse needs its phrase on one line, but a two-word
   phrase in a display-size headline cannot fit on a narrow screen, so it
   was pushing the page sideways (87px of horizontal scroll at 320px on
   venture-studio, 65px on stacked-oranges). Below 560px, let the phrase
   wrap and trade the ellipse for an underline, which survives wrapping. */
@media (max-width: 560px) {
  .circled, .hero h1 em, .page-hero h1 em {
    white-space: normal;
    background-image: none;
    padding: 0;
    box-shadow: inset 0 -0.14em 0 var(--orange);
  }
}

/* Footer link lists were 19px tall and stacked tightly: hard to hit and
   easy to mis-tap. Give each row a real touch height on touch devices. */
@media (hover: none), (pointer: coarse) {
  .footer ul li a,
  .footer-grid ul li a {
    display: inline-block;
    padding-block: 11px;
    min-height: 44px;
    box-sizing: border-box;
  }
  .nav-logo, .footer-logo { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Brand type scale puts overline labels at 12px; several had been
   clamping down to 10-11px on small screens, below both the brand spec
   and comfortable mobile reading. Hold the floor at 12px. */
@media (max-width: 700px), (hover: none), (pointer: coarse) {
  .route-i, .kicker, .mono-label, .support-fallback small { font-size: 12px; }
}

/* iOS Safari zooms the whole page when a focused input is under 16px.
   Every field on the site sat at 15px, so tapping any form field zoomed
   the layout and forced the user to pinch back out. 16px on touch only;
   desktop keeps the tighter 15px. */
@media (hover: none), (pointer: coarse) {
  input, textarea, select { font-size: 16px; }
}

/* The open mobile menu is the primary navigation on a phone, but its links
   were 18-32px tall and stacked tightly, so neighbours were easy to hit by
   mistake. Give every row a full-width 44px target. */
@media (max-width: 920px) {
  .nav-links.open a,
  .nav-links.open .drop-toggle {
    display: flex;
    align-items: center;
    min-height: 44px;
    width: 100%;
  }
  .nav-links.open .drop-menu a { padding-left: 14px; }
  .nav-links.open .btn { min-height: 44px; justify-content: center; }
}