/* DesignPods pre-launch · one sheet, whole site */
:root{
  --charcoal:#2C2B28;
  --charcoal-2:#3A3833;
  --grey:#57554F;
  --cream:#FFFBEF;
  --paper:#F6F2E9;
  --gold:#CE9B62;
  --noise:#57554F;
  --gold-deep:#8F6430;
  --line:#E4DECF;
  --line-dark:#4A4842;
  --beat:96px;
  --beat-m:64px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper);
  color:var(--charcoal);
  font-family:'Inter',system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
.wrap{width:100%;max-width:1140px;margin:0 auto;padding:0 24px}
h1,h2{font-family:'Archivo',sans-serif;font-weight:750;font-stretch:110%;letter-spacing:-.015em;line-height:1.04}
.mono{font-family:'Roboto Mono',monospace}

/* header */
.hd{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:background-color .5s ease,border-color .5s ease}
.hd .l-dark{display:none}
body.quiet .hd{background:color-mix(in srgb,var(--charcoal) 90%,transparent);border-color:var(--line-dark)}
body.quiet .hd .l-light{display:none}
body.quiet .hd .l-dark{display:block}
body.quiet .hd .btn{--btn-bg:var(--cream);--btn-ink:var(--charcoal)}
body.quiet .hd .btn:hover{--btn-bg:var(--gold);--btn-ink:var(--charcoal)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.lockup{display:flex;align-items:center;gap:11px;text-decoration:none;min-height:44px}
.lockup:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:8px}
.lockup img{display:block;height:32px;width:auto}
.ft .lockup img{height:28px}
.lockup svg{display:block}
.lockup .wm{font-family:'Roboto Mono',monospace;font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--charcoal)}
.lockup .wm b{font-weight:700}
.lockup .wm span{font-weight:300;color:var(--gold)}

/* buttons: every button carries its action; captions live beside labels */
.btn{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:52px;padding:12px 26px;border-radius:999px;border:0;cursor:pointer;
  background:var(--btn-bg,var(--charcoal));color:var(--btn-ink,var(--cream));
  text-decoration:none;text-align:center;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:16px;line-height:1.2;
  transition:background-color .12s ease,color .12s ease,transform .12s ease;
}
.btn small{display:block;font-family:'Inter',sans-serif;font-weight:400;font-size:12.5px;color:inherit;opacity:.72;margin-top:2px}
.btn:hover{--btn-bg:var(--charcoal-2);transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.btn.on-dark{--btn-bg:var(--cream);--btn-ink:var(--charcoal)}
.btn.on-dark:hover{--btn-bg:var(--gold);--btn-ink:var(--charcoal)}
.btn.ghost{--btn-bg:transparent;--btn-ink:var(--charcoal);border:1.5px solid var(--charcoal)}
.btn.ghost:hover{--btn-bg:var(--charcoal);--btn-ink:var(--cream)}
.btn.ghost[aria-pressed="true"]{--btn-bg:var(--charcoal);--btn-ink:var(--cream)}
.hd .btn{min-height:44px;padding:10px 20px;font-size:14.5px}
.hd .btn small{display:none}

/* hero: the loud office */
.hero{position:relative;min-height:92svh;display:flex;align-items:center;overflow:hidden;background:var(--paper)}
.hero .wrap{position:relative;z-index:2;text-align:center;padding-top:64px;padding-bottom:96px}
.hero h1{font-size:clamp(46px,8.5vw,112px);max-width:12ch;margin:0 auto}
.hero .lede{font-size:clamp(17px,2vw,21px);color:var(--grey);max-width:44ch;margin:22px auto 0}
.hero .act{margin-top:36px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.btn.ghost{background:transparent;color:var(--charcoal);border:1.5px solid var(--charcoal)}
.btn.ghost:hover{background:var(--charcoal);color:var(--cream);transform:translateY(-1px)}
.btn.ghost:hover small{color:color-mix(in srgb,var(--cream) 78%,var(--charcoal))}
.btn.ghost[aria-pressed="true"]{background:var(--charcoal);color:var(--cream)}
.hero-video{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-video video{width:100%;height:100%;object-fit:cover;filter:saturate(.7)}
.hero-video::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--paper) 82%,transparent)}
.noise{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .6s ease}
.noise span{
  position:absolute;white-space:nowrap;
  font-family:'Roboto Mono',monospace;font-size:clamp(16px,1.9vw,24px);font-weight:400;
  color:var(--noise);
  opacity:calc(1 - min(1, var(--hush,0) * var(--k,1)));
  filter:blur(calc(min(1, var(--hush,0) * var(--k,1)) * 9px));
  transform:translate(calc(var(--dx,0px) * var(--hush,0)), calc(var(--hush,0) * 18px));
}
@media (prefers-reduced-motion:no-preference){
  html.js .noise span{animation:punchin .45s ease backwards,jitter 6s ease-in-out infinite;animation-delay:calc(var(--n,0)*110ms + 250ms),0s}
  @keyframes punchin{from{opacity:0;filter:blur(6px);transform:scale(1.25)}}
  .noise span{animation:jitter 6s ease-in-out infinite}
  .noise span:nth-child(2n){animation-duration:7.5s;animation-delay:-2s}
  .noise span:nth-child(3n){animation-duration:5s;animation-delay:-1s}
  @keyframes jitter{0%,100%{transform:translate(0,0)}25%{transform:translate(2px,-2px)}50%{transform:translate(-2px,1px)}75%{transform:translate(1px,2px)}}
}
/* the words hush as you step inside */
.hushed .noise{opacity:0}

/* inside: the quiet */
.inside{background:var(--charcoal);color:var(--cream)}
.inside .wrap{padding-top:var(--beat);padding-bottom:var(--beat);display:flex;align-items:center;gap:64px}
.inside .quiet-copy{flex:1;min-width:0}
.pod-plan{display:none;flex:0 0 340px;height:340px}
@media (min-width:1020px){.pod-plan{display:block}}
@media (prefers-reduced-motion:no-preference){
  html.js .pod-plan{opacity:0;transform:translateY(18px) scale(.96);transition:opacity .9s ease,transform .9s ease}
  html.js .alive .pod-plan{opacity:1;transform:none}
  .pod-plan .dot,.from svg circle{transform-origin:center}
  .pod-plan .glow{transform-origin:center;filter:blur(3px)}
  .alive .pod-plan .dot,.alive .from svg circle{animation:occupied 3.6s ease-in-out .8s infinite}
  .alive .pod-plan .glow{animation:glowbreathe 3.6s ease-in-out .8s infinite}
  @keyframes occupied{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
  @keyframes glowbreathe{0%,100%{opacity:.18;transform:scale(1)}50%{opacity:.38;transform:scale(1.35)}}
}
.inside h2{font-size:clamp(34px,4.6vw,58px);max-width:16ch}
.inside .quiet-lines{margin-top:44px;max-width:62ch;display:flex;flex-direction:column;gap:26px}
.inside .quiet-lines p{font-size:clamp(17px,1.9vw,20px);line-height:1.7;color:#DDD8CB}
.inside .quiet-lines strong{color:var(--cream);font-weight:600}
.inside .from{margin-top:44px;display:flex;align-items:center;gap:14px;color:#A6A29B;font-size:15px}
.inside .from a{color:var(--cream);text-decoration:underline;text-underline-offset:3px}
.inside .from a:hover{color:var(--gold)}
.inside .from a:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}

/* register */
.register{background:var(--paper)}
.register .wrap{padding-top:var(--beat);padding-bottom:var(--beat);display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.register h2{font-size:clamp(34px,4.6vw,58px)}
.register .pitch{margin-top:18px;color:var(--grey);font-size:clamp(17px,1.9vw,19px);max-width:40ch}
.form{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:32px}
.form label{display:block;font-weight:600;font-size:15px;margin-bottom:8px}
.form .field{margin-bottom:22px}
.form input{
  width:100%;min-height:52px;padding:12px 16px;font-size:16px;font-family:'Inter',sans-serif;
  color:var(--charcoal);background:#fff;border:1.5px solid #C9C3B4;border-radius:10px;
  -webkit-appearance:none;appearance:none;
}
.form input:focus-visible{outline:3px solid var(--gold);outline-offset:1px;border-color:var(--charcoal)}
.form input::placeholder{color:#807C73}
.form .btn{width:100%}
.form .consent{margin-top:16px;font-size:13.5px;color:var(--grey);line-height:1.55}
.form .consent a{color:var(--charcoal);text-decoration:underline;text-underline-offset:2px}
.form .consent a:hover{color:var(--gold-deep)}
.form .consent a:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:2px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* footer */
.ft{background:var(--charcoal);color:#A6A29B}
.ft .wrap{padding:44px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ft .lockup .wm{color:var(--cream)}
.ft nav{display:flex;gap:26px;flex-wrap:wrap}
.ft a{color:#CFCABD;text-decoration:none;font-size:15px;min-height:44px;display:inline-flex;align-items:center}
.ft a:hover{color:var(--gold)}
.ft a:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}
.ft .fine{font-size:13.5px;width:100%;border-top:1px solid var(--line-dark);padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* the quiet closes in */
.veil{position:fixed;inset:0;pointer-events:none;z-index:30;opacity:0;
  background:radial-gradient(ellipse 85% 75% at 50% 45%, transparent 38%, rgba(44,43,40,.94) 112%)}
@media (prefers-reduced-motion:no-preference){
  .veil{opacity:var(--veil,0)}
  html.js .hero h1{opacity:calc(1 - min(1,var(--hush,0)*1.15));filter:blur(calc(min(1,var(--hush,0)*1.15)*10px));transform:scale(calc(1 - var(--hush,0)*.04))}
  html.js .hero .lede,html.js .hero .act{opacity:calc(1 - min(1,var(--hush,0)*.9))}
}

/* mobile dock */
.dock{display:none}

/* inner pages (thanks, privacy) */
.inner{background:var(--paper);min-height:60svh}
.inner .wrap{padding-top:72px;padding-bottom:var(--beat);max-width:760px}
.inner h1{font-size:clamp(38px,6vw,64px)}
.inner p{margin-top:20px;color:var(--grey);max-width:58ch}
.inner p strong{color:var(--charcoal)}
.inner h2{font-size:24px;margin-top:40px}
.inner ul{margin:14px 0 0 20px;color:var(--grey)}
.inner li{margin-bottom:8px}
.inner .act{margin-top:36px}
.inner a:not(.btn){color:var(--charcoal)}
.inner a:not(.btn):hover{color:var(--gold-deep)}
.inner a:not(.btn):focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:2px}

/* mobile */
@media (max-width:760px){
  :root{--beat:64px}
  .hd .wrap{height:64px}
  .hero{min-height:88svh}
  .hero .wrap{padding-bottom:72px}
  .hero h1{font-size:clamp(42px,12vw,64px)}
  .noise span{font-size:16px}
  .noise span.n-hide-m{display:none}
  .noise span.n-low{left:auto;right:12%}
  .register .wrap{grid-template-columns:1fr;gap:36px}
  .form{padding:24px}
  .ft .wrap{padding:36px 24px 96px}
  .dock{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;
    padding:10px max(16px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-right));
    background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    transform:translateY(110%);transition:transform .25s ease;
  }
  .dock.show{transform:translateY(0)}
  .dock .btn{width:100%}
  @media (prefers-reduced-motion:reduce){.dock{transition:none}}
}

/* prose links carry a real tap area (44px) without shifting the text line */
.form .consent a,.inside .from a,.inner p a{display:inline-block;padding:12px 2px;margin:-12px -2px}
@media (max-width:760px){
  .lockup img{height:26px}
  .hd .btn{padding:10px 16px;font-size:14px}
}