/* R2B Agency · landing. Visual language reproduced from the art-direction reference (dark page, glow corners, italic
   kickers, light/bold display type, image cards, icon tiles on card borders, two-colour comparison table, split cards),
   in the R2B palette only: Volcanic Slag #3D3D3D, Alpine Ice #EBECEE, Summit Stone #8A8C8F, Lichen Green #C4E326.
   No pure black or white. Default state is the final one: complete without JavaScript and with reduced motion. */
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --slag: #3D3D3D;
  --slag-deep: #333333;            /* page background: slag one step down (never pure black) */
  --slag-card: #393939;            /* cards on the page background */
  --slag-line: #4F4F50;
  --ice: #EBECEE;
  --ice-soft: #F3F4F5;
  --ice-line: #D3D4D7;
  --stone: #8A8C8F;
  --stone-dark: #66686B;
  --stone-light: #A7A9AC;
  --lichen: #C4E326;
  --lichen-press: #B1CE1E;
  --lichen-deep: #6E7F1A;          /* Lichen mixed toward slag: the darker header of the comparison */
  --glow: rgb(196 227 38 / .14);
  --danger: #E8A39A;
  --radius: 14px;
  --wrap: 1200px;
  --head: 84px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-land: cubic-bezier(.16, .72, .28, 1);
  --ease-glide: cubic-bezier(.3, .62, .45, 1);
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--slag-deep); color: var(--ice); font: 400 16px/1.6 var(--font); text-rendering: optimizeLegibility; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; }
p { margin: 0 0 1rem; }
em { font-style: italic; font-weight: 760; }
.mono { font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -64px; background: var(--lichen); color: var(--slag); padding: .5rem .9rem; border-radius: 8px; z-index: 60; font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--lichen); outline-offset: 3px; border-radius: 6px; }
section[id] { scroll-margin-top: calc(var(--head) + 8px); }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.small { font-size: .88rem; color: var(--stone-light); }

/* kicker: small italic, widely spaced, Lichen (the reference's accent label) */
.kicker { margin: 0 0 .9rem; font-style: italic; font-weight: 500; font-size: .78rem; letter-spacing: .32em; text-transform: uppercase; color: var(--lichen); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: 420; line-height: 1.16; letter-spacing: -.01em; margin-bottom: 1.1rem; }
h2 b { font-weight: 760; }
h3 { font-size: 1.12rem; font-weight: 680; line-height: 1.25; margin-bottom: .55rem; }

/* ---------- header: floating rounded glass bar ---------- */
.top { position: fixed; left: 0; right: 0; top: 14px; z-index: 30; }
.top__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding: 0 10px 0 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--slag-deep) 72%, transparent); border: 1px solid color-mix(in srgb, var(--ice) 12%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; }
.brand__tile { display: grid; place-items: center; width: 34px; height: 26px; border-radius: 7px; background: var(--lichen); }
.brand__tile img { width: 15px; height: auto; }
.brand__name { font-weight: 620; font-size: 1.02rem; }
.nav { display: flex; align-items: center; gap: 2rem; font-size: .93rem; }
.nav a:not(.btn) { text-decoration: none; color: color-mix(in srgb, var(--ice) 88%, var(--stone)); }
.nav a:not(.btn):hover, .nav a:not(.btn).is-current { color: var(--ice); }
.menu { display: none; background: none; color: inherit; border: 1px solid color-mix(in srgb, var(--ice) 30%, transparent); border-radius: 10px; width: 44px; height: 44px; cursor: pointer; }
.menu__bar, .menu__bar::before, .menu__bar::after { display: block; width: 18px; height: 2px; background: currentColor; margin: 0 auto; position: relative; content: ""; transition: transform .25s var(--ease), background-color .2s; }
.menu__bar::before { position: absolute; top: -6px; } .menu__bar::after { position: absolute; top: 6px; }
.menu[aria-expanded="true"] .menu__bar { background: transparent; }
.menu[aria-expanded="true"] .menu__bar::before { transform: translateY(6px) rotate(45deg); background: currentColor; }
.menu[aria-expanded="true"] .menu__bar::after { transform: translateY(-6px) rotate(-45deg); background: currentColor; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px; padding: 0 1.5rem; border-radius: 999px; background: var(--lichen); color: var(--slag); text-decoration: none; border: 1px solid var(--lichen); cursor: pointer; font: inherit; font-weight: 650; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s var(--ease); }
.btn:hover { background: var(--lichen-press); border-color: var(--lichen-press); }
.btn:active { transform: translateY(1px); }
.btn--small { min-height: 40px; padding: 0 1.1rem; font-size: .9rem; }
.btn--outline { background: color-mix(in srgb, var(--ice) 6%, transparent); border-color: color-mix(in srgb, var(--ice) 26%, transparent); color: var(--ice); border-radius: 9px; }
.btn--outline:hover { background: var(--ice); border-color: var(--ice); color: var(--slag); }
.btn--line { background: transparent; border-color: color-mix(in srgb, var(--slag) 55%, transparent); color: var(--slag); }
.btn--line.btn--light { border-color: color-mix(in srgb, var(--ice) 45%, transparent); color: var(--ice); }
.btn--line.btn--light:hover { background: var(--ice); border-color: var(--ice); color: var(--slag); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }
/* CTA of the reference: rectangular, rounded corners, uppercase label and a small icon tile */
.btn--cta { min-height: 52px; padding: 0 .55rem 0 1.4rem; border-radius: 10px; gap: .9rem; font-size: .84rem; font-weight: 720; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 14px 34px -14px rgb(196 227 38 / .55); }
.btn__ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: color-mix(in srgb, var(--slag) 14%, transparent); }
.btn__ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 01 · hero ---------- */
.hero { position: relative; isolation: isolate; overflow: visible; z-index: 2; min-height: max(640px, 92svh); display: flex; align-items: center; padding: calc(var(--head) + 40px) 0 96px;
  background: var(--slag-deep); border-bottom: 1px solid var(--slag-line); }
.hero__glow { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden;
  background: radial-gradient(ellipse 46% 60% at 0% 0%, var(--glow), transparent 70%), radial-gradient(ellipse 50% 70% at 72% 40%, color-mix(in srgb, var(--slag) 92%, var(--ice)) 0%, transparent 70%); }
.hero__photo { position: absolute; z-index: -1; right: 0; top: 0; bottom: 0; width: min(56vw, 860px); margin: 0; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 82%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 22%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 82%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 22%); mask-composite: intersect; }
.hero__inner { position: relative; }
.hero__copy { max-width: 600px; }
h1 { font-size: clamp(2.3rem, 3.9vw, 3.35rem); line-height: 1.06; letter-spacing: -.01em; text-transform: uppercase; margin-bottom: 1.2rem; }
.h1__light { display: block; font-weight: 380; }
.h1__bold { display: block; font-weight: 800; }
.hero__lead { max-width: 46ch; font-size: 1.04rem; color: color-mix(in srgb, var(--ice) 86%, var(--stone)); }
.pills { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.3rem 0 2rem; padding: 0; }
.pills li { padding: .42rem .8rem; border-radius: 8px; background: color-mix(in srgb, var(--slag) 80%, transparent); border: 1px solid var(--slag-line); font-size: .8rem; font-weight: 560; }
.pills b { color: var(--lichen); font-weight: 760; margin-right: .2rem; }
.hero__founder { display: flex; align-items: center; gap: .75rem; margin: 1.6rem 0 0; font-size: .86rem; color: color-mix(in srgb, var(--ice) 82%, var(--stone)); }
.hero__founder img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--slag-deep); box-shadow: 0 0 0 2px var(--lichen); }
.hero__founder b { color: var(--lichen); }
.hero__note { margin: .9rem 0 0; font-size: .72rem; color: var(--stone-light); }
.notes { list-style: none; margin: 0; padding: 0; }
.note-card { position: absolute; display: flex; align-items: center; gap: .7rem; padding: .6rem .9rem .6rem .6rem; border-radius: 10px; background: color-mix(in srgb, var(--slag-deep) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--ice) 10%, transparent); box-shadow: 0 18px 40px -20px rgb(25 25 25 / .9); white-space: nowrap; }
.note-card b { display: block; font-size: .8rem; font-weight: 650; }
.note-card small { display: block; font-size: .72rem; color: var(--stone-light); }
.note-card__ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--lichen); flex: none; }
.note-card__ic svg { width: 17px; height: 17px; fill: none; stroke: var(--slag); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.note-card--a { right: 9%; top: 34%; }
.note-card--b { left: 22%; bottom: 13%; }
/* divider with a centred chevron on the section border */
.divider-cue { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--slag-deep); border: 1px solid var(--slag-line); color: var(--ice); }
.divider-cue svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ---------- shared sections ---------- */
.sec { position: relative; padding: clamp(4.5rem, 9vw, 7rem) 0; }
.sec__head { max-width: 640px; margin: 0 auto 3rem; text-align: center; }
.sec__head h2 { margin-left: auto; margin-right: auto; }
.sec__head p:not(.kicker) { color: color-mix(in srgb, var(--ice) 84%, var(--stone)); max-width: 52ch; margin: 0 auto; }
.sec__cta { display: grid; justify-items: center; gap: 1rem; margin-top: 3rem; }
.tagline { margin: 0; font-style: italic; font-size: .86rem; color: var(--stone-light); }

/* ---------- 02 · problem: image card left, copy right ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.img-card { margin: 0; overflow: hidden; border-radius: 22px; border: 1px solid var(--slag-line); background: var(--slag); aspect-ratio: 16 / 15; box-shadow: 0 50px 90px -60px rgb(25 25 25 / .95); }
.img-card img { width: 100%; height: 100%; object-fit: cover; }
.split__copy h2 { max-width: 18ch; }
.split__copy p:not(.kicker) { max-width: 48ch; color: color-mix(in srgb, var(--ice) 84%, var(--stone)); font-size: .97rem; }
.split__copy .btn { margin-top: .8rem; }

/* ---------- 03 · pillars: architectural background, four cards with the icon tile on the top border ---------- */
.pillars { background: linear-gradient(180deg, var(--slag-deep), color-mix(in srgb, var(--slag-deep) 70%, var(--slag)) 50%, var(--slag-deep));
  border-top: 1px solid var(--slag-line); border-bottom: 1px solid var(--slag-line); overflow: hidden; }
.pillars__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; pointer-events: none; }
.pillars::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--slag-deep) 0%, transparent 30%, transparent 70%, var(--slag-deep) 100%); }
.pillars > .wrap { position: relative; z-index: 1; }
.pillar-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.pillar { position: relative; padding: 2.6rem 1.3rem 1.6rem; text-align: center; border-radius: 0 0 var(--radius) var(--radius); border-top: 1px solid var(--lichen);
  background: linear-gradient(180deg, color-mix(in srgb, var(--slag) 70%, transparent), transparent); }
.pillar__ic { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 9px; background: var(--lichen); box-shadow: 0 10px 30px -10px rgb(196 227 38 / .6); }
.pillar__ic svg { width: 22px; height: 22px; fill: none; stroke: var(--slag); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pillar h3 { font-size: 1.05rem; margin: .4rem 0 .6rem; }
.pillar p { margin: 0; font-size: .86rem; color: color-mix(in srgb, var(--ice) 80%, var(--stone)); }

/* ---------- 04 · comparison table ---------- */
.compare-sec { background: radial-gradient(ellipse 40% 50% at 100% 20%, var(--glow), transparent 70%), radial-gradient(ellipse 40% 50% at 0% 100%, rgb(196 227 38 / .08), transparent 70%), var(--slag-deep); }
.compare { max-width: 1000px; margin: 0 auto; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--slag-line); background: color-mix(in srgb, var(--slag) 60%, var(--slag-deep)); }
.compare table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.compare thead th { padding: 1.1rem 1rem; font-size: .78rem; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; }
.compare thead th:first-child { background: var(--lichen-deep); color: var(--ice); }
.compare thead th:last-child { background: var(--lichen); color: var(--slag); }
.compare td { width: 50%; padding: 1rem 1.3rem; text-align: center; vertical-align: middle; border-top: 1px solid var(--slag-line); }
.compare td:first-child { color: color-mix(in srgb, var(--ice) 70%, var(--stone)); border-right: 1px solid var(--slag-line); }
.compare td:last-child { color: var(--ice); font-weight: 560; }

/* ---------- 05 · decision: central image with two numbered cards ---------- */
.decision { background: radial-gradient(ellipse 40% 60% at 0% 70%, rgb(196 227 38 / .08), transparent 70%), var(--slag-deep); }
.decision .sec__head h2 { max-width: 22ch; }
.decision .sec__head em { display: block; }
.decision__stage { position: relative; max-width: 1000px; margin: 0 auto; }
.decision__img { width: min(100%, 880px); margin: 0 auto; -webkit-mask-image: radial-gradient(ellipse 50% 56% at 50% 50%, #000 50%, transparent 100%); mask-image: radial-gradient(ellipse 50% 56% at 50% 50%, #000 50%, transparent 100%); }
.choice { position: absolute; top: 34%; width: 280px; padding: 1.3rem 1.3rem 1.2rem; border-radius: var(--radius); background: color-mix(in srgb, var(--slag-deep) 86%, transparent); border: 1px solid var(--slag-line); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.choice p { margin: 0; font-size: .92rem; }
.choice--1 { left: 0; text-align: right; }
.choice--2 { right: 0; }
.choice__n { position: absolute; top: -14px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--lichen); color: var(--slag); font-weight: 800; font-size: 1.3rem; }
.choice--1 .choice__n { right: 16px; }
.choice--2 .choice__n { left: 16px; }
.choice--1 p, .choice--2 p { margin-top: 1rem; }
.choice--2 p { color: color-mix(in srgb, var(--ice) 78%, var(--stone)); }

/* ---------- 06 · who leads: split card ---------- */
.leader-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); border-radius: 20px; overflow: hidden; border: 1px solid var(--slag-line); background: var(--slag-card); }
.leader-card__img { margin: 0; background: var(--lichen); min-height: 100%; }
.leader-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.leader-card__copy { padding: clamp(2rem, 4.4vw, 3.4rem); }
.leader-card__copy h2 { text-transform: uppercase; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.leader-card__hi { font-size: 1.04rem; color: var(--ice); }
.leader-card__copy p:not(.kicker):not(.leader-card__hi) { font-size: .92rem; color: color-mix(in srgb, var(--ice) 80%, var(--stone)); }
.leader-card__copy .btn { margin-top: .8rem; }

/* ---------- 07 · FAQ: copy left, accordion right ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.faq-grid__copy p:not(.kicker) { color: color-mix(in srgb, var(--ice) 84%, var(--stone)); max-width: 36ch; }
.faq-grid__copy .btn { margin-top: .6rem; }
.faq { display: grid; gap: .7rem; }
.faq__item { border-radius: 10px; border: 1px solid var(--slag-line); background: color-mix(in srgb, var(--slag) 70%, var(--slag-deep)); overflow: hidden; }
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: stretch; gap: 1rem; min-height: 56px; padding-left: 1.1rem; font-weight: 620; font-size: .95rem; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary > :first-child { align-self: center; }
.faq__ic { display: grid; place-items: center; flex: none; width: 52px; background: var(--lichen); color: var(--slag); }
.faq__ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; transition: transform .25s var(--ease); }
.faq__item[open] .faq__ic svg { transform: rotate(180deg); }
.faq__item summary { padding-top: .9rem; padding-bottom: .9rem; padding-right: 0; }
.faq__item summary .faq__ic { margin: -.9rem 0; }
.faq__item p { margin: 0; padding: 0 1.1rem 1.1rem; max-width: 62ch; font-size: .92rem; color: color-mix(in srgb, var(--ice) 82%, var(--stone)); }

/* ---------- 08 · contact: split card with the form ---------- */
.contact { background: radial-gradient(ellipse 40% 60% at 100% 0%, var(--glow), transparent 70%), var(--slag-deep); border-top: 1px solid var(--slag-line); }
.contact-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.contact-card__copy p:not(.kicker):not(.small) { color: color-mix(in srgb, var(--ice) 86%, var(--stone)); max-width: 46ch; }
.fitlist { list-style: none; margin: 1.6rem 0; padding: 0; display: grid; gap: .7rem; }
.fitlist li { position: relative; padding-left: 1.6rem; font-size: .95rem; }
.fitlist li::before { content: ""; position: absolute; left: 0; top: .6em; width: 9px; height: 9px; border-radius: 50%; background: var(--lichen); }
.fitlist li:last-child::before { background: transparent; border: 1px solid var(--stone-light); }
.founder-line { display: flex; align-items: center; gap: .8rem; }
.founder-line__img { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 2px solid var(--lichen); }
.fitlist { list-style: none; margin: 1.6rem 0; padding: 0; display: grid; gap: .7rem; }
.fitlist li { position: relative; padding-left: 1.6rem; font-size: .97rem; }
.fitlist li::before { content: ""; position: absolute; left: 0; top: .6em; width: 9px; height: 9px; border-radius: 50%; background: var(--lichen); }
.fitlist li:last-child::before { background: transparent; border: 1px solid var(--stone-light); }

/* form */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; background: var(--slag-deep); border: 1px solid var(--slag-line); border-radius: 22px; padding: clamp(1.3rem, 3vw, 2.2rem); box-shadow: 0 40px 90px -50px rgb(30 30 30 / .9); }
.form > .btn--block { grid-column: 1 / -1; white-space: nowrap; }
.field { grid-column: 1 / -1; display: grid; gap: .35rem; }
.field--half { grid-column: span 1; }
label { font-size: .92rem; font-weight: 600; }
.optional { font-weight: 400; color: var(--stone-light); }
input, select, textarea { font: inherit; color: var(--ice); background: var(--slag); border: 1px solid var(--slag-line); border-radius: 10px; padding: .75rem .9rem; min-height: 48px; width: 100%; transition: border-color .2s, box-shadow .2s; }
textarea { resize: vertical; min-height: 120px; }
input:hover, select:hover, textarea:hover { border-color: var(--stone); }
input:focus, select:focus, textarea:focus { border-color: var(--lichen); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lichen) 30%, transparent); }
[aria-invalid="true"] { border-color: var(--danger); }
.error { margin: 0; color: var(--danger); font-size: .85rem; }
.count { margin: 0; justify-self: end; font-size: .78rem; color: var(--stone-light); font-variant-numeric: tabular-nums; }
.count[data-over] { color: var(--danger); }
.field--check { grid-template-columns: auto 1fr; align-items: start; column-gap: .7rem; }
.field--check input { width: 22px; min-height: 22px; height: 22px; margin-top: .2rem; accent-color: var(--lichen); }
.field--check label { font-weight: 400; font-size: .9rem; }
.field--check .error { grid-column: 2; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form[hidden], .sent[hidden] { display: none; }
.form__note { grid-column: 1 / -1; margin: .2rem 0 -.2rem; font-size: .88rem; color: var(--stone-light); }
.btn[aria-busy="true"] { cursor: progress; opacity: 1; background: var(--lichen-press); }
.btn[aria-busy="true"]::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.sent { align-self: start; display: grid; gap: .9rem; justify-items: start; background: var(--slag-deep); border: 1px solid var(--slag-line); border-radius: 22px; padding: clamp(1.6rem, 3.4vw, 2.6rem); color: var(--ice); }
.sent:focus { outline: none; }
.sent:focus-visible { outline: 3px solid var(--lichen); outline-offset: 4px; }
.sent h3 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 720; letter-spacing: -.02em; }
.sent p { margin: 0; max-width: 46ch; color: color-mix(in srgb, var(--ice) 86%, var(--stone)); }
.sent__mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--lichen); }
.sent__mark svg { width: 24px; height: 24px; fill: none; stroke: var(--slag); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.motion .sent:not([hidden]) { animation: rise .5s var(--ease-land) both; }
.motion .sent:not([hidden]) .sent__mark svg path { stroke-dasharray: 22; stroke-dashoffset: 22; animation: tick .45s var(--ease-glide) .18s forwards; }
@keyframes tick { to { stroke-dashoffset: 0; } }
.status { grid-column: 1 / -1; margin: 0; min-height: 1.4em; font-size: .92rem; }
.status[data-tone="ok"] { color: var(--lichen); }
.status[data-tone="warn"] { color: var(--ice); background: var(--slag); border: 1px dashed var(--stone); border-radius: 10px; padding: .7rem .9rem; }
.status[data-tone="error"] { color: var(--danger); }


/* ---------- footer ---------- */
.foot { background: var(--slag-deep); border-top: 1px solid var(--slag-line); padding: 3.6rem 0 1.4rem; font-size: .88rem; }
.foot__cols { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2rem; padding-bottom: 2.4rem; border-bottom: 1px solid var(--slag-line); }
.foot__brand p { margin: 1rem 0 0; max-width: 34ch; color: var(--stone-light); }
.foot__col { display: grid; align-content: start; gap: .55rem; color: var(--stone-light); }
.foot__col h3 { font-size: .95rem; color: var(--ice); margin-bottom: .4rem; }
.foot__col a { text-decoration: none; }
.foot__col a:hover { color: var(--ice); }
.foot__bar { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.2rem; color: var(--stone-light); font-size: .8rem; }
.foot__bar p { margin: 0; }

/* ---------- motion (only with html.motion): short, purposeful reveals; nothing loops ---------- */
.motion .hero__copy > * { animation: rise .7s var(--ease) both; }
.motion .hero__copy > :nth-child(2) { animation-delay: .06s; } .motion .hero__copy > :nth-child(3) { animation-delay: .12s; }
.motion .hero__copy > :nth-child(4) { animation-delay: .18s; } .motion .hero__copy > :nth-child(5) { animation-delay: .24s; }
.motion .hero__copy > :nth-child(n+6) { animation-delay: .3s; }
.motion .hero__photo img { animation: settle 1.1s var(--ease-land) both; }
.motion .note-card { animation: rise .6s var(--ease-land) both; }
.motion .note-card--a { animation-delay: .7s; } .motion .note-card--b { animation-delay: .85s; }
.motion [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.05); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .pillar-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.6rem; }
  .choice { width: 240px; }
}
@media (max-width: 900px) {
  .hero { flex-direction: column; align-items: stretch; padding: calc(var(--head) + 16px) 0 72px; min-height: 0; }
  .hero__photo { position: relative; inset: auto; width: 100%; height: min(104vw, 560px); }
  .hero__photo img { object-position: 50% 8%; }
  .hero__photo img { -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 30%); mask-image: linear-gradient(0deg, transparent 0%, #000 30%); }
  .note-card--a { right: 4%; top: 18%; } .note-card--b { left: 4%; bottom: 20%; }
  .hero__copy { max-width: 620px; margin: -1rem auto 0; text-align: center; }
  .hero__lead { margin-left: auto; margin-right: auto; }
  .pills, .hero__founder { justify-content: center; }
  .split, .faq-grid, .contact-card { grid-template-columns: 1fr; }
  .leader-card { grid-template-columns: 1fr; }
  .leader-card__img { aspect-ratio: 4 / 4.2; }
  .decision__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .choice { position: relative; top: auto; width: auto; margin-top: 1.4rem; text-align: left; }
  .choice--1 .choice__n { right: auto; left: 16px; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  :root { --head: 76px; }
  .top { top: 10px; }
  .menu { display: inline-grid; place-items: center; }
  .nav { position: absolute; left: 24px; right: 24px; top: calc(100% + 8px); flex-direction: column; align-items: stretch; gap: 0; padding: .6rem 1rem 1rem; border-radius: 14px;
    background: var(--slag-deep); border: 1px solid var(--slag-line); display: none; }
  .nav[data-open="true"] { display: flex; }
  .nav a:not(.btn) { padding: .85rem 0; border-bottom: 1px solid var(--slag-line); }
  .nav .btn { margin-top: .9rem; }
  .pillar-row { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .field--half { grid-column: 1 / -1; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare table, .compare tbody, .compare tr, .compare td { display: block; width: auto; }
  .compare tr { border-top: 1px solid var(--slag-line); }
  .compare tr:first-child { border-top: 0; }
  .compare td { border: 0; text-align: left; padding: .8rem 1rem; }
  .compare td:first-child { border-right: 0; padding-bottom: .2rem; }
  .compare td::before { content: attr(data-label); display: block; margin-bottom: .2rem; font-size: .66rem; font-weight: 720; letter-spacing: .1em; text-transform: uppercase; color: var(--stone-light); }
  .compare td:last-child::before { color: var(--lichen); }
  .btn--cta { width: 100%; justify-content: space-between; }
  .btn--cta > span:first-child { white-space: nowrap; }
  .leader-card__copy { padding: 1.6rem 1.25rem 1.8rem; }
  .note-card--a { right: 3%; top: auto; bottom: 30%; }
  .note-card--b { left: 3%; bottom: 8%; }
  .note-card small { font-size: .68rem; }
  .foot__cols { grid-template-columns: 1fr; }
}
/* the smallest phones (320 px): the CTA label may break into two lines instead of pushing the page sideways */
@media (max-width: 360px) {
  .btn--cta { font-size: .78rem; letter-spacing: .02em; padding-left: 1.1rem; gap: .6rem; }
  .btn--cta > span:first-child { white-space: normal; text-align: left; line-height: 1.25; padding: .55rem 0; }
  .form > .btn--block { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .top, .divider-cue, .notes { display: none !important; }
}