/* Mavilo homepage v4. Locked brand (work/brand-final, 1 Oct 2026).
   One family: Archivo (OFL) for everything. Fraunces is reserved for long reading, which this page has none of.
   Colour: limestone + basalt carry the page; vermilion only on buttons, the V point and one thin rule (story progress). */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/archivo-latin-wght-normal.woff2") format("woff2");
}

/* ---------- 1. Primitive tokens (raw values, never used directly by components) ---------- */
:root {
  --p-limestone: #EFEAE2;
  --p-limestone-2: #E6E0D6;
  --p-limestone-3: #D3CABD;
  --p-basalt: #1F1C1A;
  --p-basalt-2: #2A2623;
  --p-basalt-3: #3A3531;
  --p-earth-deep: #6B5444;   /* muted text on limestone: 5.89 on #EFEAE2, 5.37 on #E6E0D6 */
  --p-stone-light: #B5AA9E;  /* muted text on basalt: 7.43 on #1F1C1A, 6.58 on #2A2623 */
  --p-vermilion: #C42B14;    /* 4.74 with limestone */
  --p-vermilion-dark: #EE5038; /* 4.71 with basalt */
  --p-dusk: #F06834;         /* hero glow only, soft-light over the render; never text */

  --p-font: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --p-size-12: .75rem; --p-size-14: .875rem; --p-size-16: 1rem; --p-size-18: 1.125rem;

  --p-space-1: 4px; --p-space-2: 8px; --p-space-3: 12px; --p-space-4: 16px; --p-space-5: 24px;
  --p-space-6: 32px; --p-space-7: 48px; --p-space-8: 64px; --p-space-9: 96px;
  --p-ease: cubic-bezier(.2, .7, .2, 1);
  --p-dur-1: .2s; --p-dur-2: .6s; --p-dur-3: 1.1s;
}

/* ---------- 2. Semantic tokens (what a colour or size means) ---------- */
:root {
  --surface: var(--p-limestone);
  --surface-raised: var(--p-limestone-2);
  --text: var(--p-basalt);
  --text-muted: var(--p-earth-deep);
  --line: var(--p-limestone-3);
  --line-strong: var(--p-basalt);
  --action: var(--p-vermilion);
  --on-action: var(--p-limestone);
  --point: var(--p-vermilion);
  --inverse: var(--p-basalt);
  --on-inverse: var(--p-limestone);
  --on-inverse-muted: #C9BFB3; /* 9.35 on basalt */
  --focus: var(--p-basalt);
  --drawing-filter: none;

  --font: var(--p-font);
  --gutter: 20px;
  --max: 1320px;
  --space-section: clamp(88px, 11vw, 168px);
  --header-h: 64px;
  color-scheme: light;
}
@media (min-width: 760px) { :root { --gutter: 40px; } }
@media (min-width: 900px) { :root { --header-h: 76px; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: var(--p-basalt); --surface-raised: var(--p-basalt-2);
    --text: var(--p-limestone); --text-muted: var(--p-stone-light);
    --line: var(--p-basalt-3); --line-strong: var(--p-limestone);
    --action: var(--p-vermilion-dark); --on-action: var(--p-basalt); --point: var(--p-vermilion-dark);
    --inverse: var(--p-limestone); --on-inverse: var(--p-basalt); --on-inverse-muted: #5E4E42;
    --focus: var(--p-limestone); --drawing-filter: brightness(.88);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface: var(--p-basalt); --surface-raised: var(--p-basalt-2);
  --text: var(--p-limestone); --text-muted: var(--p-stone-light);
  --line: var(--p-basalt-3); --line-strong: var(--p-limestone);
  --action: var(--p-vermilion-dark); --on-action: var(--p-basalt); --point: var(--p-vermilion-dark);
  --inverse: var(--p-limestone); --on-inverse: var(--p-basalt); --on-inverse-muted: #5E4E42;
  --focus: var(--p-limestone); --drawing-filter: brightness(.88);
  color-scheme: dark;
}

/* ---------- 3. Component tokens ---------- */
:root {
  --btn-bg: var(--action);
  --btn-fg: var(--on-action);
  --btn-h: 52px;
  --btn-hover: color-mix(in srgb, var(--action) 88%, #000); /* light: darker, text stays >= 4.6 */
  --header-bg: color-mix(in srgb, var(--surface) 90%, transparent);
  --card-bg: var(--surface-raised);
  --card-feature-bg: var(--inverse);
  --card-feature-fg: var(--on-inverse);
  --card-feature-muted: var(--on-inverse-muted);
  --band-bg: var(--p-basalt);           /* trade band stays basalt in both themes */
  --band-fg: var(--p-limestone);
  --band-muted: #C9BFB3;
  --rule-accent: var(--point);          /* the one thin accent rule */
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --band-bg: var(--p-basalt-2); --btn-hover: color-mix(in srgb, var(--action) 85%, #fff); } }
:root[data-theme="dark"] { --band-bg: var(--p-basalt-2); --btn-hover: color-mix(in srgb, var(--action) 85%, #fff); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--surface); color: var(--text);
  font: 400 17px/1.6 var(--font); font-variation-settings: normal; overflow-x: clip;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
@media (min-width: 760px) { body { font-size: 18px; } }
img, video { display: block; max-width: 100%; height: auto; }
picture { display: block; }
figure { margin: 0; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ol, ul { margin: 0; padding: 0; list-style: none; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--text); color: var(--surface); padding: 12px 16px; }
.skip:focus { left: 8px; }

/* Type scale: Archivo only. Display sizes are tight and medium weight, body stays 17-18 px. */
.eyebrow {
  font: 500 12.5px/1.4 var(--font); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 20px;
}
.lede { font-size: 1.06em; line-height: 1.55; color: var(--text-muted); max-width: 44ch; }
.num { font: 500 13px/1 var(--font); letter-spacing: .08em; color: var(--text-muted); font-variant-numeric: tabular-nums; }
h1 { font-size: clamp(3.05rem, 1.5rem + 5.6vw, 6.25rem); line-height: 1; letter-spacing: -.035em; font-weight: 560; }
h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); line-height: 1.04; letter-spacing: -.028em; font-weight: 540; }
h3 { font: 560 1.04rem/1.35 var(--font); letter-spacing: -.005em; }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--btn-h); padding: 0 26px; border-radius: 0;
  background: var(--btn-bg); color: var(--btn-fg);
  font: 540 16px/1 var(--font); letter-spacing: .005em; text-decoration: none; white-space: nowrap;
  transition: background-color var(--p-dur-1) ease, transform var(--p-dur-1) ease;
}
.btn:hover { background: var(--btn-hover); }
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: 15px; }
.btn-ghost { background: transparent; color: var(--band-fg); box-shadow: inset 0 0 0 1px currentColor; }
.btn-ghost:hover { background: color-mix(in srgb, var(--band-fg) 10%, transparent); }
.link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration: underline; text-decoration-color: var(--line); }
.link:hover { text-decoration-color: currentColor; }

/* ---------- Wordmark (compact cut) ---------- */
.wordmark { display: block; flex: none; height: 27px; width: auto; aspect-ratio: 3662.8 / 957; overflow: visible; }
.wordmark .wm-body, .wordmark use { fill: currentColor; }
#wordmark .wm-body { fill: currentColor; }
#wordmark .wm-point { fill: var(--point); }
@media (min-width: 900px) { .site-header .wordmark { height: 31px; } }

/* Preview ribbon: on every page until launch, so nobody mistakes the preview for the live site. */
.preview-ribbon { margin: 0; padding: 6px var(--gutter); background: var(--inverse); color: var(--on-inverse); font: 500 13px/1.4 var(--font); text-align: center; letter-spacing: .02em; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.bar { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; text-decoration: none; color: var(--text); padding-top: 4px; }
.descriptor { display: none; font: 450 13.5px/1 var(--font); color: var(--text-muted); letter-spacing: .01em; padding-left: 18px; border-left: 1px solid var(--line); margin-bottom: 4px; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav > a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 15px; font-weight: 450; text-decoration: none; color: var(--text); }
.nav > a:not(.btn):hover { text-decoration: underline; }
.nav a.wide { display: none; }

/* Phone menu: a native disclosure, so it works without JS. */
.menu { position: relative; }
.menu summary {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; cursor: pointer;
  font-size: 15px; font-weight: 450; list-style: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; width: 7px; height: 7px; margin-left: 8px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
.menu[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.menu-panel {
  position: absolute; right: -8px; top: calc(100% + 10px); min-width: 220px; padding: 8px 0;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 40px -20px rgb(0 0 0 / .35);
}
.menu-panel a { display: flex; align-items: center; min-height: 48px; padding: 0 20px; text-decoration: none; }
.menu-panel a:hover { background: var(--surface-raised); }
@media (min-width: 900px) {
  .descriptor { display: inline-block; }
  .nav { gap: 6px; }
  .nav a.wide { display: inline-flex; }
  .menu { display: none; }
  .nav .btn { margin-left: 14px; }
}

/* ---------- Hero ---------- */
.hero { padding-top: clamp(40px, 6vw, 96px); }
.hero-grid { display: grid; gap: 28px; padding-bottom: clamp(36px, 5vw, 72px); }
.hero h1 { max-width: 12ch; }
.hero-aside { display: grid; gap: 24px; align-content: end; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.micro { font-size: 14px; color: var(--text-muted); margin-top: -8px; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.618fr 1fr; gap: 48px; align-items: end; }
}
/* Media box keeps its own ratio, so a video dropped in later causes no layout shift. */
.hero-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface-raised); }
.hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media img { object-position: 84% 50%; }
@media (min-width: 600px) { .hero-media { aspect-ratio: 16 / 9; } }
/* Desktop and tablet show the whole 16:9 frame, so the building is never cropped. */
@media (min-width: 600px) { .hero-media img { object-position: 50% 50%; } }
.hero-media video { opacity: 0; transition: opacity var(--p-dur-2) ease; }
.hero-media.is-playing video { opacity: 1; }
.motion-toggle {
  position: absolute; right: 12px; bottom: 12px; min-height: 44px; padding: 0 14px; border: 0; cursor: pointer;
  background: rgb(31 28 26 / .62); color: var(--p-limestone); font: 500 13px/1 var(--font);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.caption-row {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 24px;
  padding-top: 14px; font-size: 13px; letter-spacing: .02em; color: var(--text-muted);
}

/* Entrance: text rises once on load; the image only settles in scale (never fades, so LCP is not delayed). */
@media (prefers-reduced-motion: no-preference) {
  .hero-title, .hero-aside { animation: rise 520ms var(--p-ease) both; }
  .hero-aside { animation-delay: 90ms; }
  .hero-media img { animation: settle-in 900ms var(--p-ease) both; }
  @keyframes rise { from { opacity: .85; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes settle-in { from { transform: scale(1.015); } to { transform: none; } }
}

/* ---------- Proof strip ---------- */
.proof { border-bottom: 1px solid var(--line); }
.proof-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding-block: 28px; }
.proof-list li { padding: 10px 16px 10px 0; font-size: 15px; color: var(--text-muted); line-height: 1.45; }
.proof-list strong { display: block; color: var(--text); font-weight: 560; font-size: 16px; }
@media (min-width: 900px) {
  .proof-list { grid-template-columns: repeat(4, 1fr); padding-block: 36px; }
  .proof-list li { padding: 0 24px; border-left: 1px solid var(--line); }
  .proof-list li:first-child { padding-left: 0; border-left: 0; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--space-section); }
.section + .section:not(.trust) { padding-top: 0; }
.head { display: grid; gap: 0; margin-bottom: clamp(40px, 6vw, 80px); }
.head .lede { margin-top: 24px; }
@media (min-width: 900px) {
  .head { grid-template-columns: 1.618fr 1fr; column-gap: 48px; align-items: end; }
  .head .eyebrow { grid-column: 1 / -1; }
  .head h2 { max-width: 16ch; }
  .head .lede { margin-top: 0; }
}

/* ---------- Process story ---------- */
/* Default (no JS, and every phone): each step is its image, then its caption. */
.story-steps { display: grid; gap: 40px; }
.story-bar { display: none; }
.frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #fff; margin: 0; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame-plan { background: #EFEAE2; }
.frame-plan img, .frame-drawing img { filter: var(--drawing-filter); }
.story-text { display: grid; grid-template-columns: 40px 1fr; column-gap: 8px; padding-top: 16px; }
.story-text .num { padding-top: 5px; }
.story-text p { grid-column: 2; color: var(--text-muted); margin-top: 6px; max-width: 36ch; }
@media (max-width: 759px) { .story-step .frame { margin-inline: calc(var(--gutter) * -1); } }

/* Wide screens with JS: the four images share one sticky cell and cross-fade while the captions scroll.
   Ordinary page scroll throughout; nothing is pinned by script. --fig-h is measured by main.js. */
@media (min-width: 900px) {
  .js .story-steps {
    --fig-h: 400px;
    --story-top: max(calc(var(--header-h) + 24px), calc(50vh + var(--header-h) / 2 - var(--fig-h) / 2 - 12px));
    grid-template-columns: 1.618fr 1fr; grid-template-rows: repeat(4, auto); column-gap: 64px; row-gap: 0;
  }
  .js .story-step { display: contents; }
  .js .story-step .frame {
    grid-column: 1; grid-row: 1 / span 4; align-self: start;
    position: sticky; top: var(--story-top);
    opacity: 0; transition: opacity .9s var(--p-ease);
  }
  .js .story-step.is-active .frame { opacity: 1; }
  .js .story-step[data-step="1"] .story-text { grid-row: 1; }
  .js .story-step[data-step="2"] .story-text { grid-row: 2; }
  .js .story-step[data-step="3"] .story-text { grid-row: 3; }
  .js .story-step[data-step="4"] .story-text { grid-row: 4; }
  .js .story-text {
    grid-column: 2; align-content: start; min-height: 44vh;
    padding-top: 24px; border-top: 1px solid var(--line); opacity: .38; transition: opacity .5s ease;
  }
  /* The last caption only needs room for the image to stay fully in view while it is read. */
  .js .story-step[data-step="4"] .story-text { min-height: calc(var(--fig-h) / 2 + 96px); }
  .js .story-step.is-active .story-text { opacity: 1; }
  .js .story-text h3 { font-size: 1.5rem; letter-spacing: -.015em; font-weight: 540; }
  /* The page's one thin accent rule: progress through the stages, sitting under the image. */
  .js .story-bar {
    display: block; grid-column: 1; grid-row: 1 / span 4; align-self: start; z-index: 1;
    position: sticky; top: calc(var(--story-top) + var(--fig-h) + 16px); margin-top: calc(var(--fig-h) + 16px);
    height: 2px; background: var(--line);
  }
  .js .story-bar span { display: block; height: 100%; background: var(--rule-accent); transform-origin: 0 50%; transform: scaleX(var(--progress, .25)); transition: transform .5s var(--p-ease); }
}
.stage-note { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; letter-spacing: .02em; color: var(--text-muted); max-width: 72ch; }
@media (prefers-reduced-motion: reduce) {
  .js .story-step .frame, .js .story-text, .js .story-bar span { transition: none; }
}

/* ---------- Studio concepts (work grid) ---------- */
.projects { display: grid; gap: clamp(72px, 9vw, 128px); }
.project-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; margin-bottom: 20px; }
.project-head h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight: 540; letter-spacing: -.02em; }
.project-head p { color: var(--text-muted); font-size: 15px; }
.project figure { margin: 0; }
.project figcaption { padding-top: 10px; font-size: 13px; letter-spacing: .02em; color: var(--text-muted); }
.project-lead img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.views { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 16px; margin-top: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: 8px;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.views li { scroll-snap-align: start; }
.views img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.views .paper img { background: #FBF9F5; object-fit: contain; filter: var(--drawing-filter); }
@media (max-width: 759px) { .project-lead { margin-inline: calc(var(--gutter) * -1); } .project-lead figcaption { padding-inline: var(--gutter); } }
@media (min-width: 900px) {
  .views { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; gap: 24px; overflow: visible; margin-inline: 0; padding-inline: 0; padding-bottom: 0; }
  .views img { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .project img { transition: transform 650ms var(--p-ease); }
  .project figure { overflow: hidden; }
  .project figure:hover img { transform: scale(1.015); }
}


/* ---------- How it works ---------- */
.steps { display: grid; gap: 0; border-top: 1px solid var(--line); }
.steps li { display: grid; grid-template-columns: 40px 1fr; column-gap: 8px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.steps .num { padding-top: 4px; }
.steps p { grid-column: 2; color: var(--text-muted); margin-top: 6px; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, 1fr); column-gap: 32px; border-top: 0; }
  .steps li { display: block; border-bottom: 0; border-top: 1px solid var(--line-strong); padding: 24px 0 0; }
  .steps .num { display: block; margin-bottom: 28px; }
  .steps p { margin-top: 10px; max-width: 30ch; }
}

/* ---------- Prices ---------- */
.pair { display: grid; gap: 32px; margin-bottom: clamp(48px, 6vw, 80px); }
.pair img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pair figure:first-child img { background: #FBF9F5; filter: var(--drawing-filter); }
.pair figcaption { padding-top: 12px; font-size: 13px; color: var(--text-muted); letter-spacing: .02em; }
@media (min-width: 760px) { .pair { grid-template-columns: 1fr 1fr; gap: 24px; } }

.plans { display: grid; gap: 16px; }
.plan {
  position: relative; display: grid; align-content: start; gap: 10px;
  padding: 28px 24px 30px; border: 1px solid var(--line); background: var(--card-bg);
}
.plan h3 { font-size: 1.45rem; line-height: 1.2; font-weight: 540; letter-spacing: -.015em; }
.plan .sub { font-size: .62em; font-weight: 400; color: var(--text-muted); letter-spacing: 0; white-space: nowrap; }
.price { font-size: 2.7rem; line-height: 1; letter-spacing: -.035em; font-weight: 520; font-variant-numeric: lining-nums tabular-nums; margin: 6px 0 8px; }
.price .gst { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--text-muted); vertical-align: middle; margin-left: 6px; }
.plan p:last-child { color: var(--text-muted); }
/* Featured card: basalt on the limestone page, limestone on the basalt page. Badge stays neutral (no accent on copy). */
.plan-best { border-color: var(--card-feature-bg); background: var(--card-feature-bg); color: var(--card-feature-fg); }
.plan-best .sub, .plan-best .price .gst, .plan-best p:last-child { color: var(--card-feature-muted); }
.badge {
  justify-self: start; font: 560 12px/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
  color: var(--card-feature-fg); padding: 0 0 6px;
}

/* Price display switch. Add .prices-from to #prices to show one "From $490 incl. GST" line instead. */
.from-line { display: none; }
.prices-from .plan .price, .prices-from .plan .save { display: none; }
.prices-from .from-line {
  display: block; margin-top: 24px; font: 500 clamp(1.35rem, 1.1rem + 1vw, 1.85rem)/1.25 var(--font);
  letter-spacing: -.015em; max-width: 40ch;
}
@media (min-width: 900px) {
  .plans { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .plan { padding: 56px 32px 40px; }
  .plan-best .badge { top: 22px; }
  .plan-best .badge { position: absolute; top: 16px; left: 32px; }
}

.offer-foot { display: grid; gap: 28px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.promise { font-size: 1.06em; max-width: 52ch; }
.promise strong { font-weight: 600; }
.fine { font-size: 14px; color: var(--text-muted); max-width: 64ch; margin-top: 10px; }
.offer-foot .btn { justify-self: start; }
@media (min-width: 900px) { .offer-foot { grid-template-columns: 1fr auto; align-items: center; gap: 48px; } }

/* ---------- Trust ---------- */
.trust { background: var(--surface-raised); }
.trust-grid { display: grid; gap: 40px; }
.h2-sub { display: block; margin-top: 16px; font: 400 1.06rem/1.5 var(--font); letter-spacing: 0; color: var(--text-muted); }
.founder { font-size: clamp(1.55rem, 1.15rem + 1.6vw, 2.45rem); line-height: 1.18; letter-spacing: -.025em; font-weight: 500; max-width: 22ch; }
.assure { margin: 48px 0 0; display: grid; gap: 28px; }
.assure div { border-top: 1px solid var(--line); padding-top: 20px; }
.assure dt { font-weight: 560; }
.assure dd { margin: 6px 0 0; color: var(--text-muted); max-width: 46ch; }
@media (min-width: 900px) {
  .trust-grid { grid-template-columns: 1fr 1.618fr; gap: 48px; }
  .trust h2 { max-width: 12ch; }
  .assure { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

/* ---------- Trade band ---------- */
.trade { background: var(--band-bg); color: var(--band-fg); padding-block: clamp(72px, 9vw, 128px); }
.trade .eyebrow { color: var(--band-muted); }
.trade-grid { display: grid; gap: 28px; }
.trade p:not(.eyebrow) { color: var(--band-muted); max-width: 46ch; margin-bottom: 28px; }
.trade :focus-visible { outline-color: var(--band-fg); }
@media (min-width: 900px) { .trade-grid { grid-template-columns: 1.618fr 1fr; gap: 48px; align-items: end; } }

/* ---------- FAQ ---------- */
.faq { display: grid; border-top: 1px solid var(--line); }
.qa { padding: 28px 0; border-bottom: 1px solid var(--line); }
.qa h3 { font-size: 1.08rem; margin-bottom: 10px; max-width: 44ch; text-wrap: pretty; }
.qa p { color: var(--text-muted); max-width: 62ch; }
@media (min-width: 900px) {
  .faq { grid-template-columns: 1fr 1fr; column-gap: 64px; border-top: 0; }
  .qa { border-bottom: 0; border-top: 1px solid var(--line); padding: 32px 0 40px; }
}

/* ---------- Close ---------- */
.close { padding-block: 0 var(--space-section); }
.close-inner { display: grid; justify-items: start; gap: 20px; border-top: 1px solid var(--line-strong); padding-top: clamp(48px, 7vw, 96px); }
.close h2 { max-width: 16ch; }
.close .btn { margin-top: 12px; }

.close .micro { margin-top: 0; }

/* Steps on the basalt band (trade page). */
.trade .steps { border-color: rgb(239 234 226 / .22); }
.trade .steps li { border-color: rgb(239 234 226 / .22); }
.trade .steps .num, .trade .steps p { color: var(--band-muted); }
.trade .steps p { margin-bottom: 0; }
@media (min-width: 900px) { .trade .steps li { border-top-color: var(--band-fg); } }

/* Price cards: what's included beside every price (CONVERSION-PLAYBOOK-01 rev 2, item 3). */
.incl { display: grid; gap: 8px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.45; }
.incl li { position: relative; padding-left: 20px; color: var(--text-muted); }
.incl li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 9px; height: 5px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
.plan-best .incl { border-top-color: color-mix(in srgb, var(--card-feature-fg) 22%, transparent); }
.plan-best .incl li { color: var(--card-feature-muted); }
.plan .save { font-size: 15px; font-weight: 560; margin-top: -4px; }
.plan-notes { display: grid; gap: 10px; margin-top: 32px; font-size: 15px; color: var(--text-muted); max-width: 80ch; }
.plan-notes strong { color: var(--text); font-weight: 560; }
@media (min-width: 900px) { .plan-notes { grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: none; } }
.switch { font-size: 15px; color: var(--text-muted); margin-top: -12px; }
.switch .link { min-height: 44px; }

/* Lead magnet (secondary capture). Quiet: no accent, an outlined button, below the FAQ. */
.guide { padding-block: clamp(64px, 8vw, 112px); background: var(--surface-raised); }
.guide-grid { display: grid; gap: 32px; }
.guide h2 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); max-width: 18ch; }
.guide .lede { margin-top: 16px; }
.guide-form { display: grid; gap: 12px; align-content: start; max-width: 460px; }
.guide-form .field { font-size: 14px; color: var(--text-muted); }
.guide-form input[type=email] { min-height: 48px; padding: 0 14px; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--text-muted); border-radius: 0; }
.guide-form .consent { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; font-size: 14px; color: var(--text-muted); cursor: pointer; }
.guide-form .consent input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--text); }
.btn-quiet { justify-self: start; background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px currentColor; }
.btn-quiet:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.form-status { font-size: 14px; color: var(--text); }
.form-status:empty { display: none; }
.form-note { font-size: 14px; color: var(--text-muted); }
@media (min-width: 900px) { .guide-grid { grid-template-columns: 1.618fr 1fr; gap: 64px; align-items: end; } }

/* ---------- Founder slot ---------- */
.founder-card { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start; }
.portrait-slot {
  aspect-ratio: 4 / 5; display: grid; place-items: end start; padding: 8px;
  background: var(--surface); border: 1px dashed color-mix(in srgb, var(--text-muted) 55%, transparent);
  font-size: 11px; line-height: 1.3; color: var(--text-muted);
}
.founder-bio { margin-top: 14px; color: var(--text-muted); max-width: 46ch; }
.assure .dd-link { margin-top: 2px; }
@media (min-width: 900px) { .founder-card { grid-template-columns: 148px 1fr; gap: 32px; } }

/* ---------- Inner pages (trade, privacy, terms) ---------- */
.page-head { padding-block: clamp(48px, 7vw, 112px) clamp(32px, 4vw, 56px); }
.page-head h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.4rem); max-width: 18ch; }
.page-head .lede { margin-top: 24px; max-width: 52ch; }
.page-head .actions { margin-top: 32px; }
.page-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tiers { display: grid; gap: 16px; }
.tier { padding: 28px 24px; border: 1px solid var(--line); background: var(--card-bg); display: grid; gap: 8px; align-content: start; }
.tier h3 { font-size: 1.3rem; font-weight: 540; letter-spacing: -.01em; }
.tier .from { font-size: 1.15rem; font-weight: 560; }
.tier p:not(.from) { color: var(--text-muted); }
.tier .scope { font-size: 14px; }
@media (min-width: 900px) { .tiers { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.cols { display: grid; gap: 48px; }
@media (min-width: 900px) { .cols { grid-template-columns: 1fr 1fr; gap: 64px; } }
.ticks { display: grid; gap: 0; border-top: 1px solid var(--line); }
.ticks li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.ticks .req { color: var(--text-muted); font-size: 14px; margin-left: 8px; }
.cols h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); margin-bottom: 24px; }
.cols h3 { font-size: 1.15rem; margin: 0 0 8px; }
.cols h3 + p { color: var(--text-muted); margin-bottom: 28px; }
.prose { max-width: 70ch; padding-bottom: var(--space-section); }
.prose h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); margin: 56px 0 14px; }
.prose p, .prose li { color: var(--text-muted); }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: 14px; }
.prose ul { list-style: disc; padding-left: 1.2em; display: grid; gap: 10px; }
.prose b, .prose strong { color: var(--text); font-weight: 560; }
.prose a { color: var(--text); padding-block: 13px; } /* inline links get a 44 px tap height without moving the text */
.prose .updated { font-size: 14px; }
.tablewrap { overflow-x: auto; margin-top: 18px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); }
.prose th { color: var(--text); font-weight: 560; }
.prose td { color: var(--text-muted); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 56px 64px; font-size: 14px; color: var(--text-muted); }
.site-footer .brand { color: var(--text); }
.site-footer .wordmark { height: 24px; }
.foot-grid { display: grid; gap: 32px; }
.foot-note { margin-top: 14px; }
.mail { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); }
.concept { max-width: 60ch; }
.concept strong { color: var(--text); font-weight: 560; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 12px; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--text); }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1fr 1.618fr; gap: 48px; } }

/* ---------- Calm scroll motion (CSS only, where supported and welcome) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .pair img {
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    @keyframes settle { from { opacity: .85; transform: scale(1.025); } to { opacity: 1; transform: none; } }
    .pair picture { overflow: hidden; }
  }
  /* Page cross-fades between Mavilo pages (Chromium; other browsers just navigate). */
  @view-transition { navigation: auto; }
}
/* Live build: the brand line sits beside the wordmark only on wide screens. */
@media (max-width: 1199px) { .descriptor { display: none; } }
.founder-card .portrait { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--surface); }

/* Dark mode buttons (round 4 fix pass): the same treatment as light, limestone on vermilion (4.7:1), darker on hover. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --btn-bg: var(--p-vermilion); --btn-fg: var(--p-limestone); --btn-hover: color-mix(in srgb, var(--p-vermilion) 88%, #000); } }
:root[data-theme="dark"] { --btn-bg: var(--p-vermilion); --btn-fg: var(--p-limestone); --btn-hover: color-mix(in srgb, var(--p-vermilion) 88%, #000); }

/* Free guides (/guides/) */
:root { --guide-cover-w: 220px; --guide-rule: var(--line-strong); --guide-shadow: 0 1px 0 var(--line), 0 22px 44px -28px rgba(31, 28, 26, .55); }
.guides { display: grid; gap: clamp(48px, 6vw, 80px); padding-bottom: clamp(56px, 7vw, 112px); }
@media (min-width: 1100px) { .guides { grid-template-columns: 1fr 1fr; gap: 64px; } }
.guide-card { display: grid; grid-template-columns: minmax(108px, 34%) 1fr; grid-template-areas: "cover text" "dl dl"; gap: 20px; align-items: start; border-top: 1px solid var(--guide-rule); padding-top: 28px; }
@media (min-width: 600px) { .guide-card { grid-template-columns: var(--guide-cover-w) 1fr; grid-template-areas: "cover text" "cover dl"; grid-template-rows: auto 1fr; gap: 16px 36px; } }
.guide-cover { grid-area: cover; margin: 0; }
.guide-cover img { display: block; width: 100%; height: auto; aspect-ratio: 360 / 509; background: var(--surface-raised); box-shadow: var(--guide-shadow); }
.guide-text { grid-area: text; }
.guide-for { font: 500 12px/1.4 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }
.guide-card h2 { font-size: clamp(1.45rem, 1.15rem + 1.3vw, 2.2rem); max-width: none; line-height: 1.08; letter-spacing: -.02em; }
.guide-sub { margin-top: 12px; color: var(--text-muted); max-width: 38ch; }
.guide-meta { margin-top: 14px; font-size: 14px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.guide-dl { grid-area: dl; align-self: end; margin: 0; }
.guide-dl .btn { width: 100%; }
@media (min-width: 600px) { .guide-dl .btn { width: auto; } }
.page-head .fine { margin-top: 16px; }

/* "What happens next" under the sent message on the brief */
#nextLine b { color: var(--text); font-weight: 560; }

/* Hero over the render (owner feedback, 2 Oct). The image is the hero; words sit on a basalt scrim at its foot.
   The stage is basalt underneath, so the words read before the image arrives and in both themes. */
:root {
  --hero-ink: var(--p-basalt);
  --hero-fg: var(--p-limestone);
  --hero-fg-soft: var(--p-limestone-2);
  --hero-rule: color-mix(in srgb, var(--p-limestone) 55%, transparent);
  --hero-scrim-rgb: 31 28 26;   /* basalt, so the scrim melts into the stage below the image */
  --hero-scrim: linear-gradient(to top, rgb(var(--hero-scrim-rgb) / 1) 0%, rgb(var(--hero-scrim-rgb) / 1) 40%, rgb(var(--hero-scrim-rgb) / .8) 48%, rgb(var(--hero-scrim-rgb) / .55) 58%, rgb(var(--hero-scrim-rgb) / .25) 68%, rgb(var(--hero-scrim-rgb) / 0) 76%);
  --hero-scrim-side: none;
  --hero-min-h: 88svh;
  --hero-tag-bg: rgb(var(--hero-scrim-rgb) / .72);
}
/* Short or narrow phones (HERO-01 round 2, ruling 3): an extra stop near 70% so the eyebrow and h1 never sit on bare glass. */
@media (max-width: 899px) and (orientation: portrait) and (max-height: 699px), (max-width: 375px) and (orientation: portrait) {
  :root { --hero-scrim: linear-gradient(to top, rgb(var(--hero-scrim-rgb) / 1) 0%, rgb(var(--hero-scrim-rgb) / 1) 40%, rgb(var(--hero-scrim-rgb) / .86) 48%, rgb(var(--hero-scrim-rgb) / .76) 58%, rgb(var(--hero-scrim-rgb) / .66) 70%, rgb(var(--hero-scrim-rgb) / .3) 80%, rgb(var(--hero-scrim-rgb) / 0) 88%); }
}
@media (min-width: 900px) {
  :root {
    /* The line under the hero shows above the fold at 1440x900 and 1366x768 (ruling 1). */
    --hero-min-h: min(calc(100svh - 132px), 760px);
    /* Round 3: eased stops (no straight-line kinks), so neither gradient leaves a visible seam in the sky or lawn. */
    --hero-scrim: linear-gradient(to top, rgb(var(--hero-scrim-rgb) / .78) 0%, rgb(var(--hero-scrim-rgb) / .64) 16%, rgb(var(--hero-scrim-rgb) / .48) 30%, rgb(var(--hero-scrim-rgb) / .31) 42%, rgb(var(--hero-scrim-rgb) / .17) 52%, rgb(var(--hero-scrim-rgb) / .07) 62%, rgb(var(--hero-scrim-rgb) / 0) 72%);
    /* Lighter and further left than round 1, so the house, tree and sky stay golden (ruling 3); about .7/.55/.25/0, feathered. */
    --hero-scrim-side: linear-gradient(to right, rgb(var(--hero-scrim-rgb) / .7) 0%, rgb(var(--hero-scrim-rgb) / .64) 10%, rgb(var(--hero-scrim-rgb) / .55) 20%, rgb(var(--hero-scrim-rgb) / .41) 28%, rgb(var(--hero-scrim-rgb) / .25) 36%, rgb(var(--hero-scrim-rgb) / .13) 44%, rgb(var(--hero-scrim-rgb) / .05) 52%, rgb(var(--hero-scrim-rgb) / 0) 60%);
  }
}
.hero { padding-top: 0; }
.hero-stage { position: relative; display: grid; align-content: end; min-height: var(--hero-min-h); background: var(--hero-ink); color: var(--hero-fg); isolation: isolate; }
.hero .hero-media { position: absolute; inset: 0; aspect-ratio: auto; background: var(--hero-ink); z-index: -1; }
.hero .hero-media::after { content: ""; position: absolute; inset: 0; background: var(--hero-scrim-side), var(--hero-scrim); pointer-events: none; }
.hero .hero-media img { object-position: 50% 62%; }
@media (max-width: 899px) and (orientation: portrait) {
  /* Phone: the render fills the top of the stage wide enough to read as a whole house (pergola, slider, window, earth wall),
     then melts into the basalt scrim the words sit on. The house stays in the top two thirds. */
  /* Round 2: the reassurance line and trade link now sit in the stage too, so the house is drawn smaller (62%) to stay above the words. */
  .hero .hero-media img { inset: 0 0 auto 0; height: 62%; object-position: 68% 50%; }
}
/* Tablet portrait (round 3, nice-to-have): the render runs further down behind the words, so the lawn fills what was a flat dark band. */
@media (min-width: 600px) and (max-width: 899px) and (orientation: portrait) {
  :root { --hero-scrim: linear-gradient(to top, rgb(var(--hero-scrim-rgb) / 1) 0%, rgb(var(--hero-scrim-rgb) / .97) 26%, rgb(var(--hero-scrim-rgb) / .86) 36%, rgb(var(--hero-scrim-rgb) / .64) 46%, rgb(var(--hero-scrim-rgb) / .36) 55%, rgb(var(--hero-scrim-rgb) / .12) 63%, rgb(var(--hero-scrim-rgb) / 0) 70%); }
  .hero .hero-media img { height: 76%; object-position: 60% 50%; }
}
/* Desktop: a soft local shade behind the words only, so the side scrim can stay light and the house, tree and sky stay golden. */
@media (min-width: 900px) {
  /* Round 3: the shade travels with the words (a pool centred on the copy) and fades to 0 inside its own box,
     so it has no edge anywhere (the old box edge was the seam) and still covers the h1 on short windows like 1024x600. */
  .hero-stage { overflow: clip; }
  .hero-copy { position: relative; }
  .hero-copy::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: -260px; width: 1100px; top: -120px; bottom: -80px;
    background: radial-gradient(closest-side, rgb(var(--hero-scrim-rgb) / .8) 0%, rgb(var(--hero-scrim-rgb) / .76) 52%, rgb(var(--hero-scrim-rgb) / .6) 68%, rgb(var(--hero-scrim-rgb) / .36) 82%, rgb(var(--hero-scrim-rgb) / .14) 93%, rgb(var(--hero-scrim-rgb) / 0) 100%); }
}
.hero .motion-toggle { top: 12px; bottom: auto; z-index: 1; }
/* The concept label on the first screen (ruling 4): just under the header on phones, bottom-right on desktop. */
.hero-tag { position: absolute; top: 12px; left: var(--gutter); z-index: 1; margin: 0; padding: 7px 10px; background: var(--hero-tag-bg); color: var(--hero-fg); font: 500 12px/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; }
@media (min-width: 900px) { .hero-tag { top: auto; left: auto; right: var(--gutter); bottom: 24px; } }
.hero-copy { --focus: var(--p-limestone); display: grid; gap: 22px; width: 100%; padding-block: 56px 28px; text-shadow: 0 1px 14px rgb(var(--hero-scrim-rgb) / .45); }
.hero-copy .eyebrow { color: var(--hero-fg); margin-bottom: 14px; }
.hero-copy h1 { color: var(--hero-fg); max-width: 13ch; font-size: clamp(2.6rem, 1.3rem + 5.2vw, 5rem); }
.hero-copy .lede { color: var(--hero-fg-soft); max-width: 40ch; }
.hero-copy .hero-aside { gap: 20px; }
.hero-copy .link { color: var(--hero-fg); text-decoration-color: var(--hero-rule); }
.hero-copy .link:hover { text-decoration-color: currentColor; }
.hero-copy .btn { text-shadow: none; }
/* Reassurance line and trade link sit 12px under the buttons, inside the stage (ruling 2). */
.hero-notes { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; margin-top: -8px; }
.hero-notes .micro { margin-top: 0; color: var(--hero-fg-soft); }
.hero-notes .switch { margin-top: 0; color: var(--hero-fg-soft); }
.hero-foot { padding-block: 14px 4px; }
.hero-foot .caption-row { display: block; padding-top: 0; }
/* Short or narrow phones: tighter type so the CTA, the reassurance line and the trade link all clear the fold at 360x640. */
@media (max-width: 899px) and (orientation: portrait) and (max-height: 699px), (max-width: 375px) and (orientation: portrait) {
  .hero-copy { gap: 14px; padding-block: 52px 18px; }
  .hero-copy .eyebrow { margin-bottom: 10px; }
  .hero-copy h1 { font-size: 2.35rem; }
  .hero-copy .lede { font-size: 16px; line-height: 1.5; }
  .hero-copy .hero-aside { gap: 14px; }
  .hero-copy .actions { gap: 4px 18px; }
  .hero-copy .btn { padding: 0 20px; }
  .hero-notes { margin-top: -2px; font-size: 15px; gap: 0 16px; }
  .hero-notes .micro { font-size: 14px; }
}
@media (min-width: 900px) {
  .hero-copy { grid-template-columns: minmax(0, 40rem); padding-block: 64px 40px; }
  .hero-foot { padding-block: 16px 8px; }
}
/* Trade line (round 3): "Designer or builder?" never strands from its link; the whole line drops below the reassurance line instead. */
.hero-notes .switch { white-space: nowrap; }
@media (max-width: 375px) { .hero-copy .hero-notes .switch { font-size: 14px; } }   /* 14px fits the one line in the 320px column at 360 */
@media (max-width: 339px) { .hero-notes .switch { white-space: normal; } }
/* Phone portrait (HERO-01 round 4, owner): the whole hero block is centred. Tablet portrait, landscape and desktop stay left-aligned. */
@media (max-width: 599px) and (orientation: portrait) {
  /* Round 4 fix pass (brand-editor 2): the stage leaves room for the full two-line caption on the first screen. */
  :root { --hero-min-h: min(88svh, calc(100svh - var(--header-h) - 68px)); }
  .hero-copy, .hero-foot .caption-row { text-align: center; }
  .hero-copy h1, .hero-copy .lede { margin-inline: auto; }
  .hero-copy .lede { text-wrap: pretty; }
  .hero-copy .actions, .hero-notes { justify-content: center; }
}
/* Landscape phones and short landscape windows (HERO-01 round 4, owner mark-up): back to the left-aligned column of desktop,
   keeping round 3's fit (h1 capped at 2.6rem, block centred in the stage height, so nothing clips at 844x390, 740x360, 667x375).
   The sticky header already carries "Start your brief", so the hero drops its copy of that button, and the reassurance line
   (the lede already says "however rough"). What is left reads as one easy line of travel: eyebrow, headline, one sentence,
   then two quiet links stacked, never side by side. */
@media (orientation: landscape) and (max-height: 500px), (max-width: 899px) and (orientation: landscape) {
  :root {
    --hero-min-h: calc(100svh - 64px);
    --hero-scrim-side: linear-gradient(to right, rgb(var(--hero-scrim-rgb) / .84) 0%, rgb(var(--hero-scrim-rgb) / .8) 28%, rgb(var(--hero-scrim-rgb) / .66) 42%, rgb(var(--hero-scrim-rgb) / .44) 54%, rgb(var(--hero-scrim-rgb) / .22) 66%, rgb(var(--hero-scrim-rgb) / .08) 80%, rgb(var(--hero-scrim-rgb) / 0) 100%);
    --hero-scrim: linear-gradient(rgb(var(--hero-scrim-rgb) / .14), rgb(var(--hero-scrim-rgb) / .14));
  }
  .hero-stage { align-content: center; }
  .hero-copy::before { content: none; }
  /* Round 4 fix pass: 10px top, 34px bottom lifts the copy about 12px, so the trade line clears the bottom-right tag. */
  .hero-copy { grid-template-columns: minmax(0, 30rem); gap: 14px; padding-block: 10px 34px; }
  .hero-copy .eyebrow { margin-bottom: 6px; }
  .hero-copy h1 { font-size: clamp(2rem, 1.1rem + 3.2vw, 2.6rem); max-width: none; }
  .hero-copy .lede { font-size: 16px; line-height: 1.45; max-width: 40ch; }
  .hero-copy .hero-aside { gap: 4px; }
  .hero-copy .actions .btn, .hero-notes .micro { display: none; }
  .hero-copy .actions { margin-top: 4px; }
  .hero-notes { margin-top: 0; }
  .hero-tag { top: auto; left: auto; right: var(--gutter); bottom: 12px; }
}
@media (orientation: landscape) and (max-height: 370px) {
  .hero-copy .eyebrow { display: none; }
}
/* COMMERCIAL-R2: the longer commercial lede pushed the homeowner link below the fold at 740x360 and 667x375, and the
   caption under the hero to 780 at 1366x768. Landscape phones get a wider lede (fewer lines) and a tighter column;
   short desktop windows trim the copy padding so the caption sits on the first screen. */
@media (orientation: landscape) and (max-height: 500px), (max-width: 899px) and (orientation: landscape) {
  .hero-copy { grid-template-columns: minmax(0, 36rem); gap: 10px; padding-block: 8px 30px; }
  .hero-copy .lede { max-width: 60ch; font-size: 15px; line-height: 1.4; }
  .hero-copy h1 { font-size: clamp(1.9rem, 1rem + 3vw, 2.4rem); }
}
@media (min-width: 900px) and (max-height: 820px) {
  .hero-copy { padding-block: 40px 24px; gap: 18px; }
  .hero-copy .lede { max-width: 48ch; }
}

/* R5 warmth */
:root {
  --hero-glow-core: color-mix(in srgb, var(--p-dusk) 85%, transparent);
  --hero-glow-mid: color-mix(in srgb, var(--p-dusk) 32%, transparent);
  --selection-bg: color-mix(in srgb, var(--text) 14%, var(--surface));
}
::selection { background: var(--selection-bg); color: var(--text); }
/* Regular phones: the eyebrow sits on the lit deck, so the scrim climbs a little higher (worst pixel 2.9 to 5.3:1 at 390x844). */
@media (max-width: 599px) and (min-width: 376px) and (min-height: 700px) and (orientation: portrait) {
  :root { --hero-scrim: linear-gradient(to top, rgb(var(--hero-scrim-rgb) / 1) 0%, rgb(var(--hero-scrim-rgb) / 1) 40%, rgb(var(--hero-scrim-rgb) / .86) 48%, rgb(var(--hero-scrim-rgb) / .72) 58%, rgb(var(--hero-scrim-rgb) / .58) 66%, rgb(var(--hero-scrim-rgb) / .28) 75%, rgb(var(--hero-scrim-rgb) / 0) 84%); }
}
.hero .hero-glow { position: absolute; top: 0; right: -20%; width: 66%; height: 92%; pointer-events: none; mix-blend-mode: soft-light; background: radial-gradient(closest-side, var(--hero-glow-core), var(--hero-glow-mid) 52%, transparent 100%); }
@media (max-width: 899px) and (orientation: portrait) { .hero .hero-glow { top: -8%; right: -38%; width: 115%; height: 56%; } }
@media (prefers-reduced-motion: no-preference) {
  .hero .hero-glow { animation: glow-drift 26s ease-in-out infinite alternate; }
  @keyframes glow-drift { from { opacity: .8; transform: translate3d(0, 0, 0) scale(1); } to { opacity: 1; transform: translate3d(-4%, 3%, 0) scale(1.06); } }
  @supports (animation-timeline: view()) {
    main h2, .project figcaption {
      animation: lift linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
    @keyframes lift { from { opacity: .85; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  }
}