@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..600&family=Public+Sans:wght@400;600&display=swap");

/* Brand tokens (DevForThought design system) */
:root {
  color-scheme: light dark;
  --surface: #faf7f2;
  --surface-raised: #ffffff;
  --sand: #efe6d8;
  --line: #dcd2c2;
  --border: #8c8476;
  --ink: #2b2b2b;
  --ink-muted: #5c5850;
  --forest: #2f4a3a;
  --on-forest: #faf7f2;
  --forest-text: #2f4a3a;
  --forest-soft: #e2ebe0;
  --sage: #8ba888;
  --clay: #c26a4a;
  --clay-strong: #9e4c32;
  --clay-strong-hover: #86402a;
  --on-clay: #ffffff;
  --danger: #9b2c22;
  --danger-soft: #f8e1dd;
  --focus-ring: 0 0 0 2px #faf7f2, 0 0 0 4px #2f4a3a;
  --shadow-sm: 0 1px 2px #2b2b2b14, 0 8px 24px #2b2b2b14;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Homepage landscape, daytime */
  --scene-sky: #efe6d8;
  --scene-sun: #c26a4a;
  --scene-stars-opacity: 0;
  --scene-far: #d3dccb;
  --scene-mid: #a9bea5;
  --scene-near: #6f8f76;
  --scene-trees: #2f4a3a;
  --scene-shrubs: #8ba888;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #1a211c;
    --surface-raised: #232b25;
    --sand: #2c3329;
    --line: #323b34;
    --border: #7d857c;
    --ink: #f2ece2;
    --ink-muted: #b5afa3;
    --forest: #3e6150;
    --forest-text: #a9c4a6;
    --forest-soft: #22352a;
    --clay-strong: #e08a66;
    --clay-strong-hover: #eba184;
    --on-clay: #1a211c;
    --danger: #f2998e;
    --danger-soft: #3b1e1a;
    --focus-ring: 0 0 0 2px #1a211c, 0 0 0 4px #a9c4a6;
    --shadow-sm: 0 1px 3px #000000a6, 0 12px 32px #00000066;

    /* Homepage landscape, dusk: warm sky, ridges stepping darker toward the viewer */
    --scene-sky: #2a2421;
    --scene-sun: #e08a66;
    --scene-stars-opacity: 0.55;
    --scene-far: #4b5d52;
    --scene-mid: #39493f;
    --scene-near: #2a382f;
    --scene-trees: #182219;
    --scene-shrubs: #3e6150;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 26px; }
a { color: var(--forest-text); }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

/* Header */
.site-header { padding: 24px 0; }
.site-header-overlay { position: absolute; top: 0; left: 0; right: 0; z-index: 3; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { font-family: var(--font-serif); font-weight: 500; font-size: 24px; color: var(--ink); text-decoration: none; }
.site-nav { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 600; }
.site-nav a { color: var(--ink); text-decoration: none; }
.site-nav a:hover { color: var(--forest-text); text-decoration: underline; text-underline-offset: 4px; }
.site-nav .nav-contact { border: 1px solid var(--forest-text); color: var(--forest-text); border-radius: var(--radius-md); padding: 8px 14px; }
.site-nav .nav-contact:hover { background: var(--forest-soft); text-decoration: none; }
.site-nav a:focus-visible, .wordmark:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* Homepage landscape: layers back to front, moved by parallax.js */
.scene { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; background: var(--scene-sky); }
.scene-art { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; }
.scene-art .layer { position: absolute; inset: 0; will-change: transform; }
.scene-art svg { display: block; width: 100%; height: 100%; }
.scene .sun { fill: var(--scene-sun); }
.scene .stars { fill: #efe6d8; opacity: var(--scene-stars-opacity); }
.scene .far { fill: var(--scene-far); }
.scene .mid { fill: var(--scene-mid); }
.scene .near { fill: var(--scene-near); }
.scene .trees { fill: var(--scene-trees); }
.scene .ground { fill: var(--surface); }
.scene .shrubs { fill: var(--scene-shrubs); }

.scene-content { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; align-items: start; padding-top: 128px; padding-bottom: 96px; }
.scene-text { padding-top: 24px; will-change: transform, opacity; }
.scene-text h1 { font-family: var(--font-serif); font-weight: 500; font-size: 56px; line-height: 60px; letter-spacing: -0.015em; margin: 0 0 16px; }
.scene-text p { font-size: 18px; line-height: 28px; max-width: 520px; margin: 0 0 20px; color: var(--ink-muted); }
.text-link { font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Request form card */
.request-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 28px; }
.request-card h2 { font-family: var(--font-serif); font-weight: 500; font-size: 26px; line-height: 32px; margin: 0 0 20px; }
form { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label { display: grid; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.02em; }
input[type=text], input[type=email], textarea { font: 400 16px/24px var(--font-sans); color: var(--ink); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 9px 12px; width: 100%; }
textarea { min-height: 104px; resize: vertical; }
textarea::placeholder { color: var(--ink-muted); opacity: 0.8; }
input:focus-visible, textarea:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.check { display: flex; gap: 8px; align-items: center; font-weight: 400; font-size: 15px; letter-spacing: 0; }
.check input { width: 18px; height: 18px; accent-color: var(--forest-text); }
.botcheck { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-status { font-size: 14px; line-height: 22px; margin: 0; color: var(--ink-muted); }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--danger); }
.form-status.is-success { color: var(--forest-text); font-weight: 600; }
.form-note { font-size: 13px; line-height: 20px; margin: 0; color: var(--ink-muted); }

/* Buttons */
.btn { font: 600 15px/20px var(--font-sans); height: 44px; padding: 0 20px; border-radius: var(--radius-md); border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; }
.btn:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.btn-primary { background: var(--clay-strong); color: var(--on-clay); }
.btn-primary:hover { background: var(--clay-strong-hover); }
.btn-primary:disabled { opacity: 0.7; cursor: progress; }

/* Sections */
.section { position: relative; z-index: 1; background: var(--surface); padding: 72px 0 80px; }
.section-sand { background: var(--sand); }
.has-wave { padding-top: 56px; }
#how-it-works { padding-top: 24px; }
.wave { position: absolute; left: 0; right: 0; top: -71px; height: 72px; pointer-events: none; }
.wave svg { display: block; width: 100%; height: 100%; }
.wave-sand { fill: var(--sand); }
.wave-forest { fill: var(--band); }
.wave-surface { fill: var(--surface); }
.eyebrow { margin: 0 0 8px; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clay-strong); }
.section-title { font-family: var(--font-serif); font-weight: 500; font-size: 34px; line-height: 40px; letter-spacing: -0.01em; margin: 0 0 12px; max-width: 720px; }
.section-intro { max-width: 600px; color: var(--ink-muted); margin: 0 0 32px; font-size: 17px; line-height: 27px; }

/* Flat illustrations: same palette as the homepage landscape */
.illo { display: block; width: 100%; height: auto; }
.il-sky { fill: var(--scene-sky); }
.il-sun { fill: var(--clay); }
.il-far { fill: var(--scene-far); }
.il-hill { fill: var(--scene-mid); }
.il-hill2 { fill: var(--scene-near); }
.il-tree { fill: var(--scene-trees); }
.il-paper { fill: var(--surface-raised); }
.il-ink { fill: var(--forest-text); }
.il-line { fill: var(--line); }
.il-accent { fill: var(--clay); }
.il-sage { fill: var(--sage); }
.il-house { fill: var(--surface-raised); }
.il-window { fill: var(--sage); }
.il-door { fill: #2f4a3a; }
@media (prefers-color-scheme: dark) {
  .il-house { fill: #e8dccb; }
  .il-window { fill: #f0b49b; }
}
.st-sage { fill: none; stroke: var(--sage); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }

/* How it works */
.steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.step { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); overflow: hidden; }
.step-art { line-height: 0; }
.step-body { padding: 20px 24px 24px; }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--forest-soft); color: var(--forest-text); font-family: var(--font-serif); font-size: 17px; font-weight: 500; margin-bottom: 12px; }
.step h3 { font-size: 20px; line-height: 28px; font-weight: 600; margin: 0 0 8px; }
.step p { margin: 0; color: var(--ink-muted); }

/* Step illustrations: their own palette, scoped so it can't clash with page tokens */
.step-art { --lid:#cfc7b9; --skin:#e2a67f; --board:#fbf8f2; --marker:#6f8f76; --floor:#d9c8ad; --hair2:#8a6448; --shirt:#2f4a3a; --cork:#d6c3a5; --sweater:#c26a4a; --hair:#3b2f28; --wall:#e6dac6; --frame:#fbf7f0; --desk:#2f4a3a; --desk2:#26402f; --sky:#efe6d8; --sun:#c26a4a; --far:#d3dccb; --mid:#a9bea5; --near:#6f8f76; --trees:#2f4a3a; --paper:#fff; --ink:#2f4a3a; --line:#e6dccd; --clay:#c26a4a; --sage:#8ba888; --shadow:#2b2b2b1a}
@media (prefers-color-scheme: dark) { .step-art { --lid:#7d857c; --skin:#d39672; --board:#d9cdbb; --marker:#3e6150; --floor:#2e2622; --hair2:#7a5840; --shirt:#3e6150; --cork:#3b302a; --sweater:#b9644a; --hair:#4a3b32; --wall:#211c1a; --frame:#3a332e; --desk:#2a3a30; --desk2:#1f2c24; --sky:#3a2e29; --sun:#e08a66; --far:#4b5d52; --mid:#39493f; --near:#2a382f; --trees:#182219; --paper:#e8dccb; --ink:#3e6150; --line:#cbbfae; --clay:#d9795a; --sage:#8ba888; --shadow:#00000040} }
.step-art svg { display: block; width: 100%; height: auto; }

/* What we build */
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.service { background: var(--surface-raised); border-radius: var(--radius-lg); padding: 22px 24px 24px; }
.service-icon { display: inline-flex; width: 56px; height: 56px; padding: 6px; border-radius: 14px; background: var(--forest-soft); margin-bottom: 14px; }
.icon { width: 44px; height: 44px; }
.ic-a { fill: var(--forest-text); }
.ic-b { fill: var(--clay); }
.ic-c { fill: var(--sage); }
.ic-bg { fill: var(--surface-raised); }
.st-a { fill: none; stroke: var(--forest-text); stroke-width: 3; stroke-linecap: round; }
.st-b { fill: none; stroke: var(--clay); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.service h3 { font-size: 17px; line-height: 24px; font-weight: 600; margin: 0 0 6px; }
.service p { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.services-more { margin: 28px 0 0; }

/* Green band */
:root { --band: #2f4a3a; }
@media (prefers-color-scheme: dark) { :root { --band: #2b4235; } }
.band { background: var(--band); color: #faf7f2; }
.band .eyebrow { color: #f0b49b; }
.band a { color: #faf7f2; }
.band-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.band-art { border-radius: 24px; overflow: hidden; }
.promises { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 22px; }
.promises li { position: relative; padding-left: 36px; }
.promises li::before { content: ""; position: absolute; left: 0; top: 6px; width: 22px; height: 11px; border-radius: 11px 11px 0 0; background: #f0b49b; }
.promises h3 { font-size: 19px; line-height: 26px; font-weight: 600; margin: 0 0 4px; }
.promises p { margin: 0; color: #dde5d9; }

/* Closing panel */
.cta-panel { position: relative; background: var(--scene-sky); border-radius: 24px; overflow: hidden; padding: 48px 48px 0; display: grid; gap: 24px; }
.cta-text { max-width: 560px; }
.cta-text p { margin: 0 0 24px; color: var(--ink-muted); font-size: 17px; line-height: 27px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.illo-cta { margin: 0 -48px; width: calc(100% + 96px); max-width: none; }
.btn-secondary { border-color: var(--forest-text); color: var(--forest-text); background: transparent; }
.btn-secondary:hover { background: var(--forest-soft); }

/* Footer */
.site-footer { padding: 32px 0 48px; font-size: 14px; line-height: 22px; color: var(--ink-muted); border-top: 1px solid var(--line); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-links a { color: var(--ink-muted); }
.footer-links a:hover { color: var(--forest-text); }

/* Text pages (FAQ, privacy, terms) */
.page { padding: 32px 0 64px; border-top: 1px solid var(--line); }
.prose { max-width: 720px; }
.prose h1 { font-family: var(--font-serif); font-weight: 500; font-size: 40px; line-height: 46px; letter-spacing: -0.01em; margin: 16px 0 8px; }
.prose h2 { font-family: var(--font-serif); font-weight: 500; font-size: 24px; line-height: 30px; margin: 40px 0 8px; }
.prose h3 { font-size: 18px; line-height: 26px; font-weight: 600; margin: 28px 0 6px; }
.prose p, .prose ul { margin: 0 0 16px; }
.prose ul { padding-left: 24px; }
.prose li { margin-bottom: 8px; }
.prose .updated { font-size: 14px; color: var(--ink-muted); margin-bottom: 32px; }
.prose .lead { font-size: 18px; line-height: 28px; color: var(--ink-muted); }

/* Tablet and phone */
@media (max-width: 960px) {
  .scene-content { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 104px; padding-bottom: 42vh; padding-bottom: 42svh; }
  .scene-art { height: 100vh; height: 100svh; max-height: 100%; }
  .scene-text { padding-top: 0; }
  .request-card { max-width: 560px; }
  .steps { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .band-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .band-art { max-width: 520px; }
  .site-nav a:not(.nav-contact) { display: none; }
}

@media (max-width: 600px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .scene-text h1 { font-size: 38px; line-height: 42px; }
  .scene-text p { font-size: 16px; line-height: 25px; }
  .request-card { padding: 20px; }
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .section { padding: 56px 0; }
  .section-title { font-size: 28px; line-height: 34px; }
  .wave { top: -39px; height: 40px; }
  .cta-panel { padding: 32px 24px 0; }
  .illo-cta { margin: 0 -24px; width: calc(100% + 48px); }
}