:root { color-scheme: dark; --ink:#f5f5f0; --muted:#8b8b86; --line:rgba(255,255,255,.18); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:#000; }
body { min-height:100vh; margin:0; overflow-x:hidden; background:#000; color:var(--ink); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
#field { position:fixed; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; opacity:.96; }
header,main,footer { position:relative; z-index:1; width:min(calc(100% - 64px),1560px); margin-inline:auto; }
header { height:104px; display:flex; align-items:center; justify-content:space-between; }
.logo { display:block; width:300px; flex:0 0 auto; line-height:0; }
.logo img {
  display:block;
  width:100%;
  height:auto;
}
.contact { font-size:13px; transition:opacity .2s ease; }
.contact:hover { opacity:.55; }
.contact:focus-visible,.motionbloom:focus-visible,.product-live:focus-visible { outline:1px solid rgba(255,255,255,.55); outline-offset:7px; }
.hero { min-height:calc(100svh - 104px); padding:42px 0; display:flex; flex-direction:column; }
h1 { margin:auto 0; max-width:1320px; font-size:clamp(66px,9.2vw,150px); font-weight:400; line-height:.89; letter-spacing:-.072em; }
.hero-line { display:block; overflow:hidden; padding:.08em 0 .12em; margin:-.08em 0 -.12em; }
.hero-line>span { display:block; }
.intro-row { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:end; }
.intro-row>p { margin:0; max-width:520px; color:var(--muted); font-size:18px; line-height:1.4; letter-spacing:-.02em; }
.motionbloom { position:relative; min-height:100px; padding:18px 0; display:grid; grid-template-columns:1fr; align-items:end; isolation:isolate; }
.motionbloom::before { content:""; position:absolute; inset:-12px -18px; z-index:-1; border-radius:16px; background:radial-gradient(circle at 16% 55%,rgba(255,255,255,.075),rgba(255,255,255,0) 62%); opacity:0; transform:scale(.97); transition:opacity .45s ease,transform .55s cubic-bezier(.16,1,.3,1); }
.motionbloom:hover::before,.motionbloom:focus-visible::before { opacity:1; transform:scale(1); }
.motionbloom span { grid-column:1/-1; align-self:start; color:var(--muted); font-size:10px; letter-spacing:.13em; text-transform:uppercase; }
.motionbloom strong { font-size:30px; font-weight:400; letter-spacing:-.04em; transition:transform .55s cubic-bezier(.16,1,.3,1); }
.motionbloom:hover strong,.motionbloom:focus-visible strong { transform:translateX(8px); }
.products { padding:130px 0 60px; }
.products-heading { width:100%; height:auto; margin:0 0 64px; padding:0; display:grid; grid-template-columns:1fr 2fr; align-items:start; border:0; }
.products-heading p { margin:9px 0 0; color:var(--muted); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.products-heading h2 { margin:0; font-size:clamp(48px,6vw,92px); font-weight:400; line-height:.95; letter-spacing:-.06em; }
.product { min-height:150px; margin:0 -18px; padding:20px 18px; display:grid; grid-template-columns:1fr 1fr auto; gap:30px; align-items:center; border-radius:16px; transition:background .45s ease; }
.product+.product { margin-top:8px; }
.product-live:hover,.product-live:focus-visible { background:radial-gradient(circle at 16% 50%,rgba(255,255,255,.07),rgba(255,255,255,0) 60%); }
.product div { display:flex; align-items:center; gap:14px; }
.product h3 { margin:0; font-size:clamp(30px,4vw,58px); font-weight:400; letter-spacing:-.055em; transition:transform .55s cubic-bezier(.16,1,.3,1); }
.product-live:hover h3,.product-live:focus-visible h3 { transform:translateX(8px); }
.product em { padding:5px 7px 4px; background:#e00019; color:#fff; font-size:9px; font-style:normal; letter-spacing:.12em; text-transform:uppercase; }
.product p { margin:0; max-width:440px; color:var(--muted); font-size:14px; line-height:1.45; }
.product b { min-width:90px; text-align:right; color:var(--muted); font-size:10px; font-weight:400; letter-spacing:.12em; text-transform:uppercase; }
footer { height:110px; display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:10px; letter-spacing:.12em; }
@keyframes fade-in { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:none; } }
@keyframes line-in { from { opacity:0; transform:translateY(112%); } to { opacity:1; transform:none; } }
@keyframes rise-in { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
.motion-ready .logo { animation:fade-in .85s .04s cubic-bezier(.16,1,.3,1) both; }
.motion-ready .contact { animation:fade-in .85s .12s cubic-bezier(.16,1,.3,1) both; }
.motion-ready .hero-line>span { animation:line-in 1s .1s cubic-bezier(.16,1,.3,1) both; }
.motion-ready .hero-line+ .hero-line>span { animation-delay:.22s; }
.motion-ready .intro-row { animation:rise-in .9s .46s cubic-bezier(.16,1,.3,1) both; }
.motion-ready [data-reveal] { opacity:0; transform:translateY(28px); transition:opacity .8s ease,transform .95s cubic-bezier(.16,1,.3,1); }
.motion-ready [data-reveal].is-visible { opacity:1; transform:none; }
.motion-ready .product[data-reveal] { transition-delay:80ms; }
.motion-ready .product+.product[data-reveal] { transition-delay:150ms; }
@media (max-width:760px) {
  header,main,footer { width:calc(100% - 28px); }
  header { height:76px; }
  .logo { width:min(230px,64vw); }
  .hero { min-height:calc(100svh - 76px); padding:26px 0 24px; }
  h1 { font-size:clamp(56px,16.8vw,92px); }
  .intro-row { grid-template-columns:1fr; gap:36px; }
  .intro-row>p { font-size:16px; }
  .motionbloom { min-height:88px; }
  .products { padding-top:88px; }
  .products-heading { grid-template-columns:1fr; gap:28px; margin-bottom:42px; }
  .products-heading h2 { font-size:52px; }
  .product { min-height:180px; margin-inline:-10px; grid-template-columns:1fr auto; gap:16px; padding:24px 10px; }
  .product p { grid-column:1/-1; grid-row:2; }
  .product b { grid-column:2; grid-row:1; }
  footer { height:90px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .motion-ready .logo,.motion-ready .contact,.motion-ready .hero-line>span,.motion-ready .intro-row { animation:none; }
  .motion-ready [data-reveal] { opacity:1; transform:none; transition:none; }
  .motionbloom::before,.motionbloom strong,.product,.product h3 { transition:none; }
}