/* Amend Developments — design tokens and system per design.md */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-var-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}

:root {
  --canvas: #171412;
  --panel: #1e1a17;
  --raised: #26201b;
  --ink: #f2ede6;
  --ink-2: #c6bcaf;
  --ink-3: #978c7e;
  --hairline: rgba(242, 237, 230, 0.14);
  --border-strong: rgba(242, 237, 230, 0.28);
  /* Boundary of an interactive control. Alpha held at or above 0.36 so the
     border clears WCAG 2.1 SC 1.4.11 (3:1) on canvas, panel, and raised. */
  --border-control: rgba(242, 237, 230, 0.38);
  --border-control-hover: rgba(242, 237, 230, 0.6);
  --accent: #da291c;
  --accent-hover: #b01e0a;
  --accent-text: #f2564a;
  --container: 1240px;
  --wide: 1400px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(5rem, 10vw, 8.5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 76px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  /* Images carry width/height attributes for CLS. Without height:auto the
     attribute height is used literally and the picture stretches wherever CSS
     constrains the width (galleries, in-post figures). */
  height: auto;
  display: block;
}

/* ---------- Typography ---------- */

h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.display,
h1 {
  font-size: clamp(2.75rem, 6vw, 5.5rem);
  font-weight: 580;
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.04;
}

h2 {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 575;
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.1;
}

h3 {
  font-size: 1.3rem;
  font-weight: 600;
  font-stretch: 110%;
  line-height: 1.25;
}

.lede {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 58ch;
}

.meta {
  font-size: 0.8125rem;
  font-weight: 560;
  font-stretch: 110%;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-3);
}

.body-copy {
  color: var(--ink-2);
  max-width: 68ch;
}

.body-copy p + p {
  margin-top: 1.1em;
}

.body-copy strong {
  color: var(--ink);
  font-weight: 600;
}

a {
  color: var(--accent-text);
  text-decoration: none;
}

.text-link {
  color: var(--accent-text);
  font-weight: 500;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s var(--ease);
}

.text-link:hover {
  background-size: 100% 1px;
}

/* Standalone .text-link CTAs earn their hover-grow underline, but this one sits
   mid-sentence, where colour alone is not enough (WCAG 1.4.1). */
.stars-row .text-link {
  background-size: 100% 1px;
  background-image: linear-gradient(
    rgba(242, 86, 74, 0.4),
    rgba(242, 86, 74, 0.4)
  );
}

.stars-row .text-link:hover {
  background-image: linear-gradient(currentColor, currentColor);
}

::selection {
  background: var(--accent);
  color: #ffffff;
}

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

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

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

.container--wide {
  max-width: var(--wide);
}

.section {
  padding-block: var(--section);
}

.section--panel {
  background: var(--panel);
}

.section--tight {
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-head p {
  margin-top: 1.25rem;
  color: var(--ink-2);
  font-size: 1.125rem;
  max-width: 52ch;
}

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

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 1.75rem;
  min-height: 44px;
  border-radius: 0;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  font-stretch: 110%;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn--primary {
  background: var(--accent);
  color: #ffffff;
}

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

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-control);
}

.btn--ghost:hover {
  border-color: var(--border-control-hover);
  background: rgba(242, 237, 230, 0.05);
}

.btn--sm {
  padding: 0.7rem 1.25rem;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 60;
  background: var(--accent);
  color: #ffffff;
  padding: 0.75rem 1.25rem;
}

.skip-link:focus {
  top: 1rem;
}

/* ---------- Navigation ---------- */

.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 40;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background-color 0.35s ease, border-color 0.35s ease, height 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}

.nav.is-scrolled {
  height: 64px;
  background: rgba(23, 20, 18, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--hairline);
}

.nav__inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.nav__logo img {
  height: 44px;
  width: auto;
  transition: height 0.35s var(--ease);
}

.nav.is-scrolled .nav__logo img {
  height: 36px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links a:not(.btn) {
  position: relative;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  font-stretch: 110%;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-block: 0.5rem;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.nav__links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.nav__links a:not(.btn):hover::after {
  transform: scaleX(1);
}

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

.nav__links a[aria-current="page"] {
  border-bottom-color: var(--accent);
}

.nav__phone {
  font-variant-numeric: tabular-nums;
}

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  color: var(--ink);
  width: 44px;
  height: 44px;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}

.nav__toggle svg {
  display: block;
}

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--canvas);
  display: none;
  flex-direction: column;
  padding: calc(var(--gutter)) var(--gutter);
  overflow-y: auto;
}

.mobile-menu.is-open {
  display: flex;
}

.mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(var(--nav-h) - var(--gutter));
}

.mobile-menu__top img {
  height: 40px;
  width: auto;
}

.mobile-menu__close {
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  color: var(--ink);
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu__links {
  list-style: none;
  margin: auto 0;
  padding: 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mobile-menu__links > li > a {
  display: block;
  color: var(--ink);
  font-size: 2rem;
  font-weight: 580;
  font-stretch: 125%;
  text-transform: uppercase;
  padding-block: 0.6rem;
}

.mobile-menu__links > li > a:hover {
  color: var(--accent-text);
}

.mobile-menu__sub {
  list-style: none;
  padding: 0 0 0.75rem;
  margin: 0;
}

.mobile-menu__sub a {
  display: block;
  color: var(--ink-2);
  font-size: 1.0625rem;
  padding-block: 0.35rem;
}

.mobile-menu__foot {
  border-top: 1px solid var(--hairline);
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

body.menu-open {
  overflow: hidden;
}

/* ---------- Home page: wide picture grid ---------- */

/* The home page sells on photographs, so its sections run on the same 1400px
   grid the nav already uses rather than the 1240px text grid. Every picture
   gains that width, and the hero headline lines up with the logo instead of
   starting 80px inside it. The footer is left on the narrow grid so it still
   matches every other page. */
.page-home main .container:not(.container--wide) {
  max-width: var(--wide);
}

/* ---------- Hero (home) ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Crossfading frames. Without JS only the first is painted, so the hero is a
   single photograph and nothing depends on the script arriving. */
.hero__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
}

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

body.js .hero__frame { transition: opacity 1.5s var(--ease); }
body.js .hero__media.is-rotating .hero__frame:not(.is-active) { opacity: 0; }
body.js .hero__media.is-rotating .hero__frame.is-active { opacity: 1; }

/* The scrim exists to make the headline legible, so it is shaped around the
   headline instead of being poured over the whole photograph: a pocket in the
   bottom-left corner, a light wash at the top for the nav, and the rest of the
   frame left alone. The previous version reached 0.9 across the left half and
   the room behind it was effectively invisible. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(115% 80% at 0% 100%, rgba(15, 13, 12, 0.36) 0%, rgba(15, 13, 12, 0.16) 40%, transparent 62%),
    linear-gradient(90deg, rgba(15, 13, 12, 0.5) 0%, rgba(15, 13, 12, 0.28) 40%, rgba(15, 13, 12, 0.05) 75%, transparent 100%),
    linear-gradient(180deg, rgba(15, 13, 12, 0.44) 0%, rgba(15, 13, 12, 0.07) 22%, transparent 42%, rgba(15, 13, 12, 0.3) 62%, rgba(15, 13, 12, 0.58) 86%, rgba(15, 13, 12, 0.72) 100%);
}

.hero__content {
  width: 100%;
  padding-bottom: clamp(3.5rem, 8vh, 6rem);
  padding-top: calc(var(--nav-h) + 3rem);
}

.hero__content h1 {
  max-width: 17ch;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 2px 34px rgba(0, 0, 0, 0.4);
}

.hero__content .lede {
  margin-top: 1.5rem;
  color: var(--ink);
  font-weight: 500;
  max-width: 44ch;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6), 0 1px 20px rgba(0, 0, 0, 0.45);
}

.hero__cta {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* cinematic settle on load */
body.js .hero__media {
  animation: hero-settle 1.8s var(--ease) both;
}

@keyframes hero-settle {
  from {
    transform: scale(1.06);
  }
  to {
    transform: scale(1);
  }
}

/* ---------- Inner-page banner ---------- */

.banner {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
}

.banner--short {
  min-height: 46vh;
}

.banner__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(23, 20, 18, 0.55), rgba(23, 20, 18, 0.3) 45%, rgba(23, 20, 18, 0.88));
}

.banner__content {
  width: 100%;
  padding-top: calc(var(--nav-h) + 4rem);
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
}

.banner__content .meta {
  color: var(--ink-2);
  margin-bottom: 0.85rem;
  display: block;
}

.banner__content h1 {
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  max-width: 20ch;
}

.banner__content .lede {
  margin-top: 1.25rem;
  color: var(--ink);
  opacity: 0.9;
}

/* ---------- Split rows (services zig-zag) ---------- */

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

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

.split__media {
  overflow: hidden;
}

.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform 0.6s var(--ease);
}

.split:hover .split__media img {
  transform: scale(1.03);
}

.split__body h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-stretch: 118%;
  font-weight: 580;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.25;
}

.split__body p {
  margin-top: 1.1rem;
  color: var(--ink-2);
  max-width: 52ch;
}

.split__body .text-link {
  display: inline-block;
  margin-top: 1.4rem;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 8fr 4fr;
  }
  .split--flip {
    grid-template-columns: 4fr 8fr;
  }
  .split--flip .split__media {
    order: 2;
  }
}

/* ---------- Homepage conversion flow ---------- */

.home-proof {
  border-bottom: 1px solid var(--hairline);
  background: var(--panel);
}

.home-proof__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-proof__grid p {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 1.35rem 1rem;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.home-proof__grid p:nth-child(even) { border-right: 0; }
.home-proof__grid p:nth-child(n + 3) { border-bottom: 0; }

.home-proof__grid strong {
  color: var(--ink);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-stretch: 112%;
}

.home-proof__grid span,
.home-proof__grid a {
  color: var(--ink-2);
  font-size: 0.85rem;
}

.home-proof__grid a:hover { color: var(--accent-text); }

.home-portfolio__grid {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.home-portfolio__grid a {
  display: grid;
  grid-template-rows: 1fr auto;
  min-width: 0;
  color: var(--ink);
}

.home-portfolio__grid img {
  width: 100%;
  height: 100%;
  min-height: 20rem;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.home-portfolio__grid a:hover img { transform: scale(1.025); }

.home-portfolio__grid span {
  padding-top: 0.8rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.home-portfolio__link {
  display: inline-block;
  margin-top: 2rem;
}

.home-services__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 2.5vw, 2rem);
}

.home-service__media {
  display: block;
  overflow: hidden;
}

.home-service__media img {
  width: 100%;
  /* Without this the HTML height attribute wins as a presentational hint and
     aspect-ratio never applies, leaving each card at the image's full height. */
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.home-service:hover .home-service__media img { transform: scale(1.025); }

.home-service__body { padding-top: 1.3rem; }

.home-service__body h3 {
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  text-transform: uppercase;
  font-stretch: 115%;
}

.home-service__body h3 a { color: var(--ink); }

.home-service__body p {
  margin-top: 0.8rem;
  color: var(--ink-2);
  max-width: 54ch;
}

.home-service__body .text-link {
  display: inline-block;
  margin-top: 1rem;
}

.home-case-study__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.home-case-study__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.home-case-study__body h2 { margin-top: 0.65rem; }

.home-case-study__body > p:not(.meta) {
  margin-top: 1.25rem;
  color: var(--ink-2);
  max-width: 52ch;
}

.home-case-study dl { margin: 2rem 0; }

.home-case-study dl div {
  display: grid;
  gap: 0.35rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--hairline);
}

.home-case-study dt {
  color: var(--ink-2);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.home-case-study dd {
  margin: 0;
  color: var(--ink);
}

.home-process .section { padding-top: clamp(4rem, 8vw, 7rem); }

@media (min-width: 768px) {
  .home-proof__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-proof__grid p {
    padding: 1.7rem clamp(1rem, 2vw, 2rem);
    border-bottom: 0;
  }
  .home-proof__grid p:nth-child(even) { border-right: 1px solid var(--hairline); }
  .home-proof__grid p:last-child { border-right: 0; }
  .home-portfolio__grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(17rem, 0.7fr);
    grid-template-rows: repeat(2, clamp(15rem, 24vw, 24rem));
  }
  .home-portfolio__lead { grid-row: 1 / 3; }
  .home-portfolio__grid img { min-height: 0; }
  .home-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* An odd service count leaves the last card alone in its row with a hole
     beside it. Let that card span the row and read media-beside-body instead. */
  .home-services__grid > .home-service:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
  }
  .home-services__grid > .home-service:last-child:nth-child(odd) .home-service__body {
    padding-top: 0;
  }
  .home-case-study__grid { grid-template-columns: minmax(0, 7fr) minmax(20rem, 5fr); }
  .home-case-study dl div { grid-template-columns: 5rem 1fr; gap: 1rem; }
}

@media (max-width: 767px) {
  .hero { min-height: 88svh; }
  /* The desktop scrim is built out of horizontal gradients, and on a 390px
     viewport those cover the whole width and put the room back in the dark.
     A phone hero only needs the bottom shaded, where the headline sits. */
  .hero__media::after {
    background: linear-gradient(
      180deg,
      rgba(15, 13, 12, 0.5) 0%,
      rgba(15, 13, 12, 0.14) 18%,
      rgba(15, 13, 12, 0.08) 36%,
      rgba(15, 13, 12, 0.44) 60%,
      rgba(15, 13, 12, 0.72) 84%,
      rgba(15, 13, 12, 0.82) 100%
    );
  }
  .hero__content {
    width: auto;
    max-width: 100%;
    margin-inline: 0;
    padding-bottom: 2.5rem;
  }
  .hero__content h1 {
    max-width: 100%;
    font-size: clamp(2.35rem, 10vw, 2.9rem);
    font-stretch: 110%;
  }
  .hero__content .lede {
    max-width: 100%;
    font-size: 1.0625rem;
    line-height: 1.5;
  }
  .hero__cta {
    display: grid;
    width: 100%;
  }
  .hero__cta .btn { width: 100%; }
  .home-portfolio__grid img { min-height: 0; aspect-ratio: 4 / 3; }
  .home-services__grid { gap: 3rem; }
}

/* ---------- Quote band ---------- */

.quote-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(7rem, 16vw, 13rem);
}

.quote-band__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.quote-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quote-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(23, 20, 18, 0.86) 0%, rgba(23, 20, 18, 0.7) 42%, rgba(23, 20, 18, 0.22) 100%);
}

.quote-band blockquote {
  margin: 0;
  max-width: 52rem;
}

.quote-band blockquote p {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.3;
  font-weight: 460;
  font-stretch: 106%;
  color: var(--ink);
}

.quote-band figcaption {
  margin-top: 1.75rem;
  color: var(--ink-2);
}

/* ---------- Pillars (why trust us) ---------- */

.pillars {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hairline);
}

.pillar {
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--hairline);
}

.pillar p {
  margin-top: 0.8rem;
  color: var(--ink-2);
  max-width: 46ch;
}

@media (min-width: 768px) {
  .pillars {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2.5rem, 6vw, 5rem);
  }
}

/* ---------- Process ---------- */

.process {
  counter-reset: step;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hairline);
}

.process__step {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem clamp(1.5rem, 4vw, 3.5rem);
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}

.process__step::before {
  content: counter(step, decimal-leading-zero);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 700;
  font-stretch: 116%;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
}

.process__step p {
  margin-top: 0.7rem;
  color: var(--ink-2);
  max-width: 58ch;
}

/* ---------- Work strip (home) ---------- */

.work-strip {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-inline: max(var(--gutter), calc((100vw - var(--wide)) / 2 + var(--gutter)));
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.work-strip::-webkit-scrollbar {
  display: none;
}

.work-strip a {
  flex: 0 0 auto;
  width: min(82vw, 560px);
  scroll-snap-align: start;
  overflow: hidden;
  position: relative;
  display: block;
}

.work-strip img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.55s var(--ease);
}

.work-strip a:hover img {
  transform: scale(1.04);
}

.work-strip figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1.5rem 1.25rem 1rem;
  background: linear-gradient(transparent, rgba(23, 20, 18, 0.85));
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
}

@media (min-width: 900px) {
  .work-strip {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(1rem, 1.5vw, 1.5rem);
    max-width: 1600px;
    margin-inline: auto;
    overflow: visible;
    padding-inline: var(--gutter);
    padding-bottom: 0;
  }

  .work-strip a {
    grid-column: span 6;
    width: auto;
  }

  .work-strip a:nth-child(4n + 1),
  .work-strip a:nth-child(4n) {
    grid-column: span 7;
  }

  .work-strip a:nth-child(4n + 2),
  .work-strip a:nth-child(4n + 3) {
    grid-column: span 5;
  }

  .work-strip img {
    height: clamp(390px, 36vw, 570px);
    aspect-ratio: auto;
  }

  .work-strip figcaption {
    padding: 4rem 1.5rem 1.4rem;
    font-size: 1.05rem;
  }
}

/* ---------- Collections grid (projects index) ---------- */

.collections {
  display: grid;
  gap: 1.25rem;
}

.collections a {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
}

.collections img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.55s var(--ease);
}

.collections a:hover img {
  transform: scale(1.04);
}

.collections .collections__label {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2.25rem 1.5rem 1.25rem;
  background: linear-gradient(transparent, rgba(23, 20, 18, 0.88));
  color: var(--ink);
}

.collections .collections__label h2 {
  text-transform: uppercase;
  font-stretch: 116%;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
}

.collections .collections__label span {
  color: var(--ink-2);
  font-size: 0.875rem;
}

@media (min-width: 700px) {
  .collections {
    grid-template-columns: repeat(2, 1fr);
  }
  .collections a:first-child {
    grid-column: span 2;
  }
  .collections a:first-child img {
    aspect-ratio: 21 / 9;
  }
}

/* ---------- Gallery (masonry) ---------- */

.masonry {
  columns: 1;
  column-gap: 1.25rem;
}

.masonry button {
  display: block;
  width: 100%;
  margin-bottom: 1.25rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
  break-inside: avoid;
}

.masonry img {
  width: 100%;
  transition: transform 0.55s var(--ease), opacity 0.3s ease;
}

.masonry button:hover img {
  transform: scale(1.03);
  opacity: 0.92;
}

@media (min-width: 640px) {
  .masonry {
    columns: 2;
  }
}

@media (min-width: 1024px) {
  .masonry {
    columns: 3;
  }
}

/* ---------- Lightbox ---------- */

.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  width: fit-content;
  max-width: min(94vw, 1200px);
  max-height: 92vh;
  overflow: visible;
}

.lightbox::backdrop {
  background: rgba(10, 8, 7, 0.88);
}

.lightbox img {
  max-width: min(94vw, 1200px);
  max-height: 84vh;
  width: auto;
  height: auto;
  margin-inline: auto;
}

.lightbox__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 0.9rem;
  color: var(--ink-2);
  font-size: 0.875rem;
}

.lightbox__controls {
  display: flex;
  gap: 0.5rem;
}

.lightbox__controls button {
  background: rgba(38, 32, 27, 0.9);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lightbox__controls button:hover {
  border-color: rgba(242, 237, 230, 0.6);
}

/* ---------- Testimonials ---------- */

.quotes {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}

.quotes blockquote {
  margin: 0;
  border-top: 1px solid var(--hairline);
  padding-top: 1.75rem;
}

.quotes blockquote p {
  color: var(--ink-2);
  font-size: 1.0625rem;
}

.quotes blockquote p::before {
  content: "\201C";
  color: var(--accent-text);
  margin-right: 0.15em;
}

.quotes blockquote p::after {
  content: "\201D";
  color: var(--accent-text);
  margin-left: 0.1em;
}

.quotes figcaption,
.quotes .quote-attribution {
  margin-top: 1.1rem;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9375rem;
}

/* Per-review rating, above the quote. Matches the .stars treatment in the
   section head so a card reads as the same 5.0 the heading claims. */
.quotes .review-stars {
  color: var(--accent-text);
  letter-spacing: 0.18em;
  font-size: 0.9375rem;
  line-height: 1;
  margin-bottom: 1rem;
}

.quotes .quote-source {
  display: block;
  margin-top: 0.3rem;
  color: var(--ink-2);
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
}

@media (min-width: 768px) {
  .quotes {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Area / CTA ---------- */

.area-grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.area-grid ul {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
}

.area-grid li {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  font-weight: 500;
  font-size: 1.125rem;
}

.area-grid li:first-child {
  border-top: 1px solid var(--hairline);
}

.area-grid img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
  height: auto;
}

.hero__cta .btn--ghost {
  background: rgba(15, 13, 12, 0.46);
  border-color: rgba(255, 255, 255, 0.48);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

@media (min-width: 900px) {
  .area-grid {
    grid-template-columns: 5fr 7fr;
  }
}

.cta-band {
  text-align: center;
  padding-block: var(--section);
  border-top: 1px solid var(--hairline);
}

.cta-band h2 {
  max-width: 24ch;
  margin-inline: auto;
}

.cta-band p {
  margin: 1.25rem auto 0;
  color: var(--ink-2);
  max-width: 52ch;
}

.cta-band__actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.cta-band .phone-big {
  display: block;
  margin-top: 2rem;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 620;
  font-stretch: 118%;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.cta-band .phone-big:hover {
  color: var(--accent-text);
}

/* ---------- Detail lists on service pages ---------- */

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

.detail-list__item {
  display: grid;
  gap: 0.6rem 3rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--hairline);
}

.detail-list__item p {
  color: var(--ink-2);
  max-width: 58ch;
}

@media (min-width: 900px) {
  .detail-list__item {
    grid-template-columns: 5fr 7fr;
  }
}

/* ---------- Forms ---------- */

.contact-grid {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
}

@media (min-width: 980px) {
  .contact-grid {
    grid-template-columns: 5fr 7fr;
  }
}

.contact-info h3 {
  margin-top: 2.25rem;
  font-size: 1.05rem;
  text-transform: uppercase;
  font-stretch: 112%;
  letter-spacing: 0.04em;
}

.contact-info h3:first-of-type {
  margin-top: 2.5rem;
}

.contact-info p {
  margin-top: 0.5rem;
  color: var(--ink-2);
}

.contact-info .phone-big {
  font-size: 1.9rem;
  font-weight: 620;
  font-stretch: 118%;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.contact-info .phone-big:hover {
  color: var(--accent-text);
}

.form {
  display: grid;
  gap: 1.4rem;
}

.form__row {
  display: grid;
  gap: 1.4rem;
}

@media (min-width: 640px) {
  .form__row--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 560;
  font-stretch: 110%;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-2);
  margin-bottom: 0.55rem;
}

.field .req {
  color: var(--accent-text);
}

.project-facts {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--hairline);
}

.project-facts div {
  display: grid;
  gap: 0.4rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--hairline);
}

.project-facts dt {
  color: var(--ink-3);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.project-facts dd {
  margin: 0;
  color: var(--ink);
}

@media (min-width: 768px) {
  .project-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-facts div { padding-right: 2rem; }
}

.form__optional,
.field__help {
  color: var(--ink-3);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.field__help {
  margin-top: 0.5rem;
}

.field input[type="file"] {
  padding: 0.65rem;
}

.field input[type="file"]::file-selector-button {
  margin-right: 0.8rem;
  border: 0;
  background: var(--raised);
  color: var(--ink);
  font: inherit;
  padding: 0.55rem 0.75rem;
  cursor: pointer;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border-control);
  border-radius: 2px;
  color: var(--ink);
  font: inherit;
  padding: 0.85rem 1rem;
  transition: border-color 0.2s ease;
}

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

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

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--border-control-hover);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--accent-text);
  outline: 2px solid rgba(242, 86, 74, 0.35);
  outline-offset: 0;
}

.form__note {
  color: var(--ink-3);
  font-size: 0.9375rem;
}

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

.footer {
  border-top: 1px solid var(--hairline);
  background: var(--panel);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
}

.footer__grid {
  display: grid;
  gap: 2.5rem;
}

.footer__brand img {
  height: 52px;
  width: auto;
}

.footer__brand p {
  margin-top: 1.25rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 30ch;
}

.footer h2 {
  font-size: 0.8125rem;
  font-weight: 560;
  font-stretch: 110%;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1.25;
  color: var(--ink-3);
  margin-bottom: 1.1rem;
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer li + li {
  margin-top: 0.55rem;
}

.footer ul a {
  color: var(--ink-2);
  font-size: 0.875rem;
  line-height: 1.5;
}

.footer ul a:hover {
  color: var(--accent-text);
}

.footer__meta p {
  color: var(--ink-2);
  font-size: 0.875rem;
  line-height: 1.6;
}

.footer__meta a {
  font-size: 0.875rem;
}

.footer__meta p + p {
  margin-top: 0.6rem;
}

.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  color: var(--ink-3);
  font-size: 0.875rem;
}

@media (min-width: 820px) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  }
}

/* ---------- Reveal animations ---------- */

body.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
}

body.reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
}

/* ---------- Responsive nav ---------- */

@media (max-width: 1023px) {
  .nav__links {
    display: none;
  }
  .nav__toggle {
    display: flex;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  body.js .hero__media {
    animation: none;
  }
  body.js .hero__frame {
    transition: none;
  }
  body.reveal-ready .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .split__media img,
  .work-strip img,
  .collections img,
  .masonry img {
    transition: none;
  }
  .btn:active {
    transform: none;
  }
}

/* ================================================================
   Motion system — cinematic polish layer
   All effects are gated on body.js, GPU-only (transform/opacity/clip),
   and disabled under prefers-reduced-motion.
   ================================================================ */

/* ---------- Cross-document page transitions ---------- */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: vt-out 0.25s ease both;
}

::view-transition-new(root) {
  animation: vt-in 0.4s ease both;
}

@keyframes vt-out {
  to {
    opacity: 0;
  }
}

@keyframes vt-in {
  from {
    opacity: 0;
  }
}

/* ---------- Hero and banner content choreography ---------- */

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

body.js .hero__content > *,
body.js .banner__content > * {
  opacity: 0;
  animation: rise-in 0.8s var(--ease) forwards;
}

body.js .hero__content > *:nth-child(1),
body.js .banner__content > *:nth-child(1) {
  animation-delay: 0.12s;
}

body.js .hero__content > *:nth-child(2),
body.js .banner__content > *:nth-child(2) {
  animation-delay: 0.24s;
}

body.js .hero__content > *:nth-child(3),
body.js .banner__content > *:nth-child(3) {
  animation-delay: 0.36s;
}

/* ---------- Scroll parallax (CSS scroll-driven, no listeners) ---------- */

@supports (animation-timeline: view()) {
  body.js .hero__media img {
    height: 118%;
    animation: parallax-drift linear both;
    animation-timeline: scroll();
    animation-range: 0 100svh;
  }

  body.js .banner__media img,
  body.js .quote-band__media img {
    height: 118%;
    animation: parallax-drift linear both;
    animation-timeline: view();
    animation-range: cover;
  }
}

@keyframes parallax-drift {
  from {
    transform: translateY(-9%);
  }
  to {
    transform: translateY(0);
  }
}

/* ---------- Curtain reveals for photography ----------
   The clip lives on the img, never on the observed .reveal element:
   a fully clipped element never intersects, so the observer would
   never fire and the curtain would stay shut. */

body.reveal-ready .reveal.reveal-media {
  opacity: 1;
  transform: none;
}

body.reveal-ready .reveal-media img {
  clip-path: inset(0 100% 0 0);
  transform: scale(1.08);
}

body.reveal-ready .reveal-media.is-visible img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
  transition: clip-path 0.9s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
}

/* hover zooms re-declared after the curtain rules so they win the cascade */
body.js .split:hover .split__media img {
  transform: scale(1.03);
}

body.js .collections a:hover img {
  transform: scale(1.04);
}

/* ---------- Section heading rule draw ---------- */

.section-head h1::after,
.section-head h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin-top: 1.4rem;
  background: var(--accent);
  transform-origin: left;
}

body.reveal-ready .section-head.reveal h1::after,
body.reveal-ready .section-head.reveal h2::after {
  transform: scaleX(0);
  transition: transform 0.8s var(--ease) 0.2s;
}

body.reveal-ready .section-head.reveal.is-visible h1::after,
body.reveal-ready .section-head.reveal.is-visible h2::after {
  transform: scaleX(1);
}

.cta-band h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 1.4rem auto 0;
  background: var(--accent);
}

/* ---------- Lightbox entrance ---------- */

.lightbox[open] {
  animation: lightbox-in 0.35s var(--ease);
}

.lightbox::backdrop {
  animation: vt-in 0.35s ease both;
}

@keyframes lightbox-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
}

.lightbox img {
  transition: opacity 0.25s ease;
}

/* ---------- Social buttons ---------- */

.social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-strong);
  color: var(--ink-2);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.social a:hover {
  border-color: rgba(242, 237, 230, 0.6);
  color: var(--ink);
}

.social a:active {
  transform: scale(0.94);
}

.social svg {
  display: block;
}

/* ---------- Form status note ---------- */

.form__status {
  border: 1px solid var(--border-strong);
  padding: 1rem 1.25rem;
  color: var(--ink);
  font-size: 0.9375rem;
}

/* ---------- Reduced motion: kill the polish layer ---------- */

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }

  body.js .hero__content > *,
  body.js .banner__content > * {
    animation: none;
    opacity: 1;
  }

  body.js .hero__media img,
  body.js .banner__media img,
  body.js .quote-band__media img {
    height: 100%;
    animation: none;
  }

  body.reveal-ready .reveal-media img {
    clip-path: none;
    transform: none;
    transition: none;
  }

  body.reveal-ready .section-head.reveal h1::after,
body.reveal-ready .section-head.reveal h2::after {
    transform: none;
    transition: none;
  }

  .lightbox[open],
  .lightbox::backdrop {
    animation: none;
  }
}

/* ================================================================
   Polish layer 2 — word-mask headlines, trust strip, FAQ, mobile CTA
   ================================================================ */

/* ---------- Word-mask headline reveals ---------- */

h1 .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

h1 .w > span {
  display: inline-block;
}

body.js .hero__content > h1,
body.js .banner__content > h1 {
  animation: none;
  opacity: 1;
}

body.js .hero__content h1 .w > span,
body.js .banner__content h1 .w > span {
  transform: translateY(112%);
  animation: word-up 0.85s var(--ease) forwards;
  animation-delay: calc(0.15s + var(--w) * 70ms);
}

@keyframes word-up {
  to {
    transform: translateY(0);
  }
}

body.js .hero__content > *:nth-child(4),
body.js .banner__content > *:nth-child(4) {
  animation-delay: 0.48s;
}

/* ---------- Hero trust strip ---------- */

.trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.5rem;
  margin: 2.5rem 0 0;
  padding: 0;
}

.trust li {
  font-size: 0.8125rem;
  font-weight: 560;
  font-stretch: 110%;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-2);
  padding: 0.2rem 1.25rem;
  border-left: 1px solid rgba(242, 237, 230, 0.3);
}

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

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

:root {
  interpolate-size: allow-keywords;
}

.faq {
  border-top: 1px solid var(--hairline);
  max-width: 52rem;
}

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

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.4rem 0;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ink);
  transition: color 0.2s ease;
}

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

.faq summary:hover {
  color: var(--accent-text);
}

.faq summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1;
  color: var(--accent-text);
  transition: transform 0.35s var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq .faq__a {
  padding: 0 2.5rem 1.5rem 0;
  color: var(--ink-2);
  max-width: 62ch;
}

.faq details::details-content {
  height: 0;
  overflow: clip;
  transition: height 0.45s var(--ease), content-visibility 0.45s allow-discrete;
}

.faq details[open]::details-content {
  height: auto;
}

/* ---------- Sticky mobile contact bar ---------- */

.mobile-cta {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 45;
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
  background: rgba(23, 20, 18, 0.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding-bottom: env(safe-area-inset-bottom);
}

.mobile-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-stretch: 110%;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink);
  overflow: hidden;
  white-space: nowrap;
}

.mobile-cta a:last-child {
  background: var(--accent);
  color: #ffffff;
}

.mobile-cta a:last-child:active {
  background: var(--accent-hover);
}

@media (max-width: 767px) {
  .hero__content h1 {
    font-size: clamp(2.35rem, 10vw, 2.9rem);
  }

  .mobile-cta {
    display: grid;
  }

  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }
}

/* ---------- Reduced motion for polish layer 2 ---------- */

@media (prefers-reduced-motion: reduce) {
  body.js .hero__content h1 .w > span,
  body.js .banner__content h1 .w > span {
    transform: none;
    animation: none;
  }

  .faq details::details-content {
    transition: none;
  }

  .faq summary::after {
    transition: none;
  }
}

/* ---------- Google rating row ---------- */

.stars-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.25rem;
  color: var(--ink);
  font-weight: 600;
}

.stars {
  color: var(--accent-text);
  letter-spacing: 0.18em;
  font-size: 1.05rem;
  line-height: 1;
}

.quotes-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 3rem;
}

/* ---------- Before / after pairs ---------- */

.ba-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.ba-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.ba-shot {
  margin: 0;
  position: relative;
  overflow: hidden;
}

/* Paired shots share a frame so the eye compares the room, not the crop. */
.ba-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.ba-shot figcaption {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
}

.ba-tag {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(23, 20, 18, 0.82);
  border: 1px solid var(--border-control);
  backdrop-filter: blur(4px);
}

.ba-tag--after {
  background: var(--accent);
  border-color: var(--accent);
  /* The cream --ink reads 4.17:1 on the brand red, under the 4.5:1 that 12px
     bold needs. Pure white clears it at 4.87:1 without touching the red. */
  color: #ffffff;
}

.ba-note {
  color: var(--ink-2);
  font-size: 1rem;
  margin-top: 0.5rem;
}

@media (min-width: 768px) {
  .ba-pair {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .ba-note {
    grid-column: 1 / -1;
    margin-top: 0.25rem;
  }
}

/* ---------- Instagram carousel ---------- */

.ig-car__track {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-inline: max(var(--gutter), calc((100vw - var(--wide)) / 2 + var(--gutter)));
  padding-bottom: 0.5rem;
}

.ig-car__track::-webkit-scrollbar {
  display: none;
}

.ig-car__slide {
  position: relative;
  flex: 0 0 auto;
  width: clamp(220px, 26vw, 300px);
  scroll-snap-align: start;
  overflow: hidden;
  isolation: isolate;
}

.ig-car__slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.55s var(--ease), opacity 0.3s ease;
}

.ig-car__slide:hover img {
  transform: scale(1.05);
  opacity: 0.85;
}

.ig-car__glyph {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.25s ease;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
}

.ig-car__slide:hover .ig-car__glyph,
.ig-car__slide:focus-visible .ig-car__glyph {
  opacity: 1;
}

.ig-car__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.ig-car__controls {
  display: flex;
  gap: 0.5rem;
}

.ig-car__controls button {
  background: none;
  border: 1px solid var(--border-strong);
  color: var(--ink);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

.ig-car__controls button:hover {
  border-color: rgba(242, 237, 230, 0.6);
}

.ig-car__controls button:disabled {
  opacity: 0.35;
  cursor: default;
}

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

  .ig-car__slide img {
    transition: none;
  }
}

/* ---------- Area list links + 5-column footer ---------- */

.area-grid a {
  color: var(--ink);
  transition: color 0.2s ease;
}

.area-grid a:hover {
  color: var(--accent-text);
}

@media (min-width: 820px) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
  }
}

/* ================================================================
   Renovation assistant widget
   ================================================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.chat__fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 46;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #ffffff;
  border: 0;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

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

.chat__fab:active {
  transform: scale(0.94);
}

.chat__panel {
  position: fixed;
  right: 1.25rem;
  bottom: calc(1.25rem + 56px + 0.75rem);
  z-index: 46;
  width: min(380px, calc(100vw - 2.5rem));
  max-height: min(560px, calc(100dvh - 8rem));
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.chat__panel[hidden] {
  display: none;
}

body.js .chat__panel:not([hidden]) {
  animation: chat-in 0.3s var(--ease);
}

@keyframes chat-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}

.chat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--hairline);
}

.chat__head strong {
  display: block;
  font-size: 1rem;
  font-weight: 620;
  font-stretch: 112%;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.chat__head span {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.chat__close {
  background: none;
  border: 1px solid var(--border-strong);
  color: var(--ink);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.chat__log {
  flex: 1;
  overflow-y: auto;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 180px;
}

.chat__msg {
  max-width: 85%;
  padding: 0.65rem 0.9rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.chat__msg--assistant {
  align-self: flex-start;
  background: var(--raised);
  color: var(--ink);
}

.chat__msg--user {
  align-self: flex-end;
  background: var(--accent);
  color: #ffffff;
}

.chat__typing {
  display: flex;
  gap: 5px;
  padding: 0.85rem 0.9rem;
}

.chat__typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
  animation: chat-dot 1.2s ease-in-out infinite;
}

.chat__typing span:nth-child(2) {
  animation-delay: 0.15s;
}

.chat__typing span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes chat-dot {
  0%, 60%, 100% {
    opacity: 0.35;
    transform: none;
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.chat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 1.1rem 0.6rem;
}

.chat__chips button {
  background: none;
  border: 1px solid var(--border-strong);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 0.8125rem;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.chat__chips button:hover {
  border-color: rgba(242, 237, 230, 0.6);
  color: var(--ink);
}

.chat__bar {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1.1rem;
  border-top: 1px solid var(--hairline);
}

.chat__bar input {
  flex: 1;
  background: var(--canvas);
  border: 1px solid var(--border-control);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  padding: 0.6rem 0.8rem;
}

.chat__bar input:focus-visible {
  border-color: var(--accent-text);
  outline: 2px solid rgba(242, 86, 74, 0.35);
  outline-offset: 0;
}

.chat__bar button {
  background: var(--accent);
  border: 0;
  color: #ffffff;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

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

.chat__foot {
  padding: 0 1.1rem 0.85rem;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.chat__foot a {
  color: var(--accent-text);
}

@media (max-width: 767px) {
  .chat__fab {
    display: none;
  }

  .chat__panel {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .mobile-cta a {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.js .chat__panel:not([hidden]) {
    animation: none;
  }

  .chat__typing span {
    animation: none;
  }
}

/* ================================================================
   Blog (journal) — index cards + long-form prose
   ================================================================ */

.post-grid {
  display: grid;
  gap: 2.5rem 1.5rem;
}

@media (min-width: 700px) {
  .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .post-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.post-card {
  display: block;
  color: var(--ink);
}

.post-card figure {
  margin: 0;
  overflow: hidden;
}

.post-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.55s var(--ease);
}

.post-card:hover img {
  transform: scale(1.04);
}

.post-card .meta {
  display: block;
  margin-top: 1.1rem;
}

.post-card h2 {
  margin-top: 1.1rem;
  font-size: 1.25rem;
  font-weight: 600;
  font-stretch: 110%;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.3;
  transition: color 0.2s ease;
}

.post-card:hover h2 {
  color: var(--accent-text);
}

.post-card p {
  margin-top: 0.6rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.prose {
  max-width: 68ch;
  color: var(--ink-2);
}

.prose h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-top: 2.75rem;
  margin-bottom: 1rem;
  color: var(--ink);
}

.prose h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: var(--ink);
}

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

.prose ul,
.prose ol {
  margin: 0 0 1.1rem;
  padding-left: 1.4rem;
}

.prose li {
  margin-bottom: 0.45rem;
}

.prose li::marker {
  color: var(--accent-text);
}

/* Links inside running text carry a persistent underline: colour alone is not
   a sufficient distinction (WCAG 2.1 SC 1.4.1 Use of Color). */
.prose a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-color: rgba(242, 86, 74, 0.4);
  text-underline-offset: 4px;
}

.prose a:hover {
  text-decoration-color: currentColor;
}

.prose strong {
  color: var(--ink);
  font-weight: 600;
}

.prose blockquote {
  margin: 1.75rem 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--accent);
  color: var(--ink);
  font-size: 1.125rem;
}

/* Cost tables. Wrapped in .table-scroll so a wide table scrolls inside its own
   box on narrow screens instead of forcing the whole page to overflow. */
.table-scroll {
  overflow-x: auto;
  margin: 1.75rem 0;
  -webkit-overflow-scrolling: touch;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.975rem;
  min-width: 30rem;
}

.prose th,
.prose td {
  padding: 0.7rem 1rem 0.7rem 0;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

.prose th {
  color: var(--ink);
  font-weight: 600;
}

.prose tbody td:first-child {
  color: var(--ink);
}

.prose caption {
  caption-side: bottom;
  padding-top: 0.85rem;
  color: var(--ink-3);
  font-size: 0.875rem;
  text-align: left;
}

.post-head {
  max-width: 52rem;
}

.post-head .lede {
  margin-top: 1.25rem;
}

.post-head .meta {
  display: block;
  margin-bottom: 0.9rem;
}

.post-byline {
  margin-top: 1.25rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.post-byline a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(242, 237, 230, 0.35);
  text-underline-offset: 0.25em;
}

/* ---------- Chat panel: mobile fit fix ---------- */

@media (max-width: 767px) {
  .chat__panel {
    top: calc(var(--nav-h) + 0.75rem);
    max-height: none;
  }
}

/* ---------- Related advice lists ---------- */

.related {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 52rem;
}

.related li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--hairline);
}

.related li:first-child {
  border-top: 1px solid var(--hairline);
}

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

.footer__bottom a {
  color: var(--ink-2);
  /* Sits inside a sentence, so it needs more than colour (WCAG 1.4.1). */
  text-decoration: underline;
  text-decoration-color: rgba(242, 237, 230, 0.35);
  text-underline-offset: 0.25em;
  transition: color 0.2s ease;
}

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