/* ============================================================
   Sections, in document order.

   The recurring device across the page is a gold hairline used the
   way a dimension line is used on a drawing: it measures, separates
   and occasionally crosses into a photograph. It is the only place
   gold is allowed to travel, which is what keeps it from taking over.
   ============================================================ */


/* ------------------------------------------------------------
   HERO
   Three-row grid. The photograph occupies column two for the full
   height and bleeds to the top and right edges of the viewport.
   The copy sits low in column one, and the gold datum line runs out
   of the text column and over the edge of the photograph.
   ------------------------------------------------------------ */

.hero {
  position: relative;
  background: var(--bg);
}

/* Column one is the page margin, so the photograph in column three
   lands exactly on the viewport edge and the copy in column two lines
   up with every .container below it. */
/* A margin track on BOTH sides: the photograph stops on the same line
   as every other right edge on the page instead of running under the
   scrollbar. */
.hero__grid {
  display: grid;
  grid-template-columns: var(--edge) minmax(0, 1fr) min(38vw, 560px) var(--edge);
  grid-template-rows: 1fr auto auto;
  min-height: min(100svh, 940px);
}

.hero__content {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  max-width: 46rem;
  padding-top: calc(var(--header-h) + clamp(3rem, 13vh, 8rem));
  padding-right: clamp(1.5rem, 4vw, 4.5rem);
}

.hero__title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
}
.hero__title em { font-style: italic; font-weight: 400; }

.hero__lead {
  max-width: 36rem;
  margin-top: clamp(1.35rem, 3vh, 2rem);
  font-size: var(--fs-lead);
  color: var(--ink-soft);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(1.9rem, 4vh, 2.75rem);
}

/* .fill-figure (base.css) absolutely positions the image so the hero
   grid, not the photograph's own ratio, decides this column's height. */
/* Inset from the top so the photograph clears the header instead of
   running behind it, and lifted off the bottom so it reads as a plate
   placed on the page rather than a background. */
.hero__figure {
  grid-column: 3;
  grid-row: 1 / -1;
  min-height: 0;
  margin-top: calc(var(--header-h) + clamp(1.25rem, 3vh, 2.5rem));
  margin-bottom: clamp(2rem, 6vh, 4.5rem);
}

/* Measure line above the metadata. It stops at the text column rather
   than running on into the photograph. */
.hero__datum {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  z-index: 3;
  margin-top: clamp(2.25rem, 5vh, 4rem);
  padding-right: clamp(1.5rem, 4vw, 4.5rem);
}
.hero__datum-line { width: 100%; }

.hero__meta {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) clamp(1.75rem, 4vw, 3.75rem);
  padding-top: var(--sp-3);
  padding-right: clamp(1.5rem, 4vw, 4.5rem);
  padding-bottom: clamp(2rem, 5vh, 3.5rem);
}
.hero__meta-item dt {
  margin-bottom: 0.28rem;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.hero__meta-item dd {
  font-size: 0.92rem;
  font-weight: 400;
}

@media (max-width: 900px) {
  .hero__grid {
    display: block;
    min-height: 0;
    padding-top: calc(var(--header-h) + var(--sp-7));
  }
  .hero__content {
    max-width: none;
    padding: 0 var(--gutter);
  }
  .hero__figure {
    margin-top: var(--sp-7);
    margin-bottom: 0;
    aspect-ratio: 4 / 3;
  }
  .hero__datum {
    margin: var(--sp-5) var(--gutter) 0;
  }
  .hero__datum-line { width: 100%; }
  .hero__meta {
    padding: var(--sp-3) var(--gutter) var(--sp-8);
  }
}

@media (max-width: 480px) {
  .hero__actions { gap: var(--sp-4); }
  .hero__actions .btn { width: 100%; }
}


/* ------------------------------------------------------------
   SERVICES
   ------------------------------------------------------------ */

.services { background: var(--bg); }

.services__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: start;
  margin-bottom: clamp(3.5rem, 7vw, 7rem);
}
.services__title { font-size: var(--fs-h2); }
.services__intro-body {
  max-width: 44ch;
  padding-top: clamp(0.5rem, 3vw, 2.4rem);
}
.services__intro-body .rule { margin-bottom: var(--sp-3); }
.services__intro-body p { color: var(--ink-soft); }

/* Full-width grids: the photograph takes the fr column that runs off the
   viewport edge, and --edge holds the opposite margin so the copy stays
   aligned with .container. No negative margins involved. */
.feature { display: grid; }

.feature--left {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.66fr) var(--edge);
  align-items: center;
}
.feature--left .feature__figure { grid-column: 1; }
.feature--left .feature__body {
  grid-column: 2;
  padding-left: clamp(1.75rem, 4vw, 4.5rem);
}

.feature--right {
  grid-template-columns: var(--edge) minmax(0, 0.66fr) minmax(0, 1fr);
  align-items: start;
  margin-top: clamp(3.5rem, 8vw, 7.5rem);
}
.feature--right .feature__body {
  grid-column: 2;
  padding-right: clamp(1.75rem, 4vw, 4.5rem);
  padding-top: clamp(0rem, 4vw, 3rem);
}
.feature--right .feature__figure { grid-column: 3; }

.feature__figure { aspect-ratio: 4 / 3; }
.feature__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature__title { font-size: var(--fs-h3); }
.feature__body .rule--short { margin: 0.95rem 0 1.3rem; }
.feature__body p {
  max-width: 46ch;
  color: var(--ink-soft);
}

.feature__points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.5rem 1.5rem;
  margin-top: var(--sp-4);
}
.feature__points li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.feature__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 8px;
  height: 1px;
  background: var(--c-gold);
}

/* Secondary services: an architectural list, not a card grid */
.service-list { margin-top: clamp(4rem, 8vw, 8rem); }

.service-list__title {
  margin-bottom: var(--sp-5);
  font-size: var(--fs-h3);
  color: var(--ink);
}

.service-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: 0.35rem clamp(1.5rem, 4vw, 4rem);
  align-items: baseline;
  padding-block: clamp(1.1rem, 2.2vw, 1.6rem);
  border-top: 1px solid var(--line);
}
.service-list__items li:last-child { border-bottom: 1px solid var(--line); }

.service-row::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-mid) var(--ease-out);
}
.service-row:hover::after,
.service-row:focus-within::after { transform: scaleX(1); }

.service-row__name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  transition: translate var(--dur-mid) var(--ease-out);
}
.service-row:hover .service-row__name { translate: 6px 0; }

.service-row__note {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .services__intro { grid-template-columns: 1fr; }
  .services__intro-body { padding-top: 0; }

  .feature--left,
  .feature--right {
    grid-template-columns: 1fr;
    row-gap: var(--sp-5);
  }
  /* Photograph first on both features, so the rhythm reads the same
     way down a phone. */
  .feature--left .feature__figure,
  .feature--right .feature__figure { grid-column: 1; grid-row: 1; }
  .feature--left .feature__body,
  .feature--right .feature__body {
    grid-column: 1;
    grid-row: 2;
    padding: 0 var(--gutter);
  }

  .service-row { grid-template-columns: 1fr; }
}


/* ------------------------------------------------------------
   FEATURED PROJECTS
   ------------------------------------------------------------ */

.projects { background: var(--bg-alt); }

.projects__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-2) clamp(1.5rem, 4vw, 5rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.projects__title { font-size: var(--fs-h2); }
.projects__note {
  max-width: 34ch;
  padding-bottom: 0.4rem;
  color: var(--ink-soft);
}
.projects__note .link-arrow { margin-top: var(--sp-3); }

.gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  column-gap: clamp(1.25rem, 3vw, 3rem);
  row-gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.project--lead { grid-row: 1 / span 2; }
.project--b { margin-top: clamp(1rem, 3vw, 2.75rem); }

.project__frame {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--c-gray);
}
.project--lead .project__frame { aspect-ratio: 4 / 5; }

.project__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 700ms var(--ease-out);
}
.project:hover .project__frame img { scale: 1.025; }

.project__caption {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-top: var(--sp-3);
}
.project__caption::before,
.project__caption::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
}
.project__caption::before { background: var(--line-strong); }
.project__caption::after {
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 550ms var(--ease-out);
}
.project:hover .project__caption::after { transform: scaleX(1); }

.project__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.project__place {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-mute);
}

@media (max-width: 760px) {
  .projects__head { grid-template-columns: 1fr; }

  /* Swipeable on a phone rather than three tall stacked blocks */
  .gallery {
    display: flex;
    gap: var(--sp-3);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: var(--sp-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .gallery > .project {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
  .gallery > .project--b { margin-top: 0; }
  .gallery > .project > .project__frame { aspect-ratio: 4 / 5; }
}


/* ------------------------------------------------------------
   BEFORE & AFTER
   Sits on the same cream as Projects: both are portfolio.
   ------------------------------------------------------------ */

.compare-section {
  background: var(--bg-alt);
  padding-top: clamp(2.5rem, 4vw, 4.5rem);
}

.compare__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.compare__title { font-size: var(--fs-h2); }
.compare__intro {
  max-width: 46ch;
  padding-top: clamp(0.5rem, 2.5vw, 1.75rem);
}
.compare__intro .rule { margin-bottom: var(--sp-3); }
.compare__intro p { color: var(--ink-soft); }

/* Second and later comparisons get breathing room from the first */
.compare-section .compare + .compare { margin-top: clamp(3rem, 6vw, 5.5rem); }

.compare__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) clamp(1.5rem, 3vw, 2.75rem);
}
.compare__facts dt {
  margin-bottom: 0.25rem;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.compare__facts dd { font-size: 0.92rem; }

@media (max-width: 900px) {
  .compare__head { grid-template-columns: 1fr; }
  .compare__intro { padding-top: 0; }
}


/* ------------------------------------------------------------
   WHY R&R
   ------------------------------------------------------------ */

.standards {
  background: var(--bg-dark);
  color: var(--ink-on-dark);
}

.standards__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.66fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: stretch;
}

.standards__figure {
  height: 100%;
  min-height: 26rem;
}

.standards__title { font-size: var(--fs-h2); }
.standards__lead {
  max-width: 46ch;
  margin-top: var(--sp-3);
  color: var(--ink-on-dark-soft);
}

.standards__list { margin-top: clamp(2.25rem, 5vw, 3.75rem); }

.standard {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.1rem, 3vw, 2.25rem);
  padding-block: clamp(1.15rem, 2.4vw, 1.8rem);
  border-top: 1px solid var(--line-on-dark);
}
.standards__list li:last-child { border-bottom: 1px solid var(--line-on-dark); }

/* Gold rule draws across the top border on hover, matching the
   secondary services list on the light side of the page. */
.standard::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--c-gold-rich);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-mid) var(--ease-out);
}
.standard:hover::after,
.standard:focus-within::after { transform: scaleX(1); }

/* Phosphor Icons, inlined. fill="currentColor" on the path is what
   lets them take part in the hover colour swap below. */
.standard__icon {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  margin-top: 0.1rem;
  color: var(--c-gold-rich);
  transition: color var(--dur-mid) var(--ease-soft),
              translate var(--dur-mid) var(--ease-out);
}

.standard__text h3 {
  font-size: var(--fs-h4);
  transition: color var(--dur-mid) var(--ease-soft),
              translate var(--dur-mid) var(--ease-out);
}

/* Icon and title trade colours on hover: gold goes white, white goes
   gold. Both keep well clear of 4.5:1 on charcoal. */
.standard:hover .standard__icon {
  color: var(--ink-on-dark);
  translate: 2px 0;
}
.standard:hover .standard__text h3 {
  color: var(--c-gold-rich);
  translate: 4px 0;
}
.standard__text p {
  margin-top: 0.35rem;
  font-size: 0.95rem;
  color: var(--ink-on-dark-soft);
}

@media (max-width: 900px) {
  .standards__grid { grid-template-columns: 1fr; }
  .standards__figure { aspect-ratio: 3 / 2; height: auto; min-height: 0; }
}


/* ------------------------------------------------------------
   PROCESS
   Horizontal timeline on desktop, vertical on a phone.
   Node markers repeat the logo's four-pane window.
   ------------------------------------------------------------ */

.process { background: var(--bg); }

.process__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-2) clamp(1.5rem, 4vw, 5rem);
  align-items: end;
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
}
.process__title { font-size: var(--fs-h2); }
.process__note {
  max-width: 32ch;
  padding-bottom: 0.4rem;
  color: var(--ink-soft);
}

.process__list {
  --node-y: 3.4rem;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2.5rem);
}

/* Static base rule, then the gold rule that draws across it */
.process__list::before,
.process__list::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--node-y);
  height: 1px;
}
.process__list::before { background: var(--line); }
.process__list::after  { background: var(--c-gold); }

.js .process__list::after { transform: scaleX(0); transform-origin: left center; }
.js .process__list.is-in::after { animation: rule-draw 1.3s var(--ease-out) both; }

.process__step {
  position: relative;
  padding-top: calc(var(--node-y) + 2.15rem);
}

.process__num {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--c-gold-deep);
}

.process__node {
  position: absolute;
  top: calc(var(--node-y) - 5px);
  left: 0;
  width: 10px;
  height: 10px;
  background: var(--c-gold);
}
.process__node::before,
.process__node::after {
  content: "";
  position: absolute;
  background: var(--bg);
}
.process__node::before { left: 0; right: 0; top: 4px; height: 2px; }
.process__node::after  { top: 0; bottom: 0; left: 4px; width: 2px; }

.process__step-title {
  font-size: clamp(0.98rem, 0.9rem + 0.3vw, 1.15rem);
  line-height: 1.3;
}
.process__step-text {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

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

  .process__list {
    --node-y: 0.5rem;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .process__list::before,
  .process__list::after {
    top: 0.5rem;
    bottom: 0.5rem;
    left: 4px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .js .process__list::after { transform: scaleY(0); transform-origin: center top; }
  .js .process__list.is-in::after { animation: rule-draw-y 1.3s var(--ease-out) both; }

  .process__step {
    padding: 0 0 var(--sp-6) var(--sp-6);
  }
  .process__step:last-child { padding-bottom: 0; }

  .process__num {
    position: static;
    display: block;
    margin-bottom: 0.4rem;
    font-size: 1.15rem;
  }
  .process__node { top: 0.1rem; }
}


/* ------------------------------------------------------------
   ABOUT
   The photograph runs off the left edge and the copy block crops
   into it, held by a single gold rule on its leading edge.
   ------------------------------------------------------------ */

.about { background: var(--bg); }

/* Column three is the page margin. The panel is warm white on a warm
   white section, so it reads as continuous through to the edge. */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(52ch, 42vw)) var(--edge);
  align-items: center;
}

.about__figure { aspect-ratio: 4 / 5; }
.about__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Favour the seating area and windows over the floor in the crop */
  object-position: center 32%;
}

.about__panel {
  grid-column: 2;
  position: relative;
  z-index: 2;
  margin-left: clamp(-6rem, -5vw, -2rem);
  padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(2rem, 4vw, 3.5rem) clamp(1.75rem, 3.5vw, 3.25rem);
  background: var(--bg);
}
.about__panel::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--c-gold);
}

.about__title { font-size: var(--fs-h2); }
.about__panel .rule--short { margin: 1.1rem 0 1.4rem; }
.about__panel p { color: var(--ink-soft); }
.about__panel p + p { margin-top: var(--sp-3); }
.about__panel .link-arrow { margin-top: var(--sp-5); }

@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__panel {
    margin-left: 0;
    padding: var(--sp-6) var(--gutter) 0;
  }
  .about__panel::before { display: none; }
}


/* ------------------------------------------------------------
   SERVICE AREA
   ------------------------------------------------------------ */

.areas {
  background: var(--bg-band);
  padding-block: clamp(3.5rem, 6vw, 6rem);
}

.areas__inner {
  max-width: 58rem;
  margin-inline: auto;
  text-align: center;
}

.areas__title {
  font-size: var(--fs-h3);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* Nine areas on an even three-column measure, so every cell is the
   same width and the dividers line up. Read as a drawing schedule:
   gold hairlines vertically, neutral ones between the rows, and no
   box around any single name. */
.areas__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 44rem;
  margin-inline: auto;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.18rem);
}

.areas__list li {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.8rem, 2vw, 1.15rem) 0.6rem;
  border-right: 1px solid var(--c-gold);
  border-bottom: 1px solid var(--line-strong);
  transition: color var(--dur-fast) var(--ease-soft);
}

/* Edges are turned off by colour, not by removing the border, so no
   cell changes size. */
.areas__list li:nth-child(3n) { border-right-color: transparent; }
.areas__list li:nth-child(n + 7) { border-bottom-color: transparent; }

.areas__note {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

@media (max-width: 620px) {
  /* Two across. The ninth name takes the full width on its own row so
     the grid never ends on a half-empty line. */
  .areas__list { grid-template-columns: repeat(2, 1fr); }

  .areas__list li:nth-child(3n) { border-right-color: var(--c-gold); }
  .areas__list li:nth-child(n + 7) { border-bottom-color: var(--line-strong); }

  .areas__list li:nth-child(2n) { border-right-color: transparent; }
  .areas__list li:last-child {
    grid-column: 1 / -1;
    border-right-color: transparent;
    border-bottom-color: transparent;
  }
}


/* ------------------------------------------------------------
   TESTIMONIALS
   Two quotes, offset against each other, split by one gold rule.
   ------------------------------------------------------------ */

.voices { background: var(--bg); }

.voice--one { max-width: 58ch; }
.voice--two { max-width: 54ch; margin-left: auto; }

.voice blockquote p {
  font-family: var(--font-display);
  font-size: var(--fs-quote);
  line-height: 1.42;
  letter-spacing: -0.008em;
  text-indent: -0.46em;
  text-wrap: pretty;
}
.voice blockquote p::before { content: "\201C"; }
.voice blockquote p::after  { content: "\201D"; }

.voice figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  margin-top: var(--sp-4);
}
.voice__name {
  font-size: 0.92rem;
  font-weight: 500;
}
.voice__place {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-mute);
}

.voices .rule { margin-block: clamp(2.75rem, 6vw, 5.5rem); }

@media (max-width: 700px) {
  .voice--two { margin-left: 0; }
}


/* ------------------------------------------------------------
   CONTACT
   ------------------------------------------------------------ */

.contact {
  background: var(--bg-dark);
  color: var(--ink-on-dark);
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: start;
}

.contact__title { font-size: var(--fs-h2); }
.contact__lead {
  max-width: 40ch;
  margin-top: var(--sp-3);
  font-size: var(--fs-lead);
  color: var(--ink-on-dark-soft);
}

.contact__reach { margin-top: clamp(2rem, 4vw, 3rem); }

.contact__reach-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.contact__phone {
  display: inline-flex;
  flex-direction: column;
  gap: 0.45rem;
}
.contact__phone-label {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-on-dark-mute);
}
.contact__phone-number {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.3rem + 2.1vw, 3.05rem);
  line-height: 1.1;
  color: var(--c-gold-rich);
  transition: color var(--dur-mid) var(--ease-soft);
}
.contact__phone:hover .contact__phone-number,
.contact__phone:focus-visible .contact__phone-number { color: var(--c-white); }

.contact__hours {
  max-width: 34ch;
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--ink-on-dark-mute);
}

.estimate {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) clamp(1.25rem, 2.5vw, 2rem);
  align-content: start;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-on-dark);
}
.estimate__title {
  grid-column: 1 / -1;
  font-size: var(--fs-h4);
}
.field--wide { grid-column: 1 / -1; }
.estimate__submit {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: var(--sp-1);
}
.estimate__status {
  grid-column: 1 / -1;
  max-width: 46ch;
  font-size: var(--fs-sm);
  color: var(--ink-on-dark-soft);
}
.estimate__status:empty { display: none; }
.estimate__status.is-success { color: var(--c-gold-rich); }
.estimate__status.is-error { color: #F0A092; }

.estimate__submit[disabled] {
  cursor: progress;
  opacity: 0.75;
}

@media (max-width: 900px) {
  .contact__grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .estimate { grid-template-columns: 1fr; }
  .estimate__submit { justify-self: stretch; }
}


/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */

.site-footer {
  background: var(--bg-darker);
  color: var(--ink-on-dark);
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
}

.site-footer__nav ul,
.site-footer__social {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.site-footer__nav a,
.site-footer__social a {
  position: relative;
  display: inline-block;
  font-size: 0.92rem;
  color: var(--ink-on-dark-soft);
  transition: color var(--dur-fast) var(--ease-soft);
}
.site-footer__nav a::after,
.site-footer__social a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--c-gold-rich);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-mid) var(--ease-out);
}
.site-footer__nav a:hover,
.site-footer__social a:hover { color: var(--ink-on-dark); }
.site-footer__nav a:hover::after,
.site-footer__social a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.site-footer__phone {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--ink-on-dark);
  transition: color var(--dur-fast) var(--ease-soft);
}
.site-footer__phone:hover { color: var(--c-gold-rich); }

.site-footer__reach {
  display: flex;
  gap: var(--sp-3);
  margin-top: 0.5rem;
}
.site-footer__reach a {
  position: relative;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-gold-rich);
  transition: color var(--dur-fast) var(--ease-soft);
}
.site-footer__reach a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-mid) var(--ease-out);
}
.site-footer__reach a:hover { color: var(--ink-on-dark); }
.site-footer__reach a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.site-footer__place {
  display: block;
  margin-top: var(--sp-3);
  font-size: 0.88rem;
  color: var(--ink-on-dark-mute);
}

.site-footer__badge {
  display: inline-block;
  margin-top: var(--sp-3);
  padding-top: 0.6rem;
  border-top: 1px solid var(--c-gold);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-gold-rich);
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-5);
  padding-block: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--line-on-dark);
  font-size: var(--fs-xs);
  color: var(--ink-on-dark-mute);
}

@media (max-width: 860px) {
  .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: var(--sp-6); }
}