/* ==========================================================================
   styles.css — Home page sections
   Mobile-first; desktop values match the 1440px Figma frame.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header / navbar
   -------------------------------------------------------------------------- */
.site-header {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 20;
}

/* Pinned bar. The header only leaves the flow once it has scrolled past, and
   .site-header__spacer takes over its height, so nothing jumps.
   The .page--inner selector below is just as specific, hence the pairing. */
.site-header.is-stuck,
.page--inner .site-header.is-stuck {
  position: fixed;
  border-block-end: 1px solid var(--c-line);
  /* `backwards`, not `both`: a filled `both` animation leaves `transform`
     animated forever, which keeps the header a containing block for
     position:fixed children and clips the mobile drawer to the header box. */
  animation: header-drop 0.32s var(--ease) backwards;
}

/* While the drawer is open the header must not run the drop animation: for the
   0.32s it lasts, the animated `transform` makes the header the containing
   block for the drawer, which is position:fixed, and the panel collapses to
   the header box and then snaps back. */
.site-header:has(.site-header__nav[data-open="true"]) {
  animation: none;
}

/* Same reason the glass is on a pseudo-element and not on the bar itself:
   backdrop-filter also makes an element the containing block for its
   position:fixed descendants, and the mobile drawer is one of them. */
.site-header.is-stuck::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(26, 26, 26, 0.82);
  backdrop-filter: blur(14px);
}

@keyframes header-drop {
  from {
    transform: translateY(-100%);
  }
}

.site-header__spacer {
  block-size: 0;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  min-block-size: 6rem; /* 96px — Nav [mobile] */
  padding-block: var(--sp-4);
}

/* The transition lives on the pinned state only. Going compact animates
   (the bar is fixed, nothing in the flow moves); coming back snaps, because
   the header is in the flow again and easing its height would shove the whole
   page up and slide it back down. */
.is-stuck .site-header__inner {
  min-block-size: 4.5rem; /* 72px */
  transition: min-block-size var(--dur) var(--ease),
    padding-block var(--dur) var(--ease);
}

/* Inner pages put the navbar in normal flow; only the home hero sits under it */
.page--inner .site-header {
  position: static;
}

.site-header__logo {
  flex: 0 0 auto;
  /* Above the mobile sheet (z 30), so the logo/X row reads as the drawer's own
     header the way the design shows it. */
  position: relative;
  z-index: 40;
}

.site-header__logo img {
  inline-size: clamp(5.5rem, 3.875rem + 6.667vw, 9.875rem); /* 88px -> 158px */
}

/* The pinned bar trims the mark by ~18% so the row reads as a compact toolbar */
.is-stuck .site-header__logo img {
  inline-size: clamp(4.5rem, 3.188rem + 5.375vw, 8.125rem); /* 72px -> 130px */
  transition: inline-size var(--dur) var(--ease);
}

/* --- primary navigation --- */
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding-block: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-sm);
  color: var(--c-text);
  transition: color var(--dur) var(--ease);
}

.site-nav__link:hover {
  color: var(--c-accent-light);
}

.site-nav__link svg {
  inline-size: 1rem;
  block-size: 1rem;
}

/* --- "Services" dropdown --- */
.site-nav__item--menu {
  position: relative;
}

.site-nav__row {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.site-nav__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  color: var(--c-text);
  cursor: pointer;
  transition: color var(--dur) var(--ease), rotate var(--dur) var(--ease);
}

.site-nav__caret svg {
  inline-size: 1rem;
  block-size: 1rem;
}

.site-nav__caret:hover {
  color: var(--c-accent-light);
}

.site-nav__caret[aria-expanded="true"] {
  rotate: 180deg;
}

.site-nav__menu ul {
  display: flex;
  flex-direction: column;
}

.site-nav__menu a {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-sm);
  color: var(--c-text-muted);
  transition: background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.site-nav__menu a:hover,
.site-nav__menu a:focus-visible {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--c-accent-light);
}

.site-nav__menu [aria-current="page"] {
  color: var(--c-text);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* --- burger (mobile only) --- */
.site-header__burger {
  /* Above the drawer (z 30), so it stays reachable as the close button —
     its `aria-expanded="true"` X state is already styled below. */
  position: relative;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-xs);
  background-image: var(--grad-sheen);
  color: var(--c-text);
}

.site-header__burger span {
  position: relative;
  inline-size: 1.125rem;
  block-size: 2px;
  background-color: currentColor;
  transition: background-color var(--dur) var(--ease);
}

.site-header__burger span::before,
.site-header__burger span::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 2px;
  background-color: currentColor;
  transition: transform var(--dur) var(--ease);
}

.site-header__burger span::before {
  inset-block-start: -0.375rem;
}

.site-header__burger span::after {
  inset-block-start: 0.375rem;
}

.site-header__burger[aria-expanded="true"] span {
  background-color: transparent;
}

.site-header__burger[aria-expanded="true"] span::before {
  transform: translateY(0.375rem) rotate(45deg);
}

.site-header__burger[aria-expanded="true"] span::after {
  transform: translateY(-0.375rem) rotate(-45deg);
}

/* Mobile drawer */
@media (max-width: 63.99rem) {
  /* Review (Figma 162:4334): the open navigation is a full-width sheet from the
     top, with the header's logo and X row showing above it — not a side drawer.
     Links sit in a 38px gutter with a 16px rhythm. */
  .site-header__nav {
    position: fixed;
    inset-block: 0;
    inset-inline: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    /* Not centred: the sheet is taller than the viewport once Services is open
       (the Figma frame is 945px on an 844px screen), and centring an
       overflowing column pushes the first link up under the logo. */
    padding: var(--sp-20) 2.375rem var(--sp-8); /* 38px inline */
    overflow-y: auto;
    background-color: var(--c-bg);
    background-image: var(--grad-sheen);
    border-block-end: 1px solid var(--c-line);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform var(--dur) var(--ease),
      visibility var(--dur) var(--ease);
  }

  .site-header__nav[data-open="true"] {
    transform: translateY(0);
    visibility: visible;
  }

  .site-nav__list {
    gap: var(--sp-4);
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
    /* clears the logo row at the top of the drawer */
    margin-block-start: 50px;
  }

  .site-nav__link {
    font-size: var(--fs-lead);
    padding-block: var(--sp-3);
  }

  /* In the drawer the panel is an accordion under the "Services" row */
  .site-nav__row {
    justify-content: space-between;
  }

  .site-nav__caret {
    inline-size: 2.25rem;
    block-size: 2.25rem;
  }

  .site-nav__menu {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur) var(--ease);
  }

  .site-nav__menu > ul {
    overflow: hidden;
    min-block-size: 0;
  }

  /* In the drawer the submenu is not a floating panel, so its links sit flush
     with "Services" instead of being inset like the desktop dropdown. */
  .site-nav__menu a {
    padding-inline: 0;
  }

  .site-nav__item--menu[data-open="true"] .site-nav__menu {
    grid-template-rows: 1fr;
  }

  .site-header__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .site-header__actions .btn {
    padding: 0.75rem 1.5rem;
    font-size: var(--fs-body);
  }
}

@media (min-width: 64rem) {
  .site-header__inner {
    min-block-size: 7.6875rem; /* 123px — _header/navbar [desktop] */
    padding-block: var(--sp-1);
  }

  .is-stuck .site-header__inner {
    min-block-size: 5.5rem; /* 88px */
  }

  .site-header__burger {
    display: none;
  }

  .site-header__nav {
    display: contents;
  }

  .site-nav__menu {
    position: absolute;
    inset-block-start: calc(100% + var(--sp-3));
    inset-inline-start: calc(var(--sp-4) * -1);
    z-index: 5;
    inline-size: max-content;
    max-inline-size: 20rem;
    padding: var(--sp-2);
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    background-color: rgba(26, 26, 26, 0.94);
    background-image: var(--grad-sheen);
    backdrop-filter: blur(14px);
    box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    translate: 0 -0.5rem;
    transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease),
      visibility var(--dur) var(--ease);
  }

  .site-nav__item--menu:hover .site-nav__menu,
  .site-nav__item--menu:focus-within .site-nav__menu,
  .site-nav__item--menu[data-open="true"] .site-nav__menu {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
  }

  /* Hovering the whole "Services" row flips the chevron up and tints it, along
     with the link — the panel opens on row hover, so the caret has to follow it
     rather than only its own hover. */
  .site-nav__item--menu:hover .site-nav__link,
  .site-nav__item--menu:focus-within .site-nav__link,
  .site-nav__item--menu:hover .site-nav__caret,
  .site-nav__item--menu:focus-within .site-nav__caret {
    color: var(--c-accent-light);
  }

  .site-nav__item--menu:hover .site-nav__caret,
  .site-nav__item--menu:focus-within .site-nav__caret,
  .site-nav__item--menu[data-open="true"] .site-nav__caret {
    rotate: 180deg;
  }

  /* Keeps the pointer from falling through the gap between row and panel */
  .site-nav__item--menu::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    block-size: var(--sp-3);
  }
}

/* Backdrop behind the mobile drawer. It must stay *under* .site-header (z 20),
   otherwise it swallows every click inside the drawer, which lives in the
   header's stacking context and cannot rise above it. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 15;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}

.nav-backdrop[data-open="true"] {
  opacity: 1;
  visibility: visible;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-block-size: 45.1875rem; /* 723px — MOBILE frame */
  padding-block-start: 8rem;
  overflow: hidden;
  isolation: isolate;
}

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

.hero__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* #1A1A1A at 30%, blend multiply — matches Figma "Rectangle 7" */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--c-bg);
  opacity: 0.3;
  mix-blend-mode: multiply;
}

/* Bottom-up scrim — Figma gradient handles run from bottom to top */
.hero__scrim {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: -1;
  block-size: 66%;
  background-image: linear-gradient(
    to top,
    var(--c-bg) 0%,
    rgba(26, 26, 26, 0) 100%
  );
}

/* MOBILE frame order: badge + heading, paragraph, then full-width buttons */
.hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding-block: var(--sp-4) var(--sp-8);
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.hero__actions .btn {
  inline-size: 100%;
}

/* The MOBILE frame ends the intro with an inline "See more" affordance,
   and drops the hero intro alone to 16/26.4 */
.hero__lead,
.hero__lead--extra {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.hero__lead--extra {
  display: none;
}

.hero__more {
  display: inline;
  margin-inline-start: 0.5ch;
  font: inherit;
  font-weight: 500;
  color: var(--c-text);
}

.hero__more:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.hero__text[data-expanded="true"] .hero__lead--extra {
  display: block;
}

@media (min-width: 64rem) {
  .hero {
    min-block-size: 56.25rem; /* 900px */
    padding-block-start: 7.5rem;
  }

  /* DESKTOP frame: heading + buttons stacked on the left (605px),
     paragraphs on the right (440px), all bottom-aligned. */
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--sp-12);
    align-items: end;
    row-gap: var(--sp-15);
    padding-block: 7.5rem var(--sp-20);
  }

  .hero__content {
    grid-area: 1 / 1;
    max-inline-size: 37.8125rem; /* 605px */
    gap: var(--sp-5);
  }

  .hero__actions {
    grid-area: 2 / 1;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hero__actions .btn {
    inline-size: auto;
  }

  .hero__text {
    grid-area: 1 / 2 / 3 / 3;
    justify-self: end;
    align-self: end;
    max-inline-size: 27.5rem; /* 440px */
  }

  .hero__lead,
  .hero__lead--extra {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }

  .hero__lead--extra {
    display: block;
  }

  .hero__more {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Features strip
   -------------------------------------------------------------------------- */
.features {
  padding-block: var(--sp-8);
  background-image: var(--grad-sheen);
  border-block: 1px solid var(--c-line);
}

.features__grid {
  display: grid;
  gap: var(--sp-4);
}

.feature {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-inline-start: var(--sp-3);
  border-inline-start: 1px solid var(--c-line-cream);
}

@media (min-width: 48rem) {
  .features__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6);
  }
}

@media (min-width: 64rem) {
  .features {
    padding-block: var(--sp-10);
  }

  .features__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .feature {
    gap: var(--sp-3);
  }
}

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */
.services .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
}

.services__grid {
  display: grid;
  gap: var(--sp-3);
  inline-size: 100%;
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/* The whole card leads to its service page. The layout linked only the
   "Explore more" label, and below 48rem it hides that label — which left the
   card with nothing to click at all. Stretching the existing anchor keeps both
   the markup and the visible design unchanged. */
.service-card .link-more::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.service-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xs);
  background-color: rgba(250, 250, 250, 0.02);
}

.service-card__media img {
  inline-size: 100%;
  max-inline-size: 14.6875rem; /* 235px */
  opacity: 1;
  transition: filter var(--dur) var(--ease);
}

/* Hover variant from Figma (205:5016): the icon goes from --c-icon #FDD3AB to
   --c-accent-light #F9893E. The icon is an external <img src="*.svg">, so its
   fill is out of CSS reach — this chain maps the single flat source colour onto
   the target exactly (solved numerically: rgb(253,211,171) -> rgb(249,137,62),
   distance 0). Keep it in step with --c-icon / --c-accent-light. */
.service-card:hover .service-card__media img,
.service-card:focus-within .service-card__media img {
  filter: brightness(0.72) saturate(3.15) hue-rotate(-6deg);
}

.service-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xs);
  background-image: var(--grad-sheen);
  transition: background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

/* Hovering anywhere on the card flattens the sheen to solid and brightens
   the top edge to #FFDAA4 at 34% */
.service-card:hover .service-card__body,
.service-card:focus-within .service-card__body {
  border-block-start-color: rgba(255, 218, 164, 0.34);
  background-color: var(--c-bg);
  background-image: none;
}

.service-card__title {
  color: #fff;
}

.service-card__text {
  flex: 1;
  max-inline-size: 22.125rem; /* 354px — Figma paragraph width */
}

/* Mobile: one bordered row — copy on the left, icon on the right
   (Figma MOBILE/Home wraps both inside a single container) */
@media (max-width: 47.99rem) {
  .service-card {
    flex-direction: row-reverse;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-6) 0 var(--sp-6) var(--sp-6);
    border: 1px solid var(--c-line);
    border-radius: var(--r-xs);
    background-image: var(--grad-sheen);
  }

  .service-card__body {
    flex: 1;
    min-inline-size: 0;
    padding: 0;
    border: 0;
    background-image: none;
  }

  .service-card__text {
    display: none;
  }

  /* The label is not shown on mobile, as in the design, but the anchor stays
     so the card remains reachable. */
  .service-card .link-more {
    position: absolute;
    inset: 0;
    gap: 0;
    font-size: 0;
  }

  .service-card__media {
    flex: 0 1 6.875rem; /* 110px, may shrink on very narrow screens */
    min-inline-size: 0;
    aspect-ratio: 110 / 82;
    /* Review: the icon plate is dropped on mobile — at this size the tinted
       panel behind the icon reads as noise. */
    background-color: transparent;
  }

  .service-card__title {
    overflow-wrap: break-word;
  }

  /* Figma tightens the services head to a 12px gap on mobile */
  .services .section-head {
    gap: var(--sp-3);
  }
}

@media (min-width: 48rem) {
  .services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6);
  }

  .service-card__media {
    aspect-ratio: 414 / 176;
  }
}

@media (min-width: 64rem) {
  .services .container {
    gap: var(--sp-12);
  }

  .services__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Showcase — photo gallery with thumbnail switcher
   -------------------------------------------------------------------------- */
.showcase__inner {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--sp-8);
}

.showcase__gallery {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-inline-size: 0;
}

.showcase__aside {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.showcase__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-6);
}

.showcase__foot p {
  max-inline-size: 18.4375rem; /* 295px */
}

/* --- gallery slider: one photo at a time, thumbnails switch it --- */
.gallery {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xs);
  aspect-ratio: 760 / 488;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}

.gallery:active {
  cursor: grabbing;
}

/* Let the root own the pointer so a drag never turns into an image drag */
.gallery__slide img {
  pointer-events: none;
  -webkit-user-drag: none;
}

.gallery__track {
  display: flex;
  block-size: 100%;
  transition: transform 0.45s var(--ease);
}

.gallery__slide {
  flex: 0 0 100%;
  min-inline-size: 0;
}

.gallery__slide img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.showcase__thumbs li button {
  display: block;
  inline-size: 100%;
  border-radius: var(--r-xs);
  overflow: hidden;
  opacity: 0.55;
  transition: opacity var(--dur) var(--ease), outline-color var(--dur) var(--ease);
  outline: 2px solid transparent;
  /* Inset, so the frame sits on the thumbnail edge as it does in the design
     and follows the 4px radius. */
  outline-offset: -2px;
}

.showcase__thumbs li button:hover {
  opacity: 0.8;
}

.showcase__thumbs li button[aria-current="true"] {
  opacity: 1;
  /* Review: the active frame is #FCB375, 2px (Figma 90:3352). */
  outline-color: var(--c-accent-soft);
}

/* --- slide 1: before / after compare, divider is dragged --- */
.compare {
  position: relative;
  block-size: 100%;
  overflow: hidden;
  touch-action: pan-y;
  cursor: ew-resize;
}

.compare__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.compare__img--after {
  clip-path: inset(0 0 0 var(--pos, 50%));
}

.compare__divider {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--pos, 50%);
  inline-size: 0.5rem;
  translate: -50% 0;
  border: 1px solid rgba(26, 26, 26, 0.2);
  border-radius: var(--r-sm);
  background-image: var(--grad-divider);
}

.compare__handle {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--pos, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  translate: -50% -50%;
  border-radius: var(--r-pill);
  background-color: var(--c-text);
  color: var(--c-bg);
  cursor: ew-resize;
}

.compare__handle svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.compare[data-dragging] .compare__img--after,
.compare[data-dragging] .compare__divider,
.compare[data-dragging] .compare__handle {
  transition: none;
}

/* --- thumbnails --- */
/* Figma: 200x140 thumbnails, 12px apart, in a strip that runs past the
   container edge; the next control floats over its right end. */
.showcase__thumbs {
  position: relative;
}

.showcase__thumbs ul {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.showcase__thumbs ul::-webkit-scrollbar {
  display: none;
}

.showcase__thumbs li {
  flex: 0 0 12.5rem; /* 200px */
  scroll-snap-align: start;
}

.showcase__next {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--sp-3);
  z-index: 2;
  translate: 0 -50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-pill);
  background-color: var(--c-bg);
  background-image: var(--grad-orb);
  color: var(--c-text);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  transition: border-color var(--dur) var(--ease);
}

.showcase__next:hover {
  border-color: var(--c-line-hover);
}

.showcase__next svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.showcase__thumbs img {
  inline-size: 100%;
  aspect-ratio: 200 / 140;
  object-fit: cover;
  border-radius: var(--r-xs);
}

@media (min-width: 64rem) {
  .showcase__inner {
    flex-direction: row;
    align-items: stretch;
    gap: var(--sp-12);
  }

  .showcase__gallery {
    flex: 1 1 47.5rem; /* 760px */
    justify-content: center;
  }

  .showcase__aside {
    flex: 0 1 29.375rem; /* 470px */
    justify-content: space-between;
    gap: var(--sp-20);
  }
}

/* --------------------------------------------------------------------------
   About / why us
   -------------------------------------------------------------------------- */
.about .container {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.about__top {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.about__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-6);
}

.about__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.about__media img {
  inline-size: 100%;
  aspect-ratio: 358 / 360; /* MOBILE frame */
  object-fit: cover;
  border-radius: var(--r-xs);
}

@media (min-width: 64rem) {
  .about__top {
    flex-direction: row;
    gap: var(--sp-6);
  }

  .about__head {
    flex: 0 1 38.5rem; /* 616px */
  }

  .about__text {
    flex: 0 1 40rem; /* 640px */
  }

  .about__media img {
    aspect-ratio: 2 / 1; /* 1280x640 in the DESKTOP frame */
  }
}

/* --------------------------------------------------------------------------
   Process
   -------------------------------------------------------------------------- */
.process .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
}

 /* Figma hugs this heading to its text; only the paragraph is capped */
.process__intro .lead {
  max-inline-size: 31.25rem; /* 500px */
}

.process__list {
  display: grid;
  gap: var(--sp-6);
  inline-size: 100%;
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.step__head {
  display: flex;
  flex-direction: column;
}

.step__num {
  font-family: var(--ff-display);
  font-size: var(--fs-step);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: var(--ls-display);
  color: #fff;
}

.step__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-block-size: 7.5rem; /* 120px — Figma keeps all four rows level */
}

.step__divider {
  block-size: 1px;
  border-block-start: 1px solid var(--c-line-cream);
  transition: border-color var(--dur) var(--ease);
}

/* Review: hovering a process card tints its divider (Figma 77:6884). */
.step:hover .step__divider,
.step:focus-within .step__divider {
  border-block-start-color: var(--c-accent-light);
}

.step__text {
  display: flex;
  gap: var(--sp-2);
}

.step__text::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  margin-block-start: var(--sp-2);
  border-radius: var(--r-xs);
  background-color: var(--c-accent);
}

@media (min-width: 48rem) {
  .process__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-8);
  }
}

@media (min-width: 64rem) {
  .process .container {
    gap: var(--sp-15);
  }

  .process__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-12);
  }

  .step__body {
    min-block-size: 7.8125rem; /* 125px */
  }
}

/* --------------------------------------------------------------------------
   Service areas + map
   -------------------------------------------------------------------------- */
.areas__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.areas__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.areas__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.areas__cities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.areas__cities li {
  display: flex;
}

/* 173x40 with 6/12 padding in both MOBILE frames */
.areas__cities .btn {
  padding: 0.375rem 0.75rem;
}

.areas__cities .btn {
  flex: 1;
  justify-content: space-between;
  gap: var(--sp-2);
}

.areas__map {
  border-radius: var(--r-xs);
  overflow: hidden;
  background-color: var(--c-map-bg);
}

.areas__map img {
  inline-size: 100%;
  aspect-ratio: 760 / 640;
  object-fit: cover;
}

@media (min-width: 64rem) {
  .areas__inner {
    flex-direction: row;
    align-items: stretch;
    gap: var(--sp-12);
  }

  .areas__content {
    flex: 0 1 29.375rem; /* 470px */
    justify-content: space-between;
  }

  .areas__map {
    flex: 1 1 47.5rem; /* 760px */
  }

  .areas__cities .btn {
    padding: 0.75rem 1.5rem; /* 229x52 in the DESKTOP frame */
  }
}

/* --------------------------------------------------------------------------
   Reviews carousel
   -------------------------------------------------------------------------- */
.reviews .container {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.reviews__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-6);
}

/* The MOBILE frame drops this call to action */
@media (max-width: 63.99rem) {
  .reviews__head > .btn {
    display: none;
  }
}

.reviews__viewport {
  overflow: hidden;
}

.reviews__track {
  display: flex;
  gap: var(--sp-6);
  transition: transform 0.4s var(--ease);
}

.review-card {
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-10);
  min-block-size: 18.25rem; /* 292px in both Figma frames */
  padding: var(--sp-6);
  border: 1px solid var(--c-line-cream);
  border-radius: var(--r-sm);
  background-image: var(--grad-review);
}

.review-card__author {
  display: flex;
  flex-direction: column;
}

.review-card__name {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-accent-light);
}

.review-card__role {
  color: var(--c-text);
}

.reviews__nav {
  display: flex;
  align-self: center;
  gap: var(--sp-3);
}

.reviews__nav button[disabled] {
  opacity: 0.5; /* Figma "Button - previous slide" inactive state */
  cursor: default;
}

@media (min-width: 48rem) {
  .review-card {
    flex-basis: calc((100% - var(--sp-6)) / 2);
  }
}

@media (min-width: 64rem) {
  .reviews .container {
    gap: var(--sp-12);
  }

  .reviews__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-6);
  }

  .review-card {
    flex-basis: 30%; /* 384px of the 1280px content box */
    gap: var(--sp-20);
  }
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq {
  overflow: hidden;
}

.faq__media {
  /* Figma anchors the drawing to the block's bottom edge — 35.4px above it and
     80px off the left gutter — on every page, whatever the block's height. */
  position: absolute;
  inset-block-end: 2.2125rem;
  inset-inline-start: 0;
  z-index: 0;
  inline-size: 56.25rem; /* 900px */
  max-inline-size: none;
  pointer-events: none;
  translate: -5rem 0;
}

.faq__media img {
  inline-size: 100%;
}

.faq__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding-block-start: var(--sp-10);
}

.faq__item {
  border-radius: var(--r-sm);
  background-color: rgba(255, 255, 255, 0.05);
  /* Review: the panel is glass over the section photo (Figma 142:4222). */
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  inline-size: 100%;
  padding: var(--sp-5);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.45;
  text-align: start;
  color: var(--c-text);
}

.faq__icon {
  position: relative;
  flex: 0 0 auto;
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  background-color: #f19c79; /* the colour of Figma's "Dropdown Icon" PNG */
  translate: -50% -50%;
  transition: transform var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

.faq__icon::before {
  inline-size: 0.875rem;
  block-size: 1.5px;
}

.faq__icon::after {
  inline-size: 1.5px;
  block-size: 0.875rem;
}

.faq__question[aria-expanded="true"] .faq__icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}

.faq__question[aria-expanded="true"] + .faq__answer {
  grid-template-rows: 1fr;
}

.faq__answer > div {
  overflow: hidden;
}

.faq__answer p {
  padding: 0 var(--sp-5) var(--sp-5);
}

@media (min-width: 64rem) {
  .faq__inner {
    align-items: flex-end;
  }

  .faq__head,
  .faq__list {
    inline-size: 100%;
    max-inline-size: 40rem; /* 640px */
  }

  .faq__media {
    translate: -5rem 0;
  }
}

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.cta__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.cta__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.cta__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--c-bg);
  opacity: 0.3;
  mix-blend-mode: multiply;
}

.cta__scrim {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: -1;
  block-size: 55.78%; /* 357px of the 640px band */
  /* "Rectangle 6" carries relativeTransform [[1,0,0],[0,-1,356.6]] — a vertical
     flip — so its handles read bottom-up in Figma but paint top-down: solid at
     the band's top edge, clear by 76.13% of the 357px (272px). */
  background-image: linear-gradient(
    to bottom,
    var(--c-bg) 0%,
    rgba(26, 26, 26, 0) 76.13%
  );
}

.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
}

.cta__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
}

.cta__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  max-inline-size: 31.25rem; /* 500px */
}

.cta__text {
  /* The CTA paragraph runs tighter than the shared lead: 18/25.2 in both frames */
  line-height: 1.4;
  color: #f5f5f5;
}

/* "BtnPrimary" in the CTA is its own component: Archivo 500, 16/22.5,
   1px letter-spacing and a near-black hairline, so it sits 49px tall. */
.cta__foot .btn {
  /* Figma draws the 1px stroke outside the 12/24 padding box, so add it back */
  padding: calc(var(--sp-3) + 1px) calc(var(--sp-6) + 1px);
  border-color: #111;
  font-weight: 500;
  line-height: 1.40625;
  letter-spacing: 0.0625em;
}

.cta h2 {
  color: var(--c-map-bg);
}

@media (min-width: 64rem) {
  .cta {
    min-block-size: 40rem; /* 640px band in the DESKTOP frame */
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: var(--sp-8) var(--sp-4);
  background-color: var(--c-bg);
}

.site-footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.site-footer__brand img {
  inline-size: clamp(6.875rem, 4.95rem + 7.905vw, 12.0625rem); /* 110 -> 193px */
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8);
}

.site-footer__col-title {
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--c-accent-soft);
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding-block-start: var(--sp-4);
}

.site-footer__list a {
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-sm);
  color: var(--c-text);
  transition: color var(--dur) var(--ease);
}

.site-footer__list a:hover {
  color: var(--c-accent-light);
}

.site-footer__col .btn {
  margin-block-start: var(--sp-6);
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--c-line-cream);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.6;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
}

.site-footer__legal a:hover {
  color: var(--c-accent-light);
}

@media (min-width: 48rem) {
  .site-footer__cols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 64rem) {
  .site-footer {
    padding-block: var(--sp-16) var(--sp-10);
  }

  .site-footer__top {
    flex-direction: row;
    gap: var(--sp-12);
  }

  .site-footer__brand {
    flex: 0 1 21.25rem; /* 340px */
  }

  .site-footer__cols {
    flex: 1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-8);
  }
}

/* At the 1440px frame width Figma pins four content columns
   (136 / 204 / 117 / 174) to the right edge, 60px apart. */
@media (min-width: 90rem) {
  .site-footer__cols {
    grid-template-columns: 8.5rem 12.75rem 7.3125rem 10.875rem;
    justify-content: end;
    gap: var(--sp-15);
  }
}

/* ==========================================================================
   Services general page
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page hero — centred heading over a full-width photo
   -------------------------------------------------------------------------- */
.page-hero {
  padding-block: var(--sp-12);
}

/* Only the Services frame leaves an extra 48px between navbar and heading */
.page-hero--gap {
  padding-block-start: 6rem;
}

.page-hero .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

/* MOBILE frame left-aligns this block; the DESKTOP frame centres it */
.page-hero__head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-6);
  inline-size: 100%;
}

.page-hero__title {
  inline-size: 100%;
}

.page-hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  inline-size: 100%;
}

.page-hero__actions .btn {
  inline-size: 100%;
}

.page-hero__media {
  inline-size: 100%;
  border-radius: var(--r-xs);
  overflow: hidden;
}

.page-hero__media img {
  inline-size: 100%;
  aspect-ratio: 358 / 360; /* MOBILE frame */
  object-fit: cover;
}

@media (min-width: 48rem) {
  .page-hero__actions {
    flex-direction: row;
    inline-size: auto;
  }

  .page-hero__actions .btn {
    inline-size: auto;
  }
}

@media (min-width: 64rem) {
  .page-hero {
    padding-block: var(--sp-16);
  }

  .page-hero .container {
    gap: var(--sp-12);
  }

  .page-hero__head {
    align-items: center;
    max-inline-size: 45rem; /* 720px */
    text-align: center;
  }

  .page-hero__lead {
    max-inline-size: 27.5rem; /* 440px */
  }

  /* About's hero paragraph runs the full 640px */
  .page-hero--wide .page-hero__lead {
    max-inline-size: 40rem;
  }

  .page-hero__actions {
    justify-content: center;
  }

  .page-hero__media img {
    aspect-ratio: 2 / 1; /* 1280x640 in the DESKTOP frame */
  }
}

/* --------------------------------------------------------------------------
   Services list — intro on two columns, then a 2-up card grid
   -------------------------------------------------------------------------- */
.services-list .container {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.services-list__intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.services-list__head {
  gap: var(--sp-5);
}

.services-list__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Wider cards: one-line title, one-line description, taller icon plate */
.services__grid--two .service-card__title,
.services__grid--two .service-card__text {
  max-inline-size: none;
}

@media (min-width: 64rem) {
  .services-list .container {
    gap: var(--sp-12);
  }

  .services-list__intro {
    flex-direction: row;
    gap: var(--sp-6);
  }

  .services-list__head {
    flex: 0 1 38.5rem; /* 616px */
  }

  .services-list__copy {
    flex: 0 1 40rem; /* 640px */
    justify-content: flex-end;
  }

  .services__grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .services__grid--two .service-card__media {
    aspect-ratio: 628 / 234;
  }

  .services__grid--two .service-card__media img {
    max-inline-size: 19.5rem; /* 312px */
  }
}

/* Service-detail pages: the DESKTOP frame has no testimonials section at all,
   the MOBILE frame does. Verified against every node in both frames. */
@media (min-width: 64rem) {
  .reviews--mobile-only {
    display: none;
  }
}

/* ==========================================================================
   Service detail pages
   ========================================================================== */

/* --------------------------------------------------------------------------
   Centred band — heading, one paragraph, one wide button
   -------------------------------------------------------------------------- */
.service-band .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  text-align: center;
}

.service-band h2 {
  max-inline-size: 45rem; /* 720px */
}

.service-band__lead {
  max-inline-size: 40rem; /* 640px */
}

.service-band .btn {
  inline-size: 100%;
}

@media (min-width: 48rem) {
  .service-band .btn {
    inline-size: auto;
  }
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */
.breadcrumbs__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--sp-3);
  min-inline-size: 0;
}

/* Figma keeps this row a single 26px line even when the label is long */
.breadcrumbs__list li:last-child {
  min-inline-size: 0;
}

.breadcrumbs__list li:last-child a {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.breadcrumbs__list li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.breadcrumbs a {
  color: var(--c-text-muted);
  transition: color var(--dur) var(--ease);
}

.breadcrumbs a:hover {
  color: var(--c-accent-light);
}

.breadcrumbs [aria-current="page"] {
  font-weight: 500;
  color: var(--c-text);
}

.breadcrumbs svg {
  flex: 0 0 auto;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  color: var(--c-text-muted);
}

@media (min-width: 64rem) {
  .breadcrumbs {
    padding-block: var(--sp-6);
  }
}

/* --------------------------------------------------------------------------
   Service hero — copy beside an oversized outline icon on a faint plate
   -------------------------------------------------------------------------- */
.service-hero {
  padding-block: var(--sp-12);
}

.service-hero .container {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.service-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

/* The service-detail h1 uses the h2 scale in Figma (52px / 36px) */
.service-hero h1 {
  font-size: var(--fs-h2);
}

.service-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.service-hero__note {
  color: #d1d1d1;
}

.service-hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.service-hero__actions .btn {
  inline-size: 100%;
}

.service-hero__plate {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 628 / 454;
  border-radius: var(--r-xs);
  background-color: rgba(250, 250, 250, 0.02);
  overflow: hidden;
}

/* The icon frame is 800x600 over a 454px-tall plate in both frames, so size it
   off the plate HEIGHT (which is pinned exactly) rather than its width, which
   may be squeezed. flex-shrink must stay 0 or the flex centring shrinks it. */
.service-hero__plate img {
  /* The vectorised icon is an 800x600 group inside Figma's 628x454 plate, so
     it is 127.39% of the plate's *width*. Sizing it off the height instead
     kept it at 800px even where the plate ends up narrower than 628, which
     clipped the widest icons on both sides. */
  flex: 0 0 auto;
  inline-size: 127.39%;
  block-size: auto;
  max-inline-size: none;
  opacity: 0.6;
}

@media (min-width: 48rem) {
  .service-hero__actions {
    flex-direction: row;
  }

  .service-hero__actions .btn {
    inline-size: auto;
  }
}

@media (min-width: 64rem) {
  .service-hero {
    padding-block: var(--sp-16);
  }

  .service-hero .container {
    flex-direction: row;
    align-items: center;
  }

  /* Figma lets the 628px plate spill 36px into the right gutter next to the
     640px copy. Pin the copy so its line breaks match and let the plate take
     whatever is left, up to its design width. */
  .service-hero__copy {
    flex: 0 0 40rem; /* 640px */
    gap: var(--sp-12);
  }

  .service-hero__plate {
    flex: 1 1 39.25rem;
    max-inline-size: 39.25rem; /* 628px */
    /* The plate is 628x454 in Figma. Since it may end up narrower than 628
       here, pin the height so the hero band keeps its 582px. */
    aspect-ratio: auto;
    block-size: 28.375rem; /* 454px */
  }
}

/* --------------------------------------------------------------------------
   Split section — photo on one side, copy on the other
   -------------------------------------------------------------------------- */
.service-split .container {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.service-split__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.service-split__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.service-split__media {
  border-radius: var(--r-xs);
  overflow: hidden;
}

.service-split__media img {
  inline-size: 100%;
  aspect-ratio: 760 / 640;
  object-fit: cover;
}

@media (min-width: 64rem) {
  /* Copy comes first in the markup (mobile order); the DESKTOP frame puts the
     photo on the left, hence row-reverse. */
  .service-split .container {
    flex-direction: row-reverse;
    align-items: stretch;
    gap: var(--sp-12);
  }

  .service-split__media {
    flex: 1 1 47.5rem; /* 760px */
  }

  .service-split__copy {
    flex: 0 1 29.375rem; /* 470px */
    justify-content: space-between;
  }
}

/* --------------------------------------------------------------------------
   Plan section — centred heading over three dot-marked cards
   -------------------------------------------------------------------------- */
.service-plan .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
}

/* Figma caps this heading's text box at 720px, which is what makes the longer
   ones wrap to two lines. */
.service-plan h2 {
  max-inline-size: 45rem;
}

.service-plan .section-head--center {
  max-inline-size: 45rem; /* 720px */
}

.service-plan .section-head--center .lead {
  max-inline-size: 40rem; /* 640px */
}

.plan__grid {
  display: grid;
  gap: var(--sp-4);
  inline-size: 100%;
}

.plan-card {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xs);
  background-image: var(--grad-sheen);
}

.plan-card::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  margin-block-start: var(--sp-2);
  border-radius: var(--r-xs);
  background-color: var(--c-accent);
}

.plan-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* 24/31.2 in both frames — this title does not scale down */
.plan-card h3 {
  font-size: 1.5rem;
  line-height: 1.3;
}

@media (min-width: 64rem) {
  .service-plan .container {
    gap: var(--sp-12);
  }

  .plan__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
  }

  .plan__grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .plan-card {
    padding: var(--sp-6);
  }
}

/* --------------------------------------------------------------------------
   Material cards — copy plus a "best aligned with" footnote
   -------------------------------------------------------------------------- */
.materials__grid {
  display: grid;
  gap: var(--sp-4);
  inline-size: 100%;
}

.material-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xs);
  background-image: var(--grad-sheen);
}

.material-card__main {
  display: flex;
  gap: var(--sp-3);
}

.material-card__main::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  margin-block-start: var(--sp-2);
  border-radius: var(--r-xs);
  background-color: var(--c-accent);
}

.material-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.material-card__body h3 {
  font-size: 1.5rem; /* 24/31.2 in both frames */
  line-height: 1.3;
}

.material-card__note {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.625rem 1.125rem;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-sm);
}

.material-card__note dt {
  color: var(--c-accent-light);
}

.material-card__note dd {
  margin: 0;
  font-size: var(--fs-sm); /* 14/22.4 */
  line-height: var(--lh-sm);
  color: #d1d1d1;
}

@media (min-width: 64rem) {
  .materials__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
  }

  .material-card {
    padding: var(--sp-6);
  }
}

/* --------------------------------------------------------------------------
   About page — quote card, reversed split, grouped band
   -------------------------------------------------------------------------- */
.quote-card {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xs);
  background-image: var(--grad-sheen);
}

.quote-card::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  margin-block-start: var(--sp-2);
  border-radius: var(--r-xs);
  background-color: var(--c-accent);
}

.quote-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.quote-card blockquote {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.quote-card cite {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-style: normal;
  color: var(--c-accent-light);
}

/* About's split photos are near-square on mobile (356x360) rather than 760/640 */
@media (max-width: 63.99rem) {
  .service-split--tall .service-split__media img {
    aspect-ratio: 356 / 360;
  }
}

/* Some frames keep the "Leave review" button on mobile */
@media (max-width: 63.99rem) {
  .reviews--with-btn .reviews__head > .btn {
    display: inline-flex;
  }
}

/* Our Symbol keeps the photo on the right */
@media (min-width: 64rem) {
  .service-split--reverse .container {
    flex-direction: row;
  }

  .quote-card {
    padding: var(--sp-6);
  }
}

/* Band whose heading and call to action sit in two groups 48px apart */
.service-band--grouped .container {
  gap: var(--sp-8);
}

.service-band__head,
.service-band__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  inline-size: 100%;
  max-inline-size: 45rem; /* 720px, matching Figma's Frame 16 */
}

/* In this variant the paragraph runs the full 720px */
.service-band--grouped .service-band__lead {
  max-inline-size: none;
}

@media (min-width: 64rem) {
  .service-band--grouped .container {
    gap: var(--sp-12);
  }
}

/* ==========================================================================
   Our Work page
   ========================================================================== */

/* --------------------------------------------------------------------------
   Filter chips
   -------------------------------------------------------------------------- */
.filters ul {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scrollbar-width: none;
}

.filters ul::-webkit-scrollbar {
  display: none;
}

.filters li {
  flex: 0 0 auto;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: var(--lh-sm);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--c-cream);
  transition: border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.chip:hover {
  border-color: var(--c-line-hover);
}

.chip[aria-pressed="true"] {
  border-color: transparent;
  background-color: var(--c-accent-light);
  color: var(--c-cream);
}

@media (min-width: 64rem) {
  .filters ul {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Project grid
   -------------------------------------------------------------------------- */
.work-grid {
  display: grid;
  gap: var(--sp-6);
}

.work-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.work-card__media {
  position: relative;
  aspect-ratio: 358 / 360; /* MOBILE frame */
  border-radius: var(--r-xs);
  overflow: hidden;
}

.work-card__media > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.work-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xs);
  background-image: var(--grad-sheen);
}

.work-card__body h3 {
  font-size: 1.5rem; /* 24/31.2 */
  line-height: 1.3;
  color: #fff;
}

.work-card__body h3[data-placeholder] {
  opacity: 0.5;
}

.work-card__note {
  display: flex;
  gap: var(--sp-3);
  color: #fff;
}

.work-card__note::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  margin-block-start: var(--sp-2);
  border-radius: var(--r-xs);
  background-color: var(--c-accent);
}

@media (min-width: 64rem) {
  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-card__media {
    aspect-ratio: 628 / 428;
  }

  .work-card__body {
    min-block-size: 12.5rem; /* 200px */
    padding: var(--sp-6);
  }
}

/* --------------------------------------------------------------------------
   Service Areas page — full-width city links, no badge
   -------------------------------------------------------------------------- */
.areas--page .areas__cities {
  grid-template-columns: minmax(0, 1fr);
}

.areas--page .areas__copy {
  gap: var(--sp-6);
}

/* ==========================================================================
   Contact page
   ========================================================================== */
/* Review: the contact section gets the framed background (Figma 109:2887 —
   --grad-sheen over --c-bg with a --c-line hairline). Applied here rather than
   by adding .section--framed to the markup, so the layout's classes stay put. */
.contact {
  background-image: var(--grad-sheen);
  border-block: 1px solid var(--c-line);
}

.contact__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-3);
  border: 1px solid var(--c-line-cream);
  border-radius: 1rem; /* 16px */
}

.contact-form__row {
  display: grid;
  gap: var(--sp-5);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem; /* 6px */
}

.field > label {
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-sm);
  color: var(--c-text);
}

.field .req {
  color: #f76818;
}

.field input,
.field select,
.field textarea {
  inline-size: 100%;
  min-block-size: 2.875rem; /* 46px */
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-line-cream);
  border-radius: var(--r-sm);
  background-color: rgba(255, 255, 255, 0.05);
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  line-height: 1.43;
  color: var(--c-text);
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(246, 246, 246, 0.5);
}

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-text) 50%),
    linear-gradient(135deg, var(--c-text) 50%, transparent 50%);
  background-position: right 1.25rem center, right 0.95rem center;
  background-size: 0.375rem 0.375rem;
  background-repeat: no-repeat;
  padding-inline-end: var(--sp-10);
}

.field textarea {
  min-block-size: 6.625rem; /* 106px */
  resize: vertical;
}

.field__hint {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: #d1d1d1;
}

.contact-form__choice {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding-block-start: var(--sp-5);
}

.contact-form__choice label {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-sm);
  color: var(--c-text);
}

.contact-form__choice input {
  inline-size: 1rem;
  block-size: 1rem;
  accent-color: var(--c-accent);
}

.contact-form__submit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-block-start: var(--sp-7, 1.75rem);
}

.contact-form__note {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: #d1d1d1;
}

.contact__aside {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  /* the MOBILE frame puts this copy above the form */
  order: -1;
}

/* Phone and email sit in the areas column on this page */
.areas__contact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-block-start: var(--sp-4);
}

.areas__contact a {
  font-family: var(--ff-display);
  font-size: 1.25rem; /* 20/26 on mobile, 24/31.2 from 1024 */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--ls-h3);
  color: var(--c-text);
  transition: color var(--dur) var(--ease);
}

.areas__contact a:hover {
  color: var(--c-accent-light);
}

@media (min-width: 48rem) {
  .contact-form__row--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .contact__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sp-12);
  }

  .contact-form {
    flex: 1 1 47.5rem; /* 760px */
  }

  .contact__aside {
    order: 0;
    flex: 0 1 29.375rem; /* 470px */
    gap: 9.75rem; /* 156px */
  }

  .contact-form {
    padding: var(--sp-6);
  }

  .areas__contact {
    gap: var(--sp-6);
  }

  .areas__contact a {
    font-size: 1.5rem; /* 24/31.2 */
  }
}

/* Contact's process row has three steps, and its FAQ has no side image */
@media (min-width: 64rem) {
  .process__list--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Contact's process band: wider intro, taller step body than the home one */
@media (min-width: 64rem) {
  .process--contact .step__body {
    min-block-size: 9.75rem; /* 156px */
  }
}

/* Contact's mobile steps size to their content */
@media (max-width: 63.99rem) {
  .process--contact .step__body {
    min-block-size: 0;
  }
}

/* ==========================================================================
   Reviews page
   ========================================================================== */

/* The frame centres the heading and drops the lead entirely; the button is a
   sibling of the head, not part of .page-hero__actions. */
.page-hero--center .container {
  gap: var(--sp-6);
}

.page-hero--center .page-hero__title {
  text-align: center;
}

.page-hero--center > .container > .btn {
  align-self: center;
  inline-size: 100%;
}

/* --------------------------------------------------------------------------
   Reviews wall — one framed band, cards on a grid inside it
   -------------------------------------------------------------------------- */
.reviews-wall {
  padding-block: var(--sp-12);
  border-block: 1px solid var(--c-line);
  background-color: var(--c-bg);
  background-image: var(--grad-sheen);
}

.reviews-wall__grid {
  display: grid;
  gap: var(--sp-4);
}

/* Star row above the quote — only this page's cards carry a rating */
.review-card--rated {
  justify-content: flex-start;
  gap: var(--sp-12);
  min-block-size: 17.9375rem; /* 287px in the MOBILE frame */
}

.review-card__top {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--sp-3);
}

.stars {
  display: flex;
  gap: var(--sp-2);
}

.stars svg {
  flex: 0 0 auto;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  fill: var(--c-accent-light);
}

/* The DESKTOP frame lays out six cards, the MOBILE frame only four.
   Delete this rule to show the full set on phones as well. */
@media (max-width: 47.99rem) {
  .reviews-wall__grid > :nth-child(n + 5) {
    display: none;
  }
}

@media (min-width: 48rem) {
  .reviews-wall__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6);
  }
}

@media (min-width: 64rem) {
  .page-hero--center > .container > .btn {
    inline-size: auto;
  }

  .reviews-wall {
    padding-block: var(--sp-20);
  }

  .reviews-wall__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .review-card--rated {
    gap: var(--sp-20);
    min-block-size: 18.3125rem; /* 293px in the DESKTOP frame */
  }
}

/* --------------------------------------------------------------------------
   Modal — "Leave review"
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  /* Not `align-items: center`: once the dialog is taller than the viewport,
     centring pushes it out on both sides and the part above the scroll origin
     can never be reached. Aligning to the start and letting the dialog carry
     `margin-block: auto` centres it while it fits and keeps all of it
     scrollable once it does not. */
  align-items: flex-start;
  justify-content: center;
  padding: var(--sp-4);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal[hidden] {
  display: none;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(26, 26, 26, 0.7); /* #1A1A1A @70% */
}

.modal__dialog {
  position: relative;
  margin-block: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  inline-size: 100%;
  max-inline-size: 35rem; /* 560px in the DESKTOP frame */
  padding: var(--sp-3);
  border: 1px solid var(--c-line-cream);
  border-radius: 1rem;
  background-color: var(--c-bg);
}

.modal__close {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-end: var(--sp-3);
  display: flex;
  cursor: pointer;
}

.modal__close svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  fill: #888;
  transition: fill var(--dur) var(--ease);
}

.modal__close:hover svg {
  fill: var(--c-text);
}

.modal__title {
  /* The X floats over the heading in Figma rather than reserving space */
  font-size: 1.5rem; /* constant 24/31.2 in both frames */
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.rating {
  display: flex;
  gap: var(--sp-2);
}

.rating__star {
  display: flex;
  cursor: pointer;
}

.rating__star input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

.rating__star svg {
  flex: 0 0 auto;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  fill: rgba(249, 137, 62, 0.25);
  transition: fill var(--dur) var(--ease);
}

/* The picked star and every star before it stay solid */
.rating__star:has(input:checked) svg,
.rating__star:has(~ .rating__star input:checked) svg {
  fill: var(--c-accent-light);
}

.rating__star input:focus-visible + span + svg {
  outline: 2px solid var(--c-accent-light);
  outline-offset: 2px;
}

/* Site Reviews and Contact Form 7 render the fields, and the plugin stylesheet
   loads after the theme's with `.glsr-default form.glsr-form input.glsr-input`
   (0,3,2) beating `.field input` (0,1,1) — plus `padding` and `min-height` as
   !important. Rather than fight that with specificity, retune the plugin's own
   custom properties to the layout's field style (Figma 168:9690 — 46px tall,
   8px radius, rgba(255,255,255,0.05) on a --c-line-cream hairline). */
.modal__form,
.contact-form {
  --glsr-input-bg: rgba(255, 255, 255, 0.05);
  --glsr-input-border-color: var(--c-line-cream);
  --glsr-input-border-style: solid;
  --glsr-input-border-width: 1px;
  --glsr-input-radius: var(--r-sm);
  --glsr-input-color: var(--c-text);
  /* 12px block padding + a 20px line box + 2px borders = the 46px of the frame */
  --glsr-input-pt: 0.75rem;
  --glsr-input-pb: 0.75rem;
  --glsr-input-pl: var(--sp-3);
  --glsr-input-pr: var(--sp-3);
  --glsr-text-md: var(--fs-sm);
}

.modal__form ::placeholder,
.contact-form ::placeholder {
  color: rgba(246, 246, 246, 0.5);
}

/* The layout marks required labels with <span class="req">*</span>. The plugin
   flags the wrapper with .glsr-required instead, so the marker is drawn from
   CSS rather than by changing the field template. */
.modal__form .glsr-required > label::after,
.contact-form .glsr-required > label::after {
  content: " *";
  color: #f76818;
}

/* The form is a pass-through so every row shares the dialog's own rhythm */
.modal__form {
  display: contents;
}

/* Figma pads the message group 20px away from the two short fields */
.field--area {
  padding-block-start: var(--sp-5);
}

.modal__rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.modal__submit {
  inline-size: 100%;
}

/* The quote modal carries the full contact form, which the design lays out in
   the 760px container (Figma 162:4019). */
@media (min-width: 64rem) {
  .modal__dialog {
    gap: var(--sp-6);
    padding: var(--sp-6);
  }

  .modal__close {
    inset-block-start: var(--sp-6);
    inset-inline-end: var(--sp-6);
  }
}

/* ==========================================================================
   Area detailed page
   ========================================================================== */
.area-hero {
  padding-block: var(--sp-12);
}

.area-hero__inner {
  display: grid;
  gap: var(--sp-12);
}

.area-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  align-items: flex-start;
}

.area-hero__title {
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.area-hero__note {
  color: #d1d1d1;
}

.area-hero__copy .btn {
  inline-size: 100%;
  text-align: center;
}

.area-hero__media {
  border-radius: var(--r-xs);
  overflow: hidden;
}

.area-hero__media img {
  inline-size: 100%;
  aspect-ratio: 358 / 260; /* MOBILE frame */
  object-fit: cover;
}

/* Figma pins this page's services heading to a 720px column so
   "Our Services in Lancaster" breaks onto two lines. */
.services--area .section-head {
  max-inline-size: 45rem;
  margin-inline: auto;
}

@media (min-width: 64rem) {
  .area-hero {
    padding-block: 4rem; /* 64px, not the 80px the other bands use */
  }

  /* Figma lays out 640 + 48 + 628 inside a 1280 container — 36px too wide.
     The media takes the remainder so the row fits the gutter. */
  .area-hero__inner {
    grid-template-columns: minmax(0, 640fr) minmax(0, 592fr);
    align-items: center;
  }

  .area-hero__copy {
    gap: var(--sp-12);
  }

  .area-hero__copy .btn {
    inline-size: auto;
  }

  .area-hero__media img {
    aspect-ratio: 592 / 454; /* Figma's 628x454 frame, narrowed to fit the gutter */
  }
}