:root{
  --black:#0b0b0b;--graphite:#242424;
  --ivory:#ece6d8;--white:#fff;--muted:#a29d90;--brass:#c2a878;
  --line:rgba(236,230,216,.16);
  --pad:clamp(1rem,3vw,3rem);
  --font:"Archivo","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--black);color:var(--ivory);font-family:var(--font);line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit}
#terrain{opacity:.85;position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.shell{position:relative;z-index:1}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--ivory);color:var(--black);padding:.6rem 1rem;z-index:30}
.skip:focus{top:1rem}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

.nav,.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:.6rem var(--pad);border-bottom:1px solid var(--line);background:rgba(11,11,11,.65)}
.top-name{margin:0;text-decoration:none;font-stretch:125%;font-weight:700;letter-spacing:.28em;font-size:.85rem;color:var(--white)}

 .call-link{display:none;font-weight:600;text-decoration:none;color:var(--ivory);border:1px solid var(--line);padding:.35rem 1rem}
.direct{margin:0;font-size:.85rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.2rem 1rem}
.direct a{color:var(--ivory);text-decoration:none;border-bottom:1px solid var(--brass);white-space:nowrap}
.direct a:hover{color:var(--white)}
.form-note:empty{display:none}
.grid{display:grid;gap:2rem;padding:1.5rem var(--pad)}
.left{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;gap:clamp(.5rem,1.6vh,1.1rem);min-width:0}

.left::before{content:"";position:absolute;inset:-2.5rem -2rem;z-index:-1;background:radial-gradient(ellipse at 35% 50%,rgba(11,11,11,.82),rgba(11,11,11,.55) 55%,transparent 80%)}
.lede{margin:0;max-width:52ch;color:var(--muted);font-size:.9rem}
.about{margin:.2rem 0 0;max-width:46ch;color:var(--muted);font-size:clamp(.9rem,1.2vw,1rem)}
.headline{margin:0;font-weight:700;font-stretch:125%;font-size:clamp(2.2rem,min(4.2vw,8.5vh),4.6rem);line-height:.98;letter-spacing:-.025em;color:var(--white)}
.line{display:block;overflow:hidden;padding-bottom:.08em}
.line>span{display:block;animation:rise 1.1s var(--ease) both}
.line:nth-child(2)>span{animation-delay:.18s}
.descriptor{margin:.4rem 0 0;font-size:clamp(1rem,min(1.5vw,2.6vh),1.35rem);opacity:0;animation:fade 1s var(--ease) .75s forwards}
.where{margin:0;color:var(--brass);font-size:.92rem;opacity:0;animation:fade 1s var(--ease) .95s forwards}



/* 3D logo */
.stage{min-height:0;height:260px;perspective:1300px;display:flex;align-items:center;justify-content:center}
.tilt{height:100%;max-width:100%;aspect-ratio:965/730;transform-style:preserve-3d;transition:transform .25s var(--ease)}
.spin{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:spin 14s linear infinite;will-change:transform}
.spin img{position:absolute;inset:0;width:100%;height:100%;user-select:none;-webkit-user-drag:none}

/* form */
.panel{position:relative;display:grid;gap:clamp(.55rem,1.5vh,1rem);align-content:center;padding:clamp(.9rem,2.2vh,1.6rem) clamp(1rem,1.8vw,1.8rem);background:linear-gradient(160deg,rgba(30,30,30,.96),rgba(12,12,12,.97));border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tick{position:absolute;width:14px;height:14px;border:0 solid var(--brass)}
.tick.tl{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.tick.tr{top:-1px;right:-1px;border-top-width:2px;border-right-width:2px}
.tick.bl{bottom:-1px;left:-1px;border-bottom-width:2px;border-left-width:2px}
.tick.br{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}
.panel-title{margin:0;font-stretch:125%;font-size:1.05rem;font-weight:700;color:var(--white)}
.chips{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;padding:.3rem .75rem;border:1px solid var(--line);border-radius:999px;font-size:.85rem;color:var(--muted);transition:all .25s var(--ease)}
.chips label:hover span{border-color:var(--brass);color:var(--ivory)}
.chips input:checked+span{background:var(--ivory);color:var(--black);border-color:var(--ivory)}
.chips input:focus-visible+span{outline:2px solid var(--brass);outline-offset:3px}
.pair{display:grid;gap:clamp(.55rem,1.5vh,1rem)}

.field{position:relative;padding-top:.9rem}
.field::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.field:focus-within::after{transform:scaleX(1)}
.field input,.field textarea{display:block;width:100%;font:inherit;font-size:1rem;color:var(--white);background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:.35rem 0;outline:none;resize:none}
.field label{position:absolute;left:0;top:1.3rem;color:var(--muted);pointer-events:none;transform-origin:left;font-size:.95rem;transition:transform .3s var(--ease),color .3s}
.field input:focus+label,.field input:not(:placeholder-shown)+label,.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{transform:translateY(-1.25rem) scale(.78);color:var(--brass)}
.field.err input,.field.err textarea{border-bottom-color:#d9806a}
.field.err label{color:#d9806a}

.send{position:relative;overflow:hidden;min-height:2.8rem;border:1px solid var(--ivory);background:var(--ivory);color:var(--black);font:inherit;font-weight:700;letter-spacing:.04em;cursor:pointer}
.send::before{content:"";position:absolute;inset:0;background:var(--brass);transform:translateY(101%);transition:transform .45s var(--ease)}
.send:hover::before{transform:none}
.send span{position:relative}
.panel.sent .send{background:transparent;color:var(--ivory)}
.form-note{margin:0;font-size:.78rem;color:var(--muted)}

.foot{display:flex;justify-content:space-between;gap:1rem;padding:.5rem var(--pad) max(.5rem,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(11,11,11,.7)}
.foot p{margin:0;color:var(--muted);font-size:.75rem}

/* 404 */
.page{min-height:100svh;display:flex;flex-direction:column}
.page .hero{flex:1;display:flex;flex-direction:column;justify-content:center;padding:3rem var(--pad)}

@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes spin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}

@media (max-width:899px){.call-link{display:inline-block}}
@media (max-width:899px){
  .shell{overflow-x:clip}
  .left::before{inset:-1rem 0}
  .grid{gap:1.75rem;padding:1.75rem var(--pad) 2rem}
  .left{gap:.75rem}
  .headline{font-size:clamp(2.3rem,11.5vw,3.6rem)}
  .stage{order:-0;height:clamp(200px,52vw,300px)}
  .panel{padding:1.4rem 1.25rem}
  .chips span{padding:.55rem 1.1rem}
  .field input,.field textarea{font-size:1.0625rem}
  .send{min-height:3.25rem}
  .direct a{padding:.35rem 0}
}
@media (min-width:560px){.pair{grid-template-columns:1fr 1fr}}

/* Banner mode: fixed to one screen, never scrolls */
@media (min-width:900px){
  html,body{height:100%;overflow:hidden}
  .shell{height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
  .grid{grid-template-columns:1.2fr .75fr 1fr;align-items:center;gap:clamp(1rem,2.5vw,3rem);padding:clamp(.5rem,2vh,1.5rem) var(--pad);min-height:0}
  .stage{height:100%;max-height:60%}
}
@media (min-width:900px) and (max-height:800px){}
@media (min-width:900px) and (max-height:700px){.about,.lede{display:none}}
@media (min-width:900px) and (max-height:600px){.panel-title{display:none}}
@media (prefers-reduced-motion:reduce){
  .line>span,.descriptor,.where{animation:none;opacity:1;transform:none}
  .spin{animation-duration:30s}
  *{transition:none!important}
}