html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:#F8F6F1;color:#1E1D1B;font-family:'Hanken Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
[hidden]{display:none !important}
a{color:#1E1D1B;text-decoration:none}
a:hover{color:#3F6B6A}
::selection{background:#D6E2E0}
:focus-visible{outline:2px solid #3F6B6A;outline-offset:3px}
input::placeholder,textarea::placeholder{color:#8E8981}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none !important;animation:none !important}}

/* Header */
.site-header{position:sticky;top:0;z-index:10;background:#F8F6F1;border-bottom:1px solid #E3DED4}
.site-nav{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,48px);height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center}
.brand img{height:32px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:clamp(16px,3vw,36px)}
.nav-link{font-size:14px;color:#4A4743}
.nav-link:hover{color:#1E1D1B}
.nav-cta{font-size:14px;font-weight:500;padding:10px 16px;border:1px solid #1E1D1B;color:#1E1D1B;transition:background .25s,color .25s}
.nav-cta:hover{background:#1E1D1B;color:#F8F6F1}

/* Shared type */
.eyebrow{display:flex;gap:16px;align-items:baseline;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.14em;color:#6B6760}
.eyebrow-num{color:#3F6B6A}
.section-title{margin:0;font-family:'Newsreader',Georgia,serif;font-weight:300;font-size:clamp(38px,4.8vw,68px);line-height:1.04;letter-spacing:-0.02em;text-wrap:balance}
.section-lede{margin:0;font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:#4A4743;text-wrap:pretty}

/* Hero */
.hero{max-width:1280px;margin:0 auto;padding:clamp(48px,8vw,112px) clamp(20px,4vw,48px) clamp(56px,8vw,120px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:clamp(48px,6vw,96px);align-items:end}
.hero-copy{display:flex;flex-direction:column;gap:clamp(28px,3.5vw,40px);padding-bottom:clamp(0px,2vw,24px)}
.hero-eyebrow{margin:0;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.14em;color:#3F6B6A}
.hero-title{margin:0;font-family:'Newsreader',Georgia,serif;font-weight:300;font-size:clamp(52px,7.4vw,112px);line-height:0.98;letter-spacing:-0.025em;text-wrap:balance}
.hero-title em{font-style:italic;font-weight:300}
.hero-lede{margin:0;max-width:30ch;font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:#4A4743;text-wrap:pretty}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px;padding-top:8px}
.btn-primary{display:inline-flex;align-items:center;gap:14px;background:#1E1D1B;color:#F8F6F1;font-size:15px;font-weight:500;padding:16px 26px;transition:background .3s}
.btn-primary:hover{background:#3F6B6A;color:#F8F6F1}
.hero-figure{margin:0;position:relative;background:#F0EDE6;border:1px solid #E3DED4;aspect-ratio:5 / 6;overflow:hidden}
.hero-visual{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-caption{position:absolute;left:16px;bottom:14px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.14em;color:#6B6760}

/* Platform and demo sections */
.section{border-top:1px solid #E3DED4}
.section-platform{background:#F8F6F1}
.platform-inner{max-width:1280px;margin:0 auto;padding:clamp(72px,10vw,144px) clamp(20px,4vw,48px);display:flex;flex-direction:column;gap:clamp(48px,6vw,88px)}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(24px,5vw,80px)}
.split-main{grid-column:span 2;min-width:0;max-width:760px;display:flex;flex-direction:column;gap:24px}
.platform-lede{max-width:46ch}
.capabilities{list-style:none;margin:0;padding:0;border-bottom:1px solid #E3DED4}
.capability{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(8px,5vw,80px);padding:28px 0;border-top:1px solid #E3DED4}
.capability-head{display:flex;gap:16px;align-items:baseline}
.capability-num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#3F6B6A}
.capability h3{margin:0;font-family:'Newsreader',Georgia,serif;font-weight:400;font-size:clamp(22px,2vw,27px);letter-spacing:-0.01em}
.capability p{grid-column:span 2;margin:0;max-width:60ch;font-size:16px;line-height:1.6;color:#4A4743;text-wrap:pretty}
.section-demo{background:#FBFAF7}
.demo-inner{max-width:1280px;margin:0 auto;padding:clamp(72px,10vw,152px) clamp(20px,4vw,48px)}
.demo-main{gap:28px}
.demo-lede{max-width:44ch}
.text-link{align-self:flex-start;display:inline-flex;gap:10px;font-size:15px;font-weight:500;padding-bottom:6px;border-bottom:1px solid #3F6B6A;color:#1E1D1B}
.text-link:hover{color:#3F6B6A}

/* Contact */
.section-contact{background:#F0EDE6}
.contact-inner{max-width:1280px;margin:0 auto;padding:clamp(72px,10vw,144px) clamp(20px,4vw,48px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(48px,7vw,112px);align-items:start}
.contact-copy{display:flex;flex-direction:column;gap:28px}
.contact-lede{margin:0;max-width:36ch;font-size:17px;line-height:1.6;color:#4A4743;text-wrap:pretty}
.contact-card{background:#FBFAF7;border:1px solid #E0DBD1;padding:clamp(24px,4vw,48px)}
.success{display:flex;flex-direction:column;gap:20px;min-height:360px;justify-content:center}
.success-mark{width:36px;height:36px;border:1px solid #3F6B6A;display:flex;align-items:center;justify-content:center;color:#3F6B6A;font-size:16px}
.success h3{margin:0;font-family:'Newsreader',Georgia,serif;font-weight:400;font-size:32px;letter-spacing:-0.01em}
.success p{margin:0;max-width:38ch;font-size:16px;line-height:1.6;color:#4A4743}
.btn-reset{align-self:flex-start;background:none;border:none;border-bottom:1px solid #C9C3B8;padding:0 0 4px;font:inherit;font-size:14px;color:#4A4743;cursor:pointer}
.btn-reset:hover{color:#1E1D1B;border-bottom-color:#1E1D1B}
.demo-form{display:flex;flex-direction:column;gap:28px}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:28px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.12em;color:#6B6760}
.label-split{display:flex;justify-content:space-between;gap:12px}
.label-optional{color:#8E8981}
.field input,.field textarea{border:none;border-bottom:1px solid #C9C3B8;background:transparent;padding:10px 0;font:inherit;font-size:17px;color:#1E1D1B;border-radius:0;outline:none;transition:border-color .2s}
.field textarea{line-height:1.5;resize:vertical}
.field .is-invalid{border-bottom-color:#A4472F}
.field input:focus,.field textarea:focus{border-bottom-color:#3F6B6A;box-shadow:0 1px 0 #3F6B6A}
.field-error{min-height:18px;font-size:13px;color:#A4472F}
/* Honeypot: hidden from people, filled in by spam bots */
.hp-field{display:none}
.form-alert{display:flex;gap:14px;padding:16px 18px;border:1px solid #E2C6BC;background:#F8EEEA}
.form-alert-mark{flex:none;width:7px;height:7px;margin-top:7px;background:#A4472F;display:block}
.form-alert-text{display:flex;flex-direction:column;gap:4px}
.form-alert strong{font-size:14px;font-weight:600;color:#1E1D1B}
.form-alert span{font-size:14px;line-height:1.5;color:#4A4743}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding-top:4px}
.form-note{margin:0;max-width:34ch;font-size:13px;line-height:1.5;color:#6B6760}
.btn-submit{display:inline-flex;align-items:center;gap:14px;background:#1E1D1B;color:#F8F6F1;border:none;border-radius:0;font:inherit;font-size:15px;font-weight:500;padding:16px 26px;cursor:pointer;transition:background .3s}
.btn-submit:hover{background:#3F6B6A}
.btn-submit:disabled{opacity:.75}
.btn-submit-mark{display:inline-block;width:14px;text-align:center}

/* Footer */
.site-footer{border-top:1px solid #E3DED4;background:#F8F6F1}
.footer-inner{max-width:1280px;margin:0 auto;padding:32px clamp(20px,4vw,48px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.footer-inner img{height:26px;width:auto;display:block}
.footer-meta{font-size:13px;color:#6B6760}

@media (max-width:700px){
  /* One column: "span 2" here would add a stray grid track and overflow the page */
  .split,.capability{grid-template-columns:minmax(0,1fr)}
  .split-main,.capability p{grid-column:auto}
}
@media (max-width:639px){
  .nav-link{display:none}
  .hero-figure{aspect-ratio:4 / 3.4}
}