@font-face{font-family:'Inter';src:url('../fonts/inter-400.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-500.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-600.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-700.ttf') format('truetype');font-weight:700 800;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-600.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-700.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

:root{
  --bg:#0c1012;
  --bg-2:#111818;
  --panel:#16201d;
  --panel-2:#1b1715;
  --line:#283531;
  --ink:#f6f3eb;
  --muted:#b2b8b1;
  --dim:#818b84;
  --orange:#ff7a2a;
  --orange-2:#f2a23d;
  --mint:#43cdb5;
  --steel:#8ea5b0;
  --max:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:18px;
  line-height:1.55;
  overflow-x:hidden;
}

a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}

:focus-visible{
  outline:3px solid var(--mint);
  outline-offset:3px;
}

.skip-link{
  position:fixed;
  z-index:999;
  top:12px;
  left:12px;
  transform:translateY(-150%);
  border-radius:8px;
  background:var(--ink);
  color:var(--bg);
  padding:10px 14px;
  font-weight:800;
  text-decoration:none;
  transition:transform .18s ease;
}

.skip-link:focus,.skip-link:focus-visible{
  transform:translateY(0);
}

.site-nav{
  position:fixed;
  z-index:10;
  top:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px clamp(18px,4vw,44px);
  background:linear-gradient(180deg,rgba(12,16,18,.9),rgba(12,16,18,.45) 72%,transparent);
}

.brand{
  display:inline-flex;
  align-items:center;
  color:var(--ink);
  font-family:'Space Grotesk',Inter,sans-serif;
  font-size:20px;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
}

.brand span{color:var(--orange)}
.site-nav nav{
  display:flex;
  gap:18px;
  align-items:center;
  color:rgba(246,243,235,.78);
  font-size:14px;
  font-weight:600;
}

.site-nav nav > a,.nav-menu summary{
  min-height:34px;
  display:inline-flex;
  align-items:center;
}

.site-nav nav a,.nav-menu summary{text-decoration:none}
.site-nav nav a:hover,.nav-menu summary:hover{color:var(--ink)}

.nav-menu{
  position:relative;
}

.nav-menu summary{
  gap:6px;
  color:rgba(246,243,235,.78);
  list-style:none;
  cursor:pointer;
}

.nav-menu summary::-webkit-details-marker{
  display:none;
}

.nav-menu summary::after{
  content:"";
  width:7px;
  height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  opacity:.78;
}

.nav-menu[open] summary{
  color:var(--ink);
}

.nav-menu[open] summary::after{
  transform:rotate(225deg) translate(-1px,-1px);
}

.nav-panel{
  position:absolute;
  top:calc(100% + 14px);
  right:0;
  width:min(310px,calc(100vw - 36px));
  display:grid;
  gap:6px;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(12,16,18,.96);
  padding:10px;
  box-shadow:0 18px 48px rgba(0,0,0,.34);
}

.nav-panel a{
  display:grid;
  gap:2px;
  border-radius:6px;
  padding:10px;
  color:var(--ink);
}

.nav-panel a:hover{
  background:rgba(67,205,181,.10);
}

.nav-panel span{
  color:var(--mint);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.home-hero{
  position:relative;
  min-height:86svh;
  display:flex;
  align-items:center;
  padding:118px 22px 76px;
  overflow:hidden;
}

.hero-media{
  position:absolute;
  inset:0;
  background-image:url('../assets/datasplinter-hero.png');
  background-size:cover;
  background-position:center;
  filter:saturate(.98) contrast(1.04);
  transform:scale(1.02);
}

.hero-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(12,16,18,.93) 0%,rgba(12,16,18,.76) 42%,rgba(12,16,18,.38) 78%,rgba(12,16,18,.70) 100%),
    linear-gradient(0deg,rgba(12,16,18,.96) 0%,rgba(12,16,18,.12) 44%,rgba(12,16,18,.82) 100%);
}

.hero-content{
  position:relative;
  z-index:1;
  width:min(100%,var(--max));
  margin:0 auto;
}

.eyebrow,.section-kicker{
  margin:0;
  color:var(--mint);
  font-size:13px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.home-hero h1{
  margin:18px 0 18px;
  max-width:12ch;
  font-family:'Space Grotesk',Inter,sans-serif;
  font-size:clamp(42px,12vw,136px);
  line-height:.86;
  letter-spacing:0;
}

.home-hero h1 span{color:var(--orange)}

.hero-copy{
  max-width:640px;
  margin:0;
  color:rgba(246,243,235,.86);
  font-size:clamp(20px,3vw,30px);
  line-height:1.25;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:32px;
}

.primary-link,.secondary-link,.project-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  border-radius:8px;
  padding:12px 17px;
  text-decoration:none;
  font-weight:800;
  font-size:15px;
}

.primary-link,.project-link{
  background:var(--orange);
  color:#15100d;
}

.secondary-link{
  border:1px solid rgba(246,243,235,.24);
  color:var(--ink);
  background:rgba(12,16,18,.32);
}

.primary-link:hover,.project-link:hover{background:var(--orange-2)}
.secondary-link:hover{border-color:var(--mint)}

.intro-band,.project-band{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--bg-2);
}

.intro-layout{
  display:grid;
  gap:28px;
  padding-top:54px;
  padding-bottom:54px;
}

h2,h3{
  margin:0;
  font-family:'Space Grotesk',Inter,sans-serif;
  line-height:1.1;
  letter-spacing:0;
}

.intro-layout h2,.section-head h2,.method-grid h2{
  margin-top:10px;
  font-size:clamp(30px,5vw,54px);
}

.intro-layout p:last-child{
  margin:0;
  color:var(--muted);
  font-size:20px;
}

.record-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  padding-top:58px;
  padding-bottom:58px;
}

.record-grid article,.method-grid article,.project-card{
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel);
}

.record-grid article{
  padding:20px;
}

.record-mark{
  display:inline-flex;
  margin-bottom:22px;
  color:var(--orange);
  font-family:'Space Grotesk',Inter,sans-serif;
  font-weight:700;
}

.record-grid h3{
  font-size:22px;
  margin-bottom:10px;
}

.record-grid p,.section-head p,.method-grid p,.project-copy p,.project-copy dd,.home-footer p{
  color:var(--muted);
}

.record-grid p,.method-grid p,.project-copy p,.home-footer p{
  margin:0;
}

.project-band{
  padding:62px 0;
}

.section-head{
  max-width:760px;
  margin-bottom:28px;
}

.section-head p{
  margin:14px 0 0;
  font-size:19px;
}

.project-card{
  display:grid;
  overflow:hidden;
}

.project-visual{
  position:relative;
  min-height:230px;
  background:
    linear-gradient(145deg,rgba(255,122,42,.30),rgba(67,205,181,.10)),
    url('../assets/datasplinter-hero.png');
  background-size:cover;
  background-position:center;
}

.project-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(12,16,18,.56),rgba(12,16,18,.08));
}

.project-signal{
  position:absolute;
  z-index:1;
  left:26px;
  bottom:24px;
  width:160px;
  height:86px;
  border-left:2px solid var(--orange);
  border-bottom:2px solid var(--orange);
  background:
    linear-gradient(135deg,transparent 18%,rgba(255,122,42,.86) 19%,transparent 20% 42%,rgba(67,205,181,.78) 43%,transparent 44% 68%,rgba(255,122,42,.75) 69%,transparent 70%);
  opacity:.9;
}

.project-copy{
  padding:24px;
}

.project-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}

.project-meta span{
  border:1px solid rgba(67,205,181,.42);
  border-radius:8px;
  padding:5px 9px;
  color:var(--mint);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.project-copy h3{
  font-size:clamp(30px,5vw,48px);
  margin-bottom:12px;
}

.project-copy dl{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin:22px 0;
}

.project-copy dl div{
  border-top:1px solid var(--line);
  padding-top:10px;
}

.project-copy dt{
  color:var(--ink);
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.project-copy dd{
  margin:4px 0 0;
}

.upcoming-projects{
  margin-top:32px;
}

.upcoming-head{
  max-width:720px;
  margin-bottom:18px;
}

.upcoming-head h3{
  margin-top:10px;
  font-size:clamp(26px,4vw,38px);
}

.upcoming-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.upcoming-grid article{
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(12,16,18,.32);
  padding:18px;
}

.upcoming-grid span{
  display:inline-flex;
  margin-bottom:14px;
  border:1px solid rgba(67,205,181,.42);
  border-radius:8px;
  padding:5px 9px;
  color:var(--mint);
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.upcoming-grid h4{
  margin:0 0 10px;
  font-family:'Space Grotesk',Inter,sans-serif;
  font-size:22px;
  line-height:1.1;
}

.upcoming-grid p{
  margin:0;
  color:var(--muted);
}

.method-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  padding-top:58px;
  padding-bottom:58px;
}

.method-grid article{
  padding:24px;
}

.method-grid h2{
  margin:0 0 14px;
  font-size:clamp(28px,5vw,42px);
}

.home-footer{
  border-top:1px solid var(--line);
  padding:44px 0 38px;
  background:#090d0e;
}

.footer-shell{
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
}

.footer-brand{margin-bottom:12px}

.footer-main{
  max-width:520px;
}

.footer-main p,.footer-note p,.footer-bottom p{
  margin:0;
}

.footer-note{
  max-width:780px;
  border-top:1px solid var(--line);
  padding-top:22px;
}

.footer-bottom{
  display:flex;
  flex-direction:column;
  gap:14px;
  border-top:1px solid var(--line);
  padding-top:20px;
  color:var(--dim);
  font-size:14px;
}

.footer-bottom nav{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.footer-bottom a{
  color:var(--muted);
  text-decoration:none;
  font-weight:700;
}

.footer-bottom a:hover{
  color:var(--orange);
}

.legal-page{
  background:
    radial-gradient(80% 45% at 70% 0%,rgba(255,122,42,.10),transparent 62%),
    var(--bg);
}

.legal-nav{
  position:sticky;
  background:rgba(12,16,18,.92);
  border-bottom:1px solid var(--line);
}

.legal-main{
  padding-top:38px;
}

.legal-hero{
  padding-top:46px;
  padding-bottom:34px;
}

.legal-hero h1{
  margin:10px 0 12px;
  font-family:'Space Grotesk',Inter,sans-serif;
  font-size:clamp(44px,9vw,86px);
  line-height:.92;
}

.legal-hero p:last-child{
  margin:0;
  color:var(--muted);
}

.legal-content{
  display:grid;
  gap:12px;
  padding-bottom:62px;
}

.legal-content article{
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel);
  padding:22px;
}

.legal-content h2{
  font-size:24px;
  margin-bottom:10px;
}

.legal-content p{
  margin:0;
  color:var(--muted);
}

.legal-content p + p{
  margin-top:12px;
}

.contact-list{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:18px;
}

.contact-list > div{
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(12,16,18,.28);
  padding:16px;
}

.contact-list h3{
  font-size:20px;
  margin:0 0 8px;
}

.contact-address{
  display:inline-flex;
  max-width:100%;
  overflow-wrap:anywhere;
  border:1px solid rgba(67,205,181,.42);
  border-radius:8px;
  padding:6px 9px;
  color:var(--mint);
  font-size:clamp(13px,3.3vw,18px);
  line-height:1.35;
  font-weight:800;
}

.text-link{
  color:var(--mint);
  font-weight:800;
  text-decoration:none;
}

.text-link:hover{
  color:var(--orange);
}

.legal-footer{
  padding-top:34px;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

@media (max-width:640px){
  .site-nav{
    position:absolute;
    align-items:flex-start;
  }

  .site-nav.legal-nav{
    position:sticky;
  }

  .site-nav nav{
    gap:10px;
    font-size:13px;
  }

  .nav-panel{
    right:auto;
    left:0;
  }

  .home-hero{
    min-height:88svh;
    align-items:flex-end;
    padding-top:104px;
  }

  .hero-shade{
    background:
      linear-gradient(90deg,rgba(12,16,18,.86),rgba(12,16,18,.52)),
      linear-gradient(0deg,rgba(12,16,18,.98),rgba(12,16,18,.10) 48%,rgba(12,16,18,.82));
  }
}

@media (max-width:420px){
  .site-nav{
    flex-wrap:wrap;
    gap:8px 16px;
  }

  .site-nav nav{
    width:100%;
    flex-wrap:wrap;
  }

  .nav-menu{
    position:static;
  }

  .nav-panel{
    left:18px;
    right:18px;
    width:auto;
  }

  .home-hero{
    padding-top:132px;
  }

  .hero-media{
    transform:none;
  }
}

@media (min-width:760px){
  .intro-layout{
    grid-template-columns:.95fr 1.05fr;
    align-items:end;
  }

  .record-grid{
    grid-template-columns:repeat(4,1fr);
  }

  .contact-list{
    grid-template-columns:repeat(3,1fr);
  }

  .upcoming-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .project-card{
    grid-template-columns:.82fr 1.18fr;
  }

  .project-copy{
    padding:34px;
  }

  .project-copy dl{
    grid-template-columns:repeat(3,1fr);
  }

  .method-grid{
    grid-template-columns:1fr 1fr;
  }

  .footer-bottom{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
}

@media (min-width:1080px){
  .upcoming-grid{
    grid-template-columns:repeat(4,1fr);
  }
}