/* Chapmans Pest Control — real palette pulled straight from the actual
   crest logo (deep navy shield, chrome lettering, electric blue glow),
   not an invented "tactical" theme. Oswald (bold condensed, tactical
   without being a costume) for headlines, Inter for everything read at
   length. No WebGL — glow/depth comes from gradients, blur and shadow,
   which is 90% of the visual payoff for a fraction of the build time. */
:root {
  --bg: #060911;
  --panel: #0E1626;
  --panel-2: #131E33;
  --line: rgba(255,255,255,0.09);
  --ink: #EDF1F7;
  --mist: #8B97AC;
  --blue: #2F6FED;
  --blue-glow: #38BDF8;
  --cobalt: #16234A;
  --grad: linear-gradient(135deg, var(--blue-glow) 0%, var(--blue) 55%, #1B3A8A 100%);
  --danger: #E0645A;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }

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

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }

h1, h2 {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-glow);
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
}
.eyebrow::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 10px 2px var(--blue-glow);
  flex: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 7px;
  font-weight: 600;
  font-size: 14.5px;
  border: none;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease, border-color .15s ease, background .15s ease;
}
.btn-lg { padding: 15px 30px; font-size: 15.5px; }
.btn-gradient { background: var(--grad); color: #04070C; }
.btn-gradient:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--blue-glow); color: var(--blue-glow); }

/* ---------- Header ---------- */
/* Transparent + centered nav + no logo at all pre-scroll; past 500px,
   background solidifies and the logo fades in with a glow backing (same
   recipe as the hero's 3D logo). Real 3-column grid instead of flex -
   this is what makes nav-desktop genuinely centered whether or not the
   logo column has anything in it, and keeps the hamburger pinned to a
   fixed column regardless of what else is visible, rather than relying
   on flex re-flow (which is what broke twice in the earlier version). */
.site-header {
  position: sticky; top: 0; z-index: 40; overflow: visible;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
}
.site-header.scrolled {
  background: rgba(6,9,17,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-bar {
  display: grid; grid-template-columns: 0 0 1fr; align-items: center;
  gap: 24px; padding: 14px 32px;
}
.brand-nav-logo {
  grid-column: 1; justify-self: start; position: relative;
  width: 110px; opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.site-header.scrolled .brand-nav-logo { opacity: 1; pointer-events: auto; }
.brand-nav-logo img { position: relative; z-index: 1; width: 100%; display: block; }
.brand-nav-logo-backing {
  position: absolute; inset: 8% 10%; border-radius: 60px;
  background: linear-gradient(160deg, #FBFCFE 0%, #E7ECF4 100%);
  opacity: 0.86; filter: blur(18px); z-index: 0;
}
.nav-desktop { grid-column: 2; display: flex; gap: 30px; transition: opacity .2s ease; }
.nav-desktop a { color: #F5F7FA; font-size: 14.5px; font-weight: 500; transition: color .15s ease; }
.nav-desktop a:hover { color: var(--blue-glow); }
.site-header.scrolled .nav-desktop a { color: var(--mist); }
.site-header.scrolled .nav-desktop a:hover { color: var(--ink); }
/* Real request from a sketch: pre-scroll, the nav items live as a
   vertical stack down the left edge instead of a horizontal centered
   row - explicitly framed as groundwork for other "circular menu" style
   entry points later, not just a one-off layout tweak. position:fixed
   pulls it out of the grid entirely so it can sit anywhere on screen;
   .scrolled reverts every one of these back to the normal grid-column:2
   horizontal row with a plain property reset. */
@media (min-width: 861px) {
  .site-header:not(.scrolled) .nav-desktop {
    position: fixed; left: 50%; margin-left: -480px; top: 330px;
    transform: translateY(-50%); flex-direction: column; gap: 30px;
  }
  .site-header:not(.scrolled) .nav-desktop a { font-size: 24px; }
}
.header-actions {
  grid-column: 3; justify-self: end; display: flex; align-items: center;
  gap: 16px; width: 100%; justify-content: space-between;
}
/* Real bug caught live: 0-width columns 1/2 work great pre-scroll (logo
   is invisible, nav is position:fixed so it doesn't care) but break the
   scrolled state, where the logo and horizontal nav both go back to
   real grid flow and need real column widths - without this override
   they all overflow from the same collapsed point and pile on top of
   each other. Real columns back once there's something solid to anchor
   them to; header-actions stops spanning full width too, since the
   phone/CTA split-to-the-edges look was specifically for the transparent
   full-bleed state, not the compact bar. */
.site-header.scrolled .header-bar { grid-template-columns: 1fr auto 1fr; }
.site-header.scrolled .header-actions { width: auto; justify-content: flex-end; }
.phone-pill {
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px;
}
.phone-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 8px 1px rgba(74,222,128,0.7); }
/* Explicit grid-column, not flex order/margin tricks - the earlier flex
   version let the hamburger become the sole visible flex child and
   space-between collapsed it to the wrong edge. Placing it in the same
   column as header-actions (they're never visible at the same time -
   this media query is what switches between them) makes its position
   fixed regardless of what else on the page is visible. */
.hamburger { grid-column: 3; justify-self: end; display: none; background: none; border: none; cursor: pointer; padding: 6px; flex-direction: column; gap: 5px; }
.hamburger span { width: 22px; height: 2px; background: var(--ink); display: block; }
.nav-mobile { display: none; flex-direction: column; padding: 8px 32px 24px; border-top: 1px solid var(--line); gap: 4px; }
.nav-mobile a { padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 15px; }
.nav-mobile.open { display: flex; }

@media (max-width: 860px) {
  .nav-desktop, .header-actions { display: none; }
  .hamburger { display: flex; }
}

/* ---------- Hero ---------- */
/* Real video background: a basement corner with roaches/ants actually
   emerging from a crack (generated fresh - see chapmans-basement-bg.mjs
   in story-glue). Dimmed + vignetted so the crest and text stay legible
   on top, same "atmosphere not competing content" rule from the earlier
   3D-character build. Back to light-on-dark text since the video is
   inherently dark - the white-bg treatment was right for a plain field,
   wrong once real footage is behind it. */
/* Pulled up 180px behind the (transparent, sticky) nav via negative
   margin, with top padding increased by the same amount - net zero
   shift for the actual content, but the section's own box (and so its
   video/scrim/glow background layers, all position:absolute inset:0)
   now starts under the header instead of below it, so the video is
   what's visible through the transparent nav rather than plain bg. */
.hero-crest { position: relative; overflow: hidden; margin-top: -180px; padding: 276px 32px 100px; }
.hero-crest-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-crest-scrim {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, rgba(6,9,17,0.65) 0%, rgba(6,9,17,0.55) 40%, rgba(6,9,17,0.85) 100%),
    radial-gradient(ellipse 70% 60% at 50% 30%, rgba(6,9,17,0.2) 0%, rgba(6,9,17,0.75) 75%);
}
.hero-crest-glow {
  position: absolute; left: 50%; top: 20%; width: 700px; height: 700px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(47,111,237,0.28) 0%, transparent 68%);
  pointer-events: none; z-index: 0;
}

@media (max-width: 700px) {
  .hero-crest-video { object-position: center 30%; }
}
.hero-crest-content {
  position: relative; z-index: 1; max-width: 720px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
/* 300-420px is the Round Table's converged range, made a real clamp so
   it scales with viewport instead of one fixed number - every icon
   (shield, cross, ant/spider/mouse/bee) stays legible at any size in
   this band, which is the whole reason the range has a ceiling. */
.hero-logo-3d {
  position: relative; width: clamp(300px, 28vw, 420px); aspect-ratio: 300 / 244;
  margin-bottom: 34px; filter: drop-shadow(0 20px 46px rgba(47,111,237,0.5));
}
/* Real request from a reference screenshot: an opaque plaque behind the
   crest, not a floating cutout the video shows through - including
   through the crest's own internal gaps (between the ant's legs, the
   shield's negative space, etc), which the alpha-masked mesh alone
   can't cover since those gaps are genuinely transparent in the source. */
.hero-logo-backing {
  opacity: 0.86;
  filter: blur(34px);
  position: absolute;
  inset: 13% 14%;
  border-radius: 156px;
  background: linear-gradient(160deg, #FBFCFE 0%, #E7ECF4 100%);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.55);
}
.hero-logo-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .5s ease; }
.hero-logo-3d canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.hero-logo-3d-loaded .hero-logo-fallback { opacity: 0; }
/* Real Photoshop-style alpha mask, not a rectangle that happens to sit
   over the logo - the sweep is clipped to the crest's own alpha channel
   (same PNG the 3D mesh's alphaTest already reads), so it only ever
   renders on actual crest pixels, never in the transparent gaps between
   the shield's silhouette and its bounding box. */
.hero-logo-gloss {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3;
  -webkit-mask-image: url('assets/img/logo-transparent.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url('assets/img/logo-transparent.png');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.hero-logo-gloss::after {
  content: ''; position: absolute; top: -60%; left: -60%; width: 35%; height: 220%;
  background: linear-gradient(75deg, transparent 0%, rgba(255,255,255,0.7) 45%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.7) 55%, transparent 100%);
  animation: gloss-sweep 4.5s ease-in-out infinite;
}
@keyframes gloss-sweep {
  0% { left: -60%; }
  38% { left: 125%; }
  100% { left: 125%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-logo-gloss::after { animation: none; display: none; }
}

.hero-crest .eyebrow { justify-content: center; }
.hero-crest .hero-sub { color: var(--mist); font-size: 16.5px; max-width: 540px; margin: 0 auto 32px; }
.hero-crest .hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.hero h1 {
  font-size: clamp(34px, 5vw, 58px); line-height: 1.05; margin-bottom: 22px;
}

/* ---------- Pest grid ---------- */
.pests { padding: 90px 0; }
.pests h2, .why h2, .defender h2, .contact h2 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 44px; max-width: 640px; }
.pest-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.pest-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; transition: border-color .2s ease, transform .2s ease;
}
.pest-card:hover { border-color: var(--blue-glow); transform: translateY(-3px); }
.pest-media { aspect-ratio: 4 / 3; overflow: hidden; }
.pest-media img { width: 100%; height: 100%; object-fit: cover; }
.pest-label { padding: 14px 16px; font-weight: 600; font-size: 14.5px; }

@media (max-width: 900px) { .pest-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .pest-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Defender / ad showcase ---------- */
.defender { padding: 90px 0; background: linear-gradient(180deg, transparent, var(--panel) 15%, var(--panel) 85%, transparent); }
.defender-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 52px; align-items: center; }
.defender-copy p { color: var(--mist); font-size: 16px; line-height: 1.65; margin: 18px 0 26px; max-width: 460px; }
.defender-media { border-radius: 12px; box-shadow: 0 30px 70px -25px rgba(47,111,237,0.35); }

@media (max-width: 860px) { .defender-grid { grid-template-columns: 1fr; } }

/* ---------- Why us ---------- */
.why { padding: 90px 0; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.why-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 26px 22px; }
.why-num {
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 34px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; margin-bottom: 10px;
}
.why-title { font-weight: 600; font-size: 15.5px; margin-bottom: 8px; }
.why-body { color: var(--mist); font-size: 13.5px; line-height: 1.55; }

@media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Contact ---------- */
.contact { padding: 90px 0 110px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.contact-line { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.contact-label { color: var(--mist); width: 130px; flex: none; font-weight: 500; }
.contact-line a:hover { color: var(--blue-glow); }
.todo-flag {
  margin-top: 22px; padding: 14px 16px; border-radius: 8px;
  background: rgba(224,100,90,0.1); border: 1px solid rgba(224,100,90,0.35);
  color: #F0A69F; font-size: 13px; line-height: 1.5;
}

.contact-form { display: flex; flex-direction: column; gap: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 28px; }
.contact-form label { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--mist); }
.contact-form input, .contact-form select, .contact-form textarea {
  background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 6px;
  color: var(--ink); padding: 11px 13px; font-size: 14.5px; font-family: 'Inter', sans-serif;
  resize: vertical;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--blue-glow); }

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

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 28px 0; }
.footer-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-meta { color: var(--mist); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .pest-card { transition: none; }
}