:root {
  color-scheme: light; --ink: #15363d; --deep: #10363e; --deep-2: #0b2d34; --muted: #65797c;
  --water: #8acfc4; --water-light: #c6e8df; --paper: #f6f6f1; --white: #fff; --line: #dce5df; --sand: #f0ece3;
  --serif: "DM Serif Display", Georgia, serif; --sans: "DM Sans", Arial, sans-serif;
  font-family: var(--sans); scroll-behavior: smooth;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { display: block; width: 100%; } a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; }
.container { width: min(1240px, calc(100% - 64px)); margin-inline: auto; }
.section { padding: 124px 0; }
.site-header { position: absolute; inset: 0 0 auto; z-index: 5; color: var(--white); border-bottom: 1px solid rgb(255 255 255 / 18%); }
.site-header__inner { height: 96px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--white); }
.brand__mark { width: 42px; height: 42px; display: grid; place-items: center; color: var(--water); }
.brand__mark svg { width: 100%; height: 100%; }
.brand__words { display: grid; line-height: 1.05; letter-spacing: .16em; }
.brand__words strong { font-size: 13px; font-weight: 700; } .brand__words small { margin-top: 5px; font-size: 9px; letter-spacing: .34em; }
.site-nav { display: flex; align-items: center; gap: 34px; font-size: 13px; font-weight: 500; }
.site-nav > a:not(.button) { color: rgb(255 255 255 / 82%); transition: color .2s ease; }
.site-nav > a:not(.button):hover { color: var(--water-light); } .menu-toggle { display: none; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 58px; padding: 0 24px; border: 0; border-radius: 3px; font-size: 13px; font-weight: 700; letter-spacing: .015em; transition: transform .2s ease, background .2s ease, color .2s ease; cursor: pointer; }
.button:hover { transform: translateY(-2px); } .button span { font-size: 17px; line-height: 1; }
.button--small { min-height: 45px; padding-inline: 18px; gap: 14px; font-size: 12px; }
.button--light { color: var(--deep); background: var(--white); } .button--light:hover { background: var(--water-light); }
.button--mint { color: var(--deep-2); background: var(--water); } .button--mint:hover { background: var(--water-light); }
.button--dark { color: var(--white); background: var(--deep); } .button--dark:hover { background: #1b535b; }
.hero { min-height: max(740px, min(860px, 100svh)); position: relative; display: flex; align-items: center; overflow: hidden; color: var(--white); background: var(--deep-2); }
.hero__image, .hero__veil { position: absolute; inset: 0; } .hero__image img { height: 100%; object-fit: cover; object-position: center 54%; }
.hero__veil { background: linear-gradient(90deg, rgb(6 31 36 / 88%) 0%, rgb(8 37 42 / 70%) 34%, rgb(8 37 42 / 25%) 68%, rgb(8 37 42 / 10%) 100%), linear-gradient(0deg, rgb(8 34 38 / 35%) 0%, transparent 27%); }
.hero__inner { position: relative; min-height: inherit; display: flex; align-items: center; }
.hero__copy { max-width: 710px; padding-top: 78px; }
.eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 22px; color: #65878a; font-size: 10px; font-weight: 700; letter-spacing: .18em; line-height: 1.4; }
.eyebrow span { display: inline-block; width: 23px; height: 1px; background: var(--water); } .eyebrow--light { color: rgb(255 255 255 / 82%); }
h1, h2, h3, p { margin-top: 0; } h1, h2 { font-weight: 400; }
.hero h1 { max-width: 690px; margin-bottom: 24px; font-family: var(--serif); font-size: clamp(58px, 7vw, 91px); letter-spacing: -.035em; line-height: .97; }
.hero h1 em, h2 em { color: var(--water-light); font-weight: 400; }
.hero__lead { max-width: 480px; margin-bottom: 34px; color: rgb(255 255 255 / 82%); font-size: 16px; line-height: 1.75; }
.hero__actions { display: flex; align-items: center; gap: 30px; }
.text-link { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; } .text-link--light { color: rgb(255 255 255 / 90%); }
.text-link span { font-size: 17px; transition: transform .2s; } .text-link:hover span { transform: translateY(3px); }
.hero__scroll { position: absolute; bottom: 39px; left: 0; display: flex; align-items: center; gap: 13px; color: rgb(255 255 255 / 74%); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.hero__scroll-line { width: 35px; height: 1px; background: var(--water); }
.hero__stamp { position: absolute; right: 0; bottom: 52px; display: flex; align-items: center; gap: 13px; padding: 16px 19px; border: 1px solid rgb(255 255 255 / 30%); background: rgb(11 45 52 / 33%); backdrop-filter: blur(9px); color: rgb(255 255 255 / 80%); font-size: 11px; line-height: 1.5; }
.hero__stamp strong { color: var(--white); font-weight: 600; } .hero__stamp-icon { color: var(--water); font-size: 25px; }
.local-bar { background: var(--water-light); }
.local-bar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 74px; gap: 22px; color: var(--deep); font-size: 12px; }
.local-bar__inner p { margin: 0; } .local-bar__inner strong { font-weight: 700; }
.local-bar__inner > a { display: inline-flex; gap: 10px; align-items: center; font-weight: 700; } .local-bar__inner > a span { font-size: 16px; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #4f9588; vertical-align: 1px; }
.section-heading--split { display: flex; align-items: end; justify-content: space-between; gap: 70px; margin-bottom: 60px; }
h2 { margin-bottom: 0; font-family: var(--serif); font-size: clamp(45px, 5vw, 65px); letter-spacing: -.025em; line-height: 1.03; }
.solutions h2 em, .portfolio h2 em, .faq h2 em { color: #5a9992; }
.section-heading__aside { max-width: 410px; margin: 0 0 6px; color: var(--muted); font-size: 14px; line-height: 1.85; }
.solution-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.solution-card { position: relative; min-height: 294px; padding: 34px 36px 20px 0; }
.solution-card + .solution-card { padding-left: 36px; border-left: 1px solid var(--line); }
.solution-card__number { position: absolute; top: 36px; right: 30px; color: #9aabaa; font-size: 10px; letter-spacing: .12em; }
.solution-card__icon { display: grid; place-items: center; width: 47px; height: 47px; margin-bottom: 26px; color: #4a8c84; border: 1px solid #c7ddd5; border-radius: 50%; }
.solution-card__icon svg { width: 27px; height: 27px; } .solution-card h3 { margin-bottom: 11px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.solution-card p { min-height: 70px; margin-bottom: 15px; color: var(--muted); font-size: 12px; line-height: 1.75; }
.solution-card > a { display: inline-flex; gap: 9px; align-items: center; color: #39776f; font-size: 11px; font-weight: 700; } .solution-card > a span { font-size: 15px; }
.portfolio { padding: 116px 0 124px; background: #ecefe9; }
.portfolio-top { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 47px; }
.portfolio-top > p { max-width: 370px; margin: 0 0 5px; color: var(--muted); font-size: 13px; line-height: 1.85; }
.project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.project-card { min-width: 0; } .project-card--tall { padding-top: 67px; }
.project-card--wide { grid-column: 1 / -1; width: calc(50% - 11px); margin-top: -213px; }
.project-card__image { position: relative; aspect-ratio: 1.48; overflow: hidden; background: #c8dcd6; }
.project-card--tall .project-card__image { aspect-ratio: 1.18; } .project-card--wide .project-card__image { aspect-ratio: 1.48; }
.project-card__image img { height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.65,.25,1); }
.project-card:hover .project-card__image img { transform: scale(1.035); }
.image-note { position: absolute; right: 12px; bottom: 12px; padding: 5px 9px; background: rgb(14 44 47 / 72%); color: var(--white); font-size: 9px; letter-spacing: .06em; }
.project-card__body { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding: 17px 2px 0; }
.project-card__kind { margin-bottom: 6px; color: #66928b; font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.project-card h3 { max-width: 330px; margin: 0; font-family: var(--serif); font-size: 24px; font-weight: 400; line-height: 1.12; }
.round-link { display: grid; flex: 0 0 auto; place-items: center; width: 39px; height: 39px; border: 1px solid #b8c9c1; border-radius: 50%; color: var(--deep); transition: color .2s, background .2s, border .2s; }
.round-link:hover { color: var(--white); border-color: var(--deep); background: var(--deep); }
.portfolio-disclaimer { display: flex; gap: 9px; align-items: flex-start; max-width: 620px; margin: 35px 0 0; color: #71817d; font-size: 10px; line-height: 1.7; }
.portfolio-disclaimer span { color: #5c958c; font-size: 14px; }
.process { position: relative; overflow: hidden; color: var(--white); background: var(--deep); }
.process::after { position: absolute; top: -220px; right: -180px; width: 570px; height: 570px; border: 1px solid rgb(174 221 207 / 15%); border-radius: 50%; box-shadow: 0 0 0 54px rgb(174 221 207 / 4%), 0 0 0 110px rgb(174 221 207 / 3%); content: ""; pointer-events: none; }
.process .container { position: relative; z-index: 1; } .process-intro { max-width: 680px; margin-bottom: 64px; }
.process h2 { margin-bottom: 21px; } .process-intro > p:last-child { max-width: 490px; margin-bottom: 0; color: rgb(255 255 255 / 68%); font-size: 14px; line-height: 1.8; }
.process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-bottom: 48px; }
.process-steps article { padding-top: 20px; border-top: 1px solid rgb(255 255 255 / 28%); } .process-steps article > span { color: var(--water); font-size: 11px; letter-spacing: .15em; }
.process-steps h3 { margin: 20px 0 8px; font-size: 16px; font-weight: 600; } .process-steps p { max-width: 300px; margin-bottom: 0; color: rgb(255 255 255 / 65%); font-size: 12px; line-height: 1.8; }
.quote { padding: 124px 0; } .quote__layout { display: grid; grid-template-columns: .9fr 1fr; gap: 95px; align-items: start; }
.quote__intro h2 { margin-bottom: 23px; } .quote__intro h2 em { color: #58978e; }
.quote__intro > p:not(.eyebrow) { max-width: 430px; margin-bottom: 35px; color: var(--muted); font-size: 13px; line-height: 1.9; }
.quote__contact { display: flex; align-items: center; gap: 13px; margin-top: 18px; }
.quote__contact-icon { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid #cfddd6; border-radius: 50%; color: #4f8d85; }
.quote__contact small { display: block; margin-bottom: 2px; color: #7b8e8c; font-size: 8px; font-weight: 700; letter-spacing: .16em; }
.quote__contact a, .quote__contact div > p { margin: 0; font-size: 12px; font-weight: 600; }
.quote-form { padding: 37px 39px 32px; background: var(--white); box-shadow: 0 18px 60px rgb(24 62 58 / 7%); }
.quote-form__heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 25px; padding-bottom: 19px; border-bottom: 1px solid #e6ece7; }
.quote-form__heading span { color: #658c87; font-size: 9px; font-weight: 700; letter-spacing: .15em; } .quote-form__heading p { margin: 0; font-family: var(--serif); font-size: 20px; }
.quote-form label { display: block; margin: 14px 0 7px; color: #354e51; font-size: 10px; font-weight: 700; }
.quote-form input, .quote-form select, .quote-form textarea { width: 100%; border: 1px solid #d8e1dc; border-radius: 2px; outline: none; padding: 12px 13px; color: var(--ink); background: #fcfdfb; font-size: 12px; transition: border .18s, box-shadow .18s; }
.quote-form input, .quote-form select { height: 45px; } .quote-form textarea { min-height: 83px; resize: vertical; }
.quote-form input::placeholder, .quote-form textarea::placeholder { color: #a5b0ad; }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { border-color: #65aaa0; box-shadow: 0 0 0 3px rgb(101 170 160 / 14%); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; } .form-row > div { min-width: 0; }
.optional { color: #9aa9a6; font-weight: 400; } .quote-form__submit { width: 100%; margin-top: 19px; }
.quote-form__privacy { margin: 12px 0 0; color: #8a9996; font-size: 9px; text-align: center; }
.form-status { min-height: 16px; margin: 8px 0 0; color: #387970; font-size: 11px; text-align: center; }
.faq { padding: 90px 0 100px; background: var(--sand); }
.faq__layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 85px; } .faq h2 { font-size: clamp(40px, 4vw, 54px); }
.faq-list { border-top: 1px solid #d9ded4; } .faq-list details { border-bottom: 1px solid #d9ded4; }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 2px; list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; }
.faq-list summary::-webkit-details-marker { display: none; } .faq-list summary span { color: #578f86; font-size: 21px; font-weight: 400; transition: transform .2s; }
.faq-list details[open] summary span { transform: rotate(45deg); } .faq-list details > p { max-width: 580px; margin: -5px 36px 19px 2px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.site-footer { padding: 42px 0 20px; color: var(--white); background: var(--deep-2); }
.site-footer__main { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 35px; border-bottom: 1px solid rgb(255 255 255 / 16%); }
.site-footer__main > p { margin: 0; color: rgb(255 255 255 / 66%); font-family: var(--serif); font-size: 23px; }
.brand--footer .brand__mark { color: var(--water); }
.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 17px; color: rgb(255 255 255 / 56%); font-size: 9px; }
.site-footer__bottom p { margin: 0; } .site-footer__bottom a { color: rgb(255 255 255 / 83%); } .demo-note { max-width: 480px; text-align: center; }
@media (max-width: 900px) {
  .container { width: min(100% - 44px, 720px); } .site-header__inner { height: 82px; }
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; border: 1px solid rgb(255 255 255 / 36%); border-radius: 50%; background: transparent; }
  .menu-toggle span { width: 16px; height: 1px; margin-inline: auto; background: var(--white); transition: transform .2s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .site-nav { display: none; position: absolute; top: 71px; right: 22px; left: 22px; align-items: stretch; gap: 0; padding: 13px 20px 20px; border: 1px solid rgb(255 255 255 / 20%); background: #10363e; box-shadow: 0 18px 40px rgb(0 0 0 / 18%); }
  .site-nav.is-open { display: flex; flex-direction: column; } .site-nav > a:not(.button) { padding: 13px 0; border-bottom: 1px solid rgb(255 255 255 / 13%); }
  .site-nav .button { margin-top: 17px; } .hero { min-height: 760px; } .hero__copy { max-width: 580px; }
  .hero h1 { font-size: clamp(58px, 10vw, 78px); } .section { padding: 94px 0; }
  .section-heading--split { align-items: start; flex-direction: column; gap: 25px; margin-bottom: 45px; } .section-heading__aside { max-width: 580px; }
  .portfolio-top { align-items: start; flex-direction: column; gap: 20px; } .portfolio-top > p { max-width: 560px; }
  .project-card--wide { margin-top: -150px; } .quote__layout, .faq__layout { grid-template-columns: 1fr; gap: 48px; }
  .quote__intro > p:not(.eyebrow) { max-width: 580px; } .quote-form { max-width: 620px; }
}
@media (max-width: 620px) {
  .container { width: calc(100% - 38px); } .site-header__inner { height: 74px; }
  .brand__mark { width: 36px; height: 36px; } .brand__words strong { font-size: 11px; }
  .hero { min-height: max(740px, 100svh); align-items: end; padding-bottom: 118px; }
  .hero__image img { object-position: 60% center; } .hero__veil { background: linear-gradient(0deg, rgb(6 31 36 / 90%) 0%, rgb(8 37 42 / 74%) 49%, rgb(8 37 42 / 20%) 100%); }
  .hero__inner { min-height: auto; align-items: end; } .hero__copy { padding-top: 150px; }
  .hero h1 { max-width: 470px; font-size: clamp(55px, 13vw, 72px); } .hero__lead { max-width: 370px; font-size: 14px; }
  .hero__actions { align-items: flex-start; flex-direction: column; gap: 19px; } .hero__actions .button { min-height: 54px; }
  .hero__scroll { bottom: -76px; font-size: 8px; } .hero__stamp { right: 0; bottom: -84px; padding: 11px 13px; font-size: 9px; }
  .local-bar__inner { align-items: flex-start; flex-direction: column; gap: 7px; padding-block: 15px; font-size: 10px; } .local-bar__inner > a { margin-top: 3px; }
  .section { padding: 76px 0; } h2 { font-size: clamp(43px, 11vw, 57px); } .eyebrow { margin-bottom: 17px; font-size: 9px; }
  .solution-grid { grid-template-columns: 1fr; }
  .solution-card, .solution-card + .solution-card { min-height: auto; padding: 27px 0 25px; border-left: 0; border-bottom: 1px solid var(--line); }
  .solution-card__number { top: 30px; right: 5px; } .solution-card__icon { margin-bottom: 17px; }
  .solution-card p { min-height: 0; max-width: 430px; } .portfolio { padding: 78px 0; }
  .project-grid { grid-template-columns: 1fr; gap: 35px; } .project-card--tall { padding-top: 0; }
  .project-card--wide { grid-column: auto; width: auto; margin-top: 0; }
  .project-card__image, .project-card--tall .project-card__image, .project-card--wide .project-card__image { aspect-ratio: 1.18; }
  .project-card h3 { font-size: 22px; } .portfolio-disclaimer { margin-top: 28px; }
  .process { padding: 78px 0; } .process-intro { margin-bottom: 43px; } .process-steps { grid-template-columns: 1fr; gap: 24px; }
  .process-steps article { padding-top: 16px; } .process-steps h3 { margin-top: 13px; }
  .quote { padding: 78px 0; } .quote__layout, .faq__layout { gap: 36px; }
  .quote-form { padding: 25px 20px 22px; } .quote-form__heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .quote-form__heading p { font-size: 19px; } .form-row { grid-template-columns: 1fr; gap: 0; }
  .faq { padding: 72px 0; } .faq-list summary { font-size: 12px; }
  .site-footer { padding-top: 34px; } .site-footer__main { align-items: flex-start; flex-direction: column; gap: 20px; padding-bottom: 27px; }
  .site-footer__main > p { font-size: 20px; } .site-footer__bottom { align-items: flex-start; flex-direction: column; gap: 9px; }
  .demo-note { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
