/* Tokens from docs/team/design/visual-direction.md section 6 (W-0038), extended in rev 2 (W-0045) and rev 3 (W-0047).
   Fonts self-hosted in assets/fonts (W-0119 part B, OFL texts alongside), system stack fallback. Stylesheets: app.css (base + hero), sections.css, form.css. */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
:root {
  --color-paper: #FFF8EC;
  --color-paper-2: #FFF1D6;
  --color-line: #E8DCC3;
  --color-surface: #FFFFFF;
  --color-ink: #0F2A3D;
  --color-ink-muted: #3F5566;
  --color-link: #0B5A82;
  --color-sun: #FFB627;
  --color-sun-soft: #FFE3A3;
  --color-warn: #8A4B00;
  --color-error: #B3261E;
  --color-ok: #1E6B3A;
  --color-night: #0F2A3D;
  --color-sky-on-night: #9FC9E3;
  --color-overlay: rgb(15 42 61 / 0.55);

  --font-heading: "Plus Jakarta Sans", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Inter", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-lead: 1.125rem;
  --fs-h3: 1.25rem;
  --fs-h3-lg: 1.625rem;
  --fs-h2: clamp(1.875rem, 1.3rem + 2.4vw, 2.875rem);
  --fs-h1: clamp(2.5rem, 1.6rem + 3.4vw, 4.125rem);
  --lh-body: 1.55;
  --lh-head: 1.08;

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem;
  --gutter: 1rem;
  --gap: 1rem;
  --shadow-1: 0 1px 1px rgb(15 42 61 / .04), 0 12px 32px -18px rgb(15 42 61 / .28);
  --shadow-2: 0 2px 2px rgb(15 42 61 / .05), 0 24px 40px -18px rgb(15 42 61 / .38);
  --content-max: 74rem;
  --radius-card: 20px;
  --radius-pill: 999px;
  --tap-min: 44px;
  --focus-ring: 3px solid var(--color-link);

  --dur-fast: 120ms; --dur-base: 240ms; --dur-slow: 600ms; --dur-draw: 800ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
.on-night { --focus-ring: 3px solid var(--color-sky-on-night); }
@media (min-width: 640px) { :root { --gap: 1.5rem; } }
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-draw: 1ms; }
  html { scroll-behavior: auto; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 8px; scroll-padding-bottom: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* W-0107: after the rule above, so reduced motion really gets instant jumps */
body {
  margin: 0; background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body);
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
  overflow-wrap: break-word;
}
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: var(--lh-head); margin: 0 0 var(--space-3); font-weight: 800; letter-spacing: -0.02em; }
h1 { font-size: var(--fs-h1); letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; }
h4 { font-size: 1rem; font-weight: 700; margin-top: var(--space-4); }
p { margin: 0 0 var(--space-4); }
a { color: var(--color-link); }
.on-night a:not(.btn):not(.brand) { color: var(--color-sky-on-night); }
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.wrap { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--space-2); top: -4rem; background: var(--color-sun); color: var(--color-ink); padding: var(--space-3) var(--space-4); border-radius: var(--radius-pill); z-index: 100; font-weight: 600; }
.skip:focus { top: var(--space-2); }


/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 48px; min-width: var(--tap-min); padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-pill); border: 2px solid transparent; font: inherit; font-weight: 700;
  text-decoration: none; cursor: pointer; line-height: 1.25;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast), box-shadow var(--dur-base);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--color-sun); color: var(--color-ink); }
.btn-primary:hover { background: #ffc04d; }
.btn-secondary { background: var(--color-link); color: #fff; }
.btn-secondary:hover { background: #094a6b; }
.btn-ghost { background: transparent; color: var(--color-link); border-color: var(--color-link); }
.btn-lg { min-height: 60px; font-size: 1.125rem; padding-inline: var(--space-8); box-shadow: 0 10px 30px -10px rgb(255 182 39 / .7); }

/* ---------- illustration system v2.1 (W-0093): ink, paper, amber only; flat, no gradients or shadows. Ink swaps to paper on night grounds. ---------- */
.ill { color: var(--color-ink); --ill-bg: var(--color-paper); }
.ill .bg { fill: var(--ill-bg); }
.on-night .ill, .ill.night { color: var(--color-paper); --ill-bg: var(--color-night); }

/* ---------- hero (W-0101): rev 4d deep night-to-dawn sky with a warm glow under the house, static faint stars, wordmark ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden; color: var(--color-paper);
  background:
    radial-gradient(80% 45% at 70% 70%, rgb(255 110 60 / .35), rgb(255 150 70 / .1) 55%, transparent 75%),
    linear-gradient(180deg, #050c18 0%, #0a1b30 40%, #123550 72%, #1b3f5e 100%);
  background-color: var(--color-night);
  padding-bottom: var(--space-8);
}
.hero::before {
  content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 2px; border-radius: 50%; z-index: -1; pointer-events: none; opacity: .7;
  box-shadow: 6vw 7vh #fff, 14vw 22vh #cfe3f2, 23vw 10vh #fff, 31vw 30vh #cfe3f2, 41vw 5vh #fff, 48vw 18vh #cfe3f2, 57vw 9vh #fff, 66vw 26vh #cfe3f2, 74vw 6vh #fff, 83vw 20vh #cfe3f2, 91vw 11vh #fff, 96vw 28vh #cfe3f2, 36vw 14vh #fff, 62vw 15vh #fff, 10vw 14vh #fff, 19vw 4vh #cfe3f2, 52vw 28vh #fff, 88vw 5vh #fff;
}
.topbar { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-4); gap: var(--space-4); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-paper); min-height: 44px; }
.brand .mark { width: 36px; height: 36px; flex: none; color: var(--color-paper); }
.brand-name { font-family: var(--font-heading); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; white-space: nowrap; } /* W-0119: wordmark Sol de Volta in Plus Jakarta Sans 800 (self-hosted); W-0120 logo v4: tracking -2%, ink only, plain "o" below 32 px */
.lang { display: inline-flex; flex: none; border: 2px solid rgb(159 201 227 / .6); border-radius: var(--radius-pill); }
.lang a, .lang span { border-radius: var(--radius-pill); min-width: 48px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; text-decoration: none; padding: 0 var(--space-3); font-size: var(--fs-small); }
.lang .lang-cur { background: var(--color-sky-on-night); color: var(--color-ink); }
.lang .lang-link { color: var(--color-sky-on-night); }
@media (max-width: 359px) { .topbar { gap: var(--space-2); } .brand { gap: 6px; } .brand-name { font-size: 1.125rem; } .lang a, .lang span { min-width: 40px; padding: 0 var(--space-2); } }
.hero-grid { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-6); }
.hero-copy { display: contents; }
/* W-0125 (spec H): eyebrow > H1 > amber tagline > CTA > service chips. On phones the art sits between the tagline and the CTA (W-0096). */
.hero .eyebrow { order: 0; display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-small); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-sky-on-night); }
.hero .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--color-sun); flex: none; }
.hero h1 { order: 1; margin-bottom: 0; text-wrap: balance; font-size: clamp(1.875rem, 1.25rem + 2.6vw, 3.25rem); }
/* W-0131: one-line sub under the H1 (speed and reliability message) */
.hero .hero-sub { order: 2; margin: var(--space-3) 0 0; max-width: 40rem; font-size: clamp(1rem, .95rem + .35vw, 1.1875rem); line-height: 1.4; color: #e6eff6; }
/* W-0164 (review c36 C5): the tagline is a quiet sign-off, not a second headline: body face, medium weight, body size, soft sky colour, a short amber rule */
.hero .tagline { order: 2; margin: var(--space-2) 0 0; display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-weight: 500; font-size: .9375rem; line-height: 1.4; letter-spacing: 0; color: var(--color-sky-on-night); }
.hero .tagline::before { content: ""; flex: none; width: 18px; height: 2px; border-radius: 2px; background: var(--color-sun); }
.hero-fig { order: 3; margin: 0 calc(var(--gutter) * -1); position: relative; padding-inline: var(--space-6); }
.cta-hero { order: 5; margin-bottom: var(--space-3); }
/* W-0145 (audit-c31 s2): the 6 service chips are gone; one proof line (48 h reply, many brands, written price first) and a "Ver serviços" text link next to the CTA */
.cta-hero { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); }
/* W-0161 (founder c35 A3, A4): the "Ver serviços" link is gone (one hero CTA); the proof points are the base of the hero: below the copy and the art,
   centred, one row on wide screens, wrapping centred on phones, on a hairline */
.hero .proof-line { list-style: none; margin: var(--space-6) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid rgb(159 201 227 / .22);
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-6); font-size: var(--fs-small); font-weight: 600; line-height: 1.3; color: #e6eff6; text-align: center; }
.hero .proof-line li { display: inline-flex; align-items: center; gap: 6px; }
.hero .proof-line .ico { width: 18px; height: 18px; flex: none; color: var(--color-sun); }
@media (min-width: 768px) { .hero .proof-line { margin-top: var(--space-8); padding-top: var(--space-6); gap: var(--space-3) var(--space-12); font-size: 1rem; } .hero .proof-line .ico { width: 20px; height: 20px; } }
/* W-0161 (founder c35 A2): one H1 line per sentence */
.hero h1 .h1-l { display: block; }
.scene { display: block; width: 100%; height: auto; overflow: visible; }
.fn-glue { white-space: nowrap; } /* W-0137 (founder QA 2026-10-12): the last word and its footnote mark never wrap apart (home trust cards, service pages) */

/* ---------- hero scene (W-0096): isometric house, flat v2.1 style, 2 px ink edges ---------- */
.scene.iso * { vector-effect: non-scaling-stroke; }
.pause {
  position: absolute; right: var(--space-4); bottom: var(--space-2); display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; background: var(--color-night); color: var(--color-paper); cursor: pointer;
  border: 2px solid var(--color-paper); border-radius: 10px;
}
.pause:hover { background: var(--color-paper); color: var(--color-night); }
.pause-ico { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; display: inline-block; }
.pause[aria-pressed="true"] .pause-ico { width: 0; height: 0; border: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 12px solid currentColor; margin-left: 3px; }

/* Still frame (also the reduced-motion frame): full-colour midday, sun and glow up, lit panel cell, battery 4 of 5, windows dark, nothing moving.
   Motion starts after load (class .anim): rev 4d 8 s day/night loop, opacity and transform only; particles ride SVG paths (offset-path). */
.iso .halo { transform-box: fill-box; transform-origin: center; }
.iso .dawn { opacity: .45; }
.iso .beam { opacity: .19; }
.iso .shine { opacity: .4; }
.iso .veil, .iso .stars-in, .iso .seg4, .iso .pt { opacity: 0; }
.iso .wglow, .iso .spill { opacity: .08; }
.iso .wlit { opacity: .12; }
.iso .pt { offset-rotate: 0deg; offset-distance: 0%; }
/* W-0143 (SP-9, CSP style-src 'self'): values that were inline style attributes in art.mjs. Paths and delays must match FLOW_CSS in art.mjs (build.mjs checks). */
.iso .pa { offset-path: path('M176,96 C232,66 292,96 322,140'); }
.iso .pb { offset-path: path('M412,186 C436,156 464,156 478,188'); }
.iso .pc { offset-path: path('M480,226 C474,252 450,252 436,228'); }
.iso .pd { offset-path: path('M430,270 Q434,300 392,303 L314,264 Q306,252 314,238'); }
.iso .d0 { --dl: 0s; }
.iso .d8 { --dl: -0.8s; }
.iso .d16 { --dl: -1.6s; }
.iso .d3 { --dl: -0.3s; }
.iso .d11 { --dl: -1.1s; }
.iso .d19 { --dl: -1.9s; }
.iso .d5 { --dl: -0.5s; }
.iso .d14 { --dl: -1.4s; }
.iso .n0 { --n: 0; } .iso .n1 { --n: 1; } .iso .n2 { --n: 2; } .iso .n3 { --n: 3; } .iso .n4 { --n: 4; } .iso .n5 { --n: 5; }
.mark .mark-c { fill: var(--mark-cell, #B78C2E); }
.iso .flowlines { opacity: .5; }
.iso { --t0: -3.6s; } /* the loop starts at midday so the still frame and the first moving frame match */
.hero.anim .sunrise { animation: rise 8s ease-in-out var(--t0) infinite; }
.hero.anim .halo { animation: halo 4s ease-in-out var(--t0) infinite; }
.hero.anim .dawn { animation: dawn 8s ease-in-out var(--t0) infinite; }
.hero.anim .veil { animation: veil 8s ease-in-out var(--t0) infinite; }
.hero.anim .beam { animation: beam 8s ease-in-out var(--t0) infinite; }
.hero.anim .shine { animation: shine 8s ease-in-out infinite; animation-delay: calc(var(--t0) + var(--n, 0) * .12s); }
.hero.anim .wglow, .hero.anim .spill { animation: wglow 8s ease-in-out var(--t0) infinite; }
.hero.anim .stars-in { animation: starsin 8s ease-in-out var(--t0) infinite; }
.hero.anim .litcell { animation: litcell 8s ease-in-out var(--t0) infinite; }
.hero.anim .wlit { animation: wlit 8s ease-in-out var(--t0) infinite; }
.hero.anim .seg2 { animation: seg2 8s steps(1, end) var(--t0) infinite; }
.hero.anim .seg3 { animation: seg3 8s steps(1, end) var(--t0) infinite; }
.hero.anim .seg4 { animation: seg4 8s steps(1, end) var(--t0) infinite; }
.hero.anim .led { animation: led 2s ease-in-out infinite; }
.hero.anim .flow-day { animation: flowday 8s ease-in-out var(--t0) infinite; }
.hero.anim .flow-night { animation: flownight 8s ease-in-out var(--t0) infinite; }
.hero.anim .flowlines { animation: lines 8s ease-in-out var(--t0) infinite; }
@supports (offset-path: path('M0 0L1 1')) {
  .hero.anim .pt { animation: ride 2.2s linear infinite; animation-delay: var(--dl, 0s); }
}
.hero.paused .scene *, .hero.offscreen .scene * { animation-play-state: paused; }
@keyframes rise { 0% { transform: translateY(150px); opacity: 0; } 14% { transform: translateY(24px); opacity: .9; } 24%, 54% { transform: translateY(0); opacity: 1; } 70%, 100% { transform: translateY(150px); opacity: 0; } }
@keyframes halo { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes dawn { 0%, 100% { opacity: .3; } 16% { opacity: .95; } 32%, 54% { opacity: .45; } 70%, 94% { opacity: .75; } }
@keyframes veil { 0%, 100% { opacity: .4; } 14% { opacity: .05; } 24%, 54% { opacity: 0; } 70%, 94% { opacity: .8; } }
@keyframes beam { 0%, 14%, 62%, 100% { opacity: 0; } 26% { opacity: .22; } 52% { opacity: .18; } }
@keyframes shine { 0%, 18%, 62%, 100% { opacity: 0; } 34% { opacity: .6; } 50% { opacity: .35; } }
@keyframes wglow { 0%, 100% { opacity: .45; } 14%, 56% { opacity: .08; } 70%, 94% { opacity: .95; } }
@keyframes starsin { 0%, 100% { opacity: .5; } 14%, 54% { opacity: 0; } 70%, 94% { opacity: 1; } }
@keyframes litcell { 0%, 16%, 64%, 100% { opacity: 0; } 28%, 54% { opacity: 1; } }
@keyframes wlit { 0%, 100% { opacity: .55; } 14%, 56% { opacity: .12; } 70%, 94% { opacity: 1; } }
@keyframes seg2 { 0%, 24% { opacity: 0; } 28%, 86% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes seg3 { 0%, 32% { opacity: 0; } 36%, 78% { opacity: 1; } 82%, 100% { opacity: 0; } }
@keyframes seg4 { 0%, 40% { opacity: 0; } 44%, 70% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes led { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes flowday { 0%, 12%, 64%, 100% { opacity: 0; } 20%, 56% { opacity: 1; } }
@keyframes flownight { 0%, 64%, 98%, 100% { opacity: 0; } 72%, 92% { opacity: 1; } }
@keyframes lines { 0%, 100% { opacity: .5; } 20%, 56%, 72%, 92% { opacity: .9; } }
@keyframes ride { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero *, .hero *::before, .hero *::after { animation: none !important; }
  .pause { display: none; }
}

/* scroll reveal (once; off under reduced motion) */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* W-0146 (founder ask 2026-10-12 C, audit-c31 s3 Home P0 + s4): the hero fills the first screen on every viewport: 100svh (100vh fallback),
   no 780 px cap, content centred vertically. Phones: the art is capped (30svh) so H1 + sub + art + CTA fit a 375 x 667 screen. */
.hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.hero > .wrap { flex: 1; display: flex; flex-direction: column; width: 100%; }
.hero-grid { flex: 1; justify-content: center; }
.hero h1 .h1-dot { letter-spacing: 0; margin-left: -0.04em; }
/* W-0161 (review c35 B1): one sticky header on the home page (.site-head): brand, Serviços + Como funciona (from 900 px), the one CTA, language.
   Phones: brand + language at load; the CTA comes in once the hero CTA has scrolled away (app.js .cta-on) and the wordmark makes room for it. */
:root { --nav-h: 64px; }
@media (min-width: 768px) { :root { --nav-h: 76px; } }
.site-head { position: sticky; top: 0; z-index: 60; color: var(--color-paper); background: #050c18; border-bottom: 1px solid transparent; transition: border-color var(--dur-base); }
.site-head.cta-on { border-bottom-color: rgb(159 201 227 / .2); }
.site-head .topbar { height: var(--nav-h); padding-top: 0; }
.hero { min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h)); }
.tb-nav { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.tb-links { display: none; }
.tb-cta { display: none; min-height: 44px; padding-inline: var(--space-4); font-size: var(--fs-small); white-space: nowrap; }
.site-head.cta-on .tb-cta { display: inline-flex; }
@media (max-width: 559px) { .site-head.cta-on .brand-name { display: none; } }
/* W-0164 (review c36 C2): service, brand, city and legal pages use the same header (build.mjs siteHeader, class is-inner). They load no script,
   so their CTA is static: hidden on phones (the hero CTA is in the first screen), shown from 560 px; section links from 900 px as on the home page.
   In-page anchors (sources #nN, FAQ) land below the sticky bar. */
@media (min-width: 560px) { .site-head.is-inner .tb-cta { display: inline-flex; } }
html:has(.site-head) { scroll-padding-top: calc(var(--nav-h) + 8px); }
@media (min-width: 900px) {
  .tb-cta { display: inline-flex; }
  .tb-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
  .tb-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-pill); color: var(--color-paper); font-weight: 600; text-decoration: none; }
  .tb-links a:hover, .tb-links a:focus-visible { background: rgb(159 201 227 / .16); text-decoration: underline; text-underline-offset: 4px; }
  .tb-cta { min-height: 44px; padding-inline: var(--space-6); margin-left: var(--space-2); }
  .topbar .tb-nav + .lang { margin-left: var(--space-2); }
}
@media (min-width: 768px) {
  .hero { padding-bottom: var(--space-8); }
  .hero-grid { display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1fr); gap: 0; flex: 1; padding-top: var(--space-4); align-items: center; align-content: center; }
  .hero-copy { display: block; position: relative; z-index: 2; }
  .hero .eyebrow, .hero h1, .hero .hero-sub, .hero .tagline, .cta-hero, .hero .proof-line, .hero-fig { order: 0; }
  .hero .eyebrow { display: flex; margin-bottom: var(--space-3); }
  /* W-0164 (review c36 C4): 36 px between the H1 and the subline (was 16) */
  .hero h1 { margin-bottom: 2.25rem; font-size: clamp(2.125rem, 1rem + 2.3vw, 2.875rem); }
  .hero .hero-sub { max-width: 34rem; text-wrap: balance; }
  /* W-0161 (review c35 B7), W-0164 (c36 C5): the tagline is a quiet line under the subline, not a second headline */
  .hero .tagline { display: flex; margin: var(--space-4) 0 var(--space-8); font-size: 1rem; }
  .cta-hero { display: flex; margin-bottom: 0; }
  .hero-fig { margin: 0 calc(var(--gutter) * -1) 0 -1rem; padding-inline: 0; }
  .brand-name { font-size: 1.5rem; }
}
/* W-0161 (founder c35 A2): wider text column, the art further right; each H1 sentence on one line */
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
  .hero h1 .h1-l { white-space: nowrap; }
  .hero-fig { margin-right: calc(var(--gutter) * -2); }
  /* W-0164 (review c36 C4): a larger scene fills more of the space above the proof row (less empty band under the CTA); the copy and the scene
     are one block, centred vertically between the header and the proof row (hero-grid align-content: center) */
  .hero-fig .scene { width: 118%; max-width: none; margin-left: -9%; }
}
@media (max-width: 767px) {
  .brand-name { font-size: 1.25rem; }
  .topbar { padding-top: var(--space-2); }
  .hero-grid { padding-top: var(--space-8); } /* W-0137 (founder QA 2026-10-12): the H1 starts clearly below the logo and language toggle (was 8 px) */
  .hero-fig { padding-inline: var(--space-4); }
  .hero-fig .scene { width: 100%; max-height: 30vh; max-height: 30svh; } /* W-0146: art capped so the first screen holds H1, sub, art and CTA */
  .hero .eyebrow { margin-bottom: var(--space-1); }
  .hero .btn-lg { min-height: 52px; }
  .cta-hero { margin-bottom: var(--space-2); }
  .hero { padding-bottom: var(--space-6); }
}