/* GRUworks prototype. Board 3, Petrol Night. Tokens and roles: see ../../../DESIGN.md */

/* Oak Sans (SIL OFL 1.1), the GRUworks typeface (Sudharshanan, 31 Oct). It has no ₹ (Inter, loaded for ₹ only) and no Devanagari. */
@font-face { font-family: 'Oak Sans'; src: url(../fonts/OakSans-Regular.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Oak Sans'; src: url(../fonts/OakSans-Medium.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Oak Sans'; src: url(../fonts/OakSans-SemiBold.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Oak Sans'; src: url(../fonts/OakSans-Bold.woff2) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  --night: #0B1A1F;
  --raised: #142029;
  --rule: #273640;
  --petrol: #0E4D5E;
  --text: #E8EFEF;
  --muted: #9BB0B3;
  --rose: #F49AC1;
  --rose-hover: #E07BA6;
  --on-rose: #0B1A1F;

  --paper: #F5F7F6;
  --ink: #0F2027;
  --ink-muted: #55666B;
  --paper-rule: #D3DCDB;
  --rose-deep: #B8456F;
  --rose-deep-hover: #9C3A5E;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1200px;
  --r-card: 16px;
  --r-panel: 24px;
  --sec-pad: clamp(64px, 8vw, 112px);

  --fs-display: clamp(2.5rem, 1.1rem + 4.6vw, 5rem);
  --fs-h2: clamp(1.875rem, 1.2rem + 2.4vw, 3rem);
  --fs-h3: 1.375rem;
  --fs-lede: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.8125rem;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 84px;
  scroll-padding-bottom: 96px;
  background: var(--night);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: 'Oak Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.deva { font-family: 'Noto Sans Devanagari', 'Oak Sans', sans-serif; }
.num { font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.paper :focus-visible { outline-color: var(--rose-deep); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--rose); color: var(--on-rose); padding: 10px 16px; border-radius: 999px;
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 2; }

/* Type by role */
.display { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; }
.h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.02em; font-weight: 700; text-wrap: balance; }
.h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; }
.lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--muted); max-width: 62ch; text-wrap: pretty; }
.small { font-size: var(--fs-small); }
.muted { color: var(--muted); }
.paper .lede, .paper .muted { color: var(--ink-muted); }

/* Buttons: one filled action per unit, the second as an outline */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: center;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 120ms var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--rose); color: var(--on-rose); }
.btn-primary:hover { background: var(--rose-hover); }
.btn-ghost { border: 1px solid var(--muted); color: var(--text); }
.btn-ghost:hover { border-color: var(--text); background: rgba(232, 239, 239, 0.08); }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 0.9375rem; }
.paper .btn-primary { background: var(--rose-deep); color: #fff; }
.paper .btn-primary:hover { background: var(--rose-deep-hover); }
.paper .btn-ghost { border-color: var(--ink-muted); color: var(--ink); }
.paper .btn-ghost:hover { border-color: var(--ink); background: rgba(15, 32, 39, 0.06); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.textlink { color: var(--text); text-decoration: underline; text-decoration-color: var(--rose); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.textlink:hover { color: var(--rose); }
.paper .textlink { color: var(--ink); text-decoration-color: var(--rose-deep); }

/* Live marker: rose means live */
.live {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 16px 8px 14px; border-radius: 999px;
  background: var(--raised); border: 1px solid var(--rule);
  font-size: 0.9375rem; line-height: 1.35;
}
.live strong { font-weight: 600; }
.live-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rose); }
.live-dot::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--rose); opacity: 0;
}
.motion-ok .live-dot::after { animation: pulse 2.4s var(--ease-out) infinite; }
.motion-reduce .live-dot::after, .motion-paused .live-dot::after { opacity: 0.35; }
@keyframes pulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  80%, 100% { transform: scale(2.3); opacity: 0; }
}
.paper .live { background: #F8E4EB; border-color: #EBC9D6; color: var(--ink); }
.paper .live-dot, .paper .live-dot::after { background: var(--rose-deep); border-color: var(--rose-deep); }
.paper .live-dot::after { background: none; }

/* Header */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 26, 31, 0.78);
  -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease-out);
}
.site-head.is-scrolled { border-bottom-color: var(--rule); }
.head-row { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.wordmark { display: inline-flex; align-items: center; text-decoration: none; line-height: 1; flex: none; }
.wordmark img { height: 22px; width: auto; }
.site-foot .wordmark img { height: 26px; }
.nav { display: flex; gap: 4px; margin-left: 8px; }
.nav a {
  padding: 8px 12px; border-radius: 999px; text-decoration: none; color: var(--muted);
  font-size: 0.9375rem; font-weight: 500; transition: color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.nav a:hover { color: var(--text); background: rgba(232, 239, 239, 0.06); }
.nav a[aria-current='page'] { color: var(--text); }
.head-tools { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.menu-btn {
  display: none; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rule);
  font-weight: 600; font-size: 0.9375rem;
}
.menu-btn:hover { border-color: var(--muted); }
.menu { border-top: 1px solid var(--rule); background: var(--night); }
.menu[hidden] { display: none; }
.menu .wrap { display: grid; gap: 4px; padding-top: 12px; padding-bottom: 20px; }
.menu a:not(.btn) { padding: 12px 0; text-decoration: none; font-size: 1.125rem; font-weight: 500; border-bottom: 1px solid var(--rule); }
.menu .btn { margin-top: 12px; }

/* Market switch (Board 3: the selected segment is light) */
.mswitch { display: inline-flex; justify-self: start; align-self: start; padding: 3px; border-radius: 999px; border: 1px solid var(--rule); background: var(--raised); flex: none; }
.mswitch button {
  min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
  white-space: nowrap;
}
.mswitch button:hover { color: var(--text); }
.mswitch button[aria-pressed='true'] { background: var(--text); color: var(--night); }
.paper .mswitch { background: #fff; border-color: var(--paper-rule); }
.paper .mswitch button { color: var(--ink-muted); }
.paper .mswitch button[aria-pressed='true'] { background: var(--petrol); color: #fff; }

@media (max-width: 960px) {
  .nav, .head-cta { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
  .head-row { gap: 12px; }
  .head-tools { gap: 8px; }
}
@media (max-width: 520px) {
  .head-row { gap: 10px; }
  .head-tools { gap: 6px; }
  .site-head .wordmark img { height: 18px; }
}
/* Narrow phones: the Dhruva symbol alone (the left of the lockup) holds the header. */
@media (max-width: 384px) {
  .mswitch button { padding: 0 9px; }
  .site-head .wordmark img { width: 24px; height: 24px; object-fit: cover; object-position: left center; }
}

/* Sections */
.sec { padding: var(--sec-pad) 0; position: relative; }
.sec-head { max-width: 780px; display: grid; gap: 20px; margin-bottom: clamp(36px, 5vw, 64px); }
.sec + .sec { border-top: 1px solid rgba(39, 54, 64, 0.6); }
.paper { background: var(--paper); color: var(--ink); color-scheme: light; }
.sec.paper, .sec + .sec.paper, .sec.paper + .sec { border-top: 0; }

/* Hero */
.hero {
  position: relative; overflow: clip;
  padding: clamp(40px, 7vw, 96px) 0 clamp(64px, 8vw, 112px);
  min-height: min(880px, calc(100svh - 64px));
  display: flex; align-items: center;
}
.hero-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-sky::before {
  content: ''; position: absolute; inset: -10%;
  background:
    radial-gradient(48% 42% at 80% 14%, rgba(14, 77, 94, 0.78), transparent 72%),
    radial-gradient(38% 36% at 8% 96%, rgba(14, 77, 94, 0.42), transparent 70%);
}
.motion-ok .hero-sky::before { animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.78; transform: scale(1.04); } }
.stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; width: 100%; }
.hero-copy { display: grid; gap: 24px; align-content: start; }
.hero-copy .lede { color: #C3D2D4; }
/* The welcome is the headline; the promise follows it (Sudharshanan, 31 Oct). */
.hello { display: block; }
.hook-line { display: block; margin-top: 0.3em; font-size: 0.5em; line-height: 1.12; letter-spacing: -0.02em; font-weight: 600; color: #C3D2D4; }
/* Back to home, on every inner page */
.backbar { position: relative; z-index: 1; margin-bottom: clamp(16px, 3vw, 32px); }
.page-hero:has(.backbar) { padding-top: clamp(8px, 2vw, 32px); }
.back-home { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--muted); text-decoration: none; font-size: var(--fs-small); font-weight: 500; transition: color 200ms var(--ease-out); }
.back-home:hover { color: var(--text); }
.back-home svg { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .back-home:hover svg { transform: translateX(-3px); } }
.hero-price { font-size: 1.0625rem; color: var(--muted); }
.hero-price strong { color: var(--text); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; }
.hero-meta { display: grid; gap: 16px; justify-items: start; }
.faces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.face {
  display: grid; gap: 10px; text-decoration: none; color: var(--text);
  border-radius: var(--r-card); padding: 8px 8px 14px;
  background: rgba(20, 32, 41, 0.72); border: 1px solid var(--rule);
  transition: border-color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.face:nth-child(1), .face:nth-child(3) { margin-top: 48px; }
.face:hover { border-color: var(--muted); transform: translateY(-3px); }
.face-photo { aspect-ratio: 3 / 4; overflow: clip; border-radius: 10px; background: #dfe6e6; position: relative; display: block; }
.face-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .face:hover .face-photo img { transform: scale(1.04); } }
/* One treatment for every portrait: the studio-white backgrounds settle into the night, the faces stay true. */
.face-photo::after, .lead-photo::after, .match-photo::after, .lead-hero-photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; border-radius: inherit;
  background:
    radial-gradient(120% 95% at 50% 32%, rgba(11, 26, 31, 0) 52%, rgba(11, 26, 31, 0.34) 100%),
    linear-gradient(180deg, rgba(11, 26, 31, 0) 68%, rgba(11, 26, 31, 0.26) 100%);
}
.face-name { font-weight: 600; font-size: 0.9375rem; line-height: 1.3; padding: 0 4px; }
.face-door { font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; padding: 0 4px; }
.pause-btn {
  position: absolute; left: var(--gutter); bottom: 20px; z-index: 3;
  font-size: var(--fs-xs); color: var(--muted); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rule);
  background: rgba(11, 26, 31, 0.6); min-height: 32px;
}
.pause-btn:hover { color: var(--text); border-color: var(--muted); }
.motion-reduce .pause-btn { display: none; }
/* Wider screens: the hero runs past the fold on most laptops, so the pause sits at the top, in the first view,
   on the content's left edge rather than loose in the margin. */
@media (min-width: 861px) { .pause-btn { top: 20px; bottom: auto; left: max(var(--gutter), calc((100% - var(--maxw)) / 2)); } }

@media (max-width: 860px) {
  .hero { min-height: 0; }
  .hero-grid { grid-template-columns: 1fr; }
  .faces { gap: 10px; }
  .face:nth-child(1), .face:nth-child(3) { margin-top: 0; }
  .face { padding: 6px 6px 10px; }
  .face-door { font-size: 0.75rem; }
}
@media (max-width: 560px) {
  .faces { grid-template-columns: 1fr; gap: 8px; }
  .face { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center; padding: 8px 12px 8px 8px; }
  .face-photo { grid-row: 1 / span 2; width: 56px; aspect-ratio: 1 / 1; border-radius: 50%; }
  .face-name { align-self: end; font-size: 0.9375rem; padding: 0; }
  .face-door { align-self: start; font-size: var(--fs-xs); padding: 0; }
}

/* Hero arrival: the one orchestrated moment, pure CSS so it never depends on script */
.motion-ok [data-seq] { animation: rise 700ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Home path (North Star) */
.has-path { position: relative; }
.np { position: absolute; left: 0; top: 0; width: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.np-track { fill: none; stroke: var(--rule); stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.np-line { fill: none; stroke: rgba(232, 239, 239, 0.62); stroke-width: 1.5; stroke-linecap: round; }
.np-node { fill: var(--night); stroke: var(--rule); stroke-width: 1.5; transition: fill 300ms var(--ease-out), stroke 300ms var(--ease-out); }
.np-node.is-passed { fill: var(--text); stroke: var(--text); }
.np-node.is-here { fill: var(--night); stroke: var(--rose); stroke-width: 2; }
.np-head { fill: var(--rose); }
.np-head-glow { fill: url(#npGlow); }
.np-star { fill: var(--text); }
.np-star-glow { fill: url(#npStarGlow); }
.motion-ok .np-star-glow { animation: starbreathe 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes starbreathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.86); } }
@media (max-width: 720px) {
  .has-path .wrap { padding-left: 32px; }
}

/* Who we serve */
.serve-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.serve-quote { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.vignettes { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.vignettes li { padding: 20px 0; border-bottom: 1px solid var(--rule); font-size: 1.1875rem; line-height: 1.45; display: grid; grid-template-columns: 20px 1fr; gap: 12px; }
.vignettes li::before { content: ''; width: 8px; height: 8px; margin-top: 10px; border-radius: 50%; border: 1.5px solid var(--muted); }
.vig-label { font-size: var(--fs-small); color: var(--muted); margin-bottom: 12px; }
.reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: clamp(48px, 6vw, 80px); }
.reason { padding-top: 20px; border-top: 2px solid var(--text); display: grid; gap: 8px; }
.reason p { color: var(--muted); }
@media (max-width: 860px) {
  .serve-grid, .reasons { grid-template-columns: 1fr; }
}

/* Glow that follows the cursor (fine pointers only) */
.glow { position: relative; isolation: isolate; }
.glow::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(244, 154, 193, 0.16), transparent 45%);
  opacity: 0; transition: opacity 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .glow:hover::before { opacity: 1; } }

/* Find your lead */
.journey {
  border-radius: var(--r-panel); border: 1px solid var(--rule);
  background: linear-gradient(180deg, rgba(14, 77, 94, 0.28), rgba(20, 32, 41, 0.9) 42%);
  padding: clamp(20px, 4vw, 48px);
}
.journey-top { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: end; justify-content: space-between; margin-bottom: 28px; }
.journey-top .sec-head { margin: 0; gap: 12px; }
.link-skip { color: var(--muted); font-size: var(--fs-small); text-underline-offset: 4px; }
.link-skip:hover { color: var(--text); }
.jprogress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 32px; }
.jprogress button {
  width: 100%; text-align: left; display: grid; gap: 8px; font-size: var(--fs-xs); color: var(--muted);
  padding: 0 0 4px; min-height: 32px; cursor: default;
}
.jprogress button::before { content: ''; height: 3px; border-radius: 3px; background: var(--rule); transition: background-color 360ms var(--ease-out); }
.jprogress .is-done button { cursor: pointer; color: var(--text); }
.jprogress .is-done button::before { background: var(--text); }
.jprogress [aria-current='step'] { color: var(--text); font-weight: 600; }
.jprogress [aria-current='step']::before { background: var(--rose); }
@media (max-width: 560px) { .jprogress .jp-label { display: none; } .jprogress button { min-height: 24px; } }

.jsteps { position: relative; }
.js .jstep:not(.is-active) { display: none; }
.no-js .jstep + .jstep { margin-top: 48px; }
.jstep-head { display: grid; gap: 6px; margin-bottom: 24px; }
.jstep-head h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
.jstep-head h3:focus { outline: none; }
.jstep-head p { color: var(--muted); }
.opts { display: grid; gap: 12px; }
.opts-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opts-stages { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.opts-needs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opt {
  text-align: left; display: grid; align-content: start; gap: 6px;
  padding: 20px 52px 20px 20px; border-radius: var(--r-card);
  border: 1px solid var(--rule); background: rgba(11, 26, 31, 0.66);
  min-height: 112px; position: relative;
  transition: border-color 200ms var(--ease-out), background-color 300ms var(--ease-out), transform 200ms var(--ease-out);
}
.opt:hover { border-color: var(--muted); transform: translateY(-2px); }
.opt-title { font-weight: 600; font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.01em; }
.opt-sub { font-size: 0.9375rem; color: var(--muted); line-height: 1.45; }
.opt::after {
  content: ''; position: absolute; top: 18px; right: 18px; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--rule); transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.opt[aria-pressed='true'] { border-color: var(--rose); background: var(--petrol); }
.opt[aria-pressed='true'] .opt-sub { color: var(--text); }
.opt[aria-pressed='true']::after {
  border-color: var(--rose); background: var(--rose) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%230B1A1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.opts-mini { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.chip {
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--rule);
  font-size: 0.9375rem; font-weight: 500; color: var(--text); background: rgba(11, 26, 31, 0.66);
  transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.chip:hover { border-color: var(--muted); }
.chip[aria-pressed='true'] { background: var(--rose); color: var(--on-rose); border-color: var(--rose); }
.opt[hidden] { display: none; }
.jnav { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.jnav .spacer { flex: 1; }
.btn-quiet { min-height: 44px; padding: 0 6px; color: var(--muted); font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rule); }
.btn-quiet:hover { color: var(--text); text-decoration-color: var(--muted); }
.needs-more { margin-top: 14px; }
@media (max-width: 960px) { .opts-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .opts-doors, .opts-needs { grid-template-columns: 1fr; } .opt { min-height: 0; } }
@media (max-width: 420px) { .opts-stages .opt { padding: 16px 40px 16px 14px; } .opts-stages .opt::after { top: 14px; right: 12px; } .opts-stages .opt-title { font-size: 1rem; } .opts-stages .opt-sub { font-size: 0.875rem; } }

/* Result */
.result { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 32px); align-items: start; }
.match {
  border-radius: var(--r-card); background: var(--petrol); padding: 12px 12px 24px; display: grid; gap: 16px; overflow: clip;
}
.match-photo { aspect-ratio: 16 / 10; border-radius: 10px; overflow: clip; background: #dfe6e6; position: relative; }
.match-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.match-body { display: grid; gap: 8px; padding: 0 12px; }
.match-kicker { font-size: var(--fs-small); color: var(--text); opacity: 0.85; }
.match-name { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.05; }
.match-name .wd { display: inline-block; white-space: nowrap; }
.match-name .ch { display: inline-block; white-space: pre; }
.match-title { font-weight: 500; }
.match-line { font-size: 1.1875rem; line-height: 1.4; margin-top: 8px; padding-left: 14px; border-left: 2px solid rgba(232, 239, 239, 0.4); }
.match-why { font-size: 0.9375rem; line-height: 1.5; }
.match-act { margin-top: 12px; }
/* Phones: the button follows the name and title, so the match and the way to book share the first view
   and stay clear of the floating Ask button. The quote and the reason follow. */
@media (max-width: 560px) {
  .match-body > * { order: 2; }
  .match-kicker, .match-trio, .match-name, .match-title { order: 0; }
  .match-act { order: 1; margin: 4px 0 6px; }
  .match-act .btn { width: 100%; min-height: 52px; padding: 10px 20px; line-height: 1.25; }
}
.match-trio { display: flex; gap: 8px; }
.match-trio img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--night); background: #dfe6e6; }
.side { display: grid; gap: 16px; }
.panel { border-radius: var(--r-card); background: var(--raised); border: 1px solid var(--rule); padding: clamp(18px, 2.4vw, 28px); display: grid; gap: 12px; }
.panel-label { font-size: var(--fs-small); color: var(--muted); }
.fit-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.fit-name { font-size: 1.5rem; letter-spacing: -0.02em; font-weight: 600; }
.fit-price { font-size: 1.25rem; font-weight: 600; }
.brief-list { display: grid; gap: 0; margin: 0; }
.brief-list div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 0.9375rem; }
.brief-list div:last-child { border-bottom: 0; }
.brief-list dt { color: var(--muted); }
.brief-list dd { margin: 0; font-weight: 500; }
@media (max-width: 860px) { .result { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .brief-list div { grid-template-columns: 1fr; gap: 2px; } }

/* Leads */
.lead-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.lead-card {
  border-radius: var(--r-card); border: 1px solid var(--rule); background: var(--raised);
  overflow: clip; position: relative; display: grid; grid-template-rows: auto 1fr;
  transition: border-color 200ms var(--ease-out);
}
.lead-card:hover { border-color: var(--muted); }
.lead-photo { grid-area: 1 / 1 / 2 / 2; aspect-ratio: 1 / 1; overflow: clip; background: #dfe6e6; position: relative; }
.lead-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .lead-card:hover .lead-photo img { transform: scale(1.03); } }
.lead-body { grid-area: 2 / 1 / 3 / 2; padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.lead-name { font-size: 1.375rem; letter-spacing: -0.015em; line-height: 1.2; }
.lead-title { color: var(--muted); font-size: var(--fs-small); }
.lead-door { font-size: 0.9375rem; line-height: 1.45; }
.lead-line { color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
/* The feet sit on one line across the three cards, whatever the length of the copy above. */
.lead-foot { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: auto; padding-top: 12px; }
.turn-btn {
  min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--muted);
  font-weight: 600; font-size: 0.9375rem;
}
.turn-btn:hover { border-color: var(--text); background: rgba(232, 239, 239, 0.08); }
/* The back shares the card's grid area, so the card is always tall enough for it. */
.lead-back {
  grid-area: 1 / 1 / 3 / 2; position: relative; z-index: 3;
  background: linear-gradient(180deg, var(--petrol), #0A3C4A);
  color: var(--text); padding: clamp(20px, 2.6vw, 28px);
  display: flex; flex-direction: column; gap: 14px;
  transform: translateY(101%); visibility: hidden;
  transition: transform 420ms var(--ease-io), visibility 0s linear 420ms;
}
.lead-card.is-turned .lead-back { transform: none; visibility: visible; transition: transform 420ms var(--ease-io), visibility 0s; }
.lead-back h4 { font-size: 1.125rem; letter-spacing: -0.01em; }
.lead-back ul { display: grid; gap: 10px; }
.lead-back li { font-size: 0.9375rem; line-height: 1.5; padding-left: 16px; position: relative; }
.lead-back li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--text); }
.lead-back .game { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(232, 239, 239, 0.28); display: grid; gap: 4px; }
.lead-back .game span { font-size: var(--fs-small); }
.lead-back .game strong { font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.lead-back .deva-mark { font-size: 2.25rem; line-height: 1.2; font-weight: 500; }
.lead-back-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.lead-back .turn-btn { border-color: rgba(232, 239, 239, 0.6); }
@media (max-width: 960px) { .lead-grid { grid-template-columns: 1fr; max-width: 560px; } .lead-photo { aspect-ratio: 4 / 3; } }

/* How we work */
.moves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-bottom: clamp(48px, 6vw, 80px); }
.move { display: grid; gap: 10px; align-content: start; }
.move-word { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); letter-spacing: -0.035em; line-height: 1; font-weight: 600; }
.move p { color: var(--muted); }
.move .move-word { color: var(--text); }
.flow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; counter-reset: flow; position: relative; }
.flow li { position: relative; display: grid; gap: 8px; align-content: start; padding-top: 44px; counter-increment: flow; }
.flow li::before {
  content: counter(flow); position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--night); border: 1.5px solid var(--muted); z-index: 1;
}
.flow li::after { content: ''; position: absolute; top: 16px; left: 32px; right: -12px; height: 1.5px; background: var(--rule); }
.flow li:last-child::after { display: none; }
.flow h3 { font-size: 1rem; line-height: 1.3; letter-spacing: -0.005em; }
.flow p { font-size: var(--fs-small); color: var(--muted); line-height: 1.5; }
.flow .is-you::before { border-color: var(--rose); color: var(--rose); }
/* The seven steps draw in order as the section arrives: the line runs on, each ring lights as it is reached.
   The steps' words are never hidden; only the connecting line waits. */
.flow li::before { transition: border-color 360ms var(--ease-out) calc(var(--k, 0) * 150ms + 260ms), background-color 360ms var(--ease-out) calc(var(--k, 0) * 150ms + 260ms); }
.motion-ok .flow[data-draw] li::after { transform: scaleX(0); transform-origin: left center; transition: transform 520ms var(--ease-io) calc(var(--k, 0) * 150ms + 300ms); }
.motion-ok .flow[data-draw].is-drawn li::after { transform: none; }
.flow[data-draw].is-drawn li::before, .motion-reduce .flow[data-draw] li::before, .motion-paused .flow[data-draw] li::before { border-color: var(--text); background: var(--raised); }
.rhythm { margin-top: clamp(40px, 5vw, 64px); display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; padding-top: 28px; border-top: 1px solid var(--rule); }
.rhythm p { font-size: 1.125rem; max-width: 62ch; }
@media (max-width: 1080px) {
  .flow { grid-template-columns: 1fr; gap: 0; }
  .flow li { padding: 0 0 28px 52px; }
  .flow li::after { top: 32px; bottom: 0; left: 15.25px; right: auto; width: 1.5px; height: auto; }
  .motion-ok .flow[data-draw] li::after { transform: scaleY(0); transform-origin: center top; }
}
@media (max-width: 860px) { .moves { grid-template-columns: 1fr; } }

/* Price, on paper */
.price-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.price-main { display: grid; gap: 20px; }
.price-big { display: grid; gap: 4px; }
.price-big .from { font-size: var(--fs-small); color: var(--ink-muted); }
.price-main .live { justify-self: start; }
/* Prices roll on the market switch; inline figures need a box to move. */
.js [data-price], .js [data-price-note] { display: inline-block; }
.price-amount { font-size: clamp(3rem, 1.8rem + 4.6vw, 5.5rem); letter-spacing: -0.045em; line-height: 0.95; font-weight: 600; font-variant-numeric: tabular-nums; }
.price-note { font-size: 1.125rem; color: var(--ink-muted); }
.inout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
.inout h3 { font-size: 1rem; margin-bottom: 8px; }
.inout li { font-size: 0.9375rem; line-height: 1.5; padding: 6px 0; border-bottom: 1px solid var(--paper-rule); color: var(--ink); }
.inout li:last-child { border-bottom: 0; }
.audit-list { border-top: 1px solid var(--ink); }
.audit-list li { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 18px 0; border-bottom: 1px solid var(--paper-rule); align-items: baseline; }
.audit-list .a-name { font-weight: 600; font-size: 1.25rem; letter-spacing: -0.015em; }
.audit-list .a-price { font-weight: 600; font-size: 1.25rem; font-variant-numeric: tabular-nums; text-align: right; }
.audit-list .a-note, .tier-note { font-size: var(--fs-small); font-weight: 500; color: var(--ink-muted); }
.tier-note { color: var(--muted); margin-top: -8px; }
.tier.is-start .tier-note { color: var(--text); opacity: 0.8; }
.audit-list .a-q { grid-column: 1 / -1; color: var(--ink-muted); font-size: 0.9375rem; }
.price-side { display: grid; gap: 20px; }
@media (max-width: 860px) { .price-grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .inout { grid-template-columns: 1fr; } }

/* Showcase placeholders */
.logo-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.ph-tile {
  min-height: 84px; border-radius: 12px; border: 1.5px dashed var(--rule); display: grid; place-items: center; text-align: center;
  color: var(--muted); font-size: var(--fs-xs); padding: 8px; line-height: 1.35;
}
.case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.case-ph { border-radius: var(--r-card); border: 1.5px dashed var(--rule); padding: clamp(20px, 3vw, 32px); display: grid; gap: 18px; }
.case-ph .ph-flag { justify-self: start; font-size: var(--fs-xs); font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--raised); border: 1px solid var(--rule); color: var(--muted); }
.case-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.case-rows h4 { font-size: var(--fs-small); color: var(--muted); font-weight: 500; margin-bottom: 6px; }
.case-rows p { font-size: 0.9375rem; color: var(--muted); }
@media (max-width: 860px) { .logo-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .case-grid, .case-rows { grid-template-columns: 1fr; } }
/* Phones: one row of logo places and one case place say the same thing in a third of the scroll. */
@media (max-width: 560px) { .logo-strip .ph-tile:nth-child(n+4), .case-grid .case-ph:nth-child(n+2) { display: none; } }
/* Case studies (Sudharshanan, 2 Nov 2026): a case study card shows only once it is published.
   The one switch is the card's data-case-study: "placeholder" stays hidden, "published" shows.
   The grid and the spacing around it follow the cards, so a hidden card leaves no gap. */
[data-case-study="placeholder"] { display: none; }
.case-grid:not(:has(> [data-case-study="published"])) { display: none; }
.logo-marquee:has(+ .case-grid) { margin-bottom: 0; }
.logo-marquee + .case-grid { margin-top: 24px; }
.moves:has(+ [data-case-study="placeholder"]) { margin-bottom: 0; }

/* The conversation */
.talk { text-align: center; display: grid; justify-items: center; gap: 24px; }
.talk .lede { margin: 0 auto; }
.talk-faces { display: flex; }
.talk-faces img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--night); background: #dfe6e6; }
.talk-faces img + img { margin-left: -14px; }
.talk .actions { justify-content: center; }
.talk-note { color: var(--muted); font-size: 0.9375rem; }
/* The close: the path arrives under the same sky it left. */
.talk-sky { overflow: clip; }
.talk-sky .hero-sky::before {
  background:
    radial-gradient(44% 70% at 50% 108%, rgba(14, 77, 94, 0.72), transparent 72%),
    radial-gradient(30% 40% at 50% 20%, rgba(14, 77, 94, 0.28), transparent 70%);
}
.talk-sky .talk-faces img { box-shadow: 0 0 0 1px rgba(232, 239, 239, 0.12); }

/* Inner page hero (leads, audits, connect) */
.page-hero { padding: clamp(40px, 7vw, 96px) 0 clamp(56px, 7vw, 96px); position: relative; overflow: clip; }
.page-hero .hero-sky::before {
  background: radial-gradient(50% 60% at 85% 10%, rgba(14, 77, 94, 0.7), transparent 72%);
}
.lead-hero { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.lead-hero-photo { border-radius: var(--r-panel); overflow: clip; aspect-ratio: 4 / 5; background: #dfe6e6; border: 1px solid var(--rule); position: relative; }
.lead-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lead-hero-copy { display: grid; gap: 20px; align-content: center; }
.door-tag { font-size: var(--fs-small); color: var(--muted); }
.voice { font-size: clamp(1.375rem, 1rem + 1.2vw, 1.875rem); line-height: 1.3; letter-spacing: -0.015em; padding-left: 18px; border-left: 2px solid rgba(232, 239, 239, 0.4); max-width: 30ch; }
.page-title-sub { font-size: 1.125rem; color: var(--muted); }
@media (max-width: 860px) { .lead-hero { grid-template-columns: 1fr; } .lead-hero-photo { aspect-ratio: 4 / 3; max-width: 560px; } }

.beats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.beat { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 1px solid var(--rule); }
.beat-num { font-size: clamp(2.75rem, 1.8rem + 3vw, 4.25rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.beat-num small { font-size: 0.36em; letter-spacing: -0.01em; font-weight: 500; color: var(--muted); margin-left: 8px; }
.beat-num small.pre { margin-left: 0; margin-right: 8px; }
.beat p { color: var(--muted); }
.beat .beat-num { color: var(--text); }
@media (max-width: 860px) { .beats { grid-template-columns: 1fr; } }

.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
.list-rule li { padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 1.0625rem; line-height: 1.5; }
.list-rule li:first-child { border-top: 1px solid var(--rule); }
.game-panel { background: linear-gradient(180deg, var(--petrol), #0A3C4A); border-radius: var(--r-panel); padding: clamp(24px, 4vw, 48px); display: grid; gap: 16px; align-content: start; }
.game-panel .panel-label { color: var(--text); opacity: 0.85; font-size: var(--fs-small); }
.game-quote { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; text-wrap: balance; }
.game-panel .deva-mark { font-size: 3rem; line-height: 1.2; font-weight: 500; margin-top: 8px; }

.price-strip { border-radius: var(--r-panel); background: var(--raised); border: 1px solid var(--rule); padding: clamp(22px, 3.4vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: center; }
.price-strip .price-amount { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); }
.price-strip .price-note { color: var(--muted); }
@media (max-width: 720px) { .price-strip { grid-template-columns: 1fr; } }

.others { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.other { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; padding: 14px; border-radius: var(--r-card); border: 1px solid var(--rule); text-decoration: none; transition: border-color 200ms var(--ease-out); }
.other:hover { border-color: var(--muted); }
.other img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: #dfe6e6; }
.other strong { display: block; font-size: 1.0625rem; color: var(--text); }
.other span { font-size: var(--fs-small); color: var(--muted); }
@media (max-width: 720px) { .others { grid-template-columns: 1fr; } }

/* Audits page */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.tier { border-radius: var(--r-card); border: 1px solid var(--rule); background: var(--raised); padding: clamp(20px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 16px; position: relative; }
/* The suggested tier is a petrol field; rose stays on its button, the place to act. */
.tier.is-start { background: var(--petrol); border-color: rgba(232, 239, 239, 0.3); }
.tier.is-start .muted, .tier.is-start .tier-q { color: var(--text); }
.tier-flag { position: absolute; top: -13px; left: 20px; font-size: var(--fs-xs); font-weight: 600; background: var(--text); color: var(--night); padding: 4px 12px; border-radius: 999px; }
.tier-name { font-size: 1.625rem; letter-spacing: -0.02em; }
.tier-price { font-size: clamp(2.25rem, 1.7rem + 1.8vw, 3rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.tier-q { font-size: 1.0625rem; line-height: 1.45; color: var(--muted); min-height: 3em; }
.tier dl { display: grid; gap: 0; margin: 0; }
.tier dl > div { padding: 12px 0; border-top: 1px solid rgba(155, 176, 179, 0.25); display: grid; gap: 2px; }
.tier dt { font-size: var(--fs-small); color: var(--muted); }
.tier.is-start dt { color: var(--text); opacity: 0.8; }
.tier dd { margin: 0; font-size: 0.9375rem; line-height: 1.5; }
.tier .btn { margin-top: auto; }
.areas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.areas span { font-size: var(--fs-xs); padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(155, 176, 179, 0.4); }
@media (max-width: 960px) { .tiers { grid-template-columns: 1fr; max-width: 560px; gap: 28px; } .tier-q { min-height: 0; } }
.waive { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; color: var(--muted); }
.waive .live { color: var(--text); }
.steps-run { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: flow; }
.steps-run li { counter-increment: flow; display: grid; gap: 8px; padding-top: 44px; position: relative; }
.steps-run li::before { content: counter(flow); position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 600; border: 1.5px solid var(--muted); }
.steps-run h3 { font-size: 1rem; }
.steps-run p { font-size: var(--fs-small); color: var(--muted); }
@media (max-width: 960px) { .steps-run { grid-template-columns: 1fr; } .steps-run li { padding: 0 0 20px 52px; } }

/* Connect page */
.connect-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 960px) { .connect-grid { grid-template-columns: 1fr; } }
.form { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; align-content: start; }
.field label, .field legend { font-weight: 600; font-size: 0.9375rem; }
.field .hint { font-size: var(--fs-small); color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--rule);
  background: var(--raised); color: var(--text); font-size: 1rem; line-height: 1.45;
  transition: border-color 200ms var(--ease-out);
}
.field textarea { min-height: 112px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--rose); outline: none; box-shadow: 0 0 0 3px rgba(244, 154, 193, 0.25); }
.field [aria-invalid='true'] { border-color: var(--rose); border-width: 2px; }
.check input[aria-invalid='true'] { outline: 2px solid var(--rose); outline-offset: 2px; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%239BB0B3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; padding-right: 40px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.pick label { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--rule); background: var(--raised); cursor: pointer; font-weight: 500; transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out); }
.pick label:hover { border-color: var(--muted); }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #dfe6e6; }
.pick .any { width: 44px; height: 44px; border-radius: 50%; border: 1.5px dashed var(--muted); display: grid; place-items: center; font-size: 1.25rem; color: var(--muted); }
.pick label small { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 400; }
.pick input:checked + label { border-color: var(--rose); background: var(--petrol); }
.pick input:checked + label small { color: var(--text); }
.pick input:focus-visible + label { outline: 2px solid var(--rose); outline-offset: 3px; }
@media (max-width: 520px) { .pick { grid-template-columns: 1fr; } }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .row-2 { grid-template-columns: 1fr; } }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 0.9375rem; line-height: 1.5; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--rose); }
.form-note {
  border-radius: var(--r-card); border: 1px solid var(--rose); background: rgba(244, 154, 193, 0.08); padding: 18px 20px; display: grid; gap: 6px;
}
.form-note[hidden] { display: none; }
.form-note strong { font-size: 1.0625rem; }
.aside { display: grid; gap: 16px; position: sticky; top: 88px; }
@media (max-width: 960px) { .aside { position: static; } }
.next-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 8px 0; font-size: 0.9375rem; color: var(--muted); }
.next-steps li::before { content: ''; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; border: 1.5px solid var(--rule); }
.next-steps li.is-done { color: var(--text); }
.next-steps li.is-done::before { background: var(--text); border-color: var(--text); }
.next-steps li.is-here { color: var(--text); font-weight: 600; }
.next-steps li.is-here::before { border-color: var(--rose); background: var(--rose); }

/* Footer */
.site-foot { border-top: 1px solid var(--rule); padding: clamp(48px, 6vw, 72px) 0 calc(28px + 64px); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(5, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 1180px) { .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-grid > :first-child { grid-column: 1 / -1; } }
.foot-grid p { color: var(--muted); font-size: 0.9375rem; margin-top: 12px; max-width: 36ch; }
.foot-grid h2 { font-size: var(--fs-small); color: var(--muted); font-weight: 500; margin-bottom: 12px; }
.foot-grid li a { display: inline-block; padding: 5px 0; text-decoration: none; font-size: 0.9375rem; }
.foot-grid li a:hover { color: var(--rose); }
.motion-toggle { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rule); font-size: var(--fs-small); color: var(--muted); }
.motion-toggle:hover { color: var(--text); border-color: var(--muted); }
.motion-reduce .foot-grid > div:has(> .motion-toggle) { display: none; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 20px; background: linear-gradient(var(--rule), var(--rule)) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat; font-size: var(--fs-xs); color: var(--muted); }
.proto-mark { padding: 3px 10px; border-radius: 999px; border: 1px dashed var(--rule); }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; } }

/* Chat (front-end mock) */
.chat-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 18px;
  border-radius: 999px; background: var(--raised); border: 1px solid var(--rule); color: var(--text);
  font-weight: 600; font-size: 0.9375rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: border-color 200ms var(--ease-out), transform 120ms var(--ease-out);
}
.chat-fab:hover { border-color: var(--rose); }
.chat-fab:active { transform: scale(0.98); }
.chat-greet {
  position: fixed; right: 16px; bottom: 76px; z-index: 60; width: min(300px, calc(100vw - 32px));
  background: var(--text); color: var(--night); border-radius: 18px 18px 6px 18px; padding: 14px 40px 14px 16px;
  font-size: 0.9375rem; line-height: 1.45; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.chat-greet[hidden] { display: none; }
.chat-greet.is-in { animation: greetIn 320ms var(--ease-out) both; transform-origin: 100% 100%; }
@keyframes greetIn { from { opacity: 0; transform: scale(0.92) translateY(6px); } to { opacity: 1; transform: none; } }
.chat-greet button.x { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%; font-size: 1.125rem; color: var(--night); }
.chat-greet button.open { margin-top: 8px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; min-height: 28px; color: var(--night); }
.chat-panel {
  position: fixed; right: 16px; bottom: 76px; z-index: 61; width: min(400px, calc(100vw - 32px));
  max-height: min(600px, calc(100svh - 100px)); display: flex; flex-direction: column;
  background: var(--raised); border: 1px solid var(--rule); border-radius: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.chat-panel[hidden] { display: none; }
.chat-panel.is-in { animation: greetIn 320ms var(--ease-out) both; transform-origin: 100% 100%; }
.chat-head { display: flex; gap: 12px; align-items: start; padding: 16px 16px 12px 18px; border-bottom: 1px solid var(--rule); }
.chat-head h2 { font-size: 1rem; }
.chat-head p { font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; margin-top: 2px; }
.chat-head .x { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; font-size: 1.25rem; flex: none; color: var(--muted); }
.chat-head .x:hover { color: var(--text); background: rgba(232, 239, 239, 0.08); }
.chat-log { padding: 14px 16px; overflow-y: auto; display: grid; gap: 10px; align-content: start; flex: 1; min-height: 120px; }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 0.9375rem; line-height: 1.5; }
.msg.bot { background: var(--night); border: 1px solid var(--rule); border-bottom-left-radius: 6px; justify-self: start; }
.msg.me { background: var(--petrol); border-bottom-right-radius: 6px; justify-self: end; }
.msg .person { display: inline-block; margin-top: 6px; font-size: var(--fs-small); color: var(--rose); text-decoration: underline; text-underline-offset: 3px; }
.msg a:not(.person) { color: var(--text); text-decoration-color: var(--rose); text-underline-offset: 3px; }
.chat-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.chat-chips button { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--rule); font-size: var(--fs-xs); font-weight: 500; }
.chat-chips button:hover { border-color: var(--rose); }
.nowrap { white-space: nowrap; }
.chat-chips .chat-wa { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--rose); font-size: var(--fs-xs); font-weight: 500; color: var(--text); text-decoration: none; }
.chat-chips .chat-wa:hover { background: rgba(244, 154, 193, 0.12); }
.chat-form { display: flex; gap: 8px; padding: 12px 12px 14px; border-top: 1px solid var(--rule); }
.chat-form input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule); background: var(--night); }
.chat-form input:focus { outline: none; border-color: var(--rose); }
@media (max-width: 520px) { .chat-fab .fab-long { display: none; } }

/* Utility spacing */
.mt-s { margin-top: 12px; }
.mt-m { margin-top: 24px; }
.mt-l { margin-top: 48px; }

/* Leads page: the GRUworks story. The two trails turn; the star holds still. */
.story-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(28px, 5vw, 72px); align-items: center; position: relative; z-index: 1; }
.story-hero .lede { max-width: 36ch; margin-top: 20px; color: #C3D2D4; }
.story-mark { justify-self: center; width: min(340px, 100%); aspect-ratio: 1; max-width: 100%; }
.story-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.story-mark .trail { transform-box: view-box; transform-origin: 50% 50%; }
.motion-ok .story-mark .t1 { animation: gw-turn 48s linear infinite; }
.motion-ok .story-mark .t2 { animation: gw-turn 90s linear infinite; }
@keyframes gw-turn { to { transform: rotate(360deg); } }
@media (max-width: 860px) { .story-hero { grid-template-columns: 1fr; } .story-mark { grid-row: 1; justify-self: start; width: min(128px, 36vw); } }
.chapters { display: grid; }
.chapter { display: grid; grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr); gap: clamp(16px, 4vw, 64px); padding-block: clamp(28px, 4vw, 48px); border-top: 1px solid var(--rule); }
.chapter:last-child { border-bottom: 1px solid var(--rule); }
.ch-head { display: grid; gap: 8px; align-content: start; }
.ch-num { font-size: var(--fs-small); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.ch-title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; text-wrap: balance; }
.ch-body { display: grid; gap: 14px; font-size: 1.125rem; line-height: 1.65; color: #C3D2D4; max-width: 62ch; min-width: 0; }
@media (max-width: 760px) { .chapter { grid-template-columns: 1fr; } }
.holds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hold { margin: 0; background: var(--raised); border: 1px solid var(--rule); border-radius: var(--r-card); padding: 28px; display: grid; gap: 20px; align-content: space-between; position: relative; }
.hold blockquote { margin: 0; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem); line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; }
.hold cite { font-style: normal; font-size: var(--fs-small); color: var(--muted); }
.holds-note { margin-top: 24px; color: var(--muted); max-width: 62ch; }
@media (max-width: 860px) { .holds { grid-template-columns: 1fr; } }

/* Leads page: who walks our path (Nik) */
.walker { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; max-width: 900px; border-radius: var(--r-card); border: 1px solid var(--rule); background: var(--raised); padding: clamp(16px, 2.4vw, 28px); }
.walker-photo { aspect-ratio: 1 / 1; overflow: clip; border-radius: calc(var(--r-card) - 4px); background: #dfe6e6; position: relative; max-width: 100%; }
.walker-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.walker-body { display: grid; gap: 10px; min-width: 0; }
.walker-body p:not(.lead-title) { line-height: 1.55; max-width: 60ch; }
@media (max-width: 720px) { .walker { grid-template-columns: 1fr; } .walker-photo { max-width: 240px; } }

/* "gruniverse": gru underlined in the brand rose (Sudharshanan, 2 Nov) */
.gru-mark { text-decoration-line: underline; text-decoration-color: var(--rose); text-decoration-thickness: .07em; text-underline-offset: .29em; text-decoration-skip-ink: none; }
.hello:has(.gru-mark) + .hook-line { margin-top: .62em; } /* room under the rose underline */

/* client logos (2 Nov, one slow scrolling row on light tiles) */
#work { overflow-x: clip; }
/* the row starts at the content edge, so it never crosses the north-star line on the left; it runs on to the screen edge on the right */
.logo-marquee { display: flex; overflow: hidden; margin: 0 calc(50% - 50vw) 24px 0; }
.logo-track { display: flex; gap: 12px; padding: 0 12px 0 0; margin: 0; list-style: none; flex: none; animation: logo-scroll 70s linear infinite; }
.logo-marquee:hover .logo-track, .logo-marquee:focus-within .logo-track { animation-play-state: paused; }
@keyframes logo-scroll { to { transform: translateX(-100%); } }
.logo-tile { flex: 0 0 188px; height: 100px; display: grid; place-items: center; border-radius: 14px; background: #F5F7F6; }
.logo-tile img { height: var(--h); width: auto; max-width: 84%; object-fit: contain; display: block; }
@media (max-width: 560px) { .logo-marquee { margin: 0 0 24px; border-radius: 14px; } .logo-tile { flex-basis: 136px; height: 76px; } .logo-tile img { height: calc(var(--h) * 0.7); } .logo-track { animation-duration: 55s; } }
@media (prefers-reduced-motion: reduce) {
  .logo-marquee { margin: 0 0 24px; }
  .logo-track { animation: none; flex-wrap: wrap; flex: 1 1 auto; padding: 0; }
  .logo-track-copy { display: none; }
  .logo-tile { flex-basis: 156px; }
}

/* Nik's section, quiet card (Nik, 2 Nov: "keep it subtle"; Sudharshanan's words, 2 Nov) */
.nik-quiet { padding-block: clamp(32px, 5vw, 56px); }
.nik-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: clamp(16px, 2.4vw, 28px); align-items: center; max-width: 760px; padding: clamp(20px, 2.6vw, 28px); border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--raised); }
.nik-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; box-shadow: 0 0 0 3px var(--night), 0 0 0 4px var(--rule); }
.nik-copy { display: grid; gap: 4px; min-width: 0; }
.nik-kicker { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--rose); font-weight: 600; margin-bottom: 4px; }
.nik-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.nik-role { color: var(--muted); font-size: var(--fs-small); }
.nik-text { color: var(--text); opacity: .86; line-height: 1.6; max-width: 58ch; margin-top: 10px; text-wrap: pretty; }
@media (max-width: 560px) { .nik-card { grid-template-columns: 64px minmax(0, 1fr); gap: 2px 14px; align-items: center; } .nik-photo { width: 64px; height: 64px; grid-row: 1 / span 3; } .nik-copy { display: contents; } .nik-kicker, .nik-name, .nik-role { grid-column: 2; margin: 0; } .nik-text { grid-column: 1 / -1; margin-top: 14px; } }

/* legal pages (2 Nov): long-form prose on the site's tokens; open points marked until confirmed */
.page-hero.legal-hero { padding-bottom: clamp(16px, 2vw, 24px); }
.legal-section { padding-top: 8px; }
.legal-draft { justify-self: start; width: fit-content; margin-top: 0; padding: 6px 12px; border: 1px dashed var(--rule); border-radius: 999px; font-size: var(--fs-xs); color: var(--muted); }
.legal { max-width: 72ch; color: var(--text); }
.legal > * + * { margin-top: 14px; }
.legal h2 { font-size: 1.375rem; margin-top: 40px; letter-spacing: -0.01em; }
.legal h3 { font-size: 1.0625rem; margin-top: 24px; }
.legal p, .legal li { line-height: 1.7; color: var(--text); }
.legal ul, .legal ol { padding-left: 1.2em; }
.legal li + li { margin-top: 6px; }
.legal a { color: var(--text); text-decoration-color: var(--rose); text-underline-offset: 3px; }
.legal table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); display: block; overflow-x: auto; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--rule); }
.legal th { color: var(--muted); font-weight: 500; }
.legal code { font-size: 0.9em; padding: 0 4px; border-radius: 4px; background: rgba(232, 239, 239, 0.08); }
.tbc { background: rgba(247, 224, 194, 0.14); color: #F7E0C2; border-radius: 4px; padding: 1px 5px; }

/* schema research (2 Nov): what the markup states is on the page. Legal line, second currency, lead profiles */
.foot-legal { margin-top: 36px; font-size: var(--fs-xs); line-height: 1.6; color: var(--muted); max-width: 110ch; }
.price-big .price-alt { font-size: var(--fs-small); color: var(--ink-muted); margin-top: 4px; }
.price-strip .price-big .price-alt { color: var(--muted); }
.audit-list .a-alt { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--ink-muted); }
.tier-alt { font-size: var(--fs-xs); color: var(--muted); margin-top: -10px; }
.price-alt { font-variant-numeric: tabular-nums; }
.lead-profile { margin-top: 10px; }

/* Cookie choice (2 Nov 2026). Spec: ../../../consent/SPEC.md. One control, three looks for review:
   A corner card (default), B glass strip (html[data-cc="b"]), C top band in the page (html[data-cc="c"]).
   A and B sit in the page like C on short screens (html.cc-flow). Six identical buttons, no rose but the focus
   ring and the Privacy notice underline. z-index 55: above the header (50), below grunior (60, 61) and the skip link (100). */
.cc { display: none; }
.consent-ask .cc, .cc.is-open { display: block; }
.cc [hidden], .cc-slot [hidden] { display: none !important; }
.cc-h { font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--text); }
.cc-h:focus { outline: none; }
.cc-p { margin-top: 4px; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.cc-d { margin-top: 4px; font-size: var(--fs-xs); line-height: 1.5; color: var(--muted); }
.cc-link { white-space: nowrap; }
.cc-link:focus-visible { outline-offset: 2px; border-radius: 4px; }
.cc-btns { display: flex; gap: 8px; margin-top: 12px; }
.cc-btn {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 4px 8px; border-radius: 999px;
  border: 1px solid var(--muted); background: transparent; color: var(--text);
  font-weight: 600; font-size: var(--fs-small); line-height: 1.15; text-align: center;
  transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.cc-btn:hover { border-color: var(--text); background: rgba(232, 239, 239, 0.08); }
.cc-item { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--rule); }
.cc-ihead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cc-ih { font-size: 0.9375rem; font-weight: 600; color: var(--text); }
.cc-sw { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-block: -10px; font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.cc-word { min-width: 1.75em; text-align: right; }
.cc-track { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; border: 1px solid var(--muted); transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out); }
.cc-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform 200ms var(--ease-out), background-color 200ms var(--ease-out); }
.cc-sw:hover .cc-track { border-color: var(--text); }
.cc-sw[aria-checked='true'] .cc-track { background: var(--text); border-color: var(--text); }
.cc-sw[aria-checked='true'] .cc-track::after { transform: translateX(16px); background: var(--night); }
.cc-prefs { display: flex; flex-direction: column; min-height: 0; }
.cc-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 0 2px; } /* 2 px: room for the link's focus ring */
.cc-phead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cc-back { min-height: 44px; margin-block: -10px; padding: 0 4px; font-size: var(--fs-small); font-weight: 600; color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--muted); }
.cc-back:hover { text-decoration-color: var(--text); }
.cc-note { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--rule); }
.cc-scroll.is-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent); }
.cc-prefs .cc-btns { flex: none; padding-top: 12px; border-top: 1px solid var(--rule); }
@media (max-width: 379.98px) { .cc-prefs .cc-btns { flex-wrap: wrap; } .cc-prefs [data-cc-act='save'] { flex-basis: 100%; } }
.cc-done { display: flex; align-items: center; gap: 16px; }
.cc-msg { font-size: 0.9375rem; line-height: 1.5; color: var(--text); }
.cc-msg:focus { outline: none; }
.cc-hide { min-height: 44px; margin-left: auto; padding: 0 4px; font-size: var(--fs-small); font-weight: 600; color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--muted); }
.cc-hide:hover { text-decoration-color: var(--text); }
.cc.is-prefs .cc-first, .cc.is-done .cc-first, .cc.is-done .cc-prefs { display: none !important; }
#main[tabindex='-1']:focus { outline: none; }
/* While A or B floats, the footer gets room to scroll its last line clear of it (--cc-clear, consent.js). */
html.cc-float .site-foot { padding-bottom: max(calc(28px + 64px), var(--cc-clear, 0px)); }

/* A, the corner card: bottom left, clear of grunior; above the grunior button on phones */
html:not([data-cc='c']):not(.cc-flow) .cc { position: fixed; left: 16px; bottom: 16px; z-index: 55; width: min(380px, calc(100vw - 32px)); }
html:not([data-cc='c']):not(.cc-flow) .cc-in { background: var(--raised); border: 1px solid var(--rule); border-radius: var(--r-card); padding: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
html:not([data-cc='c']):not(.cc-flow) .cc.is-prefs { width: min(420px, calc(100vw - 32px)); }
html:not([data-cc='c']):not(.cc-flow) .cc.is-prefs .cc-in { display: flex; flex-direction: column; max-height: calc(100vh - 112px); }
html:not([data-cc='c']):not(.cc-flow) .cc.is-prefs .cc-prefs { flex: 1 1 auto; }
@media (max-width: 719.98px) {
  html:not([data-cc='c']):not(.cc-flow) .cc, html:not([data-cc='c']):not(.cc-flow) .cc.is-prefs { bottom: 76px; width: calc(100vw - 32px); }
  /* under half the screen, also for B's full-width panel (SPEC caps it at 50%; 48% keeps it below half) */
  html:not([data-cc='c']):not(.cc-flow) .cc.is-prefs .cc-in { max-height: 48vh; max-height: 48svh; }
}
.motion-ok.consent-ask:not([data-cc='c']):not(.cc-flow) .cc-in { animation: ccRise 200ms var(--ease-out) both; }
.motion-ok:not([data-cc='c']):not(.cc-flow) .cc.is-prefs .cc-prefs,
.motion-ok:not([data-cc='c']):not(.cc-flow) .cc.is-done .cc-done { animation: ccFade 160ms var(--ease-out) both; }
.motion-ok:not([data-cc='c']):not(.cc-flow) .cc.is-leaving { animation: ccOut 160ms var(--ease-out) forwards; }
@keyframes ccRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ccFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ccOut { to { opacity: 0; transform: translateY(8px); } }

/* B, the glass strip: the header's glass, from the left edge to 12 px short of grunior; docked to the foot on phones */
html[data-cc='b']:not(.cc-flow) .cc { right: var(--cc-right, 164px); width: auto; }
html[data-cc='b']:not(.cc-flow) .cc-in {
  background: rgba(11, 26, 31, 0.94); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
  box-shadow: none; padding: 16px;
}
html[data-cc='b']:not(.cc-flow) .cc.is-prefs { right: auto; width: min(420px, calc(100vw - 32px)); }
@media (min-width: 1024px) {
  html[data-cc='b']:not(.cc-flow) .cc-first { display: flex; align-items: center; gap: 24px; }
  html[data-cc='b']:not(.cc-flow) .cc-first .cc-text { flex: 1 1 auto; min-width: 0; }
  html[data-cc='b']:not(.cc-flow) .cc-first .cc-btns { flex: 0 0 340px; margin-top: 0; }
}
@media (max-width: 719.98px) {
  html[data-cc='b']:not(.cc-flow) .cc, html[data-cc='b']:not(.cc-flow) .cc.is-prefs { left: 0; right: 0; bottom: 0; width: auto; }
  html[data-cc='b']:not(.cc-flow) .cc-in { border-width: 1px 0 0; border-radius: 16px 16px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
  /* grunior rises above the strip while it shows, and drops back after (D10) */
  html[data-cc='b']:not(.cc-flow):is(.consent-ask, .cc-float) .chat-fab { bottom: calc(var(--cc-h, 203px) + 12px); }
  html[data-cc='b']:not(.cc-flow):is(.consent-ask, .cc-float) :is(.chat-greet, .chat-panel) { bottom: calc(var(--cc-h, 203px) + 72px); }
  html[data-cc='b']:not(.cc-flow):is(.consent-ask, .cc-float) .chat-panel { max-height: calc(100svh - var(--cc-h, 203px) - 96px); }
  .motion-ok[data-cc='b'] .chat-fab { transition: border-color 200ms var(--ease-out), transform 120ms var(--ease-out), bottom 240ms var(--ease-out); }
}
.motion-ok.consent-ask[data-cc='b']:not(.cc-flow) .cc-in { animation: ccRiseB 240ms var(--ease-out) both; }
.motion-ok[data-cc='b']:not(.cc-flow) .cc.is-leaving { animation: ccOutB 160ms var(--ease-out) forwards; }
@keyframes ccRiseB { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ccOutB { to { opacity: 0; transform: translateY(12px); } }

/* C, the top band, and the short-screen fallback for A and B: in the page above the header, covering nothing */
html[data-cc='c'] .cc, html.cc-flow .cc { position: relative; background: var(--raised); border-bottom: 1px solid var(--rule); }
html[data-cc='c'] .cc-in, html.cc-flow .cc-in { max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding: 16px var(--gutter); }
html[data-cc='c'] .cc-prefs, html.cc-flow .cc-prefs { max-width: 720px; }
html[data-cc='c'] .cc-scroll, html.cc-flow .cc-scroll, .cc-slot .cc-scroll { overflow: visible; }
html[data-cc='c'] .cc.is-done .cc-in, html.cc-flow .cc.is-done .cc-in { padding-block: 8px; }
@media (min-width: 720px) {
  html[data-cc='c'] .cc-first, html.cc-flow .cc-first { display: flex; align-items: center; gap: 32px; }
  html[data-cc='c'] .cc-first .cc-text, html.cc-flow .cc-first .cc-text { flex: 1 1 auto; min-width: 0; max-width: 80ch; }
  html[data-cc='c'] .cc-first .cc-btns, html.cc-flow .cc-first .cc-btns { flex: 0 0 340px; margin: 0 0 0 auto; }
}
/* C: Cookie settings in the footer opens the second layer here, under the Legal list */
.cc-slot { margin-top: 32px; }
.cc-slot .cc-prefs { max-width: 720px; padding: 16px; background: var(--raised); border: 1px solid var(--rule); border-radius: var(--r-card); }

/* Cookie settings in the footer's Legal list: looks like the links beside it, 44 px tall */
.foot-link { display: inline-flex; align-items: center; min-height: 44px; margin-block: -5px; font-size: 0.9375rem; text-align: left; }
.foot-link:hover { color: var(--rose); }
.no-js .foot-grid li:has(> .foot-link) { display: none; }

@media (forced-colors: active) {
  .cc-in, .cc-slot .cc-prefs { border: 1px solid CanvasText; }
  .cc-btn, .cc-track { border-color: ButtonText; }
  .cc-track::after { forced-color-adjust: none; background: CanvasText; }
  .cc-sw[aria-checked='true'] .cc-track { forced-color-adjust: none; background: Highlight; border-color: Highlight; }
  .cc-sw[aria-checked='true'] .cc-track::after { background: HighlightText; }
}