/* =====================================================================
   ARCHITAKE.AI "Obsidian Atelier" design system
   Brand teal sampled from the logo: #007867. Warm counterpoint for the
   moment architecture stops being a drawing and becomes a home.
   ===================================================================== */

:root{
  /* --- teal ramp, anchored on the logo mark --- */
  --t-900:#00241F;
  --t-800:#003A32;
  --t-700:#005245;
  --t-600:#007867;   /* BRAND */
  --t-500:#009B84;
  --t-400:#00C4A7;
  --t-300:#12D9B8;   /* glow / neon blueprint */
  --t-200:#7CF0DC;

  /* --- warm counterpoint: interior light --- */
  --w-400:#FFB877;
  --w-300:#FFD2A6;

  /* --- ink & paper --- */
  --ink:#070A0A;
  --ink-1:#0B100F;
  --ink-2:#101715;
  --ink-3:#16201E;
  --paper:#F2F5F3;
  --paper-2:#E3E9E6;

  --fg:#E9F0ED;
  --fg-2:#B4C2BD;
  --fg-3:#7E8F8A;
  --fg-4:#556360;

  --hair:rgba(233,240,237,.10);
  --hair-2:rgba(233,240,237,.16);
  --hair-ink:rgba(7,10,10,.12);

  --maxw:1240px;
  --gut:clamp(20px,4vw,40px);
  --r:16px;
  --r-lg:26px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,.02,.28,1);

  --font-sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  background:var(--ink);
  color:var(--fg);
  line-height:1.6;
  font-weight:350;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-synthesis-weight:none;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--t-600);color:#fff}
:focus-visible{outline:2px solid var(--t-300);outline-offset:3px;border-radius:4px}

/* ---------- layout primitives ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding:clamp(84px,11vw,160px) 0;position:relative}
.sec--tight{padding:clamp(60px,7vw,100px) 0}

/* ---------- type ---------- */
h1,h2,h3,h4{font-weight:250;letter-spacing:-.035em;line-height:1.02}
.display{
  font-size:clamp(2.9rem,8.2vw,7.4rem);
  font-weight:200;letter-spacing:-.045em;line-height:.94;
}
.h2{font-size:clamp(2.1rem,5.1vw,4.1rem);letter-spacing:-.04em;line-height:1.02}
.h3{font-size:clamp(1.35rem,2.2vw,1.85rem);font-weight:300;letter-spacing:-.028em;line-height:1.12}
em.ital{font-family:var(--font-serif);font-style:italic;font-weight:300;letter-spacing:-.02em}
/* keep the ramp shallow: a steep one swallows the last line of a 2-3 line head */
.grad{
  background:linear-gradient(180deg,#FFFFFF 8%,#DCE6E2 58%,#AEBDB8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.teal{color:var(--t-300)}
.lede{
  font-size:clamp(1.02rem,1.35vw,1.22rem);
  color:var(--fg-2);max-width:60ch;font-weight:350;line-height:1.62;
}
.mono{font-family:var(--font-mono);font-weight:400;font-variant-ligatures:none}
.eyebrow{
  font-family:var(--font-mono);font-size:.7rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--t-300);
  display:inline-flex;align-items:center;gap:11px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.65;flex:0 0 auto}
.eyebrow--plain::before{display:none}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:transparent;
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:100px;border:1px solid transparent;
  font-size:.93rem;font-weight:600;letter-spacing:-.01em;cursor:pointer;
  transition:transform .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),color .4s var(--ease);
  position:relative;white-space:nowrap;
}
.btn svg{flex:0 0 auto;transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{
  background:linear-gradient(168deg,var(--t-400),var(--t-600) 78%);
  color:#001A16;font-weight:700;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 12px 34px -14px rgba(0,196,167,.62);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.34) inset,0 20px 46px -16px rgba(0,196,167,.8)}
.btn-ghost{border-color:var(--hair-2);color:var(--fg);background:rgba(233,240,237,.02)}
.btn-ghost:hover{border-color:var(--t-400);color:var(--t-200);transform:translateY(-2px)}
.btn-sm{padding:11px 20px;font-size:.86rem}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:80;
  transition:background .45s var(--ease),border-color .45s var(--ease),backdrop-filter .45s;
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(7,10,10,.72);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-bottom-color:var(--hair);
}
.nav-in{
  max-width:var(--maxw);margin-inline:auto;padding:14px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
/* the supplied logo artwork, used as-is: mark left, wordmark right */
.brand{display:inline-flex;align-items:center;gap:13px;transition:opacity .35s var(--ease)}
.brand:hover{opacity:.82}
.brand-mark{height:40px;width:auto;flex:0 0 auto}
.brand-word{height:20px;width:auto;flex:0 0 auto;position:relative;top:1px}
.brand--foot .brand-mark{height:52px}
.brand--foot .brand-word{height:26px}
@media (max-width:900px){
  .brand-mark{height:34px}
  .brand-word{height:17px}
}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a.l{
  font-size:.9rem;font-weight:500;color:var(--fg-2);position:relative;padding:3px 0;
  transition:color .3s var(--ease);
}
.nav-links a.l::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:var(--t-300);transition:width .35s var(--ease);
}
.nav-links a.l:hover{color:var(--fg)}
.nav-links a.l:hover::after{width:100%}
.ext{display:inline-flex;align-items:center;gap:6px}
.ext svg{width:11px;height:11px;opacity:.6}
.burger{
  display:none;flex-direction:column;gap:5px;padding:9px;background:none;border:0;cursor:pointer;
}
.burger span{width:22px;height:1.5px;background:var(--fg);transition:.35s var(--ease);border-radius:2px}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.drawer{
  position:fixed;inset:0;z-index:79;background:rgba(7,10,10,.97);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  display:flex;flex-direction:column;justify-content:center;gap:4px;padding:40px var(--gut);
  transform:translateY(-101%);transition:transform .6s var(--ease);
}
.drawer.open{transform:none}
.drawer a{
  font-size:clamp(1.7rem,7vw,2.4rem);font-weight:250;letter-spacing:-.04em;
  padding:16px 0;border-bottom:1px solid var(--hair);
}
.drawer .btn{margin-top:28px;justify-content:center}

/* =====================================================================
   THE FILM: sticky WebGL stage
   ===================================================================== */
.stage{position:relative;height:560vh}
.stage-sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 108%,#0A1614 0%,var(--ink) 62%);
}
#gl{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.4s var(--ease)}
#gl.ready{opacity:1}
.veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(130% 96% at 50% 46%,transparent 42%,rgba(7,10,10,.5) 78%,rgba(7,10,10,.86) 100%),
    linear-gradient(180deg,rgba(7,10,10,.72) 0%,transparent 22%,transparent 66%,rgba(7,10,10,.8) 100%);
}
.grain{
  position:absolute;inset:-50%;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* hero copy, rides on top of act I */
.hero-copy{
  position:absolute;inset:0;display:flex;align-items:center;
  padding-top:64px;pointer-events:none;z-index:4;
}
.hero-copy .wrap{width:100%}
.hero-copy .inner{max-width:min(640px,54vw)}
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;padding:7px 15px 7px 11px;
  border:1px solid var(--hair-2);border-radius:100px;background:rgba(7,10,10,.42);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-family:var(--font-mono);font-size:.66rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-2);margin-bottom:26px;
}
.hero-badge b{color:var(--t-300);font-weight:500}
.pip{width:6px;height:6px;border-radius:50%;background:var(--t-300);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(18,217,184,.55);animation:pip 2.6s infinite}
@keyframes pip{50%{box-shadow:0 0 0 7px rgba(18,217,184,0)}}
.hero-copy .lede{margin-top:24px;max-width:44ch;pointer-events:auto}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:34px;pointer-events:auto}

.scroll-hint{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--fg-4);pointer-events:none;
}
.scroll-hint .bar{width:1px;height:38px;background:linear-gradient(var(--t-300),transparent);
  transform-origin:top;animation:drop 2.4s var(--ease-io) infinite}
@keyframes drop{0%{transform:scaleY(0);opacity:0}35%{opacity:1}100%{transform:scaleY(1);opacity:0}}

/* act rail */
.rail{
  position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:2px;pointer-events:none;z-index:3;
}
.rail li{
  list-style:none;display:flex;align-items:center;gap:12px;justify-content:flex-end;
  font-family:var(--font-mono);font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--fg-4);padding:7px 0;transition:color .5s var(--ease);
}
.rail li .tick{width:16px;height:1px;background:currentColor;opacity:.55;transition:width .55s var(--ease),opacity .55s}
.rail li.on{color:var(--t-300)}
.rail li.on .tick{width:34px;opacity:1}
.rail li.done{color:var(--fg-3)}

/* act captions */
.caps{position:absolute;left:0;right:0;bottom:clamp(64px,10vh,110px);pointer-events:none;z-index:3}
.cap{
  position:absolute;max-width:34ch;opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.cap.on{opacity:1;transform:none}
.cap .n{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;color:var(--t-300);
  display:block;margin-bottom:12px;
}
.cap h3{font-size:clamp(1.5rem,3vw,2.3rem);font-weight:250;letter-spacing:-.04em}
.cap p{margin-top:11px;color:var(--fg-2);font-size:.97rem;max-width:38ch}

/* projected HUD tags */
.hud{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.tag{
  position:absolute;transform:translate(-50%,-50%);
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;
  color:var(--t-200);white-space:nowrap;
  padding:5px 10px;border:1px solid rgba(18,217,184,.32);border-radius:5px;
  background:rgba(3,20,17,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .5s var(--ease);
}
.tag.on{opacity:1}
.tag::before{
  content:"";position:absolute;left:-1px;top:50%;width:3px;height:3px;border-radius:50%;
  background:var(--t-300);transform:translate(-50%,-50%);
}

/* progress bar under the nav */
.filmbar{
  position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--hair);z-index:4;
}
.filmbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--t-600),var(--t-300));
  box-shadow:0 0 12px rgba(18,217,184,.7)}

/* no-webgl / reduced-motion fallback */
.fallback{position:absolute;inset:0;display:none;align-items:center;justify-content:flex-end;
  padding-inline:var(--gut);
  background:radial-gradient(110% 80% at 50% 104%,#0A1614,var(--ink) 66%)}
.fallback.show{display:flex}
.fallback svg{width:min(50vw,600px);opacity:.5}
@media (max-width:900px){
  .fallback{justify-content:center;align-items:flex-end;padding-bottom:8vh}
  .fallback svg{width:min(84vw,520px);opacity:.35}
}
.fallback .bp{stroke:var(--t-400);fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.fallback .bp2{stroke:rgba(233,240,237,.22)}
.no-gl .stage{height:100svh}
.no-gl .rail,.no-gl .caps,.no-gl .hud,.no-gl .scroll-hint{display:none}

/* =====================================================================
   CONTENT SECTIONS
   ===================================================================== */
.sec-head{max-width:66ch;margin-bottom:clamp(44px,6vw,76px)}
.sec-head .h2{margin-top:22px}
.sec-head .lede{margin-top:20px}

/* marquee-ish proof strip */
.strip{border-block:1px solid var(--hair);background:linear-gradient(180deg,var(--ink-1),var(--ink))}
.strip .row{display:grid;grid-template-columns:repeat(4,1fr)}
.strip .cell{padding:clamp(26px,3.4vw,42px) clamp(18px,2.4vw,30px);border-right:1px solid var(--hair)}
.strip .cell:last-child{border-right:0}
.strip .k{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:200;letter-spacing:-.045em;line-height:1}
.strip .k span{color:var(--t-300)}
.strip .v{margin-top:11px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-3);line-height:1.5}

/* capability cards */
.caps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden}
.card{
  background:var(--ink-1);padding:clamp(28px,3vw,40px);position:relative;
  transition:background .45s var(--ease);min-height:100%;
}
.card::after{
  content:"";position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .45s var(--ease);
  background:radial-gradient(80% 60% at 22% 0%,rgba(0,196,167,.14),transparent 72%);
}
.card:hover{background:var(--ink-2)}
.card:hover::after{opacity:1}
.card .ic{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  border:1px solid rgba(18,217,184,.24);background:rgba(0,196,167,.08);color:var(--t-300);
  margin-bottom:22px;position:relative;
}
.card .ic svg{width:21px;height:21px}
.card h3{font-size:1.18rem;font-weight:500;letter-spacing:-.025em;position:relative}
.card p{margin-top:11px;color:var(--fg-3);font-size:.93rem;line-height:1.62;position:relative}
.card .idx{
  position:absolute;top:clamp(28px,3vw,40px);right:clamp(28px,3vw,40px);
  font-family:var(--font-mono);font-size:.66rem;color:var(--fg-4);letter-spacing:.1em;
}

/* the two-discipline split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2vw,26px)}
.disc{
  border:1px solid var(--hair);border-radius:var(--r-lg);padding:clamp(28px,3.4vw,44px);
  background:linear-gradient(168deg,var(--ink-2),var(--ink-1) 62%);position:relative;overflow:hidden;
}
.disc::before{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(233,240,237,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(233,240,237,.045) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask:radial-gradient(80% 70% at 84% 6%,#000,transparent 74%);
  mask:radial-gradient(80% 70% at 84% 6%,#000,transparent 74%);
}
.disc--warm::before{-webkit-mask:radial-gradient(80% 70% at 16% 6%,#000,transparent 74%);mask:radial-gradient(80% 70% at 16% 6%,#000,transparent 74%)}
.disc h3{font-size:clamp(1.5rem,2.5vw,2.05rem);margin-top:20px;font-weight:250}
.disc p{margin-top:14px;color:var(--fg-2);font-size:.98rem;position:relative}
.disc ul{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:0;position:relative}
.disc li{
  display:flex;gap:13px;align-items:baseline;font-size:.92rem;color:var(--fg-2);
  padding:13px 0;border-bottom:1px solid var(--hair);
}
.disc li:last-child{border-bottom:0}
.disc li b{font-family:var(--font-mono);font-size:.66rem;font-weight:500;color:var(--t-300);
  letter-spacing:.1em;flex:0 0 auto;width:26px}
.disc--warm li b{color:var(--w-400)}
.disc--warm .eyebrow{color:var(--w-400)}

/* process steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);
  border-block:1px solid var(--hair)}
.step{background:var(--ink);padding:clamp(26px,3vw,40px) clamp(20px,2.4vw,32px);position:relative}
.step .n{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;color:var(--t-300);
  display:flex;align-items:center;gap:10px;margin-bottom:20px;
}
.step .n::after{content:"";height:1px;flex:1;background:var(--hair)}
.step h4{font-size:1.14rem;font-weight:500;letter-spacing:-.025em}
.step p{margin-top:10px;color:var(--fg-3);font-size:.91rem;line-height:1.6}

/* spec sheet */
.spec{
  border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;background:var(--ink-1);
}
.spec-row{display:grid;grid-template-columns:minmax(150px,.42fr) 1fr;gap:clamp(16px,3vw,40px);
  padding:clamp(20px,2.4vw,28px) clamp(22px,3vw,36px);border-bottom:1px solid var(--hair);align-items:baseline}
.spec-row:last-child{border-bottom:0}
.spec-row dt{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-4)}
.spec-row dd{font-size:.98rem;color:var(--fg-2)}
.spec-row dd b{color:var(--fg);font-weight:600}

/* parent-company band */
.parent{
  border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;
  display:grid;grid-template-columns:1.25fr .95fr;align-items:stretch;
  background:linear-gradient(150deg,var(--ink-2),var(--ink-1));
}
.parent-copy{padding:clamp(32px,4.4vw,60px)}
.parent-copy h2{margin-top:20px;font-size:clamp(1.75rem,3.3vw,2.7rem)}
.parent-copy p{margin-top:18px;color:var(--fg-2);max-width:46ch;font-size:1rem}
.parent-aside{
  border-left:1px solid var(--hair);padding:clamp(32px,4.4vw,60px);
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  background:radial-gradient(90% 70% at 100% 0%,rgba(0,120,103,.18),transparent 70%);
}
.pill-row{display:flex;flex-direction:column;gap:0}
.pill-row .p{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid var(--hair);font-size:.95rem;color:var(--fg-2)}
.pill-row .p:last-child{border-bottom:0}
.pill-row .p svg{width:17px;height:17px;color:var(--t-300);flex:0 0 auto}

/* CTA + form */
.cta{
  border:1px solid var(--hair);border-radius:var(--r-lg);padding:clamp(32px,5vw,72px);
  background:
    radial-gradient(90% 130% at 8% 0%,rgba(0,120,103,.24),transparent 62%),
    radial-gradient(70% 110% at 100% 100%,rgba(255,184,119,.09),transparent 64%),
    var(--ink-1);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,72px);align-items:start;
  position:relative;overflow:hidden;
}
.cta h2{margin-top:20px}
.cta .lede{margin-top:20px;max-width:40ch}
.form{display:flex;flex-direction:column;gap:14px}
.f{display:flex;flex-direction:column;gap:8px}
.f label{font-family:var(--font-mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-4)}
.f input,.f select,.f textarea{
  background:rgba(7,10,10,.66);border:1px solid var(--hair-2);border-radius:12px;
  padding:14px 15px;font-size:.95rem;transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
  width:100%;appearance:none;font-family:inherit;
}
.f textarea{resize:vertical;min-height:92px}
.f select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2312D9B8' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;cursor:pointer;
}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;border-color:var(--t-400);box-shadow:0 0 0 3px rgba(0,196,167,.14)
}
.f input::placeholder,.f textarea::placeholder{color:var(--fg-4)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .btn{width:100%;justify-content:center;margin-top:6px}
.form-note{font-size:.78rem;color:var(--fg-4);text-align:center;margin-top:2px}
.form-done{text-align:center;padding:34px 8px}
.form-done .tick{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;
  border:1px solid rgba(18,217,184,.4);background:rgba(0,196,167,.1);color:var(--t-300)}
.form-done h4{font-size:1.35rem;font-weight:300;letter-spacing:-.03em}
.form-done p{margin-top:10px;color:var(--fg-3);font-size:.93rem}

/* footer */
footer{border-top:1px solid var(--hair);background:var(--ink-1);padding:clamp(50px,6vw,78px) 0 30px}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(28px,4vw,56px);margin-bottom:46px}
.foot-brand p{color:var(--fg-3);font-size:.92rem;margin-top:18px;max-width:36ch}
.foot-col h5{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-4);margin-bottom:16px}
.foot-col a,.foot-col span{display:block;color:var(--fg-3);font-size:.92rem;padding:6px 0;transition:color .3s var(--ease),transform .3s var(--ease)}
.foot-col a:hover{color:var(--t-300);transform:translateX(3px)}
.foot-bot{border-top:1px solid var(--hair);padding-top:24px;display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-size:.82rem;color:var(--fg-4)}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1080px){
  .caps-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .parent{grid-template-columns:1fr}
  .parent-aside{border-left:0;border-top:1px solid var(--hair)}
  .cta{grid-template-columns:1fr}
}
@media (max-width:900px){
  .nav-links{display:none}
  .burger{display:flex}
  .split{grid-template-columns:1fr}
  .strip .row{grid-template-columns:1fr 1fr}
  .strip .cell:nth-child(2n){border-right:0}
  .strip .cell:nth-child(-n+2){border-bottom:1px solid var(--hair)}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  .rail{display:none}
}
@media (max-width:760px){
  .stage{height:460vh}
  .caps-grid{grid-template-columns:1fr}
  .caps{bottom:78px}
  .cap p{display:none}
  .f-row{grid-template-columns:1fr}
  .hero-copy .inner{max-width:100%}
  .scroll-hint{bottom:16px}
}
@media (max-width:480px){
  .strip .row{grid-template-columns:1fr}
  .strip .cell{border-right:0;border-bottom:1px solid var(--hair)}
  .steps{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .stage{height:100svh}
  .rv{opacity:1;transform:none}
}

/* the HUD gets crowded on a phone: shrink it and drop the optional readouts */
@media (max-width:760px){
  .tag{font-size:.54rem;padding:4px 8px;letter-spacing:.07em;border-radius:4px}
  .tag--opt{display:none}
}

/* =====================================================================
   MOBILE TOUCH TARGETS
   Apple asks for 44px, Android for 48dp. Several links were landing at
   33-36px, which is a real miss-tap risk on a phone.
   ===================================================================== */
@media (max-width:900px){
  .burger{min-width:44px;min-height:44px;justify-content:center;align-items:center;padding:10px;margin-right:-8px}
  .burger span{width:24px}
  .brand{padding-block:5px}
  .foot-col a{padding:11px 0}
  .foot-col span{padding:11px 0}
  .drawer a{padding:18px 0}
  .nav-in{padding-block:12px}
}
/* the pointer-parallax hint is meaningless on touch, and the scroll cue
   should not sit under a thumb */
@media (hover:none){
  .scroll-hint{bottom:max(14px,env(safe-area-inset-bottom))}
}

/* the full badge string wraps to two ragged lines on a phone */
@media (max-width:560px){
  .hb-long{display:none}
  .hero-badge{font-size:.6rem;letter-spacing:.12em;padding:7px 14px 7px 10px}
}

/* iOS Safari auto-zooms the whole page when a focused input is under 16px.
   The visual difference is imperceptible; the zoom is not. */
@media (max-width:900px){
  .f input,.f select,.f textarea{font-size:16px}
}

/* =====================================================================
   NARROW PHONES (320px class)
   A `1fr` grid track has min-width:auto, so a nowrap button wider than the
   viewport silently pushes the track past its container and clips content.
   ===================================================================== */
@media (max-width:1080px){
  .caps-grid,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .parent,.cta{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .split{grid-template-columns:minmax(0,1fr)}
  .strip .row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .caps-grid{grid-template-columns:minmax(0,1fr)}
  .f-row{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  .strip .row,.steps,.foot-top{grid-template-columns:minmax(0,1fr)}
}
/* below this a long label genuinely cannot sit on one line */
@media (max-width:430px){
  .btn{white-space:normal;text-align:center;padding-inline:20px}
  .parent-copy .btn,.hero-cta .btn{width:100%;justify-content:center}
}

/* hand-placed line breaks in section heads are tuned for desktop measure;
   on a narrow phone they strand single words. The hero keeps its break. */
@media (max-width:560px){
  .sec-head .h2 br,.parent-copy h2 br{display:none}
}

/* =====================================================================
   LANDSCAPE PHONES / SHORT VIEWPORTS
   ===================================================================== */

/* A closed drawer must be completely inert. Centring its links overflows a
   390px-tall viewport, and the spill escapes the translated box, which put a
   full-width "Request access" pill across the header in landscape. */
.drawer{visibility:hidden;pointer-events:none;overflow-y:auto;overscroll-behavior:contain}
.drawer.open{visibility:visible;pointer-events:auto}

@media (max-height:560px){
  .drawer{justify-content:flex-start;padding-top:76px;padding-bottom:28px;gap:0}
  .drawer a{font-size:1.35rem;padding:13px 0}
  .drawer .btn{margin-top:18px}

  /* the hero has to fit between the nav and the fold */
  .hero-copy{padding-top:56px}
  .hero-copy .display{font-size:clamp(1.9rem,7.2vh,3rem)}
  .hero-copy .lede{margin-top:12px;font-size:.9rem;max-width:46ch}
  .hero-cta{margin-top:16px;gap:10px}
  .hero-cta .btn{padding:11px 20px;font-size:.86rem}
  .hero-badge{margin-bottom:12px;font-size:.58rem;padding:5px 12px 5px 9px}
  .scroll-hint{display:none}

  .caps{bottom:16px}
  .cap h3{font-size:1.25rem}
  .cap p{display:none}
  .rail{display:none}
}

/* =====================================================================
   THEKEYAAR CROSS-LINK
   The sibling product. It gets ThekeYaar's own green rather than the
   Architake teal, because the two sit next to each other in the nav and
   have to be told apart at a glance.
   ===================================================================== */
:root{ --ty:#14CE90; --ty-600:#008264; }

.ty-dot{
  width:6px;height:6px;border-radius:50%;background:var(--ty);flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(20,206,144,.16);
}
.nav-links a.l-ty{display:inline-flex;align-items:center;gap:7px}
.nav-links a.l-ty::after{background:var(--ty)}
.nav-links a.l-ty:hover{color:var(--ty)}
.drawer a .ty-dot{width:9px;height:9px;display:inline-block;margin-right:10px;vertical-align:middle}

/* The parent aside is a narrow column, so the lockup and the arrow share a
   row and the sentence runs full width underneath. Side by side it squeezed
   the text into an eight-line ribbon. */
.sib{
  display:grid;grid-template-columns:1fr auto;gap:13px 14px;align-items:center;
  margin-top:26px;padding:18px 20px;
  border:1px solid rgba(20,206,144,.24);border-radius:16px;
  background:linear-gradient(150deg,rgba(20,206,144,.09),rgba(20,206,144,.03));
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease);
}
.sib:hover{border-color:rgba(20,206,144,.5);background:linear-gradient(150deg,rgba(20,206,144,.14),rgba(20,206,144,.05));transform:translateY(-2px)}
.sib-lock{display:flex;align-items:center;gap:9px;grid-column:1;grid-row:1}
.sib-lock img:first-child{height:32px;width:auto}
.sib-lock img:last-child{height:15px;width:auto;position:relative;top:1px}
.sib i{grid-column:1/-1;grid-row:2;font-style:normal;font-size:.9rem;line-height:1.6;color:var(--fg-2)}
.sib i b{color:var(--ty);font-weight:600}
.sib-go{
  width:28px;height:28px;border-radius:50%;grid-column:2;grid-row:1;display:grid;place-items:center;
  background:rgba(20,206,144,.14);color:var(--ty);transition:background .35s var(--ease)
}
.sib:hover .sib-go{background:var(--ty);color:#04211A}
.sib-go svg{width:13px;height:13px}