/* North Shore Projects
   Black and white, from the logo. The whole site is dark: sections alternate black and charcoal,
   and white is the text, buttons, lines and logo. Photos carry the colour.
   DM Serif Display for headings, DM Sans for text, small spaced capitals for the menu and buttons.
   Photos sit edge to edge with a thin "grout" gap, like tiles. */

@font-face {
  font-family: "DM Serif Display";
  src: url("/fonts/dm-serif-display-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Black and white, taken from the logo. No white backgrounds: black and white sections
     taking turns was too harsh, so every surface is dark and white is what sits on it.
     The greys are neutral (no tint) and each has one job. */
  --black: #000000;        /* the logo's black: page, header, every other section */
  --coal: #151515;         /* charcoal: the sections in between, menus, footer */
  --lift: #1C1C1C;         /* one step up: form fields, photo placeholders */
  --light: #FFFFFF;        /* the logo's white: text, buttons and lines */
  --light-dim: #A8A8A8;    /* secondary text */
  --light-hover: #CFCFCF;  /* hover */
  --rule: rgba(255, 255, 255, 0.2);
  --error-dark: #FFB4A8;   /* the one colour left: form errors */

  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  /* Small spaced capitals: menu, buttons, footer headings. Never above a heading. */
  --caps-size: 0.8125rem;
  --caps-track: 0.14em;

  --grout: 6px;
  --gutter: clamp(1.25rem, 4.4vw, 4rem);
  --wrap: 84rem;
  /* Left and right edge of the content column, for full-width rows (header, menus, photo rows)
     so they line up with .wrap on wide screens. */
  --edge: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  --header-h: 4.5rem;
  --ease: cubic-bezier(0.22, 0.7, 0.12, 1);
}

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

html {
  /* 16px up to about 1500px wide, then the whole layout scales a little (18px at 2560px),
     so a big monitor gets a bigger page, not a small one with wide margins. */
  font-size: clamp(100%, 0.75rem + 0.26vw, 112.5%);
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--black);
  color: var(--light);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; text-decoration: none; }
a[href^="tel:"] { white-space: nowrap; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

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

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--light); color: var(--black); padding: 0.75rem 1rem; font-weight: 600;
}
.skip:focus { top: 1rem; }

/* A slightly taller header on wide screens, so the logo lettering stays readable. */
@media (min-width: 64rem) { :root { --header-h: 5rem; } }

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

/* ───────── Type ───────── */

.hero-h, .h1, .h2, .suburbs, .statement {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.12;
  text-wrap: balance;
}
.h1 { font-size: clamp(2.5rem, 4.6vw, 4.25rem); }
.h2 { font-size: clamp(1.875rem, 3vw, 2.75rem); }
.h3 { font-family: var(--serif); font-weight: 400; font-size: 1.375rem; line-height: 1.25; }
.lead { font-size: clamp(1.0625rem, 1.2vw, 1.125rem); line-height: 1.7; max-width: 34em; }

.link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color 0.2s ease;
}
.link:hover { text-decoration-color: currentColor; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0 1.75rem;
  background: var(--light); color: var(--black);
  border: 0; cursor: pointer;
  font-weight: 500; font-size: var(--caps-size); letter-spacing: var(--caps-track); text-transform: uppercase; white-space: nowrap;
  transition: background-color 0.2s ease;
}
.btn:hover { background: var(--light-hover); }
.btn[disabled] { opacity: 0.6; cursor: default; }
/* The quieter button: used for links out to a team's own website, so the address stays in lower case. */
.btn--line { background: transparent; color: var(--light); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75); padding: 0 1.25rem; font-size: 0.9375rem; letter-spacing: 0.01em; text-transform: none; }
.btn--line:hover { background: var(--light); color: var(--black); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; }
.actions .link { display: inline-flex; align-items: center; min-height: 3rem; }

/* ───────── Header ───────── */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--black); color: var(--light);
  border-bottom: 1px solid var(--rule);
}
.header-in {
  display: flex; align-items: center; gap: 0.5rem;
  height: var(--header-h);
  padding-inline: var(--edge);
}
.brand { display: flex; align-items: center; gap: 0.75rem; margin-right: auto; min-height: 3rem; }
/* The logo is used as supplied: white, symbol and lettering together. */
.brand-logo { height: 2.625rem; width: auto; }
@media (max-width: 23.5rem) { .brand-logo { height: 2.25rem; } }
@media (min-width: 64rem) { .brand-logo { height: 3.125rem; } }

.nav { display: none; }
.nav-list { display: flex; align-items: center; }
.nav-btn, .nav-link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  height: 3rem; padding: 0 0.95rem;
  background: none; border: 0; cursor: pointer;
  font-size: var(--caps-size); font-weight: 500; letter-spacing: var(--caps-track); text-transform: uppercase;
}
.nav-btn:hover, .nav-link:hover, .has-menu.is-open .nav-btn { color: var(--light-hover); }
.nav-link[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.45em; text-decoration-color: var(--light); }
.chev { transition: transform 0.25s var(--ease); }
.has-menu.is-open .chev { transform: rotate(180deg); }

.menu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--coal);
  border-bottom: 1px solid var(--rule);
  padding: 1.5rem var(--edge) 2rem;
  visibility: hidden; opacity: 0; transform: translateY(-0.5rem); pointer-events: none;
  transition: opacity 0.22s ease, transform 0.3s var(--ease), visibility 0s 0.3s;
}
.has-menu.is-open .menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; pointer-events: auto; }
.menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grout); }
.menu-item { display: block; padding-bottom: 0.25rem; }
.menu-ext { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--light-dim); font-size: 0.875rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; text-decoration-color: rgba(255, 255, 255, 0.45); }
.menu-ext:hover { color: var(--light); text-decoration-color: currentColor; }
.menu-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--lift); transition: opacity 0.2s ease; }
.menu-item:hover .menu-photo { opacity: 0.86; }
.menu-name { display: block; margin-top: 0.9rem; padding-right: 1rem; font-family: var(--serif); font-size: 1.3125rem; line-height: 1.2; }
.menu-item:hover .menu-name, .menu-item[aria-current="page"] .menu-name { color: var(--light-hover); }
.menu-sub { display: block; margin-top: 0.3rem; padding-right: 1rem; color: var(--light-dim); font-size: 0.875rem; line-height: 1.5; }
.menu-foot { margin-top: 1.25rem; font-size: 0.9375rem; }

.header-phone { display: none; align-items: center; height: 3rem; padding: 0 1rem; font-weight: 500; font-size: 0.9375rem; letter-spacing: 0.03em; white-space: nowrap; }
.header-phone:hover { color: var(--light-hover); }
.header-cta { display: none; min-height: 2.75rem; padding: 0 1.25rem; }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 0.6rem;
  height: 3rem; padding: 0 0.25rem 0 0.75rem; margin-right: -0.25rem;
  background: none; border: 0; cursor: pointer; font-weight: 500; font-size: var(--caps-size); letter-spacing: var(--caps-track); text-transform: uppercase;
}
.nav-toggle-bars { position: relative; width: 1.375rem; height: 0.625rem; }
.nav-toggle-bars::before, .nav-toggle-bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  transition: transform 0.3s var(--ease), top 0.3s var(--ease);
}
.nav-toggle-bars::before { top: 0; }
.nav-toggle-bars::after { top: 100%; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 50%; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { top: 50%; transform: rotate(-45deg); }

.mnav {
  position: fixed; inset: var(--header-h) 0 0 0;
  background: var(--coal);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1.5rem var(--gutter) 3rem;
}
.mnav-h { color: var(--light-dim); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 1.25rem; }
.mnav-list a {
  display: flex; align-items: center; min-height: 3.25rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif); font-weight: 400; font-size: 1.625rem;
}
.mnav-list a[aria-current="page"] { color: var(--light-hover); }
.mnav-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-top: 2rem; }
.mnav-phone { display: inline-flex; align-items: center; min-height: 3rem; font-weight: 500; }

@media (min-width: 64rem) {
  .nav { display: block; }
  .header-cta { display: inline-flex; margin-left: 0.5rem; }
  .nav-toggle { display: none; }
  .mnav { display: none; }
}
@media (min-width: 75rem) {
  .header-phone { display: inline-flex; }
}

/* ───────── Hero ─────────
   Phones: headline, then the four panels as a row you swipe.
   Wider screens: the panels come first and fill most of the first screen, with the
   headline in a band beneath them. (Headline-first left a flat blank slab at the top.) */

.hero { padding-top: clamp(2rem, 4.6vw, 4rem); }
.hero-top { display: grid; gap: 1.5rem; padding-bottom: clamp(1.75rem, 3.2vw, 2.75rem); }
.hero-h { font-size: clamp(2rem, 3.6vw, 3.5rem); max-width: 22em; }
.hero-side { display: grid; gap: 1.25rem; align-content: end; }
.hero-lead { font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.55; max-width: 31em; color: var(--light); }

@media (min-width: 64rem) {
  .hero-top { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); align-items: end; gap: 4rem; }
}

.panels-wrap { position: relative; padding-inline: var(--grout); padding-bottom: var(--grout); }

/* Phones: a row you swipe. */
.panels {
  display: flex; gap: var(--grout);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin-inline: calc(var(--grout) * -1); padding-inline: var(--grout);
  scroll-padding-inline: var(--grout);
}
.panels::-webkit-scrollbar { display: none; }
.panel { flex: 0 0 80%; scroll-snap-align: start; position: relative; height: clamp(19rem, calc(100svh - 32rem), 30rem); overflow: hidden; background: var(--lift); }
.panel-link { display: block; position: absolute; inset: 0; }
.panel-link:focus-visible { outline-offset: -5px; }
@media (min-width: 40rem) and (max-width: 63.99rem) { .panel { flex-basis: 46%; } }
.panel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel-link::after {
  content: ""; position: absolute; inset: 40% 0 0 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0) 100%);
}
.panel-label { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; z-index: 1; }
.panel-name { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.875rem; line-height: 1.1; }
.panel-sub { display: block; margin-top: 0.35rem; font-size: 0.9375rem; line-height: 1.4; color: var(--light); }
.panel-bar { display: none; }
.panels-pause { display: none; }

/* Wider screens: the hero fills the first screen, photos on top, taking whatever height
   the headline band leaves. */
@media (min-width: 64rem) {
  .hero { display: flex; flex-direction: column-reverse; padding-top: 0; min-height: min(calc(100svh - var(--header-h)), 64rem); }
  .hero-top { align-items: center; padding-block: clamp(1.75rem, 2.6vw, 2.5rem); }
  .hero-h { font-size: clamp(2rem, 2.75vw, 2.75rem); }
  .panels-wrap { flex: 1; display: flex; padding-top: var(--grout); padding-bottom: 0; }
  .panels { flex: 1; min-height: 17rem; }
}

/* The slider: the active panel is open, the rest wait as slices.
   Every panel is the full open width and they overlap like a fanned deck, so opening one
   only slides panels sideways. Nothing is resized while it moves: only transform and
   opacity change, which the browser can animate without redoing the layout. (The first
   version animated flex-grow, a filter and a font size, and it stuttered.)
   Browsers without container units keep the swipe row. */
@media (min-width: 64rem) {
  @supports (width: 1cqw) {
    .panels { display: block; position: relative; overflow: hidden; margin-inline: 0; padding-inline: 0; container-type: inline-size; }
    .panel {
      --s: calc((100cqw - 3 * var(--grout)) / 7.6);             /* width of a waiting slice */
      --a: calc(100cqw - 3 * var(--s) - 3 * var(--grout));      /* width of the open panel */
      --x: calc(var(--i) * (var(--s) + var(--grout)));          /* resting place, counted from the left */
      position: absolute; top: 0; bottom: 0; left: 0; width: var(--a); height: auto;
      z-index: calc(var(--i) + 1);
      transform: translate3d(var(--x), 0, 0);
      transition: transform 0.8s var(--ease);
      box-shadow: calc(var(--grout) * -1) 0 0 var(--black);       /* the grout line on its left */
    }
    /* Everything to the right of the open panel moves over by the extra width. */
    .panel.is-active ~ .panel { transform: translate3d(calc(var(--x) + var(--a) - var(--s)), 0, 0); }

    /* A waiting slice shows the middle of its photo; it slides to rest as the panel opens. */
    .panel-img { transform: translate3d(calc((var(--s) - var(--a)) / 2), 0, 0); transition: transform 0.8s var(--ease); }
    .panel.is-active .panel-img { transform: translate3d(0, 0, 0); }

    /* Waiting slices are dimmed by a layer on top, not by filtering the photo. */
    .panel::after { content: ""; position: absolute; inset: 0; background: var(--coal); opacity: 0.36; pointer-events: none; transition: opacity 0.6s ease; }
    .panel.is-active::after { opacity: 0; }

    .panel-label { left: clamp(0.9rem, 1.5vw, 1.5rem); right: auto; bottom: 1.5rem; width: calc(var(--a) - 3rem); transform: translate3d(0, 1.7rem, 0); transition: transform 0.6s var(--ease); }
    .panel.is-active .panel-label { transform: translate3d(0, 0, 0); }
    .panel-name { font-size: clamp(2rem, 3.2vw, 3rem); transform: scale(0.56); transform-origin: left bottom; transition: transform 0.6s var(--ease); }
    .panel.is-active .panel-name { transform: scale(1); }
    .panel-sub { white-space: nowrap; opacity: 0; transition: opacity 0.3s ease; }
    .panel.is-active .panel-sub { opacity: 1; transition-delay: 0.35s; }
    /* "Tiling" on a waiting slice, "Tiling and waterproofing" once it opens. */
    .panel-more { opacity: 0; transition: opacity 0.3s ease; }
    .panel.is-active .panel-more { opacity: 1; transition-delay: 0.3s; }
    .panel-bar { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2; background: var(--light); transform: scaleX(0); transform-origin: left; }
    .panels.is-running .panel.is-active .panel-bar { animation: bar var(--dwell, 6s) linear forwards; }
    .panels.is-held .panel.is-active .panel-bar { animation-play-state: paused; }

    .panels-pause {
      position: absolute; right: calc(var(--grout) + 1rem); top: calc(var(--grout) + 1rem); z-index: 6;
      display: none; align-items: center; gap: 0.55rem;
      min-height: 2.75rem; padding: 0 0.95rem;
      background: rgba(0, 0, 0, 0.72); border: 1px solid var(--rule); cursor: pointer;
      font-size: 0.875rem; font-weight: 500;
    }
    .js .panels-pause { display: inline-flex; }
    .panels-pause svg { width: 0.7rem; height: 0.8rem; }
    .pp-play { display: none; }
    .panels-pause[aria-pressed="true"] .pp-play { display: inline-flex; }
    .panels-pause[aria-pressed="true"] .pp-pause { display: none; }
    .pp-pause { display: inline-flex; }
  }
}
@keyframes bar { to { transform: scaleX(1); } }

/* The one entrance on the site: the panels fade in left to right, then the headline settles. */
@media (prefers-reduced-motion: no-preference) {
  .hero-main { animation: settle 0.9s var(--ease) 0.3s both; }
  .hero-side { animation: settle 0.9s var(--ease) 0.42s both; }
  .panel { animation: appear 0.9s ease both; }
  .panel:nth-child(2) { animation-delay: 0.08s; }
  .panel:nth-child(3) { animation-delay: 0.16s; }
  .panel:nth-child(4) { animation-delay: 0.24s; }
}
@keyframes settle { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }

/* ───────── Sections ───────── */

.section { padding-block: clamp(4rem, 8vw, 7.5rem); }
/* Sections take turns: black, charcoal, black. Text is white on both. */
.section--black { background: var(--black); }
.section--coal { background: var(--coal); }
.section--flush { padding-top: 0; }

.section-head { display: grid; gap: 1rem; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.section-aside { max-width: 30em; color: var(--light-dim); }
.section-aside .link { color: var(--light); }
@media (min-width: 64rem) {
  .section-head { grid-template-columns: 1fr minmax(0, 30em); align-items: end; gap: 3rem; }
}

/* ───────── Carousel: photos at one height, natural widths, a grout gap ───────── */

.carousel { position: relative; }
.carousel-track {
  display: flex; gap: var(--grout);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-inline: var(--edge); scroll-padding-inline: var(--edge);
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.slide { --h: clamp(17rem, 46vw, 36rem); flex: 0 0 auto; width: calc(var(--h) * var(--r)); max-width: 86vw; scroll-snap-align: start; }
.slide figure { position: relative; }
.slide-img { width: 100%; height: var(--h); object-fit: cover; background: var(--lift); }
.slide figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.9rem; font-size: 0.9375rem; }
.slide figcaption a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.slide figcaption a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; text-decoration-color: rgba(255, 255, 255, 0.4); }
.slide figcaption a:hover { text-decoration-color: currentColor; }
.slide figcaption span { color: var(--light-dim); white-space: nowrap; }
.carousel-ui { display: flex; align-items: center; gap: 0.5rem; padding: 1.25rem var(--edge) 0; }
.carousel-count { margin-left: 0.75rem; font-size: 0.9375rem; font-variant-numeric: tabular-nums; color: var(--light-dim); }

.round {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem;
  background: none; border: 1px solid rgba(255, 255, 255, 0.6); color: var(--light); cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.round:hover { background: var(--light); color: var(--black); border-color: var(--light); }
.round[disabled] { opacity: 0.3; cursor: default; }
.round[disabled]:hover { background: none; color: var(--light); border-color: rgba(255, 255, 255, 0.6); }

/* ───────── Google reviews ───────── */

.stars { display: inline-flex; gap: 0.15rem; color: var(--light); flex: none; }
.stars svg { width: 1rem; height: 0.95rem; }

.hero-rating { margin-top: 1.25rem; }
.hero-rating a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; min-height: 2.75rem; font-size: 0.9375rem; color: var(--light); }
.hero-rating a span:last-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; text-decoration-color: rgba(255, 255, 255, 0.4); }
.hero-rating a:hover span:last-child { text-decoration-color: currentColor; }

.ratings { border-top: 1px solid var(--rule); margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.rating { display: grid; gap: 0.15rem 2rem; padding-block: 1rem; border-bottom: 1px solid var(--rule); align-items: center; }
.rating-team { font-family: var(--serif); font-size: 1.3125rem; line-height: 1.25; }
.rating-score { display: inline-flex; align-items: center; gap: 0.7rem; }
.rating-count { color: var(--light-dim); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rating-link { justify-self: start; display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (min-width: 48rem) {
  .rating { grid-template-columns: minmax(0, 1.4fr) 14rem 8rem 12rem; }
  .rating-link { justify-self: end; }
}

.quote { flex: 0 0 auto; width: min(33rem, 84vw); scroll-snap-align: start; border-top: 1px solid var(--light); padding: 1.5rem 2rem 0 0; }
.quote p { font-size: 1.0625rem; line-height: 1.7; }
.quote footer { margin-top: 1.25rem; color: var(--light-dim); font-size: 0.9375rem; }
.quote footer a { color: var(--light); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; text-decoration-color: rgba(255, 255, 255, 0.4); }
.quote footer a:hover { text-decoration-color: currentColor; }
.carousel--quotes .carousel-track { gap: 1.5rem; }

.quote-grid { display: grid; gap: 2rem; }
.quote-grid li { border-top: 1px solid var(--light); padding-top: 1.25rem; }
.quote-grid p { font-size: 1.0625rem; line-height: 1.7; }
@media (min-width: 56rem) { .quote-grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.carousel--quotes .carousel-count { display: none; }

/* ───────── Services index ───────── */

.index-h { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.index-row { display: grid; gap: 1.25rem; padding-block: 2rem; border-top: 1px solid var(--rule); }
.index-row:last-child { border-bottom: 1px solid var(--rule); }
.index-name { display: flex; align-items: center; gap: 1rem; }
.index-name .h3 { font-size: clamp(1.5rem, 2vw, 1.875rem); }
.index-name a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.index-name a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
/* The four service marks are drawn in one colour (the text colour) through a mask,
   so they are white like the logo, never gold. */
.svc-mark { display: block; flex: none; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.svc-mark--tiling { --m: url("/images/marks/tiling-240.png"); }
.svc-mark--painting { --m: url("/images/marks/painting-240.png"); }
.svc-mark--cleaning { --m: url("/images/marks/cleaning-240.png"); }
.svc-mark--removals { --m: url("/images/marks/removals-240.png"); }
.index-mark { width: 3.25rem; height: 2.5rem; }
.index-offers { columns: 2; column-gap: 2rem; color: var(--light-dim); }
.index-offers li { break-inside: avoid; padding-block: 0.15rem; }
.index-go { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.75rem; }
.index-go a { display: inline-flex; align-items: center; min-height: 3rem; }
.index-site { color: var(--light-dim); font-size: 0.9375rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; text-decoration-color: rgba(255, 255, 255, 0.45); }
.index-site:hover { color: var(--light); text-decoration-color: currentColor; }
.index-phone { font-weight: 500; font-variant-numeric: tabular-nums; }
.index-phone:hover { color: var(--light-hover); }
@media (min-width: 64rem) {
  .index-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.4fr) 13rem; align-items: start; gap: 3rem; padding-block: 2.25rem; }
  .index-go { flex-direction: column; align-items: flex-end; gap: 0; margin-top: -0.75rem; }
}

/* ───────── Clips ───────── */

.reels {
  display: flex; gap: var(--grout);
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
}
.reels::-webkit-scrollbar { display: none; }
.reel { flex: 0 0 62%; max-width: 19rem; scroll-snap-align: start; }
.reel-btn { display: block; position: relative; width: 100%; padding: 0; border: 0; background: var(--lift); cursor: pointer; aspect-ratio: 9 / 16; overflow: hidden; }
.reel-btn video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel-icon {
  position: absolute; left: 0.9rem; top: 0.9rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem;
  background: rgba(0, 0, 0, 0.78); color: var(--light);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.reel-btn:hover .reel-icon { background: var(--light); color: var(--black); }
.reel-icon svg { width: 0.85rem; height: 0.95rem; }
.reel-pause { display: none; }
.reel-btn[aria-pressed="true"] .reel-play { display: none; }
.reel-btn[aria-pressed="true"] .reel-pause { display: inline-flex; }
.reel-play { display: inline-flex; padding-left: 0.15rem; }
@media (min-width: 64rem) {
  .reels { margin-inline: 0; padding-inline: 0; overflow: visible; }
  .reel { flex: 1 1 0; max-width: 21rem; }
}

.socials-h { margin-top: clamp(3rem, 5vw, 4.5rem); padding-top: 2rem; border-top: 1px solid var(--rule); }
.socials { display: grid; grid-template-columns: 1fr; margin-top: 0.75rem; }
.social { display: flex; align-items: center; gap: 1rem; min-height: 4.5rem; padding-block: 0.75rem; border-bottom: 1px solid var(--rule); }
.social-mark { height: 2.25rem; width: 3.25rem; }
.social-text { display: block; }
.social-name { display: block; color: var(--light-dim); font-size: 0.9375rem; line-height: 1.3; }
.social-handle { display: block; font-weight: 500; font-size: 1rem; line-height: 1.4; }
.social:hover .social-handle { color: var(--light-hover); }
@media (min-width: 40rem) { .socials { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
@media (min-width: 75rem) { .socials { grid-template-columns: repeat(4, 1fr); column-gap: 2rem; } .social { border-bottom: 0; } }

/* ───────── Areas ───────── */

.areas { display: grid; gap: 2rem; }
.areas-note { margin-top: 1rem; max-width: 24em; color: var(--light-dim); }
.areas-note .link { color: var(--light); }
.suburbs { font-size: clamp(1.5rem, 2.5vw, 2.25rem); line-height: 1.35; letter-spacing: 0; text-wrap: pretty; }
.suburbs li { display: inline; }
.suburbs li:not(:last-child)::after { content: ", "; }
.suburbs li:last-child::after { content: "."; }
@media (min-width: 64rem) { .areas { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 4rem; } }

/* ───────── Enquiry and forms ───────── */

.enquire { display: grid; gap: 2.5rem; }
.enquire-intro .lead { margin-top: 1.25rem; color: var(--light); }
@media (min-width: 64rem) { .enquire { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(3rem, 7vw, 7rem); } }

.direct { display: grid; gap: 1.25rem; margin-top: 2.25rem; }
.direct dt { color: var(--light-dim); font-size: 0.9375rem; }
.direct dd a { display: inline-flex; align-items: center; min-height: 2.75rem; font-family: var(--serif); font-size: 1.5rem; }
.direct dd a:hover { color: var(--light-hover); }
.direct--stack { margin-top: 0; }
.direct--stack dd a { font-size: 1.125rem; word-break: break-word; }

.form { display: grid; gap: 1.5rem; }
.field-row { display: grid; gap: 1.5rem; }
@media (min-width: 40rem) { .field-row { grid-template-columns: 1fr 1fr; } }
.label { display: block; margin-bottom: 0.5rem; font-size: 0.9375rem; font-weight: 500; }
.optional { font-weight: 400; color: var(--light-dim); }
.input {
  display: block; width: 100%; min-height: 3.25rem; padding: 0.7rem 0.9rem;
  background: var(--lift); color: var(--light);
  border: 1px solid rgba(255, 255, 255, 0.42); border-radius: 0;
  font: inherit; font-size: 1.0625rem;
}
.input:hover { border-color: rgba(255, 255, 255, 0.7); }
.input:focus-visible { outline: 2px solid var(--light); outline-offset: 0; border-color: var(--light); }
.input--area { min-height: 8rem; resize: vertical; line-height: 1.5; }
.input[aria-invalid="true"] { border-color: var(--error-dark); }
.error { margin-top: 0.45rem; color: var(--error-dark); font-size: 0.9375rem; }

/* Two by two: "Tiling and waterproofing" is too long for four across. One column on very small phones. */
.checks { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grout); }
@media (min-width: 23.5rem) { .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.check { position: relative; display: flex; align-items: center; gap: 0.7rem; min-height: 3.25rem; padding: 0 0.9rem; background: var(--lift); border: 1px solid rgba(255, 255, 255, 0.42); cursor: pointer; font-weight: 500; }
.check:hover { border-color: rgba(255, 255, 255, 0.7); }
.check input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 1.25rem; height: 1.25rem; margin: 0;
  border: 1.5px solid var(--light); background: transparent; cursor: pointer;
  display: inline-grid; place-content: center;
}
.check input::after { content: ""; width: 0.7rem; height: 0.4rem; border-left: 2px solid var(--black); border-bottom: 2px solid var(--black); transform: rotate(-45deg) translate(0.05rem, -0.08rem); opacity: 0; }
.check input:checked { background: var(--light); border-color: var(--light); }
.check input:checked::after { opacity: 1; }
.check:has(input:checked) { border-color: var(--light); }
.check:has(input:focus-visible) { outline: 2px solid var(--light); outline-offset: 2px; }
.check input:focus-visible { outline: none; }
.check--single { background: none; border: 0; padding: 0; min-height: 3rem; font-weight: 400; justify-self: start; }
.check--single:has(input:focus-visible) { outline-offset: 4px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.form-note { color: var(--light-dim); font-size: 0.9375rem; max-width: 26em; }
.form-note .link { color: var(--light); }
.form-status { padding: 1rem 1.1rem; border: 1px solid var(--error-dark); color: var(--light); }
.form-status:focus { outline: none; }
.form-status a { text-decoration: underline; text-underline-offset: 0.25em; }
.form-done { padding: 2rem 0; border-top: 1px solid var(--light); border-bottom: 1px solid var(--rule); }
.form-done:focus { outline: none; }
.form-done-h { font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.15; margin-bottom: 0.75rem; }

/* ───────── Page heads (inner pages) ───────── */

.page-head { padding-top: clamp(2.5rem, 5vw, 4.5rem); }
.page-head-grid { display: grid; gap: 2.5rem; }
.page-head-text { padding-bottom: clamp(0rem, 3vw, 3rem); }
.kicker-mark { height: 3.25rem; width: 5.25rem; margin-bottom: 1.75rem; -webkit-mask-position: left center; mask-position: left center; }
.page-head .lead { margin-top: 1.25rem; }
.page-head .actions { margin-top: 2rem; }
.page-head-photo { margin-inline: calc(var(--gutter) * -1); }
.page-head-photo img { width: 100%; height: clamp(18rem, 62vw, 26rem); object-fit: cover; }
@media (min-width: 64rem) {
  .page-head-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4rem; align-items: end; }
  .page-head-photo { margin-inline: 0 calc(var(--gutter) * -1 + var(--grout)); padding-bottom: var(--grout); }
  .page-head-photo img { height: clamp(26rem, calc(100svh - 12rem), 40rem); }
}
@media (min-width: 96rem) { .page-head-photo { margin-right: 0; } }
.page-head--plain { padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.page-head--contact { padding-bottom: clamp(4rem, 8vw, 7rem); }
.page-head--tall { min-height: 60svh; }
.contact-h { margin-top: 2.75rem; margin-bottom: 0.5rem; }
.contact-list li { display: grid; gap: 0 1.5rem; padding-block: 0.9rem; border-bottom: 1px solid var(--rule); }
.contact-name { color: var(--light-dim); font-size: 0.9375rem; }
.contact-list a { display: inline-flex; align-items: center; min-height: 2.75rem; word-break: break-word; }
.contact-list a:hover { color: var(--light-hover); }
.contact-hours { margin-top: 1rem; color: var(--light-dim); font-size: 0.9375rem; }
@media (min-width: 30rem) { .contact-list li { grid-template-columns: auto 1fr; } .contact-name { grid-column: 1 / -1; } }
.nf-links { display: flex; flex-wrap: wrap; gap: 0.25rem 2rem; margin-top: 2rem; }
.nf-links a { display: inline-flex; align-items: center; min-height: 3rem; }

/* ───────── Offers and steps ───────── */

.offers { display: grid; gap: 2rem; }
@media (min-width: 64rem) { .offers { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 4rem; } }
.offer { display: grid; gap: 0.15rem 2rem; padding-block: 1.1rem; border-top: 1px solid var(--rule); }
.offer:last-child { border-bottom: 1px solid var(--rule); }
.offer dt { font-weight: 600; font-size: 1.0625rem; line-height: 1.4; }
.offer dd { color: var(--light-dim); }
@media (min-width: 40rem) { .offer { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: baseline; } }

.steps { counter-reset: step; display: grid; gap: 0; }
.step { counter-increment: step; display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.1rem 0.5rem; padding-block: 1.1rem; border-top: 1px solid var(--rule); }
.step:last-child { border-bottom: 1px solid var(--rule); }
.step::before { content: counter(step); grid-row: 1 / span 2; font-family: var(--serif); font-weight: 400; font-size: 1.625rem; line-height: 1.1; }
.step-t { font-family: var(--sans); font-weight: 600; font-size: 1.0625rem; line-height: 1.4; }
.step p { grid-column: 2; color: var(--light-dim); }

/* ───────── Removals rates ───────── */

.rates { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rates th, .rates td { padding: 1rem 0.75rem 1rem 0; text-align: left; vertical-align: top; border-top: 1px solid var(--rule); }
.rates thead th { border-top: 0; padding-top: 0; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--light-dim); }
.rates tbody tr:last-child th, .rates tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
.rates tbody th { font-weight: 600; font-size: 1.0625rem; }
.rates tbody th span { display: block; font-weight: 400; font-size: 0.9375rem; color: var(--light-dim); }
.rates td { font-family: var(--serif); font-size: 1.375rem; line-height: 1.3; white-space: nowrap; }
.rates td small { font-family: var(--sans); font-size: 0.875rem; color: var(--light-dim); }
.rates-note { margin-top: 1rem; max-width: 22em; color: var(--light-dim); }
.rates-foot { margin-top: 1rem; color: var(--light-dim); font-size: 0.9375rem; }

/* ───────── Service page close ───────── */

.cta { display: grid; gap: 2.5rem; }
.cta .actions { margin-top: 1.75rem; }
@media (min-width: 64rem) { .cta { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 4rem; align-items: start; } }
.others-h { margin-top: clamp(3.5rem, 6vw, 5.5rem); padding-top: 2rem; border-top: 1px solid var(--rule); margin-bottom: 1.5rem; }
.others { display: grid; gap: 2rem var(--grout); }
@media (min-width: 48rem) { .others { grid-template-columns: repeat(3, 1fr); } }
.other { display: block; }
.other-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: opacity 0.2s ease; }
.other:hover .other-img { opacity: 0.86; }
.other-name { display: block; margin-top: 0.9rem; font-family: var(--serif); font-weight: 400; font-size: 1.625rem; line-height: 1.15; }
.other:hover .other-name { color: var(--light-hover); }
.other-sub { display: block; margin-top: 0.3rem; color: var(--light-dim); font-size: 0.9375rem; }

/* ───────── Legal ───────── */

.legal { max-width: calc(44rem + var(--gutter) * 2); margin-left: 0; }
.legal h2 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.2; margin: 2.5rem 0 0.6rem; }
.legal p, .legal ul { margin-bottom: 1rem; }
.legal ul { list-style: disc; padding-left: 1.25rem; }
.legal li { margin-bottom: 0.35rem; }
.legal a { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
.legal-date { color: var(--light-dim); }

/* ───────── Footer ───────── */

/* The line on top keeps the footer apart from a charcoal section above it. */
.site-footer { background: var(--coal); color: var(--light); border-top: 1px solid var(--rule); padding-top: clamp(3.5rem, 6vw, 5.5rem); }
.footer-grid { display: grid; gap: 2.5rem; }
.footer-logo { height: 4rem; width: auto; }
.footer-note { margin-top: 1.25rem; max-width: 20em; color: var(--light-dim); font-size: 0.9375rem; }
.footer-h { font-family: var(--sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--light-dim); margin-bottom: 0.75rem; }
.footer-list a { display: inline-flex; align-items: center; min-height: 2.75rem; word-break: break-word; }
.footer-list a:hover { color: var(--light-hover); }
.footer-dim { display: block; margin-top: -0.5rem; padding-bottom: 0.4rem; color: var(--light-dim); font-size: 0.875rem; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-block: 1.25rem; border-top: 1px solid var(--rule); color: var(--light-dim); font-size: 0.9375rem; }
.footer-legal { display: flex; gap: 1.75rem; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.footer-legal a:hover { color: var(--light); }
@media (min-width: 40rem) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 3rem; } .footer-brand { grid-column: 1 / -1; } }
@media (min-width: 80rem) { .footer-grid { grid-template-columns: 1.2fr 1.2fr 1.45fr 1fr 1.05fr; gap: 2.5rem; } .footer-brand { grid-column: auto; } }

/* ───────── Reduced motion ───────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .panels-pause { display: none !important; }
}

body.nav-open { overflow: hidden; }