/* Precision Wire Electric — layout and components.
   Each top-level section here corresponds to one future
   WordPress block pattern. Keep the boundaries clean.

   Section order follows "Suggested Page Order" (p.7 of the
   Website Copy deck). The numbers below are the deck's, so they
   stay usable as a citation; 4 (Why We're Different),
   5 (Who We Work With), 7 (Our Process) and 10 (Service Area)
   were cut at the client's request.
     .pwe-header        -> template part: header
     .pwe-hero          -> pattern: hero-estimate          (1)
     .pwe-proofbar      -> pattern: service-strip
     .pwe-services      -> CPT: service                    (2)
     .pwe-stakes        -> pattern: why-it-matters         (3)
     .pwe-gallery       -> CPT: project                    (6)
     .pwe-about         -> pattern: about                  (8)
     .pwe-testimonials  -> CPT: testimonial                (9)
     .pwe-faq           -> CPT: faq                        (11)
     .pwe-estimate      -> form block                      (12)
     .pwe-finalcta      -> pattern: final-cta              (13)
     .pwe-footer        -> template part: footer
*/

@import url("tokens.css");

/* ------------------------------------------------------------
   Inter — self-hosted variable font (SIL Open Font License).
   One file covers 100–900, so weight 400/600/700/800 all resolve
   from a single request. unicode-range keeps latin-ext dormant
   unless the page actually contains those characters, so English
   pages only ever download the 48KB latin file.
   ------------------------------------------------------------ */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   1. Reset / base
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  /* keep anchored sections clear of the sticky header */
  scroll-padding-top: calc(var(--pwe-header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--pwe-font-sans);
  font-size: var(--pwe-step-0);
  line-height: 1.65;
  color: var(--pwe-ink);
  background: var(--pwe-surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--pwe-font-display);
  font-weight: var(--pwe-weight-display);
  letter-spacing: var(--pwe-track-display);
  line-height: 1.12;
  margin: 0 0 var(--pwe-space-sm);
  text-wrap: balance;
}

p { margin: 0 0 var(--pwe-space-sm); }
p:last-child { margin-bottom: 0; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

ul, ol { margin: 0 0 var(--pwe-space-sm); padding-left: 1.25rem; }
ul:last-child, ol:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 3px solid var(--pwe-brand);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.pwe-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--pwe-brand);
  color: var(--pwe-on-dark);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
}
.pwe-skip:focus { left: 0; }

.pwe-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================================================
   2. Layout primitives
   ============================================================ */

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

.pwe-section { padding-block: var(--pwe-section-y); }
.pwe-section--alt { background: var(--pwe-surface-alt); }
.pwe-section--dark {
  background: var(--pwe-ink);
  color: var(--pwe-on-dark);
}
.pwe-section--dark p { color: var(--pwe-on-dark-muted); }
.pwe-section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

/* Section heading group — the theme's eyebrow + display heading */
.pwe-head { margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.pwe-head--center { text-align: center; }
.pwe-head--center .pwe-eyebrow { justify-content: center; }
.pwe-head--center .pwe-head__lede { margin-inline: auto; }

.pwe-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  font-size: var(--pwe-step--2);
  font-weight: 700;
  letter-spacing: var(--pwe-track-eyebrow);
  text-transform: uppercase;
  color: var(--pwe-brand-ctx);
}
.pwe-eyebrow svg { width: 15px; height: 15px; flex: none; }
.pwe-section--dark .pwe-eyebrow { color: var(--pwe-brand-ctx); }
.pwe-band .pwe-eyebrow { color: rgb(255 255 255 / 0.9); }

.pwe-head__title { font-size: var(--pwe-step-3); margin-bottom: 0; }
.pwe-head__lede {
  max-width: 62ch;
  margin-top: 1rem;
  color: var(--pwe-ink-muted);
  font-size: var(--pwe-step-0);
}
.pwe-section--dark .pwe-head__lede { color: var(--pwe-on-dark-muted); }

/* ============================================================
   3. Buttons
   ============================================================ */

.pwe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.65rem;
  border: 2px solid transparent;
  border-radius: var(--pwe-radius);
  font: inherit;
  font-size: var(--pwe-step--1);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--pwe-dur) var(--pwe-ease),
              color var(--pwe-dur) var(--pwe-ease),
              border-color var(--pwe-dur) var(--pwe-ease),
              transform var(--pwe-dur) var(--pwe-ease);
}
.pwe-btn:hover { transform: translateY(-2px); }
.pwe-btn svg { width: 16px; height: 16px; flex: none; }

.pwe-btn--primary {
  background: var(--pwe-brand-ctx);
  border-color: var(--pwe-brand-ctx);
  color: var(--pwe-on-brand-ctx);
}
.pwe-btn--primary:hover {
  background: var(--pwe-brand-ctx-hover);
  border-color: var(--pwe-brand-ctx-hover);
}

.pwe-btn--dark {
  background: var(--pwe-ink);
  border-color: var(--pwe-ink);
  color: var(--pwe-on-dark);
}
.pwe-btn--dark:hover { background: #000; border-color: #000; }

.pwe-btn--ghost {
  background: transparent;
  border-color: currentColor;
  color: var(--pwe-ink);
}
.pwe-btn--ghost:hover {
  background: var(--pwe-ink);
  border-color: var(--pwe-ink);
  color: var(--pwe-on-dark);
}

.pwe-btn--on-dark {
  background: transparent;
  border-color: rgb(255 255 255 / 0.45);
  color: var(--pwe-on-dark);
}
.pwe-btn--on-dark:hover {
  background: var(--pwe-on-dark);
  border-color: var(--pwe-on-dark);
  color: var(--pwe-ink);
}

.pwe-btn--on-brand {
  background: var(--pwe-surface);
  border-color: var(--pwe-surface);
  color: var(--pwe-brand);
}
.pwe-btn--on-brand:hover { background: var(--pwe-ink); border-color: var(--pwe-ink); color: var(--pwe-on-dark); }

.pwe-btn--lg { padding: 1.1rem 2rem; font-size: var(--pwe-step-0); }
.pwe-btn--block { width: 100%; }

.pwe-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* A value the client still owes us. Deliberately visible on the
   draft so nothing ships blank by accident. See index.html head. */
.pwe-tk {
  display: inline-block;
  padding: 0 0.35em;
  border-radius: 2px;
  background: var(--pwe-brand-subtle);
  color: var(--pwe-brand-ink);
  font-weight: 700;
  font-size: 0.92em;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.pwe-section--dark .pwe-tk,
.pwe-footer .pwe-tk,
.pwe-topbar .pwe-tk {
  background: rgb(255 255 255 / 0.14);
  color: var(--pwe-brand-on-dark);
}
.pwe-band .pwe-tk { background: rgb(255 255 255 / 0.22); color: #fff; }

/* ============================================================
   4. Header  -> template part: header
   Topbar + sticky nav. The estimate button stays in the header
   on every breakpoint (copy deck, Global Header).
   ============================================================ */

.pwe-topbar {
  background: var(--pwe-ink);
  color: var(--pwe-on-dark-muted);
  font-size: var(--pwe-step--2);
  border-bottom: 1px solid var(--pwe-ink-3);
}
.pwe-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pwe-space-sm);
  min-height: 40px;
  padding-block: 0.4rem;
}
.pwe-topbar__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pwe-topbar__list li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.pwe-topbar__list svg { width: 13px; height: 13px; color: var(--pwe-brand); flex: none; }
.pwe-topbar a { text-decoration: none; }
.pwe-topbar a:hover { color: var(--pwe-on-dark); }

@media (max-width: 860px) {
  .pwe-topbar__inner { justify-content: center; }
  .pwe-topbar__list--right { display: none; }
}

.pwe-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--pwe-surface);
  border-bottom: 1px solid var(--pwe-line);
  transition: box-shadow var(--pwe-dur) var(--pwe-ease);
}
.pwe-header[data-stuck="true"] { box-shadow: var(--pwe-shadow-md); }

.pwe-header__inner {
  display: flex;
  align-items: center;
  gap: var(--pwe-space-sm);
  min-height: var(--pwe-header-h);
}

.pwe-logo {
  flex: none;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.pwe-logo img { width: 175px; height: auto; }

.pwe-nav { margin-left: auto; }
.pwe-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 0.2rem + 1.2vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pwe-nav__list a {
  display: block;
  padding: 0.4rem 0;
  font-size: var(--pwe-step--1);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--pwe-ink);
  border-bottom: 2px solid transparent;
  transition: color var(--pwe-dur) var(--pwe-ease),
              border-color var(--pwe-dur) var(--pwe-ease);
}
.pwe-nav__list a:hover,
.pwe-nav__list a[aria-current="true"] {
  color: var(--pwe-brand);
  border-bottom-color: var(--pwe-brand);
}

.pwe-header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: none;
}

.pwe-burger {
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  border: 1px solid var(--pwe-line-strong);
  border-radius: var(--pwe-radius);
  background: var(--pwe-surface);
  color: var(--pwe-ink);
  cursor: pointer;
}
.pwe-burger svg { width: 22px; height: 22px; margin-inline: auto; }
.pwe-burger__close { display: none; }
.pwe-burger[aria-expanded="true"] .pwe-burger__open { display: none; }
.pwe-burger[aria-expanded="true"] .pwe-burger__close { display: block; }

@media (max-width: 960px) {
  .pwe-burger { display: block; }
  .pwe-nav {
    position: fixed;
    inset: calc(var(--pwe-header-h) + var(--pwe-topbar-h, 0px)) 0 auto 0;
    margin: 0;
    background: var(--pwe-surface);
    border-bottom: 1px solid var(--pwe-line);
    box-shadow: var(--pwe-shadow-lg);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height var(--pwe-dur) var(--pwe-ease),
                visibility var(--pwe-dur) var(--pwe-ease);
  }
  .pwe-nav[data-open="true"] {
    max-height: min(70vh, 34rem);
    overflow-y: auto;
    visibility: visible;
  }
  .pwe-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--pwe-space-xs) var(--pwe-gutter) var(--pwe-space-sm);
  }
  .pwe-nav__list li + li { border-top: 1px solid var(--pwe-line); }
  .pwe-nav__list a { padding: 0.95rem 0; border-bottom: 0; }
  .pwe-nav__list a:hover,
  .pwe-nav__list a[aria-current="true"] { border-bottom-color: transparent; }
}

/* The estimate button stays in the header at every width (copy deck,
   Global Header) — so at phone widths everything else gives way to it:
   the logo shrinks, the gaps tighten, and the button drops its
   "Request an" prefix. */
.pwe-btn__prefix { display: inline; }

@media (max-width: 560px) {
  .pwe-header__inner { gap: 0.5rem; }
  .pwe-header__actions { gap: 0.4rem; }
  .pwe-logo img { width: 118px; }

  .pwe-btn__prefix { display: none; }
  .pwe-header__actions .pwe-btn {
    padding: 0.75rem 0.85rem;
    font-size: var(--pwe-step--2);
    letter-spacing: 0.02em;
  }

  .pwe-burger { width: 40px; height: 40px; }
}

@media (max-width: 360px) {
  .pwe-logo img { width: 104px; }
}

/* ============================================================
   5. Hero  -> pattern: hero-full-bleed                  (1)
   Full-bleed photograph, centred copy. A two-stop scrim keeps
   every string over AA regardless of what sits behind it —
   the house and the van are both light at the CTA height.
   ============================================================ */

.pwe-hero {
  position: relative;
  isolation: isolate;
  background: var(--pwe-navy-900);
  color: var(--pwe-on-dark);
  overflow: hidden;
}
.pwe-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.pwe-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}
/* Top scrim carries the headline; bottom scrim carries the CTA. */
.pwe-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* Mobile first: the copy spans almost the whole hero at 375px, so the
       photograph carries atmosphere rather than detail. Desktop below
       lifts the scrim once the text occupies less of the frame. */
    linear-gradient(to bottom,
      var(--pwe-navy-900) 0%,
      rgb(11 26 46 / 0.94) 15%,
      rgb(11 26 46 / 0.86) 55%,
      rgb(11 26 46 / 0.74) 80%,
      rgb(11 26 46 / 0.80) 100%);
}

.pwe-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: clamp(34rem, 26rem + 22vw, 48rem);
  padding-block: clamp(3.5rem, 2rem + 6vw, 6rem);
}

.pwe-hero__title {
  font-size: var(--pwe-step-4);
  max-width: 20ch;
  margin-bottom: var(--pwe-space-sm);
}
.pwe-hero__lede {
  max-width: 58ch;
  font-size: var(--pwe-step-1);
  line-height: 1.5;
  color: var(--pwe-on-dark);
  margin-bottom: 0;
}

/* CTA sits lower so the van and house read behind the headline. */
.pwe-hero__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  margin-top: auto;
  padding-top: clamp(2.5rem, 1.5rem + 6vw, 6rem);
}
.pwe-hero__cta-label {
  font-family: var(--pwe-font-display);
  font-weight: 800;
  font-size: var(--pwe-step-1);
  letter-spacing: var(--pwe-track-display);
  color: var(--pwe-on-dark);
}

@media (max-width: 720px) {
  .pwe-hero__media img { object-position: center 70%; }
  .pwe-hero__cta { padding-top: clamp(2rem, 1rem + 8vw, 3.5rem); }
}

@media (min-width: 721px) {
  .pwe-hero::after {
    background:
      linear-gradient(to bottom,
        var(--pwe-navy-900) 0%,
        rgb(11 26 46 / 0.95) 20%,
        rgb(11 26 46 / 0.86) 44%,
        rgb(11 26 46 / 0.42) 64%,
        rgb(11 26 46 / 0.70) 100%);
  }
}

/* ============================================================
   6. Service strip  -> pattern: service-strip
   Overlaps the hero, as in the reference theme. Carries the same
   six service lines as #services — keep the two in step.
   ============================================================ */

.pwe-proofbar {
  position: relative;
  z-index: 2;
  margin-top: clamp(-4.5rem, -3rem - 3vw, -3rem);
}
.pwe-proofbar__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  background: var(--pwe-line);
  border: 1px solid var(--pwe-line);
  border-radius: var(--pwe-radius-lg);
  overflow: hidden;
  box-shadow: var(--pwe-shadow-md);
}
.pwe-proofbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.6rem 1rem;
  background: var(--pwe-surface);
  text-align: center;
  transition: background var(--pwe-dur) var(--pwe-ease);
}
.pwe-proofbar__item:hover { background: var(--pwe-brand-subtle); }
.pwe-proofbar__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--pwe-brand-subtle);
  color: var(--pwe-brand);
}
.pwe-proofbar__icon svg { width: 21px; height: 21px; }
.pwe-proofbar__label {
  font-family: var(--pwe-font-display);
  font-weight: 800;
  font-size: var(--pwe-step--1);
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
}

/* ============================================================
   7. What We Do  -> CPT: service                        (2)
   Six service lines. Each card is one future `service` post.
   ============================================================ */

.pwe-services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
}

.pwe-service {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  background: var(--pwe-surface);
  border: 1px solid var(--pwe-line);
  border-radius: var(--pwe-radius-lg);
  transition: transform var(--pwe-dur) var(--pwe-ease),
              box-shadow var(--pwe-dur) var(--pwe-ease),
              border-color var(--pwe-dur) var(--pwe-ease);
}
/* Red corner wedge, top-right — theme signature */
.pwe-service::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  z-index: -1;
  width: 74px; aspect-ratio: 1;
  background: var(--pwe-brand);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  opacity: 0.1;
  transition: opacity var(--pwe-dur) var(--pwe-ease),
              width var(--pwe-dur) var(--pwe-ease);
}
.pwe-service:hover {
  transform: translateY(-4px);
  box-shadow: var(--pwe-shadow-md);
  border-color: transparent;
}
.pwe-service:hover::before { opacity: 1; width: 92px; }

.pwe-service__icon {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: var(--pwe-brand-subtle);
  color: var(--pwe-brand);
  transition: background var(--pwe-dur) var(--pwe-ease),
              color var(--pwe-dur) var(--pwe-ease);
}
.pwe-service__icon svg { width: 27px; height: 27px; }
.pwe-service:hover .pwe-service__icon {
  background: var(--pwe-brand);
  color: var(--pwe-on-dark);
}

.pwe-service__title {
  font-size: var(--pwe-step-1);
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 0.6rem;
}
.pwe-service__body {
  color: var(--pwe-ink-muted);
  font-size: var(--pwe-step--1);
  line-height: 1.6;
}

.pwe-services__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  margin-top: clamp(2rem, 1.25rem + 2vw, 3.25rem);
}
.pwe-services__cta-label {
  font-family: var(--pwe-font-display);
  font-weight: 800;
  font-size: var(--pwe-step-1);
  letter-spacing: var(--pwe-track-display);
  color: var(--pwe-ink);
}

/* ---- Process strip: how we work -------------------------- */
.pwe-process {
  border-top: 1px solid var(--pwe-line);
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  padding-top: clamp(2rem, 1.25rem + 2vw, 3rem);
}
.pwe-process__eyebrow {
  display: block;
  text-align: center;
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
  font-size: var(--pwe-step--2);
  font-weight: 700;
  letter-spacing: var(--pwe-track-eyebrow);
  text-transform: uppercase;
  color: var(--pwe-brand);
}
.pwe-process__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pwe-step;
}
.pwe-process__item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.pwe-process__num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--pwe-brand);
  color: var(--pwe-on-dark);
  font-family: var(--pwe-font-display);
  font-weight: 800;
  font-size: var(--pwe-step--1);
}
.pwe-process__label {
  font-family: var(--pwe-font-display);
  font-weight: 800;
  font-size: var(--pwe-step--1);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--pwe-ink);
}

/* ---- Promise / warranty ---------------------------------- */
.pwe-promise {
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
  padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  border-top: 1px solid var(--pwe-ink-3);
  text-align: center;
}
.pwe-promise__title {
  font-size: var(--pwe-step-2);
  color: var(--pwe-on-dark);
  margin-bottom: var(--pwe-space-sm);
}
.pwe-promise__body {
  max-width: 68ch;
  margin-inline: auto;
  font-size: var(--pwe-step-0);
  color: var(--pwe-on-dark);
}
.pwe-promise__body strong { color: var(--pwe-brand-on-dark); }
.pwe-promise__note {
  margin-top: var(--pwe-space-sm);
  font-size: var(--pwe-step--2);
  color: var(--pwe-on-dark-muted);
}

/* ============================================================
   8. Why It Matters  -> pattern: why-it-matters         (3)
   The stakes. Sits directly under What We Do, per the deck.
   ============================================================ */

.pwe-stakes__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.pwe-stakes__title { font-size: var(--pwe-step-3); text-transform: uppercase; }
.pwe-stakes__lede { font-size: var(--pwe-step-0); }

.pwe-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.9rem;
}
.pwe-checklist li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  line-height: 1.55;
}
.pwe-checklist svg {
  width: 26px; height: 26px;
  padding: 5px;
  border-radius: 50%;
  background: var(--pwe-brand);
  color: var(--pwe-on-dark);
  flex: none;
  margin-top: 0.15rem;
}
.pwe-checklist--boxed {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--pwe-ink-2);
  border-radius: var(--pwe-radius-lg);
  border-left: 4px solid var(--pwe-on-dark);
}
.pwe-checklist__head {
  margin-bottom: 1.25rem;
  font-family: var(--pwe-font-display);
  font-weight: 800;
  font-size: var(--pwe-step--1);
  letter-spacing: var(--pwe-track-eyebrow);
  text-transform: uppercase;
  color: var(--pwe-on-dark-muted);
}
.pwe-section--dark .pwe-checklist li { color: var(--pwe-on-dark-muted); }

/* Detailed variant: every item carries a title and a description, and the
   check is a bare mark rather than the red disc the estimate list uses.
   Scoped to the modifier so .pwe-checklist elsewhere is untouched. */
.pwe-checklist--detailed { gap: 1.55rem; }
.pwe-checklist--detailed li {
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 0.9rem;
}
.pwe-checklist--detailed svg {
  width: 22px;
  height: 22px;
  padding: 0;
  margin-top: 0.05rem;
  border-radius: 0;
  background: none;
  color: var(--pwe-on-dark);
}
.pwe-checklist__title {
  margin: 0 0 0.4rem;
  font-size: var(--pwe-step-0);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--pwe-on-dark);
}
.pwe-checklist__body {
  margin: 0;
  font-size: var(--pwe-step--1);
  line-height: 1.6;
  color: var(--pwe-on-dark-muted);
}

@media (max-width: 860px) {
  .pwe-stakes__inner { grid-template-columns: 1fr; }
}

/* ============================================================
   11. Project Gallery  -> CPT: project                  (6)
   "Prioritize it over written content." Caption format from the
   deck: project type — scope — city.
   ============================================================ */

.pwe-gallery__grid {
  display: grid;
  /* Fixed column counts rather than auto-fit: the feature shot spans
     the full row, so the track count has to be predictable. */
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 0.4rem + 1vw, 1.25rem);
}
@media (min-width: 620px) {
  .pwe-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .pwe-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pwe-shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--pwe-radius-lg);
  background: var(--pwe-ink);
}
.pwe-shot img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 500ms var(--pwe-ease), opacity var(--pwe-dur) var(--pwe-ease);
}
.pwe-shot:hover img { transform: scale(1.06); opacity: 0.75; }
/* Feature shot — spans every column, landscape crop. */
.pwe-shot--feature { grid-column: 1 / -1; }
.pwe-shot--feature img { aspect-ratio: 16 / 9; }
.pwe-shot--feature figcaption { padding: 3rem 1.5rem 1.35rem; }

.pwe-shot figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1.1rem 1.05rem;
  background: linear-gradient(to top, rgb(11 26 46 / 0.94), rgb(11 26 46 / 0));
  color: var(--pwe-on-dark);
  font-size: var(--pwe-step--2);
  line-height: 1.45;
}
.pwe-shot figcaption b {
  display: block;
  font-family: var(--pwe-font-display);
  font-weight: 800;
  font-size: var(--pwe-step--1);
  letter-spacing: -0.01em;
}
.pwe-shot figcaption span { color: var(--pwe-on-dark-muted); }

@media (max-width: 620px) {
  .pwe-shot--feature img { aspect-ratio: 4 / 3; }
}

/* ============================================================
   13. About  -> pattern: about                          (8)
   Follows the proof rather than preceding it, per the deck.
   ============================================================ */

.pwe-about__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.pwe-about__figure {
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: var(--pwe-radius-lg);
  box-shadow: var(--pwe-shadow-md);
}
/* The label bar sits above the map and caps the figure, so the radii
   are split between the two rather than clipped with overflow —
   overflow:hidden here would cut off the offset red frame below. */
.pwe-about__caption {
  padding: 0.7rem 1.1rem;
  background: var(--pwe-surface);
  border-radius: var(--pwe-radius-lg) var(--pwe-radius-lg) 0 0;
  font-family: var(--pwe-font-display);
  font-weight: 800;
  font-size: var(--pwe-step--1);
  letter-spacing: -0.01em;
  color: var(--pwe-ink);
}
.pwe-about__figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0 0 var(--pwe-radius-lg) var(--pwe-radius-lg);
}
.pwe-about__figure::before {
  content: "";
  position: absolute;
  inset: -1.25rem -1.25rem 1.25rem 1.25rem;
  border: 3px solid var(--pwe-brand);
  border-radius: var(--pwe-radius-lg);
  z-index: -1;
}
.pwe-about__pull {
  margin: var(--pwe-space-md) 0 0;
  /* Dark rule, no fill — the quote reads as a lift out of the copy
     rather than as a separate tinted block. */
  padding: 0.35rem 0 0.35rem 1.35rem;
  border-left: 4px solid var(--pwe-ink);
  font-family: var(--pwe-font-display);
  font-weight: 800;
  font-size: var(--pwe-step-1);
  line-height: 1.3;
  letter-spacing: var(--pwe-track-display);
  color: var(--pwe-ink);
}

@media (max-width: 860px) {
  .pwe-about__inner { grid-template-columns: 1fr; }
  .pwe-about__figure { max-width: 26rem; }
  .pwe-about__figure::before { inset: -0.9rem -0.9rem 0.9rem 0.9rem; }
}

/* ============================================================
   14. Testimonials  -> CPT: testimonial                 (9)
   A single client review. The dashed outline is held over from
   the awaiting-content state — the Yelp profile URL is still
   outstanding. Switch to a solid border once it lands.
   ============================================================ */

.pwe-testimonial {
  display: grid;
  gap: 1.35rem;
  justify-items: center;
  text-align: center;
  max-width: 62ch;
  margin: 0 auto;
  padding: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  background: var(--pwe-surface);
  border: 2px dashed var(--pwe-line-strong);
  border-radius: var(--pwe-radius-lg);
}
.pwe-testimonial__quote {
  margin: 0;
  color: var(--pwe-ink-muted);
  line-height: 1.7;
}
.pwe-testimonial__author {
  font-weight: 600;
  color: var(--pwe-ink-muted);
}
.pwe-testimonials__icon {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--pwe-brand-subtle);
  color: var(--pwe-brand);
}
.pwe-testimonials__icon svg { width: 27px; height: 27px; }

/* ============================================================
   16. FAQ  -> CPT: faq                                  (11)
   Native <details> accordion — no JS required for it to work.
   ============================================================ */

.pwe-faq__list {
  max-width: 900px;
  margin-inline: auto;
  display: grid;
  gap: 0.75rem;
}
.pwe-faq__item {
  background: var(--pwe-surface);
  border: 1px solid var(--pwe-line);
  border-radius: var(--pwe-radius-lg);
  overflow: hidden;
  transition: border-color var(--pwe-dur) var(--pwe-ease),
              box-shadow var(--pwe-dur) var(--pwe-ease);
}
.pwe-faq__item[open] {
  border-color: var(--pwe-brand);
  box-shadow: var(--pwe-shadow-sm);
}
.pwe-faq__q {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem clamp(1rem, 0.75rem + 1vw, 1.6rem);
  cursor: pointer;
  list-style: none;
  font-family: var(--pwe-font-display);
  font-weight: 800;
  font-size: var(--pwe-step-0);
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.pwe-faq__q::-webkit-details-marker { display: none; }
.pwe-faq__q:hover { color: var(--pwe-brand); }
.pwe-faq__sign {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: none;
  margin-left: auto;
  border-radius: 50%;
  background: var(--pwe-brand-subtle);
  color: var(--pwe-brand);
  transition: background var(--pwe-dur) var(--pwe-ease),
              color var(--pwe-dur) var(--pwe-ease),
              transform var(--pwe-dur) var(--pwe-ease);
}
.pwe-faq__sign svg { width: 15px; height: 15px; }
.pwe-faq__item[open] .pwe-faq__sign {
  background: var(--pwe-brand);
  color: var(--pwe-on-dark);
  transform: rotate(45deg);
}
.pwe-faq__a {
  padding: 0 clamp(1rem, 0.75rem + 1vw, 1.6rem) 1.35rem;
  color: var(--pwe-ink-muted);
  font-size: var(--pwe-step--1);
  line-height: 1.7;
}
.pwe-faq__a p { max-width: var(--pwe-measure); }

/* ============================================================
   18. Final CTA  -> pattern: final-cta                  (13)
   Full-width red band. Repeats on every page in the WP build.
   ============================================================ */

.pwe-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--pwe-brand);
  color: var(--pwe-on-dark);
}
.pwe-band::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 55%;
  z-index: -1;
  background: var(--pwe-brand-hover);
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  opacity: 0.55;
}
.pwe-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pwe-space-md);
}
.pwe-band__title {
  font-size: var(--pwe-step-2);
  color: var(--pwe-on-dark);
  margin-bottom: 0.6rem;
  max-width: 22ch;
}
.pwe-band__lede { color: rgb(255 255 255 / 0.92); max-width: 46ch; }

.pwe-band__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
.pwe-band__label {
  margin: 0;
  font-family: var(--pwe-font-display);
  font-weight: 800;
  font-size: var(--pwe-step-1);
  letter-spacing: var(--pwe-track-display);
  color: var(--pwe-on-dark);
}
.pwe-band__alt {
  margin: 0;
  font-size: var(--pwe-step--1);
  color: rgb(255 255 255 / 0.92);
}
.pwe-band__alt a { color: var(--pwe-on-dark); text-underline-offset: 3px; }

@media (max-width: 620px) {
  .pwe-band__actions { width: 100%; align-items: stretch; }
  .pwe-band__actions .pwe-btn { width: 100%; }
}
/* flex: 0 0 auto here would size the row to its max-content width and
   stop the buttons wrapping on a phone — let it shrink instead. */
.pwe-band .pwe-btn-row { flex: 0 1 auto; max-width: 100%; }
@media (max-width: 620px) {
  .pwe-band .pwe-btn-row { width: 100%; }
  .pwe-band .pwe-btn-row > * { flex: 1 1 100%; }
}

/* ============================================================
   19. Footer  -> template part: footer
   License number sits here on every page — trust signal,
   costs nothing.
   ============================================================ */

.pwe-footer {
  background: var(--pwe-ink);
  color: var(--pwe-on-dark-muted);
  font-size: var(--pwe-step--1);
}
.pwe-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  padding-block: clamp(3rem, 2rem + 4vw, 4.5rem);
}
.pwe-footer__logo { width: 180px; margin-bottom: 1.25rem; }
/* Logo art is black; invert it for the dark footer */
.pwe-footer__logo img { filter: invert(1) brightness(1.8); }
.pwe-footer h3 {
  font-size: var(--pwe-step--1);
  letter-spacing: var(--pwe-track-eyebrow);
  text-transform: uppercase;
  color: var(--pwe-on-dark);
  margin-bottom: 1.1rem;
}
.pwe-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.pwe-footer a { text-decoration: none; transition: color var(--pwe-dur) var(--pwe-ease); }
.pwe-footer a:hover { color: var(--pwe-brand); }
.pwe-footer__contact li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
}
.pwe-footer__contact svg { width: 16px; height: 16px; color: var(--pwe-brand); margin-top: 0.25rem; }

.pwe-footer__creds {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 1.15rem;
  margin-top: 1.25rem;
  background: var(--pwe-ink-2);
  border-left: 3px solid var(--pwe-brand);
  border-radius: 0 var(--pwe-radius) var(--pwe-radius) 0;
  font-size: var(--pwe-step--2);
}

.pwe-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pwe-space-sm);
  padding-block: 1.35rem;
  border-top: 1px solid var(--pwe-ink-3);
  font-size: var(--pwe-step--2);
}
.pwe-footer__bar p { margin: 0; }
/* The footer strips underlines from nav links, which are obvious from
   context. This credit sits inside a sentence, so it needs one to be
   recognisable as a link at all — not just on hover. */
.pwe-footer__bar a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.pwe-footer__bar a:hover { color: var(--pwe-brand-ctx); }

/* ============================================================
   20. Back to top
   ============================================================ */

.pwe-totop {
  position: fixed;
  right: clamp(0.85rem, 0.5rem + 1vw, 1.75rem);
  bottom: clamp(0.85rem, 0.5rem + 1vw, 1.75rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pwe-brand);
  color: var(--pwe-on-dark);
  box-shadow: var(--pwe-shadow-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--pwe-dur) var(--pwe-ease),
              visibility var(--pwe-dur) var(--pwe-ease),
              transform var(--pwe-dur) var(--pwe-ease),
              background var(--pwe-dur) var(--pwe-ease);
}
.pwe-totop[data-visible="true"] { opacity: 1; visibility: visible; transform: none; }
.pwe-totop:hover { background: var(--pwe-brand-hover); }
.pwe-totop svg { width: 19px; height: 19px; }

/* ============================================================
   21. Scroll-in reveal (progressive enhancement)
   Only applied once JS confirms support; without JS every
   section renders at full opacity.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  /* .pwe-js is set by an inline script in <head>. Without JavaScript
     the class never lands, so every section renders at full opacity
     instead of staying invisible forever. */
  .pwe-js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 500ms var(--pwe-ease), transform 500ms var(--pwe-ease);
  }
  .pwe-js [data-reveal="in"] { opacity: 1; transform: none; }
}

/* ============================================================
   22. Print
   ============================================================ */

@media print {
  .pwe-topbar, .pwe-header, .pwe-totop, .pwe-burger { display: none; }
  .pwe-hero, .pwe-section--dark, .pwe-estimate, .pwe-band, .pwe-footer {
    background: #fff !important;
    color: #000 !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}