@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  --ink: #202f2b;
  --green: #376454;
  --green-deep: #1c2e28;
  --green-soft: #e9ede8;
  --line: #cbd3ca;
  --copper: #ba612f;
  --gold: #d7deaf;
  --paper: #fafbf8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 30px; }
body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: "DM Sans", Arial, sans-serif; font-size: 17px; line-height: 1.65; }
a { color: inherit; text-decoration: none; }
button, a { touch-action: manipulation; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--green); outline-offset: 6px; }
img { max-width: 100%; }
p { max-width: 690px; margin: 0 0 1.2em; }
h1, h2, h3, h4, .brand, .product-name { font-family: Manrope, Arial, sans-serif; line-height: 1.1; letter-spacing: -.05em; margin: 0; }
h1 { font-size: clamp(3.2rem, 7.5vw, 7.3rem); font-weight: 600; }
h2 { font-size: clamp(2.2rem, 4vw, 3.8rem); font-weight: 600; margin-bottom: 30px; }
h3 { font-size: 1.5rem; margin: 22px 0 14px; }
h4 { font-size: 1.1rem; letter-spacing: -.025em; margin: 0 0 10px; }
em { font-style: normal; color: var(--green); }

.skip { position: absolute; top: -100px; z-index: 20; background: white; padding: 15px; }
.skip:focus { top: 0; }
header { max-width: 1600px; margin: auto; padding: 20px 5%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); gap: 30px; }
header .brand { display: block; height: 52px; width: 248px; overflow: hidden; position: relative; flex: 0 0 auto; }
header .logo { width: 270px; height: auto; position: absolute; top: -29px; left: -12px; mix-blend-mode: multiply; }
nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 30px; font-size: 14px; }
nav a:hover, .text-link:hover { color: var(--green); }
.nav-contact { border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
main { max-width: 1600px; margin: auto; }
section { padding: 72px 7%; }

.eyebrow, .coordinates, .spec-strip, .badge, .status, .project-number, .project-index b { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .13em; line-height: 1.5; margin-bottom: 30px; text-transform: uppercase; }
.eyebrow::before { content: "+"; display: inline-block; color: var(--copper); font-size: 18px; margin-right: 12px; }
.large { font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.5; }
.text-link { display: inline-block; margin-top: 10px; border-bottom: 1px solid var(--green); font-weight: 600; font-size: 16px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 42px; min-height: 60px; padding: 18px 25px; background: var(--green); color: white; font-size: 16px; font-weight: 600; white-space: nowrap; }
.button:hover { background: #274d40; }
.button.copper { background: #ca713c; }
.button.copper:hover { background: #ab5226; }

.hero { padding-top: 70px; padding-bottom: 0; background: var(--green-deep); color: white; position: relative; overflow: hidden; isolation: isolate; min-height: 720px; }
.terrain-photo { position: absolute; inset: 0 0 0 39%; background: url("/assets/field-landscape.png") center/cover; z-index: -2; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #1c2e28 0%, rgba(28,46,40,.96) 30%, rgba(28,46,40,.64) 55%, rgba(28,46,40,.1) 100%); z-index: -1; }
.hero .eyebrow { color: #dbe4d8; }
.hero h1 { font-size: clamp(3.5rem, 7vw, 6.8rem); max-width: 850px; margin: 45px 0; }
.hero em { color: var(--gold); }
.hero-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; padding: 25px 0 50px; }
.hero-bottom p { font-size: 19px; margin: 0; max-width: 590px; text-shadow: #1c2e28 0 1px 8px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 38px; }
.hero .text-link { border-color: #dbe4d8; }
.coordinates { border-top: 1px solid rgba(162,179,161,.44); padding: 22px 0; font-size: 12px; letter-spacing: .17em; color: #e2e9dd; }

.intro { display: block; }
.intro > .eyebrow { margin-bottom: 18px; }
.intro > div { max-width: 900px; }
.intro h2 { margin-bottom: 24px; }
.section-heading { display: flex; justify-content: space-between; gap: 40px; align-items: end; margin-bottom: 42px; }
.section-heading h2 { margin: 0; max-width: 820px; }
.section-heading p { margin: 0; max-width: 480px; }

.product { position: relative; margin: 0 3% 56px; padding: 55px 4% 70px; border-top: 5px solid var(--copper); background-color: var(--green-deep); background-image: linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px); background-size: 50px 50px; color: #f5fbfb; }
.product-top { display: flex; justify-content: space-between; gap: 20px; align-items: start; }
.badge, .status { display: inline-block; border: 1px solid currentColor; border-radius: 30px; padding: 5px 13px; font-size: 11px; letter-spacing: .09em; white-space: nowrap; text-transform: uppercase; }
.product .badge { color: var(--gold); }
.product-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 11%; padding-top: 40px; }
.product-name { display: block; font-size: clamp(2.8rem, 5vw, 5rem); margin-bottom: 30px; }
.product-name span { color: #d69a5f; }
.product p { color: #d0dacd; }
.button.light { background: #e1e7d8; color: var(--ink); }
.button.light:hover { background: #cbd7bd; }
.project-index div { border-top: 1px solid #63745f; padding: 25px 0; display: flex; gap: 35px; font-size: 21px; }
.project-index b { font-size: 13px; color: #d69a5f; }
.project-index p { margin-top: 35px; font-size: 12px; letter-spacing: .13em; line-height: 2; }

.ecosystem { background: #edf0e9; }
.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.project-card { min-width: 0; background: var(--paper); border-top: 4px solid var(--green); padding: 34px; min-height: 330px; display: flex; flex-direction: column; }
.project-card:nth-child(even) { border-color: var(--copper); }
.project-card .card-top { display: flex; justify-content: space-between; gap: 20px; align-items: start; }
.project-card h3 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.project-card p { font-size: 16px; }
.project-card .text-link { margin-top: auto; padding-top: 12px; align-self: flex-start; }
.status { color: #496256; border-color: #9faf9d; }
.status.available { color: #7a3f24; border-color: #b8693f; }

.vision-band { display: grid; grid-template-columns: 1.2fr .8fr; align-items: stretch; gap: 0; padding: 0; background: var(--green-deep); color: white; margin: 0 3%; }
.vision-band img { display: block; width: 100%; height: 100%; min-height: 520px; object-fit: cover; }
.vision-band .vision-copy { padding: 64px 9%; align-self: center; }
.vision-band p { color: #d0dacd; }
.vision-band .eyebrow { color: #dbe4d8; }
.vision-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; }
.light-link { color: white; border-bottom: 1px solid #dbe4d8; font-weight: 600; }
.inline-light { color: white; text-decoration: underline; text-decoration-color: var(--copper); text-underline-offset: 4px; }

.three, .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.principles .three { padding-top: 25px; }
.three article, .service-grid article { border-top: 2px solid var(--ink); padding-top: 25px; }
.three article > span, .service-grid article > span { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; letter-spacing: .1em; color: #8b4a25; }
.three p, .service-grid p { font-size: 16px; }
.service-grid { grid-template-columns: repeat(4, 1fr); }
.planned-services { background: #f0f3ed; }
.honest-note { border-left: 4px solid var(--copper); padding: 20px 24px; background: #f1ece6; max-width: 880px; font-size: 15px; margin-top: 35px; }
.projects-hero .honest-note { color: var(--ink); }
.projects-hero .honest-note a { text-decoration: underline; text-decoration-color: var(--copper); text-underline-offset: 3px; }
.project-feature { margin-top: 56px; }

.page-hero { background-color: var(--green-soft); background-image: linear-gradient(rgba(37,58,48,.063) 1px,transparent 1px),linear-gradient(90deg,rgba(37,58,48,.063) 1px,transparent 1px); background-size: 70px 70px; border-left: 7px solid var(--copper); border-bottom: 1px solid #cbd3ca; padding-top: 65px; }
.page-hero h1 { font-size: clamp(2.8rem, 5.8vw, 5.7rem); margin: 35px 0; }
.page-hero .large { max-width: 830px; }
.founder { background: #e8ece5; display: grid; grid-template-columns: .85fr 1.3fr; gap: 9%; align-items: start; }
.founder img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 38%; border-bottom: 6px solid var(--copper); }

.vision-hero { padding: 0; position: relative; min-height: 680px; display: flex; align-items: end; color: white; overflow: hidden; }
.vision-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.vision-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(20,35,29,.94),rgba(20,35,29,.08) 72%); z-index: -1; }
.vision-hero .vision-hero-copy { padding: 80px 7%; width: 100%; }
.vision-hero h1 { font-size: clamp(3.2rem, 7vw, 6.4rem); max-width: 1000px; }
.vision-hero em { color: var(--gold); }
.vision-hero p { font-size: 20px; max-width: 740px; }
.vision-hero .status { color: white; margin-bottom: 24px; }
.vision-story { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8%; }
.vision-lead { padding: 72px 7%; background: var(--paper); }
.vision-lead-copy { max-width: 940px; padding-bottom: 58px; border-bottom: 1px solid var(--line); }
.vision-lead h1 { font-size: clamp(3.2rem, 7vw, 6.4rem); margin: 30px 0; }
.vision-lead em { color: var(--green); }
.vision-lead-copy a:not(.button) { text-decoration: underline; text-decoration-color: var(--copper); text-underline-offset: 4px; }
.vision-lead-media { display: grid; gap: 18px; padding-top: 36px; }
.vision-lead-media > div { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vision-lead-media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.investment-cta { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8%; background: #e2e8d9; border-top: 5px solid var(--copper); }
.investment-cta .muted { font-size: 15px; color: #53665e; }
.pillars { background: var(--green-deep); color: white; }
.pillars .service-grid article { border-color: #8ba08f; }
.pillars p { color: #d0dacd; }
.pillars .service-grid { grid-template-columns: repeat(2, 1fr); }
.gallery { background: #eef1eb; }
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.gallery figure { margin: 0; background: white; border-bottom: 4px solid var(--copper); }
.gallery figure:first-child { grid-column: 1/-1; }
.gallery img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.gallery figcaption { padding: 20px 22px; font-size: 15px; }
.gallery figcaption strong { display: block; font-family: Manrope, sans-serif; font-size: 1.1rem; margin-bottom: 5px; }

.projects-hero { background: var(--green-deep); color: white; border-left: 7px solid var(--copper); }
.projects-hero em { color: var(--gold); }
.projects-hero .large { color: #d0dacd; }
.project-detail { display: grid; grid-template-columns: .7fr 1.3fr; gap: 6%; border-bottom: 1px solid var(--line); }
.project-detail > div { min-width: 0; }
.project-detail.alt { background: #edf0e9; }
.project-number { color: var(--copper); font-size: 13px; letter-spacing: .12em; }
.project-detail h2 { margin-top: 18px; }
.project-detail ul { padding-left: 22px; }
.project-detail li { margin-bottom: 8px; }
.project-visual { width: 100%; min-width: 0; overflow: hidden; background: var(--green-deep); padding: 28px; align-self: start; color: white; }
.project-visual img { display: block; width: 100%; max-width: 100%; height: auto; }
.project-visual.diagram { min-height: 360px; display: grid; place-items: center; background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 38px 38px; }
.diagram-stack { width: 100%; max-width: 430px; }
.diagram-stack div { border: 1px solid #809389; padding: 18px; margin: 14px 0; display: flex; justify-content: space-between; gap: 20px; }
.diagram-stack span { color: var(--gold); font-family: ui-monospace, monospace; font-size: 12px; }
.project-visual p { color: #d0dacd; font-size: 15px; }

.fa-hero { background-color: #e5ebe2; background-image: linear-gradient(rgba(49,77,56,.063) 1px,transparent 1px),linear-gradient(90deg,rgba(49,77,56,.063) 1px,transparent 1px); background-size: 60px 60px; border-left: 7px solid var(--copper); padding: 52px 5% 0; }
.fa-hero-layout { display: grid; grid-template-columns: minmax(430px,.95fr) minmax(0,1.5fr); grid-template-areas: "label shot" "title shot" "action shot"; column-gap: 3%; align-items: center; }
.fa-hero-layout > .eyebrow { grid-area: label; align-self: end; }
.fa-hero-layout > h1 { grid-area: title; font-size: clamp(3rem,4.4vw,4.7rem); margin: 24px 0; }
.fa-hero-layout > .hero-bottom { grid-area: action; align-self: start; display: block; padding: 10px 0 34px; }
.fa-hero-layout > .hero-bottom p { text-shadow: none; }
.fa-hero-shot { grid-area: shot; align-self: center; display: block; width: 100%; aspect-ratio: 2048 / 1084; overflow: hidden; background: white; border: 1px solid #aab7aa; border-top: 5px solid var(--copper); box-shadow: rgba(28,46,40,.18) 0 18px 45px; line-height: 0; }
.fa-hero-shot img { display: block; width: 100%; height: auto !important; max-height: none; aspect-ratio: 2048 / 1084; object-fit: contain; image-rendering: auto; }
.fa-hero-shot:hover { outline: 3px solid var(--green); outline-offset: 4px; }
.spec-strip { display: flex; justify-content: space-between; border-top: 1px solid var(--line); font-size: 12px; letter-spacing: .12em; padding: 25px 0; gap: 20px; }
.feature-section { padding-top: 20px; }
.screenshots { background: #edf0e9; }
.screenshot-grid { display: grid; grid-template-columns: 1fr; gap: 54px; margin-top: 36px; }
.screenshot-grid figure { margin: 0; min-width: 0; align-self: start; }
.screenshot-grid figure:first-child { grid-column: auto; }
.screenshot-grid a { display: block; width: 100%; height: auto; line-height: 0; }
.screenshot-grid img { display: block; width: 100%; height: auto !important; max-height: none; aspect-ratio: var(--shot-ratio, 2048 / 1080); object-fit: contain; border: 1px solid var(--line); background: white; image-rendering: auto; }
.screenshot-grid a:hover { outline: 2px solid var(--green); outline-offset: 3px; }
.screenshot-grid p { font-size: 16px; }
.split-band { background: #23352c; color: white; border-top: 5px solid var(--copper); display: grid; grid-template-columns: 1fr 1fr; gap: 8%; }
.split-band .muted { color: #c8d4be; font-size: 14px; }
.requirements { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8%; }
dl { margin: 0; }
dl div { padding: 20px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1.8fr; gap: 20px; font-size: 15px; }
dt { font-weight: 700; }
dd { margin: 0; }
.release { background: #e2e8d9; border-top: 1px solid #b7c3ae; display: grid; grid-template-columns: 1.3fr 1fr; gap: 6%; align-items: center; }
.release .price { font-size: 3.4rem; font-weight: 700; line-height: 1.2; margin-bottom: 22px; }
.price span { font-size: 1rem; font-weight: 500; }
.release-action { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.offer-terms { margin: 0; padding-left: 22px; font-size: 17px; }
.offer-terms li { margin-bottom: 10px; }
.release-action a:not(.button) { text-decoration: underline; }
.faq { max-width: 1050px; margin: auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 24px 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 18px; }
.faq summary::marker { color: var(--copper); }
.faq details p { padding-top: 15px; margin: 0; font-size: 16px; }
.faq a { text-decoration: underline; }

.contact { min-height: 70vh; }
.email { display: block; font-size: clamp(1.2rem,3vw,2.3rem); color: var(--green); margin: 35px 0; overflow-wrap: anywhere; }
.legal-hero h1 { font-size: clamp(2.8rem,5.5vw,5.4rem); }
.legal { max-width: 920px; margin: 0 auto; padding: 80px 7% 100px; }
.legal > p:first-child { font-size: 1.3rem; line-height: 1.55; color: #30443d; border-left: 4px solid var(--copper); padding-left: 24px; margin-bottom: 55px; }
.legal h2 { font-size: 1.55rem; letter-spacing: -.035em; margin: 42px 0 14px; }
.legal p, .legal li { font-size: 16px; line-height: 1.75; }
.legal ul { padding-left: 24px; margin: 0 0 26px; }
.legal a { text-decoration: underline; text-decoration-color: var(--copper); text-underline-offset: 3px; }

footer { background: #e0e6dc; border-top: 1px solid #b8c6b3; padding: 55px 7% 25px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
footer .brand { font-weight: 800; font-size: 1.25rem; }
footer .brand span { color: var(--green); }
footer p { grid-column: 1; font-size: 15px; }
footer div { grid-area: 1/2/3; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-size: 15px; }
footer small { grid-column: 1/-1; border-top: 1px solid var(--line); padding-top: 20px; font-size: 12px; color: #566d72; }

@media (min-width:1600px) { footer { padding-left: calc((100vw - 1376px)/2); padding-right: calc((100vw - 1376px)/2); } }
@media (max-width:1100px) { .service-grid { grid-template-columns: repeat(2,1fr); } .vision-band { grid-template-columns: 1fr; } .vision-band img { min-height: 420px; } }
@media (max-width:950px) {
  .fa-hero-layout { grid-template-columns: 1fr; grid-template-areas: "label" "title" "shot" "action"; }
  .fa-hero-layout > h1 { font-size: clamp(3rem,10vw,5rem); margin-bottom: 34px; }
  .fa-hero-shot { margin-bottom: 6px; }
  .project-detail, .vision-story, .investment-cta { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width:800px) {
  section { padding: 48px 6%; }
  header { padding: 20px 6%; flex-wrap: wrap; gap: 16px; }
  header .brand { width: 215px; }
  header .logo { width: 238px; top: -25px; }
  nav { width: 100%; justify-content: flex-start; gap: 13px 22px; font-size: 13px; }
  .hero { min-height: auto; padding-top: 45px; }
  .terrain-photo { left: 0; background-position: 65% center; }
  .hero::before { background: linear-gradient(90deg,rgba(28,46,40,.96),rgba(28,46,40,.67)); }
  .hero h1 { margin: 30px 0; }
  .hero-bottom, .section-heading { align-items: flex-start; flex-direction: column; gap: 28px; }
  .founder, .product-grid, .split-band, .requirements, .release { grid-template-columns: 1fr; gap: 30px; }
  .intro > .eyebrow { margin-bottom: 16px; }
  .product { margin: 0 0 40px; padding: 40px 6%; }
  .product-grid { padding-top: 25px; }
  .project-grid, .three, .service-grid, .pillars .service-grid, .gallery-grid, .screenshot-grid { grid-template-columns: 1fr; }
  .gallery figure:first-child, .screenshot-grid figure:first-child { grid-column: auto; }
  .vision-band { margin: 0; }
  .vision-hero { min-height: 620px; }
  .vision-lead-media > div { grid-template-columns: 1fr; }
  .founder img { max-width: 400px; }
  .spec-strip { flex-wrap: wrap; justify-content: flex-start; }
  dl div { grid-template-columns: 1fr 1.5fr; }
  footer { padding: 40px 6%; grid-template-columns: 1fr; }
  footer div { grid-area: auto/1; align-items: flex-start; margin-bottom: 20px; }
}
@media (max-width:460px) {
  body { font-size: 16px; }
  h1 { font-size: 3.15rem; }
  .button { width: 100%; }
  .product-name { font-size: 2.8rem; }
  .coordinates { font-size: 10px; letter-spacing: .1em; }
  .page-hero, .fa-hero, .projects-hero { border-left-width: 4px; }
  .project-card { padding: 26px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }