:root{
  --orange:#b87333;
  --orangeDark:#8f5a2a;

  --text:#111;
  --muted:#555;

  --line:rgba(0,0,0,.14);
  --shadow:0 12px 34px rgba(0,0,0,.10);

  --cardBg:#fff;
  --navBg:rgba(255,255,255,.95);
  --footerBg:rgba(255,255,255,.95);

  --iconBorder:rgba(0,0,0,.14);
  --iconBg:#fff;

  --washTop: rgba(255,255,255,.90);
  --washBottom: rgba(255,255,255,.86);
}

body.dark{
  --text:#f2f2f2;
  --muted:#c9c9c9;

  --line:rgba(255,255,255,.16);
  --shadow:0 14px 40px rgba(0,0,0,.45);

  --cardBg:rgba(18,18,18,.92);
  --navBg:rgba(12,12,12,.86);
  --footerBg:rgba(12,12,12,.86);

  --iconBorder:rgba(255,255,255,.18);
  --iconBg:rgba(18,18,18,.9);

  --washTop: rgba(0,0,0,.55);
  --washBottom: rgba(0,0,0,.62);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:#fff;
}

.container{width:min(1120px,92%);margin:auto}

/* VIDEO BACKGROUND */
.site-bg{
  position:fixed;
  inset:0;
  z-index:-3;
}
.site-bg-vid{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.2s ease;
}
.site-bg-vid.is-active{opacity:1}
.site-bg-wash{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,var(--washTop),var(--washBottom));
}
.site-bg-grain{
  position:absolute;
  inset:0;
  opacity:.05;
}

/* NAV */
.top-nav{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--navBg);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(10px);
}
.top-nav-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 0;
  gap:12px;
}
.brand-left{
  font-weight:800;
  white-space:nowrap;
}
.top-links{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* ICON BUTTONS */
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:38px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid var(--iconBorder);
  background:var(--iconBg);
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
}
.icon-btn svg{
  width:18px;
  height:18px;
  fill:currentColor;
}
.icon-btn .toggle-text{
  font-size:13px;
  font-weight:600;
}
.icon-btn[href*="linkedin.com"]{
  padding:0;
  width:38px;
}
.icon-btn[href*="linkedin.com"] svg{
  fill:#0a66c2;
}

/* PILL */
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:999px;
  background:var(--orange);
  color:#111;
  text-decoration:none;
  border:1px solid var(--orange);
  font-weight:500;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .08s ease;
}
.pill:active{transform:translateY(1px)}
.pill:hover{
  background:transparent;
  border-color:transparent;
  color:var(--orangeDark);
}

/* SECTIONS / CARDS */
.section{padding:18px 0}
.card{
  background:var(--cardBg);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:22px;
  border-radius:0;
}

/* LOGO CARD */
.logo-card{text-align:center}
.logo-img{
  width:min(720px,100%);
  height:auto;
  display:block;
  margin:0 auto;
}

/* TEXT */
h1{margin:0 0 10px;font-size:40px;line-height:1.08;letter-spacing:-.3px}
h2{margin:0 0 10px}
h3{margin:18px 0 8px}
.muted{color:var(--muted);line-height:1.7}
ul{margin:10px 0 0;padding-left:18px}
li{margin:6px 0}

/* ACTIONS */
.actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}

/* CONTACT ROWS */
.contact-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:10px 0;
  border-top:1px solid var(--line);
}
.contact-row:first-of-type{border-top:none;padding-top:0}

/* FOOTER */
.footer{
  border-top:1px solid var(--line);
  background:var(--footerBg);
  padding:18px 0;
  backdrop-filter: blur(10px);
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
  flex-wrap:wrap;
}
.footer-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* MOBILE */
@media (max-width: 820px){
  .top-nav-inner{
    flex-direction:column;
    align-items:flex-start;
  }
  .top-links{
    width:100%;
    justify-content:flex-start;
  }
  h1{font-size:30px}
  .card{padding:18px}
}
