/* ==========================================================================
   Bass Drone Services
   Single shared stylesheet for every page of the site.
   Palette and type are locked to the brand brief: do not add off-brand hues.
   ========================================================================== */

:root {
  /* Brand palette (exact values from the logo) */
  --navy: #0B1A28;
  --cobalt: #2A6BB0;
  --signal: #3E8DD4;
  --white: #FFFFFF;
  --grey: #666666;

  /* Derived tints and rules (alpha mixes of the brand hues only) */
  --wash: #F2F6FA;
  --line: rgba(11, 26, 40, 0.14);
  --line-strong: rgba(11, 26, 40, 0.3);
  --signal-dim: rgba(62, 141, 212, 0.12);

  /* Brand gradients, sampled from the logo's camera beam: cobalt falling
     into signal blue, and an ink-to-signal ramp for rules */
  --grad-brand: linear-gradient(120deg, var(--cobalt) 0%, var(--signal) 100%);
  --grad-ink: linear-gradient(90deg, var(--navy) 0%, var(--cobalt) 55%, var(--signal) 100%);

  --font-display: "Chakra Petch", "Saira", sans-serif;
  --font-body: "IBM Plex Sans", "Work Sans", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --container: 74rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   Reset and base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* Firefox only: brand ink on the wash track. Kept away from Chromium,
   where the standard scrollbar-color property would silently disable
   the full ::-webkit-scrollbar styling below and drop the thumb. */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-color: var(--cobalt) var(--wash);
  }
}

/* WebKit / Chromium scrollbar: square-cornered like the rest of the
   chrome, wash track, solid brand thumb, no arrow buttons */
::-webkit-scrollbar {
  width: 13px;
  height: 13px;
}

::-webkit-scrollbar-track {
  background: var(--wash);
  border-left: 1px solid var(--line);
}

::-webkit-scrollbar-thumb {
  background: var(--cobalt);
  border: 2px solid var(--wash);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--signal);
}

::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar-corner {
  background: var(--wash);
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--cobalt);
}

a:hover {
  color: var(--signal);
}

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.skip-link:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 1.12;
  font-weight: 700;
}

h1 {
  font-size: clamp(2.5rem, 6.5vw, 4.35rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  letter-spacing: 0.005em;
}

h3 {
  font-size: 1.3rem;
  font-weight: 600;
}

/* Mono telemetry label. The leading slashes are decorative, added in markup. */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cobalt);
  margin-bottom: 1rem;
}

.section--dark .eyebrow {
  color: var(--signal);
}

.lede {
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 46rem;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(3.75rem, 8vw, 6.25rem);
}

.section--wash {
  background: var(--wash);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section--dark {
  background-color: var(--navy);
  color: var(--white);
  /* Faint survey grid: brand blue hairlines only */
  background-image:
    linear-gradient(rgba(62, 141, 212, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(62, 141, 212, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

.section-head p {
  max-width: 34rem;
  color: var(--grey);
}

.section--dark .section-head p {
  color: rgba(255, 255, 255, 0.75);
}

/* --------------------------------------------------------------------------
   Buttons: squared, chamfered top-right corner. No pills.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  background: var(--cobalt) var(--grad-brand);
  padding: 1rem 2rem;
  border: 0;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition: filter 160ms ease;
}

.btn:hover {
  filter: brightness(1.16);
  color: var(--white);
}

/* --------------------------------------------------------------------------
   Header and navigation. Sticky on every page (2026-07 client change of
   mind, was previously non-sticky) so the phone number and quote path
   stay one tap away.
   -------------------------------------------------------------------------- */

/* Light chrome: the client's logo is dark-ink artwork, so the header and
   footer carry white surfaces with navy ink. The navy weight of the scheme
   lives in the hero, the field gallery and the CTA bands instead. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

/* Home: the header floats transparent over the hero video. While it is
   transparent the dark-ink logo renders white via filter and the nav goes
   light; once scrolled (class set by main.js) it settles into the same
   frosted white bar as every other page, softly rather than snapping. */
.home .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: none;
  transition: background-color 0.35s ease, border-color 0.35s ease,
              box-shadow 0.35s ease;
}

.home .site-header .logo__img {
  filter: brightness(0) invert(1);
  transition: filter 0.35s ease;
}

.home .site-header .nav-toggle {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.4);
}

.home .site-header.is-scrolled,
.home .site-header.menu-open {
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  box-shadow: 0 14px 30px -22px rgba(11, 26, 40, 0.35);
}

.home .site-header.is-scrolled .logo__img,
.home .site-header.menu-open .logo__img {
  filter: none;
}

.home .site-header.is-scrolled .nav-toggle,
.home .site-header.menu-open .nav-toggle {
  color: var(--navy);
  border-color: var(--line-strong);
}

/* Desktop nav ink swaps with the header state. Scoped above the mobile
   breakpoint so the navy drop panel keeps its own light link colours. */
@media (min-width: 821px) {
  .home .site-header .site-nav a {
    color: rgba(255, 255, 255, 0.88);
  }

  .home .site-header .site-nav a:hover,
  .home .site-header .site-nav a[aria-current="page"] {
    color: var(--white);
  }

  .home .site-header .site-nav .site-nav__phone {
    color: var(--signal);
  }

  .home .site-header.is-scrolled .site-nav a {
    color: var(--navy);
  }

  .home .site-header.is-scrolled .site-nav a:hover {
    color: var(--cobalt);
  }

  .home .site-header.is-scrolled .site-nav a[aria-current="page"] {
    color: var(--navy);
  }

  .home .site-header.is-scrolled .site-nav .site-nav__phone {
    color: var(--cobalt);
  }
}

/* Scroll progress: a thin brand-gradient beam pinned to the very top of
   the viewport, filling left to right as the page is scrolled. Element
   is created by main.js. */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 60;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: 0 0;
  pointer-events: none;
}

/* Skip-link target: keep it clear of the sticky header when jumped to */
#main {
  scroll-margin-top: 5.5rem;
}

/* The bar spans the full viewport: logo hard left, nav hard right,
   only the gutter padding holding them off the edges */
.site-header__inner {
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 5rem;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo__img {
  height: 3.4rem;
  width: auto;
  display: block;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.site-nav a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  padding-block: 0.5rem;
  border-bottom: 2px solid transparent;
  transition: color 0.35s ease;
}

.site-nav a:hover {
  color: var(--cobalt);
}

.site-nav a[aria-current="page"] {
  color: var(--navy);
  border-bottom-color: var(--signal);
}

.site-nav .site-nav__phone {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--cobalt);
  border-bottom: 0;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
  cursor: pointer;
  transition: color 0.35s ease, border-color 0.35s ease;
}

@media (max-width: 480px) {
  /* Keep the logo and menu button inside a narrow phone viewport */
  .logo__img {
    height: 2.8rem;
  }

  .nav-toggle {
    padding: 0.5rem 0.75rem;
  }
}

@media (max-width: 820px) {
  .nav-toggle {
    display: block;
  }

  /* Drop panel: navy with the same faint survey grid as the dark sections,
     closed off by a signal-blue rule so it reads as one deliberate unit */
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background-color: var(--navy);
    background-image:
      linear-gradient(rgba(62, 141, 212, 0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(62, 141, 212, 0.06) 1px, transparent 1px);
    background-size: 56px 56px;
    border-top: 1px solid rgba(62, 141, 212, 0.3);
    border-bottom: 2px solid var(--signal);
    padding: 0.5rem var(--gutter) 1.5rem;
    box-shadow: 0 24px 40px rgba(11, 26, 40, 0.45);
  }

  .site-nav.is-open {
    display: flex;
    animation: nav-drop 0.22s ease both;
  }

  @keyframes nav-drop {
    from {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Inside the navy drop panel the links revert to light ink */
  .site-nav a {
    padding: 1.05rem 0.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1.02rem;
    color: rgba(255, 255, 255, 0.88);
  }

  .site-nav a:hover {
    color: var(--white);
  }

  /* Current page: the site's mono // marker, not the desktop underline
     (which reads as a stray full-width rule inside the panel) */
  .site-nav a[aria-current="page"] {
    color: var(--signal);
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  .site-nav a[aria-current="page"]::before {
    content: "// ";
    font-family: var(--font-mono);
    font-weight: 500;
  }

  /* Phone: the panel's closing action, boxed as a direct line */
  .site-nav .site-nav__phone {
    margin-top: 1.25rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(62, 141, 212, 0.45);
    background: var(--signal-dim);
    text-align: center;
    font-size: 1rem;
    color: var(--signal);
  }

  .site-nav .site-nav__phone::before {
    content: "Call ";
  }
}

/* --------------------------------------------------------------------------
   Hero (home): background video, dark overlay, viewfinder corners,
   telemetry strip. Left-aligned content, single call to action.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(92vh, 60rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 26, 40, 0.6) 0%,
    rgba(11, 26, 40, 0.45) 45%,
    rgba(11, 26, 40, 0.82) 100%
  );
}

/* Viewfinder corner brackets */
.hero__corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 0 solid var(--signal);
  opacity: 0.9;
  z-index: 2;
}

/* Inset far enough that no scrollbar treatment (classic or overlay)
   can sit over the right-hand brackets */
.hero__corner--tl { top: 6.5rem; left: 2rem; border-top-width: 2px; border-left-width: 2px; }
.hero__corner--tr { top: 6.5rem; right: 2.25rem; border-top-width: 2px; border-right-width: 2px; }

/* The bottom brackets live inside the telemetry strip and are anchored to its
   top edge, so they float just above it however many rows the strip wraps to. */
.hero__corner--bl,
.hero__corner--br { bottom: 100%; margin-bottom: 1.5rem; }
.hero__corner--bl { left: 2rem; border-bottom-width: 2px; border-left-width: 2px; }
.hero__corner--br { right: 2.25rem; border-bottom-width: 2px; border-right-width: 2px; }

/* The viewfinder frame needs open video around it to read as a frame.
   On narrow screens the text column fills the hero, so the corners crowd
   the type instead of framing it: drop them and let the type breathe. */
@media (max-width: 700px) {
  .hero__corner {
    display: none;
  }
}

.hero__content {
  position: relative;
  z-index: 3;
  /* The hero packs its children to the base, which parks the text right on
     the telemetry strip on short, wide viewports. Auto block margins let the
     content float centred in the space left between header and telemetry. */
  margin-block: auto;
  /* Top padding must clear the corner brackets (top 6.5rem + 30px tall),
     or the text collides with them when the stack fills the hero on
     small screens. */
  padding-block: 9.5rem 4.5rem;
}

.hero__content h1 {
  max-width: 12ch;
}

.hero__content .eyebrow {
  color: var(--signal);
}

.hero__tagline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  letter-spacing: 0.06em;
  color: var(--signal);
  margin-top: 0.9rem;
}

.hero__lede {
  margin-top: 1.25rem;
  max-width: 34rem;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.88);
}

.hero__cta {
  margin-top: 2.25rem;
}

/* Telemetry strip along the hero base */
.telemetry {
  position: relative;
  z-index: 3;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(11, 26, 40, 0.55);
  backdrop-filter: blur(6px);
}

.telemetry__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2.75rem;
  padding-block: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.telemetry__inner b {
  font-weight: 500;
  color: var(--signal);
}

/* --------------------------------------------------------------------------
   Intro: copy plus credentials manifest
   -------------------------------------------------------------------------- */

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.intro-grid h2 {
  margin-bottom: 1.25rem;
  max-width: 24ch;
}

.intro-grid p + p {
  margin-top: 1rem;
}

@media (max-width: 900px) {
  .intro-grid {
    grid-template-columns: 1fr;
  }
}

/* Supplied brand logo: dark-ink artwork on light surfaces, centred in
   its column so it reads as a plate rather than a stray image. */
.brand-logo {
  display: block;
  width: min(16rem, 70%);
  height: auto;
  margin-inline: auto;
}

.intro-side .brand-logo {
  margin-bottom: 2.25rem;
}

.contact-details .brand-logo {
  margin-top: 2.75rem;
}

.creds {
  border-top: 2px solid var(--navy);
  border-image: var(--grad-ink) 1;
  list-style: none;
}

.creds li {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 1rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}

.creds .k {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cobalt);
  padding-top: 0.2rem;
}

/* --------------------------------------------------------------------------
   Service manifest (home overview): rows, not cards
   -------------------------------------------------------------------------- */

.manifest {
  list-style: none;
  border-top: 1px solid var(--line-strong);
}

.manifest a {
  display: grid;
  grid-template-columns: minmax(0, 18rem) 1fr auto;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.15rem 0.5rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--navy);
  transition: background-color 140ms ease, box-shadow 140ms ease;
}

.manifest a:hover {
  background: var(--white);
  box-shadow: inset 3px 0 0 var(--signal);
  color: var(--navy);
}

.manifest .name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
}

.manifest .desc {
  color: var(--grey);
  font-size: 0.97rem;
}

.manifest .for {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cobalt);
  white-space: nowrap;
}

@media (max-width: 820px) {
  .manifest a {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name for"
      "desc desc";
    gap: 0.35rem 1rem;
    padding-inline: 0;
  }

  .manifest .for { grid-area: for; }
  .manifest .name { grid-area: name; }
  .manifest .desc { grid-area: desc; }
}

/* --------------------------------------------------------------------------
   Field gallery (dark section)
   -------------------------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
}

.gallery figure {
  position: relative;
  margin: 0;
}

/* Row one: the client's own 3D model leads at feature width beside one
   stock frame. Row two: three supporting frames. */
.gallery figure:nth-child(1) { grid-column: span 7; }
.gallery figure:nth-child(2) { grid-column: span 5; }
.gallery figure:nth-child(3),
.gallery figure:nth-child(4),
.gallery figure:nth-child(5) { grid-column: span 4; }

.gallery img {
  width: 100%;
  height: 100%;
  min-height: 15rem;
  object-fit: cover;
}

/* Capture frame corners on each image */
.gallery figure::before,
.gallery figure::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 0 solid var(--signal);
  z-index: 2;
}

.gallery figure::before {
  top: 10px;
  left: 10px;
  border-top-width: 2px;
  border-left-width: 2px;
}

.gallery figure::after {
  top: 10px;
  right: 10px;
  border-top-width: 2px;
  border-right-width: 2px;
}

.gallery figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.6rem 0.9rem;
  background: rgba(11, 26, 40, 0.78);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

/* The in-house capture: signal frame corners read as the live feed, and
   its caption carries the capture credit like a telemetry readout */
.gallery__feature figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-left: 2px solid var(--signal);
}

.gallery__feature .cap-gear {
  color: var(--signal);
  white-space: nowrap;
}

@media (max-width: 820px) {
  .gallery figure:nth-child(n) {
    grid-column: span 12;
  }

  .gallery__feature .cap-gear {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Testimonials (built, disabled at launch via [hidden] in markup)
   -------------------------------------------------------------------------- */

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2rem;
}

.testimonial {
  border-left: 2px solid var(--signal);
  padding-left: 1.5rem;
}

.testimonial blockquote {
  font-size: 1.05rem;
  font-style: italic;
}

.testimonial cite {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
}

/* --------------------------------------------------------------------------
   Closing call to action band
   -------------------------------------------------------------------------- */

/* The closing band sits directly above the (also dark) footer, so it gets
   tighter padding and the footer carries a dividing rule */
.section--cta {
  padding-block: clamp(3rem, 6vw, 4.25rem);
}

.cta-band {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2.5rem;
  align-items: center;
}

.cta-band h2 {
  max-width: 20ch;
}

.cta-band__contact {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.cta-band__contact .phone {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  color: var(--white);
  text-decoration: none;
  margin-top: 1.1rem;
}

.cta-band__contact .phone:hover {
  color: var(--signal);
}

.cta-band__contact .hours {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 0.4rem;
}

@media (max-width: 820px) {
  .cta-band {
    grid-template-columns: 1fr;
  }

  .cta-band__contact {
    justify-self: start;
    align-items: flex-start;
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   Page hero band (services and contact)
   -------------------------------------------------------------------------- */

.page-hero {
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.page-hero .lede {
  margin-top: 1.25rem;
  color: rgba(255, 255, 255, 0.82);
}

/* --------------------------------------------------------------------------
   404 page: waypoint links back onto the flight plan
   -------------------------------------------------------------------------- */

.waypoints {
  margin-top: 2.25rem;
  border-top: 1px solid var(--line);
}

.waypoint {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 16rem) minmax(0, 1fr);
  align-items: baseline;
  gap: 0.35rem 1.5rem;
  padding: 1.35rem 0.25rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background 160ms ease;
}

.waypoint:hover,
.waypoint:focus-visible {
  background: var(--wash);
}

.waypoint__index {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  color: var(--cobalt);
}

.waypoint__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  transition: color 160ms ease;
}

.waypoint:hover .waypoint__label,
.waypoint:focus-visible .waypoint__label {
  color: var(--cobalt);
}

.waypoint__hint {
  color: var(--grey);
  font-size: 0.95rem;
}

.waypoints__phone {
  margin-top: 1.75rem;
  color: var(--grey);
}

@media (max-width: 640px) {
  .waypoint {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  .waypoint__hint {
    grid-column: 2;
  }
}

/* --------------------------------------------------------------------------
   Services page
   -------------------------------------------------------------------------- */

.service-group {
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
}

.service-group:first-of-type {
  border-top: 0;
}

.service {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: 2.25rem;
}

.service + .service {
  border-top: 1px solid var(--line);
}

.service h2 {
  font-size: 1.55rem;
  font-weight: 600;
  max-width: 18ch;
}

.service__for {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cobalt);
  margin-top: 0.9rem;
  line-height: 1.9;
}

.service__body p + p {
  margin-top: 1rem;
}

/* Designer-supplied category pictograms (labels cropped off, the heading
   carries the words): a compact mark above each service title */
.service__icon {
  display: block;
  width: auto;
  height: 3.25rem;
  margin-bottom: 1.1rem;
}

.deliverables {
  margin-top: 1.5rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

.deliverables .k {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
}

.deliverables ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.deliverables li {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--navy);
  background: var(--signal-dim);
  border: 1px solid rgba(42, 107, 176, 0.25);
  padding: 0.3rem 0.7rem;
}

@media (max-width: 820px) {
  .service {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.contact-details .creds {
  margin-top: 2rem;
  border-top: none;
}

/* The direct-line block sits centred on the same axis as the logo below */
.contact-details .eyebrow {
  text-align: center;
}

.contact-details .phone-big {
  display: block;
  width: fit-content;
  margin-inline: auto;
  font-family: var(--font-mono);
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  letter-spacing: 0.05em;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 2px solid var(--signal);
  border-image: var(--grad-brand) 1;
  padding-bottom: 0.15rem;
}

.contact-details .phone-big:hover {
  color: var(--cobalt);
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* Form */

.enquiry-form {
  border: 1px solid var(--line);
  border-top: 3px solid var(--cobalt);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--white);
}

.enquiry-form fieldset {
  border: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.5rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* When a label wraps to two lines, keep the control bottom-aligned with
   its neighbour in the same row so the grid stays even */
.field input,
.field select,
.field textarea {
  margin-top: auto;
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
}

.field label .req {
  color: var(--cobalt);
}

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 0.7rem 0.85rem;
  width: 100%;
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230B1A28' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.4rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--cobalt);
  outline: 2px solid var(--signal);
  outline-offset: 0;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(11, 26, 40, 0.38);
}

.field textarea {
  min-height: 8.5rem;
  resize: vertical;
}

/* Optional photo upload: a full-width strip after the message, framed as
   a dashed drop area so it reads as an attachment, not another text row */
.field--upload {
  border: 1px dashed var(--line-strong);
  background: var(--wash);
  padding: 1rem 1.1rem 0.9rem;
}

.field input[type="file"] {
  padding: 0.45rem 0;
  font-size: 0.9rem;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.field input[type="file"]::file-selector-button {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--cobalt) var(--grad-brand);
  border: 0;
  padding: 0.55rem 1rem;
  margin-right: 0.85rem;
  cursor: pointer;
}

.field input[type="file"]:hover::file-selector-button {
  filter: brightness(1.16);
}

.field input[type="file"]:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.field--upload.has-error {
  border-color: var(--cobalt);
}

.field-hint {
  font-size: 0.85rem;
  color: var(--grey);
  margin: 0;
}

.photos-summary {
  color: var(--navy);
  margin-top: 0.4rem;
}

.photos-clear {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--cobalt);
  text-decoration: underline;
  cursor: pointer;
}

.photos-clear:hover {
  color: var(--signal);
}

.field .error-msg {
  display: none;
  font-size: 0.85rem;
  color: var(--cobalt);
  font-weight: 600;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--cobalt);
  box-shadow: inset 3px 0 0 var(--cobalt);
}

.field.has-error .error-msg {
  display: block;
}

/* Honeypot: hidden from humans, present for bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.form-note {
  font-size: 0.88rem;
  color: var(--grey);
}

.form-status {
  grid-column: 1 / -1;
  display: none;
  font-weight: 600;
  color: var(--cobalt);
}

.form-status.is-visible {
  display: block;
}

.form-success {
  display: none;
  border: 1px solid var(--line);
  border-top: 3px solid var(--signal);
  padding: clamp(2rem, 5vw, 3rem);
  background: var(--wash);
}

.form-success.is-visible {
  display: block;
}

.form-success h3 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.form-success .mono-line {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cobalt);
  margin-bottom: 1rem;
}

@media (max-width: 640px) {
  .enquiry-form fieldset {
    grid-template-columns: 1fr;
  }
}

/* FAQ */

.faq-list {
  max-width: 52rem;
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list details:first-of-type {
  border-top: 1px solid var(--line-strong);
}

.faq-list summary {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.15rem 0.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::before {
  content: "+";
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--cobalt);
  flex: none;
}

.faq-list details[open] summary::before {
  content: "\2212"; /* mathematical minus sign */
}

.faq-list details[open] summary {
  color: var(--cobalt);
}

.faq-list details > p {
  padding: 0 0.25rem 1.35rem 2.1rem;
  max-width: 60ch;
  color: var(--grey);
}

/* --------------------------------------------------------------------------
   Legal pages (privacy, accessibility): single readable column
   -------------------------------------------------------------------------- */

.page-hero__meta {
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.legal {
  /* Keeps the measure at roughly 70 characters */
  max-width: 44rem;
}

.legal h2 {
  font-size: 1.35rem;
  font-weight: 600;
  margin-top: 2.75rem;
  margin-bottom: 0.85rem;
}

.legal h2:first-child {
  margin-top: 0;
}

.legal p {
  margin-bottom: 1.1rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

/* Light footer: wash surface with the survey grid in faint navy, closed
   off by the same 2px navy rule the creds lists use. The dark-ink logo
   sits directly on it. */
.site-footer {
  background-color: var(--wash);
  color: var(--navy);
  border-top: 2px solid var(--navy);
  border-image: var(--grad-ink) 1;
  padding-block: 3.5rem 2rem;
  background-image:
    linear-gradient(rgba(11, 26, 40, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 26, 40, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
}

.site-footer .logo__img {
  height: 4.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
}

/* Brand column: shrink to the tagline's width so the logo centres over
   the slogan as one lockup */
.footer-grid > div:first-child {
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-grid .tagline {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--cobalt);
}

.footer-grid h2 {
  font-size: 0.78rem;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 1.1rem;
}

.footer-grid ul {
  list-style: none;
}

.footer-grid li {
  margin-bottom: 0.55rem;
}

.footer-grid a {
  color: var(--navy);
  text-decoration: none;
}

.footer-grid a:hover {
  color: var(--cobalt);
}

.footer-contact li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.75rem;
  font-size: 0.95rem;
}

.footer-contact .k {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cobalt);
  padding-top: 0.2rem;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
}

.footer-legal {
  display: flex;
  gap: 1.75rem;
}

.footer-legal a {
  color: var(--grey);
  text-decoration: none;
}

.footer-legal a:hover {
  color: var(--cobalt);
}

.footer-credit a {
  color: var(--grey);
  text-decoration: none;
}

.footer-credit a:hover {
  color: var(--cobalt);
}

@media (max-width: 820px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  /* Single column: centre the logo-and-slogan lockup in the viewport */
  .footer-grid > div:first-child {
    justify-self: center;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}