/* ==========================================================================
   Papa's Aerial Services — site stylesheet
   Palette derived from the client's own logo ink (#008CE0), then darkened
   by formula until every text pairing measures 4.5:1 or better.
   ========================================================================== */

:root{
  /* seeds */
  --ink:#06192A;
  --ink-2:#0B2A44;
  --ink-3:#123B58;
  --accent:#007BC5;
  --accent-dark:#0067A5;
  --accent-deep:#00568A;
  --accent-lift:#38A9F0;
  --gold:#F4B740;
  --gold-ink:#8A5F05;
  --paper:#FFFFFF;
  --mist:#EEF3F8;
  --mist-2:#E2EBF3;
  --line:#D8E2EC;
  --line-dark:rgba(255,255,255,.14);
  --text:#0E2131;
  --muted:#4E6072;
  --muted-dark:#9FB6CB;
  --ok:#0E7A57;

  --radius-card:18px;
  --radius-btn:12px;
  --shadow:0 20px 50px -24px rgba(11,31,51,.45);
  --shadow-sm:0 10px 24px -16px rgba(11,31,51,.5);
  --container:1180px;
  --gutter:20px;

  --font-d:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-b:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* --------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--font-b);font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

/* Unsized inline icons default to 300x150 and blow up a flex button.
   This rule sits high, before any component rule, on purpose. */
svg:not([class]){width:1.12em;height:1.12em;flex:none}
.icon{width:1.12em;height:1.12em;flex:none}
.icon-lg{width:22px;height:22px;flex:none}

h1,h2,h3,h4{
  font-family:var(--font-d);font-weight:700;line-height:1.1;letter-spacing:-.02em;
  margin:0 0 .5em;
  /* overflow-wrap alone. hyphens:auto was breaking display headlines into
     "photogra-phy" on a phone; overflow-wrap still prevents a long token
     (a bare domain, a slug) from overflowing its own box, without inserting
     a hyphen into an ordinary word. */
  overflow-wrap:break-word;hyphens:manual;
}
h1{font-size:clamp(34px,4.6vw,52px);font-weight:800}
h2{font-size:clamp(27px,3.6vw,42px)}
h3{font-size:clamp(19px,2.1vw,23px);font-weight:600;letter-spacing:-.01em}
h4{font-size:17px;font-weight:700}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(56px,7vw,96px)}
.section--mist{background:var(--mist)}
.section--ink{background-color:var(--ink);color:#EAF2FA}
.section--ink h1,.section--ink h2,.section--ink h3{color:#fff}
.section--tight{padding-block:clamp(40px,5vw,64px)}
.center{text-align:center}
.lede{font-size:clamp(17px,1.5vw,19px);color:var(--muted);max-width:64ch}
.center .lede{margin-inline:auto}
.section--ink .lede{color:#B9CEE0}

.eyebrow{
  display:block;font-family:var(--font-b);font-size:12.5px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-dark);margin-bottom:12px;
}
.section--ink .eyebrow{color:var(--accent-lift)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--accent-dark);color:#fff;padding:12px 20px;font-weight:700;border-radius:0 0 10px 0;
}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--accent-lift);outline-offset:3px;border-radius:6px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-b);font-weight:700;font-size:16px;line-height:1.2;
  padding:16px 26px;border-radius:var(--radius-btn);border:2px solid transparent;
  cursor:pointer;text-align:center;min-height:52px;
  transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease,border-color .18s ease,color .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background-color:var(--accent);color:#fff;box-shadow:0 14px 28px -14px rgba(0,123,197,.85)}
.btn--primary:hover{background-color:var(--accent-dark)}
.btn--ghost{background-color:transparent;color:var(--accent-dark);border-color:var(--accent-dark)}
.btn--ghost:hover{background-color:var(--accent-dark);color:#fff}
/* Light-on-dark variants. The mobile panel is NOT .section--ink, so it is
   named explicitly here — a ghost button rendering dark-on-dark inside the
   panel is invisible on screen and passes every automated check. */
.section--ink .btn--ghost,
.nav-panel .btn--ghost,
.pagehead .btn--ghost,
.hero .btn--ghost{background-color:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.55)}
.section--ink .btn--ghost:hover,
.nav-panel .btn--ghost:hover,
.pagehead .btn--ghost:hover,
.hero .btn--ghost:hover{background-color:#fff;color:var(--ink);border-color:#fff}
.btn--sm{padding:11px 18px;min-height:44px;font-size:15px}
.btn--block{width:100%}

/* ------------------------------------------------------------- topbar --- */
.topbar{background-color:var(--ink);color:#B9CEE0;font-size:13.5px}
.topbar .container{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:42px;flex-wrap:wrap;
}
.topbar__list{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.topbar__item{display:inline-flex;align-items:center;gap:7px}
.topbar__item svg{color:var(--accent-lift)}
.topbar a{color:#fff;font-weight:700}
.topbar a:hover{color:var(--accent-lift)}

/* ---------------------------------------------------------------- nav --- */
.siteheader{
  position:sticky;top:0;z-index:90;
  background-color:rgba(6,25,42,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background-color .3s ease,box-shadow .3s ease;
}
.siteheader.is-stuck{background-color:rgba(6,25,42,.97);box-shadow:0 12px 30px -22px #000}
.siteheader .container{display:flex;align-items:center;gap:18px;min-height:78px}

.brand{display:flex;align-items:center;gap:12px;margin-right:auto;min-width:0}
.brand img{height:48px;width:auto;max-width:56px;background:none}
.brand__name{
  font-family:var(--font-d);font-weight:700;font-size:17px;line-height:1.15;
  color:#fff;letter-spacing:-.02em;white-space:nowrap;
}
.brand__name span{
  display:block;font-family:var(--font-b);font-size:10.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--accent-lift);
}

.nav{display:flex;align-items:center;gap:22px}
.nav a{
  font-size:15px;font-weight:600;color:#C8DAE9;position:relative;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:44px;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:9px;height:2px;width:0;
  background-color:var(--accent-lift);transition:width .22s ease;border-radius:2px;
}
.nav a:hover,.nav a[aria-current="page"]{color:#fff}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}

.header-actions{display:flex;align-items:center;gap:12px}
.header-phone{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#fff;
  font-family:var(--font-d);font-weight:700;font-size:16px;white-space:nowrap;
  min-height:44px;min-width:44px;padding-inline:6px;border-radius:12px;
}
.header-phone svg{color:var(--accent-lift)}
.burger{
  display:none;width:48px;height:48px;border-radius:12px;
  border:1px solid rgba(255,255,255,.28);background-color:rgba(255,255,255,.06);
  color:#fff;align-items:center;justify-content:center;cursor:pointer;
}

/* mobile panel: dvh, not vh */
.nav-panel{
  position:fixed;top:0;left:0;right:0;height:100dvh;z-index:120;
  background-color:var(--ink);color:#fff;
  display:flex;flex-direction:column;padding:18px var(--gutter) 28px;
  transform:translateY(-102%);transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility .3s;
  visibility:hidden;overflow-y:auto;
}
.nav-panel.is-open{transform:none;visibility:visible}
.nav-panel__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.nav-panel__close{
  width:48px;height:48px;border-radius:12px;border:1px solid rgba(255,255,255,.28);
  background-color:rgba(255,255,255,.06);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.nav-panel__links{display:flex;flex-direction:column;margin:8px 0 20px}
.nav-panel__links a{
  display:flex;align-items:center;min-height:52px;padding:12px 2px;
  font-family:var(--font-d);font-size:19px;font-weight:600;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.nav-panel__cta{display:flex;flex-direction:column;gap:12px;margin-top:auto}

/* --------------------------------------------------------------- hero --- */
.hero{position:relative;padding:0;background-color:var(--ink);overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:0;background-color:var(--ink);overflow:hidden}
.hero__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background-color:var(--ink);color:transparent;font-size:0;
  opacity:0;transform:scale(1.05);will-change:opacity,transform;
}
/* The cycle only runs when JavaScript is on, because frames 2-5 are 1x1
   placeholders until a script swaps in the real files. With script off the
   first frame simply stays, which is a static hero rather than a broken one. */
.js .hero__media img{animation:heroCycle 28s linear infinite}
/* The first frame is painted even before the animation reaches it, so the
   hero never opens on an empty dark box. */
.hero__media img:first-child{opacity:1}
.hero__media img:nth-child(1){animation-delay:-1s}
.hero__media img:nth-child(2){animation-delay:6s}
.hero__media img:nth-child(3){animation-delay:13s}
.hero__media img:nth-child(4){animation-delay:20s}
@keyframes heroCycle{
  0%{opacity:0;transform:scale(1.04)}
  4%{opacity:1}
  21%{opacity:1;transform:scale(1.12)}
  25%{opacity:0;transform:scale(1.13)}
  100%{opacity:0;transform:scale(1.04)}
}

/* The impact and wow heroes run FIVE frames, one per service named in the
   rotating line, so they need their own duration and their own keyframes: the
   visible window is 7s of 35s (20%) instead of 7s of 28s (25%). Reusing
   heroCycle here would leave a seven second hole at the end of every cycle,
   which is exactly the empty-scrim bug that made the first build feel dead. */
.hero-v-impact .hero__media img,.hero-v-wow .hero__media img{
  animation-name:heroCycle5;animation-duration:35s;
}
.hero-v-impact .hero__media img:nth-child(5),
.hero-v-wow .hero__media img:nth-child(5){animation-delay:27s}
@keyframes heroCycle5{
  0%{opacity:0;transform:scale(1.04)}
  3%{opacity:1}
  17%{opacity:1;transform:scale(1.12)}
  20%{opacity:0;transform:scale(1.13)}
  100%{opacity:0;transform:scale(1.04)}
}

.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background-color:rgba(6,25,42,.46);
  background-image:
    radial-gradient(115% 88% at 10% 30%,rgba(6,25,42,.95) 0%,rgba(6,25,42,.76) 36%,rgba(6,25,42,.22) 74%),
    linear-gradient(180deg,rgba(6,25,42,.62) 0%,rgba(6,25,42,.06) 40%,rgba(6,25,42,.94) 100%);
}
/* faint navigation grid, masked so it never reads as a texture */
.hero__grid-bg{
  position:absolute;inset:0;z-index:1;opacity:.5;pointer-events:none;
  background-image:
    linear-gradient(rgba(56,169,240,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(56,169,240,.16) 1px,transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(70% 62% at 62% 32%,#000 0%,transparent 100%);
  mask-image:radial-gradient(70% 62% at 62% 32%,#000 0%,transparent 100%);
}

/* the drone: their own Inspire 3 cutout, flown in rather than dropped in */
/* The drone flies in above the copy, in normal flow, so it owns its own band
   of sky and can never land on top of the lead card. Absolute positioning put
   it over the card heading - caught by looking at the render, not by a gate. */
.hero__drone{
  position:relative;z-index:1;pointer-events:none;
  width:clamp(230px,23vw,340px);
  margin:0 6% -34px auto;
}
.hero__drone img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 34px 44px rgba(0,0,0,.6));
  background:none;color:transparent;font-size:0;
  animation:drone-in 1.7s cubic-bezier(.18,.85,.24,1) .15s both,
            drone-hover 7s ease-in-out 1.85s infinite;
}
@keyframes drone-in{
  from{opacity:0;transform:translate3d(120px,-170px,0) scale(.68) rotate(7deg)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1) rotate(0)}
}
@keyframes drone-hover{
  0%,100%{transform:translate3d(0,0,0) rotate(0)}
  35%{transform:translate3d(-9px,-15px,0) rotate(-1.1deg)}
  70%{transform:translate3d(7px,9px,0) rotate(.8deg)}
}
/* rotor wash */
.hero__drone::after{
  content:"";position:absolute;left:50%;top:78%;width:78%;aspect-ratio:2.6/1;
  transform:translateX(-50%);
  background-image:radial-gradient(ellipse at center,rgba(56,169,240,.34) 0%,rgba(56,169,240,.12) 42%,transparent 72%);
  animation:wash 3.4s ease-in-out 1.9s infinite;opacity:0;
}
@keyframes wash{0%,100%{opacity:.35;transform:translateX(-50%) scale(.94)}50%{opacity:.8;transform:translateX(-50%) scale(1.08)}}

.hero__inner{position:relative;z-index:3;padding:clamp(24px,2.8vw,44px) var(--gutter) clamp(60px,7vw,96px)}
.hero__grid{display:grid;grid-template-columns:1.14fr .86fr;gap:clamp(28px,3.4vw,52px);align-items:center}
.hero h1{color:#fff;margin-bottom:18px}
.hero h1 .hl{color:var(--gold)}
.js .hero h1 .w{display:inline-block;opacity:0;transform:translateY(24px);animation:wordup .7s cubic-bezier(.2,.85,.25,1) forwards}
.js .hero h1 .w:nth-child(1){animation-delay:.10s}
.js .hero h1 .w:nth-child(2){animation-delay:.17s}
.js .hero h1 .w:nth-child(3){animation-delay:.24s}
.js .hero h1 .w:nth-child(4){animation-delay:.31s}
.js .hero h1 .w:nth-child(5){animation-delay:.38s}
.js .hero h1 .w:nth-child(6){animation-delay:.45s}
.js .hero h1 .w:nth-child(7){animation-delay:.52s}
.js .hero h1 .w:nth-child(8){animation-delay:.59s}
.js .hero h1 .w:nth-child(n+9){animation-delay:.66s}
@keyframes wordup{to{opacity:1;transform:none}}

.hero__lede{color:#D3E3F1;font-size:clamp(17px,1.6vw,20px);max-width:54ch;margin-bottom:26px}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}

.offerchip{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;
  background-color:rgba(244,183,64,.14);border:1px solid rgba(244,183,64,.5);
  color:#FFDFA0;font-size:13.5px;font-weight:700;letter-spacing:.02em;
  padding:9px 15px;border-radius:999px;
}
.offerchip i{
  width:8px;height:8px;border-radius:50%;background-color:var(--gold);flex:none;
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

.hero__proof{display:flex;flex-wrap:wrap;gap:9px}
.proofchip{
  display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
  color:#DCE9F4;background-color:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);padding:8px 14px;border-radius:999px;
}
.proofchip svg{color:#7FE3BE}

/* docked lead card */
.leadcard{
  background-color:var(--paper);color:var(--text);border-radius:var(--radius-card);
  padding:26px 24px;box-shadow:var(--shadow);border:1px solid var(--line);
}
/* The lead card is a white surface that lands inside .section--ink. That
   band's own h2 rule is equal specificity and later in the file, so without
   these the card heading rendered white on white. */
.leadcard h2,.section--ink .leadcard h2,.section--ink .leadcard h3{color:var(--text)}
.leadcard,.section--ink .leadcard{color:var(--text)}
.section--ink .leadcard .leadcard__sub,.section--ink .leadcard label,
.section--ink .leadcard .formnote{color:var(--muted)}
.leadcard h2{font-size:23px;margin-bottom:4px}
.leadcard__sub{font-size:14.5px;color:var(--muted);margin-bottom:18px}
.field{margin-bottom:13px}
.field label{
  display:block;font-size:12px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px;
}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--font-b);font-size:16px;color:var(--text);
  padding:13px 14px;border:1.5px solid var(--line);border-radius:10px;
  background-color:var(--paper);
}
.field textarea{min-height:92px;resize:vertical}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%230067A5' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(0,123,197,.18)}
.field input::placeholder,.field textarea::placeholder{color:#7C8B99}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.formnote{font-size:12.5px;color:var(--muted);text-align:center;margin:12px 0 0}
.formnote--ok{color:var(--ok);font-weight:700}
.formnote--err{color:#B32020;font-weight:700}

/* ================================================================
   HERO DIRECTIONS — three alternatives to the classic docked-form
   hero, each selected at build time with PA_HERO. The base hero above
   is shared; everything here only overrides it.
   ================================================================ */

/* ================= A. CINEMATIC — full viewport, no docked form ========= */
.hero-v-cinematic .hero{min-height:calc(100dvh - 120px);display:flex;align-items:center}
.hero-v-cinematic .hero__inner{width:100%;padding-block:clamp(40px,6vw,80px) clamp(80px,10vw,130px)}
.hero-v-cinematic .hero__grid{grid-template-columns:1fr;gap:0}
.hero-v-cinematic .hero__copy{max-width:20ch}
.hero-v-cinematic .hero h1{font-size:clamp(42px,7.4vw,96px);line-height:1.02;letter-spacing:-.035em}
.hero-v-cinematic .hero__copy{max-width:none}
.hero-v-cinematic .hero h1{max-width:15ch}
.hero-v-cinematic .hero__lede{font-size:clamp(18px,1.9vw,23px);max-width:48ch}
/* In flow, always. Twice now an absolutely positioned drone has landed on
   top of the lead card or the headline. Flow cannot collide. */
.hero-v-cinematic .hero__drone{width:clamp(190px,19vw,290px);margin:0 4% -6px auto}
/* the photograph is the point, so the scrim gets out of its way */
.hero-v-cinematic .hero__scrim{
  background-color:rgba(6,25,42,.34);
  background-image:
    linear-gradient(95deg,rgba(6,25,42,.93) 0%,rgba(6,25,42,.62) 42%,rgba(6,25,42,.14) 82%),
    linear-gradient(180deg,rgba(6,25,42,.55) 0%,transparent 34%,rgba(6,25,42,.9) 100%);
}
.hero-v-cinematic .hero__actions .btn{padding:19px 32px;font-size:17px;min-height:60px}

.quoteband{background-color:var(--mist);border-block:1px solid var(--line);padding-block:clamp(48px,6vw,80px)}
.quoteband__grid{display:grid;grid-template-columns:1fr .82fr;gap:clamp(28px,4vw,56px);align-items:center}

/* ================= B. SPLIT — ink panel beside a full-bleed photo ======= */
.hero-v-split .hero{overflow:visible}
.hero-v-split .hero__media{
  left:auto;right:0;width:52%;border-radius:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%);
}
.hero-v-split .hero__scrim{
  background-color:rgba(6,25,42,.18);
  background-image:linear-gradient(90deg,var(--ink) 0%,var(--ink) 44%,rgba(6,25,42,.55) 58%,rgba(6,25,42,.18) 100%);
}
.hero-v-split .hero__grid-bg{opacity:.35}
.hero-v-split .hero__grid{grid-template-columns:1.02fr .98fr;align-items:center}
.hero-v-split .hero h1{font-size:clamp(36px,4.4vw,58px)}
.hero-v-split .hero__drone{width:clamp(210px,23vw,320px);margin:0 9% 2px auto}
.hero-v-split .leadcard{box-shadow:0 32px 70px -30px rgba(0,0,0,.75)}

/* ================= E. WOW — their own composition, rebuilt =============
   Reference: their Slider Revolution hero. Night footage full-bleed, the
   business name centred inside bracket marks, and the Inspire 3 large and
   centred low in the frame flying at the viewer. Everything theirs except
   the parts that were missing: a call to action and a working video. */
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s ease;z-index:1;background-color:var(--ink);
}
.hero__video.is-playing{opacity:1}

.hero-v-wow .hero{min-height:calc(100dvh - 120px);display:flex;align-items:center}
.hero-v-wow .hero__inner{width:100%;padding-block:clamp(18px,2.4vw,40px) clamp(16px,2.2vw,32px);text-align:center}
.hero-v-wow .hero__grid{grid-template-columns:1fr;gap:0;justify-items:center}
.hero-v-wow .hero__copy{max-width:920px}
/* the footage is already night-dark, so the scrim only has to protect text */
/* Much lighter than the photo heroes: the footage is the point, and the
   headline is protected by its own shadow rather than by drowning the video. */
.hero-v-wow .hero__scrim{
  z-index:2;
  background-color:rgba(6,25,42,.26);
  background-image:
    radial-gradient(74% 58% at 50% 38%,rgba(6,25,42,.58) 0%,rgba(6,25,42,.22) 60%,transparent 100%),
    linear-gradient(180deg,rgba(6,25,42,.52) 0%,transparent 26%,rgba(6,25,42,.88) 100%);
}
/* The contrast gate cannot see through a <video>, so it scores this text
   against the scrim alone. The shadow is what actually guarantees the
   headline over a bright frame of footage. */
.hero-v-wow .hero h1,
.hero-v-wow .offerchip{text-shadow:0 2px 26px rgba(6,25,42,.75),0 1px 3px rgba(6,25,42,.6)}
.hero-v-wow .hero__grid-bg{z-index:2;opacity:.18}

/* bracket marks around the headline - their signature device */
.hero-v-wow .hero h1{
  position:relative;display:inline-block;
  /* height-aware: a short laptop gets a smaller headline so the drone below
     it still lands inside the fold */
  font-size:min(clamp(30px,5.2vw,66px), 8.2vh);line-height:1.07;letter-spacing:-.03em;
  max-width:19ch;margin-inline:auto;
  padding:clamp(12px,1.8vw,26px) clamp(24px,3.6vw,58px);
}
.hero-v-wow .hero h1::before,
.hero-v-wow .hero h1::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(16px,2.2vw,34px);
  border:clamp(4px,.5vw,8px) solid var(--gold);
}
.hero-v-wow .hero h1::before{left:0;border-right:0}
.hero-v-wow .hero h1::after{right:0;border-left:0}

.hero-v-wow .hero__lede{
  font-size:clamp(16.5px,1.65vw,20px);max-width:58ch;margin-inline:auto;
}
.hero-v-wow .offerchip{margin-inline:auto}
.hero-v-wow .hero__actions{justify-content:center;margin-bottom:0}
/* Centered hero: the line centers, and the visible service centers INSIDE the
   width the sizer reserved for the longest one - otherwise "Drone training"
   sits left in a box cut for "Roof and tower inspections" and reads crooked. */
.hero-v-wow .rot--on{justify-items:center}
.hero-v-impact .rot--on{justify-items:start}
.hero-v-wow .hero__proof{justify-content:center}
.hero-v-wow .hero__actions .btn{padding:17px 28px;font-size:16px;min-height:56px}

/* the drone: large, centred, low, bleeding off the bottom edge. In flow after
   the copy, so it cannot land on the headline or the buttons. */
.hero-v-wow .hero__drone--big{
  /* Sized against viewport HEIGHT as well as width, so the whole aircraft is
     always in frame. Width alone meant a short laptop screen cut the landing
     gear off - the drone is the point of this hero, so it does not get cropped. */
  width:min(46vw, 46vh, 660px);
  margin:clamp(6px,1vw,16px) auto 0;
}
.drone-float{display:block;animation:drone-drift 11s ease-in-out 2s infinite alternate}
@keyframes drone-drift{
  from{transform:translate3d(-16px,0,0)}
  to{transform:translate3d(16px,-6px,0)}
}
/* Two elements, two transforms: the wrapper drifts across, the airframe bobs
   and banks inside it. Compounded they read as a machine holding a hover
   rather than a picture sliding about. */
.hero-v-wow .hero__drone--big img{
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.72));
  animation:drone-in 1.9s cubic-bezier(.16,.86,.24,1) .2s both,
            drone-hover-big 6.5s ease-in-out 2.1s infinite;
}
@keyframes drone-hover-big{
  0%{transform:translate3d(0,0,0) rotate(0) scale(1)}
  28%{transform:translate3d(-6px,-17px,0) rotate(-1.9deg) scale(1.015)}
  55%{transform:translate3d(4px,6px,0) rotate(1.4deg) scale(.995)}
  78%{transform:translate3d(7px,-9px,0) rotate(.6deg) scale(1.008)}
  100%{transform:translate3d(0,0,0) rotate(0) scale(1)}
}
.hero-v-wow .hero__drone--big::after{top:72%;width:70%;animation-duration:2.6s}

/* ================= D. IMPACT — the headline changes with the photo ====== */
.hero-v-impact .hero{min-height:calc(100dvh - 120px);display:flex;align-items:center}
.hero-v-impact .hero__inner{width:100%;padding-block:clamp(36px,5vw,72px) clamp(84px,10vw,132px)}
.hero-v-impact .hero__grid{grid-template-columns:1fr;gap:0}
.hero-v-impact .hero h1{font-size:clamp(38px,6.6vw,86px);line-height:1.04;letter-spacing:-.035em;max-width:17ch}
.hero-v-impact .hero__lede{font-size:clamp(18px,1.9vw,23px);max-width:50ch}
.hero-v-impact .hero__drone{width:clamp(190px,19vw,300px);margin:0 4% -6px auto}
.hero-v-impact .hero__actions .btn{padding:19px 32px;font-size:17px;min-height:60px}
.hero-v-impact .hero__scrim{
  background-color:rgba(6,25,42,.36);
  background-image:
    linear-gradient(96deg,rgba(6,25,42,.94) 0%,rgba(6,25,42,.66) 44%,rgba(6,25,42,.16) 84%),
    linear-gradient(180deg,rgba(6,25,42,.56) 0%,transparent 36%,rgba(6,25,42,.92) 100%);
}

/* the rotator: a sizer reserves the widest word so nothing reflows, and the
   four words share the hero photo cycle so word and picture always agree */
.rot{position:relative;display:inline;color:var(--gold)}
.rot--on{display:inline-grid;vertical-align:baseline}
.rot__sizer{visibility:hidden;grid-area:1/1;white-space:nowrap}
.rot__w{white-space:nowrap}
.rot--on .rot__w{grid-area:1/1;opacity:0;animation:rotWord 35s linear infinite}
.rot--on .rot__w:nth-child(2){animation-delay:-1s}
.rot--on .rot__w:nth-child(3){animation-delay:6s}
.rot--on .rot__w:nth-child(4){animation-delay:13s}
.rot--on .rot__w:nth-child(5){animation-delay:20s}
.rot--on .rot__w:nth-child(6){animation-delay:27s}
/* 7s a service, five services, 35s round - the same clock the photographs run
   on, so the word and the picture behind it always name the same job. */
@keyframes rotWord{
  0%{opacity:0;transform:translateY(.32em)}
  2.4%{opacity:1;transform:none}
  17.6%{opacity:1;transform:none}
  20%{opacity:0;transform:translateY(-.28em)}
  100%{opacity:0;transform:translateY(.32em)}
}

/* The service line under the headline. It used to live inside the h1 as
   "...for rooftops", which put a cycling word in the middle of the phrase a
   crawler reads. Out here the h1 stays one clean sentence and the line can say
   the actual service name. */
/* "for <service>" on its own line inside the h1. Its own line because the
   sizer reserves the width of the longest service: beside the fixed phrase
   that opens a hole mid-sentence, on a line of its own it just centers. */
.rotline{
  display:block;margin-top:.22em;
  font-size:.56em;font-weight:700;letter-spacing:-.005em;line-height:1.15;
  color:#B9CEE0;
}
.rotline .rot{color:var(--gold)}
/* No underline: it would span the width reserved for the longest word and
   trail past the short ones. The color change is enough. */

/* ================= C. MOSAIC — a moving wall of their work ============== */
.mosaic{position:absolute;inset:-6% -2%;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mosaic__col{overflow:hidden}
.mosaic__run{display:grid;gap:14px;will-change:transform}
.mosaic__col:nth-child(1) .mosaic__run{animation:drift 52s linear infinite}
.mosaic__col:nth-child(2) .mosaic__run{animation:driftUp 58s linear infinite}
.mosaic__col:nth-child(3) .mosaic__run{animation:drift 64s linear infinite}
.mosaic img{
  width:100%;height:clamp(180px,22vw,300px);object-fit:cover;border-radius:12px;
  background-color:var(--ink-2);color:transparent;font-size:0;
}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes driftUp{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}
.hero-v-mosaic .hero__scrim{
  background-color:rgba(6,25,42,.56);
  background-image:
    radial-gradient(105% 85% at 16% 34%,rgba(6,25,42,.96) 0%,rgba(6,25,42,.80) 40%,rgba(6,25,42,.34) 80%),
    linear-gradient(180deg,rgba(6,25,42,.72) 0%,rgba(6,25,42,.24) 42%,rgba(6,25,42,.95) 100%);
}
.hero-v-mosaic .hero__grid-bg{opacity:.25}

@media (max-width:1040px){
  .hero-v-cinematic .hero,.hero-v-impact .hero,.hero-v-wow .hero{min-height:0}
  .hero-v-wow .hero__drone--big{width:min(88vw,46vh,420px);margin:12px auto 0}
  /* phones never fetch a 16MB background video */
  .hero__video{display:none}
  .hero-v-impact .hero__drone{margin:0 auto 6px;width:min(62vw,300px)}
  .hero-v-cinematic .hero__drone,
  .hero-v-split .hero__drone{margin:0 auto 6px;width:min(62vw,300px)}
  .hero-v-split .hero__media{left:0;width:100%;-webkit-mask-image:none;mask-image:none}
  .hero-v-split .hero__scrim{
    background-color:rgba(6,25,42,.46);
    background-image:radial-gradient(115% 88% at 10% 30%,rgba(6,25,42,.95) 0%,rgba(6,25,42,.76) 36%,rgba(6,25,42,.22) 74%),
                     linear-gradient(180deg,rgba(6,25,42,.62) 0%,rgba(6,25,42,.06) 40%,rgba(6,25,42,.94) 100%);
  }
  .quoteband__grid{grid-template-columns:1fr}
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .mosaic__col:nth-child(3){display:none}
}
@media (prefers-reduced-motion:reduce){
  .mosaic__run{animation:none!important;transform:none!important}
}

/* -------------------------------------------------------- trust strip --- */
.trustbar{background-color:var(--mist);border-block:1px solid var(--line)}
.trustbar__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-block:26px}
.trustitem{display:flex;align-items:flex-start;gap:12px}
.trustitem svg{color:var(--accent-dark);margin-top:3px}
.trustitem b{display:block;font-family:var(--font-d);font-size:15.5px;font-weight:700;line-height:1.25}
.trustitem span{display:block;font-size:13.5px;color:var(--muted);line-height:1.45}

/* -------------------------------------------------------------- cards --- */
/* A grid item's automatic minimum size is its content's min-content, and an
   <img> with max-width:100% still reports its INTRINSIC width there - which
   is how a 1000px photo silently widens a 1fr track to 1002px on a phone.
   min-width:0 is the fix, and it belongs on every track child. */
.grid{display:grid;gap:22px}
.grid>*,.steps>*,.hero__grid>*,.footer__grid>*,.trustbar__grid>*{min-width:0}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.card{
  background-color:var(--paper);border:1px solid var(--line);border-radius:var(--radius-card);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#B9D3E6}
.card__media{aspect-ratio:16/10;overflow:hidden;background-color:var(--mist-2)}
.card__media img{
  width:100%;height:100%;object-fit:cover;transition:transform .5s ease;
  background-color:var(--mist-2);color:transparent;font-size:0;
}
.card:hover .card__media img{transform:scale(1.06)}
.card__body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.card__body p{font-size:15.5px;color:var(--muted)}
.card__link{
  margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:8px;
  font-weight:800;font-size:15px;color:var(--accent-dark);
}
.card:hover .card__link{color:var(--accent)}
.ticks{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.ticks li{position:relative;padding-left:26px;font-size:15px;color:var(--text)}
.ticks li::before{
  content:"";position:absolute;left:2px;top:.48em;width:11px;height:6px;
  border-left:2.5px solid var(--ok);border-bottom:2.5px solid var(--ok);transform:rotate(-45deg);
}
.section--ink .ticks li{color:#D6E5F1}
.section--ink .ticks li::before{border-color:#7FE3BE}

/* ------------------------------------------------------------- steps ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:step}
.steps[data-cols="4"]{grid-template-columns:repeat(4,1fr)}
.steps[data-cols="2"]{grid-template-columns:repeat(2,1fr)}
.step{
  background-color:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-card);padding:28px 24px;
}
.step::before{
  counter-increment:step;content:counter(step);
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;margin-bottom:16px;
  background-color:var(--accent);color:#fff;
  font-family:var(--font-d);font-weight:800;font-size:19px;
}
.step h3{margin-bottom:6px}
.step p{font-size:15.5px;color:var(--muted)}

/* ----------------------------------------------------------- gallery ---- */
.media{
  margin:0;border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:16/10;background-color:var(--mist-2);
}
.media img{width:100%;height:100%;object-fit:cover;background-color:var(--mist-2);color:transparent;font-size:0}
/* a product shot is presented as a product shot, not cropped into a landscape */
.media--contain{background-color:var(--mist)}
.media--contain img{object-fit:contain;background-color:var(--mist)}

/* Two portrait photographs side by side. Phone photos are 4:5 or taller, and
   cropping them into a 16:10 slot throws away the subject. */
.mediapair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mediapair img{
  width:100%;height:100%;aspect-ratio:9/16;object-fit:cover;
  border-radius:var(--radius-card);border:1px solid var(--line);
  background-color:var(--mist-2);color:transparent;font-size:0;
}

.videogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.videogrid .video{aspect-ratio:16/9}
.videocard figcaption{
  margin-top:10px;font-family:var(--font-d);font-weight:600;font-size:15.5px;color:var(--text);
}
.section--ink .videocard figcaption{color:#fff}
.videocard{margin:0}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gallery figure{
  margin:0;position:relative;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);background-color:var(--mist-2);aspect-ratio:4/3;
}
.gallery img{
  width:100%;height:100%;object-fit:cover;transition:transform .5s ease;
  background-color:var(--mist-2);color:transparent;font-size:0;
}
.gallery figure:hover img{transform:scale(1.05)}
/* A flat background-color here painted a hard-edged translucent rectangle
   across the bottom of every photograph - it read as a rendering glitch. The
   caption is now hidden until the tile is hovered or focused, and when it
   does appear it is a soft gradient with no visible edge. */
.gallery figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:40px 14px 12px;
  font-size:13px;font-weight:700;color:#fff;
  background-image:linear-gradient(to top,rgba(4,16,28,.94) 0%,rgba(4,16,28,.78) 34%,rgba(4,16,28,.36) 68%,transparent 100%);
  opacity:0;transform:translateY(6px);
  transition:opacity .28s ease,transform .28s ease;
}
.gallery figure:hover figcaption,
.gallery figure:focus-within figcaption{opacity:1;transform:none}
/* touch devices never hover, so the label would never appear - show it there */
@media (hover:none){
  .gallery figcaption{opacity:1;transform:none}
}
.gallery--wide figure:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}

/* --------------------------------------------------------------- video -- */
/* an <a>, so it needs display:block to take the aspect ratio */
.video{
  display:block;position:relative;aspect-ratio:16/9;border-radius:var(--radius-card);
  overflow:hidden;background-color:var(--ink);cursor:pointer;
  border:1px solid var(--line-dark);box-shadow:var(--shadow);
}
.video:focus-visible{outline:3px solid var(--accent-lift);outline-offset:3px}
.video--playing{cursor:default}
.video img{width:100%;height:100%;object-fit:cover;background-color:var(--ink);color:transparent;font-size:0}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video__play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background-color:rgba(6,25,42,.34);
}
.video__play span{
  width:76px;height:76px;border-radius:50%;background-color:var(--accent);
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 16px 36px -14px rgba(0,0,0,.7);transition:transform .25s ease;
}
.video:hover .video__play span{transform:scale(1.08)}
.video__play svg{width:30px;height:30px;margin-left:4px}

/* six credentials as a centered chip row. A flex row wraps without ever
   leaving an empty cell, which a six-across grid cannot promise at every
   breakpoint. */
.credrow{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  list-style:none;margin:48px 0 0;padding:0;
}
.credrow li{display:flex}
.credrow span{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 18px;border-radius:999px;
  background-color:var(--mist);border:1px solid var(--line);
  font-size:14.5px;font-weight:650;color:var(--text);
}
.credrow .icon{color:var(--ok);flex:none}

/* the agency credit is a link, and it has to read as one against the dark
   footer without competing with the client's own navigation above it */
.agencylink{color:#CFE0EE;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.agencylink:hover{color:#fff}

/* the spam honeypot. It is never rendered, but it is still a form field, so it
   gets the same 16px as the real ones rather than the browser's 13.3px. */
.leadcard [name="bot-field"]{font-size:16px}

/* one error line per field. Red text, not only a red border: a border is
   invisible to a screen reader and to anybody with a red-green deficiency. */
.field__err{
  display:block;margin-top:6px;font-size:13.5px;font-weight:600;
  color:#A31515;line-height:1.4;
}
.field__err[hidden]{display:none}
.field [aria-invalid="true"]{border-color:#B32020;background-color:#FFF7F7}
.field [aria-invalid="true"]:focus{outline-color:#B32020}

/* ------------------------------------------------------------ reviews --- */
.review{
  background-color:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-card);padding:26px 24px;
}
.stars{color:var(--gold-ink);letter-spacing:2px;font-size:15px;margin-bottom:10px}
.section--ink .stars{color:var(--gold)}
.review p{font-size:16px;color:var(--text)}
.review footer{margin-top:16px;display:flex;align-items:center;gap:11px}
.avatar{
  width:42px;height:42px;border-radius:50%;flex:none;
  background-color:var(--accent-dark);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-weight:700;font-size:15px;
}
/* .review footer span is (0,1,2) and beats a lone .avatar, which rendered the
   initials dark-gray on blue at 1.08:1 - present in the DOM, invisible on
   screen. Scope it under the wrapper rather than hoping order saves you. */
.review footer .avatar{
  /* .review footer span is (0,1,2) and beats .avatar at (0,1,0): it was
     overriding display:flex with display:block, which dropped the initials out
     of the circle, and color:#fff with the muted gray. Both belong here. */
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;flex:none;color:#fff;
  font-family:var(--font-d);font-weight:700;font-size:15px;line-height:1;
}
.review footer b{display:block;font-size:15px}
.review footer span{display:block;font-size:13.5px;color:var(--muted)}

/* ---------------------------------------------------------------- faq --- */
.faq{display:grid;gap:12px;max-width:860px;margin-inline:auto}
.faq details{
  background-color:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-card);overflow:hidden;
}
.faq details[open]{border-color:#9EC7E4}
.faq summary{
  list-style:none;cursor:pointer;position:relative;
  padding:20px 58px 20px 22px;min-height:52px;
  font-family:var(--font-d);font-weight:600;font-size:17px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:24px;top:26px;width:10px;height:10px;
  border-right:2.5px solid var(--accent-dark);border-bottom:2.5px solid var(--accent-dark);
  transform:rotate(45deg);transition:transform .22s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:30px}
.faq__answer{padding:0 22px 22px;color:var(--muted);font-size:16px}

/* ------------------------------------------------------------- tables --- */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15.5px}
th,td{
  text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);
  white-space:normal;overflow-wrap:anywhere;
}
th{font-family:var(--font-d);font-weight:700;font-size:14px;background-color:var(--mist)}

/* ------------------------------------------------------------ pagehead -- */
.pagehead{
  background-color:var(--ink);color:#EAF2FA;
  padding-block:clamp(40px,6vw,72px);position:relative;
}
.pagehead h1{color:#fff;margin-bottom:14px;font-size:clamp(31px,4.4vw,50px)}
.pagehead .lede{color:#B9CEE0}
.crumbs{font-size:13.5px;color:#9FB6CB;margin-bottom:16px}
.crumbs a{color:#CFE0EE;font-weight:600}
.crumbs a:hover{color:#fff}
.crumbs span{margin-inline:7px;color:#6B8299}

/* -------------------------------------------------------------- areas --- */
.arealist{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.arealist li{list-style:none}
.arealist a,.arealist span{
  display:inline-block;font-size:14.5px;font-weight:600;padding:9px 15px;border-radius:999px;
  background-color:var(--paper);border:1px solid var(--line);color:var(--muted);
}
.arealist a:hover{border-color:var(--accent);color:var(--accent-dark)}

/* ------------------------------------------------------------- footer --- */
.sitefooter{background-color:var(--ink);color:#B9CEE0;padding-top:60px}
.sitefooter h2,.sitefooter h3{color:#fff}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:40px}
.footer__brand .brand__name{font-size:20px;margin-bottom:14px}
.footer__brand p{font-size:15px;max-width:34ch}
.footcol h3{
  font-family:var(--font-b);font-size:12.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-lift);margin-bottom:16px;
}
.footcol ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.footcol a{font-size:15px;color:#B9CEE0}
.footcol a:hover{color:#fff}
.nap{font-style:normal;display:grid;gap:11px;font-size:15px}
.nap a{color:#fff;font-weight:700}
.nap a:hover{color:var(--accent-lift)}
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{
  width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background-color:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#CFE0EE;
}
.socials a:hover{background-color:var(--accent);border-color:var(--accent);color:#fff}
.socials svg{width:19px;height:19px}
.footer__bottom{
  margin-top:48px;border-top:1px solid rgba(255,255,255,.12);
  padding-block:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:13.5px;color:#9FB6CB;
}
.footer__bottom a{color:#CFE0EE}

/* --------------------------------------------------------- sticky bar --- */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:100;display:none;
  background-color:var(--ink);border-top:1px solid rgba(255,255,255,.16);
  padding:9px var(--gutter);gap:10px;
  /* It slides up only once the hero's own buttons have scrolled away.
     Otherwise the page opens with Call and Get a free quote stacked twice. */
  transform:translateY(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.stickybar.is-in{transform:none}
.stickybar .btn{flex:1;min-height:52px;padding-inline:10px}
.stickybar .btn--ghost{background-color:rgba(255,255,255,.09);color:#fff;border-color:rgba(255,255,255,.5)}

.intro{
  position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;
  background-color:var(--ink);
  background-image:radial-gradient(75% 60% at 50% 42%,rgba(56,169,240,.20),transparent 70%);
  transition:opacity .55s ease,visibility .55s ease;
}
.intro.is-gone{opacity:0;visibility:hidden}
.intro__inner{display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px;text-align:center}
.intro__inner img{
  width:clamp(84px,13vw,124px);height:auto;background:none;
  animation:introMark 1.1s cubic-bezier(.2,.85,.25,1) both;
}
@keyframes introMark{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}
.intro__name{
  font-family:var(--font-d);font-weight:700;font-size:clamp(19px,2.6vw,27px);
  letter-spacing:-.01em;color:#fff;animation:introMark 1.1s cubic-bezier(.2,.85,.25,1) .12s both;
}
.intro__name span{
  display:block;font-family:var(--font-b);font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent-lift);margin-top:6px;
}
.intro__bar{
  width:clamp(150px,22vw,230px);height:2px;border-radius:2px;
  background-color:rgba(255,255,255,.16);overflow:hidden;margin-top:6px;
}
.intro__bar i{display:block;height:100%;width:0;background-color:var(--accent-lift);animation:introBar 1.5s ease-out forwards}
@keyframes introBar{to{width:100%}}
.intro__skip{
  margin-top:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:#7A93AB;background:none;border:0;cursor:pointer;padding:8px 12px;min-height:44px;
}
.intro__skip:hover{color:#fff}

/* ------------------------------------------------------------- reveal --- */
.js .reveal{opacity:0;transform:translateY(22px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}

@media (prefers-reduced-motion:reduce){
  .hero__video{display:none}
  .drone-float{animation:none!important;transform:none!important}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  /* animation-fill-mode is gone with the animation, so restore the end state */
  .js .hero h1 .w{opacity:1;transform:none}
  .hero__media img{opacity:0;transform:none}
  .hero__media img:first-child{opacity:1}
  .rot--on .rot__w{opacity:0;transform:none;animation:none}
  .rot--on .rot__w:nth-child(2){opacity:1}
  .hero__drone img{opacity:1;transform:none}
  .hero__drone::after{opacity:.5}
  html{scroll-behavior:auto}
}

/* ------------------------------------------------------- area cards ----- */
/* Sixteen city pages need a way in that is scannable. A chip list would fit
   more per row and tell you nothing; the card carries one line about why that
   city flies differently, which is the whole argument against thin pages. */
.areagrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.areagrid>*{min-width:0}
.areacard{
  display:flex;align-items:flex-start;gap:13px;padding:18px 18px 18px 16px;
  background-color:var(--paper);border:1px solid var(--line);border-radius:14px;
  min-height:44px;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.areacard:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#B9D3E6}
.areacard__pin{display:flex;color:var(--accent-dark);flex:none;margin-top:2px}
.areacard__body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.areacard__body b{font-family:var(--font-d);font-size:16px;font-weight:700;color:var(--text);line-height:1.3}
.areacard__body span{font-size:13.5px;color:var(--muted);line-height:1.45}
.areacard>svg:last-child{color:var(--accent-dark);flex:none;margin-top:3px;opacity:.55;transition:opacity .22s ease,transform .22s ease}
.areacard:hover>svg:last-child{opacity:1;transform:translateX(3px)}

/* --------------------------------------------------------- tick links --- */
.ticks--link li{padding-left:26px}
.ticks--link a{color:var(--accent-dark);font-weight:650}
.ticks--link a:hover{color:var(--accent);text-decoration:underline}

/* --------------------------------------------------------- notecards --- */
.notecard{
  margin:26px 0 0;padding:20px 22px;border-radius:14px;
  background-color:var(--mist);border:1px solid var(--line);border-left:4px solid var(--accent);
}
.notecard p{font-size:15.5px;color:var(--text);margin:6px 0 0}
.notecard--tip{border-left-color:var(--gold);background-color:#FDF7EA;border-color:#EEDFC0}
.notecard--tip .eyebrow{color:var(--gold-ink)}
.notecard--key{border-left-color:var(--ok);background-color:#EEF7F3;border-color:#CFE7DD;margin:0 0 30px}
.notecard--key .eyebrow{color:#0B5E43}
.notecard--key .ticks{margin:12px 0 0}
.notecard--key .ticks li{font-size:15.5px}

/* ------------------------------------------------------- numbered list -- */
.steps-num{margin:18px 0 20px;padding:0 0 0 4px;list-style:none;counter-reset:sn;display:grid;gap:12px}
.steps-num li{position:relative;padding-left:40px;font-size:15.5px;color:var(--text);line-height:1.6}
.steps-num li::before{
  counter-increment:sn;content:counter(sn);position:absolute;left:0;top:.05em;
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background-color:var(--accent);color:#fff;font-family:var(--font-d);font-weight:800;font-size:13.5px;
}

/* ------------------------------------------------------------- blog ----- */
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.postgrid>*{min-width:0}
.postcard{
  display:flex;flex-direction:column;background-color:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.postcard:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#B9D3E6}
.postcard__img{display:block;aspect-ratio:16/10;overflow:hidden;background-color:var(--mist-2)}
.postcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;background-color:var(--mist-2);color:transparent;font-size:0}
.postcard:hover .postcard__img img{transform:scale(1.06)}
.postcard__body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1;gap:9px}
.postcard__cat{
  align-self:flex-start;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent-dark);background-color:var(--mist);border:1px solid var(--line);
  padding:5px 11px;border-radius:999px;
}
.postcard__body h3{font-size:19px;line-height:1.3;margin:0}
.postcard__body h3 a{color:var(--text)}
.postcard:hover .postcard__body h3 a{color:var(--accent-dark)}
.postcard__body p{font-size:15px;color:var(--muted);margin:0}
.postcard__meta{margin-top:auto;padding-top:6px;font-size:13.5px;color:var(--muted)}

/* The featured post is the same card turned on its side. Same markup, so the
   card never has two code paths to keep in step. */
.postcard--featured{flex-direction:row;align-items:stretch}
.postcard--featured .postcard__img{flex:0 0 52%;aspect-ratio:auto}
.postcard--featured .postcard__body{padding:34px 38px;justify-content:center;gap:12px}
.postcard--featured .postcard__body h3{font-size:clamp(24px,2.6vw,32px)}
.postcard--featured .postcard__body p{font-size:16.5px}

.readnext{
  max-width:720px;margin:38px auto 0;padding:22px 26px;border-radius:16px;
  background-color:var(--mist);border:1px solid var(--line);
}
.readnext .ticks{margin:12px 0 0}
.readnext .ticks li{font-size:15.5px}

/* ---------------------------------------------------------- article ----- */
.pagehead--post .lede{max-width:62ch}
.postcat{
  display:inline-block;margin-bottom:14px;font-size:11.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:#0B2A44;
  background-color:var(--gold);padding:6px 13px;border-radius:999px;
}
.byline{display:flex;align-items:center;gap:13px;margin-top:26px}
.byline__avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;background-color:var(--ink-2)}
.byline>span{display:flex;flex-direction:column;gap:2px}
.byline b{font-size:15.5px;color:#fff;font-weight:700}
.byline>span>span{font-size:13.5px;color:#B9CEE0}

.grid--article{grid-template-columns:minmax(0,1fr) 380px}
.prose{max-width:none}
.prose h2{font-size:clamp(23px,2.5vw,30px);margin:42px 0 14px}
.prose h3{font-size:clamp(18.5px,1.9vw,21px);margin:30px 0 10px}
.prose p{font-size:17px;line-height:1.75;color:var(--text);margin:0 0 18px}
.prose .ticks{margin:18px 0 22px}
.prose .ticks li{font-size:16px;line-height:1.6}
.prose .faq{margin-top:18px}
.prose>*:first-child{margin-top:0}

.postnext{margin:44px 0 0;padding:26px;background-color:var(--mist);border:1px solid var(--line);border-radius:16px}
.postnext__lede{font-size:15.5px;font-weight:650;color:var(--text);margin:0 0 16px}
.postnext__pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.postnext__pair>*{min-width:0}
.postnext__card{
  display:flex;flex-direction:column;gap:5px;padding:18px 20px;border-radius:13px;
  background-color:var(--paper);border:1px solid var(--line);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.postnext__card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#B9D3E6}
.postnext__card b{font-family:var(--font-d);font-size:16.5px;color:var(--text);line-height:1.3}
.postnext__card>span:last-child{font-size:14px;color:var(--muted);line-height:1.5}

.authorbox{display:flex;gap:20px;margin:38px 0 0;padding:26px;border:1px solid var(--line);border-radius:16px;background-color:var(--paper)}
.authorbox__avatar{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:none;background-color:var(--mist-2)}
.authorbox>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.authorbox b{font-family:var(--font-d);font-size:18px;color:var(--text)}
.authorbox__role{font-size:14px;color:var(--muted);font-weight:600}
.authorbox p{font-size:15px;color:var(--muted);line-height:1.6;margin:10px 0 0}

.postside{position:sticky;top:96px;display:grid;gap:18px}
.sidecard{padding:24px;border-radius:16px;background-color:var(--ink);color:#D6E5F1}
.sidecard .eyebrow{color:var(--gold)}
.sidecard p{font-size:15px;color:#C7DAEA;margin:8px 0 16px;line-height:1.6}

/* --------------------------------------------------------- responsive --- */
@media (max-width:1200px){
  .nav{display:none}
  .burger{display:flex}
  .header-actions .btn{display:none}
  .siteheader .container{min-height:70px}
}
@media (max-width:1200px){
}
@media (max-width:1180px){
  /* the sidebar stops being a sidebar before the body copy gets squeezed */
  .grid--article{grid-template-columns:1fr}
  .postside{position:static;grid-template-columns:1fr 1fr;display:grid;gap:18px;align-items:start}
  .postside>*{min-width:0}
}
@media (max-width:1040px){
  .areagrid{grid-template-columns:repeat(2,1fr)}
  .postgrid{grid-template-columns:repeat(2,1fr)}
  .hero__grid{grid-template-columns:1fr;gap:34px}
  /* on a phone the drone leads the hero, centered */
  .hero__drone{width:min(62vw,300px);margin:0 auto 6px}
  .hero__drone::after{top:74%}
  .trustbar__grid{grid-template-columns:repeat(2,1fr)}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .steps[data-cols="4"]{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr;gap:32px}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .videogrid{grid-template-columns:repeat(2,1fr)}
  /* 9 tiles over 3 columns is exactly 3 rows, so the feature tile stands down
     here. A 2x1 span would leave two empty cells in the last row. */
  .gallery--wide figure:first-child{grid-column:auto;grid-row:auto;aspect-ratio:4/3}
}
@media (max-width:860px){
  .postcard--featured{flex-direction:column}
  .postcard--featured .postcard__img{flex:none;aspect-ratio:16/10}
  .postcard--featured .postcard__body{padding:22px 24px 26px}
  .postside{grid-template-columns:1fr}
  .postnext__pair{grid-template-columns:1fr}
  .grid--3,.grid--2,.steps,.steps[data-cols="4"],.steps[data-cols="2"]{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  /* two columns: the feature tile takes the full width again and the maths
     comes back out even (4 cells + 8 singles = 12 = 6 rows) */
  .gallery--wide figure:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
  .videogrid{grid-template-columns:1fr}
  .topbar__item--hide-sm{display:none}
  .topbar .container{justify-content:center;min-height:38px}
  .stickybar{display:flex}
}
@media (max-width:640px){
  .areagrid{grid-template-columns:1fr}
  .postgrid{grid-template-columns:1fr}
  .authorbox{flex-direction:column;gap:14px}
  .prose p{font-size:16.5px}
  body{font-size:16px}
  .header-phone span{display:none}
  .header-phone{border:1px solid rgba(255,255,255,.28);background-color:rgba(255,255,255,.06);padding-inline:0}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{width:100%}
  .field-row{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .grid--4{grid-template-columns:1fr}
  .footer__bottom{justify-content:center;text-align:center}
}