/* The Missile Base — brand tokens from capture (design-tokens.md) */
:root{
  --olive:#869553; --lime:#d5e798; --ink:#0a0a0a; --paper:#ffffff;
  --muted:#5b5b54; --dark:#1c1d18; --maxw:1180px;
  --display:"Big Shoulders Text",Geist,system-ui,sans-serif;
  --body:Geist,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
@font-face{
  font-family:"Geist"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/Geist-VariableFont_wght.woff2") format("woff2");
}
*{box-sizing:border-box}
img{max-width:100%}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.6;font-size:17px;overflow-x:hidden}
h1,h2,h3{font-family:var(--display);line-height:1.05;margin:0 0 .4em;font-weight:700;letter-spacing:.5px}
h1{font-size:clamp(2.4rem,6vw,4.4rem);text-transform:uppercase}
h2{font-size:clamp(1.8rem,4vw,2.8rem)}
.eyebrow{font-family:var(--display);text-transform:uppercase;letter-spacing:2px;color:var(--olive);font-weight:700;font-size:.95rem;margin-bottom:.6rem}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:88px 0}
p{margin:0 0 1rem}
a{color:var(--olive)}
.btn{display:inline-block;background:var(--lime);color:var(--ink);font-family:var(--display);text-transform:uppercase;letter-spacing:1px;font-weight:700;padding:14px 30px;border-radius:999px;text-decoration:none;border:none;cursor:pointer;font-size:1rem}
.btn:hover{filter:brightness(.95)}
.center{text-align:center}

/* Header — floating translucent rounded bar over the hero.
   Divi parity (et_header_layout): max-width 1300px, rgba(0,0,0,.09), 30px radius,
   pulled up over the hero; nav = Geist 19px #000; mobile bar = lime #d5e798. */
header.site{position:absolute;top:0;left:0;right:0;z-index:50}
header.site .wrap{max-width:1240px;width:calc(100% - 104px);margin:22px auto 0;display:flex;align-items:center;justify-content:space-between;background:rgba(0,0,0,.09);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:30px;padding:18px 40px}
header.site .logo{display:block;line-height:0;text-decoration:none}
header.site .logo img{height:30px;width:auto;display:block}
nav{display:flex;align-items:center}
nav a{margin-left:30px;text-decoration:none;color:#000;font-family:var(--body);font-weight:500;font-size:19px;white-space:nowrap}
nav a.cta{background:var(--lime);color:#000;padding:9px 22px;border-radius:999px;font-family:var(--body);text-transform:none;letter-spacing:0;font-weight:600;font-size:18px;white-space:nowrap}
/* Hamburger (hidden on desktop, animates to an X when open) */
.menu-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:9px;background:none;border:none;cursor:pointer}
.menu-toggle span{display:block;height:2.5px;width:100%;background:#000;border-radius:2px;transition:transform .25s,opacity .25s}
header.site.open .menu-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
header.site.open .menu-toggle span:nth-child(2){opacity:0}
header.site.open .menu-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media(max-width:760px){
  /* Inset lime pill; logo centered over a centered hamburger (Divi mobile parity) */
  header.site .wrap{margin:14px 16px 0;width:auto;padding:16px 20px;background:var(--lime);position:relative;flex-direction:column;align-items:center;gap:10px;border-radius:28px}
  header.site .logo img{height:30px}
  .menu-toggle{display:flex;width:36px;height:28px;padding:5px;gap:5px}
  nav{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;align-items:stretch;background:#fff;border-radius:18px;padding:10px;box-shadow:0 16px 40px rgba(0,0,0,.18);z-index:60}
  header.site.open nav{display:flex}
  nav a{margin-left:0;padding:13px 16px;font-size:1.05rem;color:#000;border-radius:10px;text-align:center}
  nav a.cta{margin:6px 0 0;text-align:center;background:var(--lime);font-size:1.05rem}
}

/* Hero */
/* Original hero has no dark overlay — just a very light bottom gradient for
   the CTA area; legibility comes from text-shadow on the headings (Divi parity). */
/* Hero — centered content, fills the viewport (matches original). */
.hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;color:#fff;background:linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,.28)),url("../img/mheader-scaled.webp") center/cover no-repeat}
.hero .wrap{padding:140px 24px;text-align:center}
/* Hero type — exact computed values measured from the live Divi site @1920:
   eyebrow Open Sans 25/23.8 700 lime; H1 Big Shoulders 75/75 700 #fff,
   shadow 6px 6px 6px rgba(0,0,0,.4); sub Geist 34/34 300 -1px uppercase,
   shadow 2.72px x3; lead Geist 20/23.8 300, 1000px, no shadow;
   gaps eyebrow>25>h1>30>sub>16>lead>36>btn. */
.hero .eyebrow{font-family:"Open Sans",Arial,sans-serif;font-size:clamp(1.05rem,3.6vw,25px);line-height:.952;font-weight:700;letter-spacing:normal;text-transform:none;text-decoration:underline;color:var(--lime);margin:0 0 25px}
.hero h1{color:#fff;font-size:clamp(2.6rem,9vw,75px);line-height:1;letter-spacing:normal;margin:0 0 30px;text-shadow:6px 6px 6px rgba(0,0,0,.4)}
.hero .sub{font-family:var(--body);text-transform:uppercase;letter-spacing:-1px;font-size:clamp(1.15rem,5vw,34px);line-height:1;font-weight:300;margin:0 0 16px;text-shadow:.08em .08em .08em rgba(0,0,0,.4)}
.hero p.lead{max-width:1000px;margin:0 auto 36px;font-size:20px;font-weight:300;line-height:1.19;text-shadow:none}
.hero .btn{font-family:var(--body);text-transform:none;letter-spacing:normal;font-weight:300;font-size:18px;line-height:30.6px;padding:12.4px 24px 12.4px 19.6px;border-radius:29px}
@media(max-width:760px){.hero .wrap{padding:120px 22px}}

/* Generic two-column */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
/* Property & History art are pre-composed collages (transparent / white-bg) with
   drop-shadows baked into the artwork — wrap them in a hard shadow box and they
   read as distorted. Use a soft drop-shadow filter that follows the image alpha. */
.split img{width:100%;height:auto;display:block;border-radius:12px;filter:drop-shadow(0 16px 30px rgba(0,0,0,.16))}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:28px}}

/* Anatomy 3-up */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px}
.three img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:cover;background:#fff;border-radius:8px;box-shadow:0 10px 26px rgba(0,0,0,.14)}
@media(max-width:820px){.three{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto}}

/* Dark highlights */
.dark{background:var(--dark);color:#fff}
.dark .eyebrow{color:var(--lime)}
/* Highlights tiles — centered flex wrap (4 + 3), lime hairline border, icon per tile */
.grid-hi{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;margin:44px auto 8px;max-width:1060px}
.grid-hi .card{flex:0 0 232px;max-width:calc(100% - 4px);background:rgba(255,255,255,.04);border:1.5px solid rgba(213,231,152,.55);border-radius:16px;padding:30px 22px 26px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;transition:border-color .2s,background .2s}
.grid-hi .card:hover{border-color:var(--lime);background:rgba(213,231,152,.08)}
.grid-hi .card .ic{display:flex;align-items:center;justify-content:center;width:54px;height:54px}
.grid-hi .card svg{width:48px;height:48px;fill:#fff}
.grid-hi .card .txt{font-weight:600;line-height:1.4;font-size:1.02rem}
/* "Your Vision Starts Here" — olive card (left) + topside photo (right) on the
   same dark stage that flows down from How It Works. */
.vision-band{padding-top:24px}
.vision-split{display:grid;grid-template-columns:1.02fr .98fr;gap:36px;align-items:stretch;max-width:1100px}
.vision{background:var(--olive);color:#fff;border-radius:26px;padding:46px 44px;display:flex;flex-direction:column;justify-content:center}
.vision h3{color:#fff;font-family:var(--display);text-transform:uppercase;font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.02;margin:.1em 0 .5em}
.vision p{color:rgba(255,255,255,.92)}
.vision-list{list-style:none;padding:0;margin:.6rem 0 0;display:flex;flex-direction:column;gap:.55rem}
.vision-list li{position:relative;padding-left:34px;color:#fff;font-weight:500}
.vision-list li::before{content:"";position:absolute;left:0;top:2px;width:21px;height:21px;background:var(--lime);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.vision-img{width:100%;height:100%;min-height:420px;object-fit:cover;border-radius:20px;display:block;box-shadow:0 16px 40px rgba(0,0,0,.35)}
@media(max-width:820px){.vision-split{grid-template-columns:1fr;gap:24px}.vision-img{min-height:280px}}

/* Gallery — 3-up grid; images 7-16 hidden until "Load More" expands it */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.gallery img{width:100%;height:260px;object-fit:cover;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.16);cursor:pointer;transition:transform .25s}
.gallery img:hover{transform:scale(1.02)}
.gallery img.more{display:none}
.gallery.expanded img.more{display:block}
@media(min-width:521px) and (max-width:820px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.gallery{grid-template-columns:1fr}}

/* Outlined pill button (gallery expand/collapse) */
.btn-outline{display:inline-block;margin-top:40px;background:#fff;border:1px solid rgba(0,0,0,.28);color:var(--ink);font-family:var(--body);font-weight:600;padding:14px 30px;border-radius:999px;cursor:pointer;font-size:1rem;transition:background .2s,color .2s,border-color .2s}
.btn-outline:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Lightbox / shadowbox */
.lb{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:100;padding:30px}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:88vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lb .x{position:absolute;top:20px;right:28px;color:#fff;font-size:2.4rem;cursor:pointer;line-height:1;background:none;border:none}
.lb .nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:3rem;cursor:pointer;background:none;border:none;padding:0 18px;user-select:none}
.lb .prev{left:8px}.lb .next{right:8px}

/* Contact */
/* Contact — tunnel photo bg with subtle overlay (Divi: rgba(0,0,0,.19) + blend
   overlay), content on a translucent white panel, form on an olive panel. */
.contact{color:#fff;position:relative;background-color:rgba(0,0,0,.19);background-image:url("../img/contact-bg.webp");background-size:cover;background-position:center;background-blend-mode:overlay}
.contact .split{align-items:start;background:rgba(255,255,255,.28);border-radius:30px;padding:56px 48px}
.contact form{background:var(--olive);border-radius:20px;padding:30px}
.contact form input,.contact form textarea{border:1px solid rgba(0,0,0,.12)}
@media(max-width:820px){.contact .split{padding:36px 26px}.contact form{padding:24px}}
form .row{margin-bottom:16px;display:flex;flex-direction:column}
form label{font-weight:600;margin-bottom:6px}
form input,form textarea{padding:13px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.95);font:inherit}
form textarea{min-height:130px;resize:vertical}
.contact a{color:var(--lime)}
.status{margin-top:10px;font-weight:600;color:var(--lime)}

/* Footer — Divi parity (et_footer_layout): olive #869553 bg, white text,
   brand = Big Shoulders 700 uppercase 29px, copyright = Geist right. */
footer.site{background:var(--olive);color:#fff;padding:26px 0}
footer.site .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
footer.site .brand{font-family:var(--display);text-transform:uppercase;letter-spacing:.5px;color:#fff;font-weight:700;font-size:29px}
footer.site .wrap span:not(.brand){font-size:15px;color:#fff}
@media(max-width:760px){footer.site .wrap{justify-content:center;text-align:center}}

/* ── Mobile audit (mobile-styling skill) ──────────────────────────────
   Desktop-first, matching the existing breakpoint strategy. */
@media(max-width:760px){
  /* Generous desktop section padding reads as dead space on a phone */
  section{padding:52px 0}
  .hero .wrap{padding:104px 22px 96px}
  /* Keep the logo wordmark inside narrow pills (≈232px wide at 26px tall) */
  header.site .logo img{height:26px}
  /* Touch-friendly, full-width submit */
  .contact form .btn{display:block;width:100%;text-align:center}
  /* Anatomy diagrams: tighten the gap once stacked */
  .three{gap:16px}
}
@media(max-width:480px){
  section{padding:44px 0}
  .wrap{padding:0 18px}
  /* One highlight tile per row — bigger tap target, no awkward orphan */
  .grid-hi{gap:16px}
  .grid-hi .card{flex:1 1 100%}
  .gallery img{height:220px}
  .vision{padding:34px 26px}
}