/* ==========================================================================
   Rotorgraph Surveys — "The Orbit"
   --------------------------------------------------------------------------
   base.css owns the reset, wrap, sections, header/nav/mega mechanics, buttons,
   forms, footer skeleton, reveals, preloader shell and the hero h1 contract.
   This file supplies the palette, the drawing and the eight sections.

   Rhythm: white → ink → white → brand orange → white → ink → white → ink
   ========================================================================== */

:root{
  /* ---------- palette, from the brief + the real logo (orange #e66926) ---------- */
  --ink:      #101418;
  --ink-2:    #171b20;
  --ink-3:    #1b2026;
  --white:    #ffffff;
  --pale:     #f5f6f7;          /* small functional blocks only */
  --steel:    #7b848c;
  --sky:      #2f7fb5;          /* the orbit line, technical rules */
  --lime:     #b6d43a;          /* point-cloud dots, nothing else */
  --brand:    #e66926;          /* Rotorgraph orange */

  /* ---------- base.css contract ---------- */
  --surface:    var(--white);
  --surface-2:  var(--pale);
  --text:       #f4f6f7;
  --muted:      rgba(244,246,247,.62);
  --ink-text:   var(--ink);
  --ink-mute:   #5f6a72;
  --accent:     var(--brand);
  --accent-lit: #f2823f;
  --accent-2:   var(--brand);
  --line:       rgba(255,255,255,.13);
  --line-d:     rgba(16,20,24,.12);

  /* ---------- type ---------- */
  --font-display: "Genos", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Readex Pro", system-ui, -apple-system, sans-serif;
  --font-mono:    "Sono", ui-monospace, SFMono-Regular, monospace;

  --wrap-max: 1240px;
  --pad:      clamp(1.15rem, 4vw, 2.5rem);
  --radius:   3px;
  --ease:     cubic-bezier(.22,.61,.36,1);
}

html{ scroll-padding-top:88px; }
body{
  background:var(--white);
  color:var(--ink);
  font-size:16.5px;
  font-weight:400;
  line-height:1.62;
}
::selection{ background:var(--brand); color:#fff; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }

/* film grain — barely there, kills the flat digital white */
body::after{
  content:""; position:fixed; inset:0; z-index:880; pointer-events:none; opacity:.02;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

.skip{
  position:absolute; left:.5rem; top:.5rem; z-index:10000;
  width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
  padding:.75rem 1.1rem; background:var(--ink); color:var(--text);
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
}
.skip:focus{ width:auto; height:auto; clip-path:none; }

.sect__num{ color:var(--brand); font-family:var(--font-mono); font-size:.66rem; letter-spacing:.2em; }
.sect__num--onbrand{ color:rgba(16,20,24,.72); }
.sect__head--stack .sect__lead{ margin-top:1.1rem; max-width:54ch; }
.sect__h2{ font-weight:700; letter-spacing:-.02em; line-height:1.03; }
.sect__lead{ color:var(--ink-mute); font-size:.98rem; }
.sect__lead--on-dark{ color:rgba(244,246,247,.72); }
.sect__lead--onbrand{ color:rgba(16,20,24,.84); }

/* ==========================================================================
   PRELOADER — the orbit spins
   ========================================================================== */
.pre{ background:var(--ink); }
.pre__mark{ width:132px; margin-bottom:1.4rem; }
.pre__mark svg{ width:132px; height:auto; display:block; }
.pre__orbit{
  stroke:var(--sky); stroke-width:1.3; stroke-dasharray:5 6;
  transform-box:fill-box; transform-origin:center;
  animation:preSpin 7s linear infinite;
}
@keyframes preSpin{ to{ transform:rotate(360deg); } }
.pre__dot{ fill:var(--brand); }
.pre__meta{ color:rgba(244,246,247,.5); }
.pre__pct{ color:var(--brand); }
.pre__bar{ background:rgba(255,255,255,.14); height:2px; }
.pre__bar i{ background:var(--brand); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr{
  background:color-mix(in srgb, var(--white) 88%, transparent);
  border-bottom:1px solid var(--line-d);
  color:var(--ink);
}
.hdr__in{ min-height:74px; gap:1rem; }

.brand{ display:flex; align-items:center; gap:.6rem; color:var(--ink); }
.brand .brand__mark{ width:58px; height:auto; flex:none; }
.brand__type{ display:block; line-height:1; }
.brand__type b{
  display:block; font-family:var(--font-display);
  font-size:1.16rem; font-weight:700; letter-spacing:-.012em; line-height:1;
}
.brand__type i{
  display:block; font-style:normal; font-family:var(--font-mono);
  font-size:.475rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--steel); margin-top:.3rem; line-height:1;
}

.nav__foot{ display:none; }   /* desktop: contacts live in the header + footer */
.nav__link{ font-size:.83rem; font-weight:500; padding:.55rem .66rem; color:var(--ink); }
.nav__link:hover{ color:var(--brand); background:rgba(16,20,24,.045); }
.nav__item.is-open > .nav__link{ color:var(--brand); }
.nav__tel .nav__link{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.02em; }
.nav__cta{ margin-left:.35rem; }
.nav__cta .nav__link{
  background:var(--brand); color:var(--ink);
  padding:.62rem 1rem; border-radius:var(--radius); font-weight:600;
}
.nav__cta .nav__link:hover{ background:var(--ink); color:var(--white); }

/* mega panel stays dark — it drops out of a white header like a drawer */
.mega{ background:var(--ink-3); }
.mega__h{ color:var(--brand); }
.megap{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.05fr); gap:1.5rem; }
.megap__col--note{ border-left:1px solid var(--line); padding-left:1.4rem; }
.megap__col a{ display:flex; align-items:flex-start; gap:0; padding:.55rem 0; }
.megap__n{
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.1em;
  color:var(--brand); padding-top:.18rem; min-width:1.6rem; flex:none;
}
.megap__t{ display:block; font-size:.845rem; line-height:1.3; }
.megap__t em{
  display:block; font-style:normal; font-size:.7rem; font-weight:300;
  color:rgba(244,246,247,.55); margin-top:.16rem; line-height:1.35;
}
.megap__note{ font-size:.79rem; line-height:1.55; color:rgba(244,246,247,.66); margin-top:.2rem; }
.megap__all{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1rem;
  font-family:var(--font-mono); font-size:.63rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brand);
  border-bottom:1px solid rgba(230,105,38,.5); padding-bottom:.28rem;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  background:var(--white);
  padding-block:clamp(2rem,4.6vw,3.6rem) clamp(2.4rem,5vw,4rem);
  min-height:calc(100svh - 74px);
  display:flex; align-items:center;
}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.94fr);
  gap:clamp(1.6rem,3.6vw,3.4rem);
  align-items:center;
}

.eyebrow{
  font-family:var(--font-mono); font-size:.665rem; letter-spacing:.19em;
  text-transform:uppercase; color:var(--ink-mute);
  display:flex; align-items:center; gap:.6rem;
}
.eyebrow::before{
  content:""; width:5px; height:5px; background:var(--brand); flex:none;
}
.hero__h1{
  font-size:var(--h1-size, clamp(2.2rem,5.7vw,5rem));
  font-weight:700; line-height:.95; letter-spacing:-.024em;
  margin-top:1.15rem;
}
.hero__lead{
  font-size:1rem; line-height:1.68; color:var(--ink-mute);
  max-width:47ch; margin-top:1.5rem;
}
.hero__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; margin-top:2rem; }
.hero__acts .btn svg{ width:14px; height:14px; }
.link-arrow{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; padding-bottom:.32rem;
  border-bottom:1px solid var(--line-d); transition:color .2s, border-color .2s;
}
.link-arrow:hover{ color:var(--brand); border-color:var(--brand); }

.hero__trust{
  display:flex; flex-wrap:wrap; gap:.45rem 1.3rem; margin-top:2.3rem;
  font-family:var(--font-mono); font-size:.615rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-mute);
}
.hero__trust span{ display:flex; align-items:center; gap:.5rem; }
.hero__trust span::before{ content:""; width:3px; height:3px; background:var(--brand); flex:none; }

/* ---- the drawing ---- */
.hero__fig{ margin:0; }
.fig{ width:100%; height:auto; display:block; overflow:visible; }
.fig__grid{ color:var(--ink); opacity:.055; }
.fig__cones path{ fill:var(--sky); opacity:.055; }
.fig__orbit{
  fill:none; stroke:var(--sky); stroke-width:1.5;
  stroke-dasharray:6 7; stroke-linecap:round;
}
/* no-JS safe: drawn by default, animated in only once the preloader lifts */
.fig__draw{ stroke-dashoffset:0; }
body.loaded .fig__draw{ animation:orbitDraw 1.6s var(--ease) .18s both; }
@keyframes orbitDraw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }

.fig__drones path{ fill:none; stroke:var(--ink); stroke-width:1.1; opacity:.8; }
.fig__drones circle{ fill:var(--ink); opacity:.8; }
.fig__drones rect{ fill:var(--white); stroke:var(--ink); stroke-width:1.1; }

.fig__roof{ fill:none; }
.r-eave{ stroke:var(--ink); stroke-width:2.4; }
.r-fascia{ stroke:var(--ink); stroke-width:.7; opacity:.3; }
.r-hip{ stroke:var(--ink); stroke-width:1.4; opacity:.92; }
.r-ridge{ stroke:var(--ink); stroke-width:2.2; }
.r-chimney{ stroke:var(--ink); stroke-width:1.4; fill:var(--white); }
.r-hatch{ stroke:var(--ink); stroke-width:.85; opacity:.55; }
.r-light{ stroke:var(--ink); stroke-width:1.2; fill:var(--white); }
.r-glaze{ stroke:var(--sky); stroke-width:1; opacity:.9; }
.r-pipe{ fill:var(--ink); }

.fig__pc circle{ fill:var(--lime); }
.fig__lbl text{
  font-family:var(--font-mono); font-size:12px;
  letter-spacing:.1em; fill:var(--steel);
}
.fig__lbl .fig__n{ font-size:15px; letter-spacing:0; fill:var(--ink); }
.fig__lbl .lead{ fill:none; stroke:var(--ink); stroke-width:.8; opacity:.28; }

.fig__cap{
  font-family:var(--font-mono); font-size:.645rem; letter-spacing:.07em;
  color:var(--ink-mute); margin-top:.7rem; padding-left:1.2rem; position:relative;
  line-height:1.6;
}
.fig__cap::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:1px; background:var(--brand);
}

/* ==========================================================================
   01 — WHY DRONE (ink)
   ========================================================================== */
.band-why{ background:var(--ink); color:var(--text); position:relative; overflow:hidden; }
/* the orbit carries on down the page — cropped, barely there */
.band-why__orbit{
  position:absolute; right:-26%; top:50%; transform:translateY(-50%);
  width:min(780px,86vw); pointer-events:none; opacity:.14;
}
.band-why__orbit svg{ width:100%; height:auto; display:block; }
.band-why__orbit ellipse{ fill:none; stroke:var(--sky); stroke-width:1.2; stroke-dasharray:7 9; }
.band-why .wrap{ position:relative; z-index:1; }

.why{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.4rem,3vw,2.6rem);
  margin-top:clamp(2rem,4vw,3.2rem);
  border-top:1px solid var(--line);
  padding-top:clamp(1.6rem,3vw,2.4rem);
}
.why__n{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.2em; color:var(--brand); }
.why__h{
  font-family:var(--font-display); font-size:clamp(1.35rem,2.2vw,1.8rem);
  font-weight:700; letter-spacing:-.02em; margin-top:.7rem; line-height:1.05;
}
.why__p{ font-size:.9rem; line-height:1.65; color:rgba(244,246,247,.66); margin-top:.65rem; max-width:36ch; }

.stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem; margin-top:clamp(2.4rem,5vw,3.6rem);
  border-top:1px solid var(--line); padding-top:clamp(1.6rem,3vw,2.2rem);
}
.stats__i b{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.5rem,6vw,4.2rem); line-height:.9; letter-spacing:-.05em;
}
.stats__i sup{ font-size:.36em; color:var(--brand); letter-spacing:0; }
.stats__i span{
  display:block; margin-top:.7rem; font-family:var(--font-mono);
  font-size:.625rem; letter-spacing:.17em; text-transform:uppercase;
  color:rgba(244,246,247,.56);
}

/* ==========================================================================
   02 — SERVICES (white spec table)
   ========================================================================== */
.band-services{ background:var(--white); }

.spec{ margin-top:clamp(1.6rem,3vw,2.4rem); border-top:1px solid var(--line-d); }
.spec__head,
.spec__row{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1.5fr) 9.5rem 2.5rem;
  gap:clamp(.8rem,2vw,1.6rem);
}
.spec__head{
  padding:.72rem .35rem;
  background:var(--pale);
  border-bottom:1px solid var(--line-d);
  font-family:var(--font-mono); font-size:.585rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-mute);
}
.spec__row{
  position:relative;
  align-items:start;
  padding:clamp(1.15rem,2.3vw,1.7rem) .35rem;
  border-bottom:1px solid var(--line-d);
  transition:background .2s;
}
.spec__row:hover{ background:var(--pale); }
.spec__n{
  display:block; font-family:var(--font-mono); font-size:.6rem;
  letter-spacing:.16em; color:var(--brand); margin-bottom:.4rem;
}
.spec__cell h3{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.022em;
  font-size:clamp(1.22rem,2.1vw,1.6rem); line-height:1.06;
}
.spec__desc{ font-size:.865rem; line-height:1.62; color:var(--ink-mute); max-width:54ch; }
.spec__out{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.05em; padding-top:.15rem; }
.spec__go{
  width:2.5rem; height:2.5rem; display:grid; place-items:center;
  border:1px solid var(--line-d); border-radius:50%; font-size:.95rem;
  transition:background .22s, color .22s, border-color .22s, transform .22s var(--ease);
}
.spec__row:hover .spec__go{
  background:var(--brand); border-color:var(--brand); color:var(--white);
}
/* the arrow is the link; the overlay makes the whole row the target */
.spec__go::after{ content:""; position:absolute; inset:0; }

.brands{ margin-top:clamp(2.4rem,4.6vw,3.4rem); }
.brands__h{
  font-family:var(--font-mono); font-size:.585rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:1.5rem;
}
.brands__row{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(1.1rem,2.6vw,2.2rem); }
.brands__row li{ width:112px; height:30px; display:flex; align-items:center; }
.brands__row img{
  max-width:100%; max-height:28px; width:auto; height:auto;
  filter:grayscale(1); opacity:.62;
  transition:opacity .25s, filter .25s;
}
.brands__row img:hover{ opacity:1; filter:grayscale(0); }

/* ==========================================================================
   03 — WHAT YOU GET BACK (brand orange)
   ========================================================================== */
.band-get{ background:var(--brand); color:var(--ink); }
.band-get .sect__h2{ color:var(--ink); }

.get{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(1.8rem,4vw,3.2rem);
  margin-top:clamp(1.6rem,3vw,2.4rem);
}
.get__i{ padding:clamp(1.1rem,2.2vw,1.6rem) 0; border-top:1px solid rgba(16,20,24,.24); }
.get__i:nth-last-child(-n+2){ border-bottom:1px solid rgba(16,20,24,.24); }
.get__n{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.18em; color:rgba(16,20,24,.66); }
.get__h{
  font-family:var(--font-display); font-size:clamp(1.15rem,1.9vw,1.45rem);
  font-weight:700; letter-spacing:-.02em; margin-top:.5rem; line-height:1.08;
}
.get__p{ font-size:.85rem; line-height:1.6; color:rgba(16,20,24,.86); margin-top:.45rem; max-width:46ch; }
.get__f{
  display:inline-block; margin-top:.9rem;
  font-family:var(--font-mono); font-size:.625rem; letter-spacing:.14em;
  text-transform:uppercase; padding:.22rem .48rem;
  border:1px solid rgba(16,20,24,.38); border-radius:2px;
}

/* ==========================================================================
   04 — METHOD (white)
   ========================================================================== */
.band-method{ background:var(--white); }
.steps{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(1rem,2.4vw,1.9rem);
  margin-top:clamp(1.8rem,3.4vw,2.6rem);
}
.steps__i{ border-top:1px dashed rgba(47,127,181,.55); padding-top:1.15rem; }
.steps__n{ font-family:var(--font-mono); font-size:.63rem; letter-spacing:.2em; color:var(--sky); }
.steps__h{
  font-family:var(--font-display); font-size:1.1rem; font-weight:700;
  letter-spacing:-.015em; margin-top:.75rem; line-height:1.12;
}
.steps__p{ font-size:.815rem; line-height:1.58; color:var(--ink-mute); margin-top:.5rem; }

/* ==========================================================================
   05 — RECENT WORK (ink)
   ========================================================================== */
.band-work{ background:var(--ink); color:var(--text); }
.work{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(1.8rem,4vw,3.4rem); align-items:start;
  margin-top:clamp(1.6rem,3vw,2.4rem);
}
.work__list{ border-top:1px solid var(--line); }
.work__i{ border-bottom:1px solid var(--line); }
.work__i a{
  display:grid; grid-template-columns:2rem minmax(0,1fr) auto 1.4rem;
  gap:1rem; align-items:center; padding:1.3rem .3rem;
  transition:background .2s;
}
.work__i a:hover{ background:rgba(255,255,255,.04); }
.work__n{ font-family:var(--font-mono); font-size:.6rem; color:rgba(244,246,247,.52); }
.work__t{
  font-family:var(--font-display); font-size:clamp(1.02rem,1.7vw,1.28rem);
  font-weight:600; line-height:1.2; letter-spacing:-.01em;
}
.work__t em{
  display:inline-block; font-style:normal; font-family:var(--font-body);
  font-weight:300; font-size:.78em; color:rgba(244,246,247,.6);
}
.work__k{
  font-family:var(--font-mono); font-size:.575rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(244,246,247,.52); white-space:nowrap;
}
.work__a{ color:var(--brand); font-size:1.05rem; transition:transform .22s var(--ease); }
.work__i a:hover .work__a{ transform:translateX(4px); }

.work__shots{ display:grid; gap:1rem; }
.shot{ margin:0; }
.shot img{
  width:100%; aspect-ratio:3/2; object-fit:cover;
  filter:saturate(.86) contrast(1.04);
}
.shot figcaption{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.05em;
  color:rgba(244,246,247,.55); margin-top:.6rem; line-height:1.5;
}

/* ==========================================================================
   06 — PROOF (white)
   ========================================================================== */
.band-proof{ background:var(--white); }
.quote{
  margin:clamp(1.4rem,3vw,2.2rem) 0 0;
  padding-top:clamp(1.2rem,2.6vw,1.9rem);
  border-top:2px solid var(--ink);
  max-width:54rem;
}
.quote p{
  font-family:var(--font-body); font-weight:300;
  font-size:clamp(1.28rem,2.2vw,1.78rem); line-height:1.42; letter-spacing:-.012em;
  color:#2b3238;
}
.quote footer{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.7rem;
  margin-top:1.6rem; font-size:.85rem;
}
.quote footer b{ font-family:var(--font-display); font-weight:700; font-size:1rem; letter-spacing:-.01em; }
.quote footer span,
.quotes__i footer span{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-mute);
}

.quotes{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.4rem,3vw,2.6rem);
  margin-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--line-d);
  padding-top:clamp(1.4rem,3vw,2rem);
}
.quotes__i p{ font-size:.93rem; line-height:1.62; max-width:44ch; }
.quotes__i footer{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem; margin-top:1rem; font-size:.8rem; }
.quotes__i footer b{ font-weight:600; }

/* ==========================================================================
   07 — CONTACT (ink)
   ========================================================================== */
.band-contact{ background:var(--ink); color:var(--text); }
.contact{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.88fr);
  gap:clamp(2rem,5vw,4rem); align-items:start;
}
.contact__copy .sect__lead{ margin-top:1.1rem; }
.contact .btn{ margin-top:2rem; }
.contact__list{ border-top:1px solid var(--line); }
.contact__list > div{
  display:grid; grid-template-columns:5rem minmax(0,1fr);
  gap:1rem; align-items:baseline;
  padding:1.05rem 0; border-bottom:1px solid var(--line);
}
.contact__list dt{
  font-family:var(--font-mono); font-size:.585rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(244,246,247,.56);
}
.contact__list dd{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1rem,1.55vw,1.18rem); letter-spacing:-.01em;
  overflow-wrap:anywhere; min-width:0;
}
.contact__list address{
  font-family:var(--font-body); font-weight:300; font-size:.86rem;
  line-height:1.55; color:rgba(244,246,247,.72);
}
.contact__list a{ transition:color .18s; }
.contact__list a:hover{ color:var(--brand); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{ background:#0c1013; }
.brand--foot{ color:var(--text); }
.brand--foot .brand__type i{ color:rgba(244,246,247,.45); }
.foot__top{ grid-template-columns:minmax(0,.86fr) minmax(0,1.9fr); }
.foot__nav{ grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1.25fr) minmax(0,1fr); }
.foot__nav a{ font-size:.8rem; }
.foot__note{
  font-size:.83rem; line-height:1.65; color:rgba(244,246,247,.55);
  max-width:35ch; margin-top:1.3rem;
}
.foot__nav a, .foot__nav address{ overflow-wrap:break-word; }
.foot__h--sp{ margin-top:1.7rem; }
.foot__nav li{ font-size:.83rem; color:rgba(244,246,247,.6); line-height:1.45; }
.foot__nav address{ font-size:.83rem; color:rgba(244,246,247,.6); line-height:1.45; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1179px){
  .nav__tel{ display:none; }
}

@media (max-width:1023px){
  /* the overlay is dark — base.css leaves .nav__link colour to us */
  .nav__link{ color:var(--text); }
  .nav__link:hover{ background:none; color:var(--brand); }
  .burger{ border-color:var(--line-d); }
  .burger span{ background:var(--ink); }
  .nav__foot{ display:grid; }
  .mega{ background:none; }

  .hero{ min-height:0; }
  .hero__grid{ grid-template-columns:minmax(0,1fr); gap:2.2rem; }
  .hero__fig{ max-width:540px; margin-inline:auto; width:100%; }

  .why{ grid-template-columns:minmax(0,1fr); gap:1.6rem; }
  .why__p{ max-width:52ch; }

  .spec__head{ display:none; }
  .spec__row{
    grid-template-columns:minmax(0,1fr) 2.5rem;
    grid-template-areas:"name go" "desc go" "out go";
    row-gap:.6rem;
  }
  .spec__cell--name{ grid-area:name; }
  .spec__desc{ grid-area:desc; }
  .spec__out{ grid-area:out; }
  .spec__go{ grid-area:go; align-self:start; }

  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.4rem; }

  .work{ grid-template-columns:minmax(0,1fr); gap:2.2rem; }
  .work__shots{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  .contact{ grid-template-columns:minmax(0,1fr); gap:2.2rem; }

  .megap{ grid-template-columns:minmax(0,1fr); gap:.2rem; }
  .megap__col--note{ border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:1rem; margin-top:.6rem; }
  .megap__col a{ padding:.45rem 0; }
}

@media (max-width:760px){
  .get{ grid-template-columns:minmax(0,1fr); }
  .get__i:nth-last-child(-n+2){ border-bottom:0; }
  .get__i:last-child{ border-bottom:1px solid rgba(16,20,24,.24); }

  .quotes{ grid-template-columns:minmax(0,1fr); }

  .work__shots{ grid-template-columns:minmax(0,1fr); }

  .work__i a{ grid-template-columns:1.6rem minmax(0,1fr) 1.2rem; }
  .work__k{ display:none; }
}

@media (max-width:600px){
  .steps{ grid-template-columns:minmax(0,1fr); gap:1.2rem; }
  .stats__i b{ font-size:clamp(1.9rem,9.5vw,3rem); }
  .stats__i span{ font-size:.55rem; letter-spacing:.13em; }
  .hero__acts{ gap:1rem; }
  .hero__acts .btn{ width:100%; justify-content:center; }
  .contact__list > div{ grid-template-columns:minmax(0,1fr); gap:.3rem; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .pre__orbit{ animation:none; }
  .fig__draw{ stroke-dashoffset:0; animation:none !important; }
  .work__i a:hover .work__a{ transform:none; }
}