/* ============================================================
   PSI Construction — site styles
   Hero section styles integrated unchanged (classes/IDs preserved)
   from the existing scroll-driven hero implementation.
   ============================================================ */

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

:root {
  --ink: #101214;
  --navy: #1d2733;
  --paper: #ffffff;
  --muted: #6b7075;
  --accent: #d60000; /* PSI logo red, sampled from PSI MAIN Logo.png */
  --hairline: rgba(16, 18, 20, 0.14);
  --hero-scroll-length: 320vh;
  --font-sans:
    "Inter", system-ui, -apple-system, "Avenir Next", "Helvetica Neue", Arial,
    sans-serif;
  --font-display: "Archivo", var(--font-sans);
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
}

/* ---------------- Top navigation ---------------- */

.nav {
  /* the site is light now: one bar, always legible. Bold black
     letters on white, red where it counts. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px clamp(24px, 3.4vw, 56px);
  gap: clamp(20px, 3vw, 56px);
  color: var(--ink);
  /* no backdrop-filter here: it would become the containing block
     for the fixed mobile panel and trap it inside the bar */
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 1px 0 var(--hairline);
  transition: box-shadow 240ms ease;
}

.nav--solid {
  background: rgba(255, 255, 255, 0.98);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--hairline);
}

.nav__links a {
  font-weight: 800;
  color: var(--ink);
}

.nav__links a:not(.nav__cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nav__links a:not(.nav__cta):hover::after,
.nav__links a:not(.nav__cta):focus-visible::after {
  transform: scaleX(1);
}

.nav__links a:hover {
  color: var(--accent);
}

.nav__brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
}
.nav__logo {
  display: block;
  /* 25% larger than the original clamp(30px, 3.4vw, 40px). */
  height: clamp(38px, 4.25vw, 50px);
  width: auto;
}
/* White mark over the aerial opening of the hero; full-colour mark from the
   moment the sequence swings round to the front elevation. The swap is driven
   by .nav--darklogo, which hero scrub progress sets partway through the hero
   — not by .nav--solid, so the bar itself stays transparent over the image.
   Both marks are stacked and cross-faded rather than display-swapped, so the
   change reads as a deliberate shift and catches the eye. */
.nav__brand {
  position: relative;
}
/* Left/top only — pinning bottom too would stretch it and override the
   shared height. */
.nav__logo--onsolid {
  position: static;
  opacity: 1;
}
.nav__logo--onhero {
  opacity: 1;
}
.nav__logo {
  transition: opacity 260ms ease;
}
.nav__logo--onhero {
  display: none;
}

.nav__logo--onsolid {
  display: block;
}

/* .nav--solid is listed too so inner pages, which hard-code a solid bar and
   never load main.js, still get the full-colour mark without any script. */
.nav--darklogo .nav__logo--onhero,
.nav--solid .nav__logo--onhero {
  opacity: 0;
}
.nav--darklogo .nav__logo--onsolid,
.nav--solid .nav__logo--onsolid {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .nav__logo {
    transition: none;
  }
}

/* The PSI inside the phone number, wherever it appears — the nav, the contact
   details and the footer. The letters are the point of the number, so they
   carry the logo red. */
.tel-psi {
  color: var(--accent);
  font-weight: 600;
}
/* On the navy footer and over the dark hero, #d60000 sits too close to the
   background to read. Lift it there rather than dimming the letters. */
.footer .tel-psi {
  color: #ff6257;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.9vw, 30px);
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* the phone and the quote button read as one decisive group,
   set apart from the navigation by a hairline */
.nav__end {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
  margin-left: clamp(6px, 1vw, 16px);
  padding-left: clamp(14px, 1.9vw, 26px);
  border-left: 1px solid var(--hairline);
}
.nav__links a {
  position: relative;
  color: inherit;
  text-decoration: none;
  font-size: clamp(12.5px, 1vw, 14px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.9;
}
.nav__links a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* the bar's quote button follows the same rule as every other
   button on the site: a red pill, white letters */
.nav__cta,
.nav--solid .nav__cta {
  border: 0;
  padding: 11px 22px !important;
  border-radius: 999px;
  background: var(--accent);
  color: #fff !important;
  letter-spacing: 0.08em;
  transition: background 0.2s ease;
}

.nav__cta:hover,
.nav--solid .nav__cta:hover {
  background: #b30000;
  color: #fff !important;
}

/* it is a button, so it takes no link underline */
.nav__links a.nav__cta::after {
  display: none;
}

/* ---------------- Hero (existing implementation) ---------------- */

.hero {
  height: var(--hero-scroll-length);
  position: relative;
}

.hero__viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #0e0f10;
}

.hero__poster,
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__poster {
  object-fit: cover;
  object-position: 50% 42%;
}

.hero__canvas {
  opacity: 0;
  transition: opacity 260ms ease;
}
.hero--canvas-live .hero__canvas {
  opacity: 1;
}
.hero--canvas-live .hero__poster {
  visibility: hidden;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: clamp(24px, 5vw, 72px);
  background: linear-gradient(
    to top,
    rgba(8, 9, 10, 0.42) 0%,
    rgba(8, 9, 10, 0) 34%
  );
  color: #fff;
  pointer-events: none;
  opacity: calc(1 - var(--hero-progress, 0) * 2.6);
}

.hero__eyebrow {
  margin: 0 0 10px;
  font-size: clamp(13px, 1vw, 14px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.82;
}

.hero__title {
  margin: 0;
  font-size: clamp(30px, 4.6vw, 64px);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 14em;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}

.hero__tagline {
  margin: 14px 0 0;
  font-weight: 600;
  font-size: clamp(15px, 1.4vw, 20px);
  opacity: 0.9;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.4);
}

.hero__scrollcue {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(20px, 3vh, 36px);
}

.hero__scrollcue-label {
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.75;
}

.hero__scrollcue-line {
  display: block;
  width: 1px;
  height: 44px;
  background: rgba(255, 255, 255, 0.75);
  transform-origin: top;
  animation: cue 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes cue {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  35% {
    transform: scaleY(1);
    opacity: 0.9;
  }
  70% {
    transform: scaleY(1);
    opacity: 0;
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}

.hero__loader {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.14);
  opacity: 1;
  transition: opacity 420ms ease 180ms;
}

.hero__loader-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: rgba(255, 255, 255, 0.85);
  transition: width 200ms linear;
}

.hero--loaded .hero__loader {
  opacity: 0;
}

/* ---------------- Shared section chrome ---------------- */

.section {
  padding: clamp(64px, 10vh, 120px) clamp(20px, 6vw, 96px);
}
.section--white {
  background: #fff;
}
.section--navy {
  background: var(--navy);
  color: #fff;
}
.section__inner {
  max-width: 1180px;
  margin: 0 auto;
}
.section__inner--narrow {
  max-width: 880px;
}

.eyebrow {
  /* the confident stamp, not the airy template whisper */
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.section--navy .eyebrow {
  color: rgba(255, 255, 255, 0.6);
}
.eyebrow--accent {
  color: var(--accent);
}

.section__title,
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
}

.section__title {
  margin: 0 0 22px;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.lede {
  margin: 0 0 20px;
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 500;
  line-height: 1.6;
  color: #3c4148;
}
.section--navy .lede {
  color: rgba(255, 255, 255, 0.8);
}

.body-copy {
  font-size: clamp(15.5px, 1.25vw, 18px);
  line-height: 1.65;
  color: #33383d;
  max-width: 46em;
}
.body-copy p {
  margin: 0 0 16px;
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
  margin: 40px 0 0;
  border-top: 1px solid var(--hairline);
}
.facts > div {
  padding: 18px 18px 18px 0;
  border-bottom: 1px solid var(--hairline);
}
.facts dt {
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.facts dd {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
.facts dd a {
  color: inherit;
  text-decoration: none;
}
.facts dd a:hover {
  color: var(--accent);
}

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

/* ---------------- Projects: map + list + carousel ---------------- */

.projects__layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 24px;
  margin-top: 36px;
}
@media (max-width: 900px) {
  .projects__layout {
    grid-template-columns: 1fr;
  }
}

#projectMap {
  height: clamp(380px, 56vh, 560px);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: #e8e6e1;
  z-index: 1;
}

/* One photograph at a time, beside the map and the same height as it.
   Cropped to fill the frame, so a landscape shot gives up a little from
   each side rather than shrinking away from the map's height. */
.shots-wrap {
  position: relative;
}
.shots::-webkit-scrollbar {
  display: none;
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pin {
  width: 16px;
  height: 16px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--navy);
  border: 2px solid #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
/* The job whose photograph is on screen: bigger, lit, and it stays that
   way so it reads as "this one — click me". */
.pin--active {
  background: var(--accent);
  transform: rotate(-45deg) scale(1.75);
  box-shadow:
    0 0 0 4px rgba(214, 0, 0, 0.3),
    0 0 16px 5px rgba(214, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.45);
  border-color: #fff;
  z-index: 400;
  animation: pinGlow 1.9s ease-in-out infinite;
}
@keyframes pinGlow {
  0%,
  100% {
    box-shadow:
      0 0 0 4px rgba(214, 0, 0, 0.3),
      0 0 14px 4px rgba(214, 0, 0, 0.45),
      0 2px 8px rgba(0, 0, 0, 0.45);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(214, 0, 0, 0.2),
      0 0 22px 8px rgba(214, 0, 0, 0.7),
      0 2px 8px rgba(0, 0, 0, 0.45);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pin--active {
    animation: none;
  }
}
.pin--office {
  background: var(--accent);
  border-radius: 50%;
  transform: none;
}

/* Case-study pins: projects with a photo gallery behind them. Visually
   distinct so it is obvious which dots on the map are clickable. */
.pin--case {
  background: var(--accent);
  box-shadow:
    0 1px 6px rgba(0, 0, 0, 0.4),
    0 0 0 3px rgba(214, 0, 0, 0.28);
}
.pin--case.pin--active {
  box-shadow:
    0 1px 8px rgba(0, 0, 0, 0.5),
    0 0 0 6px rgba(214, 0, 0, 0.22);
}

/* Button inside a map popup that jumps the carousel to that job */
.case__open {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 14px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 2px;
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Carousel */

.carousel {
  margin-top: 24px;
  position: relative;
}
.carousel__track-wrap {
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: #fff;
}
.carousel__track {
  display: flex;
}
/* ---- strip along the bottom ----
   Every photo the same HEIGHT; width follows its own shape, so a landscape
   shot runs about twice as wide as a portrait one. Scrolls sideways. */

/* ---- full-screen viewer ---- */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  background: #0b0c0e;
}
.viewer.is-open {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
body.viewer-lock {
  overflow: hidden;
}

.viewer__head {
  padding: clamp(16px, 3vh, 30px) clamp(20px, 5vw, 64px) 10px;
  color: #fff;
  max-width: 900px;
}
.viewer__eyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
}
.viewer__title {
  margin: 0 0 6px;
  font-size: clamp(18px, 2.4vw, 26px);
  line-height: 1.2;
}
.viewer__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.viewer__rail {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 clamp(20px, 5vw, 64px) 26px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.viewer__rail::-webkit-scrollbar {
  display: none;
}
.viewer__fig {
  flex: 0 0 auto;
  margin: 0;
  scroll-snap-align: start;
}
.viewer__imgwrap {
  position: relative;
  display: block;
}
/* Uniform height: two portrait shots sit side by side, one landscape fills. */
/* Height is the constant. A landscape shot simply runs wider — never
   capped, or its height would drop below the portrait ones. */
.viewer__fig img {
  display: block;
  height: min(72vh, 900px);
  width: auto;
  max-width: none;
}
.viewer__phase {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(29, 39, 51, 0.92);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 2px;
  color: #fff;
}
.viewer__phase--before {
  background: rgba(29, 39, 51, 0.92);
}
.viewer__phase--after {
  background: var(--accent);
}
.viewer__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 54px 16px 14px;
  background: linear-gradient(
    to top,
    rgba(8, 9, 10, 0.9) 0%,
    rgba(8, 9, 10, 0.6) 55%,
    rgba(8, 9, 10, 0) 100%
  );
  color: #fff;
  font-size: 15px;
  line-height: 1.45;
}

.viewer__close {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.viewer__close:hover {
  background: var(--accent);
  border-color: var(--accent);
}
.viewer__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
.viewer__arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
}
.viewer__arrow--prev {
  left: 14px;
}
.viewer__arrow--next {
  right: 14px;
}

@media (max-width: 860px) {
  .viewer__fig img {
    height: min(62vh, 620px);
  }
  .viewer__arrow {
    width: 40px;
    height: 40px;
  }
}

.carousel__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  gap: 14px;
}
.carousel__btns {
  display: flex;
  gap: 8px;
}
.carousel__btn {
  width: 42px;
  height: 42px;
  border: 1px solid var(--ink);
  background: transparent;
  font-size: 17px;
  cursor: pointer;
  color: var(--ink);
  transition:
    background 160ms ease,
    color 160ms ease;
}
.carousel__btn:hover {
  background: var(--navy);
  color: #fff;
}
.carousel__counter {
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--muted);
}

/* ---------------- Reviews ---------------- */
/* Every review on the wall at once: eleven verbatim reviews are the
   argument, so none of them hide behind an arrow. Column flow lets the
   different lengths stagger naturally. */

.reviews__wall {
  margin-top: 36px;
  columns: 3 320px;
  column-gap: 18px;
}

.review-card {
  break-inside: avoid;
  margin: 0 0 18px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 14px 34px -30px rgba(16, 18, 20, 0.45);
}

.review-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-card__avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* every third avatar carries the brand red, so the wall reads PSI */
.review-card:nth-child(3n) .review-card__avatar {
  background: var(--accent);
}

.review-card__author {
  margin: 0;
  flex: 1 1 auto;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
}

.review-card__author small {
  display: block;
  font-weight: 400;
  color: var(--muted);
  font-size: 13px;
  margin-top: 1px;
}

.review-card__gmark {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.review-card__stars {
  color: #fbbc05;
  font-size: 15px;
  letter-spacing: 3px;
}

.review-card__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #33383d;
}

.review-card__text strong {
  color: var(--ink);
}

/* phones swipe the same cards as a snap rail */
@media (max-width: 760px) {
  .reviews__wall {
    columns: auto;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * clamp(20px, 6vw, 96px));
    padding-inline: clamp(20px, 6vw, 96px);
    padding-bottom: 10px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .reviews__wall::-webkit-scrollbar {
    display: none;
  }
  .review-card {
    flex: 0 0 82vw;
    max-width: 340px;
    margin-bottom: 4px;
    scroll-snap-align: center;
  }
}

.reviews__nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* One button language across the site, set by the hero: a pill on a
   52px line, sentence case, no letter-spacing. .btn is the quiet one;
   .btn--accent is the loud one. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--hairline);
  text-decoration: none;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}
.btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}
.btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 14px 30px -16px rgba(214, 0, 0, 0.7);
}
.btn--accent:hover {
  background: #b30000;
  border-color: #b30000;
  color: #fff;
}
.btn--ghost {
  background: transparent;
}

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

.page-head {
  padding: 140px clamp(20px, 6vw, 96px) 40px;
  background: var(--navy);
  color: #fff;
}
.page-head .eyebrow {
  color: rgba(255, 255, 255, 0.6);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 24px;
  align-items: start;
  margin-top: 36px;
}
@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.contact-box {
  background: #fff;
  border: 1px solid var(--hairline);
  padding: clamp(24px, 3vw, 40px);
}
.contact-box h2 {
  margin: 0 0 6px;
  font-size: clamp(21px, 2.2vw, 28px);
  letter-spacing: -0.01em;
}
.contact-box .lede {
  font-size: 15px;
  margin-bottom: 24px;
}

.contact-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--hairline);
}
.contact-rows > div {
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
}
.contact-rows dt {
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.contact-rows dd {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
}
.contact-rows dd a {
  color: inherit;
  text-decoration: none;
}
.contact-rows dd a:hover {
  color: var(--accent);
}
.contact-rows dd small {
  display: block;
  font-weight: 400;
  color: var(--muted);
  font-size: 15px;
  margin-top: 3px;
}

/* ---------------- Quote questionnaire ---------------- */

.quote__progress {
  margin-bottom: 24px;
}
.quote__progress-label {
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.quote__progress-bar {
  height: 3px;
  background: rgba(16, 18, 20, 0.1);
}
.quote__progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 260ms ease;
}

.quote__q {
  margin: 0 0 18px;
  font-size: clamp(18px, 1.9vw, 23px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.quote__note {
  margin: -10px 0 16px;
  font-size: 15px;
  color: var(--muted);
}

.quote__opts {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
/* the answers follow the same button rules as everything else: a pill
   on the 52px line, hairline until chosen, accent once it is */
.quote__opt {
  display: flex;
  align-items: center;
  text-align: left;
  min-height: 52px;
  font: inherit;
  font-size: 15px;
  padding: 11px 22px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--hairline);
  cursor: pointer;
  color: inherit;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease;
}
.quote__opt:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.quote__opt.is-selected {
  border-color: var(--accent);
  background: rgba(214, 0, 0, 0.05);
  color: var(--accent);
  font-weight: 700;
}

/* a category pill carries its name and, under it, a line saying what
   lives inside — so the first step reads as five doors, not a wall */
.quote__opt--group {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.quote__opt-label {
  font-weight: 700;
}

.quote__opt-hint {
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
}

.quote__opt--group:hover .quote__opt-hint {
  color: inherit;
  opacity: 0.8;
}

/* once there is progress, a quiet way to throw it away */
.quote__progress {
  position: relative;
}

.quote__progress-label {
  padding-right: 88px;
}

.quote__restart {
  position: absolute;
  right: 0;
  top: -2px;
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.quote__restart:hover {
  color: var(--accent);
}

.quote__controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  gap: 12px;
}
/* Back is a quiet pill, not uppercase text floating on its own */
.quote__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--hairline);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}
.quote__back:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.quote__form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.quote__field label {
  display: block;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.quote__field input[type="text"],
.quote__field input[type="email"],
.quote__field input[type="tel"],
.quote__field select,
.quote__field textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 11px 12px;
  border: 1px solid var(--hairline);
  background: var(--paper);
  color: inherit;
}
.quote__field textarea {
  min-height: 88px;
  resize: vertical;
}
.quote__field input:focus,
.quote__field select:focus,
.quote__field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
}

.quote__summary {
  background: var(--paper);
  border: 1px solid var(--hairline);
  padding: 18px;
  max-height: 320px;
  overflow-y: auto;
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-wrap;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.quote__done {
  text-align: center;
  padding: 20px 0;
}
.quote__done h3 {
  font-size: 22px;
  margin: 0 0 10px;
}

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

.footer {
  background: var(--navy);
  color: #fff;
  padding: 56px clamp(20px, 6vw, 96px) 40px;
}
.footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  justify-content: space-between;
}
.footer__logo {
  display: block;
  height: clamp(44px, 5vw, 58px);
  width: auto;
}
.footer__tagline {
  font-weight: 600;
  opacity: 0.8;
  margin-top: 14px;
  font-size: 15px;
}
.footer__col {
  font-size: 15px;
  line-height: 2;
  opacity: 0.9;
}
.footer__col a {
  display: inline-block;
  padding: 6px 0;
  color: inherit;
  text-decoration: none;
}
.footer__col a:hover {
  color: var(--accent);
}
.footer__col .eyebrow {
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  margin-bottom: 8px;
}

/* ---------------- Reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero {
    height: 100vh;
    height: 100svh;
  }
  .hero__scrollcue-line {
    animation: none;
  }
  .hero__canvas {
    transition: none;
  }
  .hero__overlay {
    opacity: 1;
  }
  .carousel__track,
  .reviews__track {
    transition: none;
  }
}

/* ============================================================
   OUR PROCESS — horizontal, scroll-driven build sequence
   The section owns a tall runway; the stage sticks to the
   viewport while vertical scroll is translated into horizontal
   travel across the ten stages. Art is inline SVG in the PSI
   palette, with a slow float and a counter-phase shadow breathe
   so the pieces read as clay resting above the page.
   ============================================================ */

.process {
  padding: 0;
  overflow: clip;
}

/* ---------------- Google reviews trust badge ---------------- */

.gbadge {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  flex-wrap: wrap;
  margin: 26px 0 30px;
  padding: 18px 24px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 14px 36px -30px rgba(16, 18, 20, 0.5);
}

.gbadge__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.gbadge__g {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
}

.gbadge__wordmark {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.gbadge__verified {
  margin: 2px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--muted);
}

.gbadge__tick {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.gbadge__score {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: clamp(20px, 3vw, 44px);
  border-left: 1px solid var(--hairline);
}

.gbadge__num {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.gbadge__stars {
  color: #fbbc05;
  font-size: 17px;
  letter-spacing: 2px;
  line-height: 1;
}

.gbadge__count {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--muted);
}

.gbadge__cta {
  margin-left: auto;
  display: inline-block;
  padding: 12px 20px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid rgba(16, 18, 20, 0.28);
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.gbadge__cta:hover {
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 720px) {
  .gbadge__score {
    border-left: 0;
    padding-left: 0;
  }
  .gbadge__cta {
    margin-left: 0;
  }
}

/* ---------------- Capabilities: photographic index ---------------- */
/* Nine capabilities, nine real jobs. The first tile runs double-size
   as the anchor; the rest sit on a strict three-up grid. */

.caps {
  /* page two sits a step off the hero's white: enough grey that the
     white cards and the red read as sitting on something */
  background: #eceef1;
}

/* The figures belong to the company band above them, so they stand on
   the same ground. White under them put a hard seam right between the
   email address and the 4.9, which split one block into two. The
   doubled class outranks the plain .proofbar rule further down. */
.proofbar.proofbar--stats {
  background: #eceef1;
  border-bottom: 0;
}

/* three figures now: one row on a desktop, and on a phone two up
   with the third taking the full width beneath */
.proofbar--stats .proofbar__inner {
  grid-template-columns: repeat(3, auto);
}

@media (max-width: 760px) {
  .proofbar--stats .proofbar__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .proofbar--stats .proof:last-child {
    grid-column: 1 / -1;
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid var(--hairline);
  }
}

/* The company opens the section and the figures close it; What We
   Build follows on the same ground, parted by a hairline rather than
   a change of colour. */
.caps > .caps__about {
  margin-top: 0;
}

.caps > .section__inner {
  border-top: 1px solid var(--hairline);
}

.caps > .section__inner {
  width: 100%;
  padding-top: 76px;
  padding-bottom: 28px;
}

.caps__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-areas:
    "title house"
    "cta   house";
  align-content: center;
  justify-items: start;
  gap: 20px clamp(24px, 3vw, 52px);
  margin-bottom: clamp(18px, 3vh, 34px);
}

.caps__head .section__title {
  margin-bottom: 0;
}

/* this was white at 62% from when the band sat on a dark panel; on
   the light one it has been invisible ever since */
.caps__lede {
  margin: 0;
  max-width: 44ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.caps__grid {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(168px, 16.5vw, 226px);
  gap: clamp(10px, 1.1vw, 16px);
}

.cap {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #0e1319;
  isolation: isolate;
  transition:
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.4s ease;
}

.cap--featured {
  grid-column: span 2;
  grid-row: span 2;
}

.cap:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9);
}

.cap__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition:
    transform 0.25s ease,
    filter 0.2s ease;
  filter: saturate(0.98) contrast(1.03) brightness(1.08);
}

.cap:hover .cap__img {
  transform: scale(1.06);
  filter: saturate(1.04) contrast(1.05) brightness(1.12);
}

/* keeps the type legible over any photograph */
.cap__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 13, 18, 0.93) 0%,
    rgba(10, 13, 18, 0.78) 20%,
    rgba(10, 13, 18, 0.34) 46%,
    rgba(10, 13, 18, 0.04) 72%,
    transparent 100%
  );
  transition: opacity 0.4s ease;
}

.cap:hover .cap__scrim {
  opacity: 0.94;
}

/* the red rule wipes in on hover */
.cap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 2;
}

.cap:hover::after {
  transform: scaleX(1);
}

.cap__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(14px, 1.5vw, 22px);
  z-index: 1;
}

.cap__num {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease;
}

.cap:hover .cap__num {
  color: var(--accent);
}

.cap h3 {
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: balance;
}

.cap p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.74);
  max-width: 44ch;
}

.cap--featured h3 {
  font-size: clamp(20px, 2.1vw, 27px);
  margin-bottom: 8px;
}

.cap--featured p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
}

.cap--featured .cap__num {
  font-size: 14px;
}

@media (max-width: 960px) {
  .caps__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(160px, 26vw, 210px);
  }
  .cap--featured {
    grid-column: span 2;
    grid-row: span 1;
  }
  .cap--featured h3 {
    font-size: 21px;
  }
}

@media (max-width: 600px) {
  .caps__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: clamp(190px, 52vw, 240px);
  }
  .cap--featured {
    grid-column: span 1;
  }
}

/* ---------------- Introduction: editorial split ---------------- */

.intro__grid {
  display: grid;
  grid-template-columns: minmax(280px, 5fr) 7fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.intro__left .section__title {
  margin-bottom: 24px;
}

.intro__pull {
  margin: 0;
  padding-left: 18px;
  border-left: 3px solid var(--accent);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: -0.01em;
  max-width: 30ch;
}

.intro__copy {
  padding-top: 6px;
}

.intro__lede {
  margin: 0 0 18px;
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.55;
  letter-spacing: -0.01em;
}

.intro__copy p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: clamp(15px, 1.2vw, 16.5px);
  line-height: 1.7;
  max-width: 62ch;
}

.facts--band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 clamp(20px, 3vw, 44px);
  margin: 54px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
}

.facts--band > div {
  border: 0;
  padding: 0;
}

.facts--band dt {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.facts--band dd {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.005em;
}

.facts--band dd a {
  color: inherit;
  text-decoration: none;
}

.facts--band dd a:hover {
  color: var(--accent);
}

.facts__note {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
}

.facts__stars {
  color: #fbbc05;
  font-size: 14px;
  letter-spacing: 1.5px;
}

@media (max-width: 900px) {
  .intro__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .facts--band {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px clamp(20px, 3vw, 44px);
    margin-top: 40px;
  }
}

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

/* ---------------- Get a Quote band ---------------- */

.quote-cta {
  background:
    radial-gradient(
      760px 380px at 12% -20%,
      rgba(214, 0, 0, 0.18),
      transparent 62%
    ),
    var(--navy);
  color: #fff;
}

.qcta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(28px, 5vw, 72px);
  flex-wrap: wrap;
}

.qcta__lead {
  flex: 1 1 420px;
}

.qcta__lead .section__title {
  margin-bottom: 14px;
  color: #fff;
}

.qcta__sub {
  margin: 0;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.68);
  font-size: 16px;
  line-height: 1.65;
}

.qcta__actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

/* the one loud control on the page */
.qcta__btn {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
  padding: 0 30px;
  box-shadow: 0 14px 30px -16px rgba(214, 0, 0, 0.7);
}

.qcta__btn:hover {
  background: #b30000;
  border-color: #b30000;
  color: #fff;
}

.qcta__phone {
  color: #fff;
  text-decoration: none;
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

.qcta__phone:hover {
  color: var(--accent);
}

/* The band no longer advertises the quote planner over a stock photo;
   it is the quote planner. A light panel, because the planner's
   answers are white pills on hairlines and need a light ground. */
.quote-cta--form {
  background: #fff;
  color: var(--ink);
}

.quote-cta--form::before,
.quote-cta--form .qcta__shot {
  display: none;
}

.quote-cta--form .qcta {
  align-items: flex-start;
}

.quote-cta--form .qcta__lead {
  flex: 1 1 280px;
  min-width: 0;
}

.quote-cta--form .qcta__lead .section__title,
.quote-cta--form .qcta__phone {
  color: var(--ink);
}

.quote-cta--form .qcta__sub {
  color: var(--muted);
}

.quote-cta--form .qcta__form {
  flex: 1 1 440px;
  min-width: 0;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 44px -32px rgba(16, 18, 20, 0.4);
}

@media (max-width: 760px) {
  .qcta {
    align-items: flex-start;
  }
  .qcta__actions {
    width: 100%;
  }
  .qcta__btn {
    width: 100%;
    text-align: center;
  }
}

/* ---------------- FAQ ---------------- */

.faq__grid {
  display: grid;
  grid-template-columns: minmax(260px, 4fr) 7fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.faq__lead .section__title {
  margin-bottom: 14px;
}

.faq__note {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 15px;
}

.faq__phone {
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.faq__phone:hover {
  color: var(--accent);
}

.faq__item {
  border-top: 1px solid var(--hairline);
}

.faq__item:last-child {
  border-bottom: 1px solid var(--hairline);
}

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 2px;
  cursor: pointer;
  list-style: none;
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q:hover,
.faq__item[open] .faq__q {
  color: var(--accent);
}

/* plus that becomes a minus when the answer is open */
.faq__mark {
  position: relative;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 5px;
}

.faq__mark::before,
.faq__mark::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.faq__mark::before {
  top: 6.5px;
  left: 0;
  width: 15px;
  height: 2px;
}

.faq__mark::after {
  left: 6.5px;
  top: 0;
  width: 2px;
  height: 15px;
}

.faq__item[open] .faq__mark::after {
  transform: rotate(90deg);
}

.faq__a {
  padding: 0 2px 24px;
  max-width: 68ch;
}

.faq__a p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

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

  /* on a phone the lead is one centred column: the title, the line
     under it and the number all on the same axis */
  .faq__lead {
    text-align: center;
  }

  .faq__lead .section__title {
    margin-left: auto;
    margin-right: auto;
  }

  .faq__phone {
    display: inline-block;
  }
}

/* ---------------- Proof strip ---------------- */
/* Verifiable numbers, sitting between the hero and the pitch so the
   evidence arrives before the argument does. */

.proofbar {
  background: #fff;
  border-bottom: 1px solid var(--hairline);
}

.proofbar__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px clamp(20px, 4vw, 48px);
  display: grid;
  /* two facts now, so the cells hug their content instead of
     stretching across the full width */
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  gap: clamp(18px, 3vw, 48px);
}

.proof {
  position: relative;
  padding-left: clamp(18px, 3vw, 48px);
  border-left: 1px solid var(--hairline);
}

.proof:first-child {
  padding-left: 0;
  border-left: 0;
}

.proof__fig {
  margin: 0 0 5px;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* the location cell carries words, not a numeral */
.proof__fig--text {
  font-size: clamp(16px, 1.5vw, 20px);
  letter-spacing: -0.015em;
  line-height: 1.2;
  padding-top: clamp(4px, 1vw, 12px);
}

.proof__stars {
  color: #fbbc05;
  font-size: 0.44em;
  letter-spacing: 2px;
  vertical-align: middle;
}

.proof__label {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted);
}

.proof__label a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.proof__label a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

@media (max-width: 860px) {
  .proofbar__inner {
    grid-template-columns: repeat(2, auto);
    gap: 24px 20px;
  }
  .proof {
    padding-left: 20px;
  }
  .proof:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 460px) {
  .proofbar__inner {
    grid-template-columns: 1fr;
  }
  .proof {
    padding-left: 0;
    border-left: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--hairline);
  }
  .proof:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
}

/* Anchor targets clear the fixed nav instead of landing under it. */
section[id],
.proofbar {
  scroll-margin-top: 92px;
}

/* ============================================================
   OUR PROCESS — 55 Reynolds, built by scroll
   One elevation, seven stages. The scene sits directly on the
   section: no frame, no card, no viewport. Every animated value
   is written by js/process.js from scroll position, so the build
   scrubs forward and back with the reader's finger.
   ============================================================ */

.process {
  padding: 0;
  /* same ground as the projects section below, so the two read as one
     continuous page rather than two subtly different panels */
  background: #fff;
}

.ps-runway {
  position: relative;
  height: 460vh; /* the original runway */
}

.ps-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh; /* tracks the real visible viewport under moving chrome */
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ps-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 6vw, 96px);
  display: grid;
  grid-template-columns: minmax(300px, 4.4fr) 7.6fr;
  gap: clamp(20px, 3vw, 56px);
  align-items: center;
}

/* ---------------- copy ---------------- */

.ps-copy .section__title {
  margin-bottom: 10px;
}

.ps-copy .section__title {
  font-size: clamp(34px, 3vw, 46px);
  font-weight: 800;
}

.ps-titlerow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.ps-titlerow .section__title {
  margin-bottom: 0;
}

.ps-count {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ps-sub {
  margin: 0 0 30px;
  max-width: 34ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

/* stages crossfade in place, so the column never jumps height */
.ps-steps {
  position: relative;
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  min-height: 230px;
}

.ps-step {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(12px);
  /* leaving: clear out quickly, so two captions are never legible at once */
  transition:
    opacity 0.16s ease,
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.ps-step.is-on {
  opacity: 1;
  transform: none;
  /* arriving: wait for the old one to go, then come in */
  transition:
    opacity 0.34s ease 0.13s,
    transform 0.46s cubic-bezier(0.2, 0.8, 0.2, 1) 0.13s;
}

.ps-step__n {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.ps-step__n::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--hairline);
}

.ps-step h3 {
  margin: 0 0 14px;
  font-size: clamp(34px, 3.6vw, 54px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

.ps-step__d {
  margin: 0;
  max-width: 34ch;
  color: #343a41;
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 500;
  line-height: 1.6;
}

/* ---------------- stage rail ---------------- */

.ps-rail {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ps-tick-btn {
  padding: 10px 0;
  background: none;
  border: 0;
  cursor: pointer;
  flex: 1 1 auto;
}

.ps-tick-btn span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: rgba(16, 18, 20, 0.16);
  transition:
    background 0.35s ease,
    transform 0.35s ease;
  transform-origin: left;
}

.ps-tick-btn:hover span {
  background: rgba(16, 18, 20, 0.4);
}

.ps-tick-btn.is-done span {
  background: rgba(214, 0, 0, 0.32);
}

.ps-tick-btn.is-on span {
  background: var(--accent);
  transform: scaleY(2);
}

/* ---------------- the scene ---------------- */

.ps-art {
  min-width: 0;
}

/* The clay build: seven stage photographs stacked in one frame,
   crossfaded by scroll. */
.ps-build {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 1344 / 752;
  max-height: 76vh;
  /* a wide soft feather on every edge: with multiply underneath,
     nothing about the photograph reads as a rectangle */
  -webkit-mask-image: linear-gradient(#000, #000);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(
    ellipse 92% 88% at 50% 50%,
    #000 70%,
    transparent 99%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 92% 88% at 50% 50%,
    #000 70%,
    transparent 99%
  );
}

/* No card and no cut-out: multiply melts the studio backdrop into
   the page paper, so the model sits directly on the site. */
.ps-frame {
  mix-blend-mode: multiply;
  transform-origin: 50% 88%;
  will-change: opacity, transform;
}

/* the living finale: a video of the same diorama; the color-matrix
   filter applies the identical white balance the stills were given,
   so multiply melts its backdrop into the page the same way */
.ps-frame--live {
  object-fit: cover;
  filter: url(#clayWB);
}

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

/* before the engine runs (or without JS) the first stage shows */
.ps-frame:first-child {
  opacity: 1;
}

/* ---------------- mobile: scene on top, copy beneath ---------------- */

@media (max-width: 900px) {
  .ps-stage {
    align-items: flex-start;
    padding-top: clamp(76px, 11vh, 104px);
    min-height: 0;
  }
  .ps-inner {
    grid-template-columns: 1fr;
    gap: clamp(4px, 1.4vh, 14px);
    align-content: start;
  }
  .ps-art {
    order: 1;
  }
  .ps-copy {
    order: 2;
  }
  .ps-build {
    max-height: 42vh;
  }
  .ps-sub {
    display: none; /* the scene says it faster than the sentence does */
  }
  .ps-copy .section__title {
    font-size: clamp(26px, 7vw, 34px);
    font-weight: 800;
    margin-bottom: 14px;
  }
  .ps-inner {
    align-content: center;
  }
  .ps-stage {
    align-items: center;
    padding-top: 54px;
  }
  .ps-steps {
    margin-bottom: 16px;
    min-height: 132px;
    margin-bottom: 18px;
  }
  .ps-step h3 {
    font-size: clamp(23px, 6.4vw, 30px);
  }
  .ps-step__d {
    font-size: 16px;
    max-width: none;
  }
}

@media (max-width: 430px) {
  .ps-stage {
    min-height: 560px;
  }
  .ps-build {
    max-height: 38vh;
  }
  .ps-steps {
    min-height: 160px;
  }
}

/* ---------------- no pin: the finished house and the full list ---------------- */

.ps-runway:not(.is-pinned) {
  height: auto;
}

.ps-runway:not(.is-pinned) .ps-stage {
  position: static;
  height: auto;
  min-height: 0;
  padding: clamp(64px, 10vh, 120px) 0;
}

.ps-runway:not(.is-pinned) .ps-steps {
  position: static;
  min-height: 0;
  display: grid;
  gap: 24px;
}

.ps-runway:not(.is-pinned) .ps-step {
  position: static;
  opacity: 1;
  transform: none;
}

.ps-runway:not(.is-pinned) .ps-rail {
  display: none;
}

/* ---------------- the excavator ---------------- */
/* PSI livery: red house, black undercarriage, steel rams. The wordmark
   is real SVG text, so it renders sharp at any size. Each joint turns on
   its own pin, which is what makes the arm read as linkage. */

.exc-ao {
  fill: rgba(16, 18, 20, 0.16);
}
.exc-belt {
  fill: #1d2126;
}
.exc-belt-in {
  fill: #333940;
}
.exc-sprocket {
  fill: #454c53;
}
.exc-hub {
  fill: #6d757c;
}
.exc-roller {
  fill: #3c434a;
}
.exc-cleat {
  stroke: #121518;
  stroke-width: 5;
  stroke-linecap: round;
}
.exc-deck {
  fill: #2b3138;
}

.exc-body {
  fill: var(--accent);
}
.exc-cw {
  fill: #a80000;
}
.exc-stripe {
  fill: rgba(16, 18, 20, 0.9);
}
.exc-mark {
  fill: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-anchor: middle;
}
.exc-cab {
  fill: #23282e;
}
.exc-glass {
  fill: #93a3b0;
}
.exc-rail {
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 2;
}
.exc-stack {
  fill: #6f7276;
}

.exc-arm {
  fill: var(--accent);
  stroke: rgba(16, 18, 20, 0.2);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.exc-arm--stick {
  fill: #c40000;
}
.exc-ram {
  stroke: #98a1a8;
  stroke-width: 8;
  stroke-linecap: round;
  fill: none;
}
.exc-rod {
  stroke: #ced3d7;
  stroke-width: 4;
  stroke-linecap: round;
  fill: none;
}
.exc-pin {
  fill: #2b3138;
}
.exc-scoop {
  fill: #3f464d;
  stroke: rgba(16, 18, 20, 0.35);
  stroke-width: 1.2;
}
.exc-lip {
  stroke: #79828a;
  stroke-width: 3;
  stroke-linecap: round;
  fill: none;
}
.exc-teeth {
  stroke: #59616a;
  stroke-width: 4;
  stroke-linecap: round;
  fill: none;
}

/* joints rotate about their real pin positions in scene units */
.exc-boom,
.exc-stick,
.exc-bucket,
.ps-exc {
  transform-box: view-box;
}
.exc-boom {
  transform-origin: 758px 466px;
}
.exc-stick {
  transform-origin: 676px 398px;
}
.exc-bucket {
  transform-origin: 652px 464px;
}

/* ---------------- Quote band: the work behind the ask ---------------- */

.quote-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* the photograph is the ground, not an object on it */
.qcta__shot {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* scrim: navy from the left so the copy always has a dark bed to sit on */
.quote-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      100deg,
      rgba(19, 26, 35, 0.95) 0%,
      rgba(19, 26, 35, 0.88) 42%,
      rgba(19, 26, 35, 0.62) 72%,
      rgba(19, 26, 35, 0.5) 100%
    ),
    radial-gradient(
      760px 380px at 12% -20%,
      rgba(214, 0, 0, 0.22),
      transparent 62%
    );
}

.qcta {
  align-items: flex-end;
}

/* ---------------- Brand details ---------------- */
/* Small, consistent uses of the PSI red so the mark, the selection and
   the keyboard focus ring all read as the same brand. */

::selection {
  background: rgba(214, 0, 0, 0.9);
  color: #fff;
}

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

/* the nav mark gets a touch more presence */
.nav__logo {
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nav__brand:hover .nav__logo {
  transform: scale(1.04);
}

/* the tel number is a brand asset on this site: PSI reads red everywhere */
.tel-psi {
  color: var(--accent);
  font-weight: 700;
}

/* a hairline of brand colour under every section heading's section */
.footer__tagline {
  color: rgba(255, 255, 255, 0.72);
}

/* the wing sits back from the main face, so it takes less light */
.ps-wall.wing {
  fill: url(#psWing);
}
/* a soft shadow where the parapet oversails the wall */
.cap-shade {
  fill: rgba(16, 18, 20, 0.11);
}

/* ---------------- Capabilities: the way out of the grid ---------------- */

.caps__cta {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 26px);
  flex-wrap: wrap;
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.caps__btn {
  background: var(--accent);
  border-color: var(--accent);
  padding: 16px 32px;
  font-size: 14px;
}

.caps__btn:hover {
  background: #b30000;
  border-color: #b30000;
}

.caps__cta-note {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 620px) {
  .caps__btn {
    width: 100%;
    text-align: center;
  }
}

/* ============================================================
   MOBILE — deliberate layouts, not shrunk desktop ones.
   Everything below lives inside a media query; the desktop
   rules above are untouched.
   ============================================================ */

@media (max-width: 760px) {
  /* What We Build becomes a swipeable rail that bleeds to both edges */
  .caps__grid {
    display: flex;
    grid-template-columns: none;
    grid-auto-rows: auto;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    gap: 12px;
    margin-inline: calc(-1 * clamp(20px, 6vw, 96px));
    padding-inline: clamp(20px, 6vw, 96px);
    padding-bottom: 10px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .caps__grid::-webkit-scrollbar {
    display: none;
  }

  /* a sliver of the next card is the only affordance needed */
  .cap,
  .cap--featured {
    flex: 0 0 76vw;
    max-width: 330px;
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 3;
    scroll-snap-align: center;
  }

  .cap--featured h3 {
    font-size: 19px;
  }

  .caps__head {
    display: block;
  }

  .caps__cta {
    margin-top: 24px;
  }

  /* one thumb-sized target, not a row of them */
  .caps__btn {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 620px) {
  /* headings stop competing with the phone's width */
  .section__title {
    font-size: clamp(27px, 8vw, 36px);
    line-height: 1.08;
  }

  /* the intro reads as one column, quote first */
  .intro__pull {
    font-size: 18px;
    padding-left: 14px;
  }

  .intro__lede {
    font-size: 17px;
  }

  /* contact facts stack into readable rows rather than a cramped grid */
  .facts--band {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* the proof strip reads as two lines, not four columns */
  .proofbar__inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* reviews and projects get full-width media */
  .projects__layout {
    grid-template-columns: 1fr;
  }

  /* the quote band's button is the whole width of the thumb */
  .qcta__btn,
  .gbadge__cta {
    width: 100%;
    text-align: center;
  }

  .gbadge {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .gbadge__score {
    padding-left: 0;
    border-left: 0;
  }

  /* FAQ answers get room to breathe */
  .faq__q {
    font-size: 17px;
    padding: 18px 2px;
  }

  .faq__a {
    padding-bottom: 20px;
  }
}

/* ---------------- Hero on a phone ---------------- */
/* The same opening animation, scrubbed from portrait frames that were
   composed for the screen rather than cropped down to it. */

.hero--phone .hero__poster {
  object-fit: cover;
  object-position: 50% 50%;
}

@media (max-width: 760px) {
  .hero__overlay {
    padding-bottom: clamp(28px, 8vh, 64px);
  }

  .hero__title {
    font-size: clamp(40px, 13vw, 62px);
    line-height: 0.98;
  }

  .hero__tagline {
    font-size: 16px;
  }
}

/* ============================================================
   MOBILE NAVIGATION
   The desktop bar is a single row of uppercase links. At phone
   widths that wrapped to five lines and left 17px touch targets,
   so the same vocabulary — uppercase, letterspaced, navy ground,
   red accent — is rebuilt as a panel with real targets.
   Desktop keeps its row: everything here is scoped to <=760px.
   ============================================================ */

.nav__toggle,
.nav__call {
  display: none;
}

@media (max-width: 760px) {
  .nav {
    padding: 10px 16px;
    gap: 10px;
    align-items: center;
  }

  /* calling is the shortest path to a contractor, so it stays in the bar */
  .nav__call {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    border-radius: 50%;
    color: inherit;
    background: rgba(255, 255, 255, 0.1);
    transition: background 0.2s ease;
  }

  .nav--solid .nav__call {
    background: rgba(16, 18, 20, 0.06);
  }

  .nav__call svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
  }

  .nav__toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }

  .nav__bars {
    display: block;
    width: 22px;
  }

  .nav__bars i {
    display: block;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition:
      transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 0.2s ease;
  }

  .nav__bars i + i {
    margin-top: 5px;
  }

  /* the bars become the close mark rather than swapping icons */
  .nav--open .nav__bars i:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav--open .nav__bars i:nth-child(2) {
    opacity: 0;
  }
  .nav--open .nav__bars i:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .nav__links {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: clamp(104px, 16vh, 150px) clamp(24px, 7vw, 44px) 32px;
    background: var(--navy);
    color: #fff;
    /* the panel is present but inert until opened, so it can animate */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity 0.28s ease,
      transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1),
      visibility 0s linear 0.3s;
  }

  .nav--open .nav__links {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  /* each row is a full-width target, not a word */
  .nav__links a {
    display: flex;
    align-items: center;
    min-height: 60px;
    padding: 4px 2px;
    font-family: var(--font-display);
    font-size: clamp(23px, 6.4vw, 30px);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
    opacity: 1;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: color 0.2s ease;
  }

  .nav__links a:not([href^="tel:"]):not(.nav__cta)::after {
    content: "";
    width: 9px;
    height: 9px;
    margin-left: auto;
    border-top: 2px solid rgba(255, 255, 255, 0.35);
    border-right: 2px solid rgba(255, 255, 255, 0.35);
    transform: rotate(45deg);
    transition:
      transform 0.2s ease,
      border-color 0.2s ease;
  }

  .nav__links a:active::after {
    border-color: var(--accent);
    transform: rotate(45deg) translate(2px, -2px);
  }

  /* the desktop end-group dissolves: inside the panel these are rows */
  .nav__end {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 26px 0 0;
    padding: 0;
    border: 0;
  }

  /* the phone number reads as a number, not another menu item */
  .nav__links a[href^="tel:"] {
    justify-content: space-between;
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.78);
    min-height: 54px;
    border-bottom: 0;
  }

  /* the row is a flex line, so the number's three text runs become
     separate items and the space after PSI is trimmed: give it back */
  .nav__links a[href^="tel:"] .tel-psi {
    margin-right: 0.26em;
  }

  .nav__links a[href^="tel:"]::after {
    content: "Call";
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
  }

  /* the panel's button follows the same rule as every other button
     on the site: sentence case, no letter-spacing */
  .nav__links .nav__cta {
    justify-content: center;
    margin-top: 0;
    min-height: 56px;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: 0 18px 40px -20px rgba(214, 0, 0, 0.8);
  }

  /* the rows arrive one after another, the way a panel should open */
  .nav--open .nav__links > * {
    animation: navRowIn 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .nav--open .nav__links > *:nth-child(1) {
    animation-delay: 0.05s;
  }
  .nav--open .nav__links > *:nth-child(2) {
    animation-delay: 0.1s;
  }
  .nav--open .nav__links > *:nth-child(3) {
    animation-delay: 0.15s;
  }
  .nav--open .nav__links > *:nth-child(4) {
    animation-delay: 0.2s;
  }
  .nav--open .nav__links > *:nth-child(5) {
    animation-delay: 0.26s;
  }

  @keyframes navRowIn {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .nav--open .nav__links > * {
      animation: none;
    }
  }

  .nav__scrim {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(10, 13, 18, 0.5);
  }

  /* the logo stays legible against the panel behind it */
  .nav--open .nav__logo--onsolid {
    opacity: 0;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .nav__links,
  .nav__bars i {
    transition: none;
  }
}

/* ---------------- Mobile: a tighter bar, and section-per-screen ---------------- */

@media (max-width: 760px) {
  /* the bar is a thin frame around the mark, not a band */
  .nav {
    padding: 6px 14px;
  }

  .nav__logo {
    height: 34px;
    width: auto;
  }

  .nav__call,
  .nav__toggle {
    width: 42px;
    height: 42px;
  }

  /* Each section lands as its own screen. Proximity rather than mandatory:
     the hero and the build own multi-viewport runways, and mandatory snap
     would fight their scrubbing. */
  html {
    scroll-snap-type: y proximity;
  }

  section[id],
  .footer {
    scroll-snap-align: start;
    scroll-margin-top: 54px;
  }

  /* sections shorter than a screen compose to one, centred rather than
     top-stacked with dead space beneath */

  /* the runway sections opt out: they are already paced by their own scroll */
  #hero,
  #process {
    scroll-snap-align: none;
  }

  /* section rhythm: closer than desktop, and varied rather than uniform */
  .section {
    padding-top: clamp(52px, 9vh, 72px);
    padding-bottom: clamp(52px, 9vh, 72px);
  }

  #projects,
  #reviews,
  #faq {
    padding-top: clamp(44px, 7vh, 60px);
  }
}

/* FAQ +/- marks and viewer arrows: comfortable under a thumb */
@media (max-width: 760px) {
  .faq__q {
    min-height: 52px;
  }

  .viewer__arrow,
  .carousel__btn {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ---------------- Mobile: map + gallery share one screen ---------------- */
/* The desktop section stacks two 56vh panels; a phone gets both on the
   same screen — map above, gallery below — sized so the whole section
   lands as one page in the snap flow. */

@media (max-width: 760px) {
  #projects {
    padding-top: 34px;
    padding-bottom: 34px;
  }

  #projects .section__title {
    margin-bottom: 8px;
  }

  #projects .lede {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 14px;
  }

  .projects__layout {
    gap: 12px;
  }

  #projectMap {
    height: clamp(200px, 30svh, 300px);
  }

  .shots {
    height: clamp(220px, 33svh, 320px);
  }
}

/* ---------------- Where We've Built: the job index ---------------- */
/* One card per documented job beside the map. Hovering a card lights
   its pin; clicking opens the job's photo set. */

.jobs {
  /* flex-wrap, not grid: a grid here sized its rows from the cards'
     min-content pass, where percentage padding is cyclic, and every
     row locked at one line of text no matter what the cards held */
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 14px;
  max-height: clamp(380px, 56vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  scrollbar-width: thin;
}

.jobs .job {
  flex: 1 1 calc(50% - 7px);
  max-width: calc(50% - 7px);
}

.job {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.job:hover,
.job:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(214, 0, 0, 0.35);
  box-shadow: 0 22px 44px -34px rgba(16, 18, 20, 0.5);
}

.job__media {
  /* a padding ratio box, not aspect-ratio: grid row sizing resolves
     percentage padding against the track width, where an auto-height
     image with aspect-ratio contributes nothing and the row collapses */
  position: relative;
  display: block;
  width: 100%;
  padding-top: 62.5%;
  overflow: hidden;
}

.job__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.job:hover .job__media img {
  transform: scale(1.05);
}

.job__count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 9px;
  border-radius: 20px;
  background: rgba(16, 18, 20, 0.72);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.job__body {
  display: block;
  padding: 12px 14px 14px;
}

.job__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.job__type {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------- viewer chrome: counter + film strip ---------------- */

.viewer__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px clamp(16px, 3vw, 32px) 14px;
  background: linear-gradient(to top, rgba(8, 10, 12, 0.85), transparent);
}

.viewer__thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1 1 auto;
  padding: 4px 2px;
}

.viewer__thumbs::-webkit-scrollbar {
  display: none;
}

.viewer__thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 44px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: 0.55;
  transition:
    opacity 0.25s ease,
    border-color 0.25s ease;
}

.viewer__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.viewer__thumb.is-on {
  opacity: 1;
  border-color: var(--accent);
}

.viewer__thumb:hover {
  opacity: 1;
}

.viewer__count {
  margin: 0;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1160px) and (min-width: 761px) {
  .jobs .job {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* ---------------- mobile: map above, job rail below ---------------- */

@media (max-width: 760px) {
  .jobs {
    display: flex;
    /* the desktop grid-replacement wraps; the phone rail must not */
    flex-wrap: nowrap;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    gap: 10px;
    margin-inline: calc(-1 * clamp(20px, 6vw, 96px));
    padding-inline: clamp(20px, 6vw, 96px);
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .jobs::-webkit-scrollbar {
    display: none;
  }
  /* outweigh the desktop .jobs .job basis */
  .jobs .job {
    flex: 0 0 62vw;
    max-width: 260px;
    scroll-snap-align: center;
  }

  /* one settled line-count per card: rhythm over raggedness */
  .job__name {
    font-size: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
  }

  .job__type {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #projects .section__title {
    margin-bottom: 6px;
  }

  #projects .lede {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 12px;
  }
  .viewer__thumb {
    width: 52px;
    height: 38px;
  }
}

/* ---------------- Menu panel: stacking, contrast, entrance ---------------- */

@media (max-width: 760px) {
  /* the bar rides ABOVE its own panel, so the mark stays put and the
     bars-to-X morph happens in place; without this the close control
     was buried under the panel it opened */
  .nav--open {
    z-index: 70;
  }

  /* within the bar's own stacking context, the controls must ride above
     the full-screen panel, or a finger can never reach the X it sees */
  .nav__brand,
  .nav__call,
  .nav__toggle {
    position: relative;
    z-index: 65;
    background: transparent;
    box-shadow: none;
  }

  /* only while the navy panel is open do the controls go white;
     on the white bar they keep the ink they inherit */
  .nav--open .nav__call,
  .nav--open .nav__toggle {
    color: #fff;
  }

  .nav--open .nav__call {
    background: rgba(255, 255, 255, 0.12);
  }

  /* the panel carries the same red bloom as the site's other navy grounds */
  .nav__links {
    background:
      radial-gradient(
        520px 340px at 88% -8%,
        rgba(214, 0, 0, 0.22),
        transparent 62%
      ),
      var(--navy);
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  }

  /* rows arrive one after another, settling as the panel lands */
  .nav--open .nav__links a {
    animation: nav-row-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  }
  .nav--open .nav__links a:nth-child(1) {
    animation-delay: 0.05s;
  }
  .nav--open .nav__links a:nth-child(2) {
    animation-delay: 0.1s;
  }
  .nav--open .nav__links a:nth-child(3) {
    animation-delay: 0.15s;
  }
  .nav--open .nav__links a:nth-child(4) {
    animation-delay: 0.2s;
  }
  .nav--open .nav__links a:nth-child(5) {
    animation-delay: 0.25s;
  }
  .nav--open .nav__links a:nth-child(6) {
    animation-delay: 0.3s;
  }

  /* pressing the toggle answers the finger immediately */
  .nav__toggle:active .nav__bars {
    transform: scale(0.88);
  }
  .nav__bars {
    transition: transform 0.2s ease;
  }
}

@keyframes nav-row-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .nav--open .nav__links a {
    animation: none;
  }
}

/* ---------------- Reviews: summary rail beside the wall ---------------- */

@media (min-width: 900px) {
  .reviews__layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: clamp(24px, 3vw, 44px);
    align-items: start;
    margin-top: 36px;
  }

  /* the score keeps the reader company while they read the evidence */
  .reviews__side {
    position: sticky;
    top: 96px;
  }

  .reviews__side .gbadge {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin: 0 0 14px;
    padding: 24px;
  }

  .reviews__side .gbadge__score {
    padding-left: 0;
    border-left: 0;
  }

  .reviews__side .gbadge__num {
    font-size: 44px;
  }

  .reviews__side .gbadge__cta {
    align-self: stretch;
    text-align: center;
  }

  .reviews__side .reviews__nav {
    margin: 0;
  }

  .reviews__side .reviews__nav .btn {
    display: block;
    text-align: center;
  }

  .reviews__layout .reviews__wall {
    margin-top: 0;
    columns: 2 300px;
  }
}

/* ---------------- Desktop header refinements ---------------- */

@media (min-width: 761px) {
  /* links earn a red underline that draws from the left */
  .nav__links a:not(.nav__cta) {
    position: relative;
    padding: 6px 0;
  }

  .nav__links a:not(.nav__cta)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .nav__links a:not(.nav__cta):hover::after,
  .nav__links a:not(.nav__cta):focus-visible::after {
    transform: scaleX(1);
  }

  /* the bar's one action reads in the brand red, like every other CTA */
  .nav__cta {
    background: var(--accent);
    border-color: var(--accent);
  }

  .nav__cta:hover {
    background: #b30000;
    border-color: #b30000;
  }
}

/* ============================================================
   CAPTION VOICE
   Every caption on the site speaks in one editorial register:
   the serif italic the ledes already use, sized to be read.
   Uppercase micro-labels stay in the sans; this is for sentences.
   ============================================================ */

:root {
  --font-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
}

.viewer__cap,
.job__type,
.facts__note,
.review-card__author small,
.proof__label,
.ps-sub,
.qcta__sub,
.faq__note,
.caps__cta-note,
.pflow-head__lede {
  font-weight: 500;
  letter-spacing: 0;
}

/* sized per role, none of them squinting-small */
.job__type {
  font-size: 15px;
  margin-top: 4px;
}

.viewer__cap {
  font-size: 16px;
  line-height: 1.5;
}

.facts__note {
  font-size: 14px;
}

.review-card__author small {
  font-size: 14px;
}

.proof__label {
  font-size: 15px;
}

.ps-sub,
.qcta__sub,
.faq__note,
.caps__cta-note {
  font-size: 17px;
  line-height: 1.6;
}

/* the viewer phase chip is a label, not a sentence: sans, but roomier */
.viewer__phase,

/* the card whose pin is lit answers back */
.job.is-active {
  border-color: rgba(214, 0, 0, 0.45);
  box-shadow: 0 22px 44px -34px rgba(214, 0, 0, 0.35);
}

/* ---------------- Hero: the sunset still ---------------- */

.hero--still .hero__poster {
  object-fit: cover;
  object-position: 50% 46%; /* the house holds the frame at any crop */
}

/* the sky is bright; the title keeps a quiet bed to sit on */
.hero--still .hero__viewport::after {
  content: "";
  position: absolute;
  inset: 55% 0 0 0;
  background: linear-gradient(to top, rgba(10, 12, 14, 0.55), transparent);
  pointer-events: none;
}

.hero--still .hero__overlay {
  z-index: 1;
}

.hero--still .hero__scrollcue {
  display: none;
}

/* the wide frame keeps the house and its lawn favoured as viewports narrow */
@media (orientation: landscape) {
  .hero--still .hero__poster {
    object-position: 42% 58%;
  }
}

/* ---------------- Quote planner joins the component system ---------------- */

.quote__field input[type="text"],
.quote__field input[type="email"],
.quote__field input[type="tel"],
.quote__field textarea,
.quote__field select {
  border-radius: 4px;
}

.quote__field input:focus-visible,
.quote__field textarea:focus-visible,
.quote__field select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

.sbot__hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 10px 0;
}

.sbot__typing {
  display: flex;
  gap: 5px;
  align-items: center;
  min-height: 20px;
}

.sbot__typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: sbotDot 1.1s ease-in-out infinite;
}

.sbot__typing i:nth-child(2) {
  animation-delay: 0.18s;
}

.sbot__typing i:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes sbotDot {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* ---------------- hero: the open house ---------------- */

.hero--open {
  /* a short runway: the sticky stage hands the house off to the
     next section as you scroll */
  height: 330svh;
  background: var(--paper);
}

.heroo__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 88px 0 20px;
  overflow: hidden;
}

.heroo__copy,
.heroo__stagewrap {
  will-change: transform, opacity;
}

/* the next section rises over the parked house */
.caps {
  position: relative;
  z-index: 2;
}

/* page one, as the reference lays it out: a centred column with the
   headline on top and the model holding the floor beneath it */
.heroo__inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.6vh, 22px);
  flex: 1 1 auto;
  min-height: 0;
}

.heroo__copy {
  flex: 0 0 auto;
}

.heroo__copy {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero--open .hero__eyebrow,
.hero--open .hero__title,
.hero--open .hero__tagline {
  text-shadow: none;
}

.hero--open .hero__eyebrow {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.hero--open .hero__title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(32px, 3.6vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  max-width: 21ch;
}

.hero--open .hero__tagline {
  color: #4c525a;
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 600;
  margin: 0 0 22px;
}

/* three actions, one rhythm: the filled one, the outlined one,
   and the rating, all the same height on the same centre line */
.heroo__ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px 12px;
  flex-wrap: wrap;
}

.heroo__cta,
.heroo__link,
.heroo__reviews {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.heroo__cta {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 14px 30px -16px rgba(214, 0, 0, 0.7);
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.heroo__cta:hover {
  transform: translateY(-2px);
}

.heroo__cta:hover {
  background: #b30000;
}

/* the rating is its own quiet door into the reviews */
.heroo__reviews {
  border: 1px solid var(--hairline);
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  padding: 0 20px;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}

.heroo__reviews:hover {
  transform: translateY(-2px);
}

.heroo__reviews:hover {
  border-color: var(--accent);
}

.heroo__reviews b {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
}

.heroo__stars {
  color: #fbbc05;
  font-size: 13px;
  letter-spacing: 1px;
}

/* the narrow-screen stand-in for the row of five */
.heroo__star {
  display: none;
  color: #fbbc05;
  font-size: 15px;
  line-height: 1;
}

.heroo__link {
  border: 1px solid var(--hairline);
  color: var(--ink);
  background: #fff;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}

.heroo__link:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

/* backwards, not both: with `both` the finished intro kept holding
   opacity 1 and transform none, and a running animation outranks an
   inline style -- so the scroll engine's finale was being thrown away
   and the model just sat there while the copy left without it */
.heroo__stagewrap {
  position: relative;
  animation: herooIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

@keyframes herooIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .heroo__stagewrap {
    animation: none;
  }
}

.heroo__stagewrap {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: grid;
  place-items: center;
}

.hb__frame {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  will-change: opacity;
}

.hb__frame:first-child {
  opacity: 1;
}

.heroo__fit {
  position: relative;
  /* one radius source for everything nested inside the stage */
  --stage-r: 18px;
  --stage-pad: 16px;
  border-radius: var(--stage-r);
  overflow: hidden;
  /* the renders crop their site plot at the frame; feathering the
     stage edges melts that crop into the page instead of cutting */
  mask-image:
    linear-gradient(
      to right,
      transparent 0,
      #000 30px,
      #000 calc(100% - 30px),
      transparent 100%
    ),
    linear-gradient(to bottom, #000 0, #000 calc(100% - 34px), transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0,
      #000 30px,
      #000 calc(100% - 30px),
      transparent 100%
    ),
    linear-gradient(to bottom, #000 0, #000 calc(100% - 34px), transparent 100%);
  -webkit-mask-composite: source-in;
  /* sized by whichever dimension binds, always a true 16:9 frame */
  width: min(980px, 100%);
  aspect-ratio: 16 / 9;
  max-height: 100%;
}

@supports (height: 100cqh) {
  .heroo__stagewrap {
    container-type: size;
  }
  .heroo__fit {
    width: auto;
    height: min(100cqh, 100cqw * 9 / 16, 551px);
  }
}

/* tap any room: the chosen pin stays lit while the rest step back */
.heroo__stagewrap.is-zoomed .heroo__pin {
  opacity: 0;
  pointer-events: none;
}

.heroo__stagewrap.is-zoomed .heroo__pin.is-active {
  opacity: 1;
  pointer-events: auto;
}

.heroo__pin {
  transition:
    opacity 0.35s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.heroo__cap {
  position: absolute;
  left: var(--stage-pad);
  right: var(--stage-pad);
  bottom: 14px;
  margin: 0;
  padding: 12px 18px;
  /* concentric with the stage: container radius minus inset, floored */
  border-radius: max(calc(var(--stage-r) - var(--stage-pad)), 8px);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(4px);
  border: 1px solid var(--hairline);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
  pointer-events: none;
}

.heroo__stagewrap.is-zoomed .heroo__cap {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .heroo__house {
    transition: none;
  }
}

.heroo__pin {
  position: absolute;
  left: var(--px);
  top: var(--py);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(3px);
  border: 1px solid var(--hairline);
  cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(16, 18, 20, 0.4);
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    opacity 0.35s ease;
}

.heroo__pin:hover {
  border-color: var(--accent);
  transform: translate(-50%, -50%) scale(1.05);
}

.heroo__pin-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  /* a shorter runway: 3.3 screens of thumb to get through the opening
     is a long wait on a phone. the same seven frames, less scrolling */
  /* a shorter runway than the desktop's: the same seven frames, less
     thumb to get through them */
  .hero--open {
    height: 215svh;
  }

  /* the handoff overlaps instead of queuing: What We Build is already
     rising while the model dims, so no empty screen between them */
  .heroo-js ~ .caps {
    margin-top: -18svh;
  }

  /* no padding on the section: it would push the sticky screen 84px
     below the fold and cut the buttons off the bottom. the nav is
     cleared by the sticky's own top padding instead */
  .hero--open .hero__title {
    font-size: clamp(30px, 8vw, 40px);
  }

  .heroo__ctas {
    width: 100%;
    gap: 10px;
  }

  .heroo__cta {
    flex: 1 1 100%;
  }

  .heroo__link,
  .heroo__reviews {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 14px;
    font-size: 14px;
  }

  /* five stars will not fit beside the figure on a narrow pill,
     so one gold star carries the rating instead */
  .heroo__reviews .heroo__stars {
    display: none;
  }

  .heroo__reviews .heroo__star {
    display: inline-block;
  }

  /* the model leads on a phone: the house takes the top of the
     screen and the words read underneath it */
  .heroo__stagewrap {
    order: 1;
  }

  .heroo__copy {
    order: 2;
  }

  /* the chat bubble parks bottom-right; the buttons stop above it
     rather than running underneath */
  .heroo__sticky {
    padding-bottom: 76px;
  }

  .heroo__pin {
    font-size: 11px;
    padding: 7px 12px;
  }
}

/* ---------------- what we build: the service rail ---------------- */

/* the headline: big, red into light grey into grey */
.caps__title {
  font-size: clamp(52px, 7.4vw, 118px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.038em;
  line-height: 0.88;
  display: flex;
  gap: 0.2em;
  flex-wrap: wrap;
  text-wrap: balance;
}

.caps__t1 {
  color: var(--accent);
}

.caps__t2 {
  color: #c9c5bd;
}

.caps__t3 {
  color: #6c727b;
}

/* cued by the hero's finale: the section rises to meet the handoff */
.heroo-js ~ .caps .caps__head,
.heroo-js ~ .caps .svc-rail,
.heroo-js ~ .caps .heroo-js ~ .caps.caps--in .caps__head,
.heroo-js ~ .caps.caps--in .svc-rail,
.heroo-js ~ .caps.caps--in .svc-progress {
  opacity: 1;
  transform: none;
}

.heroo-js ~ .caps.caps--in .svc-rail {
  transition-delay: 0.08s;
}

.heroo-js ~ .caps.caps--in .svc-progress {
  transition-delay: 0.16s;
}

@media (prefers-reduced-motion: reduce) {
  .heroo-js ~ .caps .caps__head,
  .heroo-js ~ .caps .svc-rail,
  .heroo-js ~ .caps .svc-progress {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.caps__head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  gap: 14px 36px;
  margin-bottom: clamp(14px, 2vh, 24px);
}

.caps__head .caps__title {
  grid-area: title;
  margin: 0;
}

.caps__head .caps__cta {
  grid-area: cta;
  align-self: start;
}

.caps__house {
  grid-area: house;
  align-self: center;
  justify-self: center;
  width: 100%;
  height: auto;
  max-height: 38vh;
  object-fit: contain;
}

/* the branded tools are a phone-only companion to the headline; on a
   desktop the cutaway house already sits beside it */
.caps__tools {
  display: none;
}

@media (max-width: 900px) {
  /* on a phone the house stops being a second column and becomes the
     ground the headline stands on: one centred stack, the drawing
     washed back behind the words */
  .caps__head {
    position: relative;
    /* the drawing is wider than the column on purpose; clipping keeps
       that from widening the page itself */
    overflow: hidden;
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "tools"
      "cta";
    justify-items: stretch;
    gap: 10px;
    text-align: center;
    padding: clamp(16px, 4vw, 30px) 0 clamp(14px, 3vw, 24px);
  }

  .caps__head .caps__title,
  .caps__head .caps__cta {
    position: relative;
    z-index: 1;
  }

  .caps__head .caps__title {
    justify-content: center;
  }

  /* on a phone the link becomes the section's button */
  .caps__head .caps__cta {
    justify-self: center;
    padding: 13px 26px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
  }

  .caps__house {
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -52%);
    width: min(124%, 560px);
    max-width: none;
    max-height: none;
    opacity: 0.16;
    pointer-events: none;
    /* an oval of exposure, so the drawing has no edge of its own
       and simply thins out into the white page */
    mask-image: radial-gradient(
      ellipse 62% 58% at 50% 50%,
      #000 0,
      rgba(0, 0, 0, 0.55) 62%,
      transparent 86%
    );
    -webkit-mask-image: radial-gradient(
      ellipse 62% 58% at 50% 50%,
      #000 0,
      rgba(0, 0, 0, 0.55) 62%,
      transparent 86%
    );
  }
  .caps__title {
    font-size: clamp(42px, 12vw, 64px);
  }

  /* the tools laid out like they were set down on the bench, not
     three icons in a row: the drill upright and largest in the middle,
     the hammer leaning in low from the left, the saw low on the right */
  .caps__tools {
    grid-area: tools;
    position: relative;
    z-index: 1;
    display: block;
    height: 112px;
    width: min(100%, 340px);
    margin: -8px auto 0;
  }

  .caps__tools img {
    position: absolute;
    display: block;
    width: auto;
    filter: drop-shadow(0 10px 14px rgba(16, 18, 20, 0.16));
  }

  /* the rotations swing the ends outward; inset the two edge tools so
     nothing lands past the head's clipped edge */
  .caps__tools img:nth-child(1) {
    height: 62px;
    left: 7px;
    bottom: 8px;
    transform: rotate(-12deg);
  }

  .caps__tools img:nth-child(2) {
    height: 100px;
    left: 50%;
    top: 4px;
    transform: translateX(-50%);
  }

  .caps__tools img:nth-child(3) {
    height: 46px;
    right: 4px;
    bottom: 14px;
    transform: rotate(8deg);
  }
  .svc__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .caps > .section__inner {
    padding-top: 64px;
    padding-bottom: 18px;
  }
}

.caps__cta {
  color: var(--accent);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}

.svc-rail {
  list-style: none;
  margin: 0;
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}

.svc-rail::-webkit-scrollbar {
  display: none;
}

.svc {
  --card-r: 18px;
  --card-pad: 12px;
  perspective: 1400px;
  min-height: clamp(400px, 48vh, 470px);
}

.svc__inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transform-style: preserve-3d;
  transition: transform 0.62s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.svc:hover .svc__inner,
.svc:focus-within .svc__inner,
.svc.is-flipped .svc__inner {
  transform: rotateY(180deg);
}

.svc__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--card-pad) var(--card-pad) 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--card-r);
  background: #fff;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

.svc__face--back {
  transform: rotateY(180deg);
  /* the detail scrolls inside the card rather than being cut off */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(16, 18, 20, 0.22) transparent;
  padding: 24px 22px 22px;
  background:
    radial-gradient(
      420px 220px at 110% -10%,
      rgba(214, 0, 0, 0.09),
      transparent 62%
    ),
    #fff;
  border-color: rgba(214, 0, 0, 0.3);
  box-shadow: 0 24px 48px -32px rgba(16, 18, 20, 0.35);
}

/* front */
.svc__art {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: radial-gradient(
    ellipse 90% 85% at 50% 42%,
    #ffffff 30%,
    #f4f2ef 100%
  );
  padding: 8px;
  margin-bottom: 12px;
  border-radius: max(calc(var(--card-r) - var(--card-pad)), 8px);
}

.svc__kind {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 10px 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.svc__kind::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--hairline);
}

.svc__title {
  margin: 0 10px 6px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
}

.svc__desc {
  margin: 0 10px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  color: #3c4148;
}

.svc__more {
  margin: auto 10px 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.svc__more span {
  display: inline-block;
  transition: transform 0.25s ease;
}

.svc:hover .svc__more span {
  transform: translateX(4px);
}

/* back */
.svc__face--back .svc__kind,
.svc__face--back .svc__title {
  margin-left: 0;
  margin-right: 0;
}

.svc__face--back .svc__title {
  font-size: 21px;
  margin-bottom: 10px;
}

.svc__backcopy {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  color: #3c4148;
}

.svc__list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 9px;
}

.svc__list li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.svc__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.svc__face--back::-webkit-scrollbar {
  width: 6px;
}

.svc__face--back::-webkit-scrollbar-thumb {
  background: rgba(16, 18, 20, 0.2);
  border-radius: 999px;
}

.svc__btn {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease;
}

.svc__btn:hover {
  background: #b30000;
}

/* the back only answers the pointer once it is facing you */
.svc .svc__face--back {
  pointer-events: none;
}

.svc:hover .svc__face--back,
.svc:focus-within .svc__face--back,
.svc.is-flipped .svc__face--back {
  pointer-events: auto;
}

.svc:hover .svc__face--front,
.svc.is-flipped .svc__face--front {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .svc__inner {
    transition: none;
  }
}

/* the tenth card is the invitation, not a service */
.svc--cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 20px;
  border: 0;
  border-radius: var(--card-r);
  background:
    radial-gradient(
      420px 260px at 115% -15%,
      rgba(255, 255, 255, 0.16),
      transparent 60%
    ),
    var(--navy);
  perspective: none;
}

.svc--cta .svc__kind {
  margin: 0 0 8px;
  color: #fff;
  opacity: 0.6;
}

.svc--cta .svc__kind::after {
  background: rgba(255, 255, 255, 0.25);
}

.svc--cta .svc__title {
  margin: 0 0 18px;
  font-size: clamp(20px, 1.9vw, 26px);
  color: #fff;
  line-height: 1.1;
}

.svc__ctas {
  display: grid;
  gap: 10px;
}

.svc--cta .svc__btn {
  margin: 0;
}

.svc__call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.svc__call:hover {
  border-color: #fff;
}

.svc--cta .tel-psi {
  color: var(--accent);
}

/* on a phone the services run as a swipeable row, not a tall stack */
@media (max-width: 760px) {
  /* What We Build is its own screen on a phone: a light-charcoal panel
     bleeding to both edges, no drawing behind the headline, the tools
     and the white cards carrying the colour. Sized to land head and
     row inside one screen with the nav in the way. */
  .caps__house {
    display: none;
  }

  .caps > .section__inner {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 58px clamp(16px, 6.25vw, 24px) 14px;
    border-top: 0;
    background: #2f343a;
    color: #fff;
  }

  .caps__head {
    gap: 8px;
    margin-bottom: 8px;
    padding: 6px 0 8px;
  }

  .caps__title {
    font-size: clamp(36px, 10.4vw, 48px);
  }

  /* red stays red; the greys lift so they read on charcoal */
  .caps__title .caps__t2 {
    color: rgba(255, 255, 255, 0.5);
  }

  .caps__title .caps__t3 {
    color: #fff;
  }

  .caps__tools {
    height: 96px;
    margin-top: -4px;
  }

  .caps__tools img:nth-child(1) {
    height: 54px;
  }

  .caps__tools img:nth-child(2) {
    height: 88px;
  }

  .caps__tools img:nth-child(3) {
    height: 40px;
  }

  .svc {
    min-height: min(50svh, 380px);
  }

  .svc__art {
    aspect-ratio: 16 / 11;
    margin-bottom: 8px;
  }

  .svc__title {
    font-size: 18px;
  }

  .svc__desc {
    font-size: 13.5px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* the company band opens the next screen rather than crowding this one */
  .caps__about {
    margin-top: 30px;
    padding-top: 26px;
  }

  .svc-rail {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    padding: 4px 4px 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .svc-rail::-webkit-scrollbar {
    display: none;
  }

  .svc {
    flex: 0 0 min(300px, 82vw);
    scroll-snap-align: start;
  }
}

.svc-progress {
  height: 2px;
  background: var(--hairline);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}

/* ---------------- reviews: one voice at a time ----------------
   Editorial, not a card wall: a single large quotation holds the
   room, rotating quietly; the score is a stated fact, not a badge. */

.rvw__title {
  font-size: clamp(40px, 5.2vw, 78px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.98;
  margin-bottom: 18px;
}

.rvw__title span {
  color: var(--ink);
}

.rvw__title b {
  color: var(--accent);
}

/* the head is one centred column: title, then the Google badge on its
   own line, then the sentence under it — each centred on the same axis */
.rvw__head {
  max-width: 760px;
  margin: 0 auto clamp(28px, 5vh, 56px);
  text-align: center;
}

.rvw__fact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 18px 0 0;
  flex-wrap: nowrap;
}

.rvw__g {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}

.rvw__stars {
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: 3px;
  color: #fbbc05;
  line-height: 1;
}

.rvw__score {
  font-family: var(--font-display);
  font-size: clamp(44px, 4.5vw, 64px);
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.rvw__factline {
  font-size: clamp(16px, 1.3vw, 18px);
  color: var(--muted);
  max-width: 44ch;
  margin: 10px auto 0;
  line-height: 1.5;
}

.rvw__factline a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* a deck you swipe: each voice on its own card, the neighbours
   showing at both edges so it is obvious there are more */
.rvw__track {
  --rvw-card: min(560px, 84vw);
  display: flex;
  gap: 18px;
  /* symmetric gutters, so the first and last card centre like the
     rest of them rather than sticking to an edge */
  padding: 4px calc((100% - var(--rvw-card)) / 2) 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.rvw__track::-webkit-scrollbar {
  display: none;
}

.rvw__track:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 20px;
}

/* every card the same height, so the deck is a deck and not a
   staircase; the long reviews scroll inside instead of being cut */
.rvw__card {
  flex: 0 0 var(--rvw-card);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  height: min(62vh, 480px);
  margin: 0;
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 44px -32px rgba(16, 18, 20, 0.55);
}

.rvw__quote {
  margin: 0 0 18px;
  flex: 1 1 auto;
  /* a flex item will not shrink past its content without this, and
     then it would never scroll */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(16, 18, 20, 0.22) transparent;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.7vw, 23px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.rvw__quote::-webkit-scrollbar {
  width: 5px;
}

.rvw__quote::-webkit-scrollbar-thumb {
  background: rgba(16, 18, 20, 0.22);
  border-radius: 999px;
}

.rvw__quote::-webkit-scrollbar-track {
  background: transparent;
}

.rvw__quote strong {
  font-weight: 800;
  color: var(--accent);
}

.rvw__by {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.rvw__avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}

.rvw__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rvw__who b {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.rvw__who i {
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* the byline's stars in Google amber */
.rvw__meta-stars {
  color: #fbbc05;
  letter-spacing: 1px;
}

@media (max-width: 760px) {
  /* the badge stays on one line; it is the sentence that gives way */
  .rvw__fact {
    gap: 10px;
  }
}

/* desktop: the head and all nine services compose to one screen */
@media (min-width: 1100px) {
  .caps > .section__inner {
    padding-top: 84px;
    padding-bottom: 24px;
  }

  .caps__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
    gap: 12px clamp(24px, 3vw, 48px);
    margin-bottom: 16px;
  }

  .caps__title {
    font-size: clamp(46px, 4.6vw, 76px);
  }

  .caps__house {
    max-height: 21vh;
  }

  /* five across, two deep: nine cards without a third row */
  .svc-rail {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
  }

  .svc {
    min-height: min(30vh, 290px);
  }

  .svc__art {
    aspect-ratio: 16 / 10;
    margin-bottom: 8px;
  }

  .svc__kind {
    font-size: 10.5px;
    letter-spacing: 0.12em;
    margin-bottom: 6px;
  }

  .svc__title {
    font-size: 16px;
    margin-bottom: 4px;
  }

  .svc__desc {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .svc__more {
    font-size: 11px;
    margin-top: auto;
  }

  .svc__face--front {
    padding-bottom: 14px;
  }

  /* the back stays legible at the smaller size */
  .svc__face--back {
    padding: 16px 16px 16px;
  }

  .svc__face--back .svc__title {
    font-size: 17px;
    margin-bottom: 6px;
  }

  .svc__backcopy {
    font-size: 12.5px;
    line-height: 1.45;
    margin-bottom: 10px;
  }

  .svc__list {
    gap: 6px;
    margin-bottom: 12px;
  }

  .svc__list li {
    font-size: 12.5px;
    padding-left: 18px;
  }

  .svc__list li::before {
    width: 6px;
    height: 6px;
    top: 5px;
  }

  .svc__btn {
    padding: 10px 14px;
    font-size: 13px;
  }

  /* the company band opens the screen after this one */
  .caps__about {
    margin-top: clamp(40px, 6vh, 80px);
  }
}

/* ---------------- where we've built ---------------- */

.pj__title {
  font-size: clamp(42px, 5.6vw, 84px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.98;
  margin-bottom: 14px;
}

.pj__title span {
  color: var(--ink);
}

.pj__title b {
  color: var(--accent);
}

/* the button closes the map, centred under it */
.pj__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: clamp(18px, 2.6vh, 28px) auto 0;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease;
}

.pj__cta:hover {
  background: #b30000;
}

#projects > .section__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#projects .projects__layout {
  width: 100%;
}

/* the quiet grey map: applied to the tiles only, so pins keep colour */
.leaflet-tile-pane {
  filter: grayscale(0.78) brightness(1.06) contrast(0.94);
}

#projectMap {
  border-radius: 16px;
  box-shadow: 0 24px 56px -40px rgba(16, 18, 20, 0.4);
}

.leaflet-bar {
  border: 1px solid var(--hairline) !important;
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: 0 10px 24px -16px rgba(16, 18, 20, 0.35) !important;
}

.leaflet-control-zoom a {
  border: 0 !important;
  color: var(--ink) !important;
}

/* Before and After hands straight to Where We've Built: one ground,
   one rhythm, each keeping its own headline */
.tf,
#projects {
  background: var(--paper);
}

.tf {
  padding-bottom: clamp(26px, 4vh, 44px);
}

#projects {
  padding-top: clamp(26px, 4vh, 44px);
}

#projects > .section__inner {
  padding-top: clamp(24px, 3.5vh, 40px);
  border-top: 1px solid var(--hairline);
}

/* ---------------- the company, inside What We Build ---------------- */

.caps__crew {
  width: 100%;
  height: auto;
  max-width: 420px;
  max-height: 32vh;
  object-fit: contain;
  justify-self: center;
}

.caps__abouttitle {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.caps__pull {
  margin: 0 0 14px;
  padding-left: 16px;
  border-left: 3px solid var(--accent);
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}

.caps__facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px 28px;
}

/* on a phone the company band and the figures behind it compose to a
   single screen: the crew shot shrinks, the contact rows pair up, and
   the empty page between the sentence and the numbers goes away */
@media (max-width: 760px) {
  /* the figures follow the band directly instead of across a gap */
  .caps {
    padding-bottom: 0;
  }

  .caps > .section__inner {
    padding-bottom: 22px;
  }

  .caps__about {
    margin-top: 18px;
    padding-top: 16px;
  }

  .caps__crew {
    max-height: 11vh;
    max-width: 260px;
    margin-bottom: 0;
  }

  .caps__abouttitle {
    margin: 0 0 7px;
    font-size: 21px;
  }

  .caps__pull {
    margin: 0 0 9px;
    padding-left: 12px;
    font-size: 14.5px;
    line-height: 1.35;
  }

  .caps__lede {
    margin: 0 0 10px;
    font-size: 13.5px;
    line-height: 1.4;
  }

  /* one column: the address runs two lines and the email address is
     longer than half a phone, so a two-up grid would break words */
  .caps__facts {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-top: 12px;
  }

  .caps__facts dt {
    margin: 0 0 1px;
    font-size: 11px;
    letter-spacing: 0.14em;
  }

  .caps__facts dd {
    font-size: 14.5px;
    line-height: 1.35;
  }

  .caps__facts .facts__note {
    margin-top: 2px;
    font-size: 12px;
  }

  /* the numbers follow straight on, two by two */
  .proofbar--stats .proofbar__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 18px 20px 20px;
    gap: 14px 16px;
  }

  .proofbar--stats .proof {
    padding: 0 0 0 16px;
    border-left: 1px solid var(--hairline);
    border-bottom: 0;
  }

  .proofbar--stats .proof:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .proofbar--stats .proof__fig {
    margin-bottom: 2px;
    font-size: 26px;
  }

  .proofbar--stats .proof__fig--text {
    font-size: 17px;
    padding-top: 4px;
  }

  .proofbar--stats .proof__label {
    font-size: 13px;
    line-height: 1.35;
  }
}

/* A short phone still has to land the band and the figures on one
   screen. The rhythm tightens, and the lede steps aside: the pull
   quote directly above it already says what PSI builds, and the
   section is titled What We Build. */
@media (max-width: 760px) and (max-height: 780px) {
  .caps__about {
    margin-top: 10px;
    padding-top: 12px;
  }

  .caps__crew {
    max-height: 9vh;
  }

  .caps__lede {
    display: none;
  }

  .caps__pull {
    margin-bottom: 10px;
    font-size: 14px;
  }

  .caps__facts {
    gap: 7px;
    padding-top: 10px;
  }

  .caps__facts dd {
    font-size: 14px;
  }

  .proofbar--stats .proofbar__inner {
    padding: 12px 20px 14px;
    gap: 10px 14px;
  }

  .proofbar--stats .proof__fig {
    font-size: 24px;
  }

  .proofbar--stats .proof__fig--text {
    font-size: 16px;
  }

  .proofbar--stats .proof__label {
    font-size: 12.5px;
  }
}

/* the divider is a registered property, so it can be animated. it has
   to inherit: the animation runs on the frame, but the clip and the
   handle that read the value are its children */
@property --x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

/* in view and untouched, the slider shows the job by itself */
.ba--auto {
  animation: baSweep 8s ease-in-out infinite;
}

@keyframes baSweep {
  0%,
  6% {
    --x: 50%;
  }
  28%,
  34% {
    --x: 92%;
  }
  58%,
  64% {
    --x: 8%;
  }
  88%,
  100% {
    --x: 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ba--auto {
    animation: none;
  }
}

/* ---------------- before & after ---------------- */

.tf__claim {
  font-size: clamp(32px, 3.6vw, 56px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin-bottom: 0;
  max-width: 17ch;
}

.tf__claim span {
  color: var(--muted);
}

.tf__claim b {
  color: var(--accent);
  font-weight: 800;
}

/* the claim holds one side, the proof the other */
.tf .section__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  grid-template-areas: "head proof";
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
}

.tf__head {
  grid-area: head;
}

.tfx {
  grid-area: proof;
  width: 100%;
}

.tfx__item {
  margin: 0;
}

/* the slider reads as one crafted object */
.tfx__item .ba {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 32px 64px -40px rgba(16, 18, 20, 0.55);
}

@media (max-width: 900px) {
  .tf .section__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "proof";
    justify-items: center;
    text-align: center;
    gap: 20px;
  }

  .tf__claim {
    max-width: 18ch;
  }
}

/* ---------------- before & after: the page ---------------- */

.bap__head .bap__title b {
  color: var(--accent);
}

.bap__lede {
  max-width: 58ch;
}

.bap .section__inner {
  display: grid;
  gap: clamp(36px, 6vh, 72px);
}

.bap__row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
}

.bap__row .ba {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 32px 64px -44px rgba(16, 18, 20, 0.5);
}

.bap__span {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.bap__name {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--ink);
}

.bap__place {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
}

.bap__info .tf__caps {
  margin: 0;
}

@media (max-width: 860px) {
  .bap__row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ---------------- Our Work ---------------- */

.work-hero {
  background: #f4f5f7;
  padding: clamp(92px, 12vh, 140px) 0 clamp(28px, 5vh, 56px);
  text-align: center;
}

.work-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.work-hero__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(44px, 6.4vw, 96px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.96;
}

.work-hero__title span {
  color: var(--ink);
}

.work-hero__title b {
  color: var(--accent);
}

.work-hero__lede {
  margin: 0 0 clamp(10px, 2vh, 22px);
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 500;
  color: #3c4148;
}

.work-hero__stage {
  position: relative;
  margin: 0;
  width: min(900px, 100%);
  aspect-ratio: 16 / 9;
  max-height: 52vh;
}

.work-hero__stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.32s ease;
}

.work-map #projectMap {
  height: clamp(340px, 52vh, 560px);
}

/* the search bar */
.wsearch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: clamp(18px, 3vh, 28px);
}

.wsearch__field {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 320px;
  max-width: 460px;
  padding: 0 18px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: #fff;
  transition: border-color 0.2s ease;
}

.wsearch__field:focus-within {
  border-color: var(--accent);
}

.wsearch__icon {
  color: var(--muted);
  font-size: 15px;
  transform: rotate(-45deg);
}

.wsearch__field input {
  flex: 1 1 auto;
  min-width: 0;
  height: 50px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  outline: 0;
}

.wsearch__count {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.wsearch__empty {
  margin: 28px 0 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
}

/* the gallery: a grid of jobs */
.wgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}

.wjob {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition:
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.wjob:hover,
.wjob:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(214, 0, 0, 0.35);
  box-shadow: 0 24px 48px -30px rgba(16, 18, 20, 0.3);
}

.wjob[hidden] {
  display: none;
}

.wjob__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #eceae6;
}

.wjob__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.wjob:hover .wjob__cover {
  transform: scale(1.05);
}

.wjob__count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-width: 30px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  text-align: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
}

.wjob__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 16px 16px;
}

.wjob__name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
}

.wjob__meta {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* lightbox */
.wlb {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: clamp(14px, 3vw, 40px);
  background: rgba(10, 11, 13, 0.94);
}

.wlb[hidden] {
  display: none;
}

.wlb__img {
  grid-column: 2;
  max-width: 100%;
  max-height: 86svh;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 8px;
}

.wlb__nav,
.wlb__close {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

.wlb__nav:hover,
.wlb__close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.wlb__close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 26px;
}

.wlb__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  margin: 0;
  padding: 0 clamp(14px, 4vw, 60px);
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 640px) {
  .wlb__nav {
    width: 40px;
    height: 40px;
  }
}

/* ---------------- Support assistant ---------------- */
/* Mirrors the elsiaa.com support widget: labeled white pill launcher
   (a 52px circle on phones) with a fade-up entrance, a navy quote pill
   with a dismiss beside it, and a full-screen dim overlay holding one
   tall rounded card: avatar header, stacked pill chips, pill composer
   with a round dark send. */

.sbot__dock {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.sbot--in .sbot__dock {
  opacity: 1;
  transform: none;
}

.sbot__fab {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px 0 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.35);
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.sbot__fab:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.sbot__fab img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.sbot__cta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px 0 24px;
  border-radius: 999px;
  background: var(--navy);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.5);
}

.sbot__cta a {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.sbot__ctax {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.sbot__ctax:hover {
  color: #fff;
}

.sbot__overlay[hidden] {
  display: none;
}

.sbot__overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 16px;
  background: rgba(16, 18, 20, 0.45);
}

.sbot__panel {
  display: flex;
  flex-direction: column;
  width: min(430px, 100%);
  height: min(760px, 100%);
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.5);
}

.sbot__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px 18px 20px;
  border-bottom: 1px solid var(--hairline);
  background: #fff;
}

.sbot__avatar {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: 0 0 auto;
}

.sbot__headtext {
  flex: 1 1 auto;
  min-width: 0;
}

.sbot__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
}

.sbot__sub {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--muted);
}

.sbot__close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 17px;
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.2s ease;
}

.sbot__close:hover {
  color: var(--ink);
}

.sbot__log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 18px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sbot__msg {
  max-width: 90%;
  padding: 13px 17px;
  border-radius: 18px;
  font-size: 16px;
  line-height: 1.5;
}

.sbot__msg--psi {
  align-self: flex-start;
  background: #f2f3f4;
}

.sbot__msg--you {
  align-self: flex-end;
  background: var(--navy);
  color: #fff;
}

.sbot__msg a {
  color: var(--accent);
  font-weight: 600;
}

.sbot__msg--you a {
  color: #fff;
}

.sbot__hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 10px 0;
}

.sbot__typing {
  display: flex;
  gap: 5px;
  align-items: center;
  min-height: 20px;
}

.sbot__typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: sbotDot 1.1s ease-in-out infinite;
}

.sbot__typing i:nth-child(2) {
  animation-delay: 0.18s;
}

.sbot__typing i:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes sbotDot {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

.sbot__chips {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 18px 14px;
}

.sbot__chip {
  padding: 12px 20px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.sbot__chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.sbot__form {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px calc(18px + env(safe-area-inset-bottom));
  background: #fff;
}

.sbot__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #f2f3f4;
  font: inherit;
  font-size: 16px;
}

.sbot__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.sbot__send {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s ease;
}

.sbot__send:hover {
  background: var(--accent);
}

@media (max-width: 760px) {
  .sbot__fab {
    width: 52px;
    height: 52px;
    min-height: 0;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .sbot__fablabel {
    display: none;
  }
  .sbot__fab img {
    width: 32px;
    height: 32px;
  }
  .sbot__cta {
    padding: 0 6px 0 16px;
  }
  .sbot__cta a {
    min-height: 44px;
    font-size: 12px;
  }
  .sbot__ctax {
    width: 30px;
    height: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sbot__dock {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .sbot__fab,
  .sbot__chip,
  .sbot__send,
  .sbot__close,
  .sbot__ctax {
    transition: none;
  }
  .sbot__typing i {
    animation: none;
  }
}

/* ---------------- the planner's type: heavier, darker, tighter ----------------
   The labels were thin light-grey caps tracked wide, so the one thing to
   do on each screen read as fine print. Everything the hand lands on is
   bold now and set in ink. */
.quote__progress-label {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--ink);
}

.quote__q {
  font-size: clamp(21px, 2vw, 25px);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.quote__note {
  font-weight: 600;
}

.quote__field label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ink);
}

.quote__field input[type="text"],
.quote__field input[type="email"],
.quote__field input[type="tel"],
.quote__field select,
.quote__field textarea {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.quote__opt {
  font-weight: 600;
}

.quote__opt-label {
  font-weight: 800;
}

.quote__opt-hint {
  font-weight: 500;
}

.quote__back {
  font-weight: 700;
  color: var(--ink);
}

.quote__restart {
  font-weight: 700;
}