/* Aviral Productions site styles. Plain CSS, no framework, no build step.
   One system, two themes. Dark: black / white / yellow. Light: white / black / yellow. */

:root {
  --yellow: #ffd93d;
  --ink: #0a0a0a;
  --display: 'Manrope', 'Inter', system-ui, sans-serif;
  --text: 'Inter', system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0a0a; --fg: #ffffff; --mute: #a1a1aa;
  --rule: rgba(255, 255, 255, .14); --rule-strong: rgba(255, 255, 255, .32);
  --tint: rgba(255, 255, 255, .06);
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff; --fg: #0a0a0a; --mute: #52525b;
  --rule: rgba(10, 10, 10, .14); --rule-strong: rgba(10, 10, 10, .4);
  --tint: rgba(10, 10, 10, .05);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  font-family: var(--text); background: var(--bg); color: var(--fg);
  line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
[data-theme="light"] :focus-visible { outline-color: var(--ink); }

h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.025em; line-height: 1.06; }
h2 { font-size: clamp(2rem, 4.4vw, 3.5rem); }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
/* legacy hooks, kept neutral: sections no longer alternate colour */
.band-ink, .band-paper { background: var(--bg); color: var(--fg); }
.section { padding: clamp(4rem, 9vw, 7.5rem) 0; }
main > section, .site-footer { border-top: 1px solid var(--rule); }
main > section:first-child { border-top: 0; }
.lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); max-width: 40rem; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--yellow); color: var(--ink); padding: .5rem 1rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .95rem 1.6rem; border: 1px solid transparent; cursor: pointer;
  font: 700 .9rem var(--display); text-decoration: none;
  transition: background .25s, color .25s, border-color .25s;
}
.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-yellow:hover { background: var(--fg); color: var(--bg); }
.btn-line { border-color: var(--rule-strong); color: var(--fg); }
.btn-line:hover { border-color: var(--yellow); background: var(--yellow); color: var(--ink); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 4.5rem; }
.brand { display: flex; align-items: center; gap: .65rem; font: 800 1.05rem var(--display); letter-spacing: -0.01em; text-decoration: none; }
.brand::before { content: ""; width: .7rem; height: .7rem; background: var(--yellow); }
.brand-logo::before { display: none; }
.brand-logo .logo { height: 2.9rem; width: auto; }
.logo-w { display: block; } .logo-b { display: none; }
[data-theme="light"] .logo-w { display: none; } [data-theme="light"] .logo-b { display: block; }
.site-footer .brand-logo .logo { height: 3.6rem; }
.nav { display: none; gap: 1.75rem; font-size: .875rem; color: var(--mute); }
.nav a, .mobile-nav a { padding: .5rem 0; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 7px; transition: color .2s, text-decoration-color .2s; }
.nav a { text-decoration-line: underline; }
.nav a:hover, .mobile-nav a:hover { color: var(--fg); text-decoration-color: var(--yellow); }
.header-actions { display: flex; align-items: center; gap: .75rem; }
.header-cta { display: none; padding: .7rem 1.2rem; }
.theme-btn, .menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; background: none; border: 1px solid var(--rule); cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.theme-btn:hover, .menu-btn:hover { border-color: var(--yellow); }
.theme-btn svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
.theme-btn .sun { display: none; }
[data-theme="light"] .theme-btn .sun { display: block; }
[data-theme="light"] .theme-btn .moon { display: none; }
.menu-btn { flex-direction: column; gap: 5px; }
.menu-btn span { display: block; width: 1.1rem; height: 2px; background: var(--fg); }
.mobile-nav { display: none; border-top: 1px solid var(--rule); background: var(--bg); }
.mobile-nav.open { display: block; }
.site-header .mobile-nav .wrap { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; height: auto; gap: .1rem; padding-top: 1rem; padding-bottom: 1.25rem; }
.mobile-nav a { padding: .75rem 0; color: var(--mute); width: fit-content; }
@media (min-width: 640px) { .header-cta { display: inline-flex; } }
@media (min-width: 1100px) { .nav { display: flex; } .menu-btn, .mobile-nav { display: none; } }

/* ---------- Hero ---------- */
.hero { padding: clamp(4.5rem, 11vw, 9rem) 0 clamp(4rem, 8vw, 7rem); }
.hero h1 { font-size: clamp(2.4rem, 5.4vw, 5rem); line-height: 1.03; letter-spacing: -0.035em; }
.hero h1 > span { display: block; }
.hero .sub { margin-top: 2.25rem; color: var(--mute); }
.hero .actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.75rem; }
.hero .flick { color: var(--yellow); }
[data-theme="light"] .hero .flick { text-shadow: 0 2px 4px rgba(10, 10, 10, .3); }
.hero-grid { display: grid; gap: 3rem; align-items: center; }
.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: 100%; max-width: 30rem; }
.tile { aspect-ratio: 1; border: 1px solid var(--rule-strong); border-bottom-right-radius: 100%; background: transparent; transition: background .9s ease, border-color .9s ease; }
.tile:hover { background: var(--yellow); border-color: var(--yellow); transition-duration: .08s; }
.tile.lit { background: var(--yellow); border-color: var(--yellow); }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.3fr 1fr; gap: 4rem; }
  .hero h1 { font-size: clamp(2rem, 3.75vw, 3.9rem); }
  .hero h1 .l1 { white-space: nowrap; }
  .tiles { justify-self: end; }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @keyframes flicker {
    0% { opacity: 0; } 10% { opacity: 1; } 16% { opacity: .12; } 23% { opacity: 1; }
    30% { opacity: .2; } 38% { opacity: 1; } 47% { opacity: .35; } 56% { opacity: 1; } 100% { opacity: 1; }
  }
  .hero .l1 { animation: rise .8s var(--ease) both; }
  .hero .l2 { animation: rise .8s var(--ease) .18s both; }
  .hero .flick { opacity: 0; animation: flicker .9s steps(1, end) 1s forwards; }
  .hero .sub { animation: rise .8s var(--ease) .45s both; }
  .tile.lit { animation: litup .9s steps(1, end) 1s both; }
  @keyframes litup { 0% { background: transparent; border-color: var(--rule-strong); } 10% { background: var(--yellow); border-color: var(--yellow); } 16% { background: transparent; border-color: var(--rule-strong); } 23% { background: var(--yellow); border-color: var(--yellow); } 30% { background: transparent; border-color: var(--rule-strong); } 38%, 100% { background: var(--yellow); border-color: var(--yellow); } }
  .hero .actions { animation: rise .8s var(--ease) .6s both; }
}

/* ---------- Hero facts ---------- */

/* ---------- Experience ---------- */
.exp { padding: clamp(3rem, 6vw, 4.5rem) 0; }
.exp .wrap { display: grid; gap: 1.75rem 3rem; align-items: baseline; }
.exp h2 { font-size: 1.05rem; letter-spacing: -0.005em; }
.exp .note { margin-top: .35rem; font-size: .875rem; color: var(--mute); max-width: 22rem; }
@media (min-width: 900px) { .exp .wrap { grid-template-columns: 4fr 8fr; } }

/* ---------- About ---------- */
.about .wrap { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.about-label { margin-bottom: 1.25rem; font-size: .9rem; font-weight: 600; color: var(--mute); }
.about h2 { font-size: clamp(2.2rem, 5vw, 4.2rem); letter-spacing: -0.035em; line-height: 1.05; max-width: 14ch; }
.about-body { display: grid; gap: 1.5rem; align-content: start; }
.about-body p { max-width: 36rem; color: var(--mute); font-size: 1.08rem; }
.about-body p:first-child { color: var(--fg); font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
.about .statement { margin-top: .5rem; padding-left: 1.5rem; border-left: 4px solid var(--yellow); color: var(--fg); font: 800 clamp(1.3rem, 2.2vw, 1.8rem) var(--display); letter-spacing: -0.025em; line-height: 1.2; text-wrap: balance; }
@media (min-width: 900px) { .about .wrap { grid-template-columns: 5fr 6fr; gap: 5rem; } }

/* ---------- What we do (tabs with designed icons) ---------- */
.cap h2 { margin-bottom: .9rem; }
.cap .lede { color: var(--mute); margin-bottom: 2.75rem; }
.tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); border: 1px solid var(--rule-strong); }
.tab {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .85rem;
  padding: 1rem 1.1rem; background: transparent; border: 0; border-left: 1px solid var(--rule); cursor: pointer; text-align: left;
  font: 700 1rem var(--display); transition: background .25s, color .25s;
}
.tab:first-child { border-left: 0; }
.tab:hover { background: var(--tint); }
.tab[aria-selected="true"] { background: var(--yellow); color: var(--ink); }
.tab .ico { width: 2.1rem; height: 2.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; overflow: visible; }
.plus { position: relative; flex: none; width: .8rem; height: .8rem; color: currentColor; }
.plus::before, .plus::after { content: ""; position: absolute; background: currentColor; transition: transform .3s var(--ease); }
.plus::before { left: 0; right: 0; top: calc(50% - 1px); height: 2px; }
.plus::after { top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; }
.tab[aria-selected="true"] .plus::after { transform: scaleY(0); }
.panel { display: grid; gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(1.5rem, 3vw, 2.75rem); border: 1px solid var(--rule-strong); border-top: 0; }
.panel[hidden] { display: none; }
.panel-what { font: 800 clamp(1.5rem, 2.8vw, 2.3rem) var(--display); letter-spacing: -0.03em; line-height: 1.12; }
.panel-what small { display: block; margin-bottom: .75rem; font: 600 .85rem var(--text); letter-spacing: 0; color: var(--mute); }
.panel-dl > div { display: grid; gap: .35rem 1.5rem; padding: 1.15rem 0; border-top: 1px solid var(--rule); }
.panel-dl > div:first-child { border-top: 0; padding-top: 0; }
.panel-dl dt { font-size: .85rem; font-weight: 600; color: var(--mute); }
.panel-dl dd { font-size: 1.02rem; }
.chain { display: flex; flex-wrap: wrap; gap: .25rem .55rem; }
.chain li:not(:last-child)::after { content: "→"; margin-left: .55rem; color: var(--mute); }
.cap .more { display: inline-block; margin-top: 2.5rem; font: 700 1rem var(--display); text-decoration: none; border-bottom: 2px solid var(--yellow); padding-bottom: .15rem; transition: background .2s, color .2s; }
.cap .more:hover { background: var(--yellow); color: var(--ink); }
@media (min-width: 900px) { .panel { grid-template-columns: 5fr 7fr; } .panel-dl > div { grid-template-columns: 11rem 1fr; } }
@media (min-width: 720px) and (max-width: 999px) {
  .tabs { grid-template-columns: repeat(5, 1fr); }
  .tab { grid-template-columns: 1fr; gap: .6rem; padding: 1rem .9rem; font-size: .95rem; }
  .tab .plus { display: none; }
}
@media (max-width: 719px) { .tabs { grid-template-columns: 1fr; } .tab { border-left: 0; border-top: 1px solid var(--rule); } .tab:first-child { border-top: 0; } }

/* icon motion: runs when a capability is selected or hovered */
@media (prefers-reduced-motion: no-preference) {
  @keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .panel:not([hidden]) { animation: panel-in .4s var(--ease) both; }

  .ico * { transform-box: fill-box; transform-origin: center; }
  /* Creative: the idea forms inside the frame */
  .ico-creative .dia { transition: transform .6s var(--ease); }
  .ico-creative .brk { transition: transform .6s var(--ease); }
  .tab:hover .ico-creative .dia, .tab[aria-selected="true"] .ico-creative .dia { transform: rotate(135deg) scale(1.15); }
  .tab:hover .ico-creative .brk, .tab[aria-selected="true"] .ico-creative .brk { transform: scale(.82); }
  /* Production: the slate claps */
  .ico-production .arm { transform-origin: 8% 100%; transition: transform .25s ease-in; }
  .tab:hover .ico-production .arm, .tab[aria-selected="true"] .ico-production .arm { animation: clap 1.1s var(--ease) both; }
  @keyframes clap { 0% { transform: rotate(0); } 35% { transform: rotate(-26deg); } 55% { transform: rotate(0); } 100% { transform: rotate(0); } }
  /* Visual: the form builds edge by edge */
  .ico-visual .edge { stroke-dasharray: 30; stroke-dashoffset: 0; }
  .tab:hover .ico-visual .edge, .tab[aria-selected="true"] .ico-visual .edge { animation: draw 1s var(--ease) both; }
  .tab:hover .ico-visual .edge:nth-child(2n), .tab[aria-selected="true"] .ico-visual .edge:nth-child(2n) { animation-delay: .18s; }
  @keyframes draw { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
  /* Digital: the layout assembles */
  .ico-digital .bar { transform-origin: 0 50%; }
  .tab:hover .ico-digital .bar, .tab[aria-selected="true"] .ico-digital .bar { animation: fill .7s var(--ease) both; }
  .tab:hover .ico-digital .bar:nth-child(2), .tab[aria-selected="true"] .ico-digital .bar:nth-child(2) { animation-delay: .12s; }
  .tab:hover .ico-digital .bar:nth-child(3), .tab[aria-selected="true"] .ico-digital .bar:nth-child(3) { animation-delay: .24s; }
  @keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  /* Distribution: the signal goes out */
  .tab:hover .ico-distribution .arc, .tab[aria-selected="true"] .ico-distribution .arc { animation: wave 1.4s ease-out 2 both; }
  .tab:hover .ico-distribution .a2, .tab[aria-selected="true"] .ico-distribution .a2 { animation-delay: .25s; }
  .tab:hover .ico-distribution .a3, .tab[aria-selected="true"] .ico-distribution .a3 { animation-delay: .5s; }
  @keyframes wave { 0% { opacity: .15; } 40% { opacity: 1; } 100% { opacity: .15; } }
}

/* ---------- How we work: ideas that connect ---------- */
.how .wrap { display: grid; gap: 3rem; }
.how-intro p { margin-top: 1rem; color: var(--mute); max-width: 24rem; }
.how-list { position: relative; }
.how-row { position: relative; padding-left: clamp(2.25rem, 4vw, 3.5rem); }
/* rail */
.how-row::before { content: ""; position: absolute; left: .55rem; top: 0; bottom: 0; width: 2px; background: var(--rule); }
.how-row::after {
  content: ""; position: absolute; left: 0; top: 1.15rem; width: 1.15rem; height: 1.15rem;
  background: var(--bg); border: 2px solid var(--rule-strong);
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.how-row:first-child::before { top: 1.7rem; }
.how-row:last-child::before { bottom: auto; height: 1.7rem; }
.how-row .fill { position: absolute; left: .55rem; top: 0; bottom: 0; width: 2px; background: var(--yellow); transform: scaleY(0); transform-origin: top; transition: transform .6s var(--ease); }
.how-row:first-child .fill { top: 1.7rem; }
.how-row:last-child .fill { bottom: auto; height: 1.7rem; }
.how-row.done .fill { transform: scaleY(1); }
.how-row.on::after { background: var(--yellow); border-color: var(--yellow); transform: rotate(45deg); }
.how-row.done::after { border-color: var(--yellow); }
.how-row h3 { font-size: inherit; }
.how-row button {
  display: block; width: 100%; padding: .55rem 0; background: none; border: 0; cursor: pointer; text-align: left;
  font: 800 clamp(1.6rem, 3.6vw, 3rem) var(--display); letter-spacing: -0.03em; line-height: 1.12;
  color: var(--mute); transition: color .4s ease, transform .5s var(--ease);
}
.how-row.on button { color: var(--fg); transform: translateX(.35rem); }
.how-row button:hover { color: var(--fg); }
.how-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.how-body > div { overflow: hidden; }
.how-body p { padding: .35rem 0 1.6rem; max-width: 36rem; font-size: 1.08rem; color: var(--mute); opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .6s var(--ease); }
.how-row.on .how-body { grid-template-rows: 1fr; }
.how-row.on .how-body p { opacity: 1; transform: none; transition-delay: .12s; }
.how-row:not(.on) { padding-bottom: .5rem; }
@media (min-width: 900px) { .how .wrap { grid-template-columns: 3fr 9fr; gap: 4rem; } .how-intro { position: sticky; top: 7rem; align-self: start; } }

/* ---------- Our work ---------- */
.work-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.work-head p { margin-top: 1rem; color: var(--mute); max-width: 34rem; }
.work-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(3rem, 6vw, 5rem) 2rem; }
.work figure { overflow: hidden; background: var(--rule); height: clamp(15rem, 34vw, 27rem); }
.work.short figure { height: clamp(14rem, 28vw, 21rem); }
.work img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.work:hover img { transform: scale(1.03); }
.work .who { margin-top: 1.25rem; font-size: .9rem; color: var(--mute); }
.work h3 { margin-top: .3rem; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.work p { margin-top: .7rem; max-width: 30rem; color: var(--mute); }
.work .case { display: inline-block; margin-top: 1rem; font: 700 .95rem var(--display); text-decoration: none; border-bottom: 2px solid var(--yellow); padding-bottom: .1rem; transition: background .2s, color .2s; }
.work .case:hover { background: var(--yellow); color: var(--ink); }
.work .soon { margin-top: 1rem; font-size: .875rem; color: var(--mute); }
@media (min-width: 900px) { .work-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } .work { grid-column: span 12; } .w7 { grid-column: span 7; } .w5 { grid-column: span 5; } }
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .js .rv.in { opacity: 1; transform: none; }
}

/* ---------- FAQ: compact rows, one open at a time ---------- */
.faq-grid { display: grid; gap: 2.5rem; }
.faq-list { border-bottom: 1px solid var(--rule); align-self: start; }
.faq-item { position: relative; border-top: 1px solid var(--rule); }
.faq-item::before { content: ""; position: absolute; left: 0; top: -1px; bottom: 0; width: 3px; background: var(--yellow); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--ease); }
.faq-item:hover::before, .faq-item.on::before { transform: scaleY(1); }
.faq-q {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; width: 100%;
  padding: 1rem 0; background: none; border: 0; cursor: pointer; text-align: left;
  font: 700 1.05rem/1.35 var(--display); letter-spacing: -0.01em;
  transition: transform .35s var(--ease);
}
.faq-q > span:first-child { transition: transform .35s var(--ease); }
.faq-item:hover .faq-q > span:first-child, .faq-item.on .faq-q > span:first-child { transform: translateX(.9rem); }
.faq-q .plus { color: var(--fg); transition: color .25s; }
.faq-item:hover .plus { color: var(--yellow); }
[data-theme="light"] .faq-item:hover .plus { color: var(--fg); }
.faq-item.on .plus::after { transform: scaleY(0); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 3rem 1.4rem .9rem; max-width: 40rem; color: var(--mute); opacity: 0; transform: translateY(-6px); transition: opacity .35s ease, transform .5s var(--ease); }
.faq-item.on .faq-a { grid-template-rows: 1fr; }
.faq-item.on .faq-a p { opacity: 1; transform: none; transition-delay: .1s; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: 4fr 8fr; gap: 4rem; } }

/* ---------- Contact ---------- */
.contact .wrap { display: grid; gap: 3.5rem; }
.contact h2 { margin-bottom: 1rem; }
.contact .lede { color: var(--mute); }
.contact-list { margin-top: 2.5rem; border-top: 1px solid var(--rule); }
.contact-list li { border-bottom: 1px solid var(--rule); }
.contact-list a { display: flex; align-items: center; gap: 1rem; padding: .95rem 0; text-decoration: none; }
.ci { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border: 1px solid var(--rule-strong); transition: background .25s, border-color .25s, color .25s; }
.ci svg { width: 1.2rem; height: 1.2rem; }
.ci .s { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ci .f { fill: currentColor; }
.contact-list a:hover .ci, .social a:hover { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.contact-list small { display: block; font-size: .8rem; color: var(--mute); line-height: 1.3; }
.contact-list b { font: 700 1.1rem var(--display); }
form.contact-form { display: grid; gap: 1.25rem; }
.field-row { display: grid; gap: 1.25rem; }
.contact-form label { display: block; margin-bottom: .4rem; font-size: .85rem; font-weight: 600; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; padding: .9rem 1rem; background: transparent; color: var(--fg);
  border: 1px solid var(--rule-strong); border-radius: 0; font: inherit; font-size: 1rem;
  transition: border-color .2s;
}
.contact-form select option { background: var(--bg); color: var(--fg); }
.contact-form textarea { min-height: 9rem; resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--yellow); outline: 2px solid var(--yellow); outline-offset: 0; }
[data-theme="light"] .contact-form input:focus, [data-theme="light"] .contact-form select:focus, [data-theme="light"] .contact-form textarea:focus { border-color: var(--ink); outline-color: var(--ink); }
.contact-form .hp { position: absolute; left: -9999px; }
.form-status { min-height: 1.5rem; font-size: .95rem; }
.form-status.ok { color: var(--fg); }
.form-status.err { color: var(--fg); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; }
@media (min-width: 900px) { .contact .wrap { grid-template-columns: 5fr 7fr; gap: 5rem; } .field-row { grid-template-columns: 1fr 1fr; } }

/* ---------- Footer ---------- */
.site-footer { padding: 4rem 0 2.5rem; }
.footer-top { display: grid; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--rule); }
.footer-top p { margin-top: 1rem; max-width: 24rem; font-size: .9rem; color: var(--mute); }
.footer-side { display: grid; gap: 1.5rem; justify-items: start; }
.footer-links { display: flex; flex-wrap: wrap; gap: .6rem 2rem; font-size: .95rem; color: var(--mute); }
.footer-links a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: color .2s, text-decoration-color .2s; }
.footer-links a:hover { color: var(--fg); text-decoration-color: var(--yellow); }
.social { display: flex; gap: .6rem; }
.social a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--rule-strong); transition: background .25s, border-color .25s, color .25s; }
.social svg { width: 1.2rem; height: 1.2rem; }
.social .s { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.social .f { fill: currentColor; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; padding-top: 1.75rem; font-size: .8rem; color: var(--mute); }
@media (min-width: 900px) { .footer-top { grid-template-columns: 6fr 6fr; } .footer-side { justify-items: end; } .footer-links { justify-content: flex-end; } }

/* ---------- Floating contact ---------- */
.float-cta {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40;
  display: flex; align-items: center; gap: .55rem; padding: .8rem 1.2rem;
  background: var(--ink); color: #fff; border: 1px solid var(--yellow);
  font: 700 .875rem var(--display); text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  transition: background .2s, color .2s;
}
@media (max-width: 899px) {
  .float-cta { padding: 0; width: 3.1rem; height: 3.1rem; justify-content: center; border-radius: 50%; font-size: 0; gap: 0; }
  .float-cta svg { width: 1.35rem; height: 1.35rem; }
}
.float-cta:hover { background: var(--yellow); color: var(--ink); }
.float-cta svg { width: 1rem; height: 1rem; fill: currentColor; }

/* ---------- Case-study pages ---------- */
.cs-hero { padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem); }
.cs-back { display: inline-block; margin-bottom: 2rem; font-size: .9rem; color: var(--mute); text-decoration: none; }
.cs-back:hover { color: var(--yellow); }
.cs-hero h1 { font-size: clamp(2.4rem, 6vw, 5rem); letter-spacing: -0.035em; max-width: 14ch; }
.cs-hero .lede { margin-top: 1.5rem; color: var(--mute); }
.cs-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.5rem 2rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.cs-meta dt { font-size: .85rem; color: var(--mute); }
.cs-meta dd { font-weight: 600; }
.cs-figure { background: transparent; }
.cs-figure img { width: 100%; max-height: 38rem; object-fit: cover; }
.cs-body { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.cs-section { display: grid; gap: .75rem 3rem; padding: 2.25rem 0; border-top: 1px solid var(--rule); }
.cs-section:last-child { border-bottom: 1px solid var(--rule); }
.cs-section h2 { font-size: 1.15rem; letter-spacing: -0.01em; }
.cs-section p, .cs-section ul { max-width: 40rem; }
.cs-section ul li { padding: .35rem 0; }
.cs-section .pending { color: var(--mute); }
.cs-next { padding: clamp(3rem, 6vw, 5rem) 0; }
.cs-next .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.cs-next h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); max-width: 20ch; }
@media (min-width: 900px) { .cs-section { grid-template-columns: 3fr 9fr; } }

/* no-JS fallback: everything readable */
html:not(.js) .how-body, html:not(.js) .faq-a { grid-template-rows: 1fr; }
html:not(.js) .how-body p, html:not(.js) .faq-a p { opacity: 1; transform: none; }
html:not(.js) .how-row button { color: var(--fg); }
@media (prefers-reduced-motion: reduce) { .how-body, .faq-a, .how-body p, .faq-a p, .faq-q span, .how-row button { transition: none !important; } }

.footer-top p.keep { margin-top: 1rem; font: 800 1.25rem var(--display); letter-spacing: -0.02em; color: var(--fg); }

/* case study depth */
.cs-section h3 { font-size: 1rem; margin-bottom: .5rem; }
.cs-section > div > p + p, .cs-section > div > p + ul, .cs-section > div > ul + p { margin-top: 1rem; }
.cs-fig { margin: 1.75rem 0 0; max-width: none; }
.cs-fig img { width: 100%; height: auto; display: block; }
.cs-fig figcaption { margin-top: .6rem; font-size: .85rem; color: var(--mute); }
.cs-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1.25rem; }
@media (min-width: 700px) { .cs-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-pull { margin-top: 1.5rem; padding-left: 1.1rem; border-left: 4px solid var(--yellow); font-family: 'Manrope', sans-serif; font-weight: 700; font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.25; letter-spacing: -0.02em; max-width: 26ch; text-wrap: balance; }
.cs-pairs { margin-top: 1.5rem; max-width: 40rem; }
.cs-pairs > div { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--rule); }
.cs-pairs > div:last-child { border-bottom: 1px solid var(--rule); }
.cs-pairs .head { color: var(--mute); font-size: .85rem; }
.cs-pairs > div:not(.head) span:last-child { font-weight: 600; }
.cs-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 3rem; margin-top: 1.25rem; max-width: 40rem; }
@media (min-width: 700px) { .cs-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-steps { list-style: none; counter-reset: st; margin-top: 1.25rem; max-width: 40rem; padding: 0; }
.cs-steps li { counter-increment: st; display: grid; grid-template-columns: 2.2rem 8rem 1fr; gap: .25rem 1rem; padding: .85rem 0; border-top: 1px solid var(--rule); align-items: baseline; }
.cs-steps li:last-child { border-bottom: 1px solid var(--rule); }
.cs-steps li::before { content: counter(st); color: var(--mute); font-size: .9rem; }
.cs-steps li b { font-family: 'Manrope', sans-serif; }
.cs-steps li span { color: var(--mute); }
@media (max-width: 560px) { .cs-steps li { grid-template-columns: 1.8rem 1fr; } .cs-steps li span { grid-column: 2; } }

.cs-pairs + p, .cs-two + p, .cs-steps + p, .cs-fig + p, .cs-pull + p { margin-top: 1.25rem; }

.cs-link { color: var(--fg); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; }
.cs-link:hover { background: var(--yellow); color: #0a0a0a; text-decoration-color: transparent; }

/* case hero media (1 large + 2 small) */
.cs-hero-media { padding-bottom: 2rem; }
.cs-hero-media .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.cs-hero-media figure { margin: 0; position: relative; overflow: hidden; }
.cs-hero-media figure > img:not(.bug) { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-hero-media .m-main { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.cs-hero-media .m-a, .cs-hero-media .m-b { aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
  .cs-hero-media .wrap { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
  .cs-hero-media .m-main { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 16 / 9; }
  .cs-hero-media .m-a, .cs-hero-media .m-b { aspect-ratio: auto; grid-column: 2; }
}
.cs-deva { display: block; margin-top: .6rem; font-family: 'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', sans-serif; font-weight: 600; font-size: clamp(1.4rem, 3vw, 2.1rem); letter-spacing: 0; color: var(--mute); }

/* proof band under hero */
.proof { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.75rem; border-top: 1px solid var(--rule); }
.proof-label { font-size: .9rem; color: var(--mute); margin-bottom: 1rem; }
.proof-track { display: flex; overflow: hidden; }
.proof-list { display: flex; flex-shrink: 0; align-items: center; }
.proof-list li { display: flex; align-items: center; white-space: nowrap; padding: 0 1.75rem; font: 700 clamp(1.05rem, 2vw, 1.4rem)/1.2 var(--display); letter-spacing: -0.015em; }
.proof-list li::after { content: ""; width: 6px; height: 6px; margin-left: 3.5rem; background: var(--yellow); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .proof-list { animation: proof-run 38s linear infinite; }
  .proof-track:hover .proof-list { animation-play-state: paused; }
}
@keyframes proof-run { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .proof-track { overflow: visible; }
  .proof-list { flex-wrap: wrap; gap: .75rem 0; justify-content: flex-start; }
  .proof-list[aria-hidden="true"] { display: none; }
}

/* experience logos */
.exp-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem 2.25rem; }
.exp-logos a { display: grid; place-items: center; opacity: .7; transition: opacity .2s, background-color .2s; border-radius: 4px; }
.exp-logos a:hover, .exp-logos a:focus-visible { opacity: 1; }
.exp-logos img { width: auto; height: 34px; display: block; }
.exp-logos a.sq img { height: 48px; }
.exp-logos a.mid img { height: 44px; }
.exp-logos a > img { grid-area: 1 / 1; }
.exp-logos img.col { opacity: 0; }
[data-theme="dark"] .exp-logos img.mono { filter: invert(1); }
.exp-logos a:hover, .exp-logos a:focus-visible { background: #fff; padding: 6px 10px; margin: -6px -10px; }
.exp-logos a:hover img.mono, .exp-logos a:focus-visible img.mono { opacity: 0; }
.exp-logos a:hover img.col, .exp-logos a:focus-visible img.col { opacity: 1; }
@media (max-width: 899px) { .exp-logos { gap: 1.5rem 2rem; } .exp-logos img { height: 28px; } .exp-logos a.sq img { height: 40px; } .exp-logos a.mid img { height: 36px; } }

/* what we help communicate */
.prob h2 { max-width: 18ch; font-size: clamp(2rem, 4.2vw, 3.4rem); letter-spacing: -0.03em; line-height: 1.08; }
.prob-list { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--rule-strong); }
.prob-row { display: grid; gap: .9rem 3rem; padding: 1.75rem 0; border-bottom: 1px solid var(--rule); }
.prob-row h3 { font: 700 clamp(1.15rem, 1.8vw, 1.45rem)/1.25 var(--display); letter-spacing: -0.015em; }
.prob-row p { color: var(--mute); max-width: 38rem; }
.prob .case { display: inline-block; margin-top: .75rem; font: 700 .95rem var(--display); text-decoration: none; border-bottom: 2px solid var(--yellow); padding-bottom: .1rem; transition: background .2s, color .2s; }
.prob .case:hover, .prob .case:focus-visible { background: var(--yellow); color: var(--ink); }
@media (min-width: 900px) { .prob-row { grid-template-columns: 5fr 7fr; } }

.form-note { font-size: .85rem; color: var(--mute); margin-top: -.25rem; }
.field-one { grid-template-columns: 1fr; }

/* IGNCA credit on stills */
.bug { position: absolute; top: .6rem; right: .6rem; width: clamp(34px, 4.5vw, 56px); height: auto; }
.cs-hero-media .m-a .bug, .cs-hero-media .m-b .bug { width: clamp(22px, 3vw, 30px); top: .45rem; right: .45rem; }
.cs-fig-img { position: relative; display: block; }

/* case ending */
.cs-next .wrap { display: grid; gap: 2.5rem 3rem; align-items: start; justify-content: stretch; }
.next-case p { font-size: .9rem; color: var(--mute); margin-bottom: .5rem; }
.next-case a { font: 800 clamp(1.8rem, 4vw, 3rem)/1.1 var(--display); letter-spacing: -0.03em; text-decoration: none; border-bottom: 3px solid var(--yellow); }
.next-case a:hover, .next-case a:focus-visible { background: var(--yellow); color: var(--ink); }
.next-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
@media (min-width: 900px) { .cs-next .wrap { grid-template-columns: 7fr 5fr; } }

/* how we work */
.how .wrap { display: block; }
.how h2 { max-width: 18ch; }
.how-lead { margin-top: 1.25rem; max-width: 40rem; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.5; }
.how-before { margin-top: 3rem; max-width: 40rem; }
.how-before h3, .cap-h { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.how-before p { margin-top: .75rem; color: var(--mute); }
.cap { margin-top: 4rem; }
.cap-h + .lede { margin-top: .75rem; }
/* founder */
.founder .wrap { display: grid; gap: 2rem; align-items: start; }
.founder figure { margin: 0; max-width: 360px; }
.founder figure img { width: 100%; height: auto; display: block; }
.founder h2 { font-size: clamp(2rem, 4vw, 3rem); }
.founder .role { margin-top: .4rem; color: var(--mute); }
.founder .bio { margin-top: 1.5rem; max-width: 36rem; font-size: 1.1rem; }
.founder .people { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); max-width: 36rem; }
.founder .people h3 { font-size: 1.1rem; }
.founder .people p { margin-top: .5rem; color: var(--mute); }
@media (min-width: 900px) { .founder .wrap { grid-template-columns: 4fr 7fr; gap: 4rem; } }
/* case end */
.cs-end { padding: clamp(3rem, 6vw, 5rem) 0; }
.cs-end h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); max-width: 20ch; }
.end-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 1.5rem; }
.text-link { color: var(--mute); text-decoration: none; border-bottom: 1px solid var(--rule-strong); padding-bottom: 2px; transition: color .2s, border-color .2s; }
.text-link:hover, .text-link:focus-visible { color: var(--fg); border-color: var(--yellow); }
.cs-fig-wrap { padding-bottom: 2rem; }
/* viraj brand */
.cs-logo { margin: 1.5rem 0; max-width: 28rem; }
.cs-logo img { width: 100%; height: auto; display: block; }
.swatches { list-style: none; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin: 1.25rem 0; padding: 0; }
.swatches li { display: flex; align-items: center; gap: .6rem; font-size: .95rem; }
.swatches i { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--rule-strong); display: block; }

.how-lead2 { margin-top: 1rem; color: var(--mute); font-size: 1.1rem; }

/* rethink: how we work + founder */
.how .how-top { display: grid; gap: 1.5rem 4rem; }
.how .how-statement { font: 700 clamp(1.5rem, 3vw, 2.3rem)/1.2 var(--display); letter-spacing: -0.02em; max-width: 26ch; margin: 0; }
.how .how-lead { margin-top: 1.5rem; max-width: 38rem; font-size: 1.1rem; color: var(--mute); }
.how .how-before { display: grid; gap: .75rem 4rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--rule); }
.how .how-before p { margin: 0; max-width: 38rem; color: var(--fg); }
.how .cap { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 2rem; border-top: 1px solid var(--rule); }
@media (min-width: 900px) {
  .how .how-top, .how .how-before { grid-template-columns: 4fr 8fr; }
}
.founder .wrap { align-items: center; }
.founder figure { max-width: 420px; }
.founder .bio { font-size: 1.2rem; line-height: 1.55; color: var(--fg); }
.founder .f-exp { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); max-width: 40rem; }
.founder .f-exp h3 { font-size: 1.1rem; margin-bottom: 1.25rem; }
.founder .f-exp .note { margin-top: 1rem; font-size: .875rem; color: var(--mute); }
.founder .people { margin-top: 1.5rem; padding-top: 1.5rem; }
@media (min-width: 900px) { .founder .wrap { grid-template-columns: 5fr 7fr; } }
.how .how-before { max-width: none; } .how .how-before p { margin-top: 0; }
.founder .exp-logos { gap: 1.25rem 1.6rem; }
.founder .exp-logos img { height: 28px; }
.founder .exp-logos a.sq img { height: 40px; }
.founder .exp-logos a.mid img { height: 36px; }

/* =====================================================================
   Service pages and homepage services. Added for the multi-page site.
   Footage is the visual; type and layout stay quiet. Only videos move.
   ===================================================================== */
.sv-hero { position: relative; display: grid; align-items: end; min-height: clamp(30rem, 78vh, 46rem); overflow: hidden; color: #fff; background: #0a0a0a; border-top: 0; }
.sv-hero .sv-bg, .sv-hero .sv-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,.88) 0%, rgba(10,10,10,.6) 50%, rgba(10,10,10,.15) 100%), linear-gradient(0deg, rgba(10,10,10,.6) 0%, rgba(10,10,10,0) 45%); }
.sv-hero .wrap { position: relative; z-index: 2; padding-top: 6rem; padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.sv-hero h1 { font-size: clamp(2.4rem, 6vw, 5rem); letter-spacing: -0.035em; max-width: 16ch; text-wrap: balance; }
.sv-hero .lede { margin-top: 1.4rem; color: rgba(255,255,255,.86); max-width: 34rem; }
.sv-hero .actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }
.sv-hero .btn-line { border-color: rgba(255,255,255,.55); color: #fff; }
.sv-hero .btn-line:hover { color: var(--ink); }
.sv-hero .btn-yellow:hover { background: #fff; color: var(--ink); }
.sv-hero .sv-note { margin-top: 1.5rem; font-size: .85rem; color: rgba(255,255,255,.72); }
.sv-hero .wrap { width: 100%; }
.sv-logo-hero::after { display: none; }
.sv-logo-fig { position: absolute; z-index: 1; right: max(1.5rem, calc((100% - 1200px) / 2 + 1.5rem)); top: 50%; transform: translateY(-50%); width: min(26rem, 42vw); box-shadow: 14px 14px 0 var(--yellow); }
.sv-logo-fig img { width: 100%; height: auto; display: block; }
@media (max-width: 760px) { .sv-logo-fig { top: 5.5rem; transform: none; width: 52vw; right: 1.5rem; } .sv-logo-hero { min-height: 36rem; } }

.sv-proof { padding: 1.75rem 0; }
.proof3 { display: grid; gap: 1.25rem 3rem; }
.proof3 dt { font-size: .85rem; color: var(--mute); margin-bottom: .35rem; }
.proof3 dd { font: 700 clamp(.98rem, 1.4vw, 1.15rem)/1.5 var(--display); letter-spacing: -0.01em; }
.proof3 dd span + span::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 .7rem .2rem; background: var(--yellow); }
@media (min-width: 900px) { .proof3 { grid-template-columns: repeat(3, auto); justify-content: space-between; } }

.sv-sec { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.sv-sec h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); margin-bottom: 1.5rem; max-width: 22ch; text-wrap: balance; }
.sv-sec p { max-width: 40rem; }
.sv-sec p + p { margin-top: 1rem; }
.sv-sec .mute, .sv-mute { color: var(--mute); }
.sv-big { font: 700 clamp(1.3rem, 2.6vw, 2rem)/1.3 var(--display); letter-spacing: -0.02em; max-width: 30ch; }
.sv-ticks { display: grid; gap: .9rem 3rem; }
.sv-ticks li { position: relative; padding-left: 2.1rem; max-width: 36rem; }
.sv-ticks li::before { content: "\2713"; position: absolute; left: 0; top: .15rem; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; background: var(--yellow); color: var(--ink); font: 800 .8rem/1 var(--display); }
.sv-ticks.two { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .sv-ticks.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sv-split { display: grid; gap: 2.5rem; align-items: center; }
.sv-split figure { overflow: hidden; background: var(--rule); aspect-ratio: 4 / 3; }
.sv-split figure img, .sv-split figure video { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .sv-split { grid-template-columns: 5fr 6fr; gap: 4rem; } .sv-split.flip figure { order: 2; } }
.sv-small { margin-top: 1.5rem; font-size: .9rem; color: var(--mute); max-width: 36rem; }

.sv-approach { position: relative; padding: clamp(3.5rem, 8vw, 6.5rem) 0; color: #fff; background: #0a0a0a; overflow: hidden; }
.sv-approach .sv-bgimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.sv-approach::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,.55), rgba(10,10,10,.85)); }
.sv-approach .wrap { position: relative; z-index: 2; display: grid; gap: 2.5rem; align-items: center; }
.sv-approach h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); margin-bottom: 1.5rem; max-width: 22ch; }
.sv-frame { position: relative; aspect-ratio: 16 / 9; border: 1px solid rgba(255,255,255,.3); background: #000; box-shadow: 14px 14px 0 var(--yellow); overflow: hidden; }
.sv-frame video, .sv-frame img { width: 100%; height: 100%; object-fit: cover; }
.sv-approach .sv-ticks li { color: #fff; }
.sv-approach p { color: rgba(255,255,255,.9); }
.sv-approach .sv-small { color: rgba(255,255,255,.7); }
@media (min-width: 900px) { .sv-approach .wrap { grid-template-columns: 7fr 5fr; gap: 5rem; } .sv-approach .sv-frame { margin-right: 14px; } .sv-approach.rev .wrap > :first-child { order: 2; } }

.sv-tl { margin-top: 2rem; }
.tl-track { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.tl-clip { padding: 1.1rem 1.25rem 1.3rem; background: var(--tint); border-top: 3px solid var(--yellow); }
.tl-clip b { display: block; font: 800 1.1rem var(--display); letter-spacing: -0.02em; margin-bottom: .35rem; }
.tl-clip span { color: var(--mute); font-size: .95rem; }
.tl-end { margin-top: .9rem; display: flex; align-items: center; gap: .75rem; font: 700 .95rem var(--display); }
.tl-end::before { content: ""; width: 3px; height: 1.6rem; background: var(--yellow); }
@media (min-width: 900px) {
  .tl-track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tl-end { justify-content: flex-end; text-align: right; }
}
.sv-steps { margin-top: 1.25rem; max-width: 46rem; }
.sv-steps > div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: .95rem 0; border-top: 1px solid var(--rule); }
.sv-steps > div:last-child { border-bottom: 1px solid var(--rule); }
.sv-steps b { font-family: var(--display); }
.sv-steps span { color: var(--mute); }

.sv-work { display: grid; gap: 1.75rem 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .sv-work { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sv-work.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sv-work.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sv-card figure { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--rule); }
.sv-card figure video, .sv-card figure img { width: 100%; height: 100%; object-fit: cover; }
.sv-card h3 { margin-top: .9rem; font-size: 1.15rem; letter-spacing: -0.015em; }
.sv-card p { margin-top: .35rem; color: var(--mute); font-size: .95rem; }
.sv-card .case { display: inline-block; margin-top: .6rem; font: 700 .9rem var(--display); text-decoration: none; border-bottom: 2px solid var(--yellow); }
.sv-card .case:hover { background: var(--yellow); color: var(--ink); }
.sv-shot { overflow: hidden; border: 1px solid var(--rule); max-width: 28rem; }
.sv-shot img { width: 100%; }

.sv-band { background: linear-gradient(180deg, #ffd93d 0%, #ffd93d 55%, #ffe680 100%); color: var(--ink); border-top: 0; }
.sv-band .wrap { display: grid; gap: 2.5rem; padding-top: clamp(3rem, 7vw, 5rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
.sv-band h2 { font-size: clamp(1.8rem, 3.6vw, 3rem); max-width: 18ch; text-wrap: balance; color: var(--ink); }
.sv-band .sv-band-side { color: var(--ink); display: grid; gap: 1.25rem; align-content: end; justify-items: start; }
.sv-band .sv-band-side a:not(.btn) { color: var(--ink); font-weight: 600; text-underline-offset: .2em; text-decoration-color: var(--ink); }
.sv-band .btn-yellow { background: var(--ink); color: #fff; }
.sv-band .btn-yellow:hover { background: #fff; color: var(--ink); }
@media (min-width: 900px) {
  .sv-band { background: #ffd93d; }
  .sv-band .wrap { grid-template-columns: 1fr 1fr; align-items: center; }
  .sv-band .sv-band-side { justify-self: end; }
}

/* Homepage: services */
.svc-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.svc-head p { margin-top: 1rem; color: var(--mute); max-width: 34rem; }
.svc-grid { display: grid; gap: 2.5rem 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc { display: block; text-decoration: none; }
.svc figure { overflow: hidden; aspect-ratio: 4 / 3; background: var(--rule); }
.svc img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.svc:hover img { transform: scale(1.04); }
.svc h3 { margin-top: 1rem; font-size: clamp(1.25rem, 2vw, 1.55rem); }
.svc p { margin-top: .45rem; color: var(--mute); max-width: 26rem; }
.svc .go { display: inline-block; margin-top: .8rem; font: 700 .92rem var(--display); border-bottom: 2px solid var(--yellow); }
.svc:hover .go { background: var(--yellow); color: var(--ink); }
.hero .place { margin-top: 1rem; font-size: .9rem; color: var(--mute); }
.hero .proof { margin-top: clamp(3rem, 6vw, 5rem); }
.sv-sec p + .sv-ticks { margin-top: 1.25rem; }
.sv-approach p + p { margin-top: 1rem; }
.sv-approach .cs-link { color: #fff; }
.sv-approach .wrap > div:first-child p { max-width: 38rem; }

/* service page blocks */
.sv-tight { padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.sv-h-sm { font-size: 1.05rem; font-family: var(--display); margin-bottom: 1rem; }
.sv-badges, .sv-other { display: flex; flex-wrap: wrap; gap: .6rem; }
.sv-badges li { border: 1px solid var(--rule); padding: .5rem .95rem; border-radius: 99px; font-weight: 500; }
.sv-badges li::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--yellow); margin-right: .55rem; }
.sv-other a { display: inline-block; border: 1px solid var(--rule); padding: .5rem .95rem; border-radius: 99px; text-decoration: none; }
.sv-other a:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.sv-icons { display: grid; gap: 1px; margin-top: 1.5rem; background: var(--rule); border: 1px solid var(--rule); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .sv-icons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sv-icons { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sv-icons li { background: var(--bg); padding: 1.5rem 1.25rem 1.75rem; }
.sv-icons svg { width: 2.1rem; height: 2.1rem; fill: none; stroke: var(--yellow); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 1rem; }
.sv-icons h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.sv-icons p { color: var(--mute); font-size: .95rem; }
.sv-card .case.yt { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; }
.brand-chip { display: inline-block; border: 1px solid var(--rule); padding: .1rem .55rem; border-radius: 99px; font: 700 .78rem var(--display); }

/* homepage: hero video */
.hero.has-video { position: relative; overflow: hidden; isolation: isolate; color: #fff; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero.has-video::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,10,10,.82) 0%, rgba(10,10,10,.55) 55%, rgba(10,10,10,.35) 100%); }
.hero.has-video .sub, .hero.has-video .place { color: #e6e6e6; }
.hero.has-video .btn-line { color: #fff; border-color: rgba(255,255,255,.55); }
.hero.has-video .btn-line:hover { border-color: var(--yellow); color: var(--yellow); }
.hero.has-video .hero-grid { grid-template-columns: minmax(0, 1fr); }
.hero.has-video h1 { color: #fff; }

/* homepage: proof strip under hero */
.proof-sec { padding: 1.75rem 0; border-bottom: 1px solid var(--rule); }
.proof-sec .proof-label { font-size: .9rem; color: var(--mute); margin-bottom: 1rem; }

/* homepage: moving work strip */
.ws-track { display: flex; overflow: hidden; }
.ws-list { display: flex; flex-shrink: 0; align-items: stretch; }
.ws-card { width: min(78vw, 22rem); margin-right: 1.5rem; flex: none; }
.ws-card figure { overflow: hidden; background: var(--rule); aspect-ratio: 4 / 3; }
.ws-card img { width: 100%; height: 100%; object-fit: cover; }
.ws-card .who { margin-top: 1rem; font-size: .85rem; color: var(--mute); }
.ws-card h3 { margin-top: .25rem; font-size: 1.4rem; }
.ws-card p:not(.who):not(.soon) { margin-top: .55rem; color: var(--mute); font-size: .95rem; }
.ws-card .case { display: inline-block; margin-top: .9rem; font: 700 .95rem var(--display); text-decoration: none; border-bottom: 2px solid var(--yellow); }
.ws-card .case:hover { background: var(--yellow); color: var(--ink); }
.ws-card .soon { margin-top: .9rem; font-size: .875rem; color: var(--mute); }
@media (prefers-reduced-motion: no-preference) {
  .ws-list { animation: proof-run 55s linear infinite; }
  .ws-track:hover .ws-list { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-track { overflow-x: auto; }
  .ws-list[aria-hidden="true"] { display: none; }
}

/* homepage: service cards with icons */
.svc2-grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); grid-template-columns: minmax(0, 1fr); margin-top: 2rem; }
@media (min-width: 640px) { .svc2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .svc2-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc2 { display: block; background: var(--bg); padding: 1.75rem 1.5rem 2rem; text-decoration: none; transition: background .2s, color .2s; }
.svc2 svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: var(--yellow); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 1.1rem; transition: stroke .2s; }
.svc2 h3 { font-size: 1.2rem; }
.svc2 p { margin-top: .5rem; color: var(--mute); max-width: 26rem; }
.svc2:hover { background: var(--yellow); color: var(--ink); }
.svc2:hover svg { stroke: var(--ink); }
.svc2:hover p { color: var(--ink); }
.svc2:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; }

.brand-chip { background: #fff; padding: .25rem .6rem; border: 0; border-radius: 4px; line-height: 0; }
.brand-chip img { height: 22px; width: auto; }

/* founder, compact */
.founder-compact { padding-block: clamp(2.5rem, 5vw, 4rem); }
.founder-compact .wrap { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.founder-compact figure { max-width: 130px; }
.founder-compact h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.founder-compact .bio { font-size: 1.05rem; margin-top: 1rem; }
.founder-compact .f-exp { margin-top: 1.5rem; padding-top: 1.25rem; }
.founder-compact .people { display: none; }
@media (min-width: 760px) { .founder-compact .wrap { grid-template-columns: 150px minmax(0, 1fr); gap: 2.5rem; } .founder-compact figure { max-width: 150px; } }

/* logo-only founder-earlier-work strip */
section#founder.founder { padding-block: clamp(2rem, 4vw, 3rem); }
section#founder .f-exp { margin-top: 0; padding-top: 0; border-top: 0; max-width: none; }
section#founder .wrap { display: block; }

/* services dropdown */
.nav-dd { position: relative; display: flex; align-items: center; }
.nav-dd > a::after { content: ""; display: inline-block; width: .4rem; height: .4rem; margin-left: .45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s ease; }
.nav-dd.open > a::after, .nav-dd:has(:focus-visible) > a::after { transform: translateY(1px) rotate(225deg); }
.dd-menu { position: absolute; top: 100%; left: -1.1rem; min-width: 19rem; padding: .6rem; margin-top: .6rem; background: var(--bg); border: 1px solid var(--rule-strong, var(--rule)); box-shadow: 0 18px 40px rgba(0,0,0,.35); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; z-index: 60; }
.dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -.7rem; height: .7rem; }
.nav-dd.open .dd-menu, .nav-dd:has(:focus-visible) .dd-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dd-menu a { display: block; padding: .65rem .8rem; color: var(--fg); text-decoration: none; font-size: .9rem; transition: background .15s, color .15s; }
.dd-menu a:hover { background: var(--yellow); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .dd-menu, .nav-dd > a::after { transition: none; } }

/* founder's earlier work: moving logo band on yellow */
.logo-band { position: relative; isolation: isolate; overflow: hidden; background: #ffd93d; color: var(--ink); padding: clamp(2.5rem, 5vw, 4rem) 0; }
.lb-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; filter: grayscale(1) contrast(1.1) blur(7px); transform: scale(1.06); mix-blend-mode: multiply; opacity: .24; }
.logo-band h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); margin-bottom: 1.75rem; }
.lb-track { display: flex; overflow: hidden; }
.lb-list { display: flex; flex-shrink: 0; align-items: center; gap: 1.25rem; padding-right: 1.25rem; }
.lb-list li a { display: grid; place-items: center; height: 5.25rem; min-width: 8rem; padding: 0 1.5rem; background: #fff; border-radius: 6px; transition: transform .2s; }
.lb-list li a:hover { transform: translateY(-3px); }
.lb-list img { height: 2.6rem; width: auto; max-width: 11rem; object-fit: contain; }
.logo-band .note { margin-top: 1.5rem; font-size: .9rem; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .lb-list { animation: proof-run 70s linear infinite; }
  .lb-track:hover .lb-list { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .lb-track { overflow-x: auto; }
  .lb-list[aria-hidden="true"] { display: none; }
}

/* approach checklist + band heading on service pages */
.sv-checks { display: grid; gap: .6rem 1.5rem; margin-top: 1.5rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 640px) { .sv-checks { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.sv-checks li { position: relative; padding-left: 1.7rem; color: #fff; font-size: .98rem; line-height: 1.45; }
.sv-checks li::before { content: ""; position: absolute; left: 0; top: .3em; width: .95rem; height: .5rem; border-left: 2px solid var(--yellow); border-bottom: 2px solid var(--yellow); transform: rotate(-45deg) scaleY(1.2); }
.logo-band h2 { font-size: clamp(1.15rem, 2vw, 1.5rem); margin-bottom: 1.75rem; }

/* marquee lists always at least as wide as the viewport, so no empty gap on wide screens */
@media (prefers-reduced-motion: no-preference) {
  .lb-list, .proof-list, .ws-list { min-width: 100%; justify-content: space-around; }
}
.sv-quote { margin-top: 1.5rem; padding-left: 1.25rem; border-left: 4px solid var(--yellow); color: var(--mute); max-width: 40rem; font-size: 1rem; }
.ws-card figure { aspect-ratio: 16 / 9; }
.sv-big.lines { max-width: 46rem; font-size: clamp(1.25rem, 2.3vw, 1.9rem); line-height: 1.35; }
.sv-band h2.two { max-width: none; font-size: clamp(1.5rem, 2.8vw, 2.4rem); }
@media (min-width: 900px) { .sv-big.lines, .sv-band h2.two { text-wrap: balance; } }
.sv-big.lines { max-width: 58rem; font-size: clamp(1.1rem, 1.9vw, 1.6rem); text-wrap: wrap; }
.sv-big.lines br + * { }
.sv-band h2.two { font-size: clamp(1.35rem, 2.3vw, 2rem); }
@media (min-width: 900px) { .sv-band .wrap:has(h2.two) { grid-template-columns: 2.4fr 1fr; } }
.sv-band h2.two { font-size: clamp(1.2rem, 2vw, 1.7rem); text-wrap: wrap; }
@media (min-width: 900px) { .sv-band h2.two { text-wrap: wrap; } }

/* brand identity hero diagram */
.sv-fig-diagram { background: var(--bg); border: 1px solid var(--rule); padding: 1.25rem; }
.sv-fig-diagram svg { width: 100%; height: auto; display: block; }
.idv circle { fill: var(--yellow); fill-opacity: .13; stroke: var(--fg); stroke-opacity: .55; stroke-width: 1.5; }
.idv-t text { fill: var(--fg); font: 700 17px var(--display); letter-spacing: -0.01em; }
.idv-core { fill: var(--yellow); }
.idv-core-t { fill: #0a0a0a; font: 800 15px var(--display); letter-spacing: -0.01em; }
@media (max-width: 760px) { .sv-fig-diagram { width: 72vw; padding: .75rem; } }

/* brand identity concept visuals */
.sv-fig-svg svg { width: 100%; height: auto; display: block; }
.bgs-card { fill: none; stroke: var(--rule); stroke-width: 1.5; }
.bgs-cap { fill: var(--fg); font: 700 13px var(--display); }
.bgs-dash { fill: none; stroke: var(--mute); stroke-dasharray: 4 4; }
.bgs-mark { fill: var(--fg); }
.bgs-ink { stroke: var(--fg); stroke-opacity: .35; }
.bgs-line { fill: var(--rule); }
.bgs-aa { fill: var(--fg); font: 800 56px var(--display); letter-spacing: -0.03em; }
.bgs-img { fill: var(--rule); }
.bgs-hill { fill: var(--mute); fill-opacity: .55; }
.sv-frame svg { width: 100%; height: 100%; display: block; background: #0a0a0a; }
.ro-win { fill: #141414; stroke: #fff; stroke-opacity: .3; stroke-width: 1.5; }
.ro-bar { fill: #232323; }
.ro-mark { fill: #ffd93d; }
.ro-ln { fill: #fff; fill-opacity: .35; }
.ro-hero { fill: #fff; fill-opacity: .1; }
.ro-btn { fill: #ffd93d; }
.ro-film { fill: #000; stroke: #ffd93d; stroke-width: 2; }

/* comparison table */
.sv-lead { margin-top: .75rem; max-width: 40rem; color: var(--mute); font-size: 1.1rem; }
.sv-compare { margin-top: 2rem; border-top: 1px solid var(--rule); }
.cmp-row { display: grid; gap: .35rem 2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); grid-template-columns: minmax(0,1fr); }
.cmp-row b { font: 700 1rem var(--display); }
.cmp-row p { color: var(--mute); font-size: .98rem; }
.cmp-row p:last-child { color: var(--fg); }
.cmp-head { display: none; }
@media (min-width: 800px) { .cmp-row { grid-template-columns: 11rem minmax(0,1fr) minmax(0,1fr); align-items: baseline; } .cmp-head { display: grid; } .cmp-head b:last-child { color: var(--yellow); } }
@media (max-width: 799px) { .cmp-row p:nth-of-type(1)::before { content: "Template logo: "; font-weight: 600; } .cmp-row p:nth-of-type(2)::before { content: "Brand identity: "; font-weight: 600; } .cmp-head { display: none; } }

/* photo band under "What we make" */
.sv-sec.sv-photo { position: relative; isolation: isolate; background-size: cover; background-position: center 40%; padding: clamp(4rem, 9vw, 7rem) 0; }
.sv-sec.sv-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.62) 55%, rgba(0,0,0,.42) 100%); }
.sv-sec.sv-photo .sv-badges li { background: rgba(0,0,0,.55); border-color: rgba(255,255,255,.28); color: #fff; }

.sv-band[style] { background-size: cover; background-position: center; }
@media (min-width: 900px) { .sv-band[style] { background-position: center 40%; } }
@media (min-width: 900px) {
  .sv-band[style] .wrap:has(h2.two) { padding-left: 27%; grid-template-columns: 3fr 1fr; }
}
@media (max-width: 899px) { .sv-band[style] { background-position: 85% center; } }
@media (max-width: 899px) { .sv-band[style] { background-image: none !important; background-color: #ffd93d; } }

/* hero carousel (crossfade + slow zoom) */
.hero-slides { position: absolute; inset: 0; }
.hero-slides .hs { position: absolute; inset: 0; opacity: 0; overflow: hidden; }
.hero-slides .hs > img { width: 100%; height: 100%; object-fit: cover; }
.hero-slides .hs0 { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero-slides .hs { animation: hs-fade 12s infinite; }
  .hero-slides .hs > img { animation: hs-zoom 12s infinite; transform-origin: 60% 50%; }
  .hero-slides .hs0, .hero-slides .hs0 > img { animation-delay: -2s; }
  .hero-slides .hs1, .hero-slides .hs1 > img { animation-delay: 4s; }
}
@keyframes hs-fade { 0% { opacity: 0; } 8% { opacity: 1; } 50% { opacity: 1; } 58% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hs-zoom { 0% { transform: scale(1); } 58% { transform: scale(1.12); } 100% { transform: scale(1.12); } }
/* gentle zoom on photos */
.sv-frame img, .sv-split figure img { transition: transform 1.6s cubic-bezier(.2,.6,.2,1); }
.sv-frame:hover img, .sv-split figure:hover img { transform: scale(1.06); }
.sv-slides-hero::after { display: none; }
.hero-slides .hs:has(> img)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,.88) 0%, rgba(10,10,10,.6) 50%, rgba(10,10,10,.15) 100%), linear-gradient(0deg, rgba(10,10,10,.6) 0%, rgba(10,10,10,0) 45%); }

.sv-approach .sv-frame img[src*='approach-fan'] { object-position: 60% 55%; }

.sv-presence { margin-top: 2rem; max-width: 52rem; }
.sv-presence svg { width: 100%; height: auto; display: block; color: var(--fg); }

@media (min-width: 900px) {
  .sv-split.stretch { align-items: stretch; }
  .sv-split.stretch figure { aspect-ratio: auto; height: 100%; min-height: 24rem; }
}
.sv-split.stretch figure img { object-position: 25% center; }

/* all split figures are 16:9 */
.sv-split figure { aspect-ratio: 16 / 9; }
.sv-split { align-items: start; }

.sv-stack-fig { margin-top: 2.5rem; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.sv-stack-fig video, .sv-stack-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sv-gframe { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .sv-gframe { grid-template-columns: 7fr 5fr; gap: 5rem; } .sv-gframe .sv-frame { margin-right: 14px; } }

@media (min-width: 900px) { .sv-gframe.flip { grid-template-columns: 5fr 7fr; } .sv-gframe.flip .sv-frame { margin-right: 14px; margin-left: 0; } }

/* website technologies (accordion) */
.sv-accs{margin-top:2rem;border-top:1px solid var(--rule);max-width:56rem}
.sv-acc{border-bottom:1px solid var(--rule)}
.sv-acc summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(10rem,16rem) 1fr 1.5rem;gap:1rem;align-items:center;padding:1.15rem 0}
.sv-acc summary::-webkit-details-marker{display:none}
.sv-acc .n{font-size:1.2rem;font-weight:500}
.sv-acc .t{color:var(--mute)}
.sv-acc .plus{position:relative;width:14px;height:14px;justify-self:end}
.sv-acc .plus::before,.sv-acc .plus::after{content:"";position:absolute;background:var(--yellow);left:0;top:6px;width:14px;height:2px;transition:transform .2s}
.sv-acc .plus::after{transform:rotate(90deg)}
.sv-acc[open] .plus::after{transform:rotate(0)}
.sv-acc summary:hover .n{color:var(--yellow)}
.sv-acc summary:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
.sv-acc dl{margin:0 0 1.4rem;display:grid;grid-template-columns:minmax(10rem,16rem) 1fr;gap:.6rem 1rem}
.sv-acc dt{color:var(--mute);font-weight:400}
.sv-acc dd{margin:0;line-height:1.55}
@media(max-width:640px){.sv-acc summary{grid-template-columns:1fr 1.5rem}.sv-acc .t{grid-column:1;grid-row:2}.sv-acc .plus{grid-column:2;grid-row:1}.sv-acc dl{grid-template-columns:1fr;gap:.1rem}.sv-acc dd{margin-bottom:.7rem}}

/* presence sequence: build, hold, unbuild in reverse, one 16s loop; the frames stay put so the loop has no cut */
.sv-presence.js svg *{animation-play-state:paused}.sv-presence.js.go svg *{animation-play-state:running}
.sv-presence .a-link,.sv-presence .a-link2{stroke-dasharray:1}
.sv-presence.js .a-ban{transform-origin:44px 144px;animation:pr-ban 16s linear infinite both}
@keyframes pr-ban{0.0%{transform:scaleX(0);animation-timing-function:cubic-bezier(.2,.7,.2,1)}5.625%{transform:scaleX(1);animation-timing-function:cubic-bezier(.2,.7,.2,1)}90.625%{transform:scaleX(1);animation-timing-function:cubic-bezier(.5,0,.9,.5)}95.0%{transform:scaleX(0);animation-timing-function:cubic-bezier(.5,0,.9,.5)}100.0%{transform:scaleX(0);animation-timing-function:cubic-bezier(.5,0,.9,.5)}}
.sv-presence.js .a-bar1{transform-origin:64px 124px;animation:pr-bar1 16s linear infinite both}
@keyframes pr-bar1{0.0%{transform:scaleX(0);animation-timing-function:cubic-bezier(.2,.7,.2,1)}6.25%{transform:scaleX(0);animation-timing-function:cubic-bezier(.2,.7,.2,1)}9.375%{transform:scaleX(1);animation-timing-function:cubic-bezier(.2,.7,.2,1)}88.75%{transform:scaleX(1);animation-timing-function:cubic-bezier(.5,0,.9,.5)}91.25%{transform:scaleX(0);animation-timing-function:cubic-bezier(.5,0,.9,.5)}100.0%{transform:scaleX(0);animation-timing-function:cubic-bezier(.5,0,.9,.5)}}
.sv-presence.js .a-bar2{transform-origin:64px 144px;animation:pr-bar2 16s linear infinite both}
@keyframes pr-bar2{0.0%{transform:scaleX(0);animation-timing-function:cubic-bezier(.2,.7,.2,1)}7.812%{transform:scaleX(0);animation-timing-function:cubic-bezier(.2,.7,.2,1)}10.938%{transform:scaleX(1);animation-timing-function:cubic-bezier(.2,.7,.2,1)}87.5%{transform:scaleX(1);animation-timing-function:cubic-bezier(.5,0,.9,.5)}90.0%{transform:scaleX(0);animation-timing-function:cubic-bezier(.5,0,.9,.5)}100.0%{transform:scaleX(0);animation-timing-function:cubic-bezier(.5,0,.9,.5)}}
.sv-presence.js .a-bar3{transform-origin:64px 170px;animation:pr-bar3 16s linear infinite both}
@keyframes pr-bar3{0.0%{transform:scaleX(0);animation-timing-function:cubic-bezier(.2,.7,.2,1)}9.375%{transform:scaleX(0);animation-timing-function:cubic-bezier(.2,.7,.2,1)}12.5%{transform:scaleX(1);animation-timing-function:cubic-bezier(.2,.7,.2,1)}86.25%{transform:scaleX(1);animation-timing-function:cubic-bezier(.5,0,.9,.5)}88.75%{transform:scaleX(0);animation-timing-function:cubic-bezier(.5,0,.9,.5)}100.0%{transform:scaleX(0);animation-timing-function:cubic-bezier(.5,0,.9,.5)}}
.sv-presence.js .a-box1{animation:pr-box1 16s linear infinite both}
@keyframes pr-box1{0.0%{opacity:0;transform:translateY(14px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}12.5%{opacity:0;transform:translateY(14px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}16.25%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.2,.7,.2,1)}85.0%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.5,0,.9,.5)}87.812%{opacity:0;transform:translateY(14px);animation-timing-function:cubic-bezier(.5,0,.9,.5)}100.0%{opacity:0;transform:translateY(14px);animation-timing-function:cubic-bezier(.5,0,.9,.5)}}
.sv-presence.js .a-box2{animation:pr-box2 16s linear infinite both}
@keyframes pr-box2{0.0%{opacity:0;transform:translateY(14px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}13.75%{opacity:0;transform:translateY(14px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}17.5%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.2,.7,.2,1)}84.062%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.5,0,.9,.5)}86.875%{opacity:0;transform:translateY(14px);animation-timing-function:cubic-bezier(.5,0,.9,.5)}100.0%{opacity:0;transform:translateY(14px);animation-timing-function:cubic-bezier(.5,0,.9,.5)}}
.sv-presence.js .a-box3{animation:pr-box3 16s linear infinite both}
@keyframes pr-box3{0.0%{opacity:0;transform:translateY(14px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}15.0%{opacity:0;transform:translateY(14px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}18.75%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.2,.7,.2,1)}83.125%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.5,0,.9,.5)}85.938%{opacity:0;transform:translateY(14px);animation-timing-function:cubic-bezier(.5,0,.9,.5)}100.0%{opacity:0;transform:translateY(14px);animation-timing-function:cubic-bezier(.5,0,.9,.5)}}
.sv-presence.js .a-link{animation:pr-link 16s linear infinite both}
@keyframes pr-link{0.0%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.2,.7,.2,1)}18.75%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.2,.7,.2,1)}22.5%{stroke-dashoffset:0;animation-timing-function:ease-in-out}81.25%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.5,0,.9,.5)}84.375%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.5,0,.9,.5)}100.0%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.5,0,.9,.5)}}
.sv-presence.js .a-pin{transform-origin:500px 150px;animation:pr-pin 16s linear infinite both}
@keyframes pr-pin{0.0%{opacity:0;transform:translateY(-16px) scaleX(1);animation-timing-function:cubic-bezier(.2,.7,.2,1)}22.5%{opacity:0;transform:translateY(-16px) scaleX(1);animation-timing-function:cubic-bezier(.2,.7,.2,1)}24.375%{opacity:1;transform:translateY(0) scaleX(1);animation-timing-function:ease-in-out}26.25%{transform:scaleX(0);animation-timing-function:ease-in-out}28.75%{transform:scaleX(-1);animation-timing-function:ease-in-out}31.25%{transform:scaleX(0);animation-timing-function:ease-in-out}33.125%{opacity:1;transform:scaleX(1);animation-timing-function:cubic-bezier(.2,.7,.2,1)}78.75%{opacity:1;transform:scaleX(1);animation-timing-function:cubic-bezier(.5,0,.9,.5)}81.875%{opacity:0;transform:translateY(-16px) scaleX(1);animation-timing-function:cubic-bezier(.5,0,.9,.5)}100.0%{opacity:0;transform:translateY(-16px) scaleX(1);animation-timing-function:cubic-bezier(.5,0,.9,.5)}}
.sv-presence.js .a-cta{transform-origin:520px 296px;animation:pr-cta 16s linear infinite both}
@keyframes pr-cta{0.0%{opacity:.2;transform:scale(1);animation-timing-function:cubic-bezier(.2,.7,.2,1)}33.125%{opacity:.2;transform:scale(1);animation-timing-function:cubic-bezier(.2,.7,.2,1)}35.0%{opacity:1;transform:scale(1.35);animation-timing-function:ease-in-out}37.5%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.2,.7,.2,1)}78.125%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.5,0,.9,.5)}81.25%{opacity:.2;transform:scale(1);animation-timing-function:cubic-bezier(.5,0,.9,.5)}100.0%{opacity:.2;transform:scale(1);animation-timing-function:cubic-bezier(.5,0,.9,.5)}}
.sv-presence.js .a-link2{animation:pr-link2 16s linear infinite both}
@keyframes pr-link2{0.0%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.2,.7,.2,1)}37.5%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.2,.7,.2,1)}40.625%{stroke-dashoffset:0;animation-timing-function:ease-in-out}76.875%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.5,0,.9,.5)}80.0%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.5,0,.9,.5)}100.0%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.5,0,.9,.5)}}
.sv-presence.js .a-mid{transform-origin:695px 191px;animation:pr-mid 16s linear infinite both}
@keyframes pr-mid{0.0%{opacity:0;transform:scale(.92);animation-timing-function:cubic-bezier(.2,.7,.2,1)}40.625%{opacity:0;transform:scale(.92);animation-timing-function:cubic-bezier(.2,.7,.2,1)}43.75%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.2,.7,.2,1)}75.625%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.5,0,.9,.5)}79.375%{opacity:0;transform:scale(.92);animation-timing-function:cubic-bezier(.5,0,.9,.5)}100.0%{opacity:0;transform:scale(.92);animation-timing-function:cubic-bezier(.5,0,.9,.5)}}
.sv-presence.js .a-top{animation:pr-top 16s linear infinite both}
@keyframes pr-top{0.0%{opacity:0;transform:translateY(110px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}44.375%{opacity:0;transform:translateY(110px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}50.625%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.2,.7,.2,1)}71.875%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.5,0,.9,.5)}76.875%{opacity:0;transform:translateY(110px);animation-timing-function:cubic-bezier(.5,0,.9,.5)}100.0%{opacity:0;transform:translateY(110px);animation-timing-function:cubic-bezier(.5,0,.9,.5)}}
.sv-presence.js .a-bot{animation:pr-bot 16s linear infinite both}
@keyframes pr-bot{0.0%{opacity:0;transform:translateY(-110px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}44.375%{opacity:0;transform:translateY(-110px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}50.625%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.2,.7,.2,1)}71.875%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.5,0,.9,.5)}76.875%{opacity:0;transform:translateY(-110px);animation-timing-function:cubic-bezier(.5,0,.9,.5)}100.0%{opacity:0;transform:translateY(-110px);animation-timing-function:cubic-bezier(.5,0,.9,.5)}}
@media(prefers-reduced-motion:reduce){.sv-presence.js svg *{animation:none!important}}

/* stats band */
.sv-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;margin-top:2.25rem}
.sv-stat{border-top:2px solid var(--yellow);padding-top:1rem}
.sv-stat h3{font-size:1.2rem;font-weight:500;margin:0}
.sv-stat .per{color:var(--mute);font-size:.9rem;margin:.2rem 0 1.4rem}
.sv-stat .n{display:flex;align-items:baseline;gap:.9rem;padding:.7rem 0;border-bottom:1px solid var(--rule)}
.sv-stat .n b{font-family:var(--display);font-weight:500;font-size:clamp(2rem,3.4vw,2.9rem);line-height:1;min-width:7rem;color:var(--yellow)}
.sv-stat .n span{color:var(--fg)}
@media(max-width:899px){.sv-stat-grid{grid-template-columns:1fr;gap:2rem}}

/* work feature */
.sv-feat{display:grid;grid-template-columns:7fr 5fr;gap:2.5rem;align-items:center;margin-top:2rem}
.sv-feat-v{margin:0;aspect-ratio:16/9;overflow:hidden;border-radius:6px}
.sv-feat-v video{width:100%;height:100%;object-fit:cover;display:block}
.sv-feat-t h3{font-size:1.5rem;font-weight:500;margin:0 0 .6rem}
.sv-feat-t p{margin:0 0 1.2rem;line-height:1.6}
.sv-feat-s{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.25rem}
.sv-feat-s figure{margin:0;aspect-ratio:16/9;overflow:hidden;border-radius:6px;background:#091128}
.sv-feat-s img,.sv-feat-s video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.sv-feat-s figure:hover img{transform:scale(1.05)}
.sv-feat-s .logo img{object-fit:contain}
@media(max-width:899px){.sv-feat{grid-template-columns:1fr;gap:1.25rem}.sv-feat-s{grid-template-columns:1fr 1fr 1fr;gap:.5rem}}

@media (hover: hover) and (pointer: fine) {
  .nav-dd:hover > a::after { transform: translateY(1px) rotate(225deg); }
  .nav-dd:hover .dd-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
/* CTA motion: the floating button drifts and sends out a soft ring; yellow buttons get an occasional sheen */
.float-cta { animation: cta-float 3.8s ease-in-out infinite; }
.float-cta::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--yellow); border-radius: inherit; pointer-events: none; animation: cta-ring 2.6s ease-out infinite; }
.float-cta:hover, .float-cta:focus-visible { animation-play-state: paused; }
@keyframes cta-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes cta-ring { 0% { transform: scale(1); opacity: .75; } 70%, 100% { transform: scale(1.22, 1.5); opacity: 0; } }
@media (max-width: 899px) { .float-cta::after { transform-origin: center; } @keyframes cta-ring { 0% { transform: scale(1); opacity: .75; } 70%, 100% { transform: scale(1.6); opacity: 0; } } }
.btn-yellow { position: relative; overflow: hidden; }
.btn-yellow::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); pointer-events: none; animation: cta-sheen 6s ease-in-out 2s infinite; }
@keyframes cta-sheen { 0%, 70% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .float-cta, .float-cta::after, .btn-yellow::after { animation: none; } }

/* Our work mosaic */
.mo-lead{max-width:44rem;margin-bottom:3rem}.mo-lead p{margin:.6rem 0 0;line-height:1.6}
.mo-g{margin-top:3.5rem}.mo-g:first-of-type{margin-top:0}
.mt{margin:0;position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:6px;background:#091128;box-shadow:0 0 0 1px var(--rule)}
.mt video{width:100%;height:100%;object-fit:cover;display:block}
.mt figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.5rem 1.1rem .9rem;color:#fff;font-size:.9rem;background:linear-gradient(transparent,rgba(0,0,0,.72));pointer-events:none}
.mt.cine figcaption{padding:5rem 2rem 1.75rem;max-width:none}
.mt.cine figcaption b{display:block;font-weight:500;font-size:clamp(1.3rem,2.4vw,2rem);margin-bottom:.4rem}
.mt.cine figcaption{font-size:1rem;line-height:1.5}
.mo-h{max-width:40rem;margin-bottom:1.25rem}.mo-h h3{font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:500;margin:0 0 .5rem}.mo-h p{margin:0;line-height:1.6}
.mo-row{display:grid;gap:1.25rem}.mo-row.n2{grid-template-columns:1fr 1fr}.mo-row.n3{grid-template-columns:repeat(3,1fr)}
.mo-split{display:grid;grid-template-columns:7fr 5fr;gap:2.5rem;align-items:center}.mo-t h3{font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:500;margin:0 0 .6rem}.mo-t p{margin:0 0 1.2rem;line-height:1.6}
.mo-t{display:flex;align-items:center}
@media(max-width:899px){.mo-split{grid-template-columns:1fr;gap:1.25rem}.mo-row.n2,.mo-row.n3{grid-template-columns:1fr}.mo-g{margin-top:2.5rem}.mt.cine figcaption{padding:3rem 1rem 1rem}.mt.cine figcaption b{font-size:1.1rem}.mt.cine figcaption{font-size:.85rem}}
.mcap{margin:.6rem 0 0;font-size:.9rem;color:var(--mute)}
@media(max-width:899px){.mt.cine{aspect-ratio:auto;background:none;box-shadow:none;overflow:visible}.mt.cine video{aspect-ratio:16/9;height:auto;border-radius:6px}.mt.cine figcaption{position:static;background:none;color:var(--fg);padding:.9rem 0 0}.mt.cine figcaption b{font-size:1.2rem}}

/* privacy and 404 pages, form note, tap targets */
.legal{padding-top:8.5rem}.legal h1{font-size:clamp(2rem,4.5vw,3.2rem);font-weight:600;margin:0 0 .5rem}
.legal h2{font-size:1.25rem;font-weight:500;margin:2rem 0 .5rem}.legal p{max-width:42rem;line-height:1.7;margin:0 0 .8rem}
.form-note{margin:.9rem 0 0;font-size:.85rem;color:var(--mute)}.form-note a,.footer-bottom a{text-decoration:underline}
.case{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:899px){.mobile-nav a{display:flex;align-items:center;min-height:44px}.footer-links a,.sv-other a{display:inline-flex;align-items:center;min-height:44px}.float-cta{min-height:44px}}

/* form confirmation */
.form-done[hidden], .contact-form[hidden] { display: none; }
.form-done { border-left: 4px solid var(--yellow); padding: 1.75rem 1.5rem; background: var(--bg-2, transparent); outline: none; }
.form-done h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 400; margin: 0 0 .75rem; }
.form-done p { margin: 0 0 1.25rem; color: var(--fg); max-width: 34rem; }
.form-done .form-done-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 0; }
.form-again { background: none; border: 0; color: var(--fg); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; padding: 0 .25rem; }
.form-status.err { font-size: 1rem; }

.cs-quote { margin: 1.75rem 0 0; padding-left: 1.5rem; border-left: 4px solid var(--yellow); max-width: 40rem; }
.cs-quote blockquote p { font: 500 clamp(1.15rem, 2vw, 1.5rem) var(--display); letter-spacing: -0.02em; line-height: 1.3; text-wrap: balance; }
.cs-quote figcaption { margin-top: .75rem; color: var(--mute); font-size: .95rem; }
.cs-quote figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.quote-sec { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.quote-sec .cs-quote { margin-top: 0; max-width: 52rem; }

/* work cards: static grid, no auto-scroll; proof strip: two labelled static rows */
.ws-track { display: block; overflow: visible; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.ws-list { display: grid; grid-template-columns: 1fr; gap: 2.5rem 1.5rem; animation: none; min-width: 0; }
.ws-card { width: auto; margin-right: 0; }
@media (min-width: 720px) { .ws-list { grid-template-columns: repeat(2, 1fr); gap: 3rem 2rem; } }
@media (min-width: 1100px) { .ws-list { grid-template-columns: repeat(4, 1fr); } }
.proof-rows { display: grid; gap: 1.25rem 3rem; }
.proof-rows dt { font-size: .9rem; color: var(--mute); margin-bottom: .5rem; }
.proof-rows dd { font: 700 clamp(1.05rem, 2vw, 1.4rem)/1.5 var(--display); letter-spacing: -0.015em; }
.proof-rows dd span:not(:last-child)::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 1rem .2rem; background: var(--yellow); }
@media (min-width: 900px) { .proof-rows { grid-template-columns: auto auto; justify-content: space-between; } }
.ws-card .case { line-height: 1.25; }

.proof-label-2 { margin-top: 1.5rem; }
.press-sec { border-top: 1px solid var(--rule); }

/* contact dialog */
.lead-dlg { margin: auto; border: 0; border-top: 4px solid var(--yellow); padding: 0; width: min(640px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; background: var(--bg); color: var(--fg); overscroll-behavior: contain; }
[data-theme="light"] .lead-dlg { box-shadow: 0 0 0 1px var(--rule); }
.lead-dlg::backdrop { background: rgba(0, 0, 0, .72); }
.lead-dlg[open] { animation: lead-in .22s ease-out; }
@keyframes lead-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lead-dlg[open] { animation: none; } }
.lead-open { overflow: hidden; }
.lead-body { padding: clamp(1.5rem, 4vw, 2.5rem); }
.lead-body h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: 0 2rem .5rem 0; }
.lead-lede { color: var(--mute); margin: 0 0 1.5rem; max-width: 32rem; }
.lead-x { position: absolute; top: .75rem; right: .75rem; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; background: none; border: 0; color: var(--fg); cursor: pointer; }
.lead-x svg { width: 1.25rem; height: 1.25rem; }
.lead-x:hover { color: var(--yellow); }
[data-theme="light"] .lead-x:hover { color: var(--fg); text-decoration: underline; }
.lead-dlg .contact-form { gap: 1rem; }
.lead-dlg .contact-form textarea { min-height: 6.5rem; }
@media (min-width: 560px) { .lead-dlg .field-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .lead-dlg { width: 100vw; max-width: 100vw; margin: auto 0 0; max-height: 94dvh; } }
.lead-dlg .form-done { border-left: 0; padding: 0; }
.lead-dlg .form-close { background: none; border: 0; color: var(--fg); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; }
.lead-dlg .form-done h3 { margin-right: 2.25rem; }

.about-body .hi { font-family: 'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', sans-serif; font-weight: 500; }

/* About: values */
.about-body .about-lead { margin-bottom: -.5rem; color: var(--fg); }
.about-values { display: grid; gap: 1.1rem; max-width: 36rem; margin: 0; }
.about-values > div { padding-left: 1.25rem; border-left: 3px solid var(--yellow); }
.about-values dt { font: 700 1.15rem var(--display); letter-spacing: -0.01em; color: var(--fg); }
.about-values dt .hi { font-family: 'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', sans-serif; font-weight: 600; font-size: .95em; letter-spacing: 0; color: var(--mute); margin-left: .25rem; }
.about-values dd { margin: .25rem 0 0; color: var(--mute); font-size: 1.05rem; }

/* What makes it different: list beside a 16:9 image */
@media (min-width: 900px) { .sv-split.diff-split { grid-template-columns: 6fr 5fr; } .sv-split.diff-split figure { order: 2; } }

/* case study video, stills and brand set */
.cs-video { margin: 0; }
.cs-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.cs-video figcaption { margin-top: .6rem; font-size: .85rem; color: var(--mute); }
.cs-section .cs-video { margin-top: 1.5rem; max-width: 46rem; }
.cs-stills { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 1.25rem; }
@media (min-width: 700px) { .cs-stills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-stills .cs-fig { margin: 0; }
.cs-brandset { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin: 1.75rem 0 0; max-width: 46rem; align-items: start; }
.cs-brandset figure { margin: 0; }
.cs-brandset img { width: 100%; height: auto; display: block; }
.cs-brandset figcaption { margin-top: .5rem; font-size: .85rem; color: var(--mute); }
@media (min-width: 700px) {
  .cs-brandset { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .cs-brandset .flyer { grid-row: 1 / span 2; }
}

/* case study hero: video background under a black overlay */
.cs-hero.has-bg { position: relative; display: grid; align-items: end; min-height: clamp(26rem, 64vh, 38rem); overflow: hidden; color: #fff; background: #000; }
.cs-hero.has-bg .cs-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-hero.has-bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.cs-hero.has-bg .wrap { position: relative; z-index: 2; width: 100%; }
.cs-hero.has-bg h1 { color: #fff; }
.cs-hero.has-bg .lede { color: rgba(255, 255, 255, .86); }
.cs-hero.has-bg .cs-back { color: rgba(255, 255, 255, .8); }
.cs-hero.has-bg .cs-back:hover { color: var(--yellow); }
.cs-hero.has-bg .cs-meta { border-top-color: rgba(255, 255, 255, .3); }
.cs-hero.has-bg .cs-meta dt { color: rgba(255, 255, 255, .72); }
.cs-hero.has-bg .cs-meta dd { color: #fff; }
.cs-hero.has-bg .cs-deva { color: rgba(255, 255, 255, .72); }

/* Viraj: paired images (concept and logo, site and visualisation) */
.cs-pair { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); margin: 1.5rem 0; max-width: 46rem; }
@media (min-width: 700px) { .cs-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cs-pair figure { margin: 0; }
.cs-pair .fr { aspect-ratio: 16 / 9; overflow: hidden; display: grid; place-items: center; background: #000; }
.cs-pair .fr img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-pair .fr.navy { background: #0A1128; }
.cs-pair .fr.navy img { width: 82%; height: auto; object-fit: contain; }
.cs-pair figcaption { margin-top: .5rem; font-size: .9rem; opacity: .75; }