/* ===================== THEME ===================== */
:root{
  --brand-navy:#252C40;
  --brand-carbon:#262625;
  --brand-taupe:#BFB0AA;
  --brand-silver:#D9D9D9;

  --bg-page:#FFFFFF;
  --bg-section:#FFFFFF;

  --font-sans:"Inter","Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;
  --fs-hero: clamp(2.6rem, 5vw, 4rem);
  --fs-h1: clamp(1.8rem, 3.2vw, 3rem);
  --fs-h2: clamp(1.2rem, 2.2vw, 2rem);
  --fs-body: 1rem;

  --container: min(92vw, 1800px);
  --gutter: 1vw;

  --shadow: 0 12px 30px rgba(37,44,64,.08);
  --shadow-hover: 0 16px 42px rgba(37,44,64,.14);

  --nav-h: 72px;
  --section-pad-block: 8vh;
}

/* ===================== BASE ===================== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; overflow-x:hidden;
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--brand-carbon);
  background:var(--bg-page);
}
a{color:var(--brand-navy);text-decoration:none}
a:hover{color:#111}
img,svg,video{max-width:100%;height:auto;display:block}

/* ===================== HEADER ===================== */
.site-header{
  position: sticky; top:0; z-index:1000;
  min-height: 64px;
  display:flex; align-items:center;
  background:#fff;
  border-bottom:1px solid var(--brand-silver);
  box-shadow: var(--shadow);
}
.nav{
  width: var(--container);
  margin:0 auto;
  height:100%;
  padding:0 var(--gutter);
  display:flex; align-items:center; gap:1rem;
}
.brand{font-weight:900; letter-spacing:.4px; font-size:1.1rem; color:var(--brand-navy)}
.spacer{flex:1}
.nav a{
  color:var(--brand-carbon);
  padding:.55rem .8rem;
  border-radius:12px;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.nav a:hover{ background: rgba(191,176,170,.22); }
.nav a[aria-current="page"]{
  color: var(--brand-carbon);
  background: rgba(37,44,64,.12);
  border: 1px solid rgba(37,44,64,.22);
}

/* Desktop links vs mobile hamburger */
.nav-links { display:flex; gap:.5rem; }
.nav-toggle  { display:none; background:none; border:0; padding:.4rem; color:var(--brand-carbon); cursor:pointer; border-radius:10px; }
.nav-toggle:hover { background: rgba(191,176,170,.22); }

@media (max-width:800px){
  .nav-links { display:none; }
  .nav-toggle { display:inline-flex; align-items:center; justify-content:center; }
}

/* ===================== MOBILE DRAWER ===================== */
.mobile-drawer{
  position: fixed; inset: 0 0 0 auto;
  width: min(84vw, 360px);
  background: #fff;
  border-left: 1px solid var(--brand-silver);
  box-shadow: -8px 0 30px rgba(37,44,64,.12);
  z-index: 1200;
  display: grid;
  grid-template-rows: auto 1fr;
  transform: translateX(100%);
  opacity: 0;
  transition: transform .28s ease, opacity .2s ease;
}
.mobile-drawer:not([hidden]){ transform: translateX(0); opacity: 1; }

.drawer-close{
  justify-self: end;
  margin: .6rem .6rem 0 0;
  background: none; border: 0; padding: .4rem; border-radius: 10px;
  color: var(--brand-carbon); cursor: pointer;
}
.drawer-close:hover{ background: rgba(37,44,64,.08); }

.drawer-links{
  display: grid; align-content: start; gap: .2rem;
  padding: 1rem 1rem 2rem 1rem;
}
.drawer-links a{
  display:block;
  padding: .9rem 1rem;
  border-radius: 12px;
  color: var(--brand-carbon);
  border: 1px solid transparent;
}
.drawer-links a[aria-current="page"]{
  background: rgba(37,44,64,.12);
  border-color: rgba(37,44,64,.22);
}
.drawer-links a:hover{
  background: rgba(191,176,170,.22);
}

/* ===================== LAYOUT ===================== */
.container{width: var(--container); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block: var(--section-pad-block); background:var(--bg-section)}
.grid{display:grid; gap:1.2rem}
.grid-2{grid-template-columns:1.1fr .9fr}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} }
.split{display:grid; gap:2rem; grid-template-columns:1.2fr .8fr}
@media (max-width:960px){ .split{grid-template-columns:1fr} }

.mt-1{margin-top:.6rem}
.mt-2{margin-top:1rem}
.mt-3{margin-top:1.6rem}

/* ===================== HERO ===================== */
.hero{
  padding-top: var(--nav-h);
  background: var(--bg-section);
}

/* Spline band: the only sizing source (80% / 85% / 66%) */
.spline-band{
  position: relative;
  width: 80%;
  margin: .6rem auto;                    /* tiny gap above/below */
  height: clamp(180px, 26svh, 360px);    /* explicit, stable height */
  min-height: 140px;
}
@media (min-width:641px){
  .spline-band{
    width: 85%;
    height: clamp(220px, 28svh, 420px);
    min-height: 160px;
  }
}
@media (min-width:1025px){
  .spline-band{
    width: 66%;
    height: clamp(240px, 30svh, 460px);
    min-height: 180px;
  }
}

/* Make the canvas fill the band 100% */
.spline-band > #canvas3d{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* Hero copy */
.hero .container{
  margin-top: 1rem;
  text-align: center;
}
.hero h1{font-size:var(--fs-hero); line-height:1.05; margin:0 0 .8rem; letter-spacing:-.02em}
.lead{font-size:1.15rem; color:#3f4243; max-width:62ch; margin:0 auto}
.cta{display:flex; gap:.8rem; margin-top:2vh; flex-wrap:wrap; justify-content:center}

/* ===================== CARDS / UI ===================== */
.card{
  background:#fff;
  border:1px solid var(--brand-silver);
  border-radius:18px;
  padding: min(3.2vh, 1.6rem);
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease
}
.card:hover{transform:translateY(-.4vh); box-shadow:var(--shadow-hover)}
.card.accent{border-color:var(--brand-taupe)}
.pill{display:inline-block; padding:.35rem .7rem; border-radius:999px; background:var(--brand-silver); color:#3f4243; font-size:.85rem}
.muted{color:#3f4243}
.eyebrow{color:var(--brand-navy); font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:.85rem}
h2{font-size:var(--fs-h1); margin:0 0 .6rem}
h3{font-size:var(--fs-h2); margin:.2rem 0 .3rem}
ul.clean{list-style:none; margin:0; padding:0}
ul.clean li{padding:.35rem 0}

/* Buttons */
.btn{
  appearance:none; border:0; border-radius:14px;
  padding: .9rem 1.1rem; font-weight:600; cursor:pointer;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease
}
.btn.primary{background:var(--brand-navy); color:#fff; box-shadow:var(--shadow)}
.btn.primary:hover{transform:translateY(-.2vh)}
.btn.ghost{background:transparent; color:var(--brand-navy); border:1px solid var(--brand-silver)}

/* Forms */
label{display:block;font-weight:600;margin:.6rem 0 .2rem}
input,textarea{width:100%;padding:1rem;border:1px solid var(--brand-silver);border-radius:12px;background:#fff;font:inherit}
textarea{min-height:18vh; resize:vertical}

/* ===================== FOOTER ===================== */
footer{border-top:1px solid var(--brand-silver); padding:4vh 0; color:#3f4243; background:var(--bg-section)}
.foot-grid{display:grid; gap:1rem; grid-template-columns:1fr auto}
@media (max-width:800px){.foot-grid{grid-template-columns:1fr}}
.mono{font-variant-numeric: tabular-nums}