:root{
  --ink:#0f1717;
  --ink-soft:#415053;
  --paper:#f5f0e6;
  --panel:#fbf7ef;
  --line:rgba(15,23,23,.14);
  --line-strong:rgba(15,23,23,.2);
  --accent:#d84a31;
  --accent-2:#f1b92b;
  --teal:#11414b;
  --green:#1f6a48;
  --shadow:0 22px 60px rgba(10,16,16,.14);
  --sans:"Archivo",sans-serif;
  --mono:"Space Mono",monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.5;
}

img{display:block;max-width:100%}
a{color:inherit}

.shell{
  width:min(1180px, calc(100% - 40px));
  margin:0 auto;
}

.topbar{
  align-items:center;
  display:flex;
  justify-content:space-between;
  min-height:84px;
  padding:16px 0;
}

.brand{
  color:#fff;
  font-size:18px;
  font-weight:800;
  letter-spacing:-.05em;
  text-decoration:none;
  text-transform:lowercase;
}

.brand span{
  color:var(--accent-2);
}

.topnav{
  align-items:center;
  display:flex;
  gap:24px;
  font:700 12px var(--mono);
  text-transform:uppercase;
}

.topnav a{
  color:rgba(255,255,255,.86);
  text-decoration:none;
}

.topcta{
  border-bottom:2px solid var(--accent-2);
  padding-bottom:4px;
}

.topcta b,
.button b{
  font-size:16px;
}

.hero{
  align-items:center;
  display:grid;
  gap:36px;
  grid-template-columns:minmax(0,1.03fr) minmax(320px,.97fr);
  padding:32px 0 72px;
}

.hero-copy{
  background:linear-gradient(180deg, rgba(251,247,239,.97), rgba(251,247,239,.92));
  border:1px solid rgba(15,23,23,.08);
  box-shadow:var(--shadow);
  padding:34px 34px 30px;
}

.eyebrow{
  color:var(--green);
  font:700 11px var(--mono);
  letter-spacing:.08em;
  margin:0 0 18px;
  text-transform:uppercase;
}

h1,h2{
  letter-spacing:-.07em;
  line-height:.92;
  margin:0;
}

.hero h1{
  font-size:clamp(60px, 7.5vw, 112px);
}

.line{
  display:block;
}

.soft{
  color:var(--ink);
  font-weight:500;
}

.strong{
  color:var(--accent);
  font-weight:800;
}

.accent{
  color:var(--teal);
  font-weight:800;
}

.lead{
  color:var(--ink-soft);
  font-size:18px;
  max-width:560px;
  margin:22px 0 0;
}

.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}

.button{
  align-items:center;
  border:0;
  cursor:pointer;
  display:inline-flex;
  font:800 13px var(--sans);
  gap:10px;
  justify-content:center;
  min-height:52px;
  padding:0 18px;
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.button:hover,
.button:focus-visible{
  box-shadow:5px 5px 0 var(--ink);
  transform:translate(-2px,-2px);
}

.primary{
  background:var(--accent);
  color:#fff;
}

.ghost{
  background:transparent;
  border:1px solid var(--line-strong);
  color:var(--ink);
}

.stats{
  border-top:1px solid var(--line);
  display:grid;
  gap:18px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:24px 0 0;
  padding-top:18px;
}

.stats div{
  min-width:0;
}

.stats dt{
  color:var(--ink-soft);
  font:700 10px var(--mono);
  letter-spacing:.08em;
  margin-bottom:6px;
  text-transform:uppercase;
}

.stats dd{
  margin:0;
  font-size:14px;
  font-weight:700;
}

.poster{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow);
  margin:0;
  padding:16px;
  position:relative;
}

.poster img{
  aspect-ratio:9 / 14;
  object-fit:cover;
  width:100%;
}

.poster figcaption{
  color:rgba(255,255,255,.82);
  font:700 10px var(--mono);
  letter-spacing:.08em;
  padding:12px 2px 0;
  text-transform:uppercase;
}

.bottom-cta{
  display:flex;
  justify-content:center;
  padding:0 0 76px;
}

.bottom-cta .button{
  min-width:230px;
}

.button-only{
  align-items:center;
  background:transparent;
  display:flex;
  justify-content:center;
  min-height:100svh;
  padding:24px;
}

.button-only .button{
  min-width:230px;
  animation:breathe 2.8s ease-in-out infinite;
}

@keyframes breathe{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-5px) scale(1.015)}
}

.poster-only{
  align-items:center;
  background:var(--paper);
  display:flex;
  flex-direction:column;
  gap:22px;
  justify-content:center;
  min-height:100svh;
  padding:24px 16px 40px;
  width:100%;
}

.poster-image{
  max-height:calc(100svh - 120px);
  max-width:min(420px,100%);
  object-fit:contain;
  width:auto;
}

.copy-band,
.contact{
  padding:22px 0 64px;
}

.band-heading{
  border-top:1px solid var(--line);
  display:grid;
  gap:10px;
  grid-template-columns:minmax(0,280px) 1fr;
  padding-top:18px;
}

.band-heading h2,
.contact h2{
  font-size:clamp(34px, 4.8vw, 58px);
}

.quote-grid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:24px;
}

.quote-grid article{
  background:var(--panel);
  border:1px solid rgba(15,23,23,.08);
  padding:18px 18px 20px;
}

.quote-grid .wide{
  grid-column:1 / -1;
}

.quote-label{
  color:var(--green);
  font:700 10px var(--mono);
  letter-spacing:.08em;
  margin:0 0 12px;
  text-transform:uppercase;
}

.quote-grid p:last-child{
  font-size:18px;
  font-weight:700;
  line-height:1.25;
  margin:0;
}

.contact{
  display:grid;
  gap:42px;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
}

.body-copy{
  color:var(--ink-soft);
  font-size:16px;
  max-width:420px;
}

.notice{
  background:#fff;
  border-left:4px solid var(--accent);
  margin-top:24px;
  padding:14px 16px;
}

.notice strong{
  display:block;
  margin-bottom:4px;
}

.notice p{
  color:var(--ink-soft);
  margin:0;
}

.form-panel{
  background:var(--panel);
  border:1px solid rgba(15,23,23,.08);
  box-shadow:var(--shadow);
  padding:24px;
}

label{
  color:var(--ink);
  display:block;
  font:700 11px var(--mono);
  letter-spacing:.08em;
  margin-bottom:18px;
  text-transform:uppercase;
}

input,
select,
textarea{
  background:#fff;
  border:1px solid rgba(15,23,23,.12);
  border-radius:0;
  color:var(--ink);
  display:block;
  font:16px var(--sans);
  margin-top:8px;
  outline:0;
  padding:12px 14px;
  width:100%;
}

input:focus,
select:focus,
textarea:focus{
  border-color:rgba(216,74,49,.55);
  box-shadow:0 0 0 3px rgba(216,74,49,.1);
}

.form-error{
  color:var(--accent);
  font-size:12px;
  margin:2px 0 14px;
}

.wide-button{
  width:100%;
}

.ready{
  border-top:1px solid var(--line);
  margin-top:24px;
  padding-top:22px;
}

.ready textarea{
  min-height:150px;
  resize:vertical;
}

.ready-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:14px;
}

.copy,
.share{
  border:1px solid rgba(15,23,23,.14);
  cursor:pointer;
  font:700 11px var(--mono);
  min-height:42px;
  padding:0 14px;
  text-transform:uppercase;
}

.copy{
  background:var(--ink);
  color:#fff;
}

.share{
  background:transparent;
  color:var(--ink);
}

.footer{
  align-items:center;
  border-top:1px solid var(--line);
  display:flex;
  gap:16px;
  justify-content:space-between;
  padding:24px 0 34px;
}

.footer span,
.footer small{
  color:var(--ink-soft);
  font:700 10px var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
}

@media (max-width: 980px){
  .hero,
  .contact{
    grid-template-columns:1fr;
  }

  .poster{
    order:-1;
  }

  .band-heading{
    grid-template-columns:1fr;
  }
}

@media (max-width: 760px){
  .shell{
    width:calc(100% - 28px);
  }

  .topbar{
    align-items:flex-start;
    gap:12px;
    min-height:0;
    padding:18px 0 12px;
  }

  .topnav{
    gap:14px;
    font-size:11px;
  }

  .hero{
    gap:22px;
    padding:16px 0 42px;
  }

  .hero-copy,
  .form-panel{
    padding:22px;
  }

  .hero h1{
    font-size:clamp(48px, 14vw, 70px);
  }

  .bottom-cta{
    padding-bottom:52px;
  }

  .lead{
    font-size:16px;
  }

  .stats,
  .quote-grid{
    grid-template-columns:1fr;
  }

  .copy-band,
  .contact{
    padding:18px 0 52px;
  }

  .footer{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }
}

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