:root{
  --black:#060806;
  --green:#111b13;
  --green-2:#1d2d20;
  --sand:#f0ede4;
  --sand-2:#d6c8a7;
  --orange:#d88728;
  --orange-2:#f0a13b;
  --white:#fff;
  --muted:#6b7268;
  --line:#d8d2c3;
  --max:1180px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--sand);
  color:var(--black);
  font-family:"DM Sans",sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
textarea{
  font:inherit;
}

.container{
  width:min(var(--max),calc(100% - 48px));
  margin:auto;
}

.skip-link{
  position:fixed;
  top:-60px;
  left:16px;
  z-index:100;
  background:var(--white);
  color:var(--black);
  padding:10px 16px;
}

.skip-link:focus{
  top:16px;
}

.site-header{
  position:absolute;
  inset:0 0 auto;
  z-index:20;
  color:var(--white);
  border-bottom:1px solid rgba(255,255,255,.14);
}

.nav-wrap{
  height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
}

.logo-crop{
  position:relative;
  display:block;
  width:255px;
  height:42px;
  overflow:hidden;
}

.logo-crop img{
  position:absolute;
  width:285px;
  max-width:none;
  height:auto;
  left:-20px;
  top:-48px;
}

.brand-division{
  color:var(--orange-2);
  font-size:12px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  border-left:1px solid rgba(255,255,255,.28);
  padding-left:14px;
}

nav{
  display:flex;
  align-items:center;
  gap:30px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

nav a:not(.nav-cta){
  color:rgba(255,255,255,.78);
}

nav a:hover{
  color:var(--white);
}

.nav-cta{
  border:1px solid rgba(255,255,255,.32);
  padding:10px 16px;
}

.menu-toggle{
  display:none;
  background:transparent;
  border:0;
  padding:8px;
}

.menu-toggle span{
  display:block;
  width:26px;
  height:2px;
  margin:6px;
  background:var(--white);
}

.hero{
  position:relative;
  min-height:790px;
  display:grid;
  align-items:center;
  overflow:hidden;
  color:var(--white);
  background:
    radial-gradient(circle at 78% 32%,rgba(216,135,40,.18),transparent 34%),
    linear-gradient(135deg,#060806 0%,#10170f 54%,#1c2b1f 100%);
  padding:150px 0 82px;
}

.hero-bg-video,
.hero-shade,
.hero-grid{
  position:absolute;
  inset:0;
}

.hero-bg-video{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.32;
  filter:saturate(.72) contrast(1.05);
}

.hero-shade{
  background:
    linear-gradient(90deg,rgba(6,8,6,.9) 0%,rgba(6,8,6,.66) 39%,rgba(6,8,6,.36) 100%),
    linear-gradient(0deg,rgba(6,8,6,.82) 0%,rgba(6,8,6,.12) 58%);
}

.hero-grid{
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to right,#000 0%,#000 76%,transparent 100%);
}

.hero-layout{
  position:relative;
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:38px;
  align-items:center;
}

.hero-content{
  max-width:520px;
}

.hero-video-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.22);
  background:#050705;
  box-shadow:0 30px 90px rgba(0,0,0,.42);
}

.hero-video-card::before{
  content:"";
  position:absolute;
  inset:14px;
  z-index:1;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.16);
}

.hero-video{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  background:#000;
}

.video-caption{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  border-top:1px solid rgba(255,255,255,.14);
  color:#e9e2d3;
}

.video-caption span{
  flex:0 0 auto;
  color:var(--orange-2);
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.video-caption strong{
  text-align:right;
  font-size:14px;
  line-height:1.4;
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 18px;
  color:#d9d3c4;
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.eyebrow span{
  width:34px;
  height:2px;
  background:var(--orange);
}

.eyebrow.dark{
  color:var(--muted);
}

h1,
h2{
  font-family:"Manrope",sans-serif;
  line-height:1;
  letter-spacing:-.055em;
}

h1{
  max-width:560px;
  margin:0;
  font-size:clamp(44px,4.8vw,70px);
}

h2{
  margin:0;
  font-size:clamp(42px,5vw,76px);
}

.hero-lede{
  max-width:650px;
  margin:24px 0 0;
  color:#ebe5d9;
  font-size:clamp(18px,2vw,23px);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:34px;
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 20px;
  border:1px solid transparent;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:13px;
}

.button span{
  margin-left:10px;
}

.button-primary{
  color:var(--black);
  background:var(--orange-2);
}

.button-primary:hover{
  background:#ffc36f;
}

.button-ghost{
  color:var(--white);
  border-color:rgba(255,255,255,.36);
}

.section{
  padding:96px 0;
}

.split{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:72px;
  align-items:start;
}

.section-copy{
  color:#3d443d;
  font-size:20px;
}

.section-copy p{
  margin:0 0 22px;
}

.platform{
  background:#e7e1d4;
  border-block:1px solid var(--line);
}

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

.feature-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
  background:rgba(255,255,255,.34);
}

.feature-card{
  min-height:280px;
  padding:34px 28px;
  border-right:1px solid var(--line);
}

.feature-card:last-child{
  border-right:0;
}

.feature-card span{
  color:var(--orange);
  font-weight:800;
  letter-spacing:.15em;
}

.feature-card h3{
  margin:78px 0 12px;
  font-size:24px;
  line-height:1.1;
}

.feature-card p{
  color:#4b5349;
  margin:0;
}

.response{
  background:var(--green);
  color:var(--white);
}

.response-panel{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:60px;
  align-items:start;
}

.response-steps{
  display:grid;
  gap:18px;
}

.response-steps article{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:22px;
  padding:22px 0;
  border-bottom:1px solid rgba(255,255,255,.14);
}

.response-steps strong{
  color:var(--orange-2);
  font-size:22px;
}

.response-steps p{
  margin:0;
  color:#d8dfd4;
}

.contact{
  padding:96px 0;
}

.contact-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
}

.contact-grid p{
  color:#4b5349;
  font-size:19px;
}

.contact-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  padding:28px;
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(10,15,10,.08);
}

.contact-form label{
  display:grid;
  gap:8px;
  color:#384038;
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.contact-form .full,
.contact-form button,
.form-note{
  grid-column:1/-1;
}

input,
textarea{
  width:100%;
  border:1px solid var(--line);
  background:#fbfaf6;
  padding:14px;
  color:var(--black);
}

textarea{
  resize:vertical;
}

.form-note{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

footer{
  background:var(--black);
  color:var(--white);
  padding:46px 0 22px;
}

.footer-top,
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.footer-top{
  padding-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.footer-links{
  display:flex;
  gap:24px;
  color:rgba(255,255,255,.72);
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.footer-bottom{
  padding-top:18px;
  color:rgba(255,255,255,.58);
  font-size:14px;
}

@media (max-width:900px){
  .menu-toggle{
    display:block;
    z-index:30;
  }

  nav{
    position:fixed;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:rgba(6,8,6,.96);
    transform:translateY(-100%);
    transition:.25s ease;
  }

  nav.open{
    transform:translateY(0);
  }

  .hero{
    min-height:700px;
  }

  .hero-layout{
    grid-template-columns:1fr;
    gap:34px;
  }

  .hero-content{
    max-width:760px;
  }

  h1{
    max-width:760px;
  }

  .split,
  .response-panel,
  .contact-grid{
    grid-template-columns:1fr;
    gap:34px;
  }

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

  .feature-card:nth-child(2){
    border-right:0;
  }

  .feature-card:nth-child(-n+2){
    border-bottom:1px solid var(--line);
  }
}

@media (max-width:640px){
  .container{
    width:min(100% - 32px,var(--max));
  }

  .nav-wrap{
    height:78px;
  }

  .logo-crop{
    width:214px;
    height:38px;
  }

  .brand-division{
    display:none;
  }

  .hero{
    min-height:auto;
    padding:112px 0 56px;
  }

  .hero-content{
    margin:auto;
  }

  h1{
    font-size:clamp(42px,13vw,64px);
  }

  .video-caption{
    display:block;
  }

  .video-caption strong{
    display:block;
    margin-top:6px;
    text-align:left;
  }

  .section,
  .contact{
    padding:70px 0;
  }

  .feature-grid,
  .contact-form{
    grid-template-columns:1fr;
  }

  .feature-card,
  .feature-card:nth-child(2){
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .feature-card:last-child{
    border-bottom:0;
  }

  .response-steps article{
    grid-template-columns:1fr;
    gap:8px;
  }

  .footer-top,
  .footer-bottom,
  .footer-links{
    align-items:flex-start;
    flex-direction:column;
  }
}