/* Build Pro Co: black and gold theme, built from the client's approved mockup. */

/* ---------- Tokens ---------- */
:root {
  --black: #000;

  --gold-100: #fff1b8;
  --gold-200: #ffe27a;
  --gold-300: #fcd451;
  --gold-400: #f6bf3f;
  --gold-500: #eaa92f;
  --gold-600: #c5821b;
  --gold-text: #f5b93b;
  --gold-border: rgba(234, 169, 47, .85);
  --gold-hairline: rgba(234, 169, 47, .32);
  --metal: linear-gradient(180deg, #ffe48a 0%, #f8c34a 40%, #eaa92f 66%, #cf8c1d 100%);
  --metal-text: linear-gradient(180deg, #ffdc72 0%, #f7b934 56%, #e59d1d 100%);

  --white: #fff;
  --text: #dcdcdc;
  --text-muted: #a6a6a6;
  --error: #ff8f7a;
  --field-bg: #0b0b0b;
  /* At least 3:1 against the field and the page, so every input reads as an input */
  --field-border: rgba(255, 255, 255, .36);

  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Kaushan Script", "Brush Script MT", cursive;

  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 92px;
  --header-shrink: 20px;
  --logo-shrink: .74;
  --radius: 12px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* Native controls, dropdowns and scrollbars render dark to match */
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  padding-top: var(--header-h);
  background: var(--black);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; }
img { max-width: 100%; height: auto; }
h1, h2, h3, p, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

/* No grey/blue tap flash on phones; buttons and links have their own press states */
a, button { -webkit-tap-highlight-color: transparent; }

button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

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

::selection { background: var(--gold-500); color: #000; }

/* ---------- Utilities ---------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -80px;
  left: 16px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 8px;
  background: var(--gold-400);
  color: #000;
  font-weight: 600;
}

.skip-link:focus { top: 16px; }

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

.text-gold {
  color: var(--gold-text);
  background: var(--metal-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.gold-rule {
  position: relative;
  z-index: 3;
  display: block;
  height: 2px;
  overflow-x: clip;
  background: linear-gradient(90deg,
    rgba(197, 130, 27, 0) 0%,
    rgba(197, 130, 27, .9) 7%,
    var(--gold-400) 28%,
    var(--gold-100) 50%,
    var(--gold-400) 72%,
    rgba(197, 130, 27, .9) 93%,
    rgba(197, 130, 27, 0) 100%);
  box-shadow: 0 0 14px rgba(255, 190, 70, .45);
}

.gold-rule::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 0;
  width: 16%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 251, 235, .95), rgba(255, 255, 255, 0));
  opacity: 0;
  pointer-events: none;
}

/* Heading whose text rises from behind its own baseline (driven by motion.css) */
.reveal-mask {
  overflow: clip;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}

.reveal-mask > span { display: block; }

/* ---------- Type ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: .004em;
  text-transform: uppercase;
  color: var(--white);
}

/* Sized so the first hero line clears the photo's diagonal edge at every desktop width. */
.h1 { font-size: clamp(2.15rem, calc(3.4vw + 2px), 3.15rem); }
.h2 { font-size: clamp(2rem, 3.5vw, 3rem); }
.h3 { font-size: clamp(1.45rem, 2.2vw, 2rem); }

.kicker {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(.8rem, .9vw, .95rem);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.lede {
  font-size: clamp(1.02rem, 1.1vw, 1.14rem);
  line-height: 1.6;
  color: var(--text);
  text-wrap: pretty;
}

/* ---------- Buttons ---------- */
.btn {
  --btn-h: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  min-height: var(--btn-h);
  padding: 0 1.8em;
  border: 0;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s, filter .25s, translate .3s var(--ease-out);
}

.btn .icon {
  width: 1.2em;
  height: 1.2em;
  transition: translate .3s var(--ease-out);
}

.btn:hover .icon-arrow { translate: 4px 0; }

.btn--gold {
  background: var(--metal);
  color: #170f02;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(120, 70, 0, .35),
    0 12px 30px -14px rgba(246, 191, 63, .8);
}

/* Light sweep that crosses gold buttons; parked off to the left until motion.css moves it */
.btn--gold::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .55) 47%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, .55) 53%, rgba(255, 255, 255, 0) 70%);
  translate: -110% 0;
  pointer-events: none;
}

.btn--gold:hover {
  filter: brightness(1.07) saturate(1.05);
  translate: 0 -1px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -1px 0 rgba(120, 70, 0, .35),
    0 16px 36px -12px rgba(246, 191, 63, .95);
}

.btn--line {
  --btn-h: 44px;
  padding: 0 1.2em;
  border: 1.5px solid var(--gold-border);
  border-radius: 7px;
  background: rgba(0, 0, 0, .4);
  color: var(--white);
  font-size: .8rem;
}

.btn--line:hover {
  border-color: var(--gold-400);
  color: #170f02;
}

/* Gold fill that wipes in from the left on hover and out to the right after */
.btn--line::before,
.btn--pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--metal);
  scale: 0 1;
  transform-origin: 100% 50%;
  pointer-events: none;
}

.btn--line:is(:hover, :focus-visible)::before,
.btn--pill:is(:hover, :focus-visible)::before {
  scale: 1 1;
  transform-origin: 0 50%;
}

.btn--pill {
  --btn-h: 48px;
  padding: 0 1.4em;
  border: 1.5px solid var(--gold-border);
  border-radius: 999px;
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
}

.btn--pill .icon {
  width: 1.4em;
  height: 1.4em;
  color: var(--gold-300);
  transition: color .25s;
}

.btn--pill:hover {
  border-color: var(--gold-400);
  color: #170f02;
}

.btn--pill:hover .icon { color: #170f02; }

/* ---------- Stars ---------- */
.stars {
  display: inline-flex;
  gap: 3px;
  color: var(--gold-400);
}

.stars .icon { width: 22px; height: 22px; }
.stars--sm .icon { width: 15px; height: 15px; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  background: var(--black);
  transition: translate .35s var(--ease-out);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  height: var(--header-h);
  transition: translate .35s var(--ease-out);
}

/* Compact bar on scroll, done with transforms only: the bar slides up, the
   content re-centres in what stays visible, and the logo scales down. */
.site-header.is-scrolled { translate: 0 calc(var(--header-shrink) * -1); }
.site-header.is-scrolled .site-header__inner { translate: 0 calc(var(--header-shrink) / 2); }

.brand {
  position: relative;
  display: block;
  flex: none;
  transform-origin: left center;
  transition: scale .35s var(--ease-out);
}

.brand img {
  width: auto;
  height: calc(var(--header-h) - 14px);
}

.site-header.is-scrolled .brand { scale: var(--logo-shrink); }

/* Light catching the metal: a sheen masked to the logo's own shape. The silhouette is
   inlined because browsers refuse mask images from disk, so it also works when the
   files are opened locally. */
.brand::before,
.brand::after {
  --logo-mask: url("data:image/webp;base64,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");
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 248, 225, .8) 50%, rgba(255, 255, 255, 0) 60%) no-repeat;
  background-size: 250% 100%;
  background-position: 110% 0;
  -webkit-mask: var(--logo-mask) center / contain no-repeat;
  mask: var(--logo-mask) center / contain no-repeat;
  mix-blend-mode: plus-lighter;
  pointer-events: none;
}

.site-nav {
  position: relative;
  margin-left: auto;
}

/* Indicator that glides to the hovered link and back to the current page */
.site-nav__indicator {
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 100px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-400);
  box-shadow: 0 0 10px rgba(246, 191, 63, .7);
  transform-origin: 0 50%;
  translate: var(--x, 0) 0;
  scale: var(--sx, 0) 1;
  opacity: var(--o, 0);
  pointer-events: none;
}

.site-nav.has-indicator a[aria-current="page"]::after { display: none; }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.5vw, 42px);
}

.site-nav a {
  position: relative;
  display: block;
  padding: 10px 0;
  font-weight: 500;
  font-size: 1rem;
  color: var(--white);
  transition: color .2s;
}

.site-nav a:hover { color: var(--gold-300); }

.site-nav a[aria-current="page"] { color: var(--gold-text); }

.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: -12px;
  left: -7px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-400);
  box-shadow: 0 0 10px rgba(246, 191, 63, .7);
}

.menu-toggle {
  display: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--gold-border);
  border-radius: 10px;
  color: var(--gold-300);
}

.menu-toggle .icon { width: 24px; height: 24px; }

/* ---------- Mobile drawer ---------- */
.drawer {
  --drawer-width: min(22rem, 86vw);
  --drawer-backdrop: 0;
  position: fixed;
  inset: 0;
  display: none;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  overflow: visible;
}

.drawer:popover-open { display: block; }

/* Fallback when the Popover API is missing */
.drawer.is-open {
  z-index: 60;
  display: block;
  background: rgba(0, 0, 0, .7);
}

.drawer::backdrop {
  background: #000;
  opacity: calc(var(--drawer-backdrop, 1) * .72);
}

/* Empty spacer on the left, sheet on the right: scrolling to the end opens it. */
.drawer__scroller {
  display: grid;
  grid-template-columns: 100% var(--drawer-width);
  height: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  overscroll-behavior: none;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

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

@media (prefers-reduced-motion: no-preference) {
  .drawer__scroller { scroll-behavior: smooth; }
}

.drawer__scroller::before {
  content: "";
  scroll-snap-align: start;
}

.drawer__sheet {
  display: flex;
  flex-direction: column;
  gap: 26px;
  height: 100svh;
  padding: 20px 24px 32px;
  overflow-y: auto;
  border-left: 1px solid var(--gold-hairline);
  background: linear-gradient(180deg, #0c0c0c 0%, #000 60%);
  box-shadow: -24px 0 60px rgba(0, 0, 0, .6);
  scroll-snap-align: end;
  scrollbar-width: none;
}

.drawer__sheet:focus { outline: none; }

@supports (animation-timeline: scroll()) {
  .drawer {
    timeline-scope: --drawer-fade;
    animation: drawer-backdrop linear both;
    animation-timeline: --drawer-fade;
  }

  .drawer__scroller { scroll-timeline: --drawer-fade x; }

  @property --drawer-backdrop {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @keyframes drawer-backdrop {
    from { --drawer-backdrop: 0; }
    to { --drawer-backdrop: 1; }
  }
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer__head img { width: auto; height: 64px; }

.drawer__close {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--gold-hairline);
  border-radius: 10px;
  color: var(--gold-300);
}

.drawer__close .icon { width: 22px; height: 22px; }

.drawer__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--white);
}

.drawer__links a .icon {
  width: 18px;
  height: 18px;
  color: var(--gold-500);
}

.drawer__links a[aria-current="page"],
.drawer__links a:active { color: var(--gold-text); }

.drawer__cta { width: 100%; }

.drawer__contact {
  display: grid;
  gap: 12px;
  margin-top: auto;
  font-size: .95rem;
  color: var(--text-muted);
}

.drawer__contact a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  word-break: break-all;
}

.drawer__contact .icon {
  width: 18px;
  height: 18px;
  color: var(--gold-400);
}

/* ---------- Slanted media (photo with a gold edge) ---------- */
.slant {
  --slant: 220px;
  --slant-y: 56px;
  --edge: 14px;
  --clip: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
  --shift: calc(var(--edge) * -1) 0;
  position: relative;
}

.slant--right {
  --clip: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  --shift: var(--edge) 0;
}

.slant__frame,
.slant__edge,
.slant__shade {
  position: absolute;
  inset: 0;
  clip-path: var(--clip);
}

.slant__frame {
  overflow: hidden;
  background: #0b0b0b;
}

/* Darkens the corner that carries the "Build for Better" signature */
.slant--signed .slant__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 65% at 88% 82%, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}

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

.slant__glow {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 0 12px rgba(255, 192, 72, .5));
}

.slant__edge {
  translate: var(--shift);
  background: linear-gradient(180deg, var(--gold-100) 0%, var(--gold-400) 30%, var(--gold-500) 68%, var(--gold-600) 100%);
}

.slant__edge::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 22%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 252, 235, .95), rgba(255, 255, 255, 0));
  opacity: 0;
}

.slant__shade {
  translate: -96px 0;
  background: rgba(255, 255, 255, .045);
}

/* ---------- "Build for Better" signature ---------- */
.script {
  position: absolute;
  z-index: 3;
  margin: 0;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.1rem, 3.3vw, 3.4rem);
  line-height: .92;
  white-space: nowrap;
  rotate: -11deg;
  color: var(--gold-300);
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .85));
  pointer-events: none;
}

/* The gold lives on each line, so each line can be revealed on its own */
.script__line {
  display: block;
  background: var(--metal-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.script__line + .script__line { padding-left: .6em; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background: radial-gradient(110% 90% at 0% 35%, #15120c 0%, #000 58%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: clamp(540px, 40vw, 640px);
  padding-block: clamp(40px, 4.5vw, 64px);
}

.hero__content { max-width: 46rem; }

.hero__services {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(.76rem, .85vw, .9rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white);
}

.hero__services span {
  margin-inline: .45em;
  color: rgba(255, 255, 255, .55);
}

.hero__title { margin-top: 14px; }
.hero__title span { display: block; }

.hero__title .line {
  overflow: clip;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}

.hero__lede {
  max-width: 33rem;
  margin-top: 18px;
}

.rating {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

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

.rating__score strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.85rem;
  line-height: 1;
  color: var(--gold-text);
}

.rating__meta {
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, .28);
  font-size: .92rem;
  line-height: 1.45;
  color: var(--text);
}

.hero__cta {
  --btn-h: 56px;
  min-width: 260px;
  margin-top: 28px;
  font-size: 1rem;
}

.pin-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  margin-top: 30px;
}

.pin-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .96rem;
  color: var(--white);
}

.pin-list .icon {
  width: 20px;
  height: 20px;
  color: var(--gold-400);
}

.hero__visual {
  --slant: clamp(170px, 17vw, 270px);
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--visual-left);
  --visual-left: calc(50% - min(100% - 2 * var(--gutter), var(--container)) * .05);
}

.hero__visual img { object-position: 58% 50%; }

.hero__brush {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 4%;
  width: min(46%, 500px);
  height: auto;
  pointer-events: none;
}

.hero__visual .script {
  right: 7%;
  bottom: 12%;
}

/* Services page hero */
.page-hero .hero__inner { min-height: clamp(360px, 27vw, 430px); }
.page-hero .hero__content { max-width: 50rem; }
.page-hero .hero__visual { --visual-left: calc(50% + min(100% - 2 * var(--gutter), var(--container)) * .02); }
.page-hero .hero__title {
  margin-top: 10px;
  font-size: clamp(2rem, calc(3vw + 2px), 3rem);
  text-wrap: balance;
}
.page-hero .hero__visual img { object-position: 50% 45%; }

/* ---------- Sections ---------- */
.section { padding-block: clamp(48px, 5vw, 72px); }

.service-list { padding-block: clamp(36px, 3.4vw, 52px) clamp(48px, 5vw, 72px); }

.section-head {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-bottom: clamp(28px, 3.4vw, 44px);
  text-align: center;
}

/* ---------- Service cards (home) ---------- */
.service-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 22px;
  border: 1.5px solid var(--gold-border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #0d0d0d 0%, #040404 100%);
  text-align: center;
  box-shadow: 0 22px 46px -30px rgba(234, 169, 47, .5);
  transition: box-shadow .35s, border-color .35s;
}

.service-card:hover {
  border-color: var(--gold-400);
  box-shadow: 0 0 0 1px rgba(246, 191, 63, .35), 0 26px 50px -26px rgba(234, 169, 47, .65);
}

.service-card__media {
  width: 100%;
  aspect-ratio: 16 / 9.4;
  overflow: hidden;
  border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0;
}

.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale .7s var(--ease-out);
}

.service-card:hover .service-card__media img { scale: 1.05; }

.badge-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-top: -32px;
  border: 2px solid var(--gold-400);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #1b1408 0%, #050505 70%);
  color: var(--gold-300);
  box-shadow: 0 0 0 5px rgba(0, 0, 0, .55), 0 0 22px rgba(246, 191, 63, .28);
}

.badge-icon .icon { width: 30px; height: 30px; }

.card-title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.02rem, 1.25vw, 1.18rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.service-card p {
  margin: 10px 20px 20px;
  font-size: .97rem;
  line-height: 1.5;
  color: var(--text);
}

.service-card .btn {
  width: calc(100% - 40px);
  margin-top: auto;
}

/* ---------- Why choose band ---------- */
.why__band {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(240px, 19vw, 290px);
  background: linear-gradient(90deg, #070707 0%, #000 60%);
}

.why__inner {
  position: relative;
  z-index: 2;
  padding-block: 36px;
}

.why__content { max-width: min(46rem, 60%); }

.why__title { font-size: clamp(1.45rem, 2.2vw, 2.05rem); }

.why__list {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  margin-top: 24px;
}

.why__list li {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 12px;
  /* Spread toward the photo like the mockup, while always fitting the column
     (so no label is squeezed onto a third line) */
  padding-inline: clamp(16px, calc(8.5vw - 58px), 52px);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
  color: var(--white);
}

.why__list li:first-child { padding-left: 0; }
.why__list li + li::before,
.feature-row li + li::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 1px;
  background: var(--gold-hairline);
  transform-origin: 50% 0;
}

.why__list .icon {
  width: 44px;
  height: 44px;
  color: var(--gold-400);
}

.why__visual {
  --slant: clamp(90px, 8vw, 130px);
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  width: 39%;
}

.why__visual img { object-position: 70% 40%; }

.why__visual .script {
  right: 5%;
  bottom: 14%;
  font-size: clamp(1.9rem, 2.8vw, 3rem);
}

/* ---------- Reviews ---------- */
.reviews { padding-block: clamp(44px, 5vw, 64px) clamp(36px, 4vw, 52px); }

.reviews__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
  margin-bottom: 26px;
}

.reviews__title { font-size: clamp(1.45rem, 2.2vw, 2rem); }

.rating-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  font-size: 1rem;
  color: var(--text);
}

.rating-summary strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.45rem;
  color: var(--white);
}

.rating-summary__sep {
  width: 1px;
  height: 26px;
  background: rgba(255, 255, 255, .25);
}

.carousel__viewport {
  position: relative;
  padding-inline: clamp(40px, 4vw, 58px);
}

.carousel__track {
  --gap: clamp(16px, 2vw, 28px);
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--gap)) / 3);
  gap: var(--gap);
  padding-block: 4px 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

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

@media (prefers-reduced-motion: no-preference) {
  .carousel__track { scroll-behavior: smooth; }
}

.carousel__slide {
  display: flex;
  scroll-snap-align: start;
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  padding: 22px 24px;
  border: 1.5px solid var(--gold-border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #0d0d0d 0%, #040404 100%);
}

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

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 62px;
  height: 62px;
  border: 2px solid var(--gold-500);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #3b2b0d 0%, #120d04 72%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .04em;
  color: var(--gold-200);
}

.review-card__name {
  margin-bottom: 4px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.2;
  color: var(--white);
}

.review-card blockquote {
  font-size: .97rem;
  line-height: 1.55;
  color: var(--text);
}

.review-card__date {
  margin-top: auto;
  font-size: .84rem;
  color: var(--text-muted);
}

.carousel__btn {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--white);
  translate: 0 -50%;
  transition: color .2s, background-color .2s;
}

.carousel__btn:hover {
  background: rgba(255, 255, 255, .07);
  color: var(--gold-300);
}

.carousel__btn .icon { width: 30px; height: 30px; }
.carousel__btn--prev { left: -4px; }
.carousel__btn--next { right: -4px; }

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 18px;
}

.carousel__dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}

.carousel__dot::before {
  content: "";
  width: 24px;
  height: 9px;
  background: #5c5c5c;
  clip-path: inset(0 7.5px round 9px);
  transition: background-color .3s;
}

.carousel__dot[aria-current="true"]::before {
  background: var(--gold-400);
  clip-path: inset(0 0 round 9px);
}

/* ---------- Footer ---------- */
.site-footer__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px 48px;
  padding-block: 34px 40px;
}

.site-footer .brand img { height: 96px; }

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 34px;
}

.footer-nav a {
  padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  font-size: .98rem;
  color: var(--white);
  transition: color .2s;
}

.footer-nav a:hover {
  color: var(--gold-300);
  background-size: 100% 1px;
}

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 40px;
  margin-top: 16px;
  font-size: .9rem;
  color: var(--text-muted);
}

.service-dots span + span::before {
  content: "•";
  margin-inline: .7em;
}

.site-footer__abn { white-space: nowrap; }

.site-footer__right {
  display: grid;
  justify-items: end;
  gap: 12px;
}

.socials {
  display: flex;
  gap: 10px;
}

.socials a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  color: var(--white);
  transition: color .2s, background-color .2s;
}

.socials a:hover {
  background: rgba(255, 255, 255, .06);
  color: var(--gold-300);
}

.socials .icon { width: 25px; height: 25px; }

.footer-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .88rem;
  color: var(--text);
}

/* ---------- Services page: service grid ---------- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 30px);
}

.service-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 28px;
  border: 1.5px solid var(--gold-border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #0d0d0d 0%, #040404 100%);
  text-align: center;
  box-shadow: 0 22px 46px -30px rgba(234, 169, 47, .5);
}

.service-panel__media {
  width: 100%;
  aspect-ratio: 2.05 / 1;
  overflow: hidden;
  border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0;
}

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

.service-panel__desc {
  max-width: 32ch;
  margin: 10px 22px 0;
  font-size: .98rem;
  line-height: 1.5;
}

.checklist {
  display: grid;
  gap: 9px;
  width: min(100% - 48px, 300px);
  margin-top: 20px;
  text-align: left;
}

.checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .98rem;
  line-height: 1.35;
  color: var(--white);
}

.checklist li::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffdc72'/%3E%3Cstop offset='1' stop-color='%23e39a1c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='11' fill='url(%23g)'/%3E%3Cpath d='m7.2 12.4 3.1 3.1 6.5-6.8' fill='none' stroke='%23170f02' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Services page: about band ---------- */
.about__band {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(360px, 27vw, 430px);
}

.about__inner {
  position: relative;
  z-index: 2;
  padding-block: 48px;
}

.about__content { max-width: min(38rem, 55%); }

.about__title {
  margin-top: 8px;
  font-size: clamp(1.5rem, 2.1vw, 1.95rem);
  text-wrap: balance;
}

.about__text { margin-top: 14px; }

.feature-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 0;
  margin-top: 26px;
}

.feature-row li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline: clamp(12px, 1.3vw, 18px);
  font-size: .9rem;
  line-height: 1.25;
  color: var(--white);
}

.feature-row li:first-child { padding-left: 0; }
.feature-row .icon {
  width: 32px;
  height: 32px;
  color: var(--gold-400);
}

.about__visual {
  --slant: clamp(120px, 11vw, 170px);
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  width: 47%;
}

.about__visual img { object-position: 50% 55%; }

.about__visual .script {
  right: 5%;
  bottom: 12%;
}

/* ---------- Services page: call to action band ---------- */
.cta-band__inner {
  display: grid;
  grid-template-columns: 29% minmax(0, 1fr) 30%;
  min-height: clamp(220px, 17vw, 260px);
}

.cta-band__left { --slant: clamp(50px, 5vw, 80px); }
.cta-band__left img { object-position: 40% 60%; }

.cta-band__copy {
  align-self: center;
  padding: 34px clamp(20px, 2.6vw, 44px);
}

.cta-band__title {
  font-size: clamp(1.3rem, 1.75vw, 1.6rem);
  color: var(--gold-text);
}

.cta-band__copy p {
  max-width: 46ch;
  margin-top: 10px;
  text-wrap: pretty;
}

.cta-band__copy .btn { margin-top: 22px; }

.cta-band__right {
  position: relative;
  overflow: hidden;
}

.cta-band__right img,
.contact-band__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 48%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 48%);
}

/* ---------- Services page: locations and contact ---------- */
.contact-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .9fr);
  padding-left: max(var(--gutter), calc((100% - var(--container)) / 2));
}

.locations,
.contact {
  padding-block: 34px 38px;
}

.contact { padding-left: clamp(24px, 3vw, 48px); }

.band-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--white);
}

.band-title .icon {
  width: 30px;
  height: 30px;
  color: var(--gold-400);
}

.locations__intro {
  margin-top: 4px;
  padding-left: 42px;
  font-size: .95rem;
  color: var(--text);
}

.locations__list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 36px;
  margin-top: 20px;
}

.locations__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .96rem;
  line-height: 1.3;
  color: var(--white);
}

.locations__list .icon {
  width: 28px;
  height: 28px;
  color: var(--gold-400);
}

.locations__list small {
  display: block;
  font-size: .86rem;
  color: var(--text-muted);
}

.contact__list {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

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

.icon-ring {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--gold-400);
  border-radius: 50%;
  color: var(--gold-300);
}

.icon-ring .icon { width: 22px; height: 22px; }

.contact__label {
  display: block;
  font-size: .86rem;
  color: var(--text-muted);
}

.contact__list a {
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--white);
  overflow-wrap: anywhere;
  transition: color .2s;
}

.contact__list a:hover { color: var(--gold-300); }

.contact__social {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

.contact__social .contact__label { margin-right: 6px; }

.contact-band__visual {
  position: relative;
  overflow: hidden;
}

/* ---------- Headings for the sections added after the mockup ---------- */
.section-title {
  font-size: clamp(1.65rem, 2.6vw, 2.35rem);
  text-wrap: balance;
}

/* ---------- Home: our work ---------- */
.work__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr) minmax(0, 3.5fr);
  grid-template-rows: auto clamp(240px, 23vw, 320px);
  grid-template-areas:
    "intro build build"
    "kitchen bathroom tiling";
  gap: clamp(14px, 1.6vw, 22px);
}

.work__intro {
  grid-area: intro;
  align-self: center;
  display: grid;
  justify-items: start;
  gap: 18px;
  padding-right: clamp(0px, 2vw, 32px);
}

.work__intro .lede { max-width: 34ch; }
.work__intro .btn { margin-top: 6px; }

.work-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1.5px solid var(--gold-border);
  border-radius: var(--radius);
  background: #0b0b0b;
  box-shadow: 0 22px 46px -30px rgba(234, 169, 47, .5);
}

.work-tile--build { grid-area: build; aspect-ratio: 16 / 8.4; }
.work-tile--kitchen { grid-area: kitchen; }
.work-tile--bathroom { grid-area: bathroom; }
.work-tile--tiling { grid-area: tiling; }

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

.work-tile--bathroom img { object-position: 50% 30%; }

.work-tile figcaption {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: 3px;
  padding: 48px 20px 18px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .86) 100%);
}

.work-tile__title {
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--white);
}

.work-tile__note {
  font-size: .95rem;
  line-height: 1.35;
  color: var(--text);
}

/* ---------- Home: how we work ---------- */
.process__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: start;
  gap: clamp(36px, 6vw, 96px);
}

.process__aside {
  display: grid;
  justify-items: start;
  gap: 20px;
}

.process__aside .lede { max-width: 40ch; }
.process__aside .btn { margin-top: 4px; }

.process__photo {
  --slant: clamp(54px, 5vw, 84px);
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-top: 14px;
}

.process__photo img { object-position: 40% 50%; }

.process__steps {
  --step-gap: clamp(30px, 3.4vw, 44px);
  --node: 64px;
  display: grid;
  gap: var(--step-gap);
  padding-top: 4px;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: var(--node) minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(18px, 2vw, 28px);
}

/* The gold line from one step to the next: a faint track, and a bright run drawn over it */
.step:not(:last-child)::before,
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--node) + 10px);
  left: calc(var(--node) / 2 - 1px);
  width: 2px;
  height: calc(100% + var(--step-gap) - var(--node) - 20px);
  border-radius: 2px;
}

.step:not(:last-child)::before { background: var(--gold-hairline); }

.step:not(:last-child)::after {
  background: linear-gradient(180deg, var(--gold-200), var(--gold-500));
  box-shadow: 0 0 10px rgba(255, 190, 70, .45);
  transform-origin: 50% 0;
}

.step__node {
  grid-row: span 2;
  width: var(--node);
  height: var(--node);
  margin-top: 0;
}

.step__node .icon { width: 28px; height: 28px; }

.step__title {
  padding-top: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.02rem, 1.25vw, 1.18rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.step p {
  max-width: 46ch;
  margin-top: 8px;
  color: var(--text);
}

/* ---------- Services page: tiling and waterproofing ---------- */
.spotlight__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}

.spotlight__media {
  position: relative;
  padding: 0 16% 16% 0;
}

.spotlight__photo {
  margin: 0;
  overflow: hidden;
  border: 1.5px solid var(--gold-border);
  border-radius: var(--radius);
  background: #0b0b0b;
}

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

.spotlight__photo--main {
  aspect-ratio: 4 / 5;
  box-shadow: 0 22px 46px -30px rgba(234, 169, 47, .5);
}

.spotlight__photo--inset {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 56%;
  aspect-ratio: 3 / 2;
  box-shadow: 0 0 0 8px var(--black), 0 30px 60px -24px rgba(0, 0, 0, .9);
}

.spotlight__copy {
  display: grid;
  justify-items: start;
  gap: 20px;
}

.spotlight__copy .lede { max-width: 56ch; }

.checklist--wide {
  width: auto;
  gap: 14px;
  margin: 6px 0 8px;
}

.checklist--wide li {
  align-items: flex-start;
  font-size: 1.02rem;
}

.checklist--wide li::before { margin-top: 1px; }

/* ---------- Services page: rooms ---------- */
.spaces__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
  margin-bottom: clamp(26px, 3vw, 40px);
}

.spaces__intro {
  display: grid;
  gap: 14px;
  max-width: 44rem;
}

.spaces__controls {
  display: flex;
  gap: 10px;
}

.carousel--spaces .carousel__viewport { padding-inline: 0; }

.carousel--spaces .carousel__btn {
  position: static;
  width: 50px;
  height: 50px;
  border: 1.5px solid var(--gold-border);
  color: var(--gold-300);
  translate: none;
}

.carousel--spaces .carousel__btn:hover { background: rgba(246, 191, 63, .1); }
.carousel--spaces .carousel__btn .icon { width: 24px; height: 24px; }
.carousel--spaces .carousel__track { grid-auto-columns: calc((100% - 3 * var(--gap)) / 4); }

.space-card {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1.5px solid var(--gold-border);
  border-radius: var(--radius);
  background: #0b0b0b;
}

/* Drawn inside the card, since the scrolling track would clip an outer ring on the edge
   cards; set in from the gold border and lighter than it, so the two don't merge */
.space-card:focus-visible {
  outline-color: var(--gold-100);
  outline-offset: -8px;
}

.space-card img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.space-card__body {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  justify-items: start;
  gap: 6px;
  padding: 84px 20px 20px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .62) 40%, rgba(0, 0, 0, .9) 100%);
}

.space-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.space-card__text {
  font-size: .96rem;
  line-height: 1.45;
  color: var(--text);
}

.space-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white);
}

.space-card__cta .icon {
  width: 1.2em;
  height: 1.2em;
  color: var(--gold-300);
}

/* ---------- Services page: questions ---------- */
.faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 4.4fr) minmax(0, 7fr);
  align-items: start;
  gap: clamp(36px, 6vw, 96px);
}

.faq__aside {
  position: sticky;
  top: calc(var(--header-h) + 28px);
  display: grid;
  justify-items: start;
  gap: 18px;
}

.faq__aside .lede { max-width: 36ch; }

.faq__call {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--white);
  transition: color .2s;
}

.faq__call:hover { color: var(--gold-300); }

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

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

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 2px;
  font-weight: 600;
  font-size: clamp(1.04rem, 1.2vw, 1.15rem);
  line-height: 1.35;
  color: var(--white);
  cursor: pointer;
  list-style: none;
  transition: color .2s;
}

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

.faq-item summary:hover,
.faq-item[open] summary { color: var(--gold-300); }

.faq-item__icon {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--gold-border);
  border-radius: 50%;
  transition: background-color .3s, border-color .3s;
}

/* A plus that folds into a minus when the answer opens */
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: calc(50% - 6.5px);
  width: 13px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-300);
}

.faq-item__icon::after { rotate: 90deg; }

.faq-item[open] .faq-item__icon {
  border-color: var(--gold-400);
  background: rgba(246, 191, 63, .12);
}

.faq-item[open] .faq-item__icon::after { rotate: 0deg; }

.faq-item__answer { padding: 0 60px 24px 2px; }

.faq-item__answer p {
  max-width: 62ch;
  color: var(--text);
}

/* ---------- Quote form (both pages) ---------- */
.quote { container-type: inline-size; }

.quote__inner {
  display: grid;
  grid-template-columns: 36% minmax(0, 1fr);
}

.quote__visual {
  --slant: clamp(70px, 7vw, 120px);
  min-height: 100%;
}

.quote__visual img { object-position: 50% 45%; }

.quote__body {
  padding-block: clamp(48px, 5vw, 76px);
  padding-left: clamp(28px, 4vw, 64px);
  padding-right: max(var(--gutter), calc((100cqw - var(--container)) / 2));
}

.quote__lede {
  max-width: 52ch;
  margin-top: 14px;
}

.quote-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  margin-top: 30px;
}

.field {
  display: grid;
  align-content: start;
  gap: 8px;
}

.field--full { grid-column: 1 / -1; }

.field label {
  font-weight: 600;
  font-size: .95rem;
  color: var(--white);
}

.field__optional {
  font-weight: 400;
  color: var(--text-muted);
}

.field :is(input, select, textarea) {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1.5px solid var(--field-border);
  border-radius: 8px;
  background-color: var(--field-bg);
  color: var(--white);
  font: inherit;
  font-size: 1rem;
  caret-color: var(--gold-300);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.field textarea {
  min-height: 132px;
  padding-block: 14px;
  line-height: 1.5;
  resize: vertical;
}

.field select {
  appearance: none;
  padding-right: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6bf3f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 16px center;
  background-size: 18px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.field select:has(option[value=""]:checked) { color: var(--text-muted); }

.field option {
  background: #111;
  color: var(--white);
}

.field ::placeholder {
  color: #8f8f8f;
  opacity: 1;
}

.field :is(input, select, textarea):hover { border-color: rgba(246, 191, 63, .5); }

.field :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--gold-400);
  background-color: #0f0c07;
  box-shadow: 0 0 0 3px rgba(246, 191, 63, .22);
}

/* Browser autofill keeps the dark field instead of its own pale fill */
.field input:-webkit-autofill {
  -webkit-text-fill-color: var(--white);
  caret-color: var(--gold-300);
  box-shadow: 0 0 0 60px #16120a inset;
}

.field input:-webkit-autofill:focus { box-shadow: 0 0 0 60px #16120a inset, 0 0 0 3px rgba(246, 191, 63, .22); }

/* Errors appear once the visitor leaves a field, or tries to send the form */
.field :is(input, select, textarea):user-invalid,
.quote-form.is-submitted .field :invalid {
  border-color: var(--error);
  background-color: #150b08;
}

.field__error {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  line-height: 1.35;
  color: var(--error);
}

.field__error .icon {
  width: 17px;
  height: 17px;
}

.field :user-invalid ~ .field__error,
.quote-form.is-submitted .field :invalid ~ .field__error { display: flex; }

.quote-form__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 6px;
}

.quote-form__submit {
  --btn-h: 56px;
  min-width: 250px;
}

.quote-form__note {
  font-size: .9rem;
  color: var(--text-muted);
}

.quote-form__status {
  grid-column: 1 / -1;
  padding: 16px 18px;
  border: 1.5px solid var(--gold-border);
  border-radius: 10px;
  background: rgba(246, 191, 63, .07);
  color: var(--white);
}

.quote-form__status:empty { display: none; }

.quote__direct {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 44px;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--gold-hairline);
}

.quote__direct a {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--white);
  overflow-wrap: anywhere;
  transition: color .2s;
}

.quote__direct a:hover { color: var(--gold-300); }

/* Services page: the band above already carries the slanted photos, so the form sits on its own */
.quote--plain { background: radial-gradient(60% 70% at 50% 0%, #15120c 0%, rgba(0, 0, 0, 0) 72%); }

.quote--plain .quote__body {
  width: min(100% - 2 * var(--gutter), 820px);
  margin-inline: auto;
  padding: clamp(56px, 6vw, 88px) 0 clamp(60px, 6.5vw, 96px);
}

.quote--plain .quote__body > :is(.h2, .quote__lede) {
  margin-inline: auto;
  text-align: center;
}

/* ---------- Responsive ---------- */
@media (min-width: 1000px) and (max-width: 1199px) {
  .hero .hero__visual {
    --slant: 130px;
    --visual-left: 56%;
  }

  .hero__lede { max-width: 30rem; }
}

@media (max-width: 1199px) {
  .feature-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    gap: 16px 0;
  }

  .feature-row li:nth-child(odd) { padding-left: 0; }
  .feature-row li:nth-child(odd)::before { display: none; }
}

@media (max-width: 1179px) {
  .service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-card__media { aspect-ratio: 16 / 8; }

  .site-footer__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .site-footer__right { justify-items: center; }
}

@media (max-width: 1099px) {
  .site-nav { display: none; }
  .menu-toggle { display: grid; }
  .header-cta { margin-left: auto; }
}

@media (max-width: 999px) {
  :root {
    --header-h: 76px;
    --header-shrink: 10px;
    --logo-shrink: .84;
  }

  /* Stacked layouts: the photo moves above or below the copy and the slant runs across */
  .slant--stack {
    --clip: polygon(0 0, 100% 0, 100% calc(100% - var(--slant-y)), 0 100%);
    --shift: 0 var(--edge);
  }

  .slant--stack-top {
    --clip: polygon(0 var(--slant-y), 100% 0, 100% 100%, 0 100%);
    --shift: 0 calc(var(--edge) * -1);
  }

  .slant__shade { display: none; }

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

  .hero__visual {
    --slant-y: clamp(36px, 8vw, 64px);
    position: relative;
    inset: auto;
    order: -1;
    aspect-ratio: 16 / 10;
    max-height: 62vh;
    margin-bottom: 4px;
  }

  .hero__inner,
  .page-hero .hero__inner {
    min-height: 0;
    padding-block: 18px 52px;
  }

  .hero__content { max-width: 40rem; }

  .hero__brush { width: min(58%, 380px); bottom: 12%; }
  .hero__visual .script { right: 7%; bottom: 20%; font-size: clamp(1.8rem, 6vw, 2.8rem); }

  .why__band,
  .about__band { display: flex; flex-direction: column; min-height: 0; }

  .why__content,
  .about__content { max-width: none; }

  .why__visual,
  .about__visual {
    --slant-y: clamp(32px, 7vw, 56px);
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 2.3 / 1;
  }

  .why__inner { padding-block: 40px 30px; }
  .why__list li { padding-inline: clamp(16px, 4vw, 40px); }
  .about__inner { padding-block: 52px 36px; }

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

  .carousel__track { grid-auto-columns: calc((100% - var(--gap)) / 2); }

  .cta-band__inner { grid-template-columns: 1fr; }

  .cta-band__left {
    --slant-y: clamp(28px, 6vw, 48px);
    aspect-ratio: 16 / 6;
  }

  .cta-band__copy {
    justify-self: center;
    padding-block: 26px 44px;
    text-align: center;
  }

  .cta-band__copy p { margin-inline: auto; }
  .cta-band__right { display: none; }

  .contact-band__inner {
    grid-template-columns: 1fr;
    padding-inline: var(--gutter);
  }

  .locations { padding-bottom: 8px; }
  .contact { padding-left: 0; }
  .contact-band__visual { display: none; }
}

@media (max-width: 699px) {
  .service-cards,
  .service-grid { grid-template-columns: minmax(0, 1fr); }

  .service-card__media { aspect-ratio: 16 / 9; }

  .why__visual,
  .about__visual { aspect-ratio: 16 / 9; }

  .why__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 0;
  }

  .why__list li { padding-inline: 12px; }
  .why__list li:nth-child(odd) { padding-left: 0; }
  .why__list li:nth-child(odd)::before { display: none; }

  .carousel__viewport { padding-inline: 0; }
  .carousel__track { grid-auto-columns: 100%; }
  .carousel__btn { display: none; }

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

  .feature-row li { padding-inline: 14px; }
  .feature-row li:nth-child(odd) { padding-left: 0; }

  .reviews__head { align-items: flex-start; }

  .site-footer__meta { flex-direction: column; align-items: center; }
}

@media (max-width: 599px) {
  /* Two even lines instead of a dangling separator */
  .hero__services-break {
    display: block;
    height: 0;
    overflow: hidden;
  }

  .header-cta { display: none; }
  .menu-toggle { margin-left: auto; }

  /* The review count sits under the stars, so its divider would only dangle */
  .rating {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .rating__meta {
    padding-left: 0;
    border-left: 0;
  }
  .hero__cta { width: 100%; min-width: 0; }
  .pin-list { gap: 12px 22px; }
  .footer-nav { gap: 8px 22px; }
}

/* ---------- Responsive: sections added after the mockup ---------- */
@media (max-width: 1179px) {
  .carousel--spaces .carousel__track { grid-auto-columns: calc((100% - 2 * var(--gap)) / 3); }
}

@media (max-width: 999px) {
  .work__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-template-areas:
      "intro intro"
      "build build"
      "kitchen kitchen"
      "bathroom tiling";
  }

  .work__intro {
    padding-right: 0;
    margin-bottom: 8px;
  }

  .work-tile--build,
  .work-tile--kitchen { aspect-ratio: 16 / 9; }

  .work-tile--bathroom,
  .work-tile--tiling { aspect-ratio: 1; }

  /* One column: heading and intro, the photo, the steps, then the button */
  .process__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .process__aside { display: contents; }

  .process__aside .lede { margin-top: 16px; }

  .process__photo {
    margin-top: 30px;
    aspect-ratio: 16 / 9;
  }

  .process__steps {
    order: 1;
    margin-top: 36px;
  }

  .process__aside .btn {
    order: 2;
    justify-self: start;
    margin-top: 36px;
  }

  .spotlight__inner,
  .faq__inner { grid-template-columns: minmax(0, 1fr); }

  .spotlight__media {
    width: min(100%, 560px);
    margin-bottom: 8px;
  }

  .faq__aside { position: static; }

  .carousel--spaces .carousel__track { grid-auto-columns: calc((100% - 2 * var(--gap)) / 2.4); }

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

  .quote__visual {
    --slant-y: clamp(28px, 6vw, 48px);
    min-height: 0;
    aspect-ratio: 16 / 8;
  }

  .quote__visual img { object-position: 50% 62%; }

  .quote__body { padding: 30px var(--gutter) 60px; }
}

@media (max-width: 699px) {
  .work__grid { gap: 12px; }
  .work-tile figcaption { padding: 40px 14px 13px; }
  .work-tile--bathroom :is(.work-tile__title, .work-tile__note),
  .work-tile--tiling :is(.work-tile__title, .work-tile__note) { font-size: .9rem; }

  .process__steps { --node: 54px; }
  .step__node .icon { width: 25px; height: 25px; }
  .step__title { padding-top: 5px; }

  .carousel--spaces .carousel__track { grid-auto-columns: calc((100% - var(--gap)) / 1.25); }

  .faq-item__answer { padding-right: 0; }

  .quote-form { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 599px) {
  .process__aside .btn,
  .quote-form__submit { width: 100%; }

  .quote__direct { gap: 18px; }
}

/* ======================================================================
   Sub-pages: About, Our Work, Locations, Reviews and Contact
   ====================================================================== */

/* ---------- Page heroes ---------- */
.page-hero--plain .hero__title { margin-top: 0; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 16px;
  margin-top: 28px;
}

.hero__actions .btn { --btn-h: 56px; }

.hero__actions .btn--line {
  padding: 0 1.6em;
  font-size: .92rem;
}

.page-hero .rating { margin-top: 26px; }
.page-hero .rating + .hero__actions { margin-top: 26px; }

.hero__direct {
  display: grid;
  gap: 18px;
  margin-top: 30px;
}

.hero__direct a {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--white);
}

.hero__direct .icon-ring {
  width: 54px;
  height: 54px;
}

.hero__direct-value {
  display: block;
  font-weight: 600;
  font-size: 1.12rem;
  overflow-wrap: anywhere;
  transition: color .2s;
}

.hero__direct-value--phone {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--gold-text);
}

.hero__direct a:hover .hero__direct-value { color: var(--gold-200); }

/* ---------- About: story ---------- */
.story__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}

.story__photo {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1.5px solid var(--gold-border);
  border-radius: var(--radius);
  background: #0b0b0b;
  box-shadow: 0 22px 46px -30px rgba(234, 169, 47, .5);
}

.story__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}

.story__copy {
  display: grid;
  justify-items: start;
  gap: 22px;
}

.story__text {
  display: grid;
  gap: 16px;
  max-width: 58ch;
}

.story__text p:not(.lede) { color: var(--text); }

.then-now {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  width: 100%;
  margin-top: 10px;
  padding-top: 26px;
  border-top: 1px solid var(--gold-hairline);
}

.then-now__item {
  display: grid;
  gap: 4px;
}

.then-now__label {
  font-weight: 600;
  font-size: .92rem;
  color: var(--gold-text);
}

.then-now__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.98rem, 1.2vw, 1.1rem);
  line-height: 1.25;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--white);
}

.then-now__note {
  font-size: .92rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.then-now__arrow {
  width: 30px;
  height: 30px;
  color: var(--gold-400);
}

/* ---------- About: what you can count on ---------- */
.promise__band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.promise__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.promise__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 40%;
}

.promise__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .93) 34%, rgba(0, 0, 0, .6) 66%, rgba(0, 0, 0, .2) 100%);
}

.promise__inner { padding-block: clamp(64px, 7vw, 112px); }

.promise__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 52px;
  max-width: 760px;
  margin-top: 40px;
}

.promise__list li {
  display: grid;
  align-content: start;
  gap: 10px;
}

.promise__list .icon {
  width: 40px;
  height: 40px;
  color: var(--gold-400);
}

.promise__title {
  margin-top: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--white);
}

.promise__list p {
  max-width: 40ch;
  color: var(--text);
}

/* ---------- About: every trade, one team ---------- */
.trades__inner {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  align-items: start;
  gap: clamp(36px, 6vw, 96px);
}

.trades__intro {
  position: sticky;
  top: calc(var(--header-h) + 28px);
  display: grid;
  gap: 18px;
}

.trades__intro .lede { max-width: 38ch; }

/* The hovered trade's photo floats behind the list and follows the cursor (main.js) */
.trade-list {
  position: relative;
  isolation: isolate;
  border-top: 1px solid var(--gold-hairline);
}

.trade-list li { border-bottom: 1px solid var(--gold-hairline); }

.trade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name arrow"
    "note arrow";
  align-items: center;
  column-gap: 24px;
  row-gap: 4px;
  padding: 24px 4px;
  color: var(--white);
}

.trade__name,
.trade__note,
.trade__arrow {
  position: relative;
  z-index: 1;
}

.trade__name {
  grid-area: name;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.5vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  transition: color .3s;
}

.trade__note {
  grid-area: note;
  color: var(--text-muted);
  transition: color .3s;
}

.trade__arrow {
  grid-area: arrow;
  width: 28px;
  height: 28px;
  color: var(--gold-400);
}

.trade:is(:hover, :focus-visible) .trade__name { color: var(--gold-300); }
.trade:is(:hover, :focus-visible) .trade__note { color: var(--text); }

.trade__img {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: clamp(220px, 21vw, 310px);
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1.5px solid var(--gold-border);
  border-radius: 10px;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .9);
  filter: brightness(.62);
  opacity: 0;
  scale: .86;
  rotate: -4deg;
  translate: calc(var(--px, 0px) - 50%) calc(var(--py, 0px) - 50%);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .trade:hover .trade__img {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }
}

/* Touch screens get a thumbnail in each row instead */
@media (hover: none), (pointer: coarse) {
  .trade {
    grid-template-columns: 76px minmax(0, 1fr) auto;
    grid-template-areas:
      "img name arrow"
      "img note arrow";
  }

  .trade__img {
    position: static;
    grid-area: img;
    width: 76px;
    aspect-ratio: 1;
    border-radius: 8px;
    box-shadow: none;
    filter: none;
    opacity: 1;
    scale: 1;
    rotate: 0deg;
    translate: none;
  }
}

/* ---------- Pull quote (About and Reviews) ---------- */
.big-quote__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 22px;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.big-quote__mark {
  width: 60px;
  height: 60px;
  color: var(--gold-400);
  filter: drop-shadow(0 0 14px rgba(246, 191, 63, .35));
}

.big-quote__text {
  font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 2.25rem);
  line-height: 1.35;
  color: var(--white);
  text-wrap: balance;
}

.big-quote__cite {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.big-quote__name {
  display: grid;
  gap: 2px;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--gold-text);
}

.big-quote__job {
  font-weight: 400;
  font-size: .92rem;
  color: var(--text-muted);
}

.big-quote__link { margin-top: 6px; }

/* ---------- Our Work: filters ---------- */
.projects { padding-top: clamp(36px, 3.6vw, 52px); }

.projects__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 32px;
  margin-bottom: clamp(20px, 2.4vw, 32px);
}

/* Only useful with JavaScript, so hidden without it */
.filters { display: none; }

.js .filters {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 30px;
}

.filters__btn {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 12px 0;
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--white);
  transition: color .2s;
}

.filters__btn::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-400);
  box-shadow: 0 0 10px rgba(246, 191, 63, .7);
  scale: 0 1;
  transform-origin: 0 50%;
}

.filters__btn:hover { color: var(--gold-300); }
.filters__btn[aria-pressed="true"] { color: var(--gold-text); }
.filters__btn[aria-pressed="true"]::after { scale: 1 1; }

.filters__count {
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.projects__status {
  font-size: .92rem;
  color: var(--text-muted);
}

/* ---------- Our Work: gallery ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: clamp(190px, 17vw, 262px);
  grid-auto-flow: dense;
  gap: clamp(12px, 1.4vw, 20px);
}

.gallery__item--wide { grid-column: span 2; }
.gallery__item--tall { grid-row: span 2; }

.gallery__item--big {
  grid-column: span 2;
  grid-row: span 2;
}

/* A filtered view drops the mosaic spans for an even grid, so only its last row can have a gap */
.gallery[data-filter]:not([data-filter="all"]) { grid-auto-rows: clamp(240px, 24vw, 340px); }

.gallery[data-filter]:not([data-filter="all"]) .gallery__item {
  grid-column: auto;
  grid-row: auto;
}

/* Names are only handed out while a filter change is animating (main.js) */
.gallery.is-filtering .gallery__item {
  view-transition-name: match-element;
  view-transition-class: gallery-item;
}

.gallery-tile {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1.5px solid var(--gold-border);
  border-radius: var(--radius);
  background: #0b0b0b;
  box-shadow: 0 22px 46px -32px rgba(234, 169, 47, .45);
  transition: border-color .35s;
}

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

.gallery-tile__caption {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: 2px;
  padding: 46px 18px 16px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .86) 100%);
}

.gallery-tile__title {
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--white);
}

.gallery-tile__note {
  font-size: .92rem;
  line-height: 1.35;
  color: var(--text);
}

.gallery-tile__zoom {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1.5px solid var(--gold-border);
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: var(--gold-300);
  opacity: 0;
  scale: .8;
}

.gallery-tile__zoom .icon {
  width: 18px;
  height: 18px;
}

.gallery-tile:is(:hover, :focus-visible) { border-color: var(--gold-400); }

.gallery-tile:is(:hover, :focus-visible) .gallery-tile__zoom {
  opacity: 1;
  scale: 1;
}

/* ---------- Our Work: lightbox ---------- */
.lightbox {
  --ratio: 1.5;
  width: min(100vw - 32px, 1180px, (100dvh - 130px) * var(--ratio));
  min-width: min(100vw - 32px, 540px);
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1.5px solid var(--gold-border);
  border-radius: 14px;
  background: #050505;
  color: var(--white);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .95), 0 0 60px -20px rgba(246, 191, 63, .3);
  opacity: 0;
  scale: .94;
}

.lightbox[open] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
}

.lightbox[open]:not([data-closing]) {
  opacity: 1;
  scale: 1;
}

@starting-style {
  .lightbox[open]:not([data-closing]) {
    opacity: 0;
    scale: .94;
  }
}

.lightbox:modal { overscroll-behavior: contain; }

.lightbox::backdrop {
  overflow: hidden;
  overscroll-behavior: contain;
  background: rgba(0, 0, 0, 0);
}

.lightbox[open]:not([data-closing])::backdrop { background: rgba(0, 0, 0, .88); }

@starting-style {
  .lightbox[open]:not([data-closing])::backdrop { background: rgba(0, 0, 0, 0); }
}

.lightbox__frame {
  min-height: 0;
  background: #000;
  touch-action: pan-y;
}

.lightbox__img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio);
  max-height: calc(100dvh - 130px);
  object-fit: contain;
  user-select: none;
}

.lightbox .gold-rule { box-shadow: 0 0 10px rgba(255, 190, 70, .35); }

.lightbox__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px 24px;
  padding: 16px 20px 18px;
}

.lightbox__caption {
  display: grid;
  gap: 2px;
}

.lightbox__title {
  font-weight: 600;
  font-size: 1.06rem;
}

.lightbox__note {
  font-size: .95rem;
  color: var(--text-muted);
}

.lightbox__count {
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.lightbox__nav {
  display: flex;
  gap: 10px;
}

.lightbox__btn,
.lightbox__close {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--gold-border);
  border-radius: 50%;
  color: var(--gold-300);
  transition: background-color .2s, color .2s;
}

.lightbox__btn .icon,
.lightbox__close .icon {
  width: 22px;
  height: 22px;
}

.lightbox__btn:hover,
.lightbox__close:hover {
  background: rgba(246, 191, 63, .12);
  color: var(--gold-200);
}

.lightbox__close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, .62);
}

/* ---------- Locations ---------- */
.where {
  /* Map labels can reach the edge on small phones; clip keeps the sticky map working */
  overflow-x: clip;
  padding-block: clamp(24px, 3vw, 40px) clamp(56px, 6vw, 96px);
  background: radial-gradient(70% 55% at 78% 12%, #15120c 0%, rgba(0, 0, 0, 0) 70%);
}

.where__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(36px, 6vw, 96px);
}

.where__intro {
  grid-column: 1;
  display: grid;
  align-content: center;
  gap: 20px;
  min-height: min(calc(100svh - var(--header-h) - 60px), 700px);
  padding-block: 24px 40px;
}

.where__title { font-size: clamp(2.15rem, calc(3.4vw + 2px), 3.15rem); }
.where__intro .lede { max-width: 46ch; }

.city-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
  margin-top: 6px;
}

.city-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--white);
  transition: color .2s;
}

.city-links a:hover,
.city-links a[aria-current="true"] { color: var(--gold-300); }

.city-links .icon {
  width: 26px;
  height: 26px;
  color: var(--gold-400);
}

.city-links small {
  display: block;
  font-weight: 400;
  font-size: .86rem;
  color: var(--text-muted);
}

.where__map {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: start;
  display: grid;
  place-items: center;
  height: calc(100svh - var(--header-h) - 48px);
  max-height: 760px;
}

.map {
  position: relative;
  width: 100%;
  max-width: calc((100svh - var(--header-h) - 80px) * 1000 / 943);
}

.map__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.map__coast {
  fill: rgba(246, 191, 63, .045);
  stroke: var(--gold-400);
  stroke-width: 2.6;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(246, 191, 63, .32));
}

.map__borders {
  fill: none;
  stroke: rgba(234, 169, 47, .2);
  stroke-width: 1.4;
  stroke-linejoin: round;
}

/* Positioned with margins, so the drop-in animation is free to use translate */
.map-pin {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  cursor: pointer;
}

.map-pin__dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-100), var(--gold-400) 55%, var(--gold-600));
  box-shadow: 0 0 0 4px rgba(246, 191, 63, .16), 0 0 18px rgba(246, 191, 63, .65);
}

.map-pin::after {
  content: "";
  position: absolute;
  inset: -12px;
  border: 1.5px solid rgba(255, 226, 122, .7);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.map-pin__label {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  padding: 4px 10px;
  border: 1px solid var(--gold-hairline);
  border-radius: 6px;
  background: rgba(0, 0, 0, .72);
  font-weight: 600;
  font-size: clamp(.84rem, 1vw, .98rem);
  white-space: nowrap;
  color: var(--white);
  transition: color .3s, border-color .3s;
}

.map-pin--adelaide .map-pin__label { right: calc(100% + 10px); }

/* Sydney sits on the east coast, so its label goes above the pin */
.map-pin--sydney .map-pin__label {
  top: auto;
  right: -10px;
  bottom: calc(100% + 10px);
  translate: none;
}

.map-pin--melbourne .map-pin__label { left: calc(100% + 10px); }

.map-pin.is-active .map-pin__dot {
  scale: 1.3;
  box-shadow: 0 0 0 6px rgba(246, 191, 63, .24), 0 0 28px rgba(255, 214, 110, .95);
}

.map-pin.is-active .map-pin__label {
  border-color: var(--gold-border);
  color: var(--gold-200);
}

.city {
  grid-column: 1;
  display: grid;
  gap: 24px;
  padding-block: clamp(44px, 6vw, 84px);
  border-top: 1px solid var(--gold-hairline);
}

.city__photo {
  --slant: clamp(60px, 6vw, 96px);
  aspect-ratio: 16 / 10;
}

.city__copy {
  display: grid;
  justify-items: start;
  gap: 14px;
}

.city__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.city__state {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .06em;
  color: var(--gold-text);
}

.city__copy p {
  max-width: 52ch;
  color: var(--text);
}

.city__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin-top: 6px;
}

.city__actions .btn { --btn-h: 50px; }

/* ---------- Reviews ---------- */
.wall { padding-top: clamp(8px, 1vw, 16px); }

.wall__title { margin-bottom: 28px; }

.review-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(16px, 2vw, 26px);
}

.review-wall > li { display: flex; }

.review-card__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 14px;
  margin-top: auto;
  font-size: .84rem;
  color: var(--text-muted);
}

.review-card__tag {
  font-weight: 600;
  color: var(--gold-text);
}

.reviews__more {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

.leave-review { background: radial-gradient(60% 90% at 50% 100%, #15120c 0%, rgba(0, 0, 0, 0) 70%); }

.leave-review__inner {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding-block: clamp(56px, 6vw, 92px);
  text-align: center;
}

.leave-review__inner .lede { max-width: 50ch; }

.leave-review__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 14px;
  margin-top: 6px;
}

.leave-review__actions .btn { --btn-h: 52px; }

/* ---------- Contact ---------- */
.contact-page__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: start;
  gap: clamp(40px, 6vw, 96px);
}

.contact-page .quote-form { margin-top: 30px; }

.contact-aside {
  position: sticky;
  top: calc(var(--header-h) + 28px);
  display: grid;
  gap: 24px;
  padding: clamp(24px, 2.6vw, 34px);
  border: 1.5px solid var(--gold-border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #0d0d0d 0%, #040404 100%);
  box-shadow: 0 22px 46px -30px rgba(234, 169, 47, .5);
}

.contact-aside__block {
  display: grid;
  justify-items: start;
  gap: 12px;
}

.contact-aside__block + .contact-aside__block {
  padding-top: 24px;
  border-top: 1px solid var(--gold-hairline);
}

.contact-aside__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--white);
}

.contact-aside p { color: var(--text); }

.contact-aside__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--gold-text);
  transition: color .2s;
}

.contact-aside__link:hover { color: var(--gold-200); }

.contact-aside__link .icon {
  width: 1.1em;
  height: 1.1em;
}

/* A short gold line joins the three steps, like the process timeline on the home page */
.next-steps {
  display: grid;
  gap: 16px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.next-steps li {
  position: relative;
  padding-left: 30px;
  line-height: 1.45;
  color: var(--text);
}

.next-steps li::before {
  content: "";
  position: absolute;
  top: .42em;
  left: 2px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--gold-400);
  border-radius: 50%;
  background: #120d04;
  box-shadow: 0 0 10px rgba(246, 191, 63, .4);
}

.next-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(.42em + 14px);
  bottom: -14px;
  left: 7px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-400), rgba(234, 169, 47, .25));
  transform-origin: 50% 0;
}

.contact-aside__faq {
  font-size: .95rem;
  color: var(--text-muted);
}

.contact-aside__faq a {
  font-weight: 600;
  color: var(--gold-text);
  text-decoration: underline;
  text-decoration-color: var(--gold-hairline);
  text-underline-offset: 4px;
}

/* ---------- Not found ---------- */
/* Tall enough on desktop that the footer settles near the bottom of the screen */
@media (min-width: 1000px) {
  .page-hero--404 .hero__inner { min-height: clamp(430px, calc(100svh - var(--header-h) - 210px), 680px); }
}

/* ---------- Responsive: sub-pages ---------- */
@media (max-width: 1099px) {
  .then-now {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .then-now__arrow { rotate: 90deg; }
}

@media (max-width: 999px) {
  .story__inner,
  .trades__inner,
  .contact-page__inner { grid-template-columns: minmax(0, 1fr); }

  .story__photo {
    width: min(100%, 520px);
    aspect-ratio: 4 / 4.2;
  }

  .promise__media {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 9;
  }

  .promise__media::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, #000 100%); }
  .promise__inner { padding-block: 8px 64px; }

  .trades__intro { position: static; }

  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(170px, 34vw, 260px);
  }

  .gallery__item--big { grid-row: span 1; }

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

  .where__intro {
    min-height: 0;
    padding-block: 32px 8px;
  }

  .where__map {
    position: relative;
    top: auto;
    grid-column: 1;
    grid-row: auto;
    height: auto;
    max-height: none;
    padding-block: 28px 36px;
  }

  .map {
    width: min(100%, 560px);
    max-width: none;
  }

  .contact-aside { position: static; }
}

@media (max-width: 699px) {
  .hero__direct-value:not(.hero__direct-value--phone) { font-size: 1rem; }

  .promise__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    margin-top: 30px;
  }

  .trade { padding-block: 18px; }

  .gallery {
    gap: 10px;
    grid-auto-rows: 44vw;
  }

  .gallery__item--wide,
  .gallery__item--big { grid-column: span 2; }

  .gallery-tile__caption { padding: 40px 12px 11px; }

  .gallery__item:not(.gallery__item--wide):not(.gallery__item--big) :is(.gallery-tile__title, .gallery-tile__note) { font-size: .88rem; }

  .lightbox {
    width: min(100vw, (100dvh - 112px) * var(--ratio));
    min-width: 0;
    max-height: 100dvh;
    border-radius: 0;
    border-inline: 0;
  }

  .lightbox__img { max-height: calc(100dvh - 112px); }

  .lightbox__bar {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 14px 16px 18px;
  }

  .lightbox__count {
    grid-column: 1;
    grid-row: 2;
  }

  .lightbox__nav {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .map-pin__label {
    padding: 3px 8px;
    font-size: .8rem;
  }

  .city__photo { --slant: 48px; }
}

/* Narrow phones: compact labels so Melbourne's fits beside its pin */
@media (max-width: 479px) {
  .map-pin__label {
    padding: 2px 6px;
    font-size: .75rem;
  }

  .map-pin--adelaide .map-pin__label { right: calc(100% + 6px); }
  .map-pin--melbourne .map-pin__label { left: calc(100% + 6px); }
}

/* ---------- Windows high contrast ----------
   Forced colours drop background fills, so the cues drawn with them come back in system colours. */
@media (forced-colors: active) {
  .btn--gold { border: 2px solid; }

  .site-nav__indicator,
  .site-nav a[aria-current="page"]::after,
  .filters__btn[aria-pressed="true"]::after,
  .carousel__dot[aria-current="true"]::before,
  .map-pin__dot {
    forced-color-adjust: none;
    background: Highlight;
  }

  .carousel__dot::before,
  .faq-item__icon::before,
  .faq-item__icon::after {
    forced-color-adjust: none;
    background: CanvasText;
  }
}

@media (max-width: 599px) {
  .rating-summary__sep { display: none; }

  .hero__actions .btn { width: 100%; }

  .city__actions .btn,
  .leave-review__actions .btn { width: 100%; }
}