/* ==========================================================================
   ALL SERVICE ROOFING & CONSTRUCTION — premium animated site
   Built to the ANIMATED-SITE-FORGE model-proof standard.
   Palette: patriotic red / white / navy blue with a warm sunlight feel.
   Bright, warm, trustworthy — NOT dark/moody. Vanilla CSS. No build step.
   ========================================================================== */

:root {
  /* ---- palette (All Service brand: red, white, blue) ---- */
  --paper:     #fdfcf8;   /* warm off-white base */
  --paper-2:   #f6f3ec;   /* warm section tint */
  --paper-3:   #ffffff;   /* pure white surfaces / cards */
  --navy:      #102a54;   /* brand navy — headings, footer */
  --navy-2:    #1d4f91;   /* brighter brand blue */
  --navy-soft: #3a6bb5;
  --red:       #d7263d;   /* brand red — primary CTA */
  --red-soft:  #e8455a;
  --red-deep:  #a31226;
  --sun:       #f2b544;   /* warm sunlight accent (glows only) */
  --green:     #1a9a52;
  --white:     #ffffff;
  --ink:       #1c2b45;   /* deep navy-ink body text */
  --ink-dim:   #5b6a84;   /* secondary text */
  --line:      rgba(16,42,84,0.14);
  --glass:     rgba(255,255,255,0.72);
  --glass-2:   rgba(255,255,255,0.92);

  --font-head: 'Archivo','Montserrat',sans-serif;
  --font-body: 'Inter','Lato',sans-serif;
  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 14px 44px rgba(16,42,84,0.10);
  --shadow-red: 0 10px 34px rgba(215,38,61,0.28);
  --shadow-navy: 0 10px 34px rgba(29,79,145,0.24);
  --t: 0.35s cubic-bezier(0.4,0,0.2,1);
  --nav-h: 80px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  scroll-padding-top: var(--nav-h);
}
img, svg, video { max-width: 100%; }
img { display: block; }
a { color: inherit; }

/* warm morning-sky background: soft sun glow + faint red/blue washes */
body.asr-bg {
  position: relative;
  background:
    radial-gradient(1100px 640px at 85% -10%, rgba(242,181,68,0.20), transparent 60%),
    radial-gradient(900px 560px at 8% -6%, rgba(29,79,145,0.10), transparent 55%),
    radial-gradient(760px 480px at 50% 108%, rgba(215,38,61,0.06), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}
body.asr-bg::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(16,42,84,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,42,84,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 20%, #000 0%, transparent 74%);
  -webkit-mask-image: radial-gradient(circle at 50% 20%, #000 0%, transparent 74%);
  pointer-events: none; z-index: 0;
}

/* drifting sunlit-dust field (light-theme take on the starfield) */
.sunfield { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sunfield span {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(242,181,68,0.55);
  box-shadow: 0 0 8px rgba(242,181,68,0.5);
  animation: twinkle 4.5s ease-in-out infinite;
}
.sunfield span:nth-child(3n)  { background: rgba(29,79,145,0.30); box-shadow: 0 0 8px rgba(29,79,145,0.28); }
.sunfield span:nth-child(4n)  { background: rgba(215,38,61,0.28); box-shadow: 0 0 8px rgba(215,38,61,0.25); }
@keyframes twinkle { 0%,100%{opacity:.1;transform:scale(.6);} 50%{opacity:.75;transform:scale(1);} }

/* ---------- typography ---------- */
h1,h2,h3,h4 { font-family: var(--font-head); font-weight: 800; line-height: 1.08; color: var(--navy); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-head); font-weight: 700;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--navy-2);
}
.eyebrow::before { content: "★"; font-size: .9rem; color: var(--red); }
.grad-text {
  background: linear-gradient(100deg, var(--red) 0%, var(--navy-2) 96%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.amp { font-style: normal; color: var(--red); }
.fine { color: var(--ink-dim); font-size: .78rem; margin-top: 1.2rem; }

/* ---------- layout ---------- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 1; }
.section { padding: clamp(3.4rem, 8vw, 6.5rem) 0; position: relative; z-index: 1; }
.section-alt { background: linear-gradient(180deg, rgba(29,79,145,0.05), rgba(242,181,68,0.06)); }
.center { text-align: center; }
.section-head { max-width: 720px; margin: 0 auto clamp(2rem,5vw,3.2rem); text-align: center; }
.section-head h2 { font-size: clamp(1.9rem,4.4vw,3rem); margin-top: .7rem; }
.section-head p { color: var(--ink-dim); margin-top: 1rem; font-size: 1.08rem; }

/* ==========================================================================
   STICKY NAV (light, shrinks on scroll)
   ========================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.6rem; height: var(--nav-h);
  background: rgba(253,252,248,0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: height var(--t), background var(--t), border-color var(--t), padding var(--t), box-shadow var(--t);
}
.nav.shrink {
  height: 64px; padding: .5rem 1.6rem;
  background: rgba(255,255,255,0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 30px rgba(16,42,84,0.10);
}

/* real logo (white-background PNG) on a clean white chip — the chip IS the design,
   so the logo's white bg reads intentional on any surface */
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.logo-chip {
  display: inline-flex; align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .3rem .7rem;
  box-shadow: 0 4px 16px rgba(16,42,84,0.08);
  transition: box-shadow var(--t), transform var(--t);
}
.nav-logo:hover .logo-chip { box-shadow: 0 6px 22px rgba(16,42,84,0.14); transform: translateY(-1px); }
.logo-img { height: 46px; width: auto; display: block; transition: height var(--t); }
.nav.shrink .logo-img { height: 36px; }

.nav-links { display: flex; align-items: center; gap: 1.5rem; }
.nav-links a { text-decoration: none; color: var(--ink-dim); font-family: var(--font-head); font-weight: 600; font-size: .92rem; transition: color var(--t); position: relative; }
.nav-links a:not(.btn):hover { color: var(--navy); }
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--red), var(--navy-2)); transition: width var(--t);
}
.nav-links a:not(.btn):hover::after { width: 100%; }
.nav-toggle { display: none; background: none; border: 0; color: var(--navy); cursor: pointer; }
.nav-toggle svg { width: 28px; height: 28px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  padding: .9rem 1.65rem; border-radius: 50px; border: none; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--t), box-shadow var(--t), background var(--t);
}
.btn-primary { background: linear-gradient(100deg, var(--red), var(--red-soft)); color: var(--white); box-shadow: var(--shadow-red); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 44px rgba(215,38,61,0.4); }
.btn-navy { background: linear-gradient(100deg, var(--navy), var(--navy-2)); color: var(--white); box-shadow: var(--shadow-navy); }
.btn-navy:hover { transform: translateY(-3px); box-shadow: 0 14px 44px rgba(29,79,145,0.38); }
.btn-ghost { background: var(--white); color: var(--navy); border: 1.5px solid var(--line); box-shadow: 0 4px 16px rgba(16,42,84,0.06); }
.btn-ghost:hover { border-color: rgba(29,79,145,0.4); transform: translateY(-3px); }
.btn-sm { padding: .6rem 1.25rem; font-size: .85rem; }
.btn .arr { transition: transform var(--t); }
.btn:hover .arr { transform: translateX(4px); }

/* ---------- veteran-owned badge (hero trust signal) ---------- */
.vet-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-head); font-weight: 800;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy);
  background: linear-gradient(90deg, rgba(215,38,61,0.10), rgba(255,255,255,0.9), rgba(29,79,145,0.10));
  border: 1px solid rgba(29,79,145,0.28);
  border-left: 4px solid var(--red);
  border-radius: 8px;
  padding: .5rem .95rem;
  box-shadow: 0 4px 16px rgba(16,42,84,0.08);
}
.vet-badge svg { width: 15px; height: 15px; fill: var(--red); flex: none; }
.vet-badge-lg { font-size: .8rem; }
.vet-badge-foot { margin-top: 1.1rem; background: rgba(255,255,255,0.08); color: #eaf0fa; border-color: rgba(255,255,255,0.22); }
.vet-badge-foot svg { fill: var(--red-soft); }

/* ==========================================================================
   HERO — real drone photo of a finished All Service roof (roof_1.jpeg).
   A navy scrim, heaviest on the text side (~86% -> transparent), keeps the
   white headline + red CTA perfectly legible over the photo.
   ========================================================================== */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding-top: var(--nav-h); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; width: 100%; }
.hero-copy { position: relative; z-index: 3; max-width: 640px; }

/* the photo layer — cover-positioned, slow cinematic push-in (Ken Burns) */
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
  animation: heroZoom 24s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroZoom { from { transform: scale(1.02); } to { transform: scale(1.1); } }

/* legibility scrim: strong navy on the copy side fading across, plus a soft
   top/bottom vignette so the nav, trust row and scroll cue stay readable */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(98deg, rgba(8,20,42,0.88) 0%, rgba(11,26,52,0.72) 38%, rgba(11,26,52,0.34) 66%, rgba(11,26,52,0.12) 100%),
    linear-gradient(180deg, rgba(8,20,42,0.42) 0%, transparent 26%, transparent 68%, rgba(8,20,42,0.58) 100%);
}

/* light-on-photo type overrides (scoped to the photo hero only) */
.hero-photo h1 { color: var(--white); text-shadow: 0 2px 26px rgba(4,12,28,0.5); }
.hero-photo .grad-text {
  background: linear-gradient(100deg, #ff6b7f 0%, #8db8ff 96%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-photo .sub { color: #d9e2f1; }
.hero-photo .sub strong { color: var(--white); }
.hero-photo .hero-trust { color: #e8eef8; text-shadow: 0 1px 10px rgba(4,12,28,0.55); }
.hero-photo .btn-ghost { background: rgba(255,255,255,0.94); }
.hero-photo .hero-copy .vet-badge {
  background: linear-gradient(90deg, rgba(255,236,239,0.96), rgba(255,255,255,0.96), rgba(232,240,252,0.96));
}
.hero-photo .scroll-cue { color: #dfe7f4; }
.hero-photo .scroll-cue .mouse { border-color: rgba(255,255,255,0.55); }

/* proof chip — anchors the photo as REAL work, bottom-right */
.hero-proof { position: absolute; right: 1.4rem; bottom: 1.4rem; z-index: 3; }
.hero-proof-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-head); font-weight: 700; font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--white); background: rgba(8,20,42,0.55);
  border: 1px solid rgba(255,255,255,0.28); border-radius: 50px;
  padding: .5rem .95rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; animation: fadeUp .8s ease 1.1s forwards;
}
.hero-copy .vet-badge { margin-bottom: 1.3rem; opacity: 0; animation: fadeUp .8s ease .05s forwards; }
.hero h1 { font-size: clamp(2.6rem, 6.2vw, 4.4rem); letter-spacing: -.02em; }
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span {
  display: inline-block; transform: translateY(115%);
  animation: heroRise .9s cubic-bezier(.19,1,.22,1) forwards;
}
.hero h1 .line:nth-child(2) > span { animation-delay: .12s; }
.hero h1 .line:nth-child(3) > span { animation-delay: .24s; }
@keyframes heroRise { to { transform: translateY(0); } }
.hero .sub {
  color: var(--ink-dim); font-size: clamp(1.05rem,1.6vw,1.28rem); max-width: 560px; margin: 1.5rem 0 2rem;
  opacity: 0; animation: fadeUp .8s ease .5s forwards;
}
.hero .sub strong { color: var(--navy); }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; opacity: 0; animation: fadeUp .8s ease .68s forwards; }
.hero-trust { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-top: 2rem; color: var(--ink-dim); font-size: .88rem; font-weight: 500; opacity: 0; animation: fadeUp .8s ease .86s forwards; }
.hero-trust span { display: inline-flex; align-items: center; gap: .4rem; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

/* scroll cue */
.scroll-cue { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 4; color: var(--ink-dim); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; text-align: center; opacity: 0; animation: fadeUp 1s ease 1.4s forwards; }
.scroll-cue .mouse { width: 22px; height: 34px; border: 2px solid rgba(16,42,84,0.3); border-radius: 12px; margin: 0 auto .5rem; position: relative; }
.scroll-cue .mouse::after { content:""; position:absolute; left:50%; top:6px; width:3px; height:6px; border-radius:2px; background: var(--red); transform: translateX(-50%); animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 0%{opacity:0;top:6px;} 40%{opacity:1;} 100%{opacity:0;top:16px;} }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
.reveal.d5 { transition-delay: .40s; } .reveal.d6 { transition-delay: .48s; }

/* ---------- panels / grids / pills ---------- */
.panel { background: linear-gradient(180deg, var(--glass-2), var(--glass)); border: 1px solid var(--line); border-radius: var(--radius); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow); }
.grid { display: grid; gap: 1.4rem; }
.g2 { grid-template-columns: repeat(2,1fr); }
.g3 { grid-template-columns: repeat(3,1fr); }
.g4 { grid-template-columns: repeat(4,1fr); }

.pill { display:inline-flex; align-items:center; gap:.4rem; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.28rem .7rem; border-radius:50px; }
.pill-red  { background: rgba(215,38,61,0.10); color: var(--red); border:1px solid rgba(215,38,61,0.3); }
.pill-navy { background: rgba(29,79,145,0.10); color: var(--navy-2); border:1px solid rgba(29,79,145,0.3); }

/* ==========================================================================
   SERVICE CARDS — white cards, cursor-spotlight, warm lift
   ========================================================================== */
.svc {
  position: relative; padding: 1.8rem 1.6rem; border-radius: var(--radius);
  background: var(--paper-3);
  border: 1px solid var(--line); overflow: hidden;
  box-shadow: 0 6px 22px rgba(16,42,84,0.06);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.svc::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity var(--t);
  background: radial-gradient(380px circle at var(--mx,50%) var(--my,0%), rgba(242,181,68,0.16), transparent 62%);
  pointer-events: none;
}
.svc:hover { transform: translateY(-8px); border-color: rgba(215,38,61,0.45); box-shadow: 0 18px 44px rgba(16,42,84,0.14); }
.svc:hover::before { opacity: 1; }
.svc-icon {
  width: 58px; height: 58px; border-radius: 14px; display: grid; place-items: center;
  font-size: 1.7rem; margin-bottom: 1.1rem;
  background: linear-gradient(135deg, rgba(215,38,61,.10), rgba(29,79,145,.10));
  border: 1px solid var(--line);
}
.svc h3 { font-size: 1.18rem; margin-bottom: .2rem; }
.svc p { color: var(--ink-dim); font-size: .95rem; margin-top: .7rem; }
.svc .status { display:inline-flex; align-items:center; gap:.45rem; margin-top:1rem; font-size:.78rem; color: var(--green); font-family: var(--font-head); font-weight:600; }
.svc .status .dot { width:8px; height:8px; border-radius:50%; background: var(--green); box-shadow:0 0 8px rgba(26,154,82,0.6); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.25;} }

/* ==========================================================================
   VETERAN-OWNED PANEL
   ========================================================================== */
.vet-panel { position: relative; overflow: hidden; padding: clamp(1.8rem,4vw,3rem); }
.vet-stripe {
  position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--red) 0 33.3%, var(--white) 33.3% 66.6%, var(--navy-2) 66.6% 100%);
}
.vet-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.4rem; align-items: center; }
.vet-copy h2 { font-size: clamp(1.8rem,4vw,2.6rem); margin: 1.1rem 0 1rem; }
.vet-copy p { color: var(--ink-dim); font-size: 1.05rem; }
.vet-copy p strong { color: var(--navy); }
.vet-list { list-style: none; margin: 1.4rem 0 1.8rem; display: flex; flex-direction: column; gap: .8rem; }
.vet-list li { position: relative; padding-left: 1.8rem; font-size: .98rem; color: var(--ink-dim); }
.vet-list li strong { color: var(--navy); }
.vet-list li::before { content: "★"; position: absolute; left: 0; color: var(--red); font-weight: 900; }

/* real founder photo — framed card, brand-striped edge */
.owner-card {
  position: relative; max-width: 340px; margin: 0 auto;
  background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem .8rem 1.1rem; box-shadow: var(--shadow);
  transition: transform var(--t), box-shadow var(--t);
}
.owner-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(16,42,84,0.16); }
.owner-img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 12px;
  border: 1px solid var(--line);
}
.owner-card figcaption { text-align: center; margin-top: .85rem; display: flex; flex-direction: column; gap: .15rem; }
.owner-card figcaption strong { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 1.05rem; }
.owner-card figcaption span { color: var(--ink-dim); font-size: .82rem; }
.owner-card::after {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: -1px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--red) 0 33.3%, #dfe6f2 33.3% 66.6%, var(--navy-2) 66.6% 100%);
}

/* ==========================================================================
   STATS / COUNTERS
   ========================================================================== */
.stats { display:grid; grid-template-columns: repeat(4,1fr); gap:1.4rem; }
.vet-stats { margin-top: clamp(2rem,4vw,2.8rem); }
.stat { text-align:center; padding:2rem 1rem; border-radius: var(--radius); background: var(--paper-3); border:1px solid var(--line); box-shadow: 0 6px 18px rgba(16,42,84,0.05); }
.stat .num { font-family:var(--font-head); font-weight:900; font-size: clamp(2.2rem,5vw,3.2rem); color: var(--red); line-height:1; }
.stat .lbl { color: var(--ink-dim); font-size:.9rem; margin-top:.5rem; }

/* ==========================================================================
   STORM / INSURANCE PANEL + STEPS
   ========================================================================== */
.storm-panel { display:grid; grid-template-columns: 1.1fr .9fr; gap: 2.4rem; align-items:start; padding: clamp(1.6rem,4vw,2.8rem); }
.storm-h2 { font-size: clamp(1.8rem,4vw,2.6rem); margin-top:.6rem; }
.storm-copy { color: var(--ink-dim); margin-top: 1rem; }
.storm-list { list-style:none; margin-top: 1.4rem; display:flex; flex-direction:column; gap:.7rem; }
.storm-list li { position:relative; padding-left:1.7rem; font-size:.98rem; }
.storm-list li::before { content:"✓"; position:absolute; left:0; color:var(--navy-2); font-weight:900; }

.steps { display: grid; gap: 1.2rem; position: relative; }
.steps-v { grid-template-columns: 1fr; }
.steps-v::before {
  content:""; position:absolute; left:30px; top:40px; bottom:40px; width:2px;
  background: linear-gradient(180deg, transparent, var(--red), var(--navy-2), transparent);
  opacity:.4; z-index:0;
}
.step { position: relative; z-index:1; display:grid; grid-template-columns: 62px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 1rem; align-items:start; padding: .4rem 0; }
.step .num {
  grid-column: 1; grid-row: 1 / span 2;
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-head); font-weight: 900; font-size: 1.4rem;
  color: var(--white); background: linear-gradient(135deg, var(--red), var(--navy-2));
  box-shadow: var(--shadow-navy);
}
.step h3 { grid-column: 2; grid-row: 1; font-size: 1.15rem; margin-bottom: .3rem; }
.step p { grid-column: 2; grid-row: 2; }
.step p { color: var(--ink-dim); font-size: .95rem; }
.storm-steps { display:flex; flex-direction:column; gap: 1.6rem; }
.storm-steps .btn { align-self: flex-start; }

/* ==========================================================================
   OUR WORK / PROMO VIDEO (vertical 9:16 player)
   ========================================================================== */
.work-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,5vw,3.4rem); align-items: center; }
.work-copy h2 { font-size: clamp(1.9rem,4.4vw,3rem); margin-top: .7rem; }
.work-copy > p { color: var(--ink-dim); margin-top: 1rem; font-size: 1.05rem; }
.work-copy .btn { margin-top: 1.8rem; }
.video-slot { display: grid; place-items: center; }
.phone-frame {
  position: relative;
  width: min(320px, 86vw);
  border-radius: 26px;
  background: var(--navy);
  padding: 10px;
  box-shadow: 0 24px 60px rgba(16,42,84,0.28), 0 0 0 1px rgba(255,255,255,0.4) inset;
}
.phone-frame::before {
  content: ""; position: absolute; inset: -14px; z-index: -1; border-radius: 34px;
  background: radial-gradient(60% 60% at 50% 40%, rgba(242,181,68,0.30), transparent 70%);
  filter: blur(18px);
}
.phone-frame video {
  display: block; width: 100%; aspect-ratio: 9/16; max-height: 640px;
  object-fit: cover; border-radius: 18px; background: #0b1c38;
}

/* ==========================================================================
   REAL PROJECT GALLERY — owner's actual drone shots (rounded cards,
   subtle hover zoom) + clearly-marked timelapse placeholder slot
   ========================================================================== */
.gallery-head { margin-top: clamp(3.2rem, 7vw, 5rem); }
.gcard {
  margin: 0; background: var(--paper-3); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 6px 22px rgba(16,42,84,0.06);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.gcard:hover { transform: translateY(-8px); border-color: rgba(29,79,145,0.45); box-shadow: 0 18px 44px rgba(16,42,84,0.14); }
.gimg { position: relative; overflow: hidden; aspect-ratio: 4/3; background: var(--paper-2); }
.gimg img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .65s cubic-bezier(0.4,0,0.2,1);
}
.gcard:hover .gimg img { transform: scale(1.07); }
.gtag {
  position: absolute; top: .8rem; left: .8rem;
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-head); font-weight: 700; font-size: .64rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--white); background: rgba(8,20,42,0.6);
  border: 1px solid rgba(255,255,255,0.28); border-radius: 50px;
  padding: .32rem .7rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.gcard figcaption { padding: 1rem 1.2rem 1.25rem; display: flex; flex-direction: column; gap: .25rem; }
.gcard figcaption strong { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 1rem; }
.gcard figcaption span { color: var(--ink-dim); font-size: .85rem; }

/* timelapse placeholder card — becomes a playable video once TIMELAPSE_URL
   is set in assets/site.js (never fake a before/after) */
.gsoon {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem;
  background:
    radial-gradient(80% 90% at 50% 0%, rgba(29,79,145,0.5), transparent 70%),
    linear-gradient(160deg, var(--navy), #0b1c38);
  text-align: center; padding: 1rem;
}
.gplay {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--white); background: rgba(215,38,61,0.9);
  box-shadow: 0 0 0 0 rgba(215,38,61,0.45);
  animation: playPulse 2.4s ease-out infinite;
}
.gplay svg { width: 26px; height: 26px; margin-left: 3px; }
@keyframes playPulse {
  0% { box-shadow: 0 0 0 0 rgba(215,38,61,0.45); }
  70% { box-shadow: 0 0 0 18px rgba(215,38,61,0); }
  100% { box-shadow: 0 0 0 0 rgba(215,38,61,0); }
}
.gsoon-title { font-family: var(--font-head); font-weight: 800; color: var(--white); font-size: 1.1rem; }
.pill-soon { background: rgba(255,255,255,0.1); color: #cdd9ec; border: 1px solid rgba(255,255,255,0.25); }
.gsoon video { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.quote {
  position: relative; padding: 1.8rem 1.6rem; border-radius: var(--radius);
  background: var(--paper-3); border: 1px solid var(--line);
  box-shadow: 0 6px 22px rgba(16,42,84,0.06);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
  display: flex; flex-direction: column; gap: .9rem;
}
.quote:hover { transform: translateY(-6px); border-color: rgba(29,79,145,0.45); box-shadow: 0 18px 44px rgba(16,42,84,0.14); }
.quote .starrow { color: var(--sun); letter-spacing: .18em; font-size: 1rem; filter: drop-shadow(0 1px 3px rgba(242,181,68,.45)); }
.quote blockquote { color: var(--ink); font-size: .98rem; line-height: 1.65; flex: 1; }
.quote figcaption { color: var(--ink-dim); font-size: .85rem; font-family: var(--font-head); font-weight: 600; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }

/* ==========================================================================
   CONTACT / QUOTE FORM
   ========================================================================== */
.contact-grid { display:grid; grid-template-columns: 1.15fr .85fr; gap: 1.6rem; align-items:start; }
.quote-form { padding: clamp(1.5rem,3vw,2.2rem); display:flex; flex-direction:column; gap: 1.1rem; }
.quote-form .frow { display:grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.quote-form label { display:flex; flex-direction:column; gap:.45rem; font-family: var(--font-head); font-weight:600; font-size:.85rem; color: var(--ink-dim); }
.quote-form input, .quote-form select, .quote-form textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .8rem .95rem; min-height: 48px; width: 100%;
  transition: border-color var(--t), box-shadow var(--t);
}
.quote-form textarea { min-height: 90px; resize: vertical; }
.quote-form select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--navy-2) 50%), linear-gradient(135deg, var(--navy-2) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.quote-form input::placeholder, .quote-form textarea::placeholder { color: rgba(91,106,132,0.55); }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus {
  outline: none; border-color: rgba(29,79,145,0.55); box-shadow: 0 0 0 3px rgba(29,79,145,0.15);
}
.quote-form .btn { justify-content:center; margin-top:.3rem; }
.quote-form .fine { margin-top: .2rem; }

.contact-side { display:flex; flex-direction:column; gap: 1.4rem; }
.cbox { padding: 1.6rem; }
.cbox h3 { font-size: 1.05rem; margin-bottom: .9rem; }
.cline { display:flex; align-items:center; gap:.6rem; text-decoration:none; color: var(--navy); font-family: var(--font-head); font-weight:600; font-size:.95rem; padding:.45rem 0; min-height:44px; transition: color var(--t); }
.cline:hover { color: var(--red); }
.cline .ph { font-style: normal; font-size:.68rem; color: var(--red); border:1px solid rgba(215,38,61,0.35); border-radius:50px; padding:.1rem .5rem; text-transform:uppercase; letter-spacing:.08em; }
.area-lead { color: var(--ink-dim); font-size:.9rem; margin-bottom:.7rem; }
.area { list-style:none; display:grid; grid-template-columns: repeat(2,1fr); gap:.45rem .8rem; }
.area li { position:relative; padding-left:1.2rem; font-size:.92rem; color:var(--ink); }
.area li::before { content:"⌂"; position:absolute; left:0; color:var(--red); }
.cbox .fine { margin-top: .9rem; }

/* ==========================================================================
   FINAL CTA + FOOTER (navy footer; logo lives on its white chip)
   ========================================================================== */
.cta-final { text-align:center; padding: clamp(2.8rem,6vw,4.4rem); border-radius: 26px; position: relative; overflow: hidden; }
.cta-final::after { content:""; position:absolute; inset:0; background: radial-gradient(620px circle at 50% 0%, rgba(242,181,68,0.20), transparent 60%); pointer-events:none; }
.cta-final h2 { font-size: clamp(2rem,5vw,3.2rem); }
.cta-final p { color: var(--ink-dim); max-width: 560px; margin: 1rem auto 2rem; }
.cta-final .btn { position: relative; z-index: 1; }

.foot { background: linear-gradient(180deg, var(--navy), #0b1c38); color: #c6d2e6; margin-top: 3rem; padding: 3.4rem 1.5rem 2rem; position: relative; z-index:1; }
.foot::before { content:""; display:block; position:absolute; top:0; left:0; right:0; height:5px; background: linear-gradient(90deg, var(--red) 0 33.3%, var(--white) 33.3% 66.6%, var(--navy-2) 66.6% 100%); }
.foot-grid { max-width:1180px; margin:0 auto; display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:2rem; }
.foot-logo { margin-bottom: 1.1rem; display: inline-flex; }
.logo-chip-foot { box-shadow: 0 8px 26px rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.25); }
.foot p { color: #a9b8d2; font-size:.9rem; }
.foot h4 { font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:#eaf0fa; margin-bottom:1rem; }
.foot ul { list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.foot a { color: #a9b8d2; text-decoration:none; font-size:.92rem; transition: color var(--t); }
.foot a:hover { color: var(--white); }
.foot-base { max-width:1180px; margin: 2rem auto 0; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,0.14); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; color:#8fa2c2; font-size:.8rem; }

/* ==========================================================================
   STICKY THUMB-REACHABLE MOBILE CTA (phone-first)
   ========================================================================== */
.mcta {
  display: none;
  position: fixed; left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 300;
  align-items: center; justify-content: center; gap: .5rem;
  min-height: 54px; padding: .95rem 1.2rem; border-radius: 50px;
  font-family: var(--font-head); font-weight: 800; font-size: 1rem;
  text-decoration: none; text-align: center;
  color: var(--white); background: linear-gradient(100deg, var(--red), var(--navy-2));
  box-shadow: 0 10px 34px rgba(16,42,84,0.3), 0 0 26px rgba(215,38,61,0.32);
}
.mcta .arr { transition: transform var(--t); }
.mcta:active .arr { transform: translateX(4px); }

/* ==========================================================================
   RESPONSIVE — PHONE-FIRST
   Breakpoints: 940 · 768 · 480 · 360. Tap targets >=44px. No horizontal scroll.
   ========================================================================== */

/* ---- <=940px : collapse multi-column grids, stack hero ---- */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* photo hero: pull the scrim heavier when the copy spans full width */
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(8,20,42,0.62) 0%, rgba(11,26,52,0.6) 55%, rgba(8,20,42,0.74) 100%);
  }
  .g2, .g3, .g4, .svc-grid, .gallery-grid { grid-template-columns: 1fr; }
  .storm-panel, .contact-grid, .vet-grid, .work-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2,1fr); }
  .foot-grid { grid-template-columns: 1fr; }
  .work-copy { text-align: left; }
}

/* ---- <=768px : mobile nav (hamburger) + thumb CTA on ---- */
@media (max-width: 768px) {
  :root { --nav-h: 66px; }
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(255,255,255,0.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line); padding: .5rem 1.25rem 1rem;
    box-shadow: 0 20px 40px rgba(16,42,84,0.12);
    transform: translateY(-160%); transition: transform var(--t);
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { padding: .95rem .2rem; min-height: 48px; display: flex; align-items: center; border-bottom: 1px solid var(--line); color: var(--ink); }
  .nav-links a.btn { border: none; margin-top: .7rem; justify-content: center; min-height: 50px; color: var(--white); }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
  .mcta { display: flex; }
  .foot { padding-bottom: 6rem; }
  .btn { min-height: 46px; }
  .logo-img { height: 38px; }
  .nav.shrink .logo-img { height: 32px; }
}

/* ---- <=480px : large phones (e.g. 390pt logical) ---- */
@media (max-width: 480px) {
  .wrap { padding: 0 1.1rem; }
  .section { padding: 3rem 0; }
  .hero { min-height: auto; padding-top: calc(var(--nav-h) + 2.4rem); padding-bottom: 3.6rem; }
  .hero h1 { font-size: clamp(2rem, 9.5vw, 2.7rem); }
  .hero .sub { font-size: 1rem; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .hero-proof { right: .9rem; bottom: .9rem; }
  .hero-proof-chip { font-size: .6rem; padding: .4rem .75rem; }
  .hero-trust { gap: .8rem 1.2rem; font-size: .82rem; }
  .hero-copy .vet-badge { font-size: .66rem; padding: .45rem .7rem; }
  .scroll-cue { display: none; }
  .section-head p { font-size: 1rem; }
  .storm-panel { padding: 1.4rem; }
  .storm-steps .btn { align-self: stretch; justify-content: center; }
  .quote-form .frow { grid-template-columns: 1fr; }
  .cta-final .btn { width: 100%; }
  .stat { padding: 1.4rem .6rem; }
  .vet-panel { padding: 1.5rem 1.2rem; }
  .vet-copy .btn { width: 100%; justify-content: center; }
  .work-copy .btn { width: 100%; justify-content: center; }
  .phone-frame { width: min(290px, 84vw); }
}

/* ---- <=360px : small phones ---- */
@media (max-width: 360px) {
  .wrap { padding: 0 .9rem; }
  .nav { padding: .8rem 1rem; }
  .hero h1 { font-size: clamp(1.8rem, 10.5vw, 2.2rem); }
  .hero-trust { flex-direction: column; gap: .5rem; }
  .stats { grid-template-columns: 1fr; }
  .area { grid-template-columns: 1fr; }
  .logo-img { height: 34px; }
  .mcta { font-size: .92rem; }
  .step { grid-template-columns: 52px 1fr; }
  .step .num { width: 52px; height: 52px; font-size: 1.2rem; }
  .steps-v::before { left: 25px; }
  .vet-badge { letter-spacing: .08em; }
  .phone-frame { width: min(260px, 88vw); }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .hero h1 .line > span { transform: none; }
  .hero .sub, .hero-cta, .hero-trust, .hero-copy .vet-badge, .scroll-cue, .hero-proof-chip { opacity: 1; animation: none; }
  .hero-bg img { transform: none; }
}