/* ============================================================
   Carolina Aerial Wash — shared stylesheet
   Every page links this file. A handful of selectors are reused
   across pages with a different value on one specific page (e.g.
   the .why / .cmp-col dark-navy panel is white on why-drone.html,
   the .quote / .form card is the actual quote page on quote.html).
   Those live in the "page-specific overrides" section at the
   bottom, scoped by a body.page-* class set on that page only.
   ============================================================ */

/* Contrast note: --navy (2.48:1 on white) and --sky (2.17:1 on white) are
   surface and large-heading colors only. Neither is safe for body text on a
   light background. --accent, --electric and --muted are the text-safe three. */
:root{
  --navy:#00B2E3;       /* EXPERIMENT: swapped with --electric, was #383A3C */
  --navy2:#4B4D50;      /* secondary dark surface, lighter tint of the primary dark */
  --deep:#232425;       /* darkest surface, darker shade of the primary dark */
  --accent:#003B5C;     /* darker functional blue for text/buttons (brand-recommended, replaces the brighter royal blue) */
  --accent-hover:#002F4A;
  --electric:#2F3133;   /* EXPERIMENT: swapped with --navy, was #00B2E3. Darkened
                           from #383A3C: as body text on --navy (footer, trust bar)
                           and as the --quote band behind --navy text, #383A3C sat
                           at 4.61:1, a hair over the 4.5:1 floor. #2F3133 lifts all
                           three to 5.27:1 and keeps the --deep/--electric/--navy2
                           ramp ordered. */
  --hl:#0095C8;          /* headline highlight span; brighter than --accent so it reads as distinct from --electric heading text, still 3:1+ on white (ok since always large heading text) */
  --sky:#6BB6FA;        /* spray light blue */
  --haze:#EEF3FB;       /* cool off-white */
  --paper:#FFFFFF;
  --line:#D3DEEC;
  --muted:#54637D;

  --display:'Archivo', system-ui, sans-serif;
  --body:'Instrument Sans', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
}

*{box-sizing:border-box;margin:0;padding:0;}
/* scroll-padding-top keeps in-page jump targets clear of the 90px sticky
   header (2.4.11). It is a floor, not an exact match, since .nav-inner can
   grow past 90px under text zoom. */
html{scroll-behavior:smooth;scroll-padding-top:100px;}
body{font-family:var(--body);color:var(--electric);background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;height:auto;}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#fff;padding:10px 16px;border-radius:0 0 6px 0;font-family:var(--display);font-weight:700;font-size:14px;}
.skip-link:focus{left:0;}
.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;}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.topbar :focus-visible,.build-notes :focus-visible{outline-color:var(--sky);}
footer :focus-visible{outline-color:var(--deep);}

/* ---------- wireframe scaffolding ---------- */
.wf-strip{background:var(--navy);color:#fff;font-family:var(--body);font-size:11px;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:7px 16px;}
.wf-strip b{color:var(--sky);font-weight:600;}
.wf-note{border:1.5px dashed #9AA7BC;border-radius:6px;background:rgba(154,167,188,.06);display:flex;align-items:center;justify-content:center;text-align:center;color:#5B6A82;font-family:var(--body);font-size:12px;letter-spacing:.04em;padding:22px 18px;min-height:120px;}
.wf-tag{font-family:var(--body);font-size:10px;letter-spacing:.05em;color:var(--accent);text-transform:uppercase;}

/* ---------- layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
section{padding:96px 0;}
.eyebrow{font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:10px;margin-bottom:18px;}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--electric);display:inline-block;}
h1,h2,h3{font-family:var(--display);line-height:1.02;letter-spacing:-.02em;}
h1{font-size:clamp(30px,4.4vw,52px);font-weight:800;margin-bottom:18px;}
h2{font-size:clamp(30px,4.4vw,52px);font-weight:800;margin-bottom:18px;}
h3{font-size:20px;font-weight:700;letter-spacing:-.01em;}
.sub-h{display:block;font-size:20px;font-weight:700;letter-spacing:-.01em;margin:14px 0 10px;}
.lede{font-size:19px;color:var(--muted);max-width:100%;}

.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:15px;padding:14px 24px;border-radius:4px;cursor:pointer;border:none;transition:transform .15s ease, background .15s ease;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{transform:translateY(-2px);background:var(--accent-hover);}
.btn-line{background:transparent;color:var(--electric);border:1.5px solid var(--electric);}
.btn-line:hover{background:var(--navy);color:var(--electric);}
.btn-dark{background:var(--electric);color:#fff;}
.btn-dark:hover{transform:translateY(-2px);background:var(--navy2);}

/* ---------- top social bar ---------- */
.topbar{background:var(--deep);}
.topbar-inner{max-width:1180px;margin:0 auto;padding:8px 28px;display:flex;justify-content:flex-end;align-items:center;gap:16px;}
.topbar-label{font-family:var(--body);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8595b5;}
/* The 4px padding is load-bearing: 16px icon + 8px = a 24x24 hit area, which
   is exactly WCAG 2.2's 2.5.8 minimum target size. Do not trim it. The
   negative margin cancels the visual effect without shrinking the target. */
.topbar .soc{color:#aebfe0;display:inline-flex;align-items:center;justify-content:center;line-height:0;padding:4px;margin:-4px;}
.topbar .soc svg{width:16px;height:16px;display:block;fill:currentColor;}
.topbar .soc:hover{color:#fff;}
@media(max-width:560px){ .topbar-inner{padding:8px 20px;gap:14px;} }

/* ---------- nav (light) ---------- */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);box-shadow:0 1px 14px rgba(10,26,70,.05);}
/* min-height, not height: the bar has to be able to grow rather than clip
   its contents under text zoom or the 1.4.12 text-spacing overrides. */
.nav-inner{display:flex;align-items:center;justify-content:space-between;min-height:90px;}
.brand-logo{height:72px;width:auto;}
.nav-links{display:flex;align-items:center;gap:20px;}
.nav-links a{color:var(--electric);font-size:15px;font-weight:500;}
.nav-links a:hover{color:var(--accent);}
.nav-links a.active{color:var(--accent);font-weight:600;}
.nav-links a.nav-cta{background:var(--accent);color:#fff;padding:10px 18px;border-radius:4px;font-family:var(--display);font-weight:700;font-size:14px;}
.nav-links a.nav-cta:hover{color:#fff;background:var(--accent-hover);}
.nav-toggle{display:none;background:none;border:none;color:var(--electric);font-size:26px;cursor:pointer;}

/* ---------- hero (light, logo featured) ---------- */
.hero{background:linear-gradient(180deg,#F3F8FF 0%,#FFFFFF 78%);position:relative;overflow:hidden;padding:70px 0 92px;text-align:center;}
.hero-logo{width:230px;height:auto;margin:0 auto 26px;}
.hero .eyebrow{justify-content:center;}
.hero h1{font-size:clamp(38px,6vw,72px);font-weight:900;letter-spacing:-.03em;color:var(--electric);}
.hero h1 .hl{color:var(--hl);}
.hero p.sub{font-size:19px;color:var(--muted);max-width:100%;margin:24px auto 32px;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.hero-video-wrap{position:relative;}
.hero-video{height:auto;}
/* Matches the video's 80% width so the caption sits under it rather than
   running the full container width. */
.video-cap{max-width:80%;margin:12px auto 0;text-align:center;font-family:var(--body);font-size:14px;color:var(--muted);}
/* Alpha is load-bearing: the glyph is white over whatever video frame is
   behind it, so .55 dropped to ~4.08:1 against a bright sky. .7 holds 4.5:1
   even on the lightest frame. */
.video-toggle{position:absolute;left:18px;bottom:18px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(7,20,46,.7);color:#fff;border:none;border-radius:50%;font-size:16px;line-height:1;cursor:pointer;}
.video-toggle:hover{background:rgba(7,20,46,.85);}

/* telemetry readout, instrument panel */
.telemetry{max-width:780px;margin:48px auto 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 14px 38px -22px rgba(10,26,70,.45);}
.tele-head{display:flex;align-items:center;gap:9px;background:var(--deep);color:#aebfe0;font-family:var(--body);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:11px 18px;}
.tele-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);}
.tele-cell{background:#fff;padding:22px 18px 20px;text-align:left;}
.tele-val{font-family:var(--body);font-weight:600;font-size:32px;color:var(--electric);line-height:1;letter-spacing:-.01em;}
.tele-val span{color:var(--accent);font-size:16px;}
.tele-label{font-family:var(--body);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:10px;}

/* elevation ruler signature */
.ruler{position:absolute;top:0;bottom:0;right:38px;width:96px;display:flex;flex-direction:column;justify-content:space-between;padding:38px 0 44px;pointer-events:none;}
.ruler::before{content:"";position:absolute;top:46px;bottom:50px;right:0;width:1px;background:linear-gradient(180deg,var(--electric),#C2CFE4 62%,transparent);}
/* The ruler is aria-hidden, but 1.4.3 still applies to visible text, and at
   9-10px these labels sit on the near-white hero gradient. #5F6E8A is the
   lightest value that clears 4.5:1 there and keeps the recessive look. */
.ruler .rlabel{position:absolute;top:10px;right:0;font-family:var(--body);font-size:9px;letter-spacing:.2em;color:#5F6E8A;}
.ruler .tick{position:relative;display:flex;align-items:center;gap:9px;justify-content:flex-end;color:#5F6E8A;font-family:var(--body);font-size:10px;letter-spacing:.06em;}
.ruler .tick i{width:14px;height:1px;background:#C2CFE4;display:block;}
.ruler .tick.major{color:var(--accent);}
.ruler .tick.major i{width:26px;height:2px;background:var(--electric);}
.ruler .tick.ceil{color:var(--electric);font-weight:600;}
.ruler .tick.ceil i{width:32px;height:2px;background:var(--electric);}

/* ---------- trust bar (dark) ---------- */
.trust{background:var(--navy);color:#fff;}
.trust-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 30px;padding:22px 28px;max-width:1180px;margin:0 auto;}
.trust-item{font-family:var(--body);font-size:13px;letter-spacing:.04em;color:var(--electric);display:flex;align-items:center;gap:9px;}
.trust-item b{color:var(--electric);}

/* ---------- services ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;}
.svc{border:1px solid var(--line);border-radius:8px;padding:28px 26px 30px;background:var(--paper);transition:border-color .2s,transform .2s;position:relative;overflow:hidden;}
.svc:hover{border-color:var(--electric);transform:translateY(-3px);}
.svc-method{display:inline-block;font-family:var(--body);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);background:var(--haze);border:1px solid var(--line);border-radius:100px;padding:5px 11px;}
.svc h3{margin:16px 0 10px;}
.svc p{color:var(--muted);font-size:15px;}

/* ---------- how it works ---------- */
.how{background:var(--haze);}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px;}
.step{position:relative;padding-top:20px;}
.step .n{font-family:var(--body);font-size:13px;color:var(--accent);border-top:2px solid var(--electric);padding-top:12px;display:inline-block;letter-spacing:.1em;}
.step h3{margin:12px 0 8px;font-size:18px;}
.step p{color:var(--muted);font-size:14px;}

/* ---------- why drone (dark) ---------- */
.why{background:var(--navy);color:#fff;}
.why .eyebrow{color:var(--sky);}
.why .eyebrow::before{background:var(--sky);}
.why .lede{color:#aebcd6;}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px;}
.cmp-col{border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:26px 26px 30px;}
.cmp-col.us{border-color:var(--sky);background:rgba(107,182,250,.09);}
.cmp-col h3{font-size:16px;font-family:var(--body);font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:20px;color:#93a4c4;}
.cmp-col.us h3{color:var(--sky);}
.cmp-col ul{list-style:none;}
.cmp-col li{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.09);font-size:15px;color:#d6dfef;display:flex;gap:11px;align-items:flex-start;}
.cmp-col li:last-child{border-bottom:none;}
.cmp-col li::before{content:"×";color:#6c7ea0;font-family:var(--body);flex:none;}
.cmp-col.us li::before{content:"↑";color:var(--sky);}

/* ---------- pricing ---------- */
.quote-steps{display:flex;flex-wrap:wrap;gap:24px;}
.qstep{flex:1;min-width:240px;border:1px solid var(--line);border-radius:10px;padding:28px 24px;background:#fff;}
.qstep span{font-family:var(--display);font-weight:800;font-size:36px;color:var(--accent);line-height:1;display:block;margin-bottom:14px;}
.qstep b{font-family:var(--display);font-size:19px;display:block;margin-bottom:8px;}
.qstep p{color:var(--muted);font-size:15px;}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center;}
.badges{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;}

/* ---------- city landing pages ---------- */
.city-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start;margin-top:38px;}
.city-grid iframe{width:100%;display:block;border-radius:10px;}
@media(max-width:900px){.city-grid{grid-template-columns:1fr;}}
.badge{font-family:var(--body);font-size:12px;letter-spacing:.05em;text-transform:uppercase;border:1.5px solid var(--electric);border-radius:100px;padding:9px 16px;}
.badge.brand{border-color:var(--electric);color:var(--accent);}

/* ---------- plans ---------- */
.plans{background:var(--haze);}
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;}
.plan{border:1px solid var(--line);border-radius:8px;padding:28px 26px;background:#fff;}
.plan .cad{font-family:var(--body);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.plan h3{margin:10px 0;}
.plan p{color:var(--muted);font-size:14px;}

/* ---------- service area (dark) ---------- */
.area{background:var(--navy);color:#fff;}
.area .eyebrow{color:var(--sky);}
.area .eyebrow::before{background:var(--sky);}
.area .cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:8px;}
.area h3{font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--sky);margin-bottom:16px;}
.area ul{list-style:none;columns:2;color:#cdd8ea;font-size:15px;}
.area ul a{color:var(--accent);text-decoration:underline;text-decoration-color:rgba(0,59,92,.35);text-underline-offset:2px;}
.area ul a:hover{color:var(--accent-hover);}
.area li{padding:6px 0;}

/* ---------- faq ---------- */
.faq details{border-bottom:1px solid var(--line);padding:22px 0;}
/* Deliberately no `display` override on <summary>: changing it has a history
   of breaking the native <details> toggle in WebKit, and summary is the only
   control on this page. It keeps its default display:list-item, the marker is
   suppressed two ways for old and new engines, and the flex row lives on an
   inner wrapper instead. */
.faq summary{cursor:pointer;list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::marker{content:"";}
/* .faq-q is an <h2> so the questions are reachable by heading navigation.
   The three trailing values neutralise the global h1,h2,h3 / h2 rules, which
   would otherwise impose an 18px bottom margin, line-height 1.02 and -.02em
   tracking: without them the questions render differently from the span this
   replaced. Keep the heading text character-identical to the FAQPage
   mainEntity names in faq.html, or the rich result mismatches. */
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:var(--display);font-weight:700;font-size:18px;margin:0;line-height:1.55;letter-spacing:normal;}
.faq-q::after{content:"+";color:var(--electric);font-family:var(--body);font-size:22px;flex:none;}
.faq details[open] .faq-q::after{content:"–";}
.faq p{color:var(--muted);font-size:15px;overflow:hidden;height:0;margin-top:0;transition:height .3s ease,margin-top .3s ease;}
.faq details[open] p{height:auto;margin-top:14px;}

/* ---------- proof / before-after ---------- */
.proof{background:var(--haze);}
.ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;}
.ba-card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:transform .2s,border-color .2s;}
.ba-card:hover{transform:translateY(-3px);border-color:var(--electric);}
.ba-frame{position:relative;display:grid;grid-template-columns:1fr 1fr;aspect-ratio:4/3;}
.ba-half{display:flex;align-items:flex-end;padding:12px;}
.ba-half span{font-family:var(--body);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(7,20,46,.68);padding:4px 8px;border-radius:4px;}
.ba-half.before{background:repeating-linear-gradient(45deg,#1d2c53,#1d2c53 9px,#233467 9px,#233467 18px);}
.ba-half.after{background:linear-gradient(135deg,#2b60d6,#69b0f6);}
.ba-divider{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;transform:translateX(-1px);}
.ba-divider::after{content:"";position:absolute;top:50%;left:50%;width:28px;height:28px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 2px 9px rgba(0,0,0,.35);}
.ba-divider::before{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;font-family:var(--body);font-size:11px;font-weight:600;color:var(--electric);letter-spacing:-1px;}
.ba-cap{padding:15px 16px 17px;}
.ba-cap b{font-family:var(--display);font-size:15px;display:block;}
.ba-cap span{color:var(--muted);font-size:12.5px;font-family:var(--body);letter-spacing:.02em;}
.testimonial{margin-top:24px;background:var(--navy);color:#fff;border-radius:12px;padding:40px 42px;position:relative;overflow:hidden;}
.testimonial .qmark{position:absolute;top:6px;right:28px;font-family:var(--display);font-weight:900;font-size:120px;line-height:1;color:rgba(107,182,250,.16);}
.testimonial .wf-tag{color:var(--sky);margin-bottom:16px;}
.testimonial blockquote{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.3vw,27px);line-height:1.32;letter-spacing:-.01em;max-width:880px;position:relative;}
.testimonial .attrib{margin-top:18px;font-family:var(--body);font-size:13px;color:#aebfe0;letter-spacing:.03em;}

/* ---------- quote (brand cyan CTA band) ---------- */
.quote{background:var(--electric);color:var(--navy);}
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;}
.quote .eyebrow{color:var(--navy);}
.quote .eyebrow::before{background:var(--navy);}
.quote h2{color:var(--navy);}
.quote .lede{color:var(--navy);}
.form{background:#fff;border-radius:10px;padding:30px;color:var(--navy);}
.field{margin-bottom:16px;}
.field label{display:block;font-family:var(--body);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:5px;padding:12px 13px;font-family:var(--body);font-size:15px;color:var(--navy);background:var(--paper);}
.field textarea{resize:vertical;min-height:88px;}
.contact-list{margin-top:30px;}
.contact-list div{font-family:var(--body);font-size:14px;padding:9px 0;border-top:1px solid rgba(255,255,255,.32);color:#eaf1ff;}
.contact-list b{color:#fff;}

/* ---------- footer (dark) ---------- */
footer{background:var(--navy);color:var(--electric);padding:60px 0 30px;font-size:14px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;}
.foot-logo-panel{background:#fff;border-radius:10px;padding:16px;display:inline-block;margin-bottom:16px;}
.foot-logo-panel img{height:150px;width:auto;}
footer .foot-h{font-family:var(--body);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--electric);margin-bottom:16px;}
/* Real list semantics for the footer columns (screen readers announce the
   item count). The global reset already zeroes margin and padding, so
   dropping the marker is all that is needed to keep the previous look. */
.foot-links{list-style:none;}
/* NB: the underline tint is --electric at 35%. If --electric changes, change
   it here too (text-decoration-color cannot take an alpha on currentColor). */
footer a{display:block;padding:5px 0;color:var(--electric);text-decoration:underline;text-decoration-color:rgba(47,49,51,.35);text-underline-offset:2px;}
footer .foot-static{display:block;padding:5px 0;color:var(--electric);}
footer a:hover{color:var(--accent);}
.foot-bottom{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--body);font-size:12px;}

/* ---------- build-notes ---------- */
.build-notes{background:var(--deep);color:#c7d2e4;padding:56px 0;}
.build-notes h2{color:#fff;font-size:26px;}
.build-notes .eyebrow{color:var(--sky);}
.build-notes .eyebrow::before{background:var(--sky);}
.note-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:30px;}
.note-cols ul{list-style:none;}
.note-cols li{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.09);font-size:14px;padding-left:22px;position:relative;}
.note-cols li::before{content:"▸";position:absolute;left:0;color:var(--sky);}

/* ---------- give-back ---------- */
.give{background:linear-gradient(180deg,#F3F8FF 0%,#FFFFFF 82%);}
.give-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;}
.give .give-stat{display:flex;align-items:center;gap:14px;margin-top:28px;}
.give .give-stat b{font-family:var(--display);font-weight:900;font-size:60px;line-height:1;color:var(--accent);letter-spacing:-.03em;}
.give .give-stat span{font-family:var(--body);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.5;}
.give-form{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px 26px;box-shadow:0 16px 40px -24px rgba(10,26,70,.45);color:var(--navy);}
.give-form h3{margin-bottom:6px;}
.give-form p.sml{color:var(--muted);font-size:13px;margin-bottom:18px;}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .nav-links{display:none;}
  /* Open state for the mobile menu. Lives here rather than as inline styles
     written by the toggle script, so it cannot survive past the breakpoint.
     top:100% pins it to the bottom of the sticky header whatever height that
     header has grown to. */
  .nav-links.is-open{display:flex;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;background:#fff;padding:20px 28px;gap:18px;
    border-bottom:1px solid var(--line);}
  .nav-toggle{display:block;}
  .about-grid,.quote-grid,.area .cols,.note-cols,.give-grid{grid-template-columns:1fr;gap:34px;}
  .svc-grid,.steps,.cmp,.plans-grid,.foot-grid,.tele-grid,.ba-grid{grid-template-columns:1fr 1fr;}
  .ruler{display:none;}
  section{padding:64px 0;}
}
@media(max-width:560px){
  .svc-grid,.steps,.cmp,.plans-grid,.foot-grid,.tele-grid,.ba-grid{grid-template-columns:1fr;}
  .trust-inner{justify-content:flex-start;}
  .hero-logo{width:180px;}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto;}}

/* ---------- multi-page specifics ---------- */
.page-hero{background:linear-gradient(180deg,#F3F8FF 0%,#FFFFFF 82%);padding:74px 0 58px;position:relative;overflow:hidden;}
.page-hero h1{font-family:var(--display);font-weight:900;font-size:clamp(34px,5.2vw,60px);letter-spacing:-.03em;color:var(--electric);line-height:1.03;max-width:100%;}
.page-hero h1 .hl{color:var(--hl);}
.page-hero .sub{font-size:19px;color:var(--muted);max-width:100%;margin-top:20px;}
.nominate-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
a.svc{cursor:pointer;}
a.svc h2,a.svc h3{color:var(--electric);}
a.svc .go{font-family:var(--display);font-weight:700;font-size:14px;color:var(--accent);margin-top:14px;display:inline-block;}
@media(max-width:900px){ .nominate-grid{grid-template-columns:1fr;gap:34px;} }
@media(max-width:560px){ .form-row{grid-template-columns:1fr;} }

/* ---------- media placeholders (wireframe) ---------- */
.wf-media{border:1.5px dashed #9AA7BC;border-radius:10px;background:repeating-linear-gradient(45deg,rgba(154,167,188,.05),rgba(154,167,188,.05) 12px,rgba(154,167,188,.10) 12px,rgba(154,167,188,.10) 24px);display:flex;align-items:center;justify-content:center;text-align:center;color:#5B6A82;font-family:var(--body);font-size:12px;letter-spacing:.04em;padding:26px;min-height:170px;line-height:1.7;}
.wf-media b{color:#54637D;font-weight:600;letter-spacing:.09em;}
.wf-dark{color:#aebfe0;border-color:rgba(174,191,224,.5);background:rgba(174,191,224,.07);}
.wf-dark b{color:#cdd8ea;}
.svc-media{border:1.5px dashed #9AA7BC;border-radius:8px;background:rgba(154,167,188,.06);height:120px;display:flex;align-items:center;justify-content:center;text-align:center;color:#5B6A82;font-family:var(--body);font-size:11px;letter-spacing:.05em;margin-bottom:16px;padding:10px;line-height:1.5;}
img.svc-media{border:none;background:none;padding:0;height:180px;width:100%;object-fit:cover;display:block;}

/* ============================================================
   Page-specific overrides
   ============================================================ */

/* about.html — founders block */
body.page-about .founders{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:30px;}
body.page-about .founder .role{font-family:var(--body);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;}
body.page-about .founder h3{font-size:23px;margin-bottom:14px;}
body.page-about .founder p{color:var(--muted);font-size:15px;margin-bottom:12px;}
body.page-about .founder .pic{width:100%;max-width:220px;aspect-ratio:4/5;object-fit:cover;object-position:center top;border-radius:10px;margin:0 auto 18px;display:block;min-height:0;}
@media(max-width:760px){ body.page-about .founders{grid-template-columns:1fr;gap:36px;} }

/* about.html — team block, kept visually subordinate to the founders above */
body.page-about .team-h2{font-size:18px;color:var(--muted);margin-bottom:22px;}
body.page-about .team{display:flex;flex-direction:column;gap:32px;}
body.page-about .teammate{display:flex;gap:28px;align-items:flex-start;max-width:100%;}
body.page-about .teammate .pic{flex:none;width:220px;aspect-ratio:4/5;object-fit:cover;object-position:center top;border-radius:10px;}
body.page-about .teammate h3{font-size:17px;margin-bottom:4px;}
body.page-about .teammate .role{font-family:var(--body);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;}
body.page-about .teammate p{color:var(--muted);font-size:15px;}
@media(max-width:600px){ body.page-about .teammate{flex-direction:column;} body.page-about .teammate .pic{width:100%;max-width:220px;} }

/* how-it-works.html — 2-up grid for the five steps, with the odd
   fifth step spanning the row but constrained and centered to match
   the width of a single column tile */
body.page-how-it-works .steps{grid-template-columns:repeat(2,1fr);gap:36px;}
body.page-how-it-works .step:last-child{grid-column:1 / -1;max-width:calc((100% - 36px)/2);margin:0 auto;}
@media(max-width:700px){
  body.page-how-it-works .steps{grid-template-columns:1fr;}
  body.page-how-it-works .step:last-child{grid-column:auto;max-width:none;margin:0;}
}

/* index.html — hero eyebrow has no leading dash; trust bar type is bolder;
   #explore and the CTA band use the default 96px section padding on both
   sides, which left a very large gap between the service cards and the
   CTA band below them */
body.page-home .hero{padding-bottom:40px;}
body.page-home .hero .eyebrow::before{display:none;}
body.page-home .trust-item{font-weight:500;font-size:14px;letter-spacing:.01em;}
body.page-home .svc-method{margin-bottom:14px;}
body.page-home #explore{padding:56px 0;}
body.page-home .quote{padding:64px 0;}

/* quote.html — .quote/.form/.contact-list are this page's own content
   (not a CTA banner), so they use a light card instead of the royal-blue
   promo treatment those classes have elsewhere */
body.page-quote .quote{background:var(--haze);color:var(--electric);}
body.page-quote .quote .eyebrow{color:var(--accent);}
body.page-quote .quote .eyebrow::before{background:var(--electric);}
body.page-quote .quote h2{color:var(--electric);}
body.page-quote .quote .lede{color:var(--muted);}
body.page-quote .form{border:1px solid var(--line);box-shadow:0 14px 38px -22px rgba(10,26,70,.28);}
body.page-quote .contact-list div{border-top:1px solid var(--line);color:#33415c;}
body.page-quote .contact-list b{color:var(--navy);}

/* giving-back.html — tighter vertical rhythm than the default 96px
   section padding, since the photo section between the hero and the
   "how it works" cards already carries its own spacing */
body.page-giving-back #how{padding:56px 0;}
body.page-giving-back .give{padding:56px 0;}

/* services.html — the oval method pills and headers sit flush against
   each other under the shared reset, so they need explicit spacing;
   the services section's bottom padding, and the plans section's top
   padding, are both trimmed so the cards and the plans section below
   them aren't separated by the full default 96px + 96px gap */
body.page-services .svc-method{margin-bottom:14px;}
body.page-services .svc p{margin-top:12px;}
body.page-services #services{padding-bottom:32px;}
body.page-services .plans{padding-top:32px;}
body.page-services .plans .lede{max-width:900px;}

/* how-it-works.html — .how's default haze tint reads as an all-over
   blue background across a full page of content, so this page uses a
   plain white background instead */
body.page-how-it-works .how{background:#fff;}

/* service-area.html — .area is this page's own content, so it uses a
   light section instead of the dark navy teaser used elsewhere */
body.page-service-area .area{background:#fff;color:var(--electric);}
body.page-service-area .area h3{color:var(--accent);}
body.page-service-area .area ul{color:var(--electric);}

/* why-drone.html — telemetry panel uses the page's loaded Roboto Mono
   face; the why/cmp-col sections sit on a light background instead of
   the dark navy treatment used elsewhere */
body.page-why-drone .tele-head,
body.page-why-drone .tele-val,
body.page-why-drone .tele-label{font-family:'Roboto Mono', ui-monospace, monospace;}
body.page-why-drone .why{background:#fff;color:var(--electric);}
body.page-why-drone #eco{padding:32px 0 64px;}
body.page-why-drone .cmp-col{border:1px solid var(--line);}
body.page-why-drone .cmp-col.us{border-color:var(--accent);background:var(--haze);}
body.page-why-drone .cmp-col h3{color:var(--muted);}
body.page-why-drone .cmp-col.us h3{color:var(--accent);}
body.page-why-drone .cmp-col li{border-bottom:1px solid var(--line);color:#33415c;}
body.page-why-drone .cmp-col li::before{color:var(--muted);}
body.page-why-drone .cmp-col.us li::before{color:var(--accent);}