/* ============================================================
   KORALIS — layout stage stylesheet
   Stage discipline: STRUCTURE + MOTION ONLY.
   Colour is deliberately grayscale (oklch, zero chroma) until the
   scene-derived palette stage. The four site tokens exist now so
   that stage is a pure swap: --bg, --ink, --muted, --accent.
   Fonts: system stack until the type stage.
   ============================================================ */

/* ---------- fonts (self-hosted, brand package: Space Grotesk + Inter) ---------- */
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* SCENE (flipped light, Grant's call): a fresh morning, the owner at the
     bench with coffee before open, bright day outside, deciding this is the
     year the website finally gets done. → LIGHT. Navy is the ink of a
     fresh page; the accent is clear water in daylight.
     OKLCH only. Neutrals tinted toward the brand navy (hue ~250, chroma
     .005-.02). ONE saturated accent (brand cyan). Chroma eases toward the
     lightness extremes. Never #000/#fff. */
  --bg: oklch(0.975 0.005 250);     /* bright morning paper, navy-tinted     */
  --ink: oklch(0.24 0.04 257);      /* brand deep navy ink                   */
  --muted: oklch(0.47 0.022 252);   /* secondary text                        */
  --accent: oklch(0.72 0.17 232);   /* clear water: brand Bright Cyan        */
  --accent-text: oklch(0.48 0.12 240); /* accent when it must be READ on light */

  /* derived surfaces (light world) */
  --surface: oklch(0.99 0.003 250);     /* white cards                       */
  --surface-2: oklch(0.94 0.008 250);   /* placeholder fills                 */
  --line: oklch(0.885 0.008 250);       /* hairlines                         */
  --ink-invert: oklch(0.96 0.006 250);  /* light text on dark bands/buttons  */
  --bg-dark: oklch(0.23 0.035 257);     /* the deep navy contrast bands      */
  --band-panel: oklch(0.27 0.035 256);  /* raised panels inside dark bands   */
  --muted-dark: oklch(0.72 0.02 250);   /* secondary text on bands           */
  --line-dark: oklch(0.35 0.03 255);    /* hairlines on bands                */
  --card-light: oklch(0.97 0.004 250);  /* white pop cards on dark bands     */
  --line-light: oklch(0.87 0.01 250);   /* hairlines on light cards          */

  /* visual-world grounds (art-direction pass) */
  --paper: oklch(0.955 0.007 85);       /* warm atelier off-white            */
  --stone: oklch(0.936 0.005 240);      /* pale connected-systems grey       */
  --graphite: oklch(0.21 0.02 252);     /* development chapter ground        */

  --font-display: 'Space Grotesk', -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, "Segoe UI", system-ui, sans-serif;

  --w-wide: 85rem;
  --w-text: 46rem;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  /* section rhythm: ~76-120px phones, ~110-130px tablets, ~140-168px desktop */
  --sect: clamp(4.75rem, 8vw + 3rem, 10.5rem);
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 9px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

html { overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- type scale ---------- */
h1, h2, h3 { font-family: var(--font-display); line-height: 1.06; margin: 0; letter-spacing: -0.02em; }
/* demoted headings: elements styled as headings without the heading role
   (e.g. the work fallback's p.h-sect) render identically to the real tag */
p.h-sect { font-family: var(--font-display); line-height: 1.06; margin: 0; }
.h-hero  { font-size: clamp(2.35rem, 5.1vw, 4.2rem); font-weight: 700; letter-spacing: -0.028em; line-height: 1.05; }
.h-sect  { font-size: clamp(2.6rem, 5vw, 4.75rem); font-weight: 600; letter-spacing: -0.025em; }
.h-chapter { font-size: clamp(1.9rem, 3vw, 2.85rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; }
.h-card  { font-size: clamp(1.2rem, 1.9vw, 1.55rem); font-weight: 650; line-height: 1.2; }
.lede    { font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.5; color: var(--muted); }
p { margin: 0; }
.muted { color: var(--muted); }

.kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .78rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1.1rem;
}
.kicker::before { content: ""; width: 1.6rem; height: 2px; background: var(--accent); }
.aw { color: var(--accent-text); }
.band-dark .aw { color: var(--accent); }

/* ---------- layout primitives ---------- */
.container { max-width: var(--w-wide); margin-inline: auto; padding-inline: var(--pad); }
.container--text { max-width: var(--w-text); }
section { padding-block: var(--sect); position: relative; }
.sect-head { max-width: 56rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* focus visibility, sitewide */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 820px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}

/* dark band sections (deeper night than the base) */
.band-dark { background: var(--bg-dark); color: var(--ink-invert); }
.band-dark .muted, .band-dark .lede, .band-dark .kicker { color: var(--muted-dark); }
.band-dark .kicker::before { background: var(--accent); }

/* ---------- reveal system ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .65s cubic-bezier(.16, 1, .3, 1), transform .65s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }
html.no-js [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 650; text-decoration: none;
  border-radius: 999px;
  padding: .95rem 1.9rem;
  border: 1.5px solid var(--ink);
  transition: transform .25s cubic-bezier(.16,1,.3,1), background .25s, color .25s, border-color .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn--solid { background: var(--ink); color: var(--ink-invert); box-shadow: 0 12px 28px -12px oklch(0.24 0.04 257 / 0.45); }
.btn--accent {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
  box-shadow: 0 16px 36px -12px oklch(0.6 0.15 232 / 0.65);
}
.btn--accent:hover { background: oklch(0.76 0.16 232); }
.btn--ghost { background: transparent; color: var(--ink); }
.band-dark .btn--solid { background: var(--ink-invert); color: var(--ink); border-color: var(--ink-invert); }
.band-dark .btn--ghost { color: var(--ink-invert); border-color: var(--ink-invert); }
.btn--sm { padding: .6rem 1.25rem; font-size: .92rem; }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  transition: background .3s, box-shadow .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: oklch(0.975 0.005 250 / 0.85);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  height: 72px;
}
.logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.logo__k { height: 34px; width: auto; }
.logo__word { height: 15px; width: auto; }
.site-footer__brand { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.site-footer__k { height: 30px; width: auto; }
.site-footer__word { height: 15px; width: auto; }
.site-nav { display: flex; gap: 1.6rem; }
.site-nav a { text-decoration: none; font-size: .95rem; font-weight: 550; color: var(--muted); transition: color .2s; }
.site-nav a:hover { color: var(--ink); }
@media (max-width: 860px) { .site-nav { display: none; } }

/* ---------- hero ---------- */
.hero { min-height: 100svh; display: flex; align-items: center; padding-block: 0; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, oklch(0.19 0.04 257 / .9) 0%, oklch(0.2 0.042 257 / .78) 34%, oklch(0.22 0.045 255 / .32) 56%, transparent 74%),
    linear-gradient(180deg, transparent 72%, oklch(0.18 0.038 257 / .34) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 56px, #000 148px);
  mask-image: linear-gradient(180deg, transparent 56px, #000 148px);
}
@media (max-width: 700px) {
  .hero__scrim {
    background:
      linear-gradient(90deg, oklch(0.19 0.04 257 / .88) 0%, oklch(0.2 0.042 257 / .74) 52%, oklch(0.21 0.044 256 / .52) 100%),
      linear-gradient(180deg, transparent 55%, oklch(0.18 0.038 257 / .55) 100%);
  }
}
.hero__content { position: relative; z-index: 2; width: 100%; padding-block: 6.5rem 2.5rem; color: var(--ink-invert); }
.hero__content > * { max-width: 42rem; }
.h-hero, .hero__lede {
  text-shadow: 0 1px 2px oklch(0.15 0.03 257 / .4), 0 14px 38px oklch(0.15 0.03 257 / .45);
}
.hero__lede { margin-top: 1.1rem; }
.hero__cta-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }
/* secondary hero action reads as a light outline on the navy scrim */
.hero .btn--solid {
  background: oklch(0.25 0.045 256 / 0.4);
  color: var(--ink-invert);
  border-color: oklch(0.95 0.01 250 / 0.55);
  backdrop-filter: blur(8px);
  box-shadow: none;
}
.hero .btn--solid:hover { background: oklch(0.3 0.05 256 / 0.55); }
.hero__assurance { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 2.6rem; font-size: .88rem; color: var(--ink-invert); }
.hero__assurance span {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600;
  background: oklch(0.24 0.04 256 / 0.5);
  backdrop-filter: blur(8px);
  border: 1px solid oklch(0.95 0.01 250 / 0.26);
  border-radius: 999px;
  padding: .38rem .85rem;
}
.hero__assurance span::before { content: "✓"; font-weight: 700; color: var(--accent); }

/* ---------- cards ---------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 2.5vw, 2rem);
}
.band-dark .card { background: var(--band-panel); border-color: var(--line-dark); }

/* glow border (pointer tracked, vanilla take on glowing-effect):
   rainbow conic ring, gradient start follows the pointer angle */
[data-glow] { overflow: hidden; }
[data-glow]::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from calc(var(--start, 0) * 1deg),
    #dd7bbb, #d79f1e, #5a922c, #4c7894, #7b5add, #dd7bbb);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
[data-glow].glow-on::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { [data-glow]::before { display: none; } }

/* ---------- work stage header + project name (shared with flip stage) ---------- */
.sect-head--scrub { margin-bottom: clamp(1.2rem, 2.5vw, 2rem); }
.sect-head--scrub .lede { max-width: 44rem; }
.project-meta__name { font-family: var(--font-display); font-weight: 650; font-size: clamp(1.2rem, 2vw, 1.6rem); }

/* hero media */
.hero__poster, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }

/* ---------- numbered steps (used on thanks.html) ---------- */
.steps { counter-reset: step; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; padding-block: 1.8rem; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step__num {
  counter-increment: step;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: grid; place-items: center;
}
.step__num::before { content: counter(step, decimal-leading-zero); }

/* ---------- FAQ ---------- */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq { padding-block: clamp(2.5rem, 4vw, 3.25rem) clamp(3.5rem, 7vw, 6rem); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1.2rem;
  padding: 1.25rem 0;
  font-family: var(--font-display); font-weight: 650; font-size: 1.06rem;
  transition: color .2s, padding-left .3s cubic-bezier(.16,1,.3,1);
}
.faq summary:hover { color: var(--accent-text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex-shrink: 0;
  width: .55rem; height: .55rem; margin-right: .2rem;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .2s;
}
.faq summary:hover::after { border-color: var(--accent-text); }
.faq details[open] summary::after { transform: translateY(2px) rotate(225deg); border-color: var(--accent-text); }
/* open item: an accent spine marks the active question */
.faq details[open] { box-shadow: inset 3px 0 0 var(--accent); }
.faq details[open] summary { padding-left: 1.15rem; }
.faq details[open] .faq__a { padding-left: 1.15rem; }
.faq .faq__a { padding: .1rem 0 1.4rem; max-width: 42rem; color: var(--muted); font-size: .98rem; }
@media (prefers-reduced-motion: reduce) {
  .faq summary, .faq summary::after { transition: none; }
}

/* ---------- services marquee ---------- */
.ticker { overflow: hidden; white-space: nowrap; }
.ticker__track { display: flex; width: max-content; animation: ticker 56s linear infinite; will-change: transform; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group { display: flex; }
.ticker__item {
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: oklch(0.94 0.01 250);
  display: inline-flex; align-items: center;
}
.ticker__item::after { content: "•"; content: "•" / ""; color: var(--accent); margin-inline: 2rem; font-size: 1.05em; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ---------- footer ---------- */
/* light footer, matching the header */
.site-footer { background: var(--bg); color: var(--muted); padding-block: 2.8rem 2rem; font-size: .92rem; border-top: 1px solid var(--line); }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { color: var(--accent-text); }
.site-footer__grid { display: grid; gap: 2rem; }
@media (min-width: 820px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1.1fr; } }
.social-links { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.social-links__title { font-weight: 700; color: var(--ink); margin-bottom: .2rem; }
.social-links a {
  display: inline-flex; align-items: center; gap: .65rem;
  color: var(--muted); text-decoration: none;
  transition: color .2s;
}
.social-links a:hover { color: var(--accent-text); }
.social-links svg { width: 18px; height: 18px; }
.site-footer__legal { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
/* legal links carry an underline so they never rely on colour alone */
.site-footer__legal a { text-decoration: underline; text-underline-offset: 2px; }
/* footer link rows are comfortable tap targets at every width */
.site-footer__grid p a { display: inline-block; padding-block: 0.35rem; }
.site-footer__grid p + p { margin-top: 0.4rem; }

/* ---------- section-specific pieces ---------- */
.logo__tag { font-size: .72rem; font-weight: 500; letter-spacing: .02em; margin-left: .4rem; display: none; }
@media (min-width: 1080px) { .logo__tag { display: inline; } }

.hero__lede { max-width: 38rem; margin-top: 1.4rem; color: oklch(0.93 0.01 250); }
.hero .kicker { color: oklch(0.87 0.015 250); }
.hero .kicker .aw { color: var(--accent); }
.hero__cta-row .btn { padding: 1.15rem 2.5rem; font-size: 1.12rem; }
@media (max-width: 520px) {
  .hero__cta-row { flex-direction: column; align-items: stretch; }
  .hero__cta-row .btn { justify-content: center; }
}
.hero__media-note { position: absolute; top: 100px; right: var(--pad); }
.hero__media .ph__label { display: none; }
@media (max-width: 700px) { .hero__media-note { display: none; } }
.hero__slogan {
  margin-top: 3rem;
  padding-top: 1.15rem;
  border-top: 2px solid oklch(0.95 0.01 250 / .85);
  width: fit-content;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem); font-weight: 700; letter-spacing: .34em;
  color: oklch(0.98 0.005 250);
  text-shadow: 0 1px 2px oklch(0.15 0.03 257 / .45), 0 10px 28px oklch(0.15 0.03 257 / .4);
}
@media (max-width: 480px) {
  .hero__slogan { font-size: .98rem; letter-spacing: .26em; }
}

/* ---------- ownership promise panel ---------- */
.sect-head--own .lede { max-width: 44rem; }
.own-claims {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0 clamp(2.5rem, 5vw, 5rem);
  max-width: 66rem;
}
@media (min-width: 820px) { .own-claims { grid-template-columns: 1fr 1fr; } }
.own-claim {
  display: flex; align-items: flex-start; gap: 1.15rem;
  padding-block: clamp(1.3rem, 2.5vw, 1.8rem);
  border-top: 1px solid var(--line-dark);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.3;
  letter-spacing: -0.01em;
}
/* clause ticks: each promise "initials itself" as it reveals */
.tick { width: 1.2rem; height: 1.2rem; }
.own-claim .tick { width: 1.5rem; height: 1.5rem; flex-shrink: 0; margin-top: .3em; }
.tick path {
  fill: none; stroke: var(--accent); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 26; stroke-dashoffset: 26;
  transition: stroke-dashoffset .55s cubic-bezier(.16,1,.3,1) .3s;
}
.own-claim.is-in .tick path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .tick path { stroke-dashoffset: 0 !important; transition: none !important; } }
.own-sign {
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
  font-family: var(--font-display); font-weight: 650; font-size: 1.15rem;
}
.own-sign span {
  display: block; margin-top: .4rem;
  font-family: var(--font-body); font-weight: 500; font-size: .92rem;
  color: var(--muted-dark);
}
@keyframes kenburns {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.09) translate(-2%, 1.5%); }
}

/* card heading rhythm */
.card .h-card { margin-bottom: .5rem; }

/* grant split: two-column from portrait-tablet widths so 768-819 never
   reads as stretched mobile (the shared .grid-2 rule starts at 820) */
.grant-split { align-items: center; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 768px) { .grant-split { grid-template-columns: 1fr 1fr; } }
.plain-list { margin: 1.4rem 0 0; padding: 0; list-style: none; }
.plain-list li { padding: .55rem 0 .55rem 1.6rem; position: relative; color: var(--muted); }
.plain-list li::before { content: "•" / ""; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.band-dark .plain-list li { color: var(--muted-dark); }
.band-dark .plain-list a { color: var(--ink-invert); }

/* form rows for paired fields */
.form-row { display: grid; gap: 1.1rem; }
@media (min-width: 600px) { .form-row { grid-template-columns: 1fr 1fr; } }
/* inputs must never set the column's minimum width: without these guards the
   form card blows out of the contact grid at 768-1024px */
.form-row > label { min-width: 0; }
.contact-form input, .contact-form textarea { width: 100%; min-width: 0; }
.contact-layout > * { min-width: 0; }

/* reviews */
.sect-head--center { margin-inline: auto; text-align: center; }
.review-card {
  background: var(--card-light);
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 2.5vw, 2.1rem);
  display: flex; flex-direction: column; gap: .9rem;
  box-shadow: 0 18px 50px -18px oklch(0.05 0.01 253 / 0.65);
}
.review-card .muted { color: oklch(0.5 0.015 250); }
.review-card__mark { font-family: Georgia, serif; font-size: 2.6rem; line-height: .6; color: var(--accent); letter-spacing: -0.06em; }
.review-card__stars { color: oklch(0.78 0.14 85); font-size: 1.05rem; letter-spacing: .18em; }
.review-card__text { flex: 1; }
.review-card__who { display: flex; align-items: center; gap: .8rem; line-height: 1.3; }
.reviews__note { text-align: center; margin-top: 2.4rem; }

/* contact */
.contact-form { display: grid; gap: 1.1rem; }
.contact-form label { display: grid; gap: .45rem; font-size: .92rem; font-weight: 600; }
.contact-form input, .contact-form textarea {
  font: inherit; color: inherit;
  font-size: max(1rem, 16px); /* under 16px iOS Safari zooms the page on focus */
  background: var(--band-panel);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-sm);
  padding: .85rem 1rem;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: oklch(0.58 0.015 250); }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.contact-form textarea { resize: vertical; min-height: 8rem; }
.contact-form button { justify-self: start; margin-top: .4rem; }
.form-note { font-size: .82rem; }

/* ---------- redesign v2: reviews ---------- */
.review-layout { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
/* one genuine review, presented as a centred set piece */
@media (min-width: 900px) {
  .review-layout--single { grid-template-columns: 1fr; max-width: 52rem; margin-inline: auto; }
}
.review-layout--single .review-card--featured { text-align: left; }
.review-card--featured { justify-content: center; }
.review-card--featured .review-card__text { font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.45; font-weight: 500; }
.review-card__thumb { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; object-position: left top; flex-shrink: 0; }

.founder-figure__caption {
  margin-top: .9rem;
  font-family: var(--font-display); font-weight: 650; font-size: .95rem;
  color: var(--muted-dark);
}

/* ---------- redesign v2: founder media ---------- */
.founder-media { overflow: hidden; border-radius: var(--r-lg); min-height: 420px; box-shadow: 0 26px 60px -24px oklch(0.3 0.03 255 / 0.4); }
.founder-media img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 24s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .founder-media img { animation: none; } }

/* ---------- pricing: rules card + companion robot ----------
   Copy is research-locked; this block is presentation only.
   Left: heading and the rules card (glow ring on pointer).
   Right, desktop only: the Koralis bot, idle and glowing cyan,
   an echo of the ticker's neon. Hidden under 820px, frozen
   under reduced motion. */
/* four compact plan cards in the pricing.md idiom: quiet 1px frame,
   small shadow, hover lift; a snap-scrolling row when they can't fit */
.price-duo {
  display: grid; gap: clamp(.9rem, 1.4vw, 1.25rem);
  margin-inline: auto;
}
@media (min-width: 1280px) {
  .price-duo--four { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
}
@media (min-width: 640px) and (max-width: 1279px) {
  .price-duo--four { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}
@media (max-width: 639px) {
  .price-duo--four {
    grid-auto-flow: column; grid-auto-columns: min(19rem, 84vw);
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: .85rem;
    scrollbar-width: thin;
  }
  .price-duo--four .price-card { scroll-snap-align: start; }
}
.sect-head--pricing { margin-bottom: clamp(1.6rem, 2.6vw, 2.2rem); }
.price-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(1.15rem, 1.6vw, 1.45rem);
  box-shadow: 0 10px 26px -18px oklch(0.3 0.03 255 / 0.35);
  text-align: left;
}
.price-card .h-card { margin-bottom: .15rem; font-size: 1.12rem; }
.price-card__price {
  font-family: var(--font-display); font-weight: 650;
  font-size: clamp(1.55rem, 1.9vw, 1.85rem); letter-spacing: -0.02em;
  line-height: 1.15;
}
.price-card__per { font-family: var(--font-body); font-weight: 500; font-size: .82rem; color: var(--muted); margin-left: .4rem; letter-spacing: 0; }
/* on-request plans: same voice, same volume as the priced ones */
.price-card__price--txt { font-size: clamp(1.55rem, 1.9vw, 1.85rem); }
.price-card__terms { color: var(--accent-text); font-size: .76rem; font-weight: 650; margin-top: .25rem; }
.price-card > .muted { margin-top: .7rem; font-size: .88rem; }
.price-card .price-rules { margin-top: .3rem; margin-bottom: 1.1rem; }
.price-card .price-rules li { padding-block: .5rem; font-size: .85rem; gap: .6rem; }
.price-card .price-rules li::before { width: 1.15rem; height: 1.15rem; font-size: .6rem; }
/* footer button rides the flex bottom so all four CTAs align */
.price-card__btn { display: block; text-align: center; margin-top: auto; padding: .7rem 1rem; font-size: .9rem; }
.price-note { margin-top: 1.3rem; font-size: .85rem; text-align: center; }
/* pricing hands over to the FAQ without a paddock of white between them */
#pricing { padding-bottom: clamp(3rem, 5vw, 4.5rem); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .price-card { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
  .price-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px -20px oklch(0.24 0.04 257 / 0.35); }
}

.pricing-card {
  padding: clamp(1.6rem, 2.8vw, 2.4rem);
  /* the contract, framed: a confident ink border; on hover the conic glow
     ring paints exactly over it, so the frame itself lights up */
  border: 3px solid var(--ink);
  box-shadow: 0 22px 48px -26px oklch(0.24 0.04 257 / 0.35);
}
.pricing-card[data-glow] { overflow: visible; }
.pricing-card[data-glow]::before { inset: -3px; padding: 3px; }
.pricing-card .h-card { margin-bottom: .9rem; }
.price-rules { list-style: none; margin: 0; padding: 0; }
/* the two halves of the money story, quietly labelled */
.price-group {
  font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-text);
  margin: 1.3rem 0 .15rem;
}
.pricing-card .h-card + .price-group { margin-top: .2rem; }
.price-note { margin-top: 1.1rem; font-size: .85rem; }
.price-rules li {
  display: flex; align-items: flex-start; gap: .9rem;
  padding-block: .78rem;
  color: var(--muted);
}
.price-rules li + li { border-top: 1px solid var(--line); }
.price-rules li::before {
  content: "\2713";
  content: "\2713" / ""; /* decorative for assistive tech where supported */
  flex: 0 0 auto;
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 700;
  color: var(--accent-text);
  background: oklch(0.72 0.17 232 / 0.14);
  margin-top: .12rem;
}

/* (the CRM dashboard mock and its tilt/3D-robot rig were retired when
   pricing moved to the two-card plan layout; see git history for revival) */

/* ---------- FAQ: two-column layout, intro left, accordions right ---------- */
.container--faq { max-width: 74rem; }
.faq-layout { display: grid; gap: clamp(2.2rem, 5vw, 5rem); align-items: start; }
@media (min-width: 820px) {
  .faq-layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .faq-intro { position: sticky; top: 108px; }
  /* first question lines up with the section heading, not the badge above it */
  .faq-list { margin-top: 62px; }
}
.badge-pill {
  display: inline-block;
  font-family: var(--font-display); font-weight: 650; font-size: .8rem;
  letter-spacing: .08em;
  color: var(--accent-text);
  border: 1.5px solid oklch(0.72 0.17 232 / 0.45);
  background: oklch(0.72 0.17 232 / 0.08);
  border-radius: 999px;
  padding: .3rem .85rem;
}
.h-sect--faq { font-size: clamp(2.2rem, 3.8vw, 3.5rem); margin-top: 1.1rem; }
.faq-intro .lede { margin-top: 1.2rem; max-width: 30rem; font-size: clamp(1.05rem, 1.6vw, 1.2rem); }
/* the intro CTA: solid accent button to the form, phone as the quiet fallback */
.faq-call { margin-top: 2rem; display: flex; flex-direction: column; align-items: flex-start; gap: .95rem; }
.faq-call__alt {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .95rem; color: var(--muted);
}
.faq-call__alt svg { width: 15px; height: 15px; flex-shrink: 0; }
.faq-call__num {
  font-family: var(--font-display); font-weight: 650;
  letter-spacing: .02em; color: var(--ink); text-decoration: none;
  transition: color .2s;
}
.faq-call__num:hover { color: var(--accent-text); }
.faq { interpolate-size: allow-keywords; }
.faq details::details-content { height: 0; overflow: clip; transition: height .3s ease, content-visibility .3s allow-discrete; }
.faq details[open]::details-content { height: auto; }
@media (prefers-reduced-motion: reduce) {
  .faq details::details-content { transition: none; }
}

/* ---------- redesign v2: contact split ---------- */
.contact-layout { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (min-width: 768px) { .contact-layout { grid-template-columns: 1fr 1fr; } }
.contact-intro .lede { margin-top: 1rem; max-width: 34rem; }
.contact-intro .plain-list { margin-top: 1.8rem; }
/* pristine white enquiry card on the navy closing scene */
.contact-card {
  background: var(--card-light);
  color: var(--ink);
  border: 1px solid oklch(0.9 0.008 250);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  text-align: left;
  box-shadow: 0 40px 90px -30px oklch(0.05 0.02 255 / 0.8);
}
.contact-card label { color: var(--ink); }
.contact-card input, .contact-card textarea {
  background: oklch(0.985 0.003 250);
  border: 1.5px solid oklch(0.88 0.008 250);
  color: var(--ink);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  transition: border-color .2s, box-shadow .2s;
}
.contact-card input::placeholder, .contact-card textarea::placeholder { color: oklch(0.6 0.015 250); }
.contact-card input:focus, .contact-card textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(0.72 0.17 232 / 0.25);
}
.contact-card button[type="submit"] {
  width: 100%;
  justify-content: center;
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
  font-size: 1.08rem;
  padding: 1.1rem 2rem;
  box-shadow: 0 16px 36px -12px oklch(0.6 0.15 232 / 0.55);
}
.contact-card button[type="submit"]:hover { background: oklch(0.76 0.16 232); }
.contact-card .form-note { color: oklch(0.5 0.015 250); text-align: center; }
.contact-card .form-status.is-error { color: oklch(0.55 0.18 25); }
.contact-card .form-status.is-ok { color: var(--accent-text); }
.form-status { font-size: .95rem; font-weight: 600; min-height: 1.2em; }
.form-status.is-error { color: oklch(0.75 0.13 30); }
.form-status.is-ok { color: var(--accent); }

/* ownership flipped to a white band (round 6): light break between the black
   ticker and the deep-navy work cinema; the work wave now laps over white */
.own-light { background: var(--bg); }
.own-light .own-claim { border-top-color: var(--line); }
.own-light .own-sign span { color: var(--muted); }

/* round 7: claims left, brand phone right, so the white band never feels empty */
.own-layout { display: grid; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.own-phone { display: none; }
@media (min-width: 820px) {
  .own-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .own-layout .own-claims { grid-template-columns: 1fr; max-width: none; }
  .own-phone { display: flex; justify-content: center; }
}

/* the phone renders as a 3D device: perspective on the wrapper, titanium
   frame, physical side buttons, screen glass, and an edge that catches light */
.own-phone { perspective: 1300px; }

.phone {
  position: relative;
  width: clamp(13rem, 16vw, 15.5rem);
  aspect-ratio: 9 / 18.5;
  border-radius: 2.7rem;
  padding: 11px;
  background:
    linear-gradient(135deg, oklch(0.82 0.01 250), oklch(0.55 0.015 252) 30%, oklch(0.3 0.02 255) 52%, oklch(0.62 0.012 250) 78%, oklch(0.85 0.008 250));
  transform: rotateY(-16deg) rotateX(4deg) rotate(2.5deg);
  transform-style: preserve-3d;
  box-shadow:
    -18px 42px 60px -28px oklch(0.28 0.03 255 / 0.5),
    -2px 4px 10px -4px oklch(0.28 0.03 255 / 0.35);
}
/* inner black bezel between metal and glass */
.phone::before {
  content: ""; position: absolute; inset: 4px;
  border-radius: 2.45rem;
  background: oklch(0.16 0.012 258);
}
/* side buttons: power right, volume left */
.phone::after {
  content: ""; position: absolute; right: -3px; top: 24%;
  width: 3px; height: 14%;
  border-radius: 2px;
  background: linear-gradient(oklch(0.7 0.01 250), oklch(0.45 0.015 252));
}
.phone__speaker {
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
  width: 24%; height: 7px; border-radius: 999px;
  background: oklch(0.08 0.01 258);
  box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.8);
  z-index: 3;
}
.phone__screen {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  border-radius: 2.15rem;
  background: linear-gradient(170deg, oklch(0.99 0.003 250), oklch(0.95 0.009 245));
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 1.1rem;
  overflow: hidden;
}
/* glass: a soft diagonal reflection sweeping the screen */
.phone__screen::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, oklch(1 0 0 / 0.35) 0%, oklch(1 0 0 / 0.08) 24%, transparent 40%);
  pointer-events: none;
}
.phone__k { width: 34%; height: auto; }
.phone__word { width: 58%; height: auto; }
.phone__line {
  margin-top: .4rem;
  font-size: .55rem; font-weight: 650; letter-spacing: .22em;
  color: var(--muted);
}
@media (prefers-reduced-motion: no-preference) {
  .phone { animation: phone-drift 7s ease-in-out infinite; }
}
@keyframes phone-drift {
  0%, 100% { transform: rotateY(-16deg) rotateX(4deg) rotate(2.5deg) translateY(0); }
  50% { transform: rotateY(-14deg) rotateX(3deg) rotate(2deg) translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .phone { animation: none; }
}

/* ownership cluster: the site in a browser on the owner's own domain,
   phone overlapping, two tilted brand cards behind for depth */
.own-cluster { position: relative; width: min(100%, 29rem); margin: 1.25rem 2rem 3.25rem 0; }
.own-cluster__backing {
  position: absolute; border-radius: 18px;
}
.own-cluster__backing--a {
  inset: -7% auto auto -6%; width: 62%; height: 74%;
  background: oklch(0.72 0.17 232 / 0.18);
  transform: rotate(-7deg);
}
.own-cluster__backing--b {
  inset: auto -5% -10% auto; width: 58%; height: 68%;
  background: oklch(0.24 0.04 257 / 0.1);
  transform: rotate(6deg);
}
.browser {
  position: relative; z-index: 2;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transform: rotate(-2deg);
  box-shadow: 0 30px 60px -30px oklch(0.28 0.03 255 / 0.45);
}
.browser__bar {
  display: flex; align-items: center; gap: .9rem;
  padding: .6rem .95rem;
  border-bottom: 1px solid var(--line);
  background: oklch(0.965 0.006 248);
}
.browser__dots { display: inline-flex; gap: .35rem; }
.browser__dots i { width: 9px; height: 9px; border-radius: 50%; background: oklch(0.86 0.01 250); }
.browser__url {
  flex: 1; display: inline-flex; align-items: center; gap: .45rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .32rem .85rem;
  font-size: .74rem; font-weight: 650; letter-spacing: .01em;
  color: var(--ink);
}
.browser__url svg { width: 11px; height: 11px; color: var(--accent-text); flex-shrink: 0; }
.browser__body { padding: 1.5rem 1.3rem 1.7rem; display: grid; gap: .65rem; justify-items: start; }
.browser__k { width: 44px; height: auto; margin-bottom: .35rem; }
.browser__hl { width: 62%; height: 13px; border-radius: 7px; background: oklch(0.88 0.012 252); }
.browser__ln { width: 86%; height: 7px; border-radius: 4px; background: oklch(0.93 0.008 250); }
.browser__ln--short { width: 58%; }
.browser__cta { width: 36%; height: 24px; border-radius: 999px; background: var(--accent); margin-top: .4rem; }
/* the phone rides the browser's corner, kept at pocket scale */
.own-cluster .phone {
  position: absolute; z-index: 3;
  right: -9%; bottom: -14%;
  width: clamp(7.5rem, 8.5vw, 9rem);
  padding: 7px;
  border-radius: 1.9rem;
}
.own-cluster .phone::before { inset: 3px; border-radius: 1.7rem; }
.own-cluster .phone__screen { border-radius: 1.5rem; gap: .7rem; }
.own-cluster .phone__speaker { top: 14px; height: 5px; }
.own-cluster .phone__line { display: none; }

/* ---------- refinement v3: section transitions ----------
   One consistent water-line: a gentle full-width wave in the NEXT section's
   ground colour, sitting just above the section and lapping over the previous
   section's tail. The old rounded-corner device is retired. */
.sect-curve { position: relative; border-radius: 0; margin-top: 0; }
.sect-curve--light { background: var(--bg); }
/* services: trim the dead air above the pinned stage */
#services { padding-top: clamp(2rem, 4vw, 3.25rem); }
.sect-wave {
  position: absolute; bottom: 100%; left: 0;
  width: 100%; height: clamp(34px, 4.5vw, 62px);
  display: block;
  pointer-events: none;
}
.sect-wave path { fill: var(--bg-dark); }
.sect-wave--light path { fill: var(--bg); }
/* work's own ground starts a touch deeper than the plain navy band */
.sect-wave--work path { fill: oklch(0.225 0.035 257); }
.site-footer { position: relative; }

/* oversized faint background words */
.bg-word {
  position: absolute;
  top: clamp(.5rem, 3vw, 2rem); right: clamp(-1rem, 1vw, 3rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(7rem, 17vw, 15rem);
  letter-spacing: .02em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px oklch(0.9 0.02 250 / 0.10);
  pointer-events: none;
  user-select: none;
}

/* contact climax: faint K motif + aqua glow */
#contact {
  background:
    radial-gradient(50rem 34rem at 12% 100%, oklch(0.4 0.09 235 / 0.28), transparent 60%),
    var(--bg-dark);
}
.contact-motif {
  position: absolute;
  right: -4%; bottom: -6%;
  width: clamp(16rem, 30vw, 30rem);
  opacity: .07;
  pointer-events: none;
}
.contact-layout { position: relative; z-index: 1; }
@media (min-width: 900px) { .contact-layout { grid-template-columns: 1fr 1.25fr; } }
/* portrait tablet: intro and form share the row evenly (rule above widens
   the form again once there is room) */

/* testimonial project context */
.review-card__context {
  font-family: ui-monospace, Consolas, monospace;
  font-size: .78rem; letter-spacing: .04em;
  color: var(--muted);
  border-top: 1px solid var(--line-light);
  padding-top: .8rem;
}

/* ============================================================
   ART-DIRECTION PASS: visual worlds
   ============================================================ */

/* Grant's spot fixes */
/* marquee band: straight full-width near-black neon strip splitting the hero
   from the ownership band. Each group carries 12 items (the 6 services twice)
   so a single group is always wider than the viewport and the -50% loop never
   shows a gap. */
.ticker {
  position: relative; z-index: 6;
  width: 100%; margin-left: 0;
  background: oklch(0.16 0.015 260);
  padding-block: 1.5rem;
  transform: none;
  margin-block: 0;
  box-shadow: 0 20px 48px -20px oklch(0.1 0.02 260 / 0.6);
}

/* brand-only ticker: three treatments cycling on the black band —
   solid white, outlined ghost type, and accent cyan with a soft glow */
.ticker__item { color: oklch(0.98 0.003 250); font-weight: 700; }
.ticker__group .ticker__item:nth-child(3n + 2) {
  color: oklch(0.88 0.08 235); /* brighter ice blue so the black band never swallows it */
}
.ticker__group .ticker__item:nth-child(3n + 3) {
  color: oklch(0.8 0.16 225); /* lifted cyan with a stronger halo */
  text-shadow:
    0 0 14px oklch(0.78 0.17 228 / 0.85),
    0 0 34px oklch(0.72 0.17 232 / 0.5);
}
.ticker__item::after { color: oklch(0.55 0.05 240); }

/* (the old automation flow chips were retired in favour of .pipe) */

/* ============================================================
   SECTION BACKGROUND ATMOSPHERES
   Each ground gets its generated texture under a readability
   overlay; content contrast always wins.
   ============================================================ */
/* ownership is a clean white band (round 6): the navy-waves atmosphere is
   retired here so the section reads as a light break between dark moments */
#ownership {
  background: var(--bg);
}
/* work: deep navy cinema band so the tablet pops (no cream here) */
#work.work-cinema {
  background:
    radial-gradient(64rem 42rem at 50% 34%, oklch(0.32 0.06 245 / 0.4), transparent 70%),
    linear-gradient(180deg, oklch(0.225 0.035 257), oklch(0.155 0.028 258));
}
#reviews, #grant {
  background:
    linear-gradient(oklch(0.23 0.035 257 / 0.35), oklch(0.23 0.035 257 / 0.55)),
    url('../media/bg/navy-quiet.webp') center / cover no-repeat,
    var(--bg-dark);
}
#contact {
  background:
    linear-gradient(90deg, oklch(0.2 0.03 256 / 0.72) 0%, oklch(0.2 0.03 256 / 0.35) 55%, oklch(0.2 0.03 256 / 0.2) 100%),
    url('../media/bg/navy-k.webp') center / cover no-repeat,
    var(--bg-dark);
}
.contact-motif { display: none; }

/* ---------- services: one unified tabbed module ----------
   Heading sits close above; a single ultra-light panel wraps the
   selector and the active service card so they read as one system. */
.sect-head--svc { margin-bottom: clamp(2.75rem, 5vw, 5rem); }
.sect-head--svc .h-sect { font-size: clamp(1.9rem, 3vw, 2.8rem); }
.svc-module {
  background: oklch(0.972 0.005 245);
  border: 1px solid oklch(0.3 0.05 255 / 0.08);
  border-radius: 30px;
  padding: clamp(1.15rem, 2.4vw, 2.2rem);
}
@media (min-width: 1024px) {
  .svc-module {
    --svc-gap: clamp(2rem, 3vw, 3rem);
    display: grid;
    grid-template-columns: minmax(240px, 0.32fr) minmax(0, 1fr);
    gap: var(--svc-gap);
    align-items: start;
  }
}
.svc-tabs { display: flex; flex-direction: column; gap: .3rem; }
.svc-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  position: relative;
  display: flex; align-items: center; gap: .8rem;
  text-align: left;
  min-height: 44px;
  padding: .8rem .9rem .8rem 1.15rem;
  border-radius: 12px;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.2;
  color: oklch(0.42 0.035 255 / 0.85);
  transition: color .25s ease, transform .25s ease, background .25s ease;
}
.svc-tab::before {
  content: ""; position: absolute; left: 0; top: 16%;
  width: 2px; height: 68%; border-radius: 2px;
  background: oklch(0.3 0.05 255 / 0.14);
  transition: background .25s ease, width .25s ease;
}
.svc-tab__num {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  color: oklch(0.42 0.035 255 / 0.55);
  transition: color .25s ease;
}
.svc-tab:hover { color: var(--ink); transform: translateX(5px); }
.svc-tab:hover::before { background: oklch(0.3 0.05 255 / 0.32); }
.svc-tab.is-active {
  color: var(--ink); font-weight: 700;
  background: oklch(1 0 0 / 0.7);
}
.svc-tab.is-active::before { background: var(--accent); width: 3px; }
.svc-tab.is-active .svc-tab__num { color: var(--accent-text); }
/* the active tab hands a faint hairline across to the card: architectural,
   not decorative */
@media (min-width: 1024px) {
  .svc-tab.is-active::after {
    content: ""; position: absolute; top: 50%;
    right: calc(-1 * var(--svc-gap, 2.5rem));
    width: var(--svc-gap, 2.5rem); height: 1px;
    background: linear-gradient(90deg, oklch(0.72 0.17 232 / 0.38), oklch(0.5 0.05 245 / 0.1));
  }
}
.svc-view { position: relative; min-width: 0; }
.svc-pane {
  background: var(--surface);
  border: 1px solid oklch(0.3 0.05 255 / 0.1);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 60px oklch(0.3 0.05 255 / 0.07);
}
.svc-pane[hidden] { display: none; }
.svc-pane__media { margin: 0; aspect-ratio: 16 / 8.5; overflow: hidden; }
.svc-pane__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--focal, center);
  display: block;
}
.svc-pane__body { padding: clamp(1.4rem, 2.6vw, 2.5rem); }
.svc-pane__eyebrow {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: .65rem;
}
.svc-pane .h-chapter { font-size: clamp(1.45rem, 2.1vw, 1.95rem); margin-bottom: 1rem; }
.svc-pane__body .muted { max-width: 58ch; }
.svc-pane__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.65rem; }
.svc-pane__cta .btn { padding: .8rem 1.7rem; font-size: .95rem; min-height: 44px; }
/* tab switch: quiet fade and settle */
@media (prefers-reduced-motion: no-preference) {
  .svc-pane.is-in-anim .svc-pane__media img { animation: svc-img-in .42s ease both; }
  .svc-pane.is-in-anim .svc-pane__body { animation: svc-body-in .38s ease both; }
}
@keyframes svc-img-in { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }
@keyframes svc-body-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* tablet and mobile: horizontal scrollable tab row above the full-width card */
@media (max-width: 1023px) {
  .svc-tabs {
    flex-direction: row; overflow-x: auto;
    gap: .25rem; margin-bottom: 1.1rem; padding-bottom: .4rem;
    scrollbar-width: thin;
  }
  .svc-tab { flex: 0 0 auto; padding: .75rem .95rem .85rem; }
  .svc-tab::before {
    left: .95rem; right: .95rem; top: auto; bottom: 0;
    width: auto; height: 2px;
  }
  .svc-tab.is-active::before { height: 3px; }
  .svc-tab:hover { transform: none; }
  .svc-pane__media { aspect-ratio: 16 / 9; }
}
@media (max-width: 599px) {
  .svc-pane__media { aspect-ratio: 16 / 10; }
}
@media (max-width: 430px) {
  .svc-pane__cta .btn { flex: 1 1 100%; text-align: center; }
}
/* no JS: tabs cannot switch, so hide them and stack all four cards */
html.no-js .svc-tabs { display: none; }
html.no-js .svc-pane { margin-bottom: 1.4rem; }
html.no-js .svc-module { display: block; }

/* social icons with no page yet: shown, not clickable */
.social-soon { display: inline-flex; align-items: center; gap: .65rem; color: var(--muted); opacity: .55; cursor: default; }
.social-soon svg { width: 18px; height: 18px; }

/* spam honeypot: hidden from people, visible to bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* legal subpages */
.legal-page { padding: 9rem 0 5rem; }
.legal-page h1 { margin-bottom: .6rem; }
.legal-updated { margin-bottom: 2.4rem; }
.legal-page .h-card { margin: 2rem 0 .6rem; }
.legal-page .muted a { color: var(--accent-text); }
.legal-page .btn { margin-top: 2.4rem; }


/* ==========================================================================
   Skip link + mobile menu (production audit additions)
   ========================================================================== */
.skip-link {
  position: fixed; top: .75rem; left: .75rem; z-index: 300;
  padding: .7rem 1.2rem; border-radius: 999px;
  background: var(--ink); color: var(--ink-invert);
  text-decoration: none; font-weight: 600; font-size: .95rem;
  transform: translateY(-300%);
  transition: transform .25s ease;
}
.skip-link:focus-visible { transform: translateY(0); }

.nav-toggle {
  display: none; align-items: center; gap: .55rem;
  min-height: 44px; min-width: 44px; padding: .4rem .3rem;
  background: none; border: 0; cursor: pointer;
  color: var(--ink); font: inherit; font-weight: 600; font-size: .95rem;
}
.nav-toggle__burger { display: inline-flex; flex-direction: column; gap: 5px; width: 21px; }
.nav-toggle__burger span {
  height: 2px; width: 100%; background: currentColor;
  transition: transform .25s ease; transform-origin: center;
}
html.menu-open .nav-toggle__burger span:first-child { transform: translateY(3.5px) rotate(45deg); }
html.menu-open .nav-toggle__burger span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed; inset: 0; z-index: 190;
  background: var(--paper);
  padding: 6.5rem 1.6rem 2.5rem;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
html.menu-open .mobile-menu { opacity: 1; visibility: visible; transition-delay: 0s; }
.mobile-menu__nav { display: flex; flex-direction: column; gap: .4rem; }
.mobile-menu__nav a {
  text-decoration: none; color: var(--ink);
  font-size: clamp(1.9rem, 8vw, 2.6rem); font-weight: 650; letter-spacing: -.02em;
  padding: .45rem 0; min-height: 44px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .35s ease, transform .35s ease;
}
html.menu-open .mobile-menu__nav a { opacity: 1; transform: none; }
.mobile-menu__nav a:nth-child(1) { transition-delay: .05s; }
.mobile-menu__nav a:nth-child(2) { transition-delay: .1s; }
.mobile-menu__nav a:nth-child(3) { transition-delay: .15s; }
.mobile-menu__nav a:nth-child(4) { transition-delay: .2s; }
.mobile-menu__nav a:nth-child(5) { transition-delay: .25s; }
.mobile-menu__cta { margin-top: 1.2rem; font-size: 1.05rem; justify-content: center; }
html.menu-open, html.menu-open body { overflow: hidden; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .mobile-menu { display: block; }
  .site-header__cta { display: none; }
}

/* the header bar must stay above the open menu so Close remains reachable
   (#mobile-menu is a child of .site-header, so the bar needs its own layer) */
html.menu-open .site-header { z-index: 300; }
html.menu-open .site-header:not(.is-scrolled) { background: transparent; box-shadow: none; }
.site-header__inner { position: relative; z-index: 210; }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .mobile-menu__nav a, .nav-toggle__burger span, .skip-link { transition: none; }
}

/* touch devices: comfortable hit areas on the smaller text links.
   Negative margins cancel the visual growth, so nothing shifts. */
@media (pointer: coarse) {
  .btn--sm { min-height: 44px; }
  .site-footer a,
  .faq-call__num,
  .thanks-direct a,
  .contact-intro .plain-list a {
    display: inline-block;
    padding-block: .6rem;
    margin-block: -.6rem;
  }
}

/* ============================================================
   WORK: multi-tablet flip scroll (ContainerScroll port, vanilla)
   One pinned stage. The tablet leans in from rotateX 20deg,
   the capture scrolls inside the screen, then the tablet flips
   to the next project. Mobile + reduced motion get flip-fallback.
   ============================================================ */
.flip-stage { height: 400vh; }
.flip-sticky {
  position: sticky; top: 0;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 5rem 1.6rem;
}
/* cyan pool of light grows as the tablet settles */
.flip-sticky::before {
  content: "";
  position: absolute;
  left: 50%; top: 56%; transform: translate(-50%, -50%);
  width: min(80rem, 96vw); height: 62%;
  background: radial-gradient(closest-side, oklch(0.7 0.14 232 / 0.2), transparent 70%);
  opacity: var(--glow, 0);
  transition: opacity .3s linear;
  pointer-events: none;
}
#work .sect-head--scrub { margin-bottom: clamp(1rem, 2vw, 1.6rem); }
#work .sect-head--scrub .h-sect { font-size: clamp(2rem, 3.4vw, 3.1rem); }
#work .sect-head--scrub .lede { max-width: 46rem; font-size: clamp(1rem, 1.4vw, 1.15rem); }

.flip-scene { perspective: 1100px; width: 100%; }
/* the dark tablet bezel (ported ContainerScroll card) */
.flip-frame {
  width: 100%;
  max-width: min(65rem, 92vw, calc((100vh - 21rem) * 1.5));
  margin-inline: auto;
  background: #222222;
  border: 4px solid #6C6C6C;
  border-radius: 30px;
  padding: clamp(.55rem, 1.3vw, 1rem);
  box-shadow:
    0 0 #0000004d,
    0 9px 20px #0000004a,
    0 37px 37px #00000042,
    0 84px 50px #00000026,
    0 149px 60px #0000000a,
    0 233px 65px #00000003;
  transform-origin: 50% 42%;
  will-change: transform;
  position: relative;
}
.flip-frame::after {
  content: ""; position: absolute;
  top: .55rem; left: 50%; width: 6px; height: 6px; margin-left: -3px;
  border-radius: 50%;
  background: oklch(0.45 0.01 255);
  box-shadow: inset 0 1px 1px oklch(0.2 0.01 255);
}
.flip-screen {
  border-radius: 16px; overflow: hidden;
  aspect-ratio: 16 / 10;
  background: oklch(0.13 0.012 255);
  position: relative;
}
.flip-screen__inner { position: absolute; inset: 0; }
.flip-screen__inner.is-flipped { transform: rotateY(180deg); }
.flip-cap {
  position: absolute; top: 0; left: 0;
  width: 100%; height: auto;
  opacity: 0;
  will-change: transform;
}
.flip-cap.is-showing { opacity: 1; }

/* meta row: progress dots + crossfading project lines */
/* tablet -> dots -> text, all centered */
.flip-meta {
  display: flex; flex-direction: column; align-items: center;
  gap: .9rem;
  max-width: min(58rem, 90vw);
  margin: 1.4rem auto 0;
  width: 100%;
  text-align: center;
}
.flip-dots { display: flex; gap: .5rem; justify-content: center; }
.flip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: oklch(0.45 0.03 253);
  transition: background .3s ease, transform .3s ease;
}
.flip-dot.is-active { background: var(--accent); transform: scale(1.25); }
.flip-meta__panes { display: grid; }
.flip-meta__pane {
  grid-area: 1 / 1;
  opacity: 0; transform: translateY(12px);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}
.flip-meta__pane.is-live { opacity: 1; transform: none; pointer-events: auto; }
.flip-meta__pane .muted { max-width: 44rem; margin-inline: auto; }

/* static fallback cards (mobile + reduced motion) */
.flip-fallback { display: none; }
.flip-frame--static { max-width: none; transform: none !important; }
.flip-frame--static .flip-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.flip-card { margin-bottom: 2.6rem; }
.flip-card .project-meta__name { margin-top: 1.1rem; }
.flip-card .muted { margin-top: .3rem; }
.flip-card:last-of-type { margin-bottom: 0; }

@media (max-width: 819px) {
  .flip-stage { display: none; }
  .flip-fallback { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .flip-stage { display: none; }
  .flip-fallback { display: block; }
  .flip-frame { transform: none !important; }
}
/* no JS: the flip stage depends on scroll maths, so serve the static cards */
html.no-js .flip-stage { display: none; }
html.no-js .flip-fallback { display: block; }

/* ============================================================
   SUBPAGES: thanks / 404 / privacy / terms
   Everything below serves only the four secondary pages. It reuses
   the homepage's tokens and patterns (kicker, h-sect, steps, waves,
   band-dark grounds, ticker); nothing here changes homepage rendering.
   ============================================================ */

/* shared: clearance under the fixed header + a calmer h1 scale */
.sub-main { padding-top: clamp(7.5rem, 12vw, 9.5rem); }
.h-sect--sub { font-size: clamp(2.3rem, 3.8vw, 3.6rem); }

/* shared closing navy band; its wave laps over the light page above,
   the same water-line grammar as the homepage contact section */
.sub-band {
  position: relative;
  background:
    radial-gradient(44rem 30rem at 14% 100%, oklch(0.4 0.09 235 / 0.28), transparent 60%),
    var(--bg-dark);
  color: var(--ink-invert);
  padding-block: clamp(3.2rem, 6vw, 5rem);
}
.sub-band .muted { color: var(--muted-dark); }
.sub-band__motif {
  position: absolute; right: -3%; bottom: -10%;
  width: clamp(10rem, 20vw, 17rem);
  opacity: .08;
  pointer-events: none; user-select: none;
}
.sub-band__inner {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.6rem 2.5rem;
}
.sub-band__inner .h-chapter { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.sub-band__inner .muted { margin-top: .5rem; }
.sub-band__sign {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 650;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem); letter-spacing: -0.01em; line-height: 1.25;
}
.sub-band__sign span {
  display: block; margin-top: .6rem;
  font-family: var(--font-body); font-weight: 500; font-size: .95rem;
  color: var(--muted-dark);
}

/* shared mini footer: one legal line, light wave lapping the navy above */
.site-footer--sub { border-top: 0; padding-block: 2.4rem; }
.site-footer--sub .site-footer__legal { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- thanks: confirmation moment ---------- */
.thanks-hero { padding-block: 0 clamp(4.5rem, 7vw, 6rem); }
/* the tick seal: the ownership tick, grown into a drawn-on confirmation */
.tick-seal { margin-bottom: 1.5rem; }
.tick-seal svg { width: clamp(60px, 7vw, 78px); height: auto; display: block; overflow: visible; }
.tick-seal circle {
  fill: oklch(0.72 0.17 232 / 0.08);
  stroke: oklch(0.72 0.17 232 / 0.5);
  stroke-width: 2;
  stroke-dasharray: 183; stroke-dashoffset: 183;
  stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
}
.tick-seal path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 36; stroke-dashoffset: 36;
}
@media (prefers-reduced-motion: no-preference) {
  .tick-seal circle { animation: seal-draw .8s cubic-bezier(.16, 1, .3, 1) .25s forwards; }
  .tick-seal path { animation: seal-draw .5s cubic-bezier(.16, 1, .3, 1) .9s forwards; }
}
@keyframes seal-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tick-seal circle, .tick-seal path { stroke-dashoffset: 0; animation: none; }
}
.thanks-next-title { margin-top: clamp(2.6rem, 5vw, 3.6rem); }
.steps--sub { list-style: none; margin: .4rem 0 0; padding: 0; }
.steps--sub .step { padding-block: 1.4rem; }
/* these steps are not the homepage's scroll-synced process: never dim them,
   whatever state classes they carry */
.steps--sub .step { opacity: 1 !important; transform: none !important; filter: none !important; }
.steps--sub .step .muted { color: var(--muted); }
.steps--sub .step__head { color: var(--ink); }
.steps--sub .step__head { font-family: var(--font-display); font-weight: 650; font-size: 1.14rem; margin-bottom: .2rem; }
/* privacy reads as two columns on desktop so the page stops feeling endless */
@media (min-width: 960px) {
  .legal-body--cols {
    columns: 2;
    column-gap: clamp(3rem, 6vw, 5.5rem);
    max-width: 72rem;
  }
  .legal-body--cols h2 { break-after: avoid; break-inside: avoid; margin-top: 0; padding-top: 1.6rem; }
  .legal-body--cols p { break-inside: avoid; }
}

.thanks-direct { margin-top: 1.9rem; color: var(--muted); }
.thanks-direct a { color: var(--accent-text); font-weight: 600; }
.thanks-cta { margin-top: 2.1rem; }

/* ---------- 404: the coral K stands in for the zero ---------- */
.lost { padding-block: 0 clamp(4.5rem, 7vw, 6rem); }
.lost-code {
  display: flex; align-items: center; gap: clamp(.3rem, 1.2vw, .9rem);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(5.6rem, 16vw, 11rem);
  line-height: 1; letter-spacing: -0.045em;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
  user-select: none;
}
.lost-code img { height: .94em; width: auto; }
@media (prefers-reduced-motion: no-preference) {
  .lost-code img { animation: lost-bob 5.5s ease-in-out infinite; }
}
@keyframes lost-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-.05em); }
}
.lost .lede { max-width: 34rem; }
.lost .hero__cta-row { margin-top: 2.4rem; }
/* the ticker rides out the page; extra tail so the footer wave laps
   into empty black instead of the neon type */
.ticker--tail { padding-bottom: clamp(4rem, 7vw, 5.5rem); }

/* ---------- legal pages: premium reading ---------- */
.legal-page--framed { padding: 0; }
.legal-head {
  position: relative;
  padding: clamp(7.5rem, 12vw, 9.5rem) 0 clamp(2.4rem, 4vw, 3.2rem);
  background:
    radial-gradient(40rem 22rem at 82% 30%, oklch(0.72 0.17 232 / 0.12), transparent 65%),
    linear-gradient(180deg, oklch(0.958 0.009 245), var(--bg));
  border-bottom: 1px solid var(--line);
  overflow: clip;
}
.legal-head .h-sect--sub { margin-bottom: .7rem; }
.legal-head .legal-updated { margin-bottom: 0; }
.legal-head .bg-word {
  top: auto; bottom: -0.14em; right: -0.5rem;
  font-size: clamp(4.2rem, 13vw, 10rem);
  -webkit-text-stroke-color: oklch(0.5 0.06 245 / 0.13);
}
.legal-body { padding-block: clamp(2.8rem, 5vw, 4rem) clamp(5rem, 8vw, 6.5rem); }
.legal-body .muted { line-height: 1.75; }
.legal-body .h-card { margin: 2.7rem 0 .7rem; }
.legal-body .h-card:first-child { margin-top: 0; }
.legal-body .h-card::before {
  content: "";
  display: block;
  width: 1.75rem; height: 3px; border-radius: 2px;
  background: var(--accent);
  margin-bottom: .65rem;
}

/* ==========================================================================
   Mobile sticky call bar (under 768px): existing tokens only, shown via
   .is-on after the hero scrolls past, suppressed while #contact is in view
   ========================================================================== */
.callbar { display: none; }
@media (max-width: 767px) {
  .callbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
    padding: .65rem .8rem calc(.65rem + env(safe-area-inset-bottom, 0px));
    background: var(--bg-dark);
    box-shadow: 0 -10px 30px -14px oklch(0.18 0.04 256 / 0.55);
    transform: translateY(110%);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
  }
  .callbar.is-on { transform: translateY(0); }
  .callbar a {
    display: flex; align-items: center; justify-content: center;
    min-height: 48px; border-radius: 999px;
    font-family: var(--font-display); font-weight: 600; font-size: 1rem;
    text-decoration: none;
    transition: transform .2s ease;
  }
  .callbar a:active { transform: scale(.97); }
  .callbar__call { background: var(--accent); color: var(--ink); }
  .callbar__quote { background: var(--paper); color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .callbar, .callbar a { transition: none; }
  .callbar a:active { transform: none; }
}

/* ============================================================
   ENQUIRY PIPELINE CARD (ported from pipeline.md to vanilla SVG)
   A live node-graph of how an enquiry flows: SMIL dots ride the
   paths (no JS, CSP-safe), main.js rotates the log line and
   pauses everything under reduced motion.
   ============================================================ */
.pipe {
  width: 100%;
  background: oklch(0.15 0.028 256);
  border: 1px solid oklch(0.34 0.035 254 / 0.6);
  border-radius: 14px;
  overflow: hidden;
  text-align: left;
}
.pipe__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .65rem 1.1rem;
  border-bottom: 1px solid oklch(1 0 0 / 0.06);
}
.pipe__live {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .64rem; letter-spacing: .12em; font-weight: 600;
  color: oklch(0.8 0.02 250);
}
.pipe__live i {
  width: 7px; height: 7px; border-radius: 50%;
  background: oklch(0.72 0.19 150);
  animation: pipe-pulse 2s ease-in-out infinite;
}
.pipe__meta { font-size: .64rem; letter-spacing: .08em; color: oklch(0.7 0.02 250); }
.pipe__svg { display: block; width: 100%; height: auto; }
.pipe__svg--tall { display: none; }
@media (max-width: 599px) {
  .pipe__svg--wide { display: none; }
  .pipe__svg--tall { display: block; }
}
.pipe__svg text { font-family: var(--font-body); }
.pipe__svg .node { fill: oklch(0.2 0.032 256); stroke: oklch(1 0 0 / 0.1); stroke-width: .5; }
.pipe__svg .node--hub { fill: oklch(0.2 0.055 250); stroke: var(--accent); stroke-width: 1; }
.pipe__svg .node--out { fill: oklch(0.18 0.03 256); stroke: oklch(1 0 0 / 0.08); stroke-width: .5; }
.pipe__svg .lbl { fill: oklch(0.8 0.02 250 / 0.45); font-size: 9.5px; letter-spacing: .07em; font-weight: 600; }
.pipe__svg .lbl--hub { fill: oklch(0.72 0.17 232 / 0.8); }
.pipe__svg .ttl { fill: oklch(0.97 0.005 250 / 0.9); font-size: 12px; font-weight: 600; }
.pipe__svg .ttl--out { fill: oklch(0.97 0.005 250 / 0.68); font-size: 11px; font-weight: 500; }
.pipe__svg .sub { fill: oklch(0.8 0.02 250 / 0.3); font-size: 8.5px; }
.pipe__svg .flowpath { fill: none; stroke: oklch(0.72 0.17 232 / 0.3); stroke-width: 1.5; stroke-dasharray: 3 5; }
.pipe__svg .dot { fill: var(--accent); }
.pipe__svg .st-ok { fill: oklch(0.72 0.19 150); }
.pipe__svg .st-wait { fill: oklch(0.78 0.14 85); animation: pipe-pulse 1.9s ease-in-out infinite; }
.pipe__svg .hubdot { fill: var(--accent); animation: pipe-pulse 1.2s ease-in-out infinite; }
.pipe__svg .hubdot:nth-of-type(2) { animation-delay: .4s; }
.pipe__svg .hubdot:nth-of-type(3) { animation-delay: .8s; }
.pipe__log {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem 1.1rem;
  border-top: 1px solid oklch(1 0 0 / 0.06);
  min-height: 2.4rem;
}
.pipe__cursor { color: oklch(0.72 0.17 232 / 0.6); font-weight: 700; flex-shrink: 0; }
.pipe__lines { position: relative; flex: 1; font-size: .72rem; color: oklch(0.78 0.015 250); }
.pipe__lines span { display: none; }
.pipe__lines span.is-on { display: block; animation: pipe-line-in .3s ease both; }
.pipe__foot {
  padding: .55rem 1.1rem .7rem;
  border-top: 1px solid oklch(1 0 0 / 0.06);
  font-size: .68rem; color: oklch(0.7 0.02 250);
}
@keyframes pipe-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes pipe-line-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pipe__live i, .pipe__svg .st-wait, .pipe__svg .hubdot { animation: none; opacity: 1; }
  .pipe__lines span.is-on { animation: none; }
}
/* (the homepage pipe slot was retired with the tabbed services module;
   the pipe itself still runs on the automation page) */
/* in the service hero grid the pipe is the hero visual, full column width */

/* service page hero: text beside the service's own brand artwork,
   same frame language as the homepage service panels */
.svc-hero-grid { position: relative; z-index: 1; display: grid; gap: clamp(2.2rem, 5vw, 3rem); align-items: center; }
@media (min-width: 900px) {
  .svc-hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
}
.svc-hero-art { margin: 0; }
.svc-hero-art img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface, #fff);
  box-shadow: 0 26px 48px -30px oklch(0.35 0.06 250 / 0.45);
}
@media (max-width: 899px) {
  .svc-hero-art { max-width: 34rem; }
}

/* mobile: comfortable tap targets on footer link rows, and enough tail
   clearance that the fixed call bar never buries the legal line */
@media (max-width: 767px) {
  .site-footer { padding-bottom: calc(2rem + 92px + env(safe-area-inset-bottom, 0px)); }
}