@font-face{font-family:"Space Grotesk";src:url("assets/fonts/space-grotesk-var-latin.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Space Mono";src:url("assets/fonts/space-mono-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --ink:#0A0A0B;
  --ink-500:#46464D;
  --ink-400:#6C6C74;
  --ink-200:#C6C6CB;
  --ink-100:#E4E4E7;
  --white:#FFFFFF;
  --green:#17C06A;
  --green-deep:#0B4F2E;
  --green-on:#064B29;
  --green-light:#7BE3AE;

  --font-display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-body:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-mono:"Space Mono",SFMono-Regular,Menlo,monospace;

  --wrap:1120px;
  --gutter:clamp(20px,5vw,48px);
  --radius:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{
  /* content-box so the 1120px is the CONTENT width, matching the source design.
     The gutter sits outside it rather than eating into it. */
  box-sizing:content-box;
  max-width:var(--wrap);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

.label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-400);
}

/* ── Header ─────────────────────────────── */
.site-header{border-bottom:1px solid var(--ink-100)}
.header-inner{height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:23px;letter-spacing:-0.045em}
.brand-name-sm{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-0.045em;color:var(--ink)}
.brand-rule{width:1px;height:16px;background:var(--ink-200);flex:none}
.brand-mark{width:15px;height:15px}

/* ── Hero ───────────────────────────────── */
.hero{position:relative;overflow:hidden;flex:1;display:flex}
.hero-texture{
  position:absolute;inset:0;
  background-image:url("assets/hero-texture.jpg");
  background-size:cover;background-position:center;
  opacity:0.07;
  /* Grayscale in CSS, as the source design did — keeps the wash identical
     rather than relying on a baked-in colour profile conversion. */
  filter:grayscale(1);
  pointer-events:none;
}
.hero-glow{
  position:absolute;top:-220px;right:-160px;width:600px;height:600px;border-radius:999px;
  background:radial-gradient(circle,rgba(23,192,106,0.16) 0%,rgba(23,192,106,0) 68%);
  pointer-events:none;
}
.hero-inner{
  position:relative;width:100%;
  padding-top:clamp(56px,8vw,104px);
  padding-bottom:clamp(48px,6vw,80px);
  display:flex;flex-direction:column;gap:clamp(44px,6vw,72px);
}
.hero-copy{display:flex;flex-direction:column;gap:28px}
.hero h1{
  margin:0;max-width:15ch;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(46px,8.5vw,116px);
  line-height:0.88;letter-spacing:-0.045em;
}
.hero-sub{margin:0;max-width:50ch;font-size:clamp(18px,1.8vw,22px);line-height:1.5;color:var(--ink-500)}

/* ── Cards ──────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,32px)}
.card{
  min-width:0;display:flex;flex-direction:column;gap:16px;
  padding:clamp(24px,3vw,36px);
  border:1px solid var(--ink-200);border-radius:var(--radius);
  background:var(--white);
}
.card h2{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.2vw,40px);line-height:0.98;letter-spacing:-0.04em}
.card p{margin:0 0 8px;max-width:38ch;font-size:17px;line-height:1.55;color:var(--ink-500)}
.card-dark{border-color:var(--ink);background:var(--ink);color:var(--white)}
.card-dark .label{color:rgba(255,255,255,0.62)}
.card-dark p{color:rgba(255,255,255,0.75)}

/* ── Buttons ────────────────────────────── */
.btn{
  align-self:flex-start;
  display:inline-flex;align-items:center;justify-content:center;
  height:52px;padding:0 28px;
  border:none;border-radius:var(--radius);
  font-family:var(--font-body);font-size:16px;font-weight:500;
  text-decoration:none;cursor:pointer;
  transition:background 140ms ease,color 140ms ease,border-color 140ms ease;
}
.btn:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.card .btn{margin-top:auto}
.btn-green{background:var(--green);color:var(--green-on)}
.btn-green:hover{background:var(--green-deep);color:var(--green-light)}
.btn-green[disabled]{opacity:0.6;cursor:progress}
.btn-ghost{border:1px solid rgba(255,255,255,0.38);background:transparent;color:var(--white)}
.btn-ghost:hover{border-color:var(--white);background:rgba(255,255,255,0.08)}

/* ── What we do ─────────────────────────── */
.what{display:flex;flex-direction:column;gap:28px}
.what-head{border-top:1px solid var(--ink);padding-top:16px}
.what-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,32px)}
.what-item{min-width:0;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--ink-200);padding-top:16px}
.what-num{font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--green)}
.what-item h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(20px,2.1vw,24px);line-height:1.05;letter-spacing:-0.03em}
.what-item p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-500)}

/* ── Footer ─────────────────────────────── */
.site-footer{border-top:1px solid var(--ink)}
.footer-inner{padding-top:24px;padding-bottom:24px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer-brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.footer-links{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.footer-links a{text-decoration:none}
.footer-links a:hover{color:var(--ink);text-decoration:underline}

/* ── Modal ──────────────────────────────── */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal-scrim{position:absolute;inset:0;background:rgba(10,10,11,0.72);backdrop-filter:blur(6px)}
.modal-panel{
  position:relative;
  width:100%;max-width:520px;max-height:92vh;overflow-y:auto;
  background:var(--white);border:1px solid var(--ink);border-radius:var(--radius);
  padding:clamp(24px,4vw,40px);
  display:flex;flex-direction:column;gap:20px;
  animation:t2in 220ms cubic-bezier(0.22,0.61,0.36,1) both;
}
@keyframes t2in{from{opacity:0;transform:translateY(12px) scale(0.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.modal-panel{animation:none}.btn{transition:none}}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.modal-head-copy{display:flex;flex-direction:column;gap:10px}
.modal-head-copy[hidden]{display:none}
.modal-head h3{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3vw,34px);line-height:1;letter-spacing:-0.04em}
.modal-close{
  flex:none;width:36px;height:36px;
  margin-left:auto;  /* stays right even when the heading beside it is hidden */
  border:1px solid var(--ink-200);border-radius:var(--radius);background:transparent;color:var(--ink);
  font-family:var(--font-mono);font-size:14px;line-height:1;cursor:pointer;
}
.modal-close:hover{background:#F7F7F8}

form{display:flex;flex-direction:column;gap:20px}
/* An element rule beats the UA [hidden] rule, so restate it. */
form[hidden]{display:none}
.fields{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:8px}
.field input{
  height:48px;padding:0 14px;
  border:1px solid var(--ink-200);border-radius:var(--radius);
  background:var(--white);color:var(--ink);
  font-family:var(--font-body);font-size:16px;
  outline:none;width:100%;
}
.field input:focus{border-color:var(--green)}
.field input[aria-invalid="true"]{border-color:#E5484D}
.form-note{margin:0;line-height:1.6}
.form-error{margin:0;font-size:14px;color:#E5484D}
.form-error[hidden]{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.modal-done{display:flex;flex-direction:column;gap:16px}
.modal-done[hidden]{display:none}
.modal-done h3{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3vw,34px);line-height:1;letter-spacing:-0.04em}
.modal-done p{margin:0;color:var(--ink-500);line-height:1.55}

/* ── Responsive ─────────────────────────── */
@media (max-width:900px){
  .what-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .cards{grid-template-columns:minmax(0,1fr)}
  .header-inner .label{display:none}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:16px}
  .footer-links{gap:12px;flex-direction:column}
}
@media (max-width:480px){
  .what-grid{grid-template-columns:minmax(0,1fr)}
  .btn{width:100%}
}