@layer reset, tokens, base, components, sections, responsive, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; text-size-adjust: 100%; }
  body, h1, h2, h3, p, ol { margin: 0; }
  ol { padding: 0; list-style: none; }
  img, svg { display: block; }
  img { max-width: 100%; }
  button, input, a { font: inherit; }
}

@layer tokens {
  :root {
    color-scheme: light;
    --font-heading: "Inter Tight", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --navy-950: #030a13;
    --navy-900: #071426;
    --navy-800: #10223a;
    --navy-700: #18304d;
    --orange-500: #ff6b1a;
    --orange-400: #ff8a4c;
    --slate-700: #334155;
    --slate-500: #64748b;
    --slate-300: #cbd5e1;
    --slate-200: #e2e8f0;
    --slate-100: #f1f5f9;
    --off-white: #f7f9fc;
    --white: #fff;
    --success: #16845b;
    --error: #c73535;
    --radius-sm: .5rem;
    --radius-md: .75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --ease: cubic-bezier(.2, 0, 0, 1);
    --ease-enter: cubic-bezier(.16, 1, .3, 1);
    --section: clamp(5rem, 10vw, 8rem);
  }
}

@layer base {
  html, body { min-width: 20rem; overflow-x: hidden; }
  body {
    background: var(--navy-950);
    color: var(--navy-900);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  h1, h2, h3 { font-family: var(--font-heading); text-wrap: balance; }
  p { text-wrap: pretty; }
  a { color: inherit; text-decoration: none; }
  :focus-visible { outline: 2px solid var(--orange-400); outline-offset: 3px; }
  .container, .container-xl { width: min(100% - 2.5rem, 75rem); margin-inline: auto; }
  .container-xl { max-width: 82.5rem; }
}

@layer components {
  .skip-link {
    position: fixed; z-index: 100; top: .75rem; left: .75rem;
    padding: .65rem 1rem; border-radius: var(--radius-sm);
    background: var(--white); color: var(--navy-950); font-weight: 600;
    transform: translateY(-150%); transition: transform 180ms var(--ease);
  }
  .skip-link:focus { transform: translateY(0); }
  .brand { display: inline-flex; align-items: center; padding-block: .5rem; }
  .brand__logo { width: 8.25rem; height: auto; filter: brightness(0) invert(1); }
  .eyebrow {
    display: flex; align-items: center; gap: .625rem; color: rgb(255 255 255 / .67);
    font-size: .75rem; font-weight: 600; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase;
  }
  .eyebrow > span:first-child {
    width: .5rem; height: .5rem; flex: 0 0 auto; border-radius: 50%;
    background: var(--orange-500); box-shadow: 0 0 0 .25rem rgb(255 107 26 / .12);
  }
  .eyebrow--dark { color: var(--slate-700); }
  .button {
    display: inline-flex; min-height: 3.5rem; align-items: center; justify-content: center; gap: .5rem;
    padding: .875rem 1.5rem; border: 1px solid transparent; border-radius: var(--radius-md);
    font-weight: 600; line-height: 1; cursor: pointer;
    transition: background-color 200ms var(--ease), box-shadow 200ms var(--ease), transform 200ms var(--ease);
  }
  .button svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transition: transform 200ms var(--ease); }
  .button:hover { transform: translateY(-1px); }
  .button:hover svg { transform: translateX(2px); }
  .button:active { transform: translateY(0); }
  .button--primary { background: var(--orange-500); color: var(--navy-950); box-shadow: 0 8px 24px rgb(255 107 26 / .18); }
  .button--primary:hover { background: var(--orange-400); box-shadow: 0 10px 30px rgb(255 107 26 / .24); }
  .button:disabled { opacity: .65; cursor: wait; transform: none; }
  .section { padding-block: var(--section); background: var(--white); }
  .section-heading { max-width: 47rem; margin-bottom: clamp(3rem, 7vw, 5rem); }
  .section-heading .eyebrow { margin-bottom: 1.25rem; }
  .section-heading h2 {
    font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.08;
  }
  .section-heading--row { display: grid; max-width: none; grid-template-columns: minmax(0, 1.4fr) minmax(17rem, .6fr); align-items: end; gap: 4rem; }
  .section-heading--row > p { max-width: 34rem; color: var(--slate-700); font-size: 1.0625rem; }
}

@layer sections {
  .site-header { position: absolute; z-index: 10; top: 0; right: 0; left: 0; }
  .site-header__inner { display: flex; min-height: 5rem; align-items: center; justify-content: space-between; gap: 2rem; }
  .header-note { display: flex; align-items: center; gap: .625rem; color: rgb(255 255 255 / .68); font-size: .8125rem; font-weight: 500; }
  .header-note span { width: .4rem; height: .4rem; border-radius: 50%; background: #4bd1a0; box-shadow: 0 0 0 .2rem rgb(75 209 160 / .12); }

  .hero { position: relative; isolation: isolate; min-height: 49rem; overflow: hidden; background: var(--navy-950); color: #f8fafc; }
  .hero::before {
    position: absolute; z-index: -2; inset: 0; content: "";
    background: radial-gradient(circle at 78% 26%, rgb(24 48 77 / .58), transparent 32%), linear-gradient(135deg, var(--navy-950), var(--navy-900) 65%, #08182b);
  }
  .hero__grid {
    position: absolute; z-index: -1; inset: 0; opacity: .22;
    background-image: linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px);
    background-size: 4.5rem 4.5rem;
    mask-image: linear-gradient(to bottom, transparent 5%, #000 40%, transparent 96%);
  }
  .hero__inner { display: grid; min-height: 49rem; grid-template-columns: minmax(0, 1.1fr) minmax(28rem, .8fr); align-items: center; gap: clamp(4rem, 8vw, 8rem); padding-block: 8.5rem 4rem; }
  .hero__content { max-width: 45rem; }
  .hero__content .eyebrow { margin-bottom: 1.75rem; }
  .hero h1 { max-width: 12ch; font-size: clamp(3rem, 5.5vw, 5rem); font-weight: 600; letter-spacing: -.045em; line-height: .98; }
  .hero__accent { color: var(--orange-500); }
  .hero__lead { max-width: 41rem; margin-top: 2rem; color: #bdc8d6; font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.55; }
  .assurance { display: flex; align-items: flex-start; gap: .75rem; margin-top: 2rem; color: #e3e9f0; font-size: .9375rem; }
  .assurance svg { flex: 0 0 auto; margin-top: .12rem; fill: none; stroke: var(--orange-400); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }

  .lead-form-wrap { min-height: 36.5rem; padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid rgb(255 255 255 / .14); border-radius: var(--radius-xl); background: rgb(11 25 43 / .92); box-shadow: 0 24px 64px rgb(0 0 0 / .2); backdrop-filter: blur(1rem); }
  .form-intro { margin-bottom: 1.5rem; }
  .form-intro__step { margin-bottom: .4rem; color: var(--orange-400); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
  .form-intro h2, .success-state h2 { color: #f8fafc; font-size: 1.75rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
  .form-intro > p:last-child { margin-top: .4rem; color: #9eacbd; font-size: .875rem; }
  .lead-form { display: grid; gap: 1rem; }
  .lead-form[hidden] { display: none; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .field { min-width: 0; }
  .field label { display: block; margin-bottom: .4rem; color: #e7edf4; font-size: .8125rem; font-weight: 500; }
  .label-optional { margin-left: .3rem; color: #8291a4; font-size: .6875rem; font-weight: 400; }
  .field input {
    width: 100%; min-height: 3.25rem; padding: .75rem .875rem; border: 1px solid rgb(255 255 255 / .15);
    border-radius: var(--radius-sm); outline: 0; background: rgb(255 255 255 / .045); color: #f8fafc;
    transition: border-color 200ms var(--ease), background-color 200ms var(--ease), box-shadow 200ms var(--ease);
  }
  .field input::placeholder { color: #78879a; }
  .field input:hover { border-color: rgb(255 255 255 / .28); }
  .field input:focus { border-color: var(--orange-400); background: rgb(255 255 255 / .065); box-shadow: 0 0 0 3px rgb(255 107 26 / .14); }
  .field.has-error input { border-color: #ff7474; box-shadow: 0 0 0 3px rgb(255 116 116 / .1); }
  .field__error { min-height: 1.05rem; margin-top: .25rem; color: #ff9a9a; font-size: .75rem; line-height: 1.35; }
  .consent { display: grid; grid-template-columns: 1.25rem 1fr; column-gap: .75rem; align-items: start; }
  .lead-form .consent input {
    width: 1.25rem; min-height: 1.25rem; height: 1.25rem; margin: .12rem 0 0;
    border: 1px solid rgb(255 255 255 / .24); border-radius: .25rem;
    accent-color: var(--orange-500); cursor: pointer;
  }
  .lead-form .consent input:focus-visible { outline: 2px solid var(--orange-400); outline-offset: 3px; }
  .consent label { margin: 0; color: #aab7c7; font-size: .75rem; font-weight: 400; line-height: 1.5; cursor: pointer; }
  .consent label a { color: #d2dae4; text-decoration: underline; text-underline-offset: .2em; }
  .consent .field__error { grid-column: 2; }
  .consent.has-error input { outline: 2px solid #ff7474; outline-offset: 2px; box-shadow: none; }
  .lead-form .button { width: 100%; margin-top: .15rem; }
  .form-microcopy { color: #8f9daf; font-size: .75rem; line-height: 1.5; text-align: center; }
  .form-microcopy a { color: #c7d0dc; text-decoration: underline; text-underline-offset: .2em; }
  .form-status { padding: .75rem; border-radius: var(--radius-sm); font-size: .8125rem; text-align: center; }
  .form-status--error { border: 1px solid rgb(255 116 116 / .25); background: rgb(255 116 116 / .08); color: #ffb0b0; }
  .honeypot { position: absolute; overflow: hidden; width: 1px; height: 1px; clip-path: inset(50%); white-space: nowrap; }
  .success-state {
    min-height: 31rem; flex-direction: column; align-items: flex-start; justify-content: center;
    padding: clamp(2rem, 5vw, 3.5rem); border: 1px solid rgb(75 209 160 / .35);
    border-radius: var(--radius-lg); background: rgb(75 209 160 / .075);
  }
  .success-state:not([hidden]) { display: flex; }
  .success-state:focus { outline: 0; }
  .success-state:focus-visible { outline: 2px solid #4bd1a0; outline-offset: 4px; }
  .success-state__mark { display: grid; width: 4.5rem; height: 4.5rem; margin-bottom: 2rem; place-items: center; border: 1px solid rgb(75 209 160 / .32); border-radius: 50%; background: rgb(75 209 160 / .16); color: #4bd1a0; }
  .success-state__mark svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
  .success-state__eyebrow { margin-bottom: .5rem; color: #4bd1a0; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
  .success-state h2 { max-width: 15ch; font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.12; }
  .success-state__text { max-width: 32ch; margin-top: 1.25rem; color: #d0d9e4; font-size: 1.0625rem; }
  .success-state__note { margin-top: 1rem; color: #91a1b4; font-size: .8125rem; }

  .deliverables { background: var(--off-white); }
  .deliverables__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--slate-200); }
  .deliverable { padding: 2rem clamp(1.5rem, 3vw, 2.5rem) 0 0; }
  .deliverable + .deliverable { padding-left: clamp(1.5rem, 3vw, 2.5rem); border-left: 1px solid var(--slate-200); }
  .index { margin-bottom: 2.5rem; color: #c94300; font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
  .deliverable h3 { margin-bottom: .75rem; font-size: 1.5rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
  .deliverable > p:last-child { color: var(--slate-700); }

  .example { background: var(--navy-900); color: #f8fafc; }
  .example__layout { display: grid; grid-template-columns: minmax(18rem, .6fr) minmax(0, 1.4fr); align-items: center; gap: clamp(4rem, 9vw, 8rem); }
  .example__intro .eyebrow { margin-bottom: 1.5rem; }
  .example__intro h2 { font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; }
  .example__intro > p:last-child { margin-top: 1.5rem; color: #aab7c7; font-size: 1.0625rem; }
  .audit-preview { min-width: 0; }
  .audit-browser { overflow: hidden; border: 1px solid rgb(255 255 255 / .14); border-radius: var(--radius-lg); background: #f8fafc; box-shadow: 0 24px 64px rgb(0 0 0 / .2); }
  .audit-browser__bar { display: flex; height: 2.5rem; align-items: center; gap: .35rem; padding-inline: .875rem; border-bottom: 1px solid #dfe5ec; background: #eef2f6; }
  .audit-browser__bar i { width: .5rem; height: .5rem; border-radius: 50%; background: #bac4d0; }
  .audit-browser__bar span { margin-left: .75rem; color: #7b8795; font-size: .6875rem; }
  .audit-browser__page { position: relative; min-height: 19rem; padding: 1.25rem; }
  .audit-browser__nav { display: flex; align-items: center; gap: .75rem; }
  .audit-browser__nav b { width: 4.5rem; height: .7rem; margin-right: auto; border-radius: 1rem; background: var(--navy-900); }
  .audit-browser__nav span { width: 2.5rem; height: .35rem; border-radius: 1rem; background: #c8d1dc; }
  .audit-browser__hero { display: grid; grid-template-columns: 1.1fr .8fr; align-items: center; gap: 2rem; padding: 3rem 1rem 2.25rem; }
  .audit-browser__hero div { display: grid; gap: .6rem; }
  .audit-browser__hero b { display: block; width: 90%; height: .8rem; border-radius: 1rem; background: var(--navy-900); }
  .audit-browser__hero b:nth-child(2) { width: 68%; }
  .audit-browser__hero span { width: 88%; height: .4rem; margin-top: .4rem; border-radius: 1rem; background: #c8d1dc; }
  .audit-browser__hero em { width: 5rem; height: 1.5rem; margin-top: .6rem; border-radius: .3rem; background: var(--orange-500); }
  .audit-browser__hero > i { height: 8.5rem; border-radius: .75rem; background: linear-gradient(145deg, #dbe2e9, #aebbc8); }
  .audit-browser__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
  .audit-browser__cards span { height: 3rem; border: 1px solid #dde4eb; border-radius: .45rem; background: #f3f6f9; }
  .pin { position: absolute; display: grid; width: 2rem; height: 2rem; place-items: center; border: 3px solid #fff; border-radius: 50%; background: var(--orange-500); color: var(--navy-950); font: 600 .625rem/1 var(--font-body); box-shadow: 0 4px 12px rgb(7 20 38 / .22); }
  .pin--1 { top: 4.6rem; left: 35%; }
  .pin--2 { top: 9.6rem; left: 30%; }
  .pin--3 { right: 25%; bottom: 1.8rem; }
  .audit-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.25rem; }
  .audit-notes li { display: flex; gap: .75rem; align-items: flex-start; }
  .audit-notes span { color: var(--orange-400); font-size: .75rem; font-weight: 600; letter-spacing: .06em; }
  .audit-notes p { color: #bdc8d6; font-size: .8125rem; line-height: 1.5; }

  .proof { background: var(--off-white); }
  .metrics { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: clamp(5rem, 10vw, 8rem); border-block: 1px solid var(--slate-200); }
  .metrics article { padding-block: clamp(2rem, 5vw, 3.5rem); }
  .metrics article + article { padding-left: clamp(2rem, 6vw, 5rem); border-left: 1px solid var(--slate-200); }
  .metric { color: var(--navy-900); font-family: var(--font-heading); font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.045em; line-height: 1; }
  .metric--compact { font-size: clamp(2.125rem, 3vw, 2.625rem); letter-spacing: -.05em; line-height: 1.05; white-space: nowrap; }
  .metric__arrow { color: var(--orange-500); }
  .metrics h3 { max-width: 31rem; margin-top: 1.25rem; color: var(--slate-700); font-family: var(--font-body); font-size: 1rem; font-weight: 400; line-height: 1.6; }
  .personal { display: grid; overflow: hidden; grid-template-columns: minmax(17rem, .75fr) minmax(0, 1.25fr); align-items: stretch; border-radius: var(--radius-xl); background: var(--navy-950); color: #f8fafc; }
  .personal__portrait { position: relative; min-height: 31rem; overflow: hidden; background: var(--navy-800); }
  .personal__portrait::after { position: absolute; inset: 0; content: ""; background: linear-gradient(to top, rgb(3 10 19 / .32), transparent 55%); }
  .personal__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
  .personal__content { display: flex; flex-direction: column; justify-content: center; padding: clamp(2.25rem, 7vw, 6rem); }
  .personal__content .eyebrow { margin-bottom: 1.5rem; }
  .personal__content h2 { max-width: 14ch; font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; }
  .personal__content > p:not(.eyebrow, .signature) { max-width: 40rem; margin-top: 1.5rem; color: #aebac9; font-size: 1.0625rem; }
  .signature { margin-top: 2rem; color: #f8fafc; font-weight: 600; }
  .signature span { color: #8594a7; font-weight: 400; }

  .process { background: var(--white); }
  .process__list { border-top: 1px solid var(--slate-200); }
  .process__list li { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; padding-block: 1.75rem; border-bottom: 1px solid var(--slate-200); }
  .process__list > li > span { color: #c94300; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; }
  .process__list h3 { margin-bottom: .3rem; font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; }
  .process__list p { color: var(--slate-700); }

  .final-cta { padding-block: clamp(5rem, 11vw, 9rem); background: var(--navy-900); color: #f8fafc; text-align: center; }
  .final-cta__inner { display: flex; flex-direction: column; align-items: center; }
  .final-cta .eyebrow { margin-bottom: 1.5rem; }
  .final-cta h2 { max-width: 19ch; font-size: clamp(2.25rem, 4.5vw, 4rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.02; }
  .final-cta p:not(.eyebrow) { max-width: 42rem; margin-top: 1.5rem; color: #afbccb; font-size: 1.0625rem; }
  .final-cta .button { margin-top: 2rem; }

  .site-footer { border-top: 1px solid rgb(255 255 255 / .1); background: var(--navy-950); color: rgb(255 255 255 / .58); }
  .site-footer__inner { display: flex; min-height: 7rem; align-items: center; gap: 2rem; font-size: .8125rem; }
  .site-footer__inner > p { margin-left: auto; }
  .site-footer__inner > a:last-child { text-decoration: underline; text-underline-offset: .2em; }
}

@layer responsive {
  @media (min-width: 40rem) {
    .home-trust > .container { width: min(100% - 4rem, 75rem); }
  }

  @media (max-width: 72rem) {
    .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(25rem, .8fr); gap: 3rem; }
    .hero h1 { font-size: clamp(2.8rem, 5vw, 4rem); }
    .metric--compact { font-size: clamp(2rem, 4vw, 3.4rem); white-space: normal; }
    .metric--compact__line { display: block; width: max-content; max-width: 100%; white-space: nowrap; }
  }

  @media (max-width: 63.99rem) {
    .container, .container-xl { width: min(100% - 4rem, 75rem); }
    .hero__inner { min-height: auto; grid-template-columns: 1fr; gap: 3.5rem; padding-block: 9.5rem 5rem; }
    .hero__content { max-width: 48rem; }
    .hero h1 { max-width: 14ch; }
    .lead-form-wrap { width: min(100%, 44rem); min-height: 0; }
    .deliverables__grid { grid-template-columns: 1fr; }
    .deliverable { padding: 1.75rem 0; border-bottom: 1px solid var(--slate-200); }
    .deliverable + .deliverable { padding-left: 0; border-left: 0; }
    .deliverable .index { margin-bottom: 1rem; }
    .example__layout { grid-template-columns: 1fr; }
    .example__intro { max-width: 45rem; }
    .personal { grid-template-columns: minmax(16rem, .7fr) 1fr; }
  }

  @media (max-width: 47.99rem) {
    .container, .container-xl { width: min(100% - 2.5rem, 75rem); }
    .header-note { display: none; }
    .hero__inner { gap: 2.5rem; padding-block: 7.75rem 4rem; }
    .hero h1 { font-size: clamp(2.5rem, 11vw, 3.5rem); }
    .hero__lead { margin-top: 1.5rem; font-size: 1.0625rem; }
    .assurance { margin-top: 1.5rem; }
    .lead-form-wrap { padding: 1.25rem; border-radius: var(--radius-lg); }
    .form-row { grid-template-columns: 1fr; gap: 1rem; }
    .field input { min-height: 3.5rem; font-size: 1rem; }
    .section-heading--row { grid-template-columns: 1fr; gap: 1.5rem; }
    .audit-browser__page { min-height: 15rem; }
    .audit-browser__hero { padding: 2.25rem .25rem 1.5rem; }
    .audit-browser__hero > i { height: 6.5rem; }
    .audit-notes { grid-template-columns: 1fr; gap: .75rem; }
    .metrics { grid-template-columns: 1fr; }
    .metrics article + article { padding-left: 0; border-top: 1px solid var(--slate-200); border-left: 0; }
    .personal { grid-template-columns: 1fr; }
    .personal__portrait { min-height: 23rem; max-height: 30rem; }
    .personal__content { padding: 2rem 1.5rem 2.5rem; }
    .process__list li { grid-template-columns: 3rem 1fr; }
    .site-footer__inner { flex-wrap: wrap; min-height: 0; padding-block: 2rem; gap: 1rem 1.5rem; }
    .site-footer__inner > p { width: 100%; margin-left: 0; order: 3; }
  }
}

@layer motion {
  [data-reveal] { transition: opacity 520ms var(--ease-enter), transform 520ms var(--ease-enter); }
  [data-reveal].is-reveal-ready { opacity: 0; transform: translateY(20px); }
  [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto; animation-duration: .01ms; animation-iteration-count: 1; transition-duration: .01ms; }
    [data-reveal].is-reveal-ready { opacity: 1; transform: none; }
  }
}