/* =====================================================================
   Blueprint Property Solutions — styles.css
   Concept: an architect's drafting sheet. Navy + blueprint-blue,
   drafting grid, crop marks, mono annotations, a title block in the footer.
   ===================================================================== */

/* ------- 1. Tokens ------- */
:root {
  --paper:        #F5F6F4;
  --paper-2:      #ECEEE9;
  --white:        #FFFFFF;
  --ink:          #101828;
  --ink-soft:     #33404F;
  --steel-600:    #55606E;
  --steel-400:    #8A929E;
  --line:         #D8DBD6;

  --navy-900:     #0B1A33;
  --navy-800:     #10254A;
  --navy-700:     #163561;
  --brand:        #1B3A6B;   /* primary navy from the logo */
  --blueprint:    #2E5FA3;   /* accent blue (the grid "E") */
  --blueprint-ink:#234E8C;   /* text-on-white variant, AA */
  --sky:          #8FB7FF;   /* lines on dark */
  --ok:           #2F7D5D;
  --con:          #B23A3A;

  --draft-line:   rgba(46, 95, 163, 0.16);
  --draft-line-2: rgba(46, 95, 163, 0.28);

  --font-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Consolas", monospace;

  --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.88rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.08rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.40rem);
  --step-2:  clamp(1.45rem, 1.30rem + 0.75vw, 1.95rem);
  --step-3:  clamp(1.80rem, 1.55rem + 1.20vw, 2.70rem);
  --step-4:  clamp(2.30rem, 1.85rem + 2.10vw, 3.90rem);

  --container: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 3px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --shadow-sm: 0 1px 2px rgba(11, 26, 51, 0.06), 0 4px 14px -8px rgba(11, 26, 51, 0.14);
  --shadow-md: 0 12px 34px -14px rgba(11, 26, 51, 0.30);
}

/* ------- 2. Reset / base ------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--blueprint-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); font-weight: 700; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.01em; }
p  { text-wrap: pretty; }

::selection { background: var(--blueprint); color: #fff; }

:focus-visible {
  outline: 2px solid var(--blueprint);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  background: var(--navy-900); color: #fff;
  padding: 10px 16px; border-radius: var(--radius);
  transform: translateY(-160%); transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translateY(0); color: #fff; }

/* ------- 3. Layout helpers ------- */
.container {
  width: min(var(--container), 100% - (2 * var(--gutter)));
  margin-inline: auto;
}

.section { padding-block: clamp(64px, 9vw, 132px); position: relative; }
.section--alt { background: var(--paper-2); border-block: 1px solid var(--line); }

.section-head { max-width: 60ch; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head__lede { margin-top: 14px; color: var(--steel-600); font-size: var(--step-1); }
.section-head h2 { margin-top: 10px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blueprint-ink);
}
.eyebrow--light { color: var(--sky); }

em { font-style: normal; color: var(--blueprint-ink); }

.note {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--steel-600);
  letter-spacing: 0.02em;
}

/* full-page plotted-sheet frame (the aesthetic risk) */
.sheet-frame {
  position: fixed;
  inset: 14px;
  border: 1px solid rgba(46, 95, 163, 0.22);
  pointer-events: none;
  z-index: 150;
}
.sheet-frame::before, .sheet-frame::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 1px solid var(--blueprint);
}
.sheet-frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.sheet-frame::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
@media (max-width: 720px) { .sheet-frame { display: none; } }

/* ------- 4. Buttons ------- */
.btn {
  --bg: var(--brand);
  --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 48px;
  padding: 0.8rem 1.45rem;
  background: var(--bg); color: var(--fg);
  font-family: var(--font-display); font-weight: 600; font-size: 0.98rem;
  letter-spacing: 0.005em;
  border: 0; border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease),
              box-shadow 0.18s var(--ease), color 0.18s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--fg); }
.btn:active { transform: translateY(0); }
.btn--primary:hover { background: var(--navy-800); }
.btn--sm { min-height: 42px; padding: 0.6rem 1.1rem; font-size: 0.9rem; }
.btn--block { width: 100%; }

.btn--ghost {
  --bg: transparent; --fg: var(--brand);
  box-shadow: inset 0 0 0 1.5px var(--blueprint);
}
.btn--ghost:hover { --bg: rgba(46, 95, 163, 0.07); box-shadow: inset 0 0 0 1.5px var(--blueprint); }

.btn--on-dark { --bg: #fff; --fg: var(--navy-900); }
.btn--on-dark:hover { --bg: #E8EEF6; }
.btn--ghost-light {
  --bg: transparent; --fg: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
}
.btn--ghost-light:hover { --bg: rgba(255, 255, 255, 0.10); box-shadow: inset 0 0 0 1.5px #fff; }

/* ------- 5. Header ------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: 18px;
  transition: padding 0.25s var(--ease), background-color 0.25s var(--ease),
              box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  padding-block: 9px;
  background: rgba(245, 246, 244, 0.94);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-scrolled { background: var(--paper); }
}
.header-inner { display: flex; align-items: center; gap: 24px; }

.brand { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.brand__logo { height: 44px; width: auto; transition: height 0.25s var(--ease), filter 0.25s var(--ease); }
.is-scrolled .brand__logo { height: 38px; }
/* If a raster logo is used instead of the lockup, invert it over the dark hero. */
.site-header:not(.is-scrolled) .brand__logo { filter: brightness(0) invert(1); }

.brand__lockup {
  display: flex; align-items: center; gap: 11px;
  color: var(--brand);
  transition: color 0.25s var(--ease);
}
.site-header:not(.is-scrolled) .brand__lockup { color: #fff; }
.brand__mark { flex: 0 0 auto; transition: width 0.25s var(--ease), height 0.25s var(--ease); }
.is-scrolled .brand__mark { width: 30px; height: 27px; }
.brand__words { display: flex; flex-direction: column; line-height: 1; font-family: var(--font-display); }
.brand__words strong {
  font-size: 1.16rem; font-weight: 700; letter-spacing: 0.05em;
}
.is-scrolled .brand__words strong { font-size: 1.06rem; }
.brand__grid { color: var(--blueprint); }
.site-header:not(.is-scrolled) .brand__grid { color: var(--sky); }
.brand__sub {
  font-size: 0.58rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--steel-600); margin-top: 3px;
}
.site-header:not(.is-scrolled) .brand__sub { color: rgba(255, 255, 255, 0.68); }

.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a {
  font-family: var(--font-display); font-weight: 500; font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.82); text-decoration: none; position: relative; padding: 6px 0;
  transition: color 0.25s var(--ease);
}
.is-scrolled .nav a { color: var(--ink-soft); }
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%;
  background: var(--blueprint); transform: scaleX(0); transform-origin: left;
  transition: transform 0.22s var(--ease);
}
.is-scrolled .nav a:hover { color: var(--brand); }
.nav a:hover::after { transform: scaleX(1); }
.is-scrolled .header-cta { box-shadow: var(--shadow-sm); }
.site-header:not(.is-scrolled) .header-cta { background: #fff; color: var(--navy-900); }
.site-header:not(.is-scrolled) .header-cta:hover { background: #E8EEF6; }

.nav-toggle {
  display: none; width: 44px; height: 44px; margin-left: auto;
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; padding: 0; place-items: center; gap: 4px;
}
.site-header:not(.is-scrolled) .nav-toggle { border-color: rgba(255, 255, 255, 0.4); }
.site-header:not(.is-scrolled) .nav-toggle span { background: #fff; }
.nav-toggle span {
  display: block; width: 18px; height: 2px; background: var(--brand);
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px var(--gutter) 22px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav a {
  font-family: var(--font-display); font-weight: 500; font-size: 1.05rem;
  color: var(--ink); text-decoration: none; padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}
.mobile-nav a:last-child { border: 0; margin-top: 10px; }
.mobile-nav .btn { color: #fff; }

/* ------- 6. Hero ------- */
.hero {
  position: relative;
  background: var(--navy-900);
  color: #fff;
  padding-top: clamp(130px, 20vh, 200px);
  padding-bottom: clamp(72px, 12vw, 140px);
  overflow: hidden;
}
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(143, 183, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 183, 255, 0.09) 1px, transparent 1px),
    linear-gradient(rgba(143, 183, 255, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 183, 255, 0.16) 1px, transparent 1px);
  background-size: 34px 34px, 34px 34px, 170px 170px, 170px 170px;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 20%, #000 40%, transparent 100%);
          mask-image: radial-gradient(120% 90% at 70% 20%, #000 40%, transparent 100%);
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.hero__copy { max-width: 40ch; }
.hero h1 { color: #fff; margin: 18px 0 22px; }
.hero__sub { color: #B9C6DA; font-size: var(--step-1); max-width: 44ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 26px; }
.hero__trust {
  list-style: none; padding: 0; display: grid; gap: 10px 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  font-family: var(--font-mono); font-size: var(--step--1); color: #C9D5E6;
  letter-spacing: 0.01em;
}
.hero__trust li { position: relative; padding-left: 22px; }
.hero__trust li::before {
  content: ""; position: absolute; left: 0; top: 0.35em;
  width: 11px; height: 6px; border-left: 2px solid var(--sky); border-bottom: 2px solid var(--sky);
  transform: rotate(-45deg);
}

.hero__figure { position: relative; }
.blueprint-svg { width: 100%; height: auto; }
.blueprint-svg .bp-label {
  font-family: var(--font-mono); font-size: 11px; fill: var(--sky); letter-spacing: 0.12em;
}
.sheet-tag {
  position: absolute; right: 0; bottom: -34px;
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.14em; text-transform: uppercase; color: #7f92ad;
}

/* ------- 7. About ------- */
.about {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 64px); align-items: start;
}
.about__intro p + p { margin-top: 16px; }
.about__intro h2 { margin: 10px 0 18px; }
.about__intro .chips { margin-top: 26px; }

.about__card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(20px, 3vw, 30px);
  box-shadow: var(--shadow-sm);
}
.portrait {
  aspect-ratio: 4 / 3; border-radius: 2px;
  background:
    linear-gradient(135deg, var(--navy-800), var(--brand)),
    var(--navy-900);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: #fff; position: relative; overflow: hidden;
}
.portrait::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 22px 22px;
}
.portrait__mono {
  font-family: var(--font-mono); font-size: 1.6rem; letter-spacing: 0.18em; position: relative;
}
.portrait__cap {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: #B9C6DA; position: relative;
}

.statline { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 20px; background: var(--line); border: 1px solid var(--line); }
.statline > div { background: var(--white); padding: 14px 16px; }
.statline dt { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel-600); }
.statline dd { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--brand); margin-top: 2px; }

/* ------- 8. Chips / ticklists ------- */
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li {
  font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.02em;
  padding: 8px 14px; background: var(--white);
  border: 1px solid var(--line); border-radius: 2px; color: var(--ink-soft);
}
.chips--wide li { font-size: 0.9rem; padding: 12px 16px; }
.chips--wide { gap: 12px; }

.ticklist { list-style: none; padding: 0; display: grid; gap: 12px; margin-top: 18px; }
.ticklist li { position: relative; padding-left: 30px; color: var(--ink-soft); }
.ticklist li::before {
  content: ""; position: absolute; left: 0; top: 0.15em;
  width: 18px; height: 18px; border-radius: 2px; border: 1.5px solid currentColor;
}
.ticklist--pro li::before { color: var(--ok); }
.ticklist--con li::before { color: var(--con); }
.ticklist--pro li::after {
  content: ""; position: absolute; left: 6px; top: 0.3em;
  width: 6px; height: 11px; border: solid var(--ok); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ticklist--con li::after {
  content: ""; position: absolute; left: 4px; top: 0.28em;
  width: 10px; height: 10px;
  background:
    linear-gradient(45deg, transparent 45%, var(--con) 45%, var(--con) 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, var(--con) 45%, var(--con) 55%, transparent 55%);
}

/* ------- 9. Crop-mark cards ------- */
.tick-card { position: relative; }
.tick-card::before, .tick-card::after {
  content: ""; position: absolute; width: 10px; height: 10px;
  border: 2px solid var(--blueprint); pointer-events: none;
}
.tick-card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.tick-card::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ------- 10. Compare ------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.compare__card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px, 3.4vw, 36px);
}
.compare__card h3 {
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--steel-600); font-weight: 500;
}
.compare__card--pro { background: linear-gradient(180deg, #fff, #F3F7FF); border-color: #CBDBF4; }

/* ------- 11. Cards grid ------- */
.cards { display: grid; gap: 20px; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px, 3vw, 30px);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #C3D3ED; }
.card__no {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; color: var(--blueprint-ink);
}
.card h3 { margin: 10px 0 10px; }
.card p { color: var(--steel-600); font-size: 0.96rem; }
.card__fit { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); color: var(--ink-soft) !important; }
.card__fit span {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--blueprint-ink); display: inline-block; margin-right: 6px;
}
.card--cta {
  background: var(--navy-900); color: #fff;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; justify-content: center;
}
.card--cta h3 { color: #fff; }
.card--cta p { color: #B9C6DA; }
.card--cta .btn { margin-top: auto; }

/* ------- 12. Steps ------- */
.steps {
  list-style: none; padding: 0; display: grid; gap: 20px;
  grid-template-columns: repeat(4, 1fr); counter-reset: step;
}
.step {
  position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 22px 24px;
}
.step__no {
  font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.12em; color: var(--blueprint-ink);
}
.step h3 { font-size: 1.05rem; margin: 12px 0 8px; }
.step p { color: var(--steel-600); font-size: 0.94rem; }
.step:not(:last-child)::after {
  content: ""; position: absolute; top: 32px; right: -12px; width: 12px; height: 1px;
  background: var(--blueprint);
}
@media (min-width: 921px) {
  .steps { position: relative; }
  .steps::before {
    content: ""; position: absolute; left: 22px; right: 22px; top: 32px; height: 1px;
    background: repeating-linear-gradient(90deg, var(--draft-line-2) 0 6px, transparent 6px 12px);
    z-index: 0;
  }
  .step { z-index: 1; }
}

/* ------- 13. Split sections (agents / contact) ------- */
.split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.split__lead h2 { margin: 10px 0 16px; }
.split__lead .btn { margin-top: 22px; }

.valuelist { list-style: none; padding: 0; display: grid; gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.valuelist li { background: var(--white); padding: 20px 22px; }
.valuelist h3 { font-size: 1.02rem; }
.valuelist p { color: var(--steel-600); font-size: 0.94rem; margin-top: 4px; }
@media (min-width: 760px) {
  .valuelist--2 { grid-template-columns: 1fr 1fr; }
}

/* Sheet 03 — seller upside */
.approach__note {
  margin: clamp(24px, 4vw, 40px) 0 26px;
  max-width: 64ch;
  color: var(--steel-600);
  font-size: var(--step-1);
}
.approach__note strong { color: var(--ink); font-weight: 600; }

/* ------- 14. Proof ------- */
.proofcard {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 22px;
}
.proofcard h3 {
  font-size: 0.98rem;
}
.proofcard p { color: var(--steel-600); font-size: 0.92rem; margin-top: 6px; }

.quote {
  margin-top: clamp(28px, 4vw, 48px);
  border-left: 3px solid var(--blueprint);
  padding: 8px 0 8px 26px;
  max-width: 62ch;
}
.quote blockquote { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); }
.quote figcaption { margin-top: 12px; font-family: var(--font-mono); font-size: var(--step--1); color: var(--steel-600); letter-spacing: 0.04em; }

/* ------- 15. FAQ ------- */
.faq__list { display: grid; gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.faq__list details { background: var(--white); }
.faq__list summary {
  cursor: pointer; list-style: none; padding: 20px 24px;
  font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after {
  content: ""; flex: 0 0 auto; width: 12px; height: 12px;
  border-right: 2px solid var(--blueprint); border-bottom: 2px solid var(--blueprint);
  transform: rotate(45deg); transition: transform 0.2s var(--ease);
}
.faq__list details[open] summary::after { transform: rotate(-135deg); }
.faq__list details p { padding: 0 24px 22px; color: var(--steel-600); max-width: 68ch; }

/* ------- 16. Contact form ------- */
.split--contact { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.contact__direct { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.contact__direct li { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
.contact__k {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--steel-600); flex: 0 0 52px;
}
.contact__direct a, .contact__direct span:last-child {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 500;
  min-width: 0; overflow-wrap: anywhere;
}

.contact__formwrap {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-sm);
  position: relative;
}
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label {
  font-family: var(--font-display); font-weight: 500; font-size: 0.9rem; color: var(--ink);
}
.field .opt { font-family: var(--font-mono); font-weight: 400; font-size: 0.72rem; color: var(--steel-400); letter-spacing: 0.04em; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 0.98rem; color: var(--ink);
  padding: 12px 14px; min-height: 48px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 2px;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease), background-color 0.16s var(--ease);
  width: 100%;
}
.field textarea { min-height: auto; resize: vertical; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: #fff;
  border-color: var(--blueprint);
  box-shadow: 0 0 0 3px rgba(46, 95, 163, 0.16);
}
.field input:user-invalid, .field select:user-invalid {
  border-color: var(--con);
}
.consent {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 0.88rem; color: var(--steel-600); line-height: 1.5;
}
.consent input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--blueprint); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form__fine { font-family: var(--font-mono); font-size: 0.72rem; color: var(--steel-400); letter-spacing: 0.02em; text-align: center; }

.form__status {
  border-radius: 2px; padding: 14px 16px; font-size: 0.94rem;
  border: 1px solid;
}
.form__status[data-state="ok"]  { background: #EEF7F1; border-color: #B9DCC7; color: #1E5C41; }
.form__status[data-state="err"] { background: #FBEEEE; border-color: #E6C3C3; color: #8C2B2B; }
.btn[data-loading="true"] { opacity: 0.75; pointer-events: none; }

/* ------- 17. Footer ------- */
.site-footer {
  position: relative; background: var(--navy-900); color: #B9C6DA;
  padding-block: clamp(48px, 7vw, 88px);
  overflow: hidden;
}
.footer__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(143, 183, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 183, 255, 0.07) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%);
          mask-image: linear-gradient(180deg, #000, transparent 80%);
}
.site-footer .container { position: relative; }
.titleblock {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(143, 183, 255, 0.3);
}
.titleblock__cell {
  padding: 14px 16px;
  border-right: 1px solid rgba(143, 183, 255, 0.18);
  border-bottom: 1px solid rgba(143, 183, 255, 0.18);
}
.titleblock__cell--wide { grid-column: span 2; }
.titleblock__k {
  display: block; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: #6E82A0;
}
.titleblock__v { display: block; margin-top: 4px; font-family: var(--font-display); color: #E7EDF6; font-size: 0.98rem; overflow-wrap: anywhere; }
.titleblock__v a { color: #E7EDF6; }
.titleblock__v a:hover { color: #fff; }

.disclaimer { margin-top: 26px; font-size: 0.8rem; line-height: 1.7; color: #7f92ad; max-width: 92ch; }
.copyright { margin-top: 14px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: #6E82A0; }

/* ------- 18. Animation layer (CSS-driven, progressive enhancement) -------
   All start-states live inside prefers-reduced-motion:no-preference and are
   gated on classes that JS adds only when it takes over. If any script fails
   to load, or motion is reduced, every element renders at its natural state. */
@media (prefers-reduced-motion: no-preference) {

  /* Hero — entrance animation. Base state is VISIBLE; the keyframe supplies the
     fade-in and `backwards` fill covers the stagger delay. If animations are
     unavailable the content simply shows with no motion. */
  .js .hero__copy > [data-hero],
  .js .hero__figure[data-hero] {
    animation: heroIn 0.7s var(--ease) backwards;
  }
  .js .hero__copy > [data-hero]:nth-child(1) { animation-delay: 0.05s; }
  .js .hero__copy > [data-hero]:nth-child(2) { animation-delay: 0.13s; }
  .js .hero__copy > [data-hero]:nth-child(3) { animation-delay: 0.21s; }
  .js .hero__copy > [data-hero]:nth-child(4) { animation-delay: 0.29s; }
  .js .hero__copy > [data-hero]:nth-child(5) { animation-delay: 0.37s; }
  .js .hero__figure[data-hero] { animation-delay: 0.26s; }

  @keyframes heroIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }

  /* Hero blueprint line-draw. Base state is drawn (offset 0); the keyframe
     animates from hidden. No fill mode needed. */
  .js .blueprint-svg .draw {
    stroke-dasharray: 1600;
    animation: bpDraw 1.5s var(--ease) 0.4s backwards;
  }
  .js .blueprint-svg .draw:nth-of-type(2) { animation-delay: 0.5s; }
  .js .blueprint-svg .draw:nth-of-type(3) { animation-delay: 0.6s; }
  .js .blueprint-svg .draw:nth-of-type(4) { animation-delay: 0.68s; }
  .js .blueprint-svg .draw:nth-of-type(5) { animation-delay: 0.76s; }
  .js .blueprint-svg .draw:nth-of-type(6) { animation-delay: 0.84s; }
  @keyframes bpDraw { from { stroke-dashoffset: 1600; } to { stroke-dashoffset: 0; } }

  /* Scroll reveals — IntersectionObserver toggles .is-in */
  body.reveal-on [data-reveal],
  body.reveal-on [data-reveal-group] > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  }
  body.reveal-on [data-reveal].is-in,
  body.reveal-on [data-reveal-group].is-in > * {
    opacity: 1;
    transform: none;
  }
  body.reveal-on [data-reveal-group].is-in > *:nth-child(2) { transition-delay: 0.05s; }
  body.reveal-on [data-reveal-group].is-in > *:nth-child(3) { transition-delay: 0.10s; }
  body.reveal-on [data-reveal-group].is-in > *:nth-child(4) { transition-delay: 0.15s; }
  body.reveal-on [data-reveal-group].is-in > *:nth-child(5) { transition-delay: 0.20s; }
  body.reveal-on [data-reveal-group].is-in > *:nth-child(6) { transition-delay: 0.25s; }
  body.reveal-on [data-reveal-group].is-in > *:nth-child(7) { transition-delay: 0.30s; }
  body.reveal-on [data-reveal-group].is-in > *:nth-child(n+8) { transition-delay: 0.34s; }
}

/* ------- 19. Responsive ------- */
@media (max-width: 1080px) {
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps::before { display: none; }
  .step:not(:last-child)::after { display: none; }
}
@media (max-width: 920px) {
  .nav, .header-cta { display: none; }
  .nav-toggle { display: grid; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__figure { max-width: 460px; }
  .hero__copy { max-width: none; }
  .about, .split, .split--contact { grid-template-columns: minmax(0, 1fr); }
  .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare { grid-template-columns: minmax(0, 1fr); }
  .about__card { max-width: 460px; }
}
@media (max-width: 620px) {
  .cards--3, .cards--4 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .hero__trust { grid-template-columns: 1fr; }
  .titleblock { grid-template-columns: 1fr 1fr; }
  .titleblock__cell--wide { grid-column: span 2; }
  .statline { grid-template-columns: 1fr; }
}

/* ------- 20. Reduced motion ------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .card:hover, .btn:hover { transform: none; }
}