/* Shared public-page shell. About Us is the alignment benchmark. */
:root {
  --site-gutter: clamp(22px, 4.1vw, 72px);
  --site-maxw: 1600px;
  --site-edge: max(var(--site-gutter), calc((100vw - var(--site-maxw)) / 2 + var(--site-gutter)));
  --control-radius: 0;
}

/* Public controls use one sharp geometry language: text capsules become
   rectangles and circular navigation controls become square. Organic brand
   motion, map markers and decorative dots intentionally remain untouched. */
:where(
  header .nav-link,
  header .m-link,
  header .nav-cta,
  .foot-cta,
  .foot-top-btn,
  .contact-channel-capsule,
  .contact-channel,
  .contact-footer-link,
  .contact-form-close,
  .contact-message-prompt,
  .contact-form-submit,
  .btn-core,
  .proj-cap,
  .pj-more,
  .pj-view,
  .back-pill,
  .project-video-file-fallback,
  .np-btn,
  .np-all,
  .np-card-view,
  .tabs a,
  .kp-filter,
  .svc-slide-tags span
) {
  border-radius: var(--control-radius) !important;
}

:where(.kp-faq-item summary)::after {
  border-radius: var(--control-radius) !important;
}

header#header,
header.topbar {
  width: 100%;
  background: transparent;
  border-bottom-color: transparent;
}

header#header.scrolled,
header.topbar.scrolled {
  background: transparent;
  border-bottom-color: transparent;
}

header#header .nav,
header.topbar .nav {
  width: 100%;
  max-width: var(--site-maxw);
  min-height: 82px;
  margin-inline: auto;
  padding: 14px var(--site-gutter);
  box-sizing: border-box;
}

header#header .brand,
header.topbar .brand {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  max-width: min(320px, 70vw);
  height: auto;
  flex: 0 0 auto;
  transform: translateY(-1.5px) scale(1.15);
  transform-origin: left center;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  outline: none;
  box-shadow: none;
  background: transparent;
}

/* Kill sticky focus/tap rectangles that reappear around the logo on scrollback. */
header#header .brand:focus,
header#header .brand:focus-visible,
header#header .brand:active,
header.topbar .brand:focus,
header.topbar .brand:focus-visible,
header.topbar .brand:active {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

header#header .brand::-moz-focus-inner,
header.topbar .brand::-moz-focus-inner {
  border: 0;
  padding: 0;
}

header#header .brand-mark,
header.topbar .brand-mark {
  width: auto;
  /* Nav logo size — shell wins over page <style>; keep in sync with index.html */
  height: clamp(34px, 3.5vw, 42px);
  aspect-ratio: 1920 / 539;
  flex: 0 0 auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

header#header .nav-end,
header.topbar .nav-right,
header.topbar .nav-end {
  margin-left: auto;
}

@media (min-width: 1201px) and (pointer: fine) {
  /* No scroll-back fill: the header stays transparent over the page in both
     directions. `is-scrollback` is still toggled in home-runtime.js but no
     longer paints anything. */

  body.home-page header#header .nav {
    z-index: 1;
  }

  body.home-page header#header.services-hidden {
    transform: translateY(-110%);
    pointer-events: none;
  }
}

@media (max-width: 760px) {
  header#header .nav,
  header.topbar .nav {
    min-height: 82px;
    padding-block: 14px;
  }

  header#header .brand,
  header.topbar .brand {
    max-width: 240px;
    transform: translateY(-8px);
  }

  header#header .brand-mark,
  header.topbar .brand-mark {
    height: 34px;
  }
}

/* Discourage drag/save and mobile long-press menus on media assets. */
img,
video,
canvas {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}