/* ============================================
   Legacy Building & Construction — Custom Styles
   ============================================
   Loaded after kilr-framework.css and variables.css.
   Add page/section-specific styles here using BEM
   ([section]_[element]) starting at L5 of the
   Sacred Hierarchy. Never set typography on per-
   section text classes — use global heading-* /
   paragraph-* / sub-heading-* classes only.
   ============================================ */

/* --------------------------------------------
   Self-hosted fonts
   Louis George Cafe — Chequered Ink, freeware via dafont.com
   -------------------------------------------- */
@font-face {
  font-family: "Louis George Cafe";
  src: url("../assets/fonts/LouisGeorgeCafe-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Louis George Cafe";
  src: url("../assets/fonts/LouisGeorgeCafe-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Louis George Cafe";
  src: url("../assets/fonts/LouisGeorgeCafe-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}

/* --------------------------------------------
   Brand baseline
   -------------------------------------------- */
body {
  background: var(--color-light);
  color: var(--color-dark);
}

[class*="heading-"] {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: var(--color-dark);
}

[class*="sub-heading-"] {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* Combo classes — override one property only, never re-define size/family/weight. */
.heading--italic { font-style: italic; }
.text-italic     { font-style: italic; }

/* --------------------------------------------
   Buttons (primitives — own typography)
   -------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 1.75rem;
  min-height: 3.625rem;          /* matches Figma 58px */
  border-radius: 999px;          /* pill */
  border: 1.5px solid var(--color-dark);
  font-family: var(--p--font-family);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.btn:hover { transform: translateY(-1px); }

.btn--ghost {
  background: transparent;
  color: var(--color-dark);
}
.btn--ghost:hover {
  background: var(--color-dark);
  color: var(--color-light);
}

.btn--solid {
  background: var(--color-dark);
  color: var(--color-light);
}
.btn--solid:hover {
  background: transparent;
  color: var(--color-dark);
}

.btn_arrow {
  display: inline-block;
  transition: transform 180ms ease;
}
.btn:hover .btn_arrow { transform: translateX(4px); }

/* --------------------------------------------
   Hero
   -------------------------------------------- */
.hero {
  display: flex;
  flex-direction: column;
  background: var(--color-light);
}

.hero_inner {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  padding-top: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
}

/* ---- Nav row ---- */
.hero_nav {
  position: relative;            /* anchors the mobile dropdown */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.hero_brand {
  display: inline-flex;
  flex-shrink: 0;
}

.hero_logo {
  display: block;
  width: clamp(8rem, 6rem + 4vw, 11rem);
  height: auto;
}

.hero_nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.5rem + 1.5vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.hero_nav-links a {
  color: var(--color-dark);
  text-decoration: none;
  transition: opacity 180ms ease;
}
.hero_nav-links a:hover { opacity: 0.6; }

/* ---- Dropdown nav item (Services) ----
   Trigger link goes to services overview, chevron button toggles submenu.
   Desktop: hover or click opens. Mobile: in-flow expand inside hamburger. */
.hero_nav-item--has-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.hero_nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--color-dark);
  cursor: pointer;
  transition: transform 180ms ease;
}
.hero_nav-dropdown-toggle i { width: 0.9rem; height: 0.9rem; }
.hero_nav-item--has-dropdown[data-open="true"] .hero_nav-dropdown-toggle {
  transform: rotate(180deg);
}

.hero_nav-dropdown {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  background: var(--color-light);
  border: 1.5px solid var(--color-dark);
  min-width: 14rem;
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}

.hero_nav-dropdown a {
  display: block;
  padding: 0.55rem 1.25rem;
  white-space: nowrap;
}
.hero_nav-dropdown a:hover { background: var(--color-bg-tint); opacity: 1; }

/* Click-toggled state — works on every screen size */
.hero_nav-item--has-dropdown[data-open="true"] .hero_nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Hover/focus open — desktop only (mobile is touch, hover has no meaning) */
@media (min-width: 721px) {
  .hero_nav-item--has-dropdown:hover .hero_nav-dropdown,
  .hero_nav-item--has-dropdown:focus-within .hero_nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* Mobile: dropdown lives inside the hamburger panel (in-flow, not absolute) */
@media (max-width: 720px) {
  .hero_nav-item--has-dropdown {
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
  }
  .hero_nav-dropdown {
    position: static;
    border: 0;
    padding: 0;
    margin: 0.25rem 0 0 1rem;
    min-width: 0;
    width: 100%;
    transform: none;
    transition: none;
    /* Collapsed by default — only opens via data-open */
    display: none;
    opacity: 1;
    visibility: visible;
  }
  .hero_nav-item--has-dropdown[data-open="true"] .hero_nav-dropdown {
    display: block;
  }
  .hero_nav-dropdown a {
    padding: 0.4rem 0;
    white-space: normal;
  }
}

/* ---- Hamburger toggle (mobile only) ---- */
.hero_nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 1.5px solid var(--color-dark);
  border-radius: 0;
  color: var(--color-dark);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.hero_nav-toggle-icon { width: 1.25rem; height: 1.25rem; }
.hero_nav-toggle-icon--close { display: none; }
.hero_nav-toggle[aria-expanded="true"] .hero_nav-toggle-icon--open { display: none; }
.hero_nav-toggle[aria-expanded="true"] .hero_nav-toggle-icon--close { display: inline-block; }

@media (max-width: 720px) {
  .hero_nav-toggle { display: inline-flex; }

  .hero_nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background: var(--color-light);
    border: 1.5px solid var(--color-dark);
    padding: 1rem 1.25rem;
    gap: 0.75rem;
    z-index: 20;
  }
  .hero_nav-links[data-open="true"] { display: flex; }
  .hero_nav-links a { display: block; padding: 0.5rem 0; }
}

/* ---- Intro: headline (line 1 + line 2) + lede + actions ----
   Grid composition mirrors the Figma layout:
     Row 1, full width  → "LEGACY BUILDING"
     Row 2, col 1       → lede (subtitle)
     Row 2, col 2       → "& CONSTRUCTION" (sized to its content; right-aligned)
     Row 3, full width  → buttons (right-aligned, ending at the same x as line 2)
   The h1 uses display:contents so its child spans participate in this grid
   while the heading still announces semantically as <h1>. */
.hero_intro {
  display: grid;
  grid-template-columns: 20rem 1fr;     /* lede always gets 20rem; line 2 fills the rest */
  column-gap: clamp(1rem, 1.5vw, 2.5rem);
  row-gap: clamp(0.25rem, 0.5vw, 1rem);
  align-items: end;
}

.hero_headline {
  display: contents;
  margin: 0;
}

.hero_headline-line {
  display: block;
  white-space: nowrap;            /* keep "& CONSTRUCTION" on a single row */
  margin: 0;
}

.hero_headline-line:not(.hero_headline-line--indent) {
  grid-column: 1 / -1;
  grid-row: 1;
}

.hero_headline-line--indent {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;                    /* push line 2 to the right edge of the grid */
}

.hero_lede {
  grid-column: 1;
  grid-row: 2;
  align-self: center;             /* vertically centered against line 2 */
  max-width: 20rem;               /* sized so the subtitle naturally wraps to 3 lines */
  margin: 0;
}

.hero_actions {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-self: end;              /* end where line 2 ends — at container's right edge */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: clamp(0.5rem, 1vw, 1.25rem);
}

/* Collapse to a stacked column on narrow screens. Reset every grid leftover
   so the headline lines, lede, and actions all line up flush-left. */
@media (max-width: 720px) {
  .hero_intro {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(0.5rem, 1vw, 1.25rem);
  }
  .hero_headline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .hero_headline-line {
    white-space: normal;
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
    margin-left: 0;
    padding-left: 0;
  }
  .hero_lede {
    max-width: none;
    align-self: stretch;
    grid-column: auto;
    grid-row: auto;
    margin-left: 0;
    padding-left: 0;
  }
  .hero_actions {
    align-self: stretch;
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
    margin-top: 0.5rem;
  }
  .hero_actions .btn { flex: 1 1 auto; }
}

/* ---- Hero image band (full-bleed, in flow) ---- */
.hero_image {
  margin: 0;
  width: 100%;
  aspect-ratio: 1512 / 559;
  overflow: hidden;
  background: var(--color-bg-tint);
}

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

/* --------------------------------------------
   Shared utilities
   -------------------------------------------- */

/* Inline text-only CTA: "View all services →", "Meet the team →" */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--p--font-family);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-dark);
  text-decoration: none;
  transition: gap 180ms ease, opacity 180ms ease;
}
.link-arrow:hover { gap: 0.85rem; opacity: 0.7; }
.link-arrow .btn_arrow { display: inline-block; }

/* Image placeholder backdrop. Visible until a real image lands at the same
   path; the <img onerror> hides the broken-image icon if the file is missing. */
.project-card_image,
.hero_image {
  background: var(--color-bg-tint);
}

/* Lucide icon sizing — inline SVGs render with width/height attrs by default;
   force them to follow the surrounding font-size so cards stay clean. */
[data-lucide],
.service-card_icon,
.testimonial-card_stars i,
.footer_contact-link i {
  display: inline-block;
  flex-shrink: 0;
}

/* --------------------------------------------
   Services
   -------------------------------------------- */
.services_header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.services_header-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.services_header-text h2 { margin: 0; }

.services_grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 720px) {
  .services_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .services_grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 1rem + 1vw, 2.25rem);
  background: transparent;
  border: 1.5px solid var(--color-dark);
  border-radius: 0;
  min-height: 14rem;
  position: relative;
  transition: box-shadow 200ms ease;
}
.service-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.service-card .link-arrow {
  margin-top: auto;
  align-self: flex-start;
}
.service-card .link-arrow::after {
  content: '';
  position: absolute;
  inset: 0;
}

.service-card_icon {
  width: 2rem;
  height: 2rem;
  color: var(--color-dark);
  margin-bottom: 1rem;
}

.service-card h3 { margin: 0; }
.service-card p { margin: 0; }

/* --------------------------------------------
   About
   -------------------------------------------- */
.about {
  background: var(--color-bg-tint);
}

.about_intro {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  align-items: center;
}

/* --------------------------------------------
   Recent Projects
   -------------------------------------------- */
.projects_header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: clamp(1rem, 0.5rem + 1vw, 1.75rem);
  margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
  border-bottom: 1px solid var(--color-dark);
}
.projects_header h2 { margin: 0; }

.projects_grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}

@media (min-width: 800px) {
  .projects_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.projects_footer {
  display: flex;
  justify-content: flex-start;
  margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.project-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.project-card_image {
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1.5px solid var(--color-dark);
  border-radius: 0;
  overflow: hidden;
}

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

.project-card_body {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  align-items: flex-start;
}

.project-card_body h3 { margin: 0; }
.project-card_body p { margin: 0; max-width: 32rem; }

/* --------------------------------------------
   Testimonials
   -------------------------------------------- */
.testimonials_header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.5rem;
  margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.testimonials_quote {
  font-family: var(--h--font-family);
  font-size: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  color: var(--color-dark);
  margin-bottom: 0.25rem;
}

.testimonials_header h2 { margin: 0; }

.testimonials_intro { margin: 0; max-width: 28rem; color: var(--color-primary-70); }

.testimonials_carousel {
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.testimonials_grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.testimonials_grid::-webkit-scrollbar { display: none; }

.testimonial-card {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.75rem 1.5rem;
  background: transparent;
  border: 1.5px solid var(--color-dark);
  border-radius: 0;
}

@media (min-width: 720px) {
  .testimonial-card { flex-basis: calc((100% - 1.25rem) / 2); }
}
@media (min-width: 1024px) {
  .testimonial-card { flex-basis: calc((100% - 2 * 1.25rem) / 3); }
}

/* Featured card — dark fill with inverted text */
.testimonial-card--featured {
  background: var(--color-dark);
  color: var(--color-light);
  border-color: var(--color-dark);
}
.testimonial-card--featured p,
.testimonial-card--featured cite { color: var(--color-light); }

.testimonial-card p { margin: 0; flex: 1; }

.testimonial-card_footer {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
  margin-top: auto;
}

.testimonial-card_stars {
  display: flex;
  gap: 0.25rem;
  color: #f5c842;                /* gold/yellow stars on every card */
}
.testimonial-card_stars i {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
  stroke: currentColor;
}

.testimonial-card cite {
  font-style: normal;
  color: var(--color-primary-70);
}
.testimonial-card--featured cite { color: var(--color-light); }

/* ---- Carousel controls (progress bar + arrows) ---- */
.testimonials_controls {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}

.testimonials_progress {
  width: 100%;
  height: 3px;
  background: rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.testimonials_progress-bar {
  width: 33%;
  height: 100%;
  background: var(--color-dark);
  transition: width 240ms ease;
}

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

.testimonials_arrow {
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1.5px solid var(--color-dark);
  border-radius: 0;
  background: var(--color-dark);
  color: var(--color-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.testimonials_arrow:hover {
  background: transparent;
  color: var(--color-dark);
}
.testimonials_arrow i {
  width: 1.25rem;
  height: 1.25rem;
}

/* --------------------------------------------
   CTA band — Build With Legacy
   -------------------------------------------- */
.cta-band {
  background: var(--color-dark);
  color: var(--color-light);
}

.cta-band [class*="heading-"] { color: var(--color-light); }
.cta-band p { color: var(--color-light); }
.cta-band .sub-heading-xs { color: var(--color-light); }

.cta-band_inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}

@media (min-width: 900px) {
  .cta-band_inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    grid-template-areas:
      "heading  eyebrow"
      "actions  actions";
    align-items: start;
  }
  .cta-band_eyebrow {
    grid-area: eyebrow;
    text-align: right;
  }
  .cta-band_heading { grid-area: heading; }
  .cta-band_actions { grid-area: actions; }
}

.cta-band_eyebrow {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}
@media (min-width: 900px) {
  .cta-band_eyebrow { align-items: flex-end; }
}
.cta-band_eyebrow p { margin: 0; max-width: 16rem; }

.cta-band_heading { margin: 0; }

.cta-band_actions {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  align-items: flex-start;
}

.cta-band_lede { margin: 0; max-width: 32rem; }

.cta-band_buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Invert the buttons inside the dark CTA band */
.cta-band .btn--solid {
  background: var(--color-light);
  color: var(--color-dark);
  border-color: var(--color-light);
}
.cta-band .btn--solid:hover {
  background: transparent;
  color: var(--color-light);
}

.cta-band .btn--ghost {
  background: transparent;
  color: var(--color-light);
  border-color: var(--color-light);
}
.cta-band .btn--ghost:hover {
  background: var(--color-light);
  color: var(--color-dark);
}

/* --------------------------------------------
   Footer
   -------------------------------------------- */
.footer {
  background: var(--color-bg-tint);
  padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  padding-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.footer_layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
}

@media (min-width: 720px) {
  .footer_layout { grid-template-columns: 1.4fr 1fr 1fr; }
}

.footer_brand {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}

.footer_logo {
  width: clamp(10rem, 8rem + 5vw, 14rem);
  height: auto;
  margin-bottom: 0.25rem;
}

.footer_tagline { margin: 0 0 1rem 0; max-width: 22rem; }

.footer_contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.footer_contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-dark);
  text-decoration: none;
  font-family: var(--p--font-family);
  font-size: 0.9rem;
  transition: opacity 180ms ease;
}
.footer_contact-link:hover { opacity: 0.6; }
.footer_contact-link i { width: 1.05rem; height: 1.05rem; }

.footer_col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer_col-heading { margin: 0; }

.footer_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.footer_list a {
  font-family: var(--p--font-family);
  font-size: 0.95rem;
  color: var(--color-dark);
  text-decoration: none;
  transition: opacity 180ms ease;
}
.footer_list a:hover { opacity: 0.6; }

.footer_copyright {
  margin-top: clamp(2rem, 1rem + 2vw, 3rem);
  margin-bottom: 0;
  color: var(--color-primary-50);
}

/* ============================================
   SERVICES PAGE
   ============================================ */

/* --------------------------------------------
   Page header — solid white nav with hairline divider
   (used on inner pages with no hero image to overlay)
   -------------------------------------------- */
.page-header {
  background: var(--color-light);
  border-bottom: 1px solid var(--color-dark);
}

.page-header_nav {
  padding-top: clamp(1rem, 0.5rem + 1vw, 1.5rem);
  padding-bottom: clamp(1rem, 0.5rem + 1vw, 1.5rem);
}

.page-header_link--active {
  text-decoration: underline;
  text-underline-offset: 0.4em;
}

/* --------------------------------------------
   Page intro — eyebrow + huge heading + italic lede
   -------------------------------------------- */
.page-intro {
  background: var(--color-light);
  padding-block: clamp(4rem, 2.5rem + 7vw, 9rem);
}

.page-intro > .container-xl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
}

.page-intro_eyebrow { margin: 0; }
.page-intro_heading { margin: 0; }

.page-intro_lede {
  margin: 0;
  max-width: 32rem;
  color: var(--color-primary-70);
}

/* --------------------------------------------
   Page intro — hero image variant
   Modifier that swaps the white background for a relevant
   site/build photo with a dark gradient overlay for text contrast.
   Bottom-aligned so the heading sits low against the image.
   -------------------------------------------- */
.page-intro--hero-image {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(22rem, 16rem + 28vw, 42rem);
  background-color: var(--color-dark);
  background-image: url("../assets/hero.png");
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  padding-block: clamp(2rem, 1.5rem + 3vw, 4rem);
}
/* Per-page background override — set background-image inline on the section
   to use a project-specific photo instead of the site default. */

/* Even dark overlay — text sits centred so the gradient stays uniform
   for legibility across the whole heading + lede block. */
.page-intro--hero-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.45);
}

/* Invert text colours via global classes — same pattern as .cta-band */
.page-intro--hero-image [class*="heading-"]     { color: var(--color-light); }
.page-intro--hero-image [class*="sub-heading-"] { color: var(--color-light); }
.page-intro--hero-image p                        { color: var(--color-light); }

/* --------------------------------------------
   Feature services — 5 cards on cream panel
   Row 1: 3 across | Row 2: 2 centered (offset half-card-width)
   -------------------------------------------- */
.feature-services {
  background: var(--color-bg-tint);
  border-top: 1px solid var(--color-dark);
  border-bottom: 1px solid var(--color-dark);
}

.feature-services_grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 0.75rem + 1vw, 1.75rem);
}

@media (min-width: 720px) {
  .feature-services_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .feature-services_grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .feature-services_grid > :nth-child(1) { grid-column: 1 / span 2; }
  .feature-services_grid > :nth-child(2) { grid-column: 3 / span 2; }
  .feature-services_grid > :nth-child(3) { grid-column: 5 / span 2; }
  .feature-services_grid > :nth-child(4) { grid-column: 2 / span 2; }
  .feature-services_grid > :nth-child(5) { grid-column: 4 / span 2; }
}

.feature-service-card {
  display: flex;
  flex-direction: column;
  background: var(--color-light);
  border: 1.5px solid var(--color-dark);
  border-radius: 0;
  overflow: hidden;
  position: relative;
  transition: box-shadow 200ms ease;
}
.feature-service-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.feature-service-card .link-arrow::after {
  content: '';
  position: absolute;
  inset: 0;
}

.feature-service-card_image {
  margin: 0;
  width: 100%;
  aspect-ratio: 381 / 201;
  overflow: hidden;
  background: #d9d9d9;
}

.feature-service-card_image--placeholder {
  border-bottom: 1.5px solid var(--color-dark);
}

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

.feature-service-card_body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

.feature-service-card_icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-dark);
  margin-bottom: 0.5rem;
}

.feature-service-card_body h2 { margin: 0; }
.feature-service-card_body p  { margin: 0; }

/* --------------------------------------------
   FAQs — native <details> accordion with hairline rules
   -------------------------------------------- */
.faqs > .container-xl {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.faqs_header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.5rem;
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}
.faqs_header h2 { margin: 0; }

.faqs_list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.faq {
  border-top: 1px solid var(--color-dark);
}
.faqs_list > li:last-child .faq {
  border-bottom: 1px solid var(--color-dark);
}

.faq_q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1rem, 0.7rem + 0.6vw, 1.4rem) 0;
  cursor: pointer;
  list-style: none;
}
.faq_q::-webkit-details-marker { display: none; }
.faq_q::marker { content: ""; }

.faq_q > span { color: var(--color-dark); margin-bottom: 0; }

.faq_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: var(--color-dark);
  transition: transform 200ms ease;
}
.faq_icon i { width: 0.85rem; height: 0.85rem; }
.faq[open] .faq_icon { transform: rotate(45deg); }

.faq_a {
  padding: 0 0 clamp(0.85rem, 0.5rem + 0.75vw, 1.25rem) 0;
  max-width: 50rem;
}
.faq_a p { margin: 0; color: var(--color-primary-70); }

/* --------------------------------------------
   Local — Our Culture / Local Knowledge, Local Pride + map
   -------------------------------------------- */
.local_top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

@media (min-width: 900px) {
  .local_top {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}

.local_intro {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
  max-width: 36rem;
}

.local_heading { margin: 0; line-height: 1.05; }

.local_lede {
  margin: 0;
  max-width: 32rem;
  color: var(--color-primary-70);
}

.local_cta { white-space: nowrap; }

.local_map {
  margin: 0;
  width: 100%;
  aspect-ratio: 1227 / 384;
  border: 1.5px solid var(--color-dark);
  overflow: hidden;
  background: var(--color-bg-tint);
}

.local_map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============================================
   RENOVATIONS PAGE
   ============================================ */

/* --------------------------------------------
   Feature band — cream strip below the page intro
   Hosts the social-proof stats row.
   -------------------------------------------- */
.feature-band {
  width: 100%;
  background: var(--color-bg-tint);
  border-top: 1px solid var(--color-dark);
  border-bottom: 1px solid var(--color-dark);
  padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

/* --------------------------------------------
   Social proof — horizontal stats row inside the feature band
   Four cells separated by hairline dividers; collapses to a
   2-up grid on tablet and a stack on mobile.
   -------------------------------------------- */
.social-proof_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 0.75rem + 1vw, 1.75rem);
  align-items: center;
  text-align: center;
}

@media (min-width: 600px) {
  .social-proof_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .social-proof_grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;                                     /* dividers handle the rhythm */
  }
}

.social-proof_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding-inline: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
}

/* Hairline dividers between cells on desktop only */
@media (min-width: 900px) {
  .social-proof_item + .social-proof_item {
    border-left: 1px solid var(--color-primary-30);
  }
}

/* Layout-only — typography comes from the global .heading-m class */
.social-proof_value { margin: 0; }

.social-proof_stars {
  display: flex;
  gap: 0.2rem;
  color: #f5c842;                /* same gold as the testimonials stars */
}
.social-proof_stars i {
  width: 1.4rem;
  height: 1.4rem;
  fill: currentColor;
  stroke: currentColor;
}

.social-proof_label {
  margin: 0;
  max-width: 14rem;
  color: var(--color-primary-70);
}

/* --------------------------------------------
   Detail section — alternating text + image rows
   Used three times on the renovations page; the
   --cream modifier flips the panel to the warm tint.
   -------------------------------------------- */
.detail-section--cream {
  background: var(--color-bg-tint);
  border-bottom: 1px solid var(--color-dark);
}

.detail-section_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: center;
}

@media (min-width: 900px) {
  .detail-section_grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  /* Default: text first, image second.
     --image-left flips the visual order while keeping content-first DOM order
     so the text is read first by assistive tech on the second section.       */
  .detail-section_grid--image-left .detail-section_image { order: -1; }
}

.detail-section_content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.75rem, 0.5rem + 0.75vw, 1.25rem);
}

.detail-section_content h2 { margin: 0; }
.detail-section_content p  { margin: 0; max-width: 32rem; }

.detail-section_image {
  margin: 0;
  width: 100%;
  aspect-ratio: 610 / 358;
  border: 1.5px solid var(--color-dark);
  background: var(--color-bg-tint);
  overflow: hidden;
}

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

/* Section 3 collage — taller than the default detail image because the
   Union artwork is composed of three vertical panes built into one PNG. */
.detail-section_image--collage {
  aspect-ratio: 610 / 452;
  border: 0;            /* the PNG already includes its own internal frames */
  background: transparent;
}
.detail-section_image--collage img { object-fit: contain; }

/* Stacked variant — text on top, full-width image below.
   Used for the "Gentlemen Builders" team-wide photo on the about page. */
.detail-section_grid--stacked {
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 1rem + 2vw, 3rem);
}
@media (min-width: 900px) {
  .detail-section_grid--stacked { grid-template-columns: 1fr; }
}

/* Wide image variant — for the team panorama on the about page. */
.detail-section_image--wide {
  aspect-ratio: 1227 / 384;
}
.detail-section_image--wide img { object-position: center 25%; }

/* Portrait image variant — for individual team member shots on the about page. */
.detail-section_image--portrait {
  aspect-ratio: 453 / 551;
}

/* --------------------------------------------
   Team section — Option C layout (about page)
   Intro header + two-column bios + circular avatars
   -------------------------------------------- */
.team-intro {
  max-width: 40rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.team-intro h2 { margin: 0; }
.team-intro_lede { margin: 0; }

.team-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 2rem + 2vw, 4rem);
}
@media (min-width: 720px) {
  .team-cols {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 3vw, 4rem);
  }
}

.team-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 1.5px solid var(--color-dark);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2rem);
}
.team-col p { margin: 0; }

.team-col_nameplate {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.team-col_nameplate h3 { margin: 0; }
.team-col_nameplate .sub-heading-xs { display: block; margin-top: 0.15rem; }

.team-col_btn {
  margin-top: auto;
  background: #ffffff;
  align-self: flex-start;
}
.team-col_btn:hover {
  background: var(--color-dark);
  color: var(--color-light);
}

.team-col_avatar {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  margin: 0;
  border: 2px solid var(--color-dark);
}
.team-col_avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.detail-section_cta {
  margin-top: clamp(0.5rem, 0.25rem + 0.5vw, 0.75rem);
}

/* --------------------------------------------
   Article list — used on Our Work / Blog pages
   Vertical stack of image-left + content-right cards,
   separated by hairline rules. Date label, italic heading,
   short body, "Read more" link.
   -------------------------------------------- */
.article-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-dark);
}

.article-card {
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  border-bottom: 1px solid var(--color-dark);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .article-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.article-card_image {
  margin: 0;
  width: 100%;
  aspect-ratio: 610 / 358;
  border: 1.5px solid var(--color-dark);
  background: var(--color-bg-tint);
  overflow: hidden;
}

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

.article-card_body {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 0.5rem + 0.75vw, 1.25rem);
  align-items: flex-start;
}

.article-card_body h3 { margin: 0; }
.article-card_body p  { margin: 0; max-width: 32rem; }

.article-card_date {
  margin: 0;
}

/* --------------------------------------------
   Contact section — cream panel with form on the left
   and company-info column on the right. Used on the
   contact page.
   -------------------------------------------- */
.contact-section {
  background: var(--color-bg-tint);
  border-top: 1px solid var(--color-dark);
  border-bottom: 1px solid var(--color-dark);
}

.contact-section_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1.5rem + 2vw, 4rem);
  align-items: start;
}

@media (min-width: 900px) {
  .contact-section_grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

/* Form — a white card (border + padding) wrapping the fields,
   with the submit button sitting OUTSIDE and centered below the card. */
.contact-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 1vw, 2.5rem);
}

.contact-form_card {
  background: var(--color-light);
  border: 1.5px solid var(--color-dark);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 0.75rem + 0.5vw, 1.5rem);
}

.contact-form_card hr {
  border: 0;
  border-top: 1.5px solid var(--color-dark);
  margin: 0;
}

.contact-form_field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.contact-form_input {
  font: inherit;
  border: 0;
  border-bottom: 1.5px solid var(--color-dark);
  background: transparent;
  padding: 0.5rem 0;
  width: 100%;
  color: var(--color-dark);
}
.contact-form_input::placeholder { color: var(--color-primary-50); }
.contact-form_input:focus { outline: none; border-bottom-width: 2px; }

.contact-form_textarea {
  font: inherit;
  border: 1.5px solid var(--color-dark);
  background: var(--color-light);
  padding: 0.75rem 1rem;
  width: 100%;
  min-height: 12rem;
  resize: vertical;
  color: var(--color-dark);
}
.contact-form_textarea::placeholder { color: var(--color-primary-50); }
.contact-form_textarea:focus { outline: none; border-width: 2px; }

/* Company info column on the right */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 1rem + 0.75vw, 2rem);
}

.contact-info_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 0.5rem + 0.5vw, 1.25rem);
}

.contact-info_item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.contact-info_icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  color: var(--color-dark);
}

.contact-info_text { margin: 0; }
.contact-info_text a { color: inherit; text-decoration: underline; }

/* --------------------------------------------
   Project page — case study / blog article layout.
   Used on individual project pages like Life Church Ingham.
   -------------------------------------------- */

/* Project meta strip below the page intro — date, location, project type */
.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 0.75rem + 1vw, 2rem);
  padding-block: clamp(1rem, 0.75rem + 0.75vw, 1.5rem);
  border-top: 1px solid var(--color-dark);
  border-bottom: 1px solid var(--color-dark);
}

.project-meta_item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.project-meta_label {
  margin: 0;
  color: var(--color-primary-50);
}

.project-meta_value {
  margin: 0;
}

/* Project hero image — full-width landscape image below the intro */
.project-hero-image {
  margin: 0;
  width: 100%;
  aspect-ratio: 1525 / 700;
  border: 1.5px solid var(--color-dark);
  background: var(--color-bg-tint);
  overflow: hidden;
}

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

/* Project gallery — responsive grid of project photos */
.project-gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 0.5rem + 0.5vw, 1.25rem);
}

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

.project-gallery_item {
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1.5px solid var(--color-dark);
  background: var(--color-bg-tint);
  overflow: hidden;
}

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

.project-gallery_header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.project-gallery_header h2 { margin: 0; }

/* --------------------------------------------
   CTA banner — wide bordered banner with a background photo
   and left-aligned text overlay. Used at the bottom of service pages
   between FAQs and the Build-With-Legacy CTA band.
   Background image is set inline per-page via the style attribute.
   -------------------------------------------- */
.cta-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1.5px solid var(--color-dark);
  background-color: var(--color-bg-tint);
  background-size: cover;
  background-position: center right;
  display: flex;
  align-items: center;
  min-height: clamp(13rem, 9rem + 12vw, 20rem);
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
}

/* Soft white-to-transparent gradient on the left for text legibility.
   On mobile the gradient is denser since the text overlaps more of the image. */
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(255, 253, 249, 0.94) 0%,
    rgba(255, 253, 249, 0.85) 30%,
    rgba(255, 253, 249, 0.4) 55%,
    rgba(255, 253, 249, 0) 75%
  );
}

@media (max-width: 720px) {
  .cta-banner::before {
    background: rgba(255, 253, 249, 0.85);
  }
}

.cta-banner_content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.5rem, 0.25rem + 0.5vw, 1rem);
  max-width: 32rem;
}

.cta-banner_heading { margin: 0; }
.cta-banner_subtitle { margin: 0; color: var(--color-primary-70); }
.cta-banner_cta { margin-top: clamp(0.25rem, 0rem + 0.5vw, 0.75rem); }

/* --------------------------------------------
   Work showcase — used on the Our Work page.
   Each section: 3-image vertical stack on the left,
   heading + meta + body + Get-A-Quote button on the right.
   Stacks on mobile (image grid first, content below).
   -------------------------------------------- */
.work-showcase {
  padding-block: clamp(2rem, 1.5rem + 2vw, 4rem);
  border-bottom: 1px solid var(--color-dark);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: center;
}

@media (min-width: 900px) {
  .work-showcase {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.work-showcase_stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.5rem, 0.25rem + 0.5vw, 0.75rem);
}

.work-showcase_image {
  margin: 0;
  width: 100%;
  aspect-ratio: 633 / 185;
  border: 1.5px solid var(--color-dark);
  background: var(--color-bg-tint);
  overflow: hidden;
}

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

.work-showcase_content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.5rem, 0.25rem + 0.5vw, 1rem);
}

.work-showcase_meta {
  margin: 0;
  color: var(--color-primary-70);
}

.work-showcase_heading { margin: 0; }
.work-showcase_content p { margin: 0; max-width: 32rem; }
.work-showcase_cta { margin-top: clamp(0.25rem, 0rem + 0.5vw, 0.75rem); }

/* List wrapper for the showcase sections — first item has top border too */
.work-showcase-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-dark);
}

/* --------------------------------------------
   Step list — vertical timeline of process steps
   Each item shows a dot connected by a hairline
   line to the next, mirroring the Figma marker.
   -------------------------------------------- */
.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  width: 100%;
}

.step-list_item {
  position: relative;
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  column-gap: 1rem;
  align-items: start;
}

.step-list_marker {
  position: relative;
  width: 0.625rem;
  height: 0.625rem;
  margin-top: 0.45rem;
  margin-left: 0.3125rem;
  background: var(--color-dark);
  border-radius: 999px;
  flex-shrink: 0;
}

/* Connecting line from this marker down to the next item's marker */
.step-list_item:not(:last-child) .step-list_marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 1px;
  height: calc(clamp(1rem, 0.75rem + 1vw, 1.5rem) + 100%);
  background: var(--color-dark);
}

.step-list_body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.step-list_body h3 { margin: 0; }
.step-list_body p  { margin: 0; max-width: 30rem; color: var(--color-primary-70); }

/* --------------------------------------------
   Recent Renovations — header + featured project showcase
   Hairline rules above and below the feature article
   match the Figma divider lines.
   -------------------------------------------- */
.recent-renos > .container-xl {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.recent-renos_header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-bottom: clamp(1rem, 0.5rem + 1vw, 1.75rem);
  border-bottom: 1px solid var(--color-dark);
}
.recent-renos_header-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.recent-renos_header h2 { margin: 0; }

.recent-renos_track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-bottom: 1px solid var(--color-dark);
}
.recent-renos_track::-webkit-scrollbar { display: none; }

.recent-renos_feature {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: center;
}

@media (min-width: 900px) {
  .recent-renos_feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.recent-renos_body {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 0.75rem + 1vw, 1.75rem);
  align-items: flex-start;
}

.recent-renos_text {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 0.25rem + 0.5vw, 1rem);
  align-items: flex-start;
}
.recent-renos_text p  { margin: 0; max-width: 32rem; }
.recent-renos_text h3 { margin: 0.25rem 0 0 0; }

.recent-renos_nav {
  display: flex;
  gap: 0.5rem;
}

.recent-renos_arrow {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1.5px solid var(--color-dark);
  border-radius: 0;
  background: var(--color-dark);
  color: var(--color-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.recent-renos_arrow:hover {
  background: transparent;
  color: var(--color-dark);
}
.recent-renos_arrow[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.recent-renos_arrow[disabled]:hover {
  background: var(--color-dark);
  color: var(--color-light);
}
.recent-renos_arrow i {
  width: 1.15rem;
  height: 1.15rem;
}

.recent-renos_date {
  margin: 0;
}

.recent-renos_image {
  margin: 0;
  width: 100%;
  aspect-ratio: 610 / 434;
  border: 1.5px solid var(--color-dark);
  background: var(--color-bg-tint);
  overflow: hidden;
}
.recent-renos_image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Centred CTA button below the recent-renovations feature */
.recent-renos_cta {
  display: flex;
  justify-content: center;
  padding-top: clamp(0.5rem, 0.25rem + 0.75vw, 1rem);
}