:root{
  --bg:#151515;
  --bg-2:#1c1c1b;
  --ink:#f2efe9;
  --muted:#a9a59d;
  --line:rgba(242,239,233,.14);
  /* CTA — monochrome warm white */
  --cta:#f2efe9;
  --cta-ink:#151515;
  --cta-hover:#dcd6cb;
  /* tech accent — mint, only for 'live system' elements */
  --tech:#5fd9a2;
  --tech-rgb:95,217,162;
  --sans:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.1,1);
  --gutter:clamp(16px,3vw,40px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--tech);outline-offset:3px;border-radius:6px}

/* ---------- Header ---------- */
.header{position:absolute;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px var(--gutter)}
.logo{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--ink)}
.logo span{color:var(--muted)}
.nav{display:flex;gap:28px;font-size:14px;color:var(--muted)}
.nav a{position:relative;transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}

.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:500;white-space:nowrap;position:relative;overflow:hidden;isolation:isolate;transition:transform .4s var(--ease)}
.btn--accent{background:var(--cta);color:var(--cta-ink)}
.btn--accent::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cta-hover);transform:translateY(101%);border-radius:inherit;transition:transform .5s var(--ease)}
.btn--accent:hover::before{transform:translateY(0)}
.btn--ghost{border:1px solid var(--line);color:var(--ink)}
.btn--ghost::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:translateY(101%);transition:transform .5s var(--ease)}
.btn--ghost:hover{color:var(--bg)}
.btn--ghost:hover::before{transform:translateY(0)}
.btn--sm{height:40px;padding:0 18px;font-size:14px}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}

/* ---------- Hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;background:var(--bg)}
.hero__media{position:absolute;inset:0;will-change:transform}
.hero__media picture,.hero__media img{display:block;width:100%;height:100%}
.hero__media img{object-fit:cover;object-position:50% 18%;transform:scale(1.08);opacity:0;filter:brightness(.7);transition:transform 2.2s var(--ease),opacity 1.4s ease,filter 2.2s var(--ease)}
.is-ready .hero__media img{transform:scale(1);opacity:1;filter:brightness(1)}
/* vignette blends photo into page bg */
.hero__shade{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(120% 90% at 50% 35%,transparent 45%,rgba(21,21,21,.55) 75%,var(--bg) 100%),
  linear-gradient(to bottom,rgba(21,21,21,.35) 0%,transparent 18%,transparent 55%,rgba(21,21,21,.85) 100%)}
/* soft studio light following cursor */
.hero__light{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:0;transition:opacity 1.2s ease .8s;
  background:radial-gradient(520px 520px at var(--lx,50%) var(--ly,35%),rgba(255,248,236,.35),transparent 70%)}
.is-ready .hero__light{opacity:1}

.hero__grid{position:relative;z-index:5;height:100%;display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.25fr) minmax(320px,1fr);align-items:center;padding:88px var(--gutter) calc(11.1vw * .86 + 36px)}
.hero__left{align-self:center;display:flex;flex-direction:column;gap:28px;max-width:300px}
.hero__right{grid-column:3;justify-self:end;max-width:400px;display:flex;flex-direction:column;gap:22px}

.badge{display:inline-flex;align-items:center;gap:14px;padding:10px 12px 10px 18px;border-radius:999px;background:rgba(242,239,233,.06);border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);width:max-content}
.badge__txt{font-size:13px;line-height:1.3;color:var(--muted)}
.badge__txt b{display:block;font-weight:500;color:var(--ink)}
.badge__icon{width:36px;height:36px;border-radius:50%;background:rgba(var(--tech-rgb),.12);border:1px solid rgba(var(--tech-rgb),.35);display:grid;place-items:center}
.badge__icon svg{width:18px;height:18px}

.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hero h1{font-size:clamp(28px,2.4vw,38px);line-height:1.08;font-weight:500;letter-spacing:-.025em}
.lead{font-size:16px;line-height:1.55;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:10px}
@media (min-width:1200px){.actions{flex-wrap:nowrap}.hero__right{min-width:380px}}
@media (min-width:1200px) and (max-height:760px){.scroll-cue{display:none}.hero__right{gap:16px}.lead{font-size:15px}.proc li{padding:3px 0}}

/* process strip — the "engineering" detail */
.proc{border-top:1px solid var(--line);padding-top:16px}
.proc__cap{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;display:flex;justify-content:space-between}
.proc ol{list-style:none;position:relative;display:flex;flex-direction:column;gap:2px}
.proc ol::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:1px;background:var(--line)}
.proc li{position:relative;display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:13px;color:rgba(242,239,233,.42);padding:5px 0;animation:step 7.2s infinite;animation-delay:calc(var(--i) * 1.2s + 1.6s)}
.proc li::before{content:"";width:11px;height:11px;flex:none;border-radius:50%;background:var(--bg);border:1px solid rgba(242,239,233,.35);position:relative;z-index:1;animation:dot 7.2s infinite;animation-delay:inherit}
.proc li span{font-size:11px;opacity:.6;width:18px}
@keyframes step{0%,100%{color:rgba(242,239,233,.42)}4%,14%{color:var(--ink)}24%{color:rgba(242,239,233,.42)}}
@keyframes dot{0%,100%{background:var(--bg);border-color:rgba(242,239,233,.35);box-shadow:none}4%,14%{background:var(--tech);border-color:var(--tech);box-shadow:0 0 0 5px rgba(var(--tech-rgb),.2)}24%{background:var(--bg);border-color:rgba(242,239,233,.35);box-shadow:none}}

/* big name */
.name{position:absolute;left:0;right:0;bottom:clamp(8px,2.2vh,28px);z-index:4;text-align:center;font-weight:500;letter-spacing:-.055em;line-height:.86;font-size:11.1vw;white-space:nowrap;color:var(--ink);pointer-events:none;will-change:transform}
.name .w{display:inline-block;overflow:hidden;padding:0 .02em .06em;vertical-align:bottom}
.name .c{display:inline-block;transform:translateY(105%);transition:transform 1.25s var(--ease);transition-delay:calc(var(--i) * 32ms + .35s)}
.is-ready .name .c{transform:translateY(0)}

/* entrance for UI blocks */
.rise{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.is-ready .rise{opacity:1;transform:none}

.scroll-cue{position:absolute;z-index:6;right:var(--gutter);bottom:calc(11.1vw * .86 + 40px);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
.scroll-cue i{width:1px;height:36px;background:var(--line);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--ink);animation:cue 2.2s var(--ease) infinite 2.4s}
@keyframes cue{to{top:100%}}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform 1.1s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- Tablet & mobile ---------- */
@media (max-width:1199px){
  :root{--mh:min(64svh,620px)}
  .nav{display:none}
  .hero{height:auto;min-height:0;overflow:visible}
  .hero__media{position:relative;inset:auto;height:var(--mh);overflow:hidden}
  .hero__media img{object-position:50% 12%}
  .hero__shade{position:absolute;inset:0;height:var(--mh);background:
    linear-gradient(to bottom,rgba(21,21,21,.55) 0%,transparent 22%,transparent 50%,var(--bg) 100%)}
  .hero__light{display:none}
  .name{position:absolute;top:calc(var(--mh) - 1.72 * 16.5vw);bottom:auto;font-size:16.5vw;white-space:normal;line-height:.86;text-align:left;padding:0 var(--gutter)}
  .name .w{display:block}
  .hero__grid{display:flex;flex-direction:column;align-items:stretch;gap:28px;padding:28px var(--gutter) 48px;height:auto}
  .hero__right{order:1;max-width:560px;justify-self:auto}
  .hero__left{order:2;max-width:none}
  .badge{display:none}
  .proc ol{flex-direction:row;flex-wrap:wrap;gap:6px 14px}
  .proc ol::before{display:none}
  .proc li{font-size:12px;gap:8px}
  .proc li span{display:none}
  .scroll-cue{display:none}
}
@media (min-width:700px) and (max-width:1199px){
  .name{font-size:12vw;top:calc(var(--mh) - 1.72 * 12vw)}
}
@media (max-width:699px){
  :root{--mh:52svh}
  .hero__grid{gap:22px;padding-top:20px}
  .hero h1{font-size:27px}
  .lead{font-size:15px}
}
@media (max-width:420px){
  .logo span{display:none}
  .actions .btn{flex:1;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero__media img,.name .c,.rise,.reveal{opacity:1!important;transform:none!important;filter:none!important}
  .proc li{color:var(--ink)}
}