/* ===================== Top utility bar ===================== */
.topbar{
  background:var(--ink);
  color:var(--paper-dim);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.03em;
}
.topbar .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:9px; padding-bottom:9px;
}
.topbar a{ opacity:.85; transition:opacity .2s; }
.topbar a:hover{ opacity:1; }
.topbar-links{ display:flex; gap:22px; }
.topbar-social{ display:flex; gap:16px; }
@media (max-width:780px){ .topbar-links span{display:none;} }

/* ===================== Site header ===================== */
.site-header{
  position:sticky; top:0; z-index:200;
  background:rgb(248, 248, 245);
  backdrop-filter:blur(10px) saturate(140%);
  border-bottom:1px solid var(--line);
  transition:background .3s ease;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; padding-bottom:16px;
}
.brand{ display:flex; align-items:center; gap:12px; }
/* .brand-mark{
  width:38px; height:38px; border-radius:50%;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  flex:none;
} */

.brand-mark{
  height:42px; width:auto;
  display:flex; align-items:center;
  flex:none;
}
.brand-mark img{ height:100%; width:auto; object-fit:contain; }

.brand-mark svg{ width:20px; height:20px; }
.brand-word{ font-family:var(--font-display); font-weight:600; font-size:19px; line-height:1.1; }
.brand-word small{ display:block; font-family:var(--font-mono); font-weight:400; font-size:10.5px; letter-spacing:.12em; color:var(--ink-soft); text-transform:uppercase; margin-top:2px; }

.main-nav{ 
max-width:100vw;
display:flex;
align-items:center;
gap:36px; }

.main-nav ul{ display:flex; gap:30px; }
.main-nav a{
  font-size:14px; font-weight:500; color:var(--ink-soft);
  position:relative; padding:6px 0;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--amber); transition:right .3s var(--ease);
}
.main-nav a:hover{ color:var(--ink); }
.main-nav a:hover::after, .main-nav a.active::after{ right:0; }
.main-nav a.active{ color:var(--ink); }

.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{
  display:none; background:none; border:1px solid var(--line); border-radius:var(--radius);
  width:42px; height:42px; align-items:center; justify-content:center;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{ display:none; }
.nav-toggle svg{ width:18px; height:18px; }

@media (max-width:960px){
  .main-nav{ position:fixed; inset:0 0 0 auto; width:min(360px,86vw); height:100vh;
    background:var(--paper); flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding:100px 32px 32px; gap:30px; transform:translateX(100%); transition:transform .45s var(--ease);
    border-left:1px solid var(--line); overflow-y:auto;
  }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav ul{ flex-direction:column; gap:22px; width:100%; }
  .main-nav a{ font-size:20px; font-family:var(--font-display); }
  .nav-cta.desktop-only{ display:none; }
  .nav-toggle{ display:flex; }
  body.nav-locked{ overflow:hidden; }
}
.desktop-only{ }
@media (max-width:960px){ .header-cta-desktop{ display:none; } }



/* ===================== Hero ===================== */
.hero{
    position:relative;
    min-height:92vh;
    display:flex;
    align-items:center;
    overflow:hidden;

    background:var(--paper);

    isolation:isolate;
}


.hero-video-wrap{

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:100%;

    overflow:hidden;

    z-index:0;

    pointer-events:none;

}


.hero-video{

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:60% center;

    opacity:1;

    filter:
        brightness(.82)
        contrast(1.02)
        saturate(.9);

    transform:scale(1.08);

    animation:heroZoom 22s ease-in-out infinite alternate;

}

.hero-video-wrap::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to left,
        rgba(10,26,58,.15) 0%,
        rgba(10,26,58,.4) 45%,
        rgba(10,26,58,.7) 100%
    );

    z-index:2;

}

.hero .container{

    position:relative;

    z-index:10;

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:56px;

}

@keyframes heroZoom{

    from{
        transform:scale(1.08);
    }

    to{
        transform:scale(1.15);
    }

}

.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.35;
  mask-image:linear-gradient(to bottom, black, transparent 85%);
}
.hero .container{ position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:end; }

.hero-copy .eyebrow{ margin-bottom:22px; }
.hero h1{
  font-size:clamp(40px,6vw,74px);
  line-height:0.98;
  letter-spacing:-0.015em;
}
.hero h1 em{
  font-style:italic; color:var(--teal-deep);
}
.hero-lede{
  margin-top:26px; font-size:19px; color:var(--ink-soft); max-width:52ch; line-height:1.65;
}
.hero-actions{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; }

.hero-panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  align-self:end;
}
.hero-coord{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  color:var(--ink-faint); text-transform:uppercase; margin-bottom:16px;
  display:flex; justify-content:space-between;
}
.hero-stats{ display:grid; grid-template-columns:1fr 1fr; gap:22px 18px; }
.hero-stat b{ font-family:var(--font-display); font-size:30px; display:block; color:var(--ink); }
.hero-stat span{ font-size:12.5px; color:var(--ink-soft); }

/* toolpath signature animation */
.toolpath{
  position:absolute; inset:0; z-index:1; pointer-events:none;
}
.toolpath path{
  fill:none; stroke:var(--amber); stroke-width:1.4; opacity:.55;
  stroke-dasharray:2200;
  stroke-dashoffset:2200;
  animation:draw 5.5s var(--ease) forwards;
}
.toolpath circle{
  fill:var(--teal); opacity:0; animation:dot-in .6s ease forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes dot-in{ to{ opacity:.9; } }

@media (max-width:960px){
  .hero .container{ grid-template-columns:1fr; }
  .hero{ padding:120px 0 64px; min-height:auto; }
  .hero-panel{ margin-top:8px; }
}