/* ===========================================================
   Citydrones — design tokens
   Palette grounded in aerial survey / blueprint instruments:
   ink-navy + blueprint blue for structure, signal-amber for
   the aviation/survey-marker accent. Mono type carries the
   coordinate / data motif used throughout (eyebrows, nav,
   flight-log labels). Signature device: a boustrophedon
   (lawnmower) survey-flight path, the literal pattern a drone
   flies to capture a photogrammetry grid.
   =========================================================== */

:root{
  --ink-navy:   #0B1B2B;
  --blueprint:  #142C44;
  --panel-dark: #16324F;
  --line-blue:  #4A7FA6;
  --line-blue-soft: #B9CFDD;
  --signal:     #E8823C;
  --signal-dark:#B8611F;
  --paper:      #F4F5F1;
  --paper-alt:  #E9EBE3;
  --ink:        #10202E;
  --ink-soft:   #4C5C67;
  --hairline:   rgba(16,32,46,0.12);
  --hairline-dark: rgba(244,245,241,0.16);

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --max: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  margin:0;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
p{ margin:0; }
.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- eyebrow / mono labels ---------- */
.eyebrow{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal-dark);
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 18px;
}
.eyebrow::before{
  content:'';
  width: 22px; height: 1px;
  background: var(--signal-dark);
  display:inline-block;
}
.on-dark .eyebrow{ color: var(--signal); }
.on-dark .eyebrow::before{ background: var(--signal); }

/* ---------- header / nav ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(11,27,43,0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--hairline-dark);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px;
}
.brand{
  display:flex; flex-direction:column; gap:6px;
  color: #F4F5F1;
}
.brand-logo{
  height: 26px;
  width: auto;
  display:block;
}
.brand-name{
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.brand-coord{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--line-blue-soft);
}
nav.primary-nav{
  display:flex; align-items:center; gap: 30px;
}
nav.primary-nav a{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #C9D3DA;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
nav.primary-nav a:hover{ color:#fff; }
nav.primary-nav a.active{
  color: var(--signal);
  border-color: var(--signal);
}
.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  color:#fff; padding:8px;
}
.nav-toggle svg{ width:22px; height:22px; }

@media (max-width: 860px){
  nav.primary-nav{
    position:absolute; top:76px; left:0; right:0;
    background: var(--ink-navy);
    flex-direction:column; align-items:flex-start;
    padding: 8px 32px 24px;
    gap: 14px;
    border-bottom: 1px solid var(--hairline-dark);
    display:none;
  }
  nav.primary-nav.open{ display:flex; }
  .nav-toggle{ display:block; }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height: 78vh;
  display:flex; align-items:flex-end;
  background-size: cover;
  background-position: center;
  color: #F4F5F1;
  overflow:hidden;
}
.hero::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,27,43,0.35) 0%, rgba(11,27,43,0.55) 45%, rgba(11,27,43,0.94) 100%);
}
.hero-flightpath{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity: 0.5;
}
.hero .wrap{
  position:relative; z-index:2;
  padding-bottom: 64px;
  padding-top: 140px;
}
.hero h1{
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.05;
  color:#fff;
  max-width: 820px;
}
.hero .lede{
  margin-top: 22px;
  max-width: 560px;
  font-size: 17px;
  color: #D7DEE3;
}
.hero-meta{
  display:flex; gap: 34px; margin-top: 44px;
  flex-wrap: wrap;
}
.hero-meta div{ font-family: var(--font-mono); font-size:12px; color: var(--line-blue-soft); letter-spacing: 0.04em; }
.hero-meta strong{ display:block; color:#fff; font-size:14px; margin-bottom:4px; font-weight:500; }

.page-hero{
  min-height: 46vh;
  align-items:center;
}
.page-hero .wrap{ padding-top: 120px; padding-bottom: 56px; }
.page-hero h1{ font-size: clamp(30px, 4.4vw, 46px); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 26px;
  border: 1px solid var(--signal);
  color: var(--signal);
  background: transparent;
  transition: background .15s ease, color .15s ease;
}
.btn:hover{ background: var(--signal); color: var(--ink-navy); }
.btn.solid{ background: var(--signal); color: var(--ink-navy); }
.btn.solid:hover{ background: var(--signal-dark); border-color: var(--signal-dark); color:#fff; }
.on-light .btn{ border-color: var(--signal-dark); color: var(--signal-dark); }
.on-light .btn:hover{ background: var(--signal-dark); color:#fff; }

/* ---------- sections ---------- */
section{ padding: 90px 0; }
section.alt{ background: var(--paper-alt); }
section.dark{ background: var(--ink-navy); color:#F4F5F1; }
.section-head{
  max-width: 680px;
  margin-bottom: 52px;
}
.section-head h2{ font-size: clamp(26px, 3.2vw, 36px); }
.section-head .desc{ margin-top:16px; color: var(--ink-soft); font-size:16px; }
.dark .section-head .desc{ color: #B9C3CA; }

/* ---------- feature grid / cards ---------- */
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.grid.two{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px){ .grid{ grid-template-columns: 1fr; } }

.card{
  background: var(--paper);
  padding: 36px 32px;
}
section.alt .card{ background: var(--paper-alt); }
section.dark .card{ background: var(--blueprint); }
.card-icon{
  width: 40px; height:40px;
  margin-bottom: 22px;
  color: var(--signal-dark);
}
.dark .card-icon{ color: var(--signal); }
.card h3{ font-size: 19px; margin-bottom: 12px; }
.card p{ color: var(--ink-soft); font-size: 14.5px; }
.dark .card p{ color: #B9C3CA; }

/* ---------- media split ---------- */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items:center;
}
.split.reverse .split-media{ order:2; }
@media (max-width: 860px){
  .split{ grid-template-columns: 1fr; gap:32px; }
  .split.reverse .split-media{ order:0; }
}
.split-media{ position:relative; }
.split-media img{ width:100%; height: 420px; object-fit:cover; }
.split-media .frame-tag{
  position:absolute; bottom:14px; left:14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color:#fff;
  background: rgba(11,27,43,0.72);
  padding: 6px 10px;
  letter-spacing:0.05em;
}
.split-body ul{ list-style:none; margin: 26px 0 0; padding:0; display:flex; flex-direction:column; gap:20px; }
.split-body li{ display:flex; gap:16px; }
.split-body .dot{
  width:6px; height:6px; margin-top:9px; flex:none;
  background: var(--signal-dark);
}
.split-body h4{ font-size:16px; margin-bottom:4px; }
.split-body li p{ color: var(--ink-soft); font-size: 14.5px; }

/* ---------- stat strip ---------- */
.stat-strip{
  display:grid; grid-template-columns: repeat(4,1fr);
  border-top:1px solid var(--hairline-dark);
  border-bottom:1px solid var(--hairline-dark);
}
.stat-strip div{ padding: 30px 32px; border-left:1px solid var(--hairline-dark); }
.stat-strip div:first-child{ border-left:none; }
.stat-strip strong{ display:block; font-family: var(--font-display); font-size: 30px; color:#fff; }
.stat-strip span{ font-family: var(--font-mono); font-size:11.5px; color: var(--line-blue-soft); letter-spacing:0.05em; text-transform:uppercase; }
@media (max-width: 720px){ .stat-strip{ grid-template-columns: repeat(2,1fr); } .stat-strip div{ border-left:none; border-top:1px solid var(--hairline-dark);} .stat-strip div:nth-child(2){border-left:1px solid var(--hairline-dark);} .stat-strip div:nth-child(4){border-left:1px solid var(--hairline-dark);} }

/* ---------- section-list (used for agenda / divider content) ---------- */
.route-list{ display:flex; flex-direction:column; }
.route-list a{
  display:flex; align-items:center; justify-content:space-between;
  padding: 26px 0; border-bottom: 1px solid var(--hairline-dark);
  transition: padding-left .15s ease;
}
.route-list a:hover{ padding-left: 12px; }
.route-list .r-index{ font-family: var(--font-mono); font-size:12px; color: var(--line-blue-soft); width:70px; flex:none; }
.route-list .r-title{ font-family: var(--font-display); font-size: 21px; color:#fff; flex:1; }
.route-list .r-arrow{ color: var(--signal); font-family: var(--font-mono); font-size: 14px; }

/* ---------- CTA band ---------- */
.cta-band{
  background: var(--ink-navy); color:#fff;
  padding: 84px 0;
  text-align:center;
}
.cta-band h2{ color:#fff; font-size: clamp(26px,3.6vw,40px); max-width:640px; margin: 0 auto; }
.cta-band p{ color:#B9C3CA; margin-top:16px; }
.cta-band .btn-row{ margin-top:34px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ---------- footer ---------- */
footer{
  background: var(--ink-navy); color:#B9C3CA;
  padding: 56px 0 28px;
}
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--hairline-dark);
}
@media (max-width: 720px){ .footer-grid{ grid-template-columns: 1fr; } }
footer h4{
  font-family: var(--font-mono); font-size:11.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:#fff; margin-bottom:18px;
}
footer .foot-logo{ height: 34px; width:auto; display:block; }
footer .foot-desc{ margin-top:18px; font-size:14px; max-width:320px; color:#96A4AC; }
footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; font-size:14px; }
footer ul a:hover{ color:#fff; }
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top: 24px; font-family: var(--font-mono); font-size:11.5px; color:#7C8A92;
  flex-wrap:wrap; gap:10px;
}

/* ---------- contact page ---------- */
.contact-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 64px;
}
@media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } }
.contact-card{
  background: var(--ink-navy); color:#fff;
  padding: 44px;
}
.contact-line{ display:flex; gap:16px; padding: 20px 0; border-bottom:1px solid var(--hairline-dark); }
.contact-line:first-child{ padding-top:0; }
.contact-line .clabel{ font-family: var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color: var(--line-blue-soft); width:110px; flex:none; padding-top:2px; }
.contact-line .cval{ font-size:16px; }
form.enquiry{ display:flex; flex-direction:column; gap:20px; }
form.enquiry label{ font-family: var(--font-mono); font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color: var(--ink-soft); margin-bottom:8px; display:block; }
form.enquiry input, form.enquiry select, form.enquiry textarea{
  width:100%; border:none; border-bottom: 1px solid var(--hairline);
  background: transparent; padding: 10px 2px; font-family: var(--font-body);
  font-size:15px; color: var(--ink);
}
form.enquiry input:focus, form.enquiry select:focus, form.enquiry textarea:focus{
  outline:none; border-color: var(--signal-dark);
}
form.enquiry textarea{ resize:vertical; min-height:100px; }
.form-note{ font-size:13px; color: var(--ink-soft); margin-top:4px; }

/* ---------- utility ---------- */
.tag-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.tag-list span{
  font-family: var(--font-mono); font-size:11.5px; letter-spacing:0.04em;
  border: 1px solid var(--hairline); padding: 7px 14px; color: var(--ink-soft);
}
.dark .tag-list span{ border-color: var(--hairline-dark); color:#B9C3CA; }

.divider-note{
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--line-blue-soft);
  letter-spacing: 0.04em;
  max-width: 520px;
  margin-top: 18px;
}

/* ---------- thermal imaging treatment ----------
   Built from the site's own licensed photography — grayscale
   base + an iron-palette color-map (mix-blend-mode: color),
   no external stock imagery. */
.thermal-media{
  position:relative;
  overflow:hidden;
}
.thermal-media img{
  filter: grayscale(1) contrast(1.3) brightness(0.92);
  display:block;
}
.thermal-media::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(120deg,
    #04012e 0%, #1c0a52 14%, #4a0e73 28%, #8a1069 42%,
    #c62253 55%, #e8482c 68%, #f68f1c 80%, #ffd23f 91%, #fff6d8 100%);
  mix-blend-mode: color;
  opacity: 0.94;
}
/* fill variant: absolutely fills a positioned ancestor (used inside .hero) */
.thermal-fill{
  position:absolute; inset:0;
}
.thermal-fill img{
  width:100%; height:100%; object-fit:cover;
}
.readout{
  position:absolute;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color:#fff;
  background: rgba(11,27,43,0.55);
  padding: 6px 10px;
  z-index:3;
  border: 1px solid rgba(255,255,255,0.25);
}
.readout.max{ top:16px; right:16px; }
.readout.min{ bottom:16px; right:16px; color: var(--line-blue-soft); }
.readout .rlabel{ opacity:0.7; margin-right:6px; }
.crosshair{
  position:absolute; width:34px; height:34px;
  border:1px solid rgba(255,255,255,0.55);
  border-radius:50%;
  z-index:3;
}
.crosshair::before, .crosshair::after{
  content:''; position:absolute; background: rgba(255,255,255,0.7);
}
.crosshair::before{ left:50%; top:-8px; width:1px; height:8px; }
.crosshair::after{ left:-8px; top:50%; width:8px; height:1px; }