:root{
  --bg:#070a08;
  --surface:#0e150f;
  --surface-2:#141d15;
  --text:#e7f2e9;
  --text-muted:#7c9683;
  --accent:#39e37a;
  --accent-ink:#04150a;
  --accent-2:#e8a33d;
  --border:rgba(57,227,122,.22);
  --grid-line:rgba(57,227,122,.06);
  --shadow: 0 20px 60px -25px rgba(0,0,0,.75);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}
body{
  margin:0;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0/48px 48px,
    var(--bg);
  color:var(--text);
  font-family:"Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
[hidden]{display:none !important;}
a{color:inherit;}
h1,h2,h3{
  font-family:"Big Shoulders Display", ui-sans-serif, system-ui, sans-serif;
  text-transform:uppercase;
  letter-spacing:.01em;
  text-wrap:balance;
  margin:0;
  line-height:.95;
}
.mono{
  font-family:"IBM Plex Mono", ui-monospace, "Courier New", monospace;
}
.eyebrow{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:"";
  width:.9em;
  height:.9em;
  border:1.5px solid currentColor;
  border-radius:2px;
  flex:none;
}
.wrap{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:clamp(16px, 4vw, 40px);
}
section{
  padding-block:clamp(56px, 9vw, 108px);
  border-bottom:1px solid var(--border);
}
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ---- header ---- */
header.site{
  position:sticky;
  top:0;
  z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:14px;
}
.wordmark{
  display:flex;
  align-items:center;
  gap:.7em;
  text-decoration:none;
  color:var(--text);
  flex:none;              /* never let a crowded desktop nav squeeze the logo */
}
/* ...but on phones the same row also carries the call button and the menu
   toggle, and there is no room to hold the wordmark rigid. Left unchecked it
   pushes the whole document wider than the viewport, taking both controls off
   screen. Below the nav breakpoint it gives ground instead. */
@media (max-width:1080px){
  .wordmark{flex:1 1 auto; min-width:0;}
  .wordmark .brand, .wordmark .legal{white-space:normal;}
}
.wordmark-icon{width:34px;height:34px;flex:none;}
.wordmark-icon .orbit{fill:none;stroke:var(--border);stroke-width:1.5;stroke-dasharray:3 5;}
.wordmark-icon .arm{stroke:var(--accent);stroke-width:3;}
.wordmark-icon .rotor{fill:var(--bg);stroke:var(--accent);stroke-width:3;}
/* Ground control target centre - the quartered marker surveyors lay out to
   establish control. Two filled quadrants, two outlined. */
.wordmark-icon .gcp-a{fill:var(--accent);}
.wordmark-icon .gcp-b{fill:none;stroke:var(--accent);stroke-width:2.5;}
.wordmark-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.wordmark .brand{
  white-space:nowrap;
  font-family:"Big Shoulders Display", sans-serif;
  font-weight:800;
  font-size:1.5rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  line-height:1;
}
.wordmark .legal{
  white-space:nowrap;
  font-family:"IBM Plex Mono", monospace;
  font-size:.65rem;
  letter-spacing:.1em;
  color:var(--text-muted);
  text-transform:uppercase;
}
nav.primary{
  display:flex;
  align-items:center;
  gap:clamp(16px,2vw,32px);
}
/* Nav buttons are short labels - letting them wrap mid-phrase makes the
   header look broken long before the layout actually runs out of room. */
nav.primary .btn{white-space:nowrap;}
/* The [hidden] attribute drives the mobile collapsed state only. Above the
   1080px breakpoint the nav must always render regardless of that attribute -
   without this override, the global [hidden]{display:none!important} reset
   hides the entire desktop nav with no visible toggle to bring it back. */
@media (min-width: 1081px){
  nav.primary[hidden]{display:flex !important;}
}
nav.primary a{
  text-decoration:none;
  font-size:.9rem;
  font-weight:600;
  color:var(--text-muted);
  padding:.3em 0;
  border-bottom:2px solid transparent;
}
nav.primary a:hover, nav.primary a:focus-visible{
  color:var(--text);
  border-color:var(--accent);
}
.nav-services{position:relative;}
.nav-dropdown{
  position:absolute;
  top:100%;
  left:0;
  /* No gap between the trigger and the panel - a gap here is a dead zone
     the pointer crosses on the way down, which drops :hover and closes the
     menu before a click can land. This element is the full hoverable hitbox,
     bridging that space with invisible padding; .nav-dropdown-inner carries
     the actual visible card so the bridge itself stays blank. */
  padding-top:10px;
  min-width:240px;
  opacity:0;
  visibility:hidden;
  transform:translateY(4px);
  transition:opacity .15s ease, transform .15s ease;
}
.nav-services:hover .nav-dropdown,
.nav-services:focus-within .nav-dropdown{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.nav-dropdown-inner{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:4px;
  padding:.4rem;
  display:flex;
  flex-direction:column;
  gap:2px;
  box-shadow:var(--shadow);
}
.nav-dropdown a{
  padding:.7em .8em;
  border-bottom:none;
  border-radius:3px;
  font-size:.85rem;
  display:flex;
  flex-direction:column;
  gap:.15em;
}
.nav-dropdown a:hover, .nav-dropdown a:focus-visible{
  background:var(--surface-2);
}
.nav-dropdown .drop-desc{
  font-size:.72rem;
  color:var(--text-muted);
  font-weight:400;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:"IBM Plex Mono", monospace;
  font-size:.8rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.75em 1.3em;
  border-radius:3px;
  border:1px solid var(--accent);
  color:var(--accent);
  background:transparent;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, transform .15s ease;
  /* Without this a button sizes to max-content, so a long label such as
     "Photogrammetry & 3D" grew wider than the 343px content area at 375px
     and scrolled the whole document sideways. */
  max-width:100%;
}
.btn:hover, .btn:focus-visible{
  background:var(--accent);
  color:var(--accent-ink);
}
.btn.solid{
  background:var(--accent);
  color:var(--accent-ink);
}
.btn.solid:hover{
  transform:translateY(-1px);
}
.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--border);
  border-radius:3px;
  width:40px;
  height:40px;
  color:var(--text);
  align-items:center;
  justify-content:center;
}
.nav-toggle svg{width:20px;height:20px;}
.nav-right{display:flex;align-items:center;gap:12px;}
.nav-call{padding:.6em .85em;gap:.4em;}
.nav-call svg{width:15px;height:15px;flex:none;}
.nav-call-text{display:none;}
@media (min-width:640px){ .nav-call-text{display:inline;} }
/* Returning clients opening a finished survey. Deliberately muted - it is a
   door for people who already bought, so it must not compete with the
   Request a Quote call to action sitting next to it. */
.nav-portal{
  border-color:var(--border);
  color:var(--text-muted);
  padding:.6em 1em;
  gap:.45em;
  white-space:nowrap;
}
.nav-portal svg{width:14px;height:14px;flex:none;}
/* Between the mobile breakpoint and ~1100px the desktop nav is tight enough
   that this label pushes the wordmark into wrapping. Drop to the padlock
   alone in that band - the anchor carries an aria-label for screen readers.
   Below 1081px the nav stacks vertically, so the label comes back. */
@media (min-width:1081px) and (max-width:1219px){
  .nav-portal{padding:.6em .8em;}
  .nav-portal span{display:none;}
}
.nav-portal:hover, .nav-portal:focus-visible{
  background:transparent;
  border-color:var(--accent);
  color:var(--accent);
}

@media (max-width: 1080px){
  nav.primary{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    padding:8px clamp(16px,4vw,40px) 16px;
  }
  nav.primary a{
    padding:.85em 0;
    border-bottom:1px solid var(--border);
  }
  nav.primary .btn{margin-top:12px; justify-content:center;}
  nav.primary[hidden]{display:none !important;}
  .nav-toggle{display:inline-flex;}
  /* Hover/focus-within can't reveal a dropdown on touch. Below the
     breakpoint, render the service links inline and always visible instead. */
  .nav-dropdown{
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    min-width:0;
    padding:0 0 0 1rem;
  }
  .nav-dropdown-inner{
    background:none;
    border:none;
    border-radius:0;
    box-shadow:none;
    padding:0;
    gap:0;
  }
  .nav-dropdown a{
    padding:.7em 0;
    border-bottom:1px solid var(--border);
  }
}

/* ---- hero ---- */
.hero{
  padding-block:clamp(48px,8vw,96px);
  border-bottom:1px solid var(--border);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(32px,5vw,64px);
  align-items:center;
}
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr;}
}
.coord-line{
  font-size:.8rem;
  letter-spacing:.1em;
  color:var(--text-muted);
  margin-bottom:1.2em;
  display:flex;
  gap:.6em;
  flex-wrap:wrap;
}
.hero h1{
  font-size:clamp(2.4rem, 5.2vw + 1rem, 4.6rem);
  font-weight:900;
  margin-bottom:.4em;
}
.hero h1 em{
  font-style:normal;
  color:var(--accent);
}
.hero p.lede{
  max-width:46ch;
  font-size:1.15rem;
  color:var(--text-muted);
  margin-bottom:1.8em;
}
.hero-ctas{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.outcome-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.6em;
  margin:0 0 1.8em;
  padding:0;
  list-style:none;
}
.outcome-tags li{
  font-size:.7rem;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--accent-2);
  border:1px solid var(--border);
  border-radius:3px;
  padding:.4em .8em;
}
.mission-statement{
  font-family:"Big Shoulders Display", sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.01em;
  text-wrap:balance;
  font-size:clamp(1.35rem, 1.4vw + 1rem, 1.9rem);
  line-height:1.2;
  max-width:44ch;
  margin:0 0 2rem;
}
.mission-statement .accent-text{color:var(--accent);}
.radar{
  position:relative;
  aspect-ratio:1/1;
  max-width:420px;
  margin-inline:auto;
  border-radius:50%;
}
.radar svg{width:100%;height:100%;display:block;}
.radar-sweep{
  transform-origin:210px 210px;
  animation:sweep 8s linear infinite;
}
@keyframes sweep{ to{ transform:rotate(360deg); } }

/* ---- services ---- */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  margin-top:2.5rem;
}
.service-card{
  background:var(--surface);
  padding:2rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
/* Photographic backing. The card keeps its opaque --surface fill so the 1px
   grid gaps still read as hairlines, so the image sits ABOVE that fill on
   z-index 0, the wash on 1, and the content on 2. */
.service-card .card-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  transform:scale(1.02);
  transition:transform .7s ease;
}
.service-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  /* Bright enough over the icon and heading for the image to register, then
     dark fast so the body copy never has to fight a lit roof or pale stone. */
  background:linear-gradient(to bottom,
    rgba(7,10,8,.22) 0%,
    rgba(7,10,8,.42) 14%,
    rgba(7,10,8,.86) 30%,
    rgba(20,28,21,.97) 46%,
    var(--surface) 68%);
}
.service-card > :not(.card-bg){
  position:relative;
  z-index:2;
}
.service-card:hover .card-bg{ transform:scale(1.07); }
@media (prefers-reduced-motion:reduce){
  .service-card .card-bg{ transition:none; }
  .service-card:hover .card-bg{ transform:scale(1.02); }
}
.service-card .icon{
  width:44px;height:44px;
  color:var(--accent);
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.75));
}
.service-card h3{
  font-size:1.4rem;
  font-weight:700;
  text-shadow:0 2px 18px rgba(0,0,0,.85);
}
.service-card p{
  color:var(--text-muted);
  margin:0;
  flex:1;
}
.spec-line{
  font-family:"IBM Plex Mono", monospace;
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--accent-2);
  text-transform:uppercase;
  padding-top:.8em;
  border-top:1px dashed var(--border);
}

/* ---- section headers ---- */
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:1rem;
}
.section-head h2{
  font-size:clamp(1.8rem, 2.4vw + 1rem, 2.6rem);
  font-weight:800;
  max-width:16ch;
}
.section-head p{
  max-width:42ch;
  color:var(--text-muted);
  margin:0;
}

/* ---- capabilities / portfolio ---- */
.cap-note{
  font-family:"IBM Plex Mono", monospace;
  font-size:.75rem;
  letter-spacing:.04em;
  color:var(--text-muted);
  margin:1rem 0 2rem;
  padding:.7em 1em;
  border:1px dashed var(--border);
  border-radius:3px;
  display:inline-block;
}
.cap-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:20px;
}
.cap-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:4px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.cap-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}
.cap-visual{
  aspect-ratio:4/3;
  background:var(--surface-2);
  display:flex;
  align-items:center;
  justify-content:center;
}
.cap-visual svg{width:80%;height:80%;color:var(--accent);}
.scan-cell{animation:scanfill 3.2s ease-in-out infinite;}
@keyframes scanfill{
  0%{opacity:.06;}
  18%{opacity:.4;}
  45%{opacity:.06;}
  100%{opacity:.06;}
}
.spin-wrap{
  width:80%;height:80%;
  display:flex;align-items:center;justify-content:center;
  perspective:640px;
}
.spin-wrap svg{
  width:100%;height:100%;
  color:var(--accent);
  transform-style:preserve-3d;
  animation:spin3d 9s linear infinite;
}
@keyframes spin3d{
  from{transform:rotateY(0deg) rotateX(6deg);}
  to{transform:rotateY(360deg) rotateX(6deg);}
}
.cap-body{
  padding:1.1rem 1.2rem 1.3rem;
}
.cap-body h3{
  font-size:1.05rem;
  text-transform:none;
  letter-spacing:0;
  font-weight:700;
  margin-bottom:.3em;
}
.cap-body .spec-line{border-top:none;padding-top:0;}

/* ---- coverage ---- */
.coverage-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,56px);
  align-items:center;
}
@media (max-width:900px){ .coverage-grid{grid-template-columns:1fr;} }
.coverage-list{list-style:none;margin:1.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:1.1rem;}
.coverage-list li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.9rem;
  align-items:baseline;
  padding-bottom:1.1rem;
  border-bottom:1px solid var(--border);
}
.coverage-list li:last-child{border-bottom:none;padding-bottom:0;}
.coverage-list .radius{
  font-family:"IBM Plex Mono", monospace;
  color:var(--accent);
  font-size:.85rem;
  white-space:nowrap;
}
.coverage-list strong{display:block;font-size:1.05rem;margin-bottom:.15em;}
.coverage-list span.desc{color:var(--text-muted);font-size:.92rem;}

/* ---- process ---- */
.process-list{
  margin-top:2.5rem;
  display:flex;
  flex-direction:column;
}
.process-item{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:1.4rem;
  position:relative;
  padding-bottom:2.4rem;
}
.process-item:last-child{padding-bottom:0;}
.process-item::before{
  content:"";
  position:absolute;
  left:31px;
  top:44px;
  bottom:0;
  width:1px;
  background:var(--border);
}
.process-item:last-child::before{display:none;}
.process-num{
  font-family:"IBM Plex Mono", monospace;
  font-weight:600;
  font-size:.85rem;
  width:64px;
  height:44px;
  border:1px solid var(--border);
  border-radius:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  background:var(--surface);
  flex:none;
}
.process-item h3{
  font-size:1.2rem;
  font-weight:700;
  text-transform:none;
  letter-spacing:0;
  margin-bottom:.3em;
}
.process-item p{color:var(--text-muted);margin:0;max-width:56ch;}

/* ---- about ---- */
.about-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(24px,4vw,56px);
}
@media (max-width:900px){ .about-grid{grid-template-columns:1fr;} }
.about-grid p{color:var(--text-muted); max-width:60ch;}
.about-grid p + p{margin-top:1em;}
.compliance-box{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:4px;
  padding:1.6rem;
}
.compliance-box h3{
  font-size:1rem;
  text-transform:none;
  letter-spacing:0;
  font-weight:700;
  margin-bottom:.8em;
}
.compliance-box ul{margin:0;padding-left:1.1em;color:var(--text-muted);display:flex;flex-direction:column;gap:.5em;}
.credential-tags{
  list-style:none;
  margin:0 0 1.2rem;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.5em;
}
.credential-tags li{
  font-size:.7rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent);
  border:1px solid var(--border);
  border-radius:3px;
  padding:.4em .7em;
}

/* ---- comparison table ---- */
.compare-wrap{
  overflow-x:auto;
  margin-top:2.5rem;
  border:1px solid var(--border);
  border-radius:4px;
}
table.compare{
  width:100%;
  min-width:680px;
  border-collapse:collapse;
  font-size:.92rem;
  background:var(--surface);
}
table.compare th, table.compare td{
  padding:.95rem 1.15rem;
  text-align:left;
  border-bottom:1px solid var(--border);
  vertical-align:top;
}
table.compare thead th{
  font-family:"IBM Plex Mono", monospace;
  font-size:.7rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-muted);
}
table.compare thead th.lam-col{color:var(--accent);}
table.compare tbody th{
  font-weight:600;
  color:var(--text-muted);
  font-size:.85rem;
  white-space:nowrap;
}
table.compare td{color:var(--text-muted);}
table.compare td.lam-cell{
  background:color-mix(in srgb, var(--accent) 8%, transparent);
  color:var(--text);
  font-weight:500;
}
table.compare tr:last-child th, table.compare tr:last-child td{border-bottom:none;}
table.compare sup a{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px dotted var(--accent);
}

/* ---- turn / live point cloud ---- */
.turn-stage{
  position:relative;
  aspect-ratio:1/1;
  max-width:480px;
  width:100%;
  margin-inline:auto;
  border:1px solid var(--border);
  border-radius:4px;
  overflow:hidden;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0/48px 48px,
    var(--surface);
  box-shadow: 0 40px 90px -35px rgba(57,227,122,.3), var(--shadow);
}
.turn-fallback{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .6s ease;
}
.turn-fallback svg{width:60%;height:60%;color:var(--accent);opacity:.8;}
.turn-fallback.gone{opacity:0;}
.turn-canvas-host{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .8s ease;
}
.turn-canvas-host.ready{opacity:1;}
.turn-canvas-host canvas{display:block;width:100% !important;height:100% !important;}
.video-frame{
  position:relative;
  margin-top:2.5rem;
  aspect-ratio:16/9;
  max-height:560px;
  border:1px solid var(--border);
  border-radius:4px;
  overflow:hidden;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0/48px 48px,
    var(--surface);
}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
/* object-fit:contain, not cover: the frame is capped at 560px tall, so on a
   wide viewport cover would crop the top and bottom off a 16:9 reel. */
.video-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;
  object-fit:contain;background:#000;display:block;}
.video-placeholder{
  position:absolute;inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1rem;
  color:var(--text-muted);
}
.video-placeholder .play-icon{width:56px;height:56px;color:var(--accent);}
.video-placeholder p{
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:0;
}
.turn-note{
  font-family:"IBM Plex Mono", monospace;
  font-size:.72rem;
  letter-spacing:.04em;
  color:var(--text-muted);
  margin-top:1rem;
}

/* ---- FAQ ---- */
.faq-list{
  display:flex;
  flex-direction:column;
  margin-top:2.5rem;
}
.faq-item{border-bottom:1px solid var(--border);}
.faq-item summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.2rem;
  padding:1.3rem 0;
  font-weight:700;
  font-size:1.05rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-num{
  font-family:"IBM Plex Mono", monospace;
  color:var(--accent);
  font-size:.85rem;
  margin-right:.5em;
}
.faq-icon{
  flex:none;
  width:26px;height:26px;
  border:1px solid var(--border);
  border-radius:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  font-family:"IBM Plex Mono", monospace;
  font-size:1rem;
  transition:transform .2s ease;
}
.faq-item[open] .faq-icon{transform:rotate(45deg);}
.faq-item p{
  color:var(--text-muted);
  margin:0 0 1.5rem;
  max-width:64ch;
}

/* ---- contact ---- */
.contact-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:clamp(24px,4vw,56px);
}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }
form.enquiry{
  display:flex;
  flex-direction:column;
  gap:1.1rem;
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;}
@media (max-width:560px){ .field-row{grid-template-columns:1fr;} }
.field{display:flex;flex-direction:column;gap:.4rem;}
.field label{
  font-family:"IBM Plex Mono", monospace;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.field input, .field select, .field textarea{
  font-family:inherit;
  font-size:1rem;
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:3px;
  padding:.75em .9em;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:1px;
}
.field textarea{resize:vertical;min-height:120px;}
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
.contact-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:4px;
  padding:1.8rem;
  display:flex;
  flex-direction:column;
  gap:1.4rem;
  height:fit-content;
}
.contact-card dl{margin:0;display:flex;flex-direction:column;gap:1rem;}
.contact-card dt{
  font-family:"IBM Plex Mono", monospace;
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:.25em;
}
.contact-card dd{margin:0;font-size:1rem;}
.contact-card a.link{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--border);}
.contact-card a.link:hover{border-color:var(--accent);}

/* ---- pricing ---- */
.price-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%),1fr));
  gap:20px;
  margin-top:2.5rem;
}
.price-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:4px;
  padding:1.8rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.price-card.lead{
  border-color:var(--accent);
  box-shadow:0 30px 70px -40px rgba(57,227,122,.35);
}
.price-card h3{
  font-size:1.25rem;
  font-weight:700;
  text-transform:none;
  letter-spacing:0;
}
.price-tag{
  font-family:"IBM Plex Mono", monospace;
  font-size:1.9rem;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.price-tag small{
  display:block;
  font-size:.66rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:.5em;
}
.price-tag .unit{font-size:.9rem; color:var(--text-muted);}
.price-card ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.55em;
  flex:1;
  color:var(--text-muted);
  font-size:.92rem;
}
/* Deliberately not a two-column grid. Any inline element in the text - a
   <strong>, a link - becomes its own grid item, and the words after it get
   pushed into the 1.1em marker column one at a time. Absolute marker keeps
   the list item a normal block so inline markup behaves. */
.price-card ul li{
  position:relative;
  padding-left:1.6em;
}
.price-card ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.45em;
  width:.55em;
  height:.55em;
  border:1.5px solid var(--accent);
  border-radius:1px;
}
.price-card.trade{background:transparent;}
.price-card.trade .price-tag{color:var(--accent-2);}
.price-card.trade ul li::before{border-color:var(--accent-2);}
.trade-flag{
  font-family:"IBM Plex Mono", monospace;
  font-size:.65rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent-2);
  border:1px solid var(--border);
  border-radius:3px;
  padding:.35em .7em;
  align-self:flex-start;
}
.price-drivers{
  margin-top:2rem;
  border:1px dashed var(--border);
  border-radius:4px;
  padding:1.4rem 1.6rem;
}
.price-drivers h3{
  font-size:.95rem;
  font-weight:700;
  text-transform:none;
  letter-spacing:0;
  margin-bottom:.7em;
}
.price-drivers p{color:var(--text-muted); margin:0; max-width:70ch; font-size:.92rem;}

/* ---- real photo gallery ---- */
.photo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(320px, 100%),1fr));
  gap:16px;
  margin-top:2.5rem;
}
.photo-grid figure{
  margin:0;
  border:1px solid var(--border);
  border-radius:4px;
  overflow:hidden;
  background:var(--surface);
}
.photo-grid img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
}
.photo-grid figcaption{
  font-family:"IBM Plex Mono", monospace;
  font-size:.7rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--text-muted);
  padding:.8em 1em;
}
.photo-grid figure.wide{grid-column:1 / -1;}
.photo-grid figure.wide img{aspect-ratio:21/9;}
.portrait-frame{
  border:1px solid var(--border);
  border-radius:4px;
  overflow:hidden;
  background:var(--surface);
}
.portrait-frame img{display:block;width:100%;height:auto;}

.fleet-visual{
  aspect-ratio:16/10;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.fleet-visual svg{width:80%;height:80%;color:var(--accent);}

.prose p{color:var(--text-muted); max-width:62ch; margin:0;}
.prose p + p{margin-top:1em;}

/* ---- about page placeholders ---- */
.photo-placeholder{
  aspect-ratio:4/3;
  border:1px dashed var(--border);
  border-radius:4px;
  background:var(--surface);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  color:var(--text-muted);
  text-align:center;
  padding:1rem;
}
.photo-placeholder.square{aspect-ratio:1/1;}
.photo-placeholder svg{width:30px;height:30px;color:var(--accent);opacity:.7;}
.photo-placeholder span{
  font-family:"IBM Plex Mono", monospace;
  font-size:.68rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  gap:16px;
  margin-top:2.5rem;
}
.bio-grid{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:clamp(24px,4vw,48px);
  align-items:start;
  margin-top:2.5rem;
}
@media (max-width:640px){ .bio-grid{grid-template-columns:1fr;} }

/* ---- contact form embed (DroneDesk) ---- */
iframe#enqfrm_preview{width:1px;min-width:100%;}

/* ---- footer ---- */
footer{
  padding-block:2.6rem;
}
.footer-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}
.footer-row .legal-line{
  font-family:"IBM Plex Mono", monospace;
  font-size:.72rem;
  color:var(--text-muted);
  letter-spacing:.04em;
}
/* Must wrap: without it this row holds a 430px min-content width, which is
   wider than any phone and made the whole document scroll sideways. */
.footer-links{display:flex;gap:12px 20px;flex-wrap:wrap;}
.footer-links a{font-size:.85rem;color:var(--text-muted);text-decoration:none;}
.footer-links a:hover{color:var(--accent);}
.verify-badge{display:inline-flex;flex:none;opacity:.9;transition:opacity .15s ease;}
.verify-badge:hover{opacity:1;}
.verify-badge img{height:32px;width:auto;border:0;display:block;}

/* ---------------------------------------------------------------------
   Deliverable lead panel
   The interactive model gets top billing, above the file-format grid.
   Leading with extensions makes the work read as a commodity - every
   competitor supplies the same LAS/OBJ/GeoTIFF. What is not commodity is
   handing the client something measurable that opens in a browser and
   stays live for a year with no software to buy.
   --------------------------------------------------------------------- */
.deliverable-lead{
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:4px;
  padding:1.8rem;
  margin-bottom:2.6rem;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:2rem;
  align-items:start;
}
@media (max-width:760px){
  .deliverable-lead{grid-template-columns:1fr; gap:1.4rem; padding:1.4rem;}
}
.deliverable-lead h3{
  font-family:"Big Shoulders Display", sans-serif;
  font-size:1.65rem;
  font-weight:800;
  line-height:1.05;
  margin:0 0 .5em;
  color:var(--text);
}
.deliverable-lead > div > p{color:var(--text-muted); max-width:46ch; margin:0 0 1rem;}
.deliverable-lead ul{list-style:none; margin:0; padding:0; display:grid; gap:.85rem;}
.deliverable-lead li{
  position:relative;
  padding-left:1.45rem;
  color:var(--text);
  font-size:.95rem;
  line-height:1.45;
}
.deliverable-lead li::before{
  content:"";
  position:absolute;
  left:0; top:.5em;
  width:7px; height:7px;
  background:var(--accent);
}
.deliverable-lead li span{
  display:block;
  color:var(--text-muted);
  font-size:.85rem;
  margin-top:.15rem;
}

/* ---------------------------------------------------------------------
   Recent capture block
   Real survey imagery rather than a diagram. The control targets are
   deliberately kept in frame - on a page arguing that accuracy comes from
   ground control and not from the aircraft, seeing the targets on the
   ground is the argument. The site itself is never identified.
   --------------------------------------------------------------------- */
.capture-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:24px;
  align-items:start;
}
@media (max-width:820px){ .capture-grid{grid-template-columns:1fr;} }
.capture-figure{
  margin:0;
  border:1px solid var(--border);
  border-radius:4px;
  overflow:hidden;
  background:var(--surface);
}
.capture-figure img{display:block;width:100%;height:auto;}
.capture-figure figcaption{
  padding:.75rem 1rem;
  font-family:"IBM Plex Mono", monospace;
  font-size:.7rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-muted);
  border-top:1px solid var(--border);
}
.capture-stats{list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:.75rem;}
.capture-stats li{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  border-bottom:1px solid var(--border);
  padding-bottom:.55rem;
  font-size:.9rem;
}
.capture-stats .v{font-family:"IBM Plex Mono", monospace; color:var(--accent); white-space:nowrap;}

/* ---------------------------------------------------------------------
   Position statement
   A principle, given room to land. Same voice as .mission-statement so the
   pages read as one piece, but marked with a rule because this is an
   argument being made rather than a description of a service.
   At most one per page, and deliberately never on the landing page - it
   would compete with the mission statement that already sits there.
   --------------------------------------------------------------------- */
.creed{
  border-left:3px solid var(--accent);
  padding:.2rem 0 .2rem 1.6rem;
  margin:2.6rem 0 0;
  max-width:54ch;
}
.creed p{
  font-family:"Big Shoulders Display", sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.015em;
  text-wrap:balance;
  font-size:clamp(1.2rem, 1.2vw + .92rem, 1.7rem);
  line-height:1.22;
  margin:0;
  color:var(--text);
}
.creed .accent-text{color:var(--accent);}
@media (max-width:600px){ .creed{padding-left:1.1rem; margin-top:2rem;} }

/* Two equal figures - the same capture shown as two different products. */
.capture-grid.two-up{grid-template-columns:1fr 1fr;}
@media (max-width:820px){ .capture-grid.two-up{grid-template-columns:1fr;} }

/* One line under the price stating the outcome the client is buying, before
   the detail. The tiers sell results, not hours - the only exception is
   trade pilot hire, where the buyer is genuinely purchasing capability. */
.price-card .card-lede{
  color:var(--text);
  font-size:1.02rem;
  line-height:1.45;
  margin:0 0 1.1rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--border);
}
.price-card.trade .card-lede{color:var(--text-muted); font-size:.95rem;}

/* A smaller-scope tier, flagged in the muted tone rather than the amber used
   for trade. It is differentiated by site size and deliverables, NOT by
   method: ground control is laid on every job, so this is not a cheaper,
   uncontrolled product and its copy must never imply that it is. */
.price-card.scoped{background:transparent;}
.trade-flag.flag-scoped{color:var(--text-muted); border-color:var(--border);}
.price-card.scoped .price-tag{color:var(--text);}
.price-card.scoped ul li::before{border-color:var(--text-muted);}

/* Process steps were single-paragraph; the hosting step carries a second one
   about privacy and needs separating from the first. */
.process-item p + p{margin-top:.7em;}

/* .compliance-box ul sets flex-direction:column and a list indent, and being
   class+type it outranks .credential-tags (class only). The credential chips
   inside a compliance box were therefore stacking full-width instead of
   flowing in rows. Put them back. */
.compliance-box .credential-tags{
  flex-direction:row;
  flex-wrap:wrap;
  padding-left:0;
}

/* ---------------------------------------------------------------------
   FULL-BLEED HERO
   The surveyed terrain runs edge to edge behind the type instead of
   sitting in a boxed panel beside it. Overrides the earlier .hero rules,
   which stay in place for the service pages.
   --------------------------------------------------------------------- */
.hero-bleed{
  position:relative;
  display:flex;
  align-items:center;
  min-height:min(88vh, 820px);
  padding-block:clamp(64px, 10vw, 120px);
  overflow:hidden;
}
.hero-bleed .hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
}
/* the stage loses its frame and fills the section */
.hero-bleed .hero-bg .turn-stage{
  position:absolute;
  inset:0;
  max-width:none;
  width:auto;
  aspect-ratio:auto;
  margin:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}
.hero-bleed .hero-bg .turn-fallback svg{width:74%;height:74%;opacity:.5;}

/* Legibility wash. Strong at the left where the type sits, clearing to
   nothing on the right so the terrain reads. A flat overlay would grey the
   whole thing out; this keeps contrast where it is needed. */
.hero-bleed::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(95deg, var(--bg) 0%, rgba(7,10,8,.92) 34%, rgba(7,10,8,.55) 62%, rgba(7,10,8,.15) 100%),
    linear-gradient(to top, var(--bg) 0%, transparent 28%);
}
.hero-inner{
  position:relative;
  z-index:2;
  width:100%;
}
.hero-inner > *{max-width:44rem;}

.hero-bleed h1{
  font-size:clamp(2.8rem, 6.4vw + 1rem, 5.6rem);
  line-height:.92;
  margin-bottom:.28em;
}
.hero-legal{
  color:var(--text-muted);
  font-size:.85rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin:0 0 1.3em;
}

/* eyebrow as a capsule rather than a bare line */
/* inline-block, not flex: as a flex container the whole text node is one
   item, so on a narrow screen it wraps below the dot instead of around it. */
.hero-bleed .coord-line{
  display:inline-block;
  width:auto;
  max-width:100%;
  line-height:1.5;
  border:1px solid var(--border);
  border-radius:999px;
  padding:.55em 1.15em;
  background:rgba(7,10,8,.55);
  font-size:.7rem;
  letter-spacing:.14em;
  margin-bottom:1.7em;
}
.hero-bleed .coord-line::before{
  content:"";
  display:inline-block;
  vertical-align:middle;
  width:.5em;
  height:.5em;
  margin-right:.8em;
  border-radius:50%;
  background:var(--accent);
}
.hero-credit{
  position:absolute;
  z-index:2;
  right:clamp(16px, 4vw, 40px);
  bottom:clamp(14px, 3vw, 26px);
  margin:0;
  max-width:34ch;
  text-align:right;
  font-size:.62rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-muted);
}
@media (max-width: 760px){
  .hero-bleed{min-height:auto;}
  .hero-credit{display:none;}
}

/* ---------------------------------------------------------------------
   PHOTOGRAPHIC FULL-BLEED HERO
   Same structure as .hero-bleed, but the backdrop is a photograph rather
   than the point cloud. The imagery is night aerial work, so the wash runs
   bottom-up instead of left-to-right: a side gradient greys out the stage
   glow the picture is built around, while a base gradient keeps the bright
   half intact and still gives the type something solid to sit on.
   --------------------------------------------------------------------- */
.hero-photo{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:min(86vh, 780px);
  padding-block:clamp(72px, 11vw, 132px) clamp(40px, 6vw, 72px);
  overflow:hidden;
  border-bottom:1px solid var(--border);
}
.hero-photo-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:57% 30%;
  z-index:0;
}
.hero-photo::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(to top, var(--bg) 0%, rgba(7,10,8,.88) 22%, rgba(7,10,8,.45) 48%, rgba(7,10,8,.12) 78%),
    linear-gradient(to bottom, rgba(7,10,8,.72) 0%, transparent 24%);
}
.hero-photo .hero-inner{position:relative; z-index:2; width:100%;}
.hero-photo .hero-inner > *{max-width:42rem;}
.hero-photo h1{
  font-size:clamp(2.6rem, 5.6vw + 1rem, 4.8rem);
  line-height:.94;
  margin-bottom:.34em;
  text-shadow:0 2px 30px rgba(0,0,0,.55);
}
.hero-photo h1 em{font-style:normal; color:var(--accent);}
.hero-photo .lede{text-shadow:0 1px 18px rgba(0,0,0,.6);}
.hero-photo .coord-line{
  display:inline-block;
  width:auto;
  max-width:100%;
  line-height:1.5;
  border:1px solid var(--border);
  border-radius:999px;
  padding:.55em 1.15em;
  background:rgba(7,10,8,.6);
  backdrop-filter:blur(3px);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:1.5em;
}
.hero-photo .coord-line::before{
  content:"";
  display:inline-block;
  vertical-align:middle;
  width:.5em;
  height:.5em;
  margin-right:.8em;
  border-radius:50%;
  background:var(--accent);
}
@media (max-width: 760px){
  .hero-photo{min-height:min(72vh, 560px);}
  .hero-photo .hero-credit{display:none;}
}

/* ---------------------------------------------------------------------
   SECTION WITH A PHOTOGRAPHIC BACKGROUND
   A full-bleed image sitting behind an ordinary content section. The wash
   fades to the page colour at top and bottom so the band blends into its
   neighbours instead of reading as a pasted-in rectangle, and it is heavy
   enough on the left that body copy stays comfortably readable.
   --------------------------------------------------------------------- */
.section-photo{
  position:relative;
  overflow:hidden;
}
.section-photo-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  z-index:0;
}
.section-photo::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(to right, rgba(7,10,8,.88) 0%, rgba(7,10,8,.62) 46%, rgba(7,10,8,.3) 100%),
    linear-gradient(to bottom, var(--bg) 0%, rgba(7,10,8,0) 14%, rgba(7,10,8,0) 86%, var(--bg) 100%);
}
.section-photo > .wrap{position:relative; z-index:2;}

/* let the terrain read faintly through the panel rather than hiding it */
.section-photo .compliance-box{
  background:rgba(14,21,15,.8);
  backdrop-filter:blur(7px);
  border-color:rgba(57,227,122,.3);
}

/* ---------------------------------------------------------------------
   PROOF BAND
   Sits immediately after the hero. The differentiators used to live in the
   pricing section, roughly halfway down the page, which is far too late for
   a visitor deciding whether to read on. Four claims, each with the number
   that makes it checkable.
   --------------------------------------------------------------------- */
.proof-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:20px;
  margin-top:2.6rem;
}
.proof-item{
  border-top:2px solid var(--accent);
  padding-top:1.1rem;
}
.proof-figure{
  display:block;
  font-family:"Big Shoulders Display", sans-serif;
  font-weight:800;
  font-size:clamp(1.9rem, 1.6vw + 1.2rem, 2.5rem);
  line-height:1;
  color:var(--accent);
  margin:0 0 .35rem;
  letter-spacing:.01em;
}
.proof-item h3{
  font-size:1rem;
  text-transform:none;
  letter-spacing:0;
  font-weight:700;
  line-height:1.25;
  margin:0 0 .5rem;
  color:var(--text);
}
.proof-item p{
  margin:0;
  color:var(--text-muted);
  font-size:.92rem;
  line-height:1.5;
}

/* mid-page conversion point */
.cta-band{
  border-top:1px solid var(--border);
  background:var(--surface);
}
.cta-band .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(24px,4vw,56px);
  flex-wrap:wrap;
}
.cta-band h2{
  font-size:clamp(1.6rem, 2.2vw + 1rem, 2.4rem);
  max-width:22ch;
  margin:0 0 .4em;
}
.cta-band p{margin:0; color:var(--text-muted); max-width:46ch;}
/* flex:0 1 auto, NOT flex:none. "none" kept this button pair at its
   max-content width of 363px whatever the viewport, so it never wrapped and
   scrolled the homepage sideways on every phone. It still refuses to grow. */
.cta-band .hero-ctas{margin:0; flex:0 1 auto;}

/* The surface model is bright and evenly lit, unlike the night photography,
   so it takes a left-weighted wash like the homepage rather than the
   bottom-up one the dark festival frames need. */
.hero-photo-data{align-items:center;}
.hero-photo-data::after{
  background:
    linear-gradient(95deg, rgba(7,10,8,.96) 0%, rgba(7,10,8,.84) 38%, rgba(7,10,8,.5) 70%, rgba(7,10,8,.24) 100%),
    linear-gradient(to bottom, rgba(7,10,8,.55) 0%, transparent 20%, transparent 76%, var(--bg) 100%);
}

/* ---------------------------------------------------------------------
   STATEMENT BAND
   A single argument at full width over a photograph. Reuses .section-photo
   for the background mechanics; the type is larger than a .creed inside a
   normal section because it is carrying the section on its own.
   --------------------------------------------------------------------- */
.statement-band{padding-block:clamp(78px, 11vw, 140px);}
.statement-band .creed{
  max-width:56ch;
  margin:1.5rem 0 0;
  border-left-width:3px;
  padding-left:1.9rem;
}
.statement-band .creed p{
  font-size:clamp(1.4rem, 1.9vw + .95rem, 2.35rem);
  line-height:1.16;
  text-shadow:0 2px 26px rgba(0,0,0,.5);
}
.statement-band .statement-note{
  margin:1.8rem 0 0;
  max-width:52ch;
  color:var(--text-muted);
  font-size:.96rem;
  line-height:1.55;
}
@media (max-width:600px){
  .statement-band .creed{padding-left:1.2rem;}
}

/* The supporting line sits low-left, which on a bright photograph is exactly
   where the wash is weakest against pale buildings. Lift it off the muted
   tone and give it a shadow so it stays readable over any frame. */
.statement-band .statement-note{
  color:rgba(231,242,233,.84);
  text-shadow:0 1px 18px rgba(0,0,0,.8);
}

/* ---- enquiry call-to-action ----
   Stands in for the embedded DroneDesk form, which cannot be submitted from
   inside a frame (see the comment at #contact in index.html). Styled to read
   as a deliberate panel rather than a gap where a form used to be. */
.enquiry-cta{
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:4px;
  padding:clamp(1.6rem, 3vw, 2.4rem);
}
.enquiry-cta h3{
  font-size:1.3rem;
  font-weight:700;
  margin:0 0 .6em;
}
.enquiry-cta > p{
  color:var(--text-muted);
  margin:0 0 1.6rem;
  max-width:46ch;
}
.enquiry-cta-btn{
  white-space:nowrap;
  font-size:.86rem;
  padding:.95em 1.6em;
}
.enquiry-cta-btn svg{
  width:1.05em;
  height:1.05em;
  flex:none;
}
.enquiry-cta .enquiry-cta-note{
  font-family:"IBM Plex Mono", monospace;
  font-size:.72rem;
  line-height:1.6;
  letter-spacing:.02em;
  color:var(--text-muted);
  margin:1.4rem 0 0;
  max-width:46ch;
}