:root{color-scheme:dark;--bg:#050b13;--text:#f4f7fb;--muted:#a5b7c7;--ice:#89d1ff;--border:#699ebb;font-family:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text)}
.hero{position:relative;isolation:isolate;width:100%;min-height:100vh;min-height:100dvh;aspect-ratio:auto;margin:0;overflow:hidden}
.background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2;animation:none}
@keyframes background-drift{from{transform:scale(1.025) translateY(-.3%)}to{transform:scale(1.075) translateY(.3%)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,#6ccaff12,transparent 48%);animation:light-breathe 7s ease-in-out infinite alternate}
@keyframes light-breathe{from{opacity:.2}to{opacity:1}}
.brand{position:absolute;top:4%;left:20%;width:60%;text-align:center}
.wordmark{margin:0;font-size:clamp(48px,5.3vw,126px);font-weight:900;line-height:1;letter-spacing:.025em;transform:scaleX(1.22);background:linear-gradient(#fff 15%,#d6dfe7 48%,#738899 78%,#dae2e9);background-clip:text;-webkit-background-clip:text;color:transparent}
.services{margin:1em 0 0;font-size:clamp(9px,.8vw,19px);text-transform:uppercase;letter-spacing:.25em;line-height:1.8}
.services span{margin:0 .8em}
.motto,.process{position:absolute;margin:0;text-transform:uppercase;font-size:clamp(10px,.82vw,20px);letter-spacing:.27em;color:var(--muted)}
.motto{left:4%;top:13%;line-height:1.15}
.process{right:3%;top:7%;padding:0;list-style:none;line-height:1.9}
.motto::after,.process::after,.annotation::after{content:"";display:block;width:30px;height:1px;background:var(--text);margin-top:20px}
.annotation{position:absolute;top:61%;margin:0;letter-spacing:.25em;text-transform:uppercase;font-size:clamp(10px,.9vw,21px);line-height:1.5}
.sketch{left:30.5%}.product{left:63.5%}
.headline{position:absolute;top:76%;left:20%;width:60%;text-align:center}
h1{margin:0;font-size:clamp(30px,3.55vw,85px);font-weight:900;text-transform:uppercase;line-height:.98;letter-spacing:-.025em}
h1 span{color:var(--ice)}
.tagline{display:flex;align-items:center;justify-content:center;gap:20px;margin:1.4em 0 0;font-size:clamp(9px,.8vw,19px);text-transform:uppercase;letter-spacing:.45em}
.tagline::before,.tagline::after{content:"";height:1px;width:70px;background:var(--ice)}
.contact{position:absolute;right:3%;bottom:3%}
.email{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:48px;padding:13px 23px;border:1px solid var(--border);border-radius:999px;background:#06121ed9;color:var(--text);font-size:clamp(14px,1.05vw,24px);text-decoration:none;transition:transform .25s,box-shadow .25s,background .25s}
.email svg{width:22px;height:22px;transition:transform .25s}
.email:hover{transform:translateY(-3px);box-shadow:0 0 28px #89d1ff40;background:#17374f}.email:hover svg{transform:translateX(4px)}
.email:focus-visible{outline:3px solid white;outline-offset:5px}
.js .reveal{opacity:0;translate:0 14px;transition:opacity .8s,translate .8s}.js .reveal.visible{opacity:1;translate:0 0}
@media(min-width:761px){.hero{height:100vh;height:100dvh}.headline{top:auto;bottom:7%}h1{font-size:clamp(26px,min(3.55vw,6.4vh),85px)}.wordmark{font-size:clamp(40px,min(5.3vw,10vh),126px)}}
@media(max-width:760px){
  .hero{aspect-ratio:auto;min-height:100svh;min-height:100dvh;display:grid;grid-template-rows:auto minmax(160px,1fr) auto auto;overflow:hidden;padding:max(28px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom));gap:20px}
  .background{inset:0;height:100%;width:100%;object-fit:cover;object-position:50% 50%;mask-image:none}
  .hero::after{background:linear-gradient(#02081199,transparent 28%,transparent 52%,#020811d9 86%);animation:none}
  .brand,.headline{text-shadow:0 2px 16px #000}
  .brand{position:relative;top:auto;left:auto;width:100%;grid-row:1}
  .wordmark{font-size:clamp(46px,12vw,78px);transform:none}
  .services{font-size:9px;letter-spacing:.13em;max-width:350px;margin:12px auto 0}.services span{margin:0 .35em}
  .motto,.process,.annotation{display:none}
  .headline{position:relative;top:auto;left:auto;width:100%;grid-row:3;align-self:end}
  h1{font-size:clamp(32px,8vw,56px);line-height:1.02}
  .tagline{font-size:9px;letter-spacing:.22em;gap:10px;line-height:1.7}.tagline::before,.tagline::after{width:22px;flex-shrink:0}
  .contact{position:relative;right:auto;bottom:auto;grid-row:4;justify-self:center;padding-bottom:env(safe-area-inset-bottom)}
  .email{min-height:54px;font-size:17px;padding:15px 28px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.js .reveal{opacity:1;translate:none}.background{will-change:auto;transform:none}}