:root {
  --white: #ffffff;
  --sand-200: #e6e2df;
  --sand-300: #d3cdc8;
  --graphite-600: #5a5a60;
  --graphite-900: #252526;
  --orange-50: #fff4ee;
  --orange-500: #f4511e;
  --orange-700: #c2410c;
  --orange-800: #9f340a;

  --color-bg: var(--white);
  --color-tint: var(--orange-50);
  --color-text: var(--graphite-900);
  --color-muted: var(--graphite-600);
  --color-line: var(--sand-200);
  --color-field: var(--sand-300);
  --color-brand: var(--orange-500);
  --color-brand-text: var(--orange-700);
  --color-action: var(--orange-700);
  --color-action-hover: var(--orange-800);

  --font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --page: 68rem;
  --gutter: 1.25rem;
  --label-col: 15rem;
  --col-gap: 5.5rem;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  border-top: 6px solid var(--color-brand);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; text-wrap: balance; }
p, dd { text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--color-action); outline-offset: 3px; border-radius: 2px; }
[id] { scroll-margin-top: 1.5rem; }

.skip {
  position: absolute; left: 1rem; top: 1rem; z-index: 10;
  padding: .75rem 1rem; background: var(--color-text); color: var(--white); font-weight: 600; text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

.wrap {
  width: 100%;
  max-width: calc(var(--page) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* Header */
.top { border-bottom: 1px solid var(--color-line); }
.top-bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.25rem; }
.brand { display: block; padding-block: .75rem; }
.brand img { width: 4.5rem; height: auto; }
.nav { display: none; align-items: center; gap: 2rem; font-size: .875rem; }
.nav a { color: var(--color-muted); text-decoration: none; padding-block: .75rem; transition: color 160ms ease; }
.nav a.nav-cta { color: var(--color-action); font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { color: var(--color-text); }
  .nav a.nav-cta:hover { color: var(--color-action-hover); }
}

.menu { position: relative; }
.menu summary {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: -.625rem;
  list-style: none; cursor: pointer; color: var(--color-text); user-select: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu-panel {
  position: absolute; right: -.625rem; top: calc(100% + .25rem); z-index: 5; min-width: 15rem;
  display: grid; padding: .5rem; background: var(--color-bg); border: 1px solid var(--color-line); border-radius: 6px;
  box-shadow: 0 16px 32px -16px rgb(37 37 38 / 0.25), 0 2px 6px rgb(37 37 38 / 0.06);
  transform-origin: top right;
}
.menu[open] .menu-panel { animation: menu-in 180ms var(--ease-out); }
.menu-panel a { padding: .75rem .875rem; text-decoration: none; font-size: .9375rem; border-radius: 4px; }
.menu-panel a:last-child { color: var(--color-action); font-weight: 500; }
.menu-panel a:active { background: var(--color-tint); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(0.97); } }

/* Shared section grid */
.band { border-top: 1px solid var(--color-line); padding-block: 4rem 4.5rem; }
.split { display: grid; gap: 1.25rem; }
.label { display: flex; gap: .75rem; font-size: .875rem; line-height: 1.3; color: var(--color-text); }
.label span { color: var(--color-brand-text); font-weight: 500; }
.label-plain { font-size: .875rem; font-weight: 500; line-height: 1.3; }
.intro { display: grid; gap: 1.25rem; max-width: 42.5rem; }
.intro h2 { font-size: clamp(1.75rem, 4.2vw, 2.5rem); line-height: 1.2; letter-spacing: -0.025em; }
.intro > p:not(.lede) { color: var(--color-muted); line-height: 1.7; }

/* Hero */
.hero { display: grid; gap: 1.75rem; padding-block: 2.5rem 4rem; }
.hero h1 { font-size: clamp(2.5rem, 6.2vw, 4rem); line-height: 1.13; letter-spacing: -0.03em; max-width: 55rem; }
.rule { display: block; width: 3rem; height: 4px; background: var(--color-brand); }
.lede { font-size: clamp(1rem, 1.6vw, 1.125rem); line-height: 1.65; color: var(--color-muted); max-width: 40rem; }
.hero-actions { display: grid; gap: 1rem; padding-top: .25rem; }
.hint { font-size: .875rem; color: var(--color-muted); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  min-height: 3.25rem; padding: 1rem 1.5rem;
  background: var(--color-action); color: var(--white); border-radius: 4px;
  font-weight: 500; line-height: 1.25; text-decoration: none; user-select: none;
  transition: background-color 160ms ease, transform 120ms var(--ease-out);
}
.button svg { flex: none; transition: transform 200ms var(--ease-out); }
.button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--color-action-hover); }
  .button:hover svg { transform: translateX(3px); }
}

.link {
  display: inline-block; margin-top: .875rem; padding-block: .375rem;
  color: var(--color-action); font-size: .875rem; font-weight: 500;
  text-decoration: underline 1px; text-underline-offset: 4px; text-decoration-color: rgb(194 65 12 / 0.4);
  transition: text-decoration-color 160ms ease, color 160ms ease;
}
@media (hover: hover) and (pointer: fine) { .link:hover { color: var(--color-action-hover); text-decoration-color: currentColor; } }

/* 01 Areas */
.areas { margin-top: 2.5rem; border-top: 2px solid var(--color-text); }
.areas > li { padding-block: 1.75rem; border-bottom: 1px solid var(--color-line); row-gap: .75rem; }
.areas h3 { font-size: clamp(1.5rem, 2.6vw, 1.75rem); line-height: 1.25; letter-spacing: -0.02em; }
.areas p { font-size: clamp(1rem, 1.6vw, 1.125rem); line-height: 1.6; }

/* 02 Report sample */
.sample-row { margin-top: 2.5rem; gap: 1.25rem; }
.sample-note { font-size: .875rem; line-height: 1.55; color: var(--color-muted); }
.sample-note strong { display: block; color: var(--color-text); font-weight: 500; margin-bottom: .375rem; }
.sheet {
  padding: 1.75rem 1.25rem .5rem;
  background: var(--color-bg); border-top: 4px solid var(--color-brand); border-radius: 2px;
  box-shadow: 0 24px 48px -24px rgb(37 37 38 / 0.18), 0 2px 6px rgb(37 37 38 / 0.04), 0 0 0 1px rgb(37 37 38 / 0.04);
}
.sheet header { display: grid; gap: .75rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-line); }
.kicker { font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--color-brand-text); }
.sheet-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.375rem, 2.6vw, 2rem); line-height: 1.2; letter-spacing: -0.025em; text-wrap: balance; }
.sheet ol { counter-reset: item; }
.sheet li { counter-increment: item; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: 1.25rem; row-gap: .5rem; padding-block: 1.5rem; }
.sheet li + li { border-top: 1px solid var(--color-line); }
.sheet li::before { content: counter(item, decimal-leading-zero); grid-row: span 3; padding-top: .2rem; font-size: .875rem; font-weight: 500; color: var(--color-brand-text); }
.sheet li p { font-size: .9375rem; line-height: 1.6; color: var(--color-muted); }
.sheet .item-title { font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; line-height: 1.4; color: var(--color-text); }
.sheet .fix { color: var(--color-text); }
.sheet .fix strong { font-weight: 600; }
.sheet-extra { display: none !important; }

/* 03 Scope and terms */
.scope { display: grid; gap: 2.5rem; margin-top: 2.5rem; }
.scope h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.4; padding-bottom: 1rem; border-bottom: 2px solid var(--color-text); }
.scope-out h3 { color: var(--color-muted); border-bottom-color: var(--color-field); }
.scope dl > div { display: grid; gap: .25rem; padding-block: 1.125rem; }
.scope dl > div + div { border-top: 1px solid var(--color-line); }
.scope dt { font-weight: 500; line-height: 1.3; }
.scope dd { font-size: .9375rem; line-height: 1.55; color: var(--color-muted); }
.terms-row { margin-top: 2.5rem; padding: 1.75rem 1.25rem; background: var(--color-tint); border-radius: 4px; }
.terms { display: grid; gap: 1.5rem; }
.terms dt { font-size: .9375rem; font-weight: 500; line-height: 1.3; }
.terms dd { font-size: .9375rem; line-height: 1.55; color: var(--color-muted); margin-top: .25rem; }

/* 04 Contact */
.contact { background: var(--color-tint); padding-block: 4rem 4.5rem; }
.contact h2 { font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.17; letter-spacing: -0.03em; }
.contact-actions { display: grid; gap: 1.5rem; padding-top: .5rem; }
.phone { display: grid; gap: .125rem; }
.phone span { font-size: .8125rem; color: var(--color-muted); }
.phone a { font-size: 1.125rem; font-weight: 500; text-decoration: none; font-variant-numeric: tabular-nums; width: fit-content; padding-block: .25rem; }
@media (hover: hover) and (pointer: fine) { .phone a:hover { color: var(--color-action); } }

/* Footer */
.foot { border-top: 1px solid var(--color-line); }
.foot-bar { display: grid; gap: .75rem; padding-block: 2rem calc(2rem + env(safe-area-inset-bottom, 0px)); font-size: .8125rem; color: var(--color-muted); }
.foot-brand { display: grid; gap: .75rem; }
.foot-brand img { width: 4rem; }

/* Wide screens: label column beside the content, as in the LVTI documents */
@media (min-width: 60rem) {
  :root { --gutter: 2.5rem; }
  .top-bar { min-height: 6.25rem; }
  .brand img { width: 6rem; }
  .nav { display: flex; }
  .menu { display: none; }
  .split { grid-template-columns: var(--label-col) minmax(0, 1fr); column-gap: var(--col-gap); }
  .label { padding-top: .6rem; }
  .hero { gap: 2.5rem; padding-block: 7.5rem 7rem; }
  .rule { width: 4rem; }
  .hero-actions { display: flex; align-items: center; gap: 1.5rem; padding-top: .5rem; }
  .band { padding-block: 6rem 7rem; }
  .areas { margin-top: 3rem; }
  .areas > li { padding-block: 2.25rem; }
  .areas > li > :last-child { padding-top: .25rem; }
  .sample-row { margin-top: 3.5rem; }
  .sample-note { padding-top: 2.5rem; }
  .sheet { padding: 2.5rem 3rem 1rem; }
  .sheet-extra { display: grid !important; }
  .scope { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; margin-top: 3.5rem; }
  .terms-row { padding: 0; background: none; margin-top: 3.5rem; }
  .terms-row .label-plain { padding-top: 2rem; }
  .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 3rem; padding: 2rem 2.25rem; background: var(--color-tint); border-radius: 4px; }
  .contact { padding-block: 6.5rem; }
  .contact .label { padding-top: 1.1rem; }
  .contact-actions { display: flex; align-items: center; gap: 1.75rem; padding-top: .75rem; }
  .foot-bar { display: flex; justify-content: space-between; align-items: center; }
  .foot-brand { display: flex; align-items: center; gap: 1.25rem; }
}

/* Motion: the opening rises in once on load. */
@media (prefers-reduced-motion: no-preference) {
  .hero > * { animation: rise 700ms var(--ease-out) both; }
  .hero > :nth-child(2) { animation: draw 600ms var(--ease-out) 180ms both; }
  .hero > :nth-child(3) { animation-delay: 120ms; }
  .hero > :nth-child(4) { animation-delay: 220ms; }
}

/* Blocks below the opening rise in once as they enter the viewport; items in a group follow each other by 70ms. */
.motion .reveal, .motion [data-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out) var(--delay, 0ms), transform 900ms var(--ease-out) var(--delay, 0ms);
}
.motion .sheet.reveal { transform: translateY(40px) scale(0.98); transform-origin: 50% 0; }
.motion .reveal.is-in, .motion [data-stagger] > .is-in { opacity: 1; transform: none; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  .hero > * { animation: fade 400ms ease both; }
  .menu[open] .menu-panel { animation: fade 150ms ease; }
}
@keyframes fade { from { opacity: 0; } }