/* ==========================================================================
   CHROME — site header, nav, mobile drawer, footer
   ========================================================================== */

/* ----------------------------------------------------------------- header */
/* The header is global (header.php). Its visual chrome is the design's
   `.nav-bar` pill, which paints its own frosted background via ::before.
   This element must stay transparent — a background here spans the full
   viewport, so the blur bleeds out past the pill on both sides. */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: transparent;
  transition: transform .4s var(--ease);
}
.site-header.is-stuck {
  background: transparent;
  border-bottom-color: transparent;
}

/* The design hides the header on scroll down and brings it back on scroll up
   (pcr.js toggles .is-hidden). chrome-design.css owns the transform. */

/* ------------------------------------------------- fixed-header offset ------
   chrome-design.css makes .site-header `position: fixed`, so it overlays the
   document. The front page compensates INSIDE `.hero`, and the case-study hero
   puts its text at the bottom, so both want the artwork to run to the very top
   with the nav floating over it.

   Reserving the space on `.site-main` instead pushed every inner hero down 84px,
   leaving a dead band above it with the nav floating in the gap. So there is no
   blanket offset here — each inner template that actually starts with light
   content opts in below.

   Measured, not guessed: `.nav-bar` is `height: 60px` and `.site-header` adds
   `padding: 12px`, so the bar occupies 84px. The design's own --nav-height is
   76px and is NOT interchangeable with it. */
:root {
  /* Section rhythm, tightened from the design's
     `--section-pad: clamp(64px, 10vw, 160px)` / `--section-y: …144px`.
     160px of air top and bottom made every block feel disconnected on a large
     screen. 80px is the owner-set ceiling.
     Declared here rather than in tokens.css because that file is regenerated
     from the design by split_front_css.py and a hand edit would be wiped. */
  --section-pad: clamp(48px, 6vw, 80px);
  --section-y: clamp(44px, 5vw, 80px);

  --pcr-nav-offset: 84px;
}
@media (max-width: 900px) {
  /* The bar is now a floating panel inset from the edges: 8px from the top
     and 56px tall, so it occupies 64px of the viewport. */
  :root { --pcr-nav-offset: 72px; }
}

/* Templates that open with plain light content need the nav cleared. The
   case-study hero (`.case__hero`) deliberately does NOT — its 21:9 artwork
   should run under the nav, exactly as the front page's hero does. */
.pcr-inner .section:first-child { padding-top: calc(var(--pcr-nav-offset) + var(--sp-lg)); }

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
  min-height: var(--nav-h);
}

/* ------------------------------------------------------------------- logo */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
}
.logo__file {
  display: block;
  height: 27px;
  width: auto;
}
.site-footer .logo__file { height: 30px; }

/* -------------------------------------------------------------------- nav */
.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(2px, .5vw, 8px);
}
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: var(--sp-xs) var(--sp-sm);
  color: var(--ink-light);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  clip-path: var(--clip-xs);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--ink); background: rgba(10, 13, 20, .04); }
.nav__link[aria-current="page"], .nav__link.is-current { color: var(--ink); font-weight: 600; }
.nav__link[aria-current="page"]::after,
.nav__link.is-current::after {
  content: "";
  width: 5px; height: 5px;
  margin-left: 2px;
  background: var(--copper);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* dropdown */
.nav__item { position: relative; }
.nav__caret { font-size: .7em; opacity: .55; transition: transform var(--t-base) var(--ease); }
.nav__item:hover .nav__caret,
.nav__item:focus-within .nav__caret { transform: rotate(180deg); }

.nav__drop {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  min-width: 250px;
  padding: var(--sp-xs);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-3);
  clip-path: var(--clip-sm);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility var(--t-base);
}
.nav__item:hover .nav__drop,
.nav__item:focus-within .nav__drop {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.nav__drop a {
  display: block;
  padding: var(--sp-xs) var(--sp-sm);
  color: var(--ink-light);
  font-size: var(--fs-sm);
  text-decoration: none;
  clip-path: var(--clip-xs);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav__drop a:hover { background: var(--copper-wash); color: var(--ink); }
.nav__drop hr { margin: var(--sp-xs) 0; }

/* header actions */
.site-header__actions { display: flex; align-items: center; gap: var(--sp-sm); flex-shrink: 0; }

/* ------------------------------------------------------------- burger */
.burger {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  border: 1px solid rgba(10, 13, 20, .14);
  clip-path: var(--clip-xs);
  transition: background var(--t-fast) var(--ease);
}
.burger:hover { background: rgba(10, 13, 20, .04); }
.burger__box { position: relative; width: 18px; height: 12px; margin: 0 auto; }
.burger__box span {
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  background: var(--ink);
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}
.burger__box span:nth-child(1) { top: 0; }
.burger__box span:nth-child(2) { top: 5px; }
.burger__box span:nth-child(3) { top: 10px; }
.burger[aria-expanded="true"] .burger__box span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__box span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__box span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* -------------------------------------------------------- mobile drawer */
.drawer {
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: var(--z-drawer);
  padding: var(--sp-lg) var(--gutter) var(--sp-3xl);
  background: var(--void);
  color: var(--on-dark);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility var(--t-base);
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }

.drawer__group + .drawer__group { margin-top: var(--sp-xl); padding-top: var(--sp-xl); border-top: 1px solid var(--on-dark-line); }
.drawer__label {
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--copper-hot);
  margin-bottom: var(--sp-sm);
}
.drawer__link {
  display: block;
  padding: var(--sp-sm) 0;
  color: var(--on-dark);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--on-dark-line);
}
.drawer__link:active { color: var(--copper-hot); }
.drawer__actions { margin-top: var(--sp-2xl); display: grid; gap: var(--sp-sm); }

body.is-locked { overflow: hidden; }

/* ----------------------------------------------------------- breakpoints */
@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: block; }
  .site-header__actions .btn--quote { display: none; }
}
@media (max-width: 560px) {
  .site-header__bar { gap: var(--sp-sm); }
  .logo__file { height: 24px; }
}

/* ----------------------------------------------------------------- footer */
.site-footer {
  background: var(--void);
  color: var(--on-dark-mute);
  padding-block: var(--sp-3xl) var(--sp-xl);
  font-size: var(--fs-sm);
}
.site-footer a { color: var(--on-dark-mute); text-decoration: none; transition: color var(--t-fast) var(--ease); }
.site-footer a:hover { color: var(--copper-hot); }
.site-footer .logo { color: #fff; }

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--sp-2xl);
}
.footer__title {
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--sp-md);
}
.footer__list li + li { margin-top: var(--sp-xs); }
.footer__about { max-width: 38ch; line-height: var(--lh-body); }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-2xl);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--on-dark-line);
  font-size: var(--fs-xs);
}
.footer__badges { display: flex; flex-wrap: wrap; gap: var(--sp-xs); }

@media (max-width: 900px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-xl); }
  .footer__bar { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------- back-to-top */
.to-top {
  position: fixed;
  right: var(--sp-lg);
  bottom: var(--sp-lg);
  z-index: var(--z-nav);
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  border: 0;
  clip-path: var(--clip-xs);
  box-shadow: var(--sh-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility var(--t-base), background var(--t-fast) var(--ease);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--copper); }
@media print { .to-top { display: none; } }

/* ==========================================================================
   LIGHT SECTIONS ON INNER PAGES
   ==========================================================================
   The front page alternates grounds ? .caps and .pf are --base, .process is
   --surface, .work is --void, .cta is copper. The inner pages were built on the
   case-study chrome, which is --void end to end, so About / FAQ / Testimonials /
   Quote / Services read as one long black column.

   `.sect-light` is the shared light ground. Page-specific components (review
   cards, <details> rows, service cards, form inputs) are handled by each page's
   own stylesheet under `.sect-light`.

   NOTE the colour swap: --copper-hot is for DARK grounds only. On --base the
   accent is --copper, or the contrast fails.
   ========================================================================== */
.sect-light {
  background: var(--base);
  color: var(--ink);
}
.sect-light h2,
.sect-light h3,
.sect-light .case__h2 { color: var(--ink); }

/* Muted body copy: --on-dark-mute disappears on a light ground. */
.sect-light .case__beat__text,
.sect-light .prose,
.sect-light .pf-lede,
.sect-light p { color: var(--ink-light); }
.sect-light .prose strong,
.sect-light strong { color: var(--ink); }

/* Accent + label colour flips to the light-ground copper. */
.sect-light .eyebrow,
.sect-light .case__beat__label,
.sect-light .case__nav-title { color: var(--copper); }
.sect-light .case__beat__label::after,
.sect-light .case__nav-title::before,
.sect-light .case__nav-title::after { background: var(--line); }

/* Rules and borders. */
.sect-light .case__block + .case__block { border-color: transparent; }
.sect-light .case__panel {
  background: var(--surface);
  border-color: var(--line);
}
.sect-light .case__panel .spec th { color: var(--ink); }
.sect-light .case__panel .spec td { color: var(--ink-light); }
.sect-light .case__panel .spec tr { border-bottom-color: var(--line); }

/* The outline button is drawn with white ink for a dark ground. */
.sect-light .btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: rgba(10, 13, 20, .22);
}
.sect-light .btn--outline-light:hover {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  --btn-bd: var(--ink);
}

/* Chips. */
.sect-light .chip { color: var(--ink-light); border-color: var(--line); background: var(--surface); }
.sect-light .chip--copper { background: var(--copper); border-color: var(--copper); color: #fff; }

/* Breadcrumbs. */
.sect-light .crumbs a { color: var(--ink-light); }
.sect-light .crumbs a:hover { color: var(--ink); }
.sect-light .crumbs__sep,
.sect-light .crumbs [aria-current] { color: var(--support); }

/* Generic raised card, for pages that opt in with `.card`. */
.sect-light .card {
  background: var(--surface);
  border: 1px solid var(--line);
  clip-path: var(--clip-sm);
}

/* A copper band closes a light section, matching the front page's .cta. */
.sect-copper {
  background: var(--copper);
  color: #fff;
}
.sect-copper h2,
.sect-copper h3,
.sect-copper .case__h2,
.sect-copper p,
.sect-copper .prose { color: #fff; }
.sect-copper .eyebrow { color: rgba(255, 255, 255, .82); }
.sect-copper .btn {
  --btn-bg: #fff;
  --btn-fg: var(--ink);
  --btn-bd: #fff;
}
.sect-copper .btn:hover { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }

/* -------------------------------------------------------------------------
   MOBILE FOOTER BOTTOM SPACE
   The design reserved 120px of footer padding for a fixed bottom bar that
   the WordPress build does not ship, so the footer ended in a tall empty
   band under the copyright line. chrome-design.css is generated and cannot
   be hand-edited, so the override lives here - but it needs a more specific
   selector than the .footer rule it is correcting, because chrome.css loads
   BEFORE chrome-design.css in the cascade.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .footer.footer {
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   MOBILE HEADER + FULL-SCREEN MENU

   The design collapses the nav to a full-bleed white band on a phone and
   drops the close button into the top corner of the overlay, so the X never
   lined up with the hamburger that opened it. It also left the hamburger as a
   bare glyph with no affordance.

   1. The bar becomes a floating chamfered panel, inset from the edges, so
      it matches the desktop pill instead of running edge to edge.
   2. The hamburger becomes a chamfered ink button that turns copper on hover.
   3. The overlay grows its own brand mark and a close button placed at the
      EXACT coordinates of the hamburger, so the control appears to stay put
      and simply change glyph. A footer CTA and the contact address anchor
      the bottom of the panel.

   chrome-design.css owns the design's rules and loads AFTER this file, so
   every override here carries extra specificity to win the cascade.
   ========================================================================== */

@media (max-width: 900px) {

  /* --- floating bar instead of a full-bleed band --- */
  .site-header .nav-bar {
    top: 8px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    height: 56px;
    padding: 0 8px 0 14px;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border: 0;
    border-radius: 0;
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    box-shadow: 0 12px 30px -18px rgba(10, 13, 20, .45);
  }

  /* The design paints the bar's surface on ::before as well; on mobile that
     would double the panel and its own chamfer. */
  .site-header .nav-bar::before {
    display: none;
  }

  .site-header .nav-logo-img {
    height: 24px;
  }

  /* --- hamburger as a real button --- */
  .site-header .menu-toggle {
    width: 40px;
    height: 40px;
    background: var(--ink);
    color: #fff;
    border: 0;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: background .25s var(--ease), color .25s var(--ease);
  }
  .site-header .menu-toggle:hover,
  .site-header .menu-toggle:focus-visible {
    background: var(--copper);
    color: #fff;
  }
  .site-header .menu-toggle i {
    font-size: 1.15rem;
    line-height: 1;
  }
}

/* --- the overlay itself --- */
body .menu-overlay {
  padding: 0;
  background: var(--base);
  gap: 0;
}

body .menu-overlay__brand {
  position: absolute;
  top: 24px;
  left: 26px;
  z-index: 2;
  display: flex;
  align-items: center;
}
body .menu-overlay__brand img {
  display: block;
  height: 24px;
  width: auto;
}

/* The close button sits exactly where the hamburger was: the bar starts at
   8px and is 56px tall, so a 40px control centres at 36px from the top, and
   the bar is inset 12px from the right edge. */
body .menu-overlay .close-btn {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: #fff;
  border: 0;
  font-size: 1.15rem;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background .25s var(--ease), color .25s var(--ease);
}
body .menu-overlay .close-btn:hover,
body .menu-overlay .close-btn:focus-visible {
  background: var(--copper);
  color: #fff;
}

body .menu-overlay nav {
  width: 100%;
  margin: 0;
  padding: calc(92px + env(safe-area-inset-top)) var(--gutter) 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

body .menu-overlay nav a {
  font-size: clamp(28px, 8.4vw, 42px);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: color .2s var(--ease), padding-left .28s var(--ease);
}
body .menu-overlay nav a:hover,
body .menu-overlay nav a:focus-visible {
  color: var(--copper);
  padding-left: 10px;
}

body .menu-overlay__foot {
  margin-top: auto;
  padding: 28px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
body .menu-overlay__foot .btn {
  width: 100%;
  max-width: 320px;
  justify-content: center;
}
body .menu-overlay__mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .9375rem;
  color: var(--ink-light);
  text-decoration: none;
}
body .menu-overlay__mail i {
  color: var(--copper);
}