:root {
  --deep-teal: #0c2e33;
  --teal-surface: #154248;
  --electric: #27c8aa;
  --deep-electric: #0b7a66;
  --signal: #d95542;
  --signal-light: #f08a76;
  --amber: #f0b44c;
  --cloud: #fafaf8;
  --white: #ffffff;
  --mist: #e9ece8;
  --graphite: #172326;
  --slate: #5e6a68;
  --line: #d8d5cc;
  --display: "Schibsted Grotesk", "Arial Narrow", Arial, sans-serif;
  --body: "Inter", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --shadow: 0 24px 60px rgba(12, 46, 51, 0.12);
  --shell: min(1180px, calc(100% - 48px));
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--cloud);
  color: var(--graphite);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

h1,
h2,
h3,
p,
blockquote,
figure {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

h1 {
  margin-bottom: 28px;
  color: var(--cloud);
  font-size: clamp(3.3rem, 6.4vw, 6.55rem);
}

h2 {
  margin-bottom: 24px;
  font-size: clamp(2.5rem, 5vw, 4.8rem);
}

h3 {
  font-size: 1.35rem;
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 10px 14px;
  transform: translateY(-180%);
  border-radius: 6px;
  background: var(--amber);
  color: var(--deep-teal);
  font-weight: 600;
}

.skip-link:focus {
  transform: none;
}

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.site-header {
  position: fixed;
  top: 18px;
  right: 0;
  left: 0;
  z-index: 100;
  transition: transform 220ms ease, top 220ms ease;
}

.site-header.is-scrolled {
  top: 10px;
}

.nav-shell {
  display: flex;
  width: min(1240px, calc(100% - 32px));
  min-height: 72px;
  margin-inline: auto;
  padding: 10px 12px 10px 18px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 18px;
  background: rgba(250, 250, 248, 0.94);
  box-shadow: 0 12px 40px rgba(6, 26, 29, 0.16);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.brand-lockup {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.brand-wordmark {
  width: 94px;
  height: auto;
}

.brand-lockup > span {
  color: var(--slate);
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.05em;
  line-height: 1.25;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9rem;
  font-weight: 600;
}

.site-nav a {
  padding: 10px 14px;
  border-radius: 8px;
}

.site-nav a:not(.nav-cta):hover {
  background: var(--mist);
}

.site-nav .nav-cta {
  display: inline-flex;
  margin-left: 8px;
  min-height: 52px;
  padding: 14px 24px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--amber);
  border-radius: 12px;
  background-color: var(--amber);
  color: var(--deep-teal);
}

.site-nav .nav-cta:hover {
  background: #f6c264;
}

.menu-button {
  display: none;
  width: 44px;
  height: 44px;
  padding: 11px;
  border: 0;
  border-radius: 9px;
  background: var(--deep-teal);
}

.menu-button > span:not(.sr-only) {
  display: block;
  height: 2px;
  margin: 4px 0;
  background: var(--cloud);
  transition: 180ms ease;
}

.section-dark {
  position: relative;
  overflow: hidden;
  background: var(--deep-teal);
  color: var(--cloud);
}

.section-light {
  background: var(--cloud);
}

.section-mist {
  background: #f0f1ed;
}

.grid-surface {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 16px 16px;
}

.hero {
  display: flex;
  min-height: 100vh;
  padding: 120px 0 50px;
  align-items: center;
}

.hero-glow {
  position: absolute;
  top: -240px;
  right: -180px;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(39, 200, 170, 0.18), rgba(39, 200, 170, 0) 66%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(380px, 0.84fr);
  gap: clamp(50px, 7vw, 100px);
  align-items: center;
}

.hero-centered {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-centered .hero-copy {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
}

.hero-centered .eyebrow {
  margin-bottom: 26px;
  justify-content: center;
}

.hero-centered h1 {
  margin: 0 auto 30px;
  font-size: clamp(4rem, 5.6vw, 6.2rem);
  line-height: 0.98;
}

.hero-line {
  display: block;
}

.hero-centered .hero-lede {
  max-width: 860px;
  margin: 0 auto 30px;
  font-size: clamp(1.08rem, 1.45vw, 1.28rem);
  line-height: 1.7;
}

.hero-centered .hero-actions {
  margin-bottom: 0;
  justify-content: center;
}

.hero-primary-cta {
  min-width: 300px;
  min-height: 62px;
  padding-inline: 30px;
  font-size: 1.02rem;
}

.eyebrow {
  display: flex;
  margin-bottom: 24px;
  align-items: center;
  gap: 10px;
  color: rgba(250, 250, 248, 0.75);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.eyebrow-dark {
  color: var(--slate);
}

.eyebrow-mark {
  color: var(--electric);
  font-size: 1rem;
  letter-spacing: 0;
}

.text-electric {
  color: var(--electric);
}

.text-muted {
  color: rgba(250, 250, 248, 0.5);
}

.hero-lede {
  max-width: 690px;
  margin-bottom: 34px;
  color: rgba(250, 250, 248, 0.76);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
}

.hero-actions {
  display: flex;
  margin-bottom: 34px;
  align-items: center;
  gap: 24px;
}

.button {
  display: inline-flex;
  min-height: 52px;
  padding: 14px 22px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 600;
  line-height: 1.2;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-amber {
  background: var(--amber);
  box-shadow: 0 10px 30px rgba(240, 180, 76, 0.2);
  color: var(--deep-teal);
}

.button-amber:hover {
  background: #f6c264;
  box-shadow: 0 14px 34px rgba(240, 180, 76, 0.3);
}

.button-primary {
  min-height: 58px;
  padding: 16px 30px;
  border-color: var(--amber);
  border-radius: 12px;
  background-color: var(--amber);
  box-shadow: 0 12px 28px rgba(240, 180, 76, 0.22);
  color: var(--deep-teal);
}

.button-primary:hover {
  background-color: #f6c264;
  box-shadow: 0 16px 34px rgba(240, 180, 76, 0.32);
}

.section-dark .button-primary {
  border-color: var(--amber);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.button-outline {
  border-color: var(--deep-teal);
  color: var(--deep-teal);
}

.button-outline:hover {
  background: var(--deep-teal);
  color: var(--cloud);
}

.button-block {
  width: 100%;
}

.text-link {
  padding-block: 8px;
  border-bottom: 1px solid rgba(250, 250, 248, 0.3);
  color: var(--cloud);
  font-weight: 600;
}

.proof-chips {
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
}

.proof-chips li {
  display: flex;
  padding: 8px 11px;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(250, 250, 248, 0.12);
  border-radius: 7px;
  background: rgba(250, 250, 248, 0.04);
  color: rgba(250, 250, 248, 0.68);
  font-size: 0.76rem;
}

.proof-chips svg,
.privacy-line svg,
.closing-card li svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--electric);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-ledger {
  position: relative;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  background: rgba(21, 66, 72, 0.88);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
}

.hero-ledger::before {
  position: absolute;
  top: -9px;
  left: 44px;
  width: 64px;
  height: 3px;
  background: var(--electric);
  content: "";
}

.ledger-topline,
.ledger-rows > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.ledger-topline {
  color: rgba(250, 250, 248, 0.62);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-dot i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--electric);
  box-shadow: 0 0 0 4px rgba(39, 200, 170, 0.12);
}

.ledger-rule {
  height: 1px;
  margin: 24px 0;
  background: rgba(39, 200, 170, 0.7);
}

.ledger-kicker,
.preview-overline {
  margin-bottom: 3px;
  color: rgba(250, 250, 248, 0.55);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ledger-figure {
  margin-bottom: 6px;
  color: var(--signal-light);
  font-family: var(--display);
  font-size: clamp(4.3rem, 7vw, 7.4rem);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 1;
}

.ledger-figure span {
  margin-right: 4px;
  font-size: 0.5em;
  vertical-align: top;
}

.ledger-caption {
  margin-bottom: 0;
  color: rgba(250, 250, 248, 0.55);
  font-family: var(--mono);
  font-size: 0.7rem;
}

.ledger-rows {
  display: grid;
  gap: 13px;
}

.ledger-rows > div {
  color: rgba(250, 250, 248, 0.68);
  font-size: 0.84rem;
}

.ledger-rows strong {
  color: var(--cloud);
  font-family: var(--mono);
  font-weight: 500;
}

.ledger-note {
  display: grid;
  margin-top: 28px;
  padding: 18px;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  border-radius: 10px;
  background: rgba(250, 250, 248, 0.08);
  color: rgba(250, 250, 248, 0.72);
  font-size: 0.78rem;
  line-height: 1.5;
}

.ledger-note svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--electric);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ledger-note b {
  color: var(--cloud);
}

.metric-rail {
  background: var(--cloud);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-right: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.metric {
  display: grid;
  min-height: 172px;
  padding: 28px 30px;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 20px;
  border-right: 1px solid var(--line);
}

.metric:last-child {
  border-right: 0;
}

.metric strong {
  color: var(--deep-teal);
  font-family: var(--display);
  font-size: clamp(2.6rem, 4vw, 4rem);
  letter-spacing: -0.05em;
}

.metric span {
  max-width: 150px;
  color: var(--slate);
  font-size: 0.82rem;
  line-height: 1.5;
}

.problem,
.estimator,
.cost-statement,
.operator-proof,
.process,
.testimonials,
.guarantees,
.about,
.closing {
  padding: 120px 0;
}

.estimator {
  padding: 64px 0;
}

.cost-statement {
  position: relative;
  padding: 56px 0;
  overflow: hidden;
}

.cost-statement::after {
  position: absolute;
  right: -180px;
  bottom: -240px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(39, 200, 170, 0.14), transparent 68%);
  content: "";
  pointer-events: none;
}

.statement-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1.18fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

.statement-copy h2 {
  margin-bottom: 18px;
  color: var(--cloud);
}

.statement-lede {
  max-width: 570px;
  margin-bottom: 24px;
  color: rgba(250, 250, 248, 0.72);
  font-size: 1.05rem;
}

.statement-benefits {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.statement-benefits li {
  display: grid;
  padding: 14px 0;
  grid-template-columns: 42px 1fr;
  gap: 18px;
  border-top: 1px solid rgba(250, 250, 248, 0.14);
}

.statement-benefits li:last-child {
  border-bottom: 1px solid rgba(250, 250, 248, 0.14);
}

.statement-benefits > li > span {
  padding-top: 3px;
  color: var(--electric);
  font-family: var(--mono);
  font-size: 0.7rem;
}

.statement-benefits strong {
  display: block;
  margin-bottom: 3px;
  color: var(--cloud);
  font-family: var(--display);
  font-size: 1rem;
}

.statement-benefits p {
  margin: 0;
  color: rgba(250, 250, 248, 0.55);
  font-size: 0.78rem;
  line-height: 1.45;
}

.statement-action {
  display: flex;
  align-items: center;
  gap: 16px;
}

.statement-action .button {
  flex: 0 0 auto;
}

.statement-action p {
  max-width: 245px;
  margin: 0;
  color: rgba(250, 250, 248, 0.52);
  font-size: 0.72rem;
  line-height: 1.45;
}

.statement-action p strong {
  color: var(--cloud);
}

.statement-poster {
  position: relative;
  margin: 0;
  padding: 16px 18px 18px;
  border: 1px solid rgba(250, 250, 248, 0.16);
  border-radius: 20px;
  background: rgba(250, 250, 248, 0.055);
  box-shadow: 0 36px 85px rgba(0, 0, 0, 0.28);
}

.statement-poster-kicker {
  display: flex;
  margin-bottom: 12px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: rgba(250, 250, 248, 0.54);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
}

.statement-poster-kicker span:first-child {
  color: var(--electric);
}

.statement-document-stack {
  position: relative;
  width: min(68%, 360px);
  margin: 0 auto 14px;
}

.statement-sheet {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: #f7f7f3;
  box-shadow: 0 22px 42px rgba(0, 0, 0, 0.3);
}

.statement-sheet-back {
  transform: translate(42px, 12px) rotate(5deg);
  opacity: 0.45;
}

.statement-sheet-middle {
  transform: translate(20px, 7px) rotate(2.5deg);
  opacity: 0.75;
}

.statement-document-stack img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.32);
}

.statement-example-badge {
  position: absolute;
  right: -31px;
  bottom: 44px;
  z-index: 3;
  padding: 10px 14px;
  transform: rotate(-4deg);
  border: 1px solid rgba(12, 46, 51, 0.22);
  border-radius: 5px;
  background: var(--amber);
  color: var(--deep-teal);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.statement-poster figcaption {
  display: flex;
  padding: 12px 5px 0;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid rgba(250, 250, 248, 0.13);
}

.statement-poster figcaption strong {
  color: var(--cloud);
  font-family: var(--display);
  font-size: 0.92rem;
}

.statement-poster figcaption span {
  max-width: 255px;
  color: rgba(250, 250, 248, 0.48);
  font-size: 0.68rem;
  line-height: 1.45;
  text-align: right;
}

.section-heading {
  margin-bottom: 60px;
}

.centered {
  max-width: 850px;
  margin-inline: auto;
  text-align: center;
}

.centered .eyebrow {
  justify-content: center;
}

.centered > p:last-child {
  color: var(--slate);
}

.section-dark .centered > p:last-child {
  color: rgba(250, 250, 248, 0.65);
}

.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.pain-card {
  position: relative;
  min-height: 305px;
  padding: 32px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(12, 46, 51, 0.04);
}

.pain-card::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--signal);
  content: "";
  transition: transform 240ms ease;
}

.pain-card:hover::after {
  transform: scaleX(1);
}

.pain-card > svg {
  width: 42px;
  height: 42px;
  margin: 28px 0 34px;
  fill: none;
  stroke: var(--signal);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pain-card h3 {
  margin-bottom: 14px;
  color: var(--deep-teal);
}

.pain-card p {
  margin-bottom: 0;
  color: var(--slate);
  font-size: 0.92rem;
}

.quote-card {
  position: relative;
  display: grid;
  margin: 48px 0 0;
  padding: 36px 40px 36px 110px;
  grid-template-columns: 1fr auto;
  gap: 50px;
  align-items: end;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.quote-card .quote-mark {
  position: absolute;
  top: 17px;
  left: 38px;
  color: var(--electric);
  font-family: Georgia, serif;
  font-size: 5.5rem;
  line-height: 1;
}

.quote-card > p {
  max-width: 790px;
  margin-bottom: 0;
  color: var(--deep-teal);
  font-family: var(--display);
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  line-height: 1.38;
}

.quote-card footer,
.attribution {
  display: flex;
  flex-direction: column;
  min-width: 210px;
  gap: 2px;
  font-style: normal;
}

.quote-card footer strong,
.attribution strong {
  color: var(--deep-teal);
  font-size: 0.86rem;
}

.quote-card footer span,
.attribution span {
  color: var(--slate);
  font-size: 0.75rem;
}

.calculator-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(470px, 1.1fr);
  gap: 26px;
  align-items: stretch;
}

.estimator-photo {
  min-height: 520px;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--deep-teal);
  box-shadow: var(--shadow);
}

.estimator-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.photo-placeholder,
.calculator-card {
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.photo-placeholder {
  position: relative;
  display: flex;
  min-height: 720px;
  margin: 0;
  padding: 28px;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(250, 250, 248, 0.16);
  background:
    linear-gradient(180deg, rgba(12, 46, 51, 0.3), rgba(12, 46, 51, 0.92)),
    repeating-linear-gradient(135deg, #21484c 0, #21484c 2px, #1c4145 2px, #1c4145 14px);
  color: var(--cloud);
}

.photo-placeholder::before,
.photo-placeholder::after {
  position: absolute;
  width: 70px;
  height: 70px;
  border-color: var(--electric);
  opacity: 0.7;
  content: "";
}

.photo-placeholder::before {
  top: 20px;
  left: 20px;
  border-top: 2px solid;
  border-left: 2px solid;
}

.photo-placeholder::after {
  right: 20px;
  bottom: 20px;
  border-right: 2px solid;
  border-bottom: 2px solid;
}

.photo-placeholder-inner {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 555px;
  padding: 54px 34px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px dashed rgba(250, 250, 248, 0.32);
  border-radius: 12px;
  text-align: center;
}

.photo-placeholder-icon {
  display: grid;
  width: 76px;
  height: 76px;
  margin-bottom: 28px;
  place-items: center;
  border: 1px solid rgba(39, 200, 170, 0.58);
  border-radius: 50%;
  background: rgba(39, 200, 170, 0.08);
}

.photo-placeholder-icon svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: var(--electric);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.photo-placeholder-kicker {
  margin-bottom: 18px;
  color: var(--electric);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.photo-placeholder h3 {
  max-width: 380px;
  margin-bottom: 18px;
  color: var(--cloud);
  font-size: clamp(1.8rem, 3.2vw, 2.65rem);
}

.photo-placeholder-inner > p:not(.photo-placeholder-kicker) {
  max-width: 420px;
  margin-bottom: 26px;
  color: rgba(250, 250, 248, 0.66);
  font-size: 0.88rem;
}

.photo-placeholder-specs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.photo-placeholder-specs span {
  padding: 6px 9px;
  border: 1px solid rgba(250, 250, 248, 0.16);
  border-radius: 5px;
  background: rgba(250, 250, 248, 0.05);
  color: rgba(250, 250, 248, 0.72);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.photo-placeholder-caption {
  position: relative;
  z-index: 1;
  display: flex;
  padding: 19px 4px 2px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: rgba(250, 250, 248, 0.52);
  font-size: 0.68rem;
}

.photo-placeholder-caption span:first-child {
  color: var(--signal-light);
  font-family: var(--mono);
  letter-spacing: 0.1em;
}

.result-preview,
.calculator-card {
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.result-preview {
  position: relative;
  padding: 34px;
  overflow: hidden;
  border: 1px solid rgba(250, 250, 248, 0.16);
  background-color: var(--deep-teal);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 16px 16px;
  color: var(--cloud);
}

.result-preview::after {
  position: absolute;
  right: -80px;
  bottom: -100px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(39, 200, 170, 0.18), transparent 65%);
  content: "";
}

.preview-toolbar {
  display: flex;
  margin-bottom: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.mini-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-size: 0.82rem;
}

.mini-brand img {
  width: 25px;
  height: 25px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.preview-label {
  padding: 5px 8px;
  border: 1px solid rgba(250, 250, 248, 0.2);
  border-radius: 5px;
  color: rgba(250, 250, 248, 0.6);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.preview-overline {
  color: rgba(250, 250, 248, 0.52);
}

.preview-value {
  margin-bottom: 8px;
  color: var(--signal-light);
  font-family: var(--display);
  font-size: clamp(4.5rem, 8vw, 7rem);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 1;
}

.preview-note {
  margin-bottom: 0;
  color: rgba(250, 250, 248, 0.58);
  font-size: 0.78rem;
}

.preview-divider {
  height: 1px;
  margin: 32px 0;
  background: rgba(39, 200, 170, 0.7);
}

.preview-bars {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 20px;
}

.preview-bars > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 18px;
}

.preview-bars span {
  grid-column: 1 / -1;
  height: 5px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(250, 250, 248, 0.1);
}

.preview-bars i {
  display: block;
  width: var(--bar);
  height: 100%;
  border-radius: inherit;
  background: var(--signal-light);
}

.preview-bars b,
.preview-bars em {
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 500;
}

.preview-bars b {
  color: rgba(250, 250, 248, 0.72);
}

.preview-bars em {
  color: var(--signal-light);
  font-family: var(--mono);
  text-transform: uppercase;
}

.preview-footer {
  position: relative;
  z-index: 1;
  display: grid;
  margin-top: 40px;
  padding: 18px;
  grid-template-columns: 28px 1fr;
  gap: 13px;
  border-radius: 10px;
  background: rgba(250, 250, 248, 0.08);
  color: rgba(250, 250, 248, 0.68);
  font-size: 0.74rem;
  line-height: 1.55;
}

.preview-footer svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--electric);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calculator-card {
  padding: 24px 28px;
  border: 1px solid var(--line);
  background: var(--white);
}

.calculator-head {
  display: flex;
  margin-bottom: 14px;
  align-items: start;
  justify-content: space-between;
  gap: 24px;
}

.mono-label {
  margin-bottom: 10px;
  color: var(--slate);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.11em;
}

.calculator-head h3 {
  margin-bottom: 0;
  color: var(--deep-teal);
  font-size: 1.75rem;
}

.currency-field select {
  min-width: 96px;
  padding: 9px 34px 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background-color: var(--cloud);
  color: var(--deep-teal);
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 600;
}

.control-group {
  padding: 13px 0;
  border-top: 1px solid var(--line);
}

.control-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 28px;
}

.control-label label {
  color: var(--deep-teal);
  font-family: var(--display);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.control-label output {
  color: var(--deep-teal);
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  text-align: right;
}

.control-label small {
  display: inline;
  margin-left: 5px;
  color: var(--slate);
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 400;
}

.control-group > p {
  max-width: 100%;
  margin: 3px 0 10px;
  color: var(--slate);
  font-size: 0.86rem;
  line-height: 1.4;
}

input[type="range"] {
  width: 100%;
  height: 5px;
  margin: 0;
  appearance: none;
  border-radius: 4px;
  outline: none;
  background: linear-gradient(to right, var(--electric) 0 var(--range-progress), #d7dcd8 var(--range-progress) 100%);
}

input[type="range"]::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  appearance: none;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--deep-teal);
  box-shadow: 0 0 0 1px var(--deep-teal), 0 3px 8px rgba(12, 46, 51, 0.22);
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--deep-teal);
  box-shadow: 0 0 0 1px var(--deep-teal), 0 3px 8px rgba(12, 46, 51, 0.22);
  cursor: pointer;
}

input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(39, 200, 170, 0.4);
}

.range-ends {
  display: flex;
  margin-top: 4px;
  justify-content: space-between;
  color: #8b9490;
  font-family: var(--mono);
  font-size: 0.68rem;
}

.calculator-total {
  display: flex;
  padding: 14px 0 12px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
}

.calculator-total span {
  color: var(--slate);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.calculator-total strong {
  color: var(--signal);
  font-family: var(--display);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  letter-spacing: -0.055em;
  line-height: 1;
}

.privacy-line {
  display: flex;
  margin: 14px 0 0;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--slate);
  font-size: 0.78rem;
}

.testimonial-band {
  padding: 92px 0;
}

.testimonial-band .shell {
  max-width: 980px;
}

.testimonial-band blockquote {
  margin: 0 0 28px;
  color: var(--cloud);
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: -0.035em;
  line-height: 1.24;
}

.testimonial-band blockquote em {
  color: var(--electric);
  font-style: normal;
}

.testimonial-band .attribution strong {
  color: var(--cloud);
}

.testimonial-band .attribution span {
  color: rgba(250, 250, 248, 0.5);
}

.operator-grid,
.about-grid,
.closing-grid {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: clamp(56px, 8vw, 110px);
  align-items: center;
}

.operator-copy h2,
.about-copy h2,
.guarantee-intro h2 {
  color: var(--deep-teal);
}

.operator-copy blockquote {
  margin: 36px 0 24px;
  padding-left: 24px;
  border-left: 3px solid var(--electric);
  color: var(--slate);
  font-size: 1.12rem;
}

.operator-copy blockquote em {
  color: var(--deep-electric);
  font-style: normal;
  font-weight: 600;
}

.attribution-dark strong {
  color: var(--deep-teal);
}

.operator-visual {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.visual-head {
  display: flex;
  padding: 16px 20px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  color: var(--slate);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.visual-head span:last-child {
  color: var(--deep-electric);
}

.operator-visual > svg {
  width: 100%;
  height: auto;
}

.operator-visual figcaption {
  display: grid;
  padding: 24px 28px;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  border-top: 1px solid var(--line);
}

.operator-visual figcaption strong {
  color: var(--deep-teal);
  font-family: var(--display);
  font-size: 1.65rem;
}

.operator-visual figcaption span {
  color: var(--slate);
  font-size: 0.78rem;
}

.operator-photo {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  background: var(--deep-teal);
  box-shadow: var(--shadow);
}

.operator-photo::after {
  position: absolute;
  inset: 38% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(4, 25, 28, 0.78));
  content: "";
  pointer-events: none;
}

.operator-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.operator-photo figcaption {
  position: absolute;
  bottom: 34px;
  left: 32px;
  z-index: 1;
  display: flex;
  padding-left: 20px;
  flex-direction: column;
  gap: 6px;
  border-left: 4px solid var(--electric);
  color: var(--cloud);
}

.operator-photo figcaption strong {
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -0.035em;
  line-height: 1;
  text-transform: uppercase;
}

.operator-photo figcaption span {
  color: rgba(250, 250, 248, 0.84);
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.process .section-heading h2,
.closing h2 {
  color: var(--cloud);
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.process-card {
  position: relative;
  min-height: 420px;
  padding: 34px;
  border: 1px solid rgba(250, 250, 248, 0.14);
  border-radius: 12px;
  background: rgba(250, 250, 248, 0.045);
}

.process-number {
  position: absolute;
  top: 26px;
  right: 28px;
  color: rgba(250, 250, 248, 0.35);
  font-family: var(--mono);
  font-size: 0.7rem;
}

.process-card > svg {
  width: 48px;
  height: 48px;
  margin: 44px 0 38px;
  fill: none;
  stroke: var(--electric);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.process-card h3 {
  margin-bottom: 16px;
  color: var(--cloud);
  font-size: 2rem;
}

.process-card p {
  margin-bottom: 28px;
  color: rgba(250, 250, 248, 0.64);
  font-size: 0.9rem;
}

.process-meta {
  position: absolute;
  right: 34px;
  bottom: 28px;
  left: 34px;
  padding-top: 14px;
  border-top: 1px solid rgba(39, 200, 170, 0.35);
  color: rgba(250, 250, 248, 0.46);
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1.5;
  text-transform: uppercase;
}

.process-cta {
  display: flex;
  margin-top: 22px;
  padding: 24px 28px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(250, 250, 248, 0.14);
  border-radius: 10px;
  background: rgba(250, 250, 248, 0.04);
}

.process-cta span {
  color: rgba(250, 250, 248, 0.6);
}

.process-cta a {
  color: var(--amber);
  font-weight: 600;
}

.process-cta .button-primary {
  color: var(--deep-teal);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.testimonials {
  padding: 148px 0 36px;
}

.testimonials .section-heading {
  max-width: 1100px;
  margin-bottom: 32px;
}

.testimonials .section-heading h2 {
  font-size: clamp(2.6rem, 3.5vw, 3.6rem);
  line-height: 1.02;
}

.testimonial-card {
  position: relative;
  display: flex;
  min-height: 420px;
  padding: 26px;
  overflow: hidden;
  flex-direction: column;
  justify-content: flex-start;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 16px 45px rgba(12, 46, 51, 0.07);
}

.testimonial-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--electric), var(--signal-light));
  content: "";
}

.testimonial-quote-mark {
  margin-bottom: 10px;
  color: var(--electric);
  font-family: Georgia, serif;
  font-size: 4.2rem;
  line-height: 0.65;
}

.testimonial-card blockquote {
  margin: 0 0 24px;
  color: var(--deep-teal);
  font-family: var(--display);
  font-size: clamp(1.08rem, 1.25vw, 1.35rem);
  letter-spacing: -0.025em;
  line-height: 1.38;
}

.testimonial-card blockquote em {
  color: var(--deep-electric);
  font-style: normal;
}

.testimonial-card footer {
  display: flex;
  margin-top: auto;
  padding-top: 18px;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--line);
}

.testimonial-card footer > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.testimonial-card footer strong {
  color: var(--deep-teal);
  font-size: 0.83rem;
}

.testimonial-card footer small {
  color: var(--slate);
  font-size: 0.72rem;
}

.testimonial-initial {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 50%;
  background: var(--deep-teal);
  color: var(--cloud);
  font-family: var(--mono);
  font-size: 0.76rem;
}

.guarantee-grid {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: clamp(56px, 8vw, 110px);
  align-items: start;
}

.guarantee-intro {
  position: sticky;
  top: 120px;
}

.guarantee-intro > p:last-child {
  max-width: 400px;
  color: var(--slate);
  font-size: 1.05rem;
}

.guarantee-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.guarantee-list li {
  display: grid;
  min-height: 152px;
  padding: 30px 8px;
  grid-template-columns: 50px 1fr 38px;
  gap: 24px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.guarantee-list li > span {
  color: var(--slate);
  font-family: var(--mono);
  font-size: 0.72rem;
}

.guarantee-list li p {
  margin: 0;
  color: var(--slate);
  font-size: 1.08rem;
}

.guarantee-list li strong {
  color: var(--deep-teal);
}

.guarantee-list li svg {
  width: 34px;
  height: 34px;
  padding: 6px;
  fill: none;
  border: 1px solid rgba(39, 200, 170, 0.38);
  border-radius: 50%;
  stroke: var(--deep-electric);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-grid {
  grid-template-columns: 1fr 1fr;
}

.about {
  padding: 96px 0 52px;
}

.founder-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.founder-photo::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 46, 51, 0.62), transparent 48%);
  content: "";
  pointer-events: none;
}

.founder-photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 37% 50%;
  filter: saturate(0.82) contrast(0.96) sepia(0.05);
}

.founder-photo figcaption {
  position: absolute;
  right: 24px;
  bottom: 20px;
  left: 24px;
  z-index: 1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  color: var(--cloud);
}

.founder-photo figcaption span:first-child {
  font-weight: 600;
}

.founder-photo figcaption span:last-child {
  color: rgba(250, 250, 248, 0.64);
  font-family: var(--mono);
  font-size: 0.64rem;
  text-transform: uppercase;
}

.about-lede {
  color: var(--deep-teal);
  font-size: 1.18rem;
}

.about-copy > p:not(.eyebrow, .about-lede) {
  color: var(--slate);
}

.about-facts {
  display: grid;
  margin: 28px 0 0;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.about-facts > div {
  padding: 15px 10px 15px 0;
  border-top: 1px solid var(--line);
}

.about-facts strong,
.about-facts span {
  display: block;
}

.about-facts strong {
  color: var(--deep-teal);
  font-family: var(--display);
  font-size: 1.2rem;
}

.about-facts span {
  margin-top: 5px;
  color: var(--slate);
  font-size: 0.68rem;
  line-height: 1.4;
}

.closing {
  padding-block: 130px;
}

.closing-grid {
  grid-template-columns: 1.05fr 0.75fr;
}

.closing h2 {
  margin-bottom: 0;
  font-size: clamp(3rem, 6vw, 6rem);
}

.closing-card {
  padding: 34px;
  border: 1px solid rgba(250, 250, 248, 0.18);
  border-radius: 14px;
  background: rgba(250, 250, 248, 0.06);
}

.closing-card > p:first-child {
  color: rgba(250, 250, 248, 0.7);
}

.closing-card ul {
  display: grid;
  margin: 24px 0 30px;
  padding: 0;
  gap: 15px;
  list-style: none;
}

.closing-card li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  color: var(--cloud);
  font-size: 0.86rem;
}

.small-note {
  margin: 13px 0 0;
  color: rgba(250, 250, 248, 0.45) !important;
  font-size: 0.68rem;
  text-align: center;
}

.site-footer {
  padding: 48px 0 28px;
  background: #081f23;
  color: var(--cloud);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.footer-brand div,
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-brand strong {
  font-family: var(--display);
}

.footer-brand span,
.footer-contact span,
.footer-bottom {
  color: rgba(250, 250, 248, 0.46);
  font-size: 0.7rem;
}

.footer-contact {
  align-items: end;
}

.footer-contact a {
  color: var(--electric);
  font-size: 0.82rem;
}

.footer-bottom {
  display: flex;
  padding-top: 24px;
  grid-column: 1 / -1;
  justify-content: space-between;
  border-top: 1px solid rgba(250, 250, 248, 0.1);
  font-family: var(--mono);
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 500ms cubic-bezier(0.2, 0, 0, 1), transform 500ms cubic-bezier(0.2, 0, 0, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-delay {
  transition-delay: 80ms;
}

.reveal-delay-2 {
  transition-delay: 160ms;
}

.about-page .site-header {
  position: fixed;
}

.about-hero {
  min-height: 820px;
  padding: 168px 0 100px;
}

.about-hero-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
  align-items: center;
}

.about-hero h1 {
  max-width: 660px;
  margin-bottom: 30px;
  font-size: clamp(3rem, 6vw, 6rem);
}

.about-hero-copy .about-lede {
  max-width: 620px;
  color: rgba(250, 250, 248, 0.72);
  font-size: 1.12rem;
}

.about-portrait {
  overflow: hidden;
  border: 1px solid rgba(250, 250, 248, 0.15);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.25);
}

.about-portrait img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.about-portrait figcaption {
  display: flex;
  padding: 18px 20px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: var(--cloud);
}

.about-portrait figcaption span {
  font-weight: 600;
}

.about-portrait figcaption small {
  max-width: 310px;
  color: rgba(250, 250, 248, 0.54);
  text-align: right;
}

.about-story {
  padding: 110px 0;
}

.story-grid {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 90px;
}

.story-grid aside {
  position: sticky;
  top: 120px;
  align-self: start;
}

.story-grid h2 {
  color: var(--deep-teal);
}

.story-copy p {
  color: var(--slate);
  font-size: 1.06rem;
}

.story-copy p:first-child {
  color: var(--deep-teal);
  font-size: 1.3rem;
}

.principles {
  padding: 110px 0;
}

.section-heading-wide {
  max-width: 850px;
  margin-bottom: 54px;
}

.principles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.principle-card {
  min-height: 310px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}

.principle-number {
  display: block;
  margin-bottom: 76px;
  color: var(--signal);
  font-family: var(--mono);
  font-size: 0.72rem;
}

.principle-card h3 {
  color: var(--deep-teal);
}

.principle-card p {
  margin-bottom: 0;
  color: var(--slate);
}

.about-cta {
  padding: 100px 0;
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.cta-inner h2 {
  max-width: 820px;
  margin-bottom: 16px;
  color: var(--cloud);
}

.cta-inner p:last-child {
  margin-bottom: 0;
  color: rgba(250, 250, 248, 0.65);
}

.cta-inner .button {
  flex: 0 0 auto;
}

@media (max-width: 1050px) {
  :root {
    --shell: min(100% - 36px, 860px);
  }

  .site-nav a:not(.nav-cta) {
    display: none;
  }

  .hero {
    padding-top: 160px;
  }

  .hero-grid,
  .calculator-layout,
  .statement-layout,
  .operator-grid,
  .about-grid,
  .closing-grid,
  .about-hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 820px;
  }

  .hero-ledger {
    max-width: 650px;
  }

  .metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .metric:nth-child(2) {
    border-right: 0;
  }

  .metric:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .pain-grid,
  .process-grid {
    grid-template-columns: 1fr;
  }

  .pain-card {
    min-height: 260px;
  }

  .process-card {
    min-height: 360px;
  }

  .operator-visual {
    max-width: 760px;
  }

  .statement-copy {
    max-width: 760px;
  }

  .statement-poster {
    max-width: 690px;
  }

  .guarantee-grid {
    grid-template-columns: 1fr;
  }

  .guarantee-intro,
  .story-grid aside {
    position: static;
  }

  .founder-photo {
    max-width: 760px;
  }

  .story-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .principles-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cta-inner {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  :root {
    --shell: calc(100% - 32px);
  }

  html {
    scroll-padding-top: 86px;
  }

  .site-header {
    top: 8px;
  }

  .nav-shell {
    width: calc(100% - 16px);
    min-height: 64px;
    padding-left: 13px;
    border-radius: 14px;
  }

  .brand-mark {
    width: 30px;
    height: 30px;
  }

  .brand-wordmark {
    width: 83px;
  }

  .brand-lockup > span {
    display: none;
  }

  .menu-button {
    display: block;
  }

  .site-nav {
    position: fixed;
    top: 80px;
    right: 8px;
    left: 8px;
    display: grid;
    padding: 14px;
    transform: translateY(-14px);
    visibility: hidden;
    opacity: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--cloud);
    box-shadow: var(--shadow);
    transition: 180ms ease;
  }

  .site-nav.is-open {
    transform: none;
    visibility: visible;
    opacity: 1;
  }

  .site-nav a:not(.nav-cta) {
    display: block;
  }

  .site-nav .nav-cta {
    margin: 6px 0 0;
    text-align: center;
  }

  .menu-button[aria-expanded="true"] > span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .menu-button[aria-expanded="true"] > span:nth-child(2) {
    opacity: 0;
  }

  .menu-button[aria-expanded="true"] > span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .hero {
    min-height: auto;
    padding: 132px 0 80px;
  }

  .hero-centered h1 {
    margin-bottom: 30px;
    font-size: clamp(2.75rem, 13.5vw, 4.2rem);
    line-height: 1.02;
  }

  .hero-line {
    display: inline;
  }

  .hero-line::after {
    content: " ";
  }

  .hero-centered .eyebrow {
    justify-content: flex-start;
    text-align: left;
  }

  .hero-centered .hero-lede {
    margin-bottom: 30px;
    font-size: 1rem;
    line-height: 1.65;
    text-align: left;
  }

  .hero-grid {
    gap: 54px;
  }

  h1 {
    font-size: clamp(2.75rem, 14vw, 4.2rem);
  }

  h2 {
    font-size: clamp(2.3rem, 11vw, 3.4rem);
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .hero-actions .button {
    width: 100%;
  }

  .text-link {
    align-self: center;
  }

  .proof-chips {
    display: grid;
  }

  .hero-ledger,
  .result-preview,
  .photo-placeholder,
  .calculator-card,
  .closing-card {
    padding: 24px;
  }

  .photo-placeholder {
    min-height: 620px;
  }

  .estimator-photo {
    min-height: 620px;
  }

  .photo-placeholder-inner {
    min-height: 470px;
    padding: 42px 20px;
  }

  .photo-placeholder-caption {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .ledger-topline {
    align-items: start;
    flex-direction: column;
    gap: 8px;
  }

  .ledger-figure,
  .preview-value {
    font-size: clamp(3.65rem, 18vw, 5rem);
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }

  .metric {
    min-height: 118px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .metric:last-child {
    border-bottom: 0;
  }

  .problem,
  .estimator,
  .cost-statement,
  .operator-proof,
  .process,
  .testimonials,
  .guarantees,
  .about,
  .closing,
  .about-story {
    padding: 80px 0;
  }

  .section-heading {
    margin-bottom: 40px;
  }

  .pain-card {
    min-height: 260px;
    padding: 26px;
  }

  .quote-card {
    padding: 70px 20px 26px;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .quote-card .quote-mark {
    top: 16px;
    left: 20px;
  }

  .preview-toolbar {
    margin-bottom: 52px;
  }

  .calculator-head {
    align-items: stretch;
    flex-direction: column;
  }

  .currency-field select {
    width: 100%;
  }

  .control-label {
    align-items: end;
  }

  .calculator-total {
    align-items: start;
    flex-direction: column;
  }

  .statement-layout {
    gap: 54px;
  }

  .statement-action,
  .statement-poster figcaption {
    align-items: flex-start;
    flex-direction: column;
  }

  .statement-action .button {
    width: 100%;
  }

  .statement-action p {
    max-width: none;
  }

  .statement-poster {
    padding: 16px 16px 20px;
  }

  .statement-document-stack {
    width: 82%;
  }

  .statement-example-badge {
    right: -22px;
    bottom: 36px;
  }

  .statement-poster figcaption span {
    max-width: none;
    text-align: left;
  }

  .testimonial-band {
    padding: 72px 0;
  }

  .operator-visual figcaption {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .operator-photo figcaption {
    bottom: 20px;
    left: 20px;
    padding-left: 14px;
  }

  .operator-photo figcaption strong {
    font-size: 1.85rem;
  }

  .operator-photo figcaption span {
    font-size: 0.56rem;
    letter-spacing: 0.12em;
  }

  .process-card {
    min-height: 390px;
    padding: 28px;
  }

  .process-meta {
    right: 28px;
    left: 28px;
  }

  .process-cta {
    align-items: start;
    flex-direction: column;
    gap: 10px;
  }

  .testimonial-card {
    min-height: 390px;
    padding: 30px;
  }

  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .guarantee-list li {
    min-height: 170px;
    grid-template-columns: 34px 1fr;
    gap: 15px;
  }

  .guarantee-list li svg {
    display: none;
  }

  .about-facts {
    grid-template-columns: 1fr;
  }

  .founder-photo figcaption {
    align-items: start;
    flex-direction: column;
    gap: 2px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-contact {
    align-items: start;
  }

  .footer-bottom {
    align-items: start;
    flex-direction: column;
    gap: 8px;
  }

  .about-hero {
    padding: 130px 0 70px;
  }

  .about-portrait figcaption {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .about-portrait figcaption small {
    text-align: left;
  }

  .principles-grid {
    grid-template-columns: 1fr;
  }

  .principle-card {
    min-height: auto;
  }

  .principle-number {
    margin-bottom: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Copy pass, 20 September 2026: new elements */

.hero-note {
  margin: 0;
  color: rgba(250, 250, 248, 0.62);
  font-size: 0.82rem;
}

.hero-centered .hero-actions {
  margin-bottom: 16px;
}

.metric span {
  max-width: 180px;
}

.pain-bridge {
  max-width: 720px;
  margin: 40px auto 0;
  color: var(--deep-teal);
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.4;
  text-align: center;
}

.calculator-bridge {
  margin: 0 0 16px;
  color: var(--slate);
  font-size: 0.86rem;
  line-height: 1.55;
}

.about-objection {
  color: var(--deep-teal);
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1.4;
}

.closing-offer {
  margin: 18px 0 20px;
  color: rgba(250, 250, 248, 0.78);
  font-size: 0.86rem;
  line-height: 1.55;
}


/* Estimator: fit the calculator section into a single viewport on desktop.
   Scoped to widths above the 1050px stacking breakpoint so the stacked
   mobile layout keeps its original, roomier spacing. */
.estimate-note {
  color: var(--slate);
  font-family: var(--body);
  font-size: 0.82rem;
  letter-spacing: 0;
}

.estimate-note::before {
  margin: 0 8px;
  color: var(--line);
  content: "·";
}

@media (min-width: 1051px) {
  .estimator {
    padding: 36px 0;
  }

  .estimator .section-heading {
    margin-bottom: 12px;
  }

  .estimator .section-heading .eyebrow {
    margin-bottom: 4px;
  }

  .estimator .section-heading h2 {
    margin-bottom: 0;
    font-size: 1.9rem;
  }

  /* Take the photo out of flow so the card sets the row height and the
     photo crops to match, rather than its aspect ratio setting the height. */
  .estimator .estimator-photo {
    position: relative;
    min-height: 0;
  }

  .estimator .estimator-photo img {
    position: absolute;
    inset: 0;
  }

  .estimator .calculator-card {
    padding: 18px 24px;
  }

  .estimator .calculator-head {
    margin-bottom: 8px;
  }

  .estimator .mono-label {
    margin-bottom: 6px;
  }

  .estimator .control-group {
    padding: 8px 0;
  }

  .estimator .control-group > p {
    margin: 2px 0 6px;
  }

  .estimator .calculator-total {
    padding: 10px 0 8px;
  }

  .estimator .calculator-bridge {
    margin: 0 0 10px;
  }

  .estimator .privacy-line {
    margin-top: 8px;
  }
}

/* Short desktop screens need a little more out of the slider group
   spacing to clear a single viewport. Keyed to height, not width,
   because height is the actual constraint. */
@media (min-width: 1051px) and (max-height: 840px) {
  .estimator {
    padding: 28px 0;
  }

  .estimator .calculator-card {
    padding: 16px 24px;
  }

  .estimator .control-group {
    padding: 5px 0;
  }

  .estimator .control-group > p {
    margin: 2px 0 4px;
  }
}

/* Very short desktop screens, such as 1366x768. The remaining room comes
   from the section padding and a slightly smaller total, never from the
   copy, which stays intact at every size. */
@media (min-width: 1051px) and (max-height: 790px) {
  .estimator {
    padding: 20px 0;
  }

  .estimator .calculator-head {
    margin-bottom: 6px;
  }

  .estimator .mono-label {
    margin-bottom: 4px;
  }

  .estimator .control-group {
    padding: 4px 0;
  }

  .estimator .privacy-line {
    margin-top: 6px;
  }

  .estimator .calculator-total {
    padding: 8px 0 6px;
  }

  .estimator .calculator-total strong {
    font-size: 2.5rem;
  }

  .estimator .calculator-bridge {
    margin: 0 0 8px;
    line-height: 1.45;
  }
}

/* Problem and Cost Statement: fit each into a single viewport on desktop.
   Same approach as the estimator, scoped above the 1050px stacking
   breakpoint so the stacked mobile layout keeps its original spacing.

   The pain cards carried a 305px floor that made them taller than their
   content needed, so most of the room here comes from dropping that floor
   rather than from squeezing type. */
@media (min-width: 1051px) {
  .problem {
    padding: 56px 0;
  }

  .problem .section-heading {
    margin-bottom: 32px;
  }

  .problem .pain-card {
    min-height: 0;
  }

  .problem .pain-bridge {
    margin-top: 26px;
  }

  /* The poster image sets the row height here, not the copy, so the
     headline keeps its full size and the room comes from the padding
     and the benefit list. */
  .cost-statement {
    padding: 32px 0;
  }

  .cost-statement .statement-lede {
    margin-bottom: 16px;
  }

  .cost-statement .statement-benefits {
    margin: 0 0 16px;
  }

  .cost-statement .statement-benefits li {
    padding: 9px 0;
  }
}

/* Standard laptop heights. The headline steps down a little so the
   section clears the fold with room to spare rather than landing exactly
   on it. */
@media (min-width: 1051px) and (max-height: 960px) {
  .problem {
    padding: 44px 0;
  }

  .problem .section-heading h2 {
    margin-bottom: 0;
    font-size: 3.9rem;
  }
}

/* Short desktop screens. The problem headline is the only thing large
   enough to matter here, so it steps down rather than losing any copy. */
@media (min-width: 1051px) and (max-height: 840px) {
  .problem {
    padding: 40px 0;
  }

  .problem .section-heading {
    margin-bottom: 24px;
  }

  .problem .section-heading h2 {
    margin-bottom: 0;
    font-size: 3.4rem;
  }

  .problem .pain-bridge {
    margin-top: 20px;
  }
}

@media (min-width: 1051px) and (max-height: 790px) {
  .problem {
    padding: 32px 0;
  }

  .problem .section-heading h2 {
    font-size: 3.1rem;
  }

  .problem .pain-card {
    padding: 24px;
  }

  .problem .pain-grid {
    gap: 14px;
  }
}

/* ==========================================================================
   Conversion design pass, 20 September 2026
   Design only. No structural or copy changes. Every rule below exists to make
   the single amber call to action easier to see, trust and press.
   ========================================================================== */

/* Easing. The built in curves are too soft to read as deliberate at these
   durations, so the pass uses stronger custom ones. */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* --------------------------------------------------------------------------
   1. Keyboard focus. The page had no visible focus ring on any link or button
   outside the skip link, so keyboard and switch users could not see where they
   were. Neutral ring colours only, so no semantic colour is reassigned.
   -------------------------------------------------------------------------- */

:where(a, button, select, input, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--deep-teal);
  outline-offset: 3px;
  border-radius: 6px;
}

.section-dark :where(a, button, select, input, textarea, [tabindex]):focus-visible,
.site-footer :where(a, button):focus-visible,
.hero :where(a, button):focus-visible {
  outline-color: var(--cloud);
}

/* The ring is offset clear of the amber, so its contrast is against the
   surface the button sits on, not against the button. That is why the colour
   is chosen by section above and not by the button, and why amber surfaces
   only widen the gap rather than recolour the ring. */
:where(.button-primary, .button-amber, .nav-cta, .mobile-cta-bar .button):focus-visible {
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   2. Press feedback. Hover already lifted the button, but nothing happened on
   press, which on touch reads as a dropped tap and invites a second one.
   -------------------------------------------------------------------------- */

.button,
.nav-cta {
  -webkit-tap-highlight-color: transparent;
  transition-timing-function: var(--ease-out);
}

.button:active,
.nav-cta:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 120ms;
}

/* The lift is a pointer affordance. On a touch screen it fires on tap and
   stays stuck, which reads as a button that did not respond, so it is gated. */
@media not all and (hover: hover) and (pointer: fine) {
  .button:hover,
  .nav-cta:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   3. Call to action presence. A defined edge plus a warmer, wider pool of
   shadow so the amber sits above the surface instead of flat on it. Geometry
   is untouched, so the single viewport fitting for the problem, estimator and
   cost statement sections is unaffected.
   -------------------------------------------------------------------------- */

.button-primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 0 1px rgba(12, 46, 51, 0.16),
    0 14px 30px rgba(240, 180, 76, 0.26);
}

.button-primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 0 1px rgba(12, 46, 51, 0.2),
    0 20px 42px rgba(240, 180, 76, 0.38);
}

.section-dark .button-primary,
.hero .button-primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 0 1px rgba(240, 180, 76, 0.42),
    0 18px 44px rgba(240, 180, 76, 0.22),
    0 10px 24px rgba(0, 0, 0, 0.28);
}

.section-dark .button-primary:hover,
.hero .button-primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 0 1px rgba(240, 180, 76, 0.6),
    0 24px 56px rgba(240, 180, 76, 0.32),
    0 12px 28px rgba(0, 0, 0, 0.32);
}

/* The hero button carries the whole first screen, so it alone grows. */
.hero-primary-cta {
  min-height: 64px;
  padding: 18px 40px;
  font-size: 1.06rem;
}

/* --------------------------------------------------------------------------
   4. Amber belongs to the call to action and nothing else. The example badge
   on the cost statement poster was amber, putting a second amber target in the
   same viewport as that section's button. It is now a neutral paper tag.
   -------------------------------------------------------------------------- */

.statement-example-badge {
  border-color: rgba(12, 46, 51, 0.28);
  background: var(--cloud);
  color: var(--deep-teal);
}

/* --------------------------------------------------------------------------
   5. Contrast. The process card footnote sat at 4.09:1, under WCAG AA, in the
   section immediately above a call to action.
   -------------------------------------------------------------------------- */

.process-meta {
  color: rgba(250, 250, 248, 0.68);
}

/* Reassurance lines sit at the moment of decision, so they are readable
   rather than decorative. */
.hero-note {
  color: rgba(250, 250, 248, 0.74);
}

.statement-action p {
  color: rgba(250, 250, 248, 0.66);
}

/* --------------------------------------------------------------------------
   6. Persistent call to action on mobile. Below 720px the header collapses to
   a hamburger and the amber button goes with it, leaving roughly 14,000px of
   page with no visible way to act. This bar carries the same label to the same
   route, and hides itself whenever a real section button is on screen so the
   reader never sees two amber targets at once.
   -------------------------------------------------------------------------- */

.mobile-cta-bar {
  position: fixed;
  z-index: 900;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  transform: translateY(130%);
  border-top: 1px solid rgba(12, 46, 51, 0.1);
  background: rgba(250, 250, 248, 0.92);
  box-shadow: 0 -10px 30px rgba(12, 46, 51, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* Leaving is quicker than arriving. It leaves because a real section button
     has come into view, and that button should not wait on this one. */
  transition: transform 180ms var(--ease-out);
}

.mobile-cta-bar .button {
  width: 100%;
  min-height: 56px;
}

@media (max-width: 720px) {
  .mobile-cta-bar {
    display: block;
  }

  .mobile-cta-bar.is-visible {
    transform: translateY(0);
    transition: transform 280ms var(--ease-drawer);
  }

  /* Keep the footer clear of the bar. */
  body.has-mobile-cta .site-footer {
    padding-bottom: 96px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .mobile-cta-bar {
    background: var(--cloud);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* --------------------------------------------------------------------------
   7. Mobile hero. Trimmed so the button and its reassurance line clear the
   usable viewport on a small phone, where browser chrome eats roughly 200px.
   Type scale is preserved; only rhythm is tightened.
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .hero {
    padding-top: 116px;
  }

  .hero-centered .eyebrow {
    margin-bottom: 18px;
  }

  .hero-centered h1 {
    margin-bottom: 22px;
  }

  .hero-centered .hero-lede {
    margin-bottom: 24px;
    line-height: 1.55;
  }

  .hero-primary-cta {
    min-height: 60px;
    padding: 16px 28px;
    font-size: 1rem;
  }
}

/* --------------------------------------------------------------------------
   8. Follow up pass. Three corrections agreed after the review.

   a. The vanished money in the hero is the problem being measured, so it takes
      Signal Red rather than the proof colour. Dark surfaces use the lighter
      variant, the same way the big figures already do.
   b. One label per action, so the estimator button matches the other six.
   c. A way to act from the accountability section, which was the only high
      intent moment on the page with no button.
   -------------------------------------------------------------------------- */

.text-leak {
  color: var(--signal);
}

.section-dark .text-leak,
.hero .text-leak {
  color: var(--signal-light);
}

/* The intro column is narrow, so the button and its line stack rather than
   sitting side by side, which broke the line mid phrase. */
.guarantee-action {
  display: flex;
  margin-top: 32px;
  align-items: flex-start;
  flex-direction: column;
  gap: 14px;
}

.guarantee-action p {
  margin: 0;
  color: var(--slate);
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .guarantee-action {
    align-items: stretch;
  }

  .guarantee-action .button {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   9. Problem section, density pass.

   The section carried 161 words across six text blocks at five sizes. The
   three quotes were doing all the work and everything else restated them.
   The floating right paragraph and the corner numbers are gone, the card
   bodies are one line each, and the height that frees up goes into the
   quotes rather than into making the section shorter.
   -------------------------------------------------------------------------- */

.problem .section-heading h2 {
  margin-bottom: 0;
  color: var(--deep-teal);
}

/* The quote is the card. It now outranks its body clearly instead of
   sitting a half step above it. */
.pain-card h3 {
  margin-bottom: 14px;
  font-size: clamp(1.35rem, 1.78vw, 1.68rem);
  line-height: 1.2;
}

.pain-card p {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* With no number in the corner the icon no longer has to clear it. */
.pain-card > svg {
  margin: 20px 0 28px;
}

/* Stacked cards do not need to match each other, and the old floor was set
   for copy that is no longer there, so it left a dead band under each one. */
@media (max-width: 1050px) {
  .pain-card {
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .pain-card h3 {
    font-size: 1.24rem;
  }

  .pain-card > svg {
    margin: 16px 0 22px;
  }
}