/* drivecarniche.com
   Visual system: _assets/Carniche_Web_Identity_v1 (palette, type and spacing scales, easing, radius, grid).
   Structure and copy: marketing/site/content. Nothing here is copy. */

@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/montserrat-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/inter-latin-700-normal.woff2") format("woff2"); }

:root {
  /* brand */
  --carniche-black: #101820;
  --carniche-green: #19B88A;
  --carniche-red: #F21F45;
  --carniche-white: #FFFFFF;
  --cool-gray: #667078;

  /* semantic, light field */
  --surface: #FFFFFF;
  --surface-alt: #F5F7F8;
  --border: #DCE2E5;
  --ink: #101820;
  --ink-muted: #5C666E;          /* cool-gray darkened a step so small muted text clears 4.5:1 on surface-alt */
  --accent: var(--carniche-green);
  --accent-text: #0E7F5E;
  --action: var(--carniche-red);
  --on-action: #FFFFFF;
  --focus: #101820;

  /* type */
  --font-display: "Montserrat", "Aptos Display", Arial, sans-serif;
  --font-body: "Inter", "Aptos", Arial, sans-serif;
  --text-xs: .75rem;  --text-sm: .875rem; --text-md: 1rem; --text-lg: 1.25rem;
  --text-xl: 1.75rem; --text-2xl: 2.5rem; --text-3xl: 4rem;
  --text-hero: clamp(2.6rem, 6.2vw, 5.75rem);

  /* space */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; --space-32: 8rem;

  /* radius */
  --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; --radius-pill: 999px;

  /* motion */
  --ease-carniche: cubic-bezier(.2,.75,.25,1);
  --duration-fast: 180ms; --duration-normal: 350ms; --duration-slow: 700ms;

  /* layout */
  --content-max: 1240px;
  --gutter: clamp(1rem, 4vw, 4rem);
}

.on-dark {
  --surface: #101820;
  --surface-alt: #18222C;
  --border: #2A3641;
  --ink: #FFFFFF;
  --ink-muted: #A9B2B9;
  --accent-text: #19B88A;
  --focus: #FFFFFF;
  background: var(--surface);
  color: var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--surface); color: var(--ink);
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: var(--text-hero); letter-spacing: -.035em; line-height: .98; }
h2 { font-size: clamp(2.1rem, 4.6vw, var(--text-3xl)); margin-bottom: var(--space-8); }
h3 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); margin-bottom: var(--space-4); }
h4 { font-size: 1.25rem; letter-spacing: -.015em; line-height: 1.2; margin-bottom: var(--space-3); }

.skip { position: absolute; left: var(--space-4); top: -60px; z-index: 100; background: var(--carniche-black); color: #fff; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); }
.skip:focus { top: var(--space-4); }

.wrap { width: min(100% - 2 * var(--gutter), var(--content-max)); margin-inline: auto; }
.section { padding-block: clamp(var(--space-16), 9vw, var(--space-32)); position: relative; }
.section + .section:not(.on-dark):not(.alt) { border-top: 1px solid var(--border); }
.alt { background: var(--surface-alt); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
.c-12 { grid-column: span 12; } .c-8 { grid-column: span 8; } .c-7 { grid-column: span 7; } .c-6 { grid-column: span 6; }
.c-5 { grid-column: span 5; } .c-4 { grid-column: span 4; }
.start-8 { grid-column: 8 / span 5; } .start-7 { grid-column: 7 / span 6; }
@media (max-width: 900px) { .grid > * { grid-column: 1 / -1 !important; } }
.measure { max-width: 62ch; }
.measure-narrow { max-width: 48ch; }
.stack > * + * { margin-top: var(--space-6); }
.block:not(:first-child) { margin-top: clamp(var(--space-16), 7vw, var(--space-24)); }

.lead { font-size: var(--text-lg); line-height: 1.55; }
.muted { color: var(--ink-muted); }
.small { font-size: var(--text-sm); line-height: 1.5; }
.sub { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 2.8vw, 2.25rem); letter-spacing: -.025em; line-height: 1.08; margin: 0 0 var(--space-6); text-wrap: balance; }
.eyebrow { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-3); }

/* label that must travel with worked examples */
.illus { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; color: var(--ink-muted); margin-top: var(--space-4); }
.illus::before { content: ""; width: 16px; height: 2px; background: currentColor; opacity: .6; }
.note { font-size: var(--text-sm); color: var(--ink-muted); line-height: 1.55; }

/* buttons: two styles, never more */
.btn { display: inline-flex; align-items: center; gap: var(--space-2); font: 700 1.1875rem/1 var(--font-body); padding: 1rem 1.75rem; border-radius: var(--radius-pill); border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: transform var(--duration-fast) var(--ease-carniche), background-color var(--duration-fast); white-space: nowrap; }
.btn-primary { background: var(--action); border-color: var(--action); color: var(--on-action); }
.btn-primary:hover { background: #DA1B3E; border-color: #DA1B3E; }
.btn-secondary { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-secondary:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.btn .arr { transition: transform var(--duration-fast) var(--ease-carniche); }
.btn:hover .arr { transform: translate(3px, -3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.btn-sm { font-size: 1.1875rem; padding: .62rem 1.25rem; }

/* header */
.site-head { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color var(--duration-normal); }
.site-head.scrolled { border-bottom-color: var(--border); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: var(--space-4); }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; }
.brand img { height: 30px; width: auto; }

@media (max-width: 420px) { .site-head .brand span { position: absolute; left: -9999px; } }

/* hero */
.hero { padding-top: clamp(var(--space-12), 7vw, var(--space-24)); padding-bottom: clamp(var(--space-16), 8vw, var(--space-24)); overflow: hidden; }
.hero h1 { max-width: 13ch; }
.hero .subhead { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.3; letter-spacing: -.015em; margin: var(--space-8) 0 var(--space-6); max-width: 34ch; }
.hero .copy p { max-width: 54ch; }
.hero-mark { position: absolute; right: calc(-1 * var(--gutter)); top: 8%; width: min(44vw, 620px); opacity: .07; pointer-events: none; }
.stat-card { background: var(--carniche-black); color: #fff; border-radius: var(--radius-lg); padding: var(--space-8); position: relative; overflow: hidden; }
.stat-card .fig { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 5vw, 4rem); letter-spacing: -.04em; line-height: 1; margin: 0; }
.stat-card .lbl { font-size: var(--text-lg); margin: var(--space-3) 0 var(--space-6); color: #fff; }
.stat-card .foot { font-size: var(--text-sm); color: #A9B2B9; margin: 0; max-width: 34ch; }
.stat-card .curve { position: absolute; right: -6px; bottom: -4px; width: 34%; opacity: .95; }
.stat-card > *:not(.curve) { position: relative; }
.hero-quote { margin: var(--space-8) 0 0; font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.35; letter-spacing: -.01em; }
.markets { margin-top: var(--space-8); }

/* pull quote */
.pull { margin: var(--space-12) 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.18; letter-spacing: -.025em; max-width: 30ch; text-wrap: balance; }
.pull::before { content: ""; display: block; width: 56px; height: 28px; margin-bottom: var(--space-4); background: url("brand/curve-green.svg") no-repeat left bottom / contain; }
.pull.long { font-size: clamp(1.2rem, 2vw, 1.6rem); max-width: 44ch; line-height: 1.3; }

/* lists */
.lead-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.lead-list li { padding-top: var(--space-4); border-top: 1px solid var(--border); }
.lead-list b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; margin-bottom: var(--space-1); }
.lead-list.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-6) var(--space-8); }
.lead-list.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-6) var(--space-8); }
@media (max-width: 760px) { .lead-list.cols-2, .lead-list.cols-3 { grid-template-columns: 1fr; } }
.plain-list { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-2); }
.plain-list li::marker { color: var(--accent); }
.tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.tick-list li { position: relative; padding-left: 1.75rem; }
.tick-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 14px; height: 2px; background: var(--accent); transform: rotate(-24deg); transform-origin: left center; }

/* numbered: the five, the ten, the four steps */
.num-list { list-style: none; margin: 0; padding: 0; counter-reset: n; display: grid; gap: 0; }
.num-list > li { counter-increment: n; display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--space-4); padding: var(--space-6) 0; border-top: 1px solid var(--border); }
.num-list > li::before { content: counter(n, decimal-leading-zero); font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--accent-text); padding-top: .2rem; }
.num-list b { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; display: block; margin-bottom: var(--space-1); }
.num-list.two { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: var(--space-12); }
@media (max-width: 760px) { .num-list.two { grid-template-columns: 1fr; } }

/* tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .98rem; }
th, td { text-align: left; vertical-align: top; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border); }
tr:last-child td { border-bottom: 0; }
thead th { font-size: var(--text-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-alt); }
tbody th { font-weight: 700; white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
td.num, th.num { text-align: right; white-space: nowrap; }
@media (max-width: 640px) { th, td { padding: var(--space-3) var(--space-4); } tbody th { white-space: normal; } }

/* panels */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(var(--space-6), 3vw, var(--space-8)); }
.alt .panel { background: #fff; }
.panel-label { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; margin: 0 0 var(--space-4); }
.caption { font-size: var(--text-md); margin-top: var(--space-4); }

/* profit layers figure */
.layers { display: grid; gap: var(--space-3); }
.layer-row { display: grid; grid-template-columns: 9.5rem 1fr 6.5rem; align-items: center; gap: var(--space-4); }
.layer-row .bar { height: 28px; border-radius: 6px; }
.layer-row .k { font-weight: 600; }
.layer-row .v { font-family: var(--font-display); font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.layer-row.total { border-top: 1px solid var(--border); padding-top: var(--space-3); }
.bar.front { background: var(--carniche-black); }
.bar.back { background: var(--carniche-green); }
.bar.total { background: linear-gradient(90deg, var(--carniche-black) 0 18.18%, var(--carniche-green) 18.18% 100%); }
.bar.out { background: var(--carniche-red); }
.layer-note { font-size: var(--text-sm); color: var(--ink-muted); grid-column: 2 / -1; margin-top: -.4rem; }
@media (max-width: 560px) { .layer-row { grid-template-columns: 1fr 5.5rem; } .layer-row .bar { grid-column: 1 / -1; grid-row: 2; } .layer-note { grid-column: 1 / -1; } }

/* asked vs answered */
.asked { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-6); align-items: stretch; }
.asked .spoken { border: 1px dashed var(--border); border-radius: var(--radius-lg); padding: var(--space-8); display: flex; flex-direction: column; justify-content: center; }
.asked .spoken q { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 2.8vw, 2.25rem); letter-spacing: -.02em; quotes: "\201C" "\201D"; }
.phone { background: var(--carniche-black); color: #fff; border-radius: 32px; padding: var(--space-6); }
.phone ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.phone li { background: #18222C; border-radius: 12px; padding: .7rem 1rem; font-size: .98rem; }
.phone .hd { font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: #A9B2B9; margin: 0 0 var(--space-4); }
.asked .hd { font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-4); font-weight: 600; }
@media (max-width: 700px) { .asked { grid-template-columns: 1fr; } }

/* timelines */
.timelines { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-6); }
@media (max-width: 800px) { .timelines { grid-template-columns: 1fr; } }
.tl { border-radius: var(--radius-lg); padding: clamp(var(--space-6), 3vw, var(--space-8)); border: 1px solid var(--border); background: var(--surface); }
.tl.with { background: var(--carniche-black); color: #fff; border-color: var(--carniche-black); }
.tl h4 { margin-bottom: var(--space-6); }
.tl ol { list-style: none; margin: 0 0 var(--space-6); padding: 0; position: relative; }
.tl ol::before { content: ""; position: absolute; left: 4.1rem; top: .6rem; bottom: .6rem; width: 2px; background: var(--border); }
.tl.with ol::before { background: #2A3641; }
.tl li { display: grid; grid-template-columns: 3.4rem 1fr; gap: 1.6rem; padding: .45rem 0; position: relative; }
.tl li::after { content: ""; position: absolute; left: calc(4.1rem - 4px); top: .95rem; width: 10px; height: 10px; border-radius: 50%; background: var(--cool-gray); }
.tl.with li::after { background: var(--carniche-green); }
.tl time { font-variant-numeric: tabular-nums; font-weight: 700; }
.tl .close { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; margin: 0; }

/* four parts */
.parts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-6); }
@media (max-width: 800px) { .parts { grid-template-columns: 1fr; } }
.part { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(var(--space-6), 3vw, var(--space-8)); }
.part .ico { width: 44px; height: 44px; margin-bottom: var(--space-4); color: var(--carniche-black); }
.part h4 { font-size: 1.35rem; }
.part.box { background: var(--carniche-black); color: #fff; border-color: var(--carniche-black); }
.part.box .ico { color: var(--carniche-green); }
.diagram { margin: var(--space-8) 0 0; }

/* the ten */
.ten { list-style: none; margin: 0; padding: 0; counter-reset: n; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 var(--space-12); }
.ten li { counter-increment: n; padding: var(--space-6) 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: 3rem 1fr; gap: var(--space-3); }
.ten li::before { content: counter(n, decimal-leading-zero); font-family: var(--font-display); font-weight: 800; color: var(--carniche-red); font-size: 1rem; padding-top: .15rem; }
.ten b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; margin-bottom: var(--space-1); }
@media (max-width: 800px) { .ten { grid-template-columns: 1fr; } }

/* capabilities. Each is a <details>: eyebrow, name and opening argument stay visible,
   the bullets, figures and pull quotes sit behind a native disclosure. No script. */
.cap { border-top: 1px solid var(--border); }
.cap:last-child { border-bottom: 1px solid var(--border); }
.cap h3 { font-size: clamp(1.8rem, 3.4vw, 2.75rem); }

.cap > summary {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-4) clamp(var(--space-8), 5vw, var(--space-16));
  padding: clamp(var(--space-6), 3vw, var(--space-8)) 0;
  cursor: pointer; list-style: none;
}
.cap > summary::-webkit-details-marker { display: none; }
.cap > summary::marker { content: ""; }
.cap > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: var(--space-1); border-radius: var(--radius-sm); }
.cap-head { grid-column: 1; }
.cap-head h3 { margin-bottom: 0; }
.cap-lede { grid-column: 2; display: flex; align-items: flex-start; gap: var(--space-6); }
.cap-lede p { flex: 1 1 auto; margin: 0; }

/* the affordance: plus when closed, minus when open */
.cap-more { display: block; flex: 0 0 auto; position: relative; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); transition: background var(--duration-fast) var(--ease-carniche), border-color var(--duration-fast) var(--ease-carniche); }
.alt .cap-more { background: #fff; }
.cap-more::before, .cap-more::after { content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 2px; margin: -1px 0 0 -7.5px; background: var(--ink); transition: transform var(--duration-normal) var(--ease-carniche); }
.cap-more::after { transform: rotate(90deg); }
.cap[open] .cap-more::after { transform: rotate(180deg); }
.cap > summary:hover .cap-more { background: var(--carniche-black); border-color: var(--carniche-black); }
.cap > summary:hover .cap-more::before, .cap > summary:hover .cap-more::after { background: var(--carniche-white); }
@media (prefers-reduced-motion: reduce) { .cap-more, .cap-more::before, .cap-more::after { transition: none; } }

.cap-body {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-8) clamp(var(--space-8), 5vw, var(--space-16));
  padding-bottom: clamp(var(--space-12), 6vw, var(--space-16));
}
.cap-aside { grid-column: 1; grid-row: 1; position: sticky; top: 100px; align-self: start; }
.cap-main { grid-column: 2; grid-row: 1; }
/* an open capability must never be left invisible by the reveal animation */
.cap[open] { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .cap > summary, .cap-body { grid-template-columns: minmax(0, 1fr); }
  .cap-head, .cap-lede, .cap-aside, .cap-main { grid-column: auto; grid-row: auto; }
  .cap-lede { display: block; }
  .cap-aside { position: static; }
  .cap-more { margin-top: var(--space-4); }
}
.compare { width: 100%; }
.compare td:last-child, .compare th:last-child { background: color-mix(in srgb, var(--carniche-green) 8%, transparent); }
.compare tfoot td { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; border-top: 1px solid var(--border); }
.figpair { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-4); }
.figpair div { border-radius: var(--radius-md); padding: var(--space-6); background: var(--surface-alt); }
.figpair .v { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; letter-spacing: -.035em; display: block; margin-bottom: var(--space-2); }
.figpair .k { font-weight: 600; font-size: var(--text-sm); color: var(--ink-muted); letter-spacing: .06em; text-transform: uppercase; display: block; margin-bottom: var(--space-3); }
.steps3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-3); }
.steps3 li { background: var(--surface-alt); border-radius: var(--radius-md); padding: var(--space-4); }
.steps3 .pt { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; margin-bottom: var(--space-2); }
.steps3 li.quiet { background: transparent; border: 1px dashed var(--border); color: var(--ink-muted); }
@media (max-width: 640px) { .steps3 { grid-template-columns: 1fr; } }
.advisor-line { margin-top: var(--space-4); padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); background: var(--carniche-black); color: #fff; font-weight: 600; }

/* results */
.first-row td, .first-row th { background: color-mix(in srgb, var(--carniche-green) 10%, transparent); }

/* data section */
.data-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.data-lines li { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.35rem, 2.6vw, 2rem); letter-spacing: -.02em; line-height: 1.2; padding: var(--space-6) 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: 2.5rem 1fr; }
.data-lines li::before { content: ""; width: 18px; height: 18px; margin-top: .45em; border-radius: 50%; border: 3px solid var(--carniche-green); }
.data-lines li:last-child { font-size: clamp(1.1rem, 1.8vw, 1.4rem); line-height: 1.35; }
.data-lines li:last-child::before { border-color: var(--cool-gray); }
.never { columns: 1; }
.on-dark .panel { background: #18222C; border-color: #2A3641; }
.on-dark .pull::before { background-image: url("brand/curve-green.svg"); }
.on-dark .lead-list li, .on-dark .num-list > li { border-color: #2A3641; }
.on-dark a.more { color: #fff; }
a.more { font-weight: 700; display: inline-flex; gap: .4rem; align-items: center; }

/* install steps */
.steps4 { list-style: none; margin: 0; padding: 0; counter-reset: n; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-4); position: relative; }
.steps4 li { counter-increment: n; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6); }
.steps4 li::before { content: counter(n); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--carniche-black); color: #fff; font-family: var(--font-display); font-weight: 800; margin-bottom: var(--space-4); }
.steps4 b { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; }
@media (max-width: 900px) { .steps4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .steps4 { grid-template-columns: 1fr; } }

/* cost */
.return { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; border-bottom: 1px solid #2A3641; padding-bottom: var(--space-8); margin-bottom: var(--space-8); }
.return > div { padding-right: var(--space-6); }
.return > div + div { border-left: 1px solid #2A3641; padding-left: var(--space-6); }
.return .v { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 4.6vw, 3.75rem); letter-spacing: -.04em; line-height: 1; display: block; margin-bottom: var(--space-3); }
.return .v.ratio { color: var(--carniche-green); }
@media (max-width: 760px) { .return { grid-template-columns: 1fr; } .return > div + div { border-left: 0; padding-left: 0; border-top: 1px solid #2A3641; padding-top: var(--space-6); margin-top: var(--space-6); } }
.ratecard { font-size: 1.05rem; }
.ratecard td.num { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; }
.ratecard tr.launch th, .ratecard tr.launch td { background: color-mix(in srgb, var(--carniche-red) 7%, transparent); }

/* who */
.bios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-6); }
.bios li { border-top: 3px solid var(--carniche-black); padding-top: var(--space-6); }
.bios b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; line-height: 1.2; margin-bottom: var(--space-3); }
@media (max-width: 900px) { .bios { grid-template-columns: 1fr; } }
.bound { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); font-size: var(--text-sm); color: var(--ink-muted); }

/* launch dealers */
.markets-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.markets-row li { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -.02em; padding: .4rem 1.2rem; border: 1px solid var(--border); border-radius: var(--radius-pill); }
.launch-cols { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-6); }
@media (max-width: 900px) { .launch-cols { grid-template-columns: 1fr; } }

/* form */
.form-section { background: var(--surface-alt); }
.form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(var(--space-6), 4vw, var(--space-12)); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-6) var(--space-6); margin: var(--space-6) 0; }
.field.full { grid-column: 1 / -1; }
@media (max-width: 640px) { .fields { grid-template-columns: 1fr; } }
.field label { display: block; font-weight: 600; margin-bottom: var(--space-2); }
.field .help { display: block; font-size: var(--text-sm); color: var(--ink-muted); margin: -.25rem 0 var(--space-2); }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1px solid #B9C2C8; border-radius: var(--radius-sm); padding: .8rem .9rem; min-height: 48px; transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.field textarea { min-height: 132px; resize: vertical; }
.field input::placeholder { color: #6B757D; font-size: .92rem; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23101820' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.field select:invalid, .field select option[value=""] { color: #5C666E; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--carniche-black); box-shadow: 0 0 0 3px rgba(16,24,32,.18); }
.field .err { display: none; color: #B3122F; font-size: var(--text-sm); font-weight: 600; margin-top: var(--space-2); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #B3122F; }
.field.invalid .err { display: block; }
.summary { display: none; background: #FDEBEE; color: #7E0C22; border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); font-weight: 600; margin-bottom: var(--space-4); }
.summary.show { display: block; }
.submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
.btn[disabled] { opacity: .7; cursor: progress; }
.sent h3 { margin-bottom: var(--space-3); }

/* footer */
.site-foot { background: var(--carniche-black); color: #fff; padding-block: var(--space-16) var(--space-8); }
.site-foot a { color: #fff; }
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-8); padding-bottom: var(--space-12); border-bottom: 1px solid #2A3641; }
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); list-style: none; margin: 0; padding: 0; }
.foot-nav a { text-decoration: none; font-weight: 600; }
.foot-nav a:hover { text-decoration: underline; }
.foot-bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-6); font-size: var(--text-sm); color: #A9B2B9; }
.foot-bot ul { display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.foot-bot a { color: #A9B2B9; }
.foot-bot a:hover { color: #fff; }
.site-foot .brand img { height: 34px; }

/* curve transition between a light and a dark field */
.curve-edge { display: block; width: 100%; height: clamp(48px, 7vw, 110px); margin-bottom: -1px; }
.curve-edge path.fill { fill: var(--carniche-black); }
.curve-edge path.line { fill: none; stroke: var(--carniche-green); stroke-width: 3; vector-effect: non-scaling-stroke; }
.curve-edge.to-light path.fill { fill: var(--surface-alt); }
.curve-wrap { background: var(--surface); line-height: 0; }
.curve-wrap.from-dark { background: var(--carniche-black); }

/* simple pages */
.doc { padding-block: clamp(var(--space-12), 7vw, var(--space-24)); }
.doc h1 { font-size: clamp(2.4rem, 5vw, 4.25rem); margin-bottom: var(--space-12); max-width: 16ch; }
.doc h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: var(--space-12) 0 var(--space-4); padding-top: var(--space-8); border-top: 1px solid var(--border); }
.doc .short { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: -.02em; line-height: 1.15; }
.doc .body { max-width: 68ch; }
.doc .bold-line { font-weight: 700; }

/* reveal: lower-left to upper-right */
.reveal { opacity: 0; transform: translate(-12px, 18px); transition: opacity var(--duration-slow) var(--ease-carniche), transform var(--duration-slow) var(--ease-carniche); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
.no-js .reveal { opacity: 1; transform: none; }

@media print { .site-head, .curve-wrap, .hero-mark { display: none; } .reveal { opacity: 1; transform: none; } }

/* diagrams repeat the lists beside them; below phone width they are unreadable, so the lists carry it */
@media (max-width: 640px) { .diagram { display: none; } }
.approval td, .approval th { white-space: nowrap; }