:root{
  --ivory:#F6F2E9;
  --panel:#F1EBDD;
  --input-bg:#FBF8F1;
  --ink:#221C11;
  --sec:#54493A;
  --lab:#6B6357;
  --lab2:#8A7B5F;
  --hint:#B0A487;
  --line:#E0D7C3;
  --line2:#D9CEB6;
  --accent:#6E7B52;
  --accent-ondark:#C7AE85;
  --pad-x:clamp(24px, 4.5vw, 64px);
  --pad-y:clamp(72px, 8vw, 110px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.7;
}
a{ color:inherit; text-decoration:none; }
a:hover{ opacity:0.72; }

#bgCanvas{
  position:fixed; inset:0; z-index:0;
  width:100%; height:100%;
  pointer-events:none; display:block;
}

.nav{
  position:relative; z-index:1;
  display:flex; justify-content:space-between; align-items:center;
  padding:36px var(--pad-x) 0;
}
.logo{ display:flex; align-items:center; gap:12px; }
.logo-grid{ display:grid; grid-template-columns:repeat(3,7px); gap:2.5px; }
.logo-grid i{ width:7px; height:7px; background:var(--ink); display:block; }
.logo-grid i.acc{ background:var(--accent); }
.logo-word{ font-size:17px; font-weight:700; letter-spacing:-0.02em; }

.pill{
  display:inline-block;
  white-space:nowrap;
  background:var(--accent); color:var(--ivory);
  padding:14px 28px; border-radius:999px; border:none; cursor:pointer;
  font-family:"IBM Plex Mono",monospace;
  font-size:13px; font-weight:700; letter-spacing:0.12em;
}
.pill.big{ padding:21px 44px; }

.hero{
  position:relative; z-index:1;
  min-height:clamp(700px, 94vh, 1120px);
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(64px, 8vw, 110px) var(--pad-x) clamp(72px, 8vw, 104px);
  border-bottom:1px solid var(--line);
}
.hero h1{
  margin:0;
  font-size:clamp(56px, 8.8vw, 126px);
  line-height:0.98; letter-spacing:-0.045em; font-weight:700;
  max-width:1240px; text-wrap:balance;
}
.hero-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(360px,100%), 1fr));
  gap:48px;
  margin-top:clamp(40px, 5vw, 68px);
  align-items:end;
}
.hero-lede{
  margin:0;
  font-size:clamp(17px, 1.4vw, 20px);
  line-height:1.65; color:var(--sec); max-width:560px;
}
.hero-cta{ display:flex; gap:32px; justify-content:flex-end; align-items:center; flex-wrap:wrap; }
.hero-cap{
  position:absolute; left:var(--pad-x); right:var(--pad-x); bottom:24px;
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  font-family:"IBM Plex Mono",monospace;
  font-size:11px; letter-spacing:0.14em; color:var(--lab2);
}

.wash{
  position:relative; z-index:1;
  background:rgba(246,242,233,0.88);
}
@media (min-width:700px){
  .wash{
    backdrop-filter:blur(1px);
    -webkit-backdrop-filter:blur(1px);
  }
}
.section{ padding:var(--pad-y) var(--pad-x) clamp(64px, 7vw, 104px); }
.eyebrow{
  font-family:"IBM Plex Mono",monospace;
  font-size:12px; letter-spacing:0.16em; color:var(--accent);
  text-transform:uppercase;
}
h2{
  margin:24px 0 0;
  font-size:clamp(36px, 3.8vw, 54px);
  letter-spacing:-0.035em; font-weight:700; line-height:1.05;
  max-width:760px;
}
.intro{ margin:22px 0 0; max-width:560px; font-size:16px; line-height:1.7; color:var(--sec); }

.steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(36px, 4.5vw, 64px);
  margin-top:clamp(48px, 6vw, 80px);
}
@media (max-width:980px){
  .steps{ grid-template-columns:repeat(auto-fit, minmax(min(280px,100%), 1fr)); }
}
.step-num{
  font-size:clamp(44px, 4.2vw, 60px);
  font-weight:700; letter-spacing:-0.04em; color:var(--accent);
  line-height:1;
}
.step h3{ margin:22px 0 0; font-size:18px; font-weight:700; }
.step p{ margin:12px 0 0; font-size:15px; line-height:1.7; color:var(--sec); }

.wyg{
  border-top:1px solid var(--line);
  padding:clamp(64px, 7.5vw, 96px) var(--pad-x);
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(380px,100%), 1fr));
  gap:clamp(40px, 5vw, 64px);
}
.wyg h2{ max-width:520px; }
.wyg-intro{ margin:26px 0 0; max-width:480px; font-size:16px; line-height:1.7; color:var(--sec); }
.wyg-rows{ display:flex; flex-direction:column; }
.wyg-row{
  display:grid; grid-template-columns:150px 1fr; gap:28px;
  padding:26px 0; border-bottom:1px solid var(--line);
}
.wyg-row:last-child{ border-bottom:none; }
.wyg-label{
  font-family:"IBM Plex Mono",monospace;
  font-size:12px; letter-spacing:0.14em; color:var(--accent);
  padding-top:4px; text-transform:uppercase;
}
.wyg-row h3{ margin:0; font-size:18px; font-weight:700; }
.wyg-row p{ margin:8px 0 0; font-size:15px; line-height:1.7; color:var(--sec); }
@media (max-width:560px){
  .wyg-row{ grid-template-columns:1fr; gap:10px; }
}

.quote{
  position:relative; z-index:1;
  border-top:1px solid var(--line);
  background:var(--panel);
  padding:var(--pad-y) var(--pad-x) clamp(56px, 7vw, 88px);
}
.quote .intro{ max-width:620px; }
.form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(400px,100%), 1fr));
  gap:clamp(40px, 5vw, 72px);
  margin-top:clamp(48px, 6vw, 72px);
}
.col{ display:flex; flex-direction:column; gap:20px; }
.col-head{
  display:flex; align-items:baseline; gap:12px;
  border-bottom:1px solid var(--line2); padding-bottom:12px;
  font-family:"IBM Plex Mono",monospace;
  font-size:12px; font-weight:700; letter-spacing:0.16em; color:var(--accent);
}
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:560px){ .grid2{ grid-template-columns:1fr; } }
.field{
  display:flex; flex-direction:column; gap:8px;
  font-family:"IBM Plex Mono",monospace;
  font-size:11px; letter-spacing:0.14em; color:var(--lab);
  text-transform:uppercase;
}
.field .hint{ color:var(--hint); letter-spacing:0; text-transform:none; }
input[type="text"], input[type="email"], textarea{
  background:var(--input-bg);
  border:1px solid var(--line2);
  border-radius:8px;
  padding:14px 16px;
  font-size:16px;
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--ink);
  outline:none; width:100%;
  letter-spacing:normal; text-transform:none;
}
textarea{ line-height:1.5; resize:vertical; }
input:focus, textarea:focus{
  border-color:#8A6D3F;
  box-shadow:0 0 0 3px rgba(138,109,63,0.12);
}
input::placeholder, textarea::placeholder{ color:#A99C82; }


.submit-row{
  display:flex; align-items:center; gap:28px;
  margin-top:clamp(36px, 4vw, 52px); padding-top:28px;
  border-top:1px solid var(--line2); flex-wrap:wrap;
}
.privacy{ font-size:13px; color:var(--lab2); }

.success{ display:none; flex-direction:column; align-items:flex-start; gap:20px; padding:clamp(56px, 7vw, 96px) 0 clamp(32px, 4vw, 56px); }
.success.show{ display:flex; }
.success-check{
  width:56px; height:56px; border-radius:50%;
  background:var(--accent); color:var(--ivory);
  display:flex; align-items:center; justify-content:center; font-size:24px;
}
.success h3{ margin:0; font-size:28px; font-weight:700; letter-spacing:-0.02em; }
.success p{ margin:0; font-size:16px; line-height:1.7; color:var(--sec); max-width:440px; }

.aisle{
  position:relative; z-index:1; overflow:hidden;
  height:clamp(320px, 38vw, 520px);
  background:var(--ivory);
}
#aisleCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.aisle-fade{
  position:absolute; left:0; right:0; top:0; height:90px;
  background:linear-gradient(to top, rgba(246,242,233,0), var(--ivory));
  pointer-events:none;
}

.footer{
  position:relative; z-index:1;
  background:var(--ink); color:var(--ivory);
  padding:clamp(64px, 7vw, 104px) var(--pad-x);
}
.footer-inner{
  display:flex; justify-content:space-between; align-items:center;
  gap:32px; flex-wrap:wrap;
}
.footer .logo-grid{ grid-template-columns:repeat(3,8px); gap:3px; }
.footer .logo-grid i{ width:8px; height:8px; background:var(--ivory); }
.footer .logo-grid i.acc{ background:var(--accent-ondark); }
.footer .logo-word{ font-size:19px; }
.pill-outline{
  font-family:"IBM Plex Mono",monospace;
  font-size:13px; font-weight:700; letter-spacing:0.12em;
  color:var(--ivory);
  border:1px solid rgba(246,242,233,0.35);
  border-radius:999px; padding:14px 30px;
}
.pill-outline:hover{ border-color:var(--ivory); opacity:1; }
.copyright{
  font-family:"IBM Plex Mono",monospace;
  font-size:12px; letter-spacing:0.06em; color:var(--lab2);
}

.hp{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

@media (max-width:600px){
  .nav{ padding-top:22px; }
  .logo{ gap:9px; }
  .logo-word{ font-size:15px; }
  .nav .pill{ padding:10px 16px; font-size:11px; letter-spacing:0.08em; }
  .pill.big{ padding:16px 28px; font-size:12px; }
}
@media (max-width:470px){
  .logo-word{ display:none; }
}

#how-we-work h2{ max-width:none; }