/* ==========================================================================
   WashNZ — global design system
   Palette is anchored on the logo: cyan (#5CE6FF) + slate grey (#7A7A7A),
   set against a deep blue-black "ink" and a warm paper white.
   ========================================================================== */

:root {
  /* Colour */
  --ink: #0b1418;
  --ink-2: #16232a;
  --ink-3: #24343c;
  --paper: #f4f3ef;
  --paper-2: #eae8e1;
  --white: #ffffff;
  --line: #dddbd3;
  --line-dark: rgba(255, 255, 255, 0.14);
  --text: #0b1418;
  --muted: #56636a;
  --muted-on-dark: #a9b6bc;
  --aqua: #5ce6ff;          /* logo cyan — use on dark surfaces */
  --aqua-soft: #c9f6ff;
  --aqua-deep: #07778f;     /* AA on white/paper for links & small accents */
  --steel: #7a7a7a;         /* logo grey */
  --error: #b42318;
  --success: #0f7b4f;

  /* Type */
  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  --fs-h4: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-h3: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --fs-h2: clamp(2.1rem, 1.35rem + 2.8vw, 3.9rem);
  --fs-h1: clamp(2.6rem, 1.6rem + 4.6vw, 5.75rem);

  /* Space & layout */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --container: 1320px;
  --container-narrow: 860px;
  --section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --radius: 3px;
  --header-h: 85px;

  --shadow-lg: 0 30px 60px -20px rgba(11, 20, 24, 0.35);
  --shadow-img: 0 34px 60px -34px rgba(11, 20, 24, 0.55);
  --radius-img: 6px;
  /* Architectural glass, tinted with the brand ink so text stays readable on bright photos */
  --glass-dark: rgba(11, 20, 24, 0.38);
  --glass-light: rgba(255, 255, 255, 0.14);
  --glass-border: rgba(255, 255, 255, 0.22);
  --glass-blur: 20px;
  --rv: 22px;            /* scroll-reveal travel */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Never allow sideways panning on touch devices. overflow-x: clip (unlike hidden)
   does not create a scroll container, so the sticky header keeps working. */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { body { overflow-x: hidden; } }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
a[href^="tel:"] { white-space: nowrap; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class], ul[role="list"], ol[role="list"], nav ul, footer ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--aqua-deep); outline-offset: 3px; }
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: var(--aqua); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--ink); color: var(--white); padding: 0.75rem 1rem; border-radius: var(--radius);
}
.skip-link:focus { top: 1rem; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-wrap: balance;
}
h1, .h1 { font-size: var(--fs-h1); letter-spacing: -0.035em; line-height: 0.98; }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.12; }
h4, .h4 { font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -0.015em; }
p { text-wrap: pretty; }
.lead { font-size: var(--fs-lg); line-height: 1.55; color: var(--muted); max-width: 40ch; }
.on-dark .lead { color: var(--muted-on-dark); }
.muted { color: var(--muted); }
.accent { color: var(--aqua-deep); }
.on-dark .accent { color: var(--aqua); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-body);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--aqua-deep);
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.on-dark .eyebrow { color: var(--aqua); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.bg-paper { background: var(--paper); }
.bg-ink { background: var(--ink); color: var(--white); }
.on-dark { color: var(--white); }

.section-head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4.5rem); }
.section-head--split {
  grid-template-columns: 1fr; align-items: end;
}
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: 1.2fr 1fr; gap: 3rem; }
  .section-head--split .lead { justify-self: end; }
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--white); --btn-bd: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
  min-height: 52px; padding: 0.85rem 1.5rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd); border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.005em;
  text-decoration: none; line-height: 1.1; cursor: pointer; white-space: nowrap;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform 0.4s var(--ease-out); }
.btn:hover { --btn-bg: var(--ink-3); --btn-bd: var(--ink-3); }
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgba(11, 20, 24, 0.55); }
  .btn--aqua:hover { box-shadow: 0 14px 32px -12px rgba(92, 230, 255, 0.55); }
  .btn:hover svg.i-arrow { transform: translateX(4px); }
}
.btn:active { transform: translateY(0); transition-duration: 0.1s; }

.btn--aqua { --btn-bg: var(--aqua); --btn-fg: var(--ink); --btn-bd: var(--aqua); }
.btn--aqua:hover { --btn-bg: #8aeeff; --btn-bd: #8aeeff; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: rgba(11, 20, 24, 0.28); }
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--white); --btn-bd: var(--ink); }
.btn--ghost-light { --btn-bg: rgba(11, 20, 24, 0.25); --btn-fg: var(--white); --btn-bd: rgba(255, 255, 255, 0.4); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.btn--ghost-light:hover { --btn-bg: var(--white); --btn-fg: var(--ink); --btn-bd: var(--white); }
.btn--sm { min-height: 44px; padding: 0.6rem 1.1rem; font-size: 0.9375rem; }
.btn--lg { min-height: 60px; padding: 1rem 1.9rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 600; text-decoration: none; color: var(--ink); padding-bottom: 3px;
  /* faint base rule + full-strength rule that draws in from the left on hover */
  background:
    linear-gradient(currentColor, currentColor) 0 100% / 0% 1.5px no-repeat,
    linear-gradient(color-mix(in srgb, currentColor 28%, transparent), color-mix(in srgb, currentColor 28%, transparent)) 0 100% / 100% 1.5px no-repeat;
  transition: background-size 0.5s var(--ease-out), color 0.3s;
}
.link-arrow:hover, .link-arrow:focus-visible { background-size: 100% 1.5px, 100% 1.5px; }
.link-arrow svg { width: 16px; height: 16px; transition: transform 0.4s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }
.on-dark .link-arrow { color: var(--white); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* Very small phones: let long button labels wrap instead of overflowing */
@media (max-width: 479px) { .btn { white-space: normal; text-align: center; } }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  transition: background-color 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.site-header.is-scrolled { background: rgba(255, 255, 255, 0.9); border-bottom-color: rgba(11, 20, 24, 0.08); box-shadow: 0 12px 32px -22px rgba(11, 20, 24, 0.4); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: rgba(255, 255, 255, 0.97); } }
/* Header is fixed: pages reserve its height, except photo-hero pages where the photo runs underneath it */
body { padding-top: var(--header-h); }
body.overlay-header { padding-top: 0; }
.header-inner { display: flex; align-items: center; gap: 1.5rem; height: var(--header-h); }
.brand { display: block; flex: none; margin-right: auto; }
.brand img { height: 57px; width: auto; } /* 2026 logo: transparent PNG */
@media (max-width: 599px) { :root { --header-h: 73px; } .brand img { height: 47px; } }

.primary-nav { display: none; }
.primary-nav > ul { display: flex; align-items: center; gap: 0.25rem; }
.nav-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.6rem 0.85rem; border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 550; font-size: 0.98rem;
  text-decoration: none; color: var(--ink); background: none; border: 0; cursor: pointer;
}
/* Text-width underline (no box): solid for the current page, slides in on hover/focus/open */
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.3rem; height: 2px; border-radius: 2px;
  background: var(--aqua-deep); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease);
}
.nav-link:hover::after, .nav-link:focus-visible::after, .nav-link[aria-expanded="true"]::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link:hover { color: var(--aqua-deep); }
.nav-link svg { width: 14px; height: 14px; transition: transform 0.2s; }
.nav-link[aria-expanded="true"] svg { transform: rotate(180deg); }

.header-actions { display: flex; align-items: center; gap: 0.75rem; }
.header-phone {
  display: none; align-items: center; gap: 0.5rem; text-decoration: none;
  font-family: var(--font-display); font-weight: 600; white-space: nowrap;
}
.header-phone svg { width: 18px; height: 18px; color: var(--aqua-deep); }
.header-cta { display: none; }

.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-width: 48px; min-height: 48px; padding: 0 0.9rem;
  background: var(--ink); color: var(--white); border: 0; border-radius: var(--radius); cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
}
.menu-toggle .bars { position: relative; width: 18px; height: 12px; }
.menu-toggle .bars span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform 0.25s, opacity 0.2s; }
.menu-toggle .bars span:nth-child(1) { top: 0; }
.menu-toggle .bars span:nth-child(2) { top: 5px; }
.menu-toggle .bars span:nth-child(3) { top: 10px; }
.menu-toggle[aria-expanded="true"] .bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (min-width: 720px) { .header-cta { display: inline-flex; } }
@media (min-width: 1100px) {
  /* Logo left, menu truly centred, actions right */
  .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .brand { margin-right: 0; justify-self: start; }
  .primary-nav { display: block; justify-self: center; }
  .header-actions { justify-self: end; }
  .menu-toggle { display: none; }
}
@media (min-width: 1240px) { .header-phone { display: inline-flex; } }

/* Mega menu */
.has-mega { position: static; }
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--white); border-top: 1px solid var(--line);
  box-shadow: 0 30px 50px -30px rgba(11, 20, 24, 0.35);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.mega.is-open { opacity: 1; visibility: visible; transform: none; }
.mega-inner { display: grid; grid-template-columns: repeat(3, 1fr) 1.15fr; gap: 2.5rem; padding-block: 2.25rem 2.5rem; }
.mega-group h3 {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 0.9rem;
}
.mega-group ul { display: grid; gap: 0.15rem; }
.mega-group a {
  display: block; padding: 0.55rem 0.75rem; margin-inline: -0.75rem; border-radius: var(--radius);
  text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
}
.mega-group a span { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.875rem; color: var(--muted); margin-top: 0.1rem; }
.mega-group a:hover { background: var(--paper); }
.mega-feature {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 260px; padding: 1.5rem; border-radius: var(--radius); overflow: hidden;
  color: var(--white); text-decoration: none; isolation: isolate;
}
.mega-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.6s var(--ease); }
.mega-feature::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,20,24,0) 30%, rgba(11,20,24,0.85)); }
.mega-feature:hover img { transform: scale(1.04); }
.mega-feature strong { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; }
.mega-feature span { font-size: 0.9rem; color: var(--aqua-soft); margin-top: 0.35rem; display: inline-flex; gap: 0.4rem; align-items: center; }
.mega-feature span svg { width: 14px; height: 14px; }

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
  background: var(--white); overflow-y: auto; overscroll-behavior: contain;
  padding: 1rem var(--gutter) 2rem;
  /* Hidden in place (fades/drops in) rather than parked off-screen to the right:
     an off-canvas fixed panel lets iOS Safari pan the page sideways. */
  opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.mobile-nav.is-open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
.mobile-nav > ul > li { border-bottom: 1px solid var(--line); }
.mobile-nav a.m-link, .mobile-nav button.m-link {
  display: flex; width: 100%; justify-content: space-between; align-items: center;
  min-height: 60px; padding: 0; background: none; border: 0; text-align: left; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.02em; text-decoration: none;
}
.mobile-nav button.m-link svg { width: 20px; height: 20px; transition: transform 0.2s; }
.mobile-nav button.m-link[aria-expanded="true"] svg { transform: rotate(180deg); }
.m-sub { display: none; padding-bottom: 1rem; }
.m-sub.is-open { display: block; }
/* Mobile menu group headings: clearly headings, still compact */
.m-sub h3 {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
  margin: 1.75rem 0 0.5rem; padding-bottom: 0.6rem; border-bottom: 1.5px solid var(--ink);
}
.m-sub h3::before { content: ""; width: 14px; height: 2px; background: var(--aqua-deep); flex: none; }
.m-sub h3:first-child { margin-top: 0.5rem; }
.m-sub a { display: flex; align-items: center; min-height: 44px; text-decoration: none; font-size: 1.05rem; }
.mobile-nav-foot { display: grid; gap: 0.75rem; margin-top: 2rem; }
body.nav-open { overflow: hidden; }
@media (min-width: 1100px) { .mobile-nav { display: none; } }

/* Mobile sticky action bar */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 0.5rem;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  transform: translateY(110%); transition: transform 0.3s var(--ease);
}
.action-bar.is-visible { transform: none; }
.action-bar .btn { min-height: 50px; padding-inline: 0.75rem; }
@media (min-width: 720px) { .action-bar { display: none; } }
@media (max-width: 719px) { body.has-action-bar { padding-bottom: 76px; } }

/* ---------- Hero (home) ----------
   Image-led and fold-aware: header + hero + trust bar fit a typical desktop
   viewport, with the start of the next section still visible.
   .hero-media accepts an <img> now or a <video> later (same rules). */
.hero {
  /* Fill the first screen exactly: viewport minus header minus the trust bar
     (--trust-h is measured by main.js; 72px fallback) so the trust bar sits on the fold. */
  --hero-h: clamp(calc(440px + var(--header-h)), calc(100svh - var(--trust-h, 72px)), calc(1000px + var(--header-h)));
  position: relative; isolation: isolate; color: var(--white); background: var(--ink);
  height: var(--hero-h); display: flex; align-items: center; overflow: hidden;
  padding-top: var(--header-h);
}
/* Parallax (main.js sets --py) on the wrapper; slow cinematic zoom on the image itself */
.hero-media { position: absolute; inset: 0; z-index: -2; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.hero-media > img, .contact-hero-media > img { animation: kenburns 24s ease-in-out infinite alternate; transform-origin: 58% 42%; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.05); } }
.hero-media > img, .hero-media > video {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; display: block;
}
/* Beyond 1440px the text column moves inward with the global container. The
   image (or future video) widens proportionally, anchored left, so the subject
   shifts right with it and the copy stays over sky, not over the work platform. */
@media (min-width: 1441px) {
  .hero-media > img, .hero-media > video { width: calc(100% + min((100vw - 1440px) * 0.6, 360px)); max-width: none; }
}
/* Minimal scrim: only behind the text, fading out well before the technician */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 22, 34, 0.62) 0%, rgba(8, 22, 34, 0.38) 30%, rgba(8, 22, 34, 0) 55%);
}
.hero-inner { width: 100%; }
/* Next section starts close enough to peek above the fold */
.trust-bar + .section { padding-top: clamp(3rem, 2rem + 3vw, 5rem); }
.hero-copy { max-width: 600px; }
.hero h1 {
  font-size: clamp(2.6rem, 1.2rem + 3.3vw, 4.5rem); letter-spacing: -0.035em; line-height: 0.98;
  margin-top: 1.1rem; max-width: 10.5ch; text-shadow: 0 2px 24px rgba(8, 22, 34, 0.25);
}
.hero .eyebrow { color: var(--white); text-shadow: 0 1px 12px rgba(8, 22, 34, 0.4); }
.hero .eyebrow::before { background: var(--aqua); }
.hero-sub {
  margin-top: 1.25rem; max-width: 31ch; font-size: var(--fs-lg); line-height: 1.5;
  color: rgba(255, 255, 255, 0.94); text-shadow: 0 1px 14px rgba(8, 22, 34, 0.45);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
/* Set via the button variables (not background directly) so the hover state still applies */
.hero-ctas .btn--ghost-light { --btn-bg: rgba(8, 22, 34, 0.35); }
.hero-ctas .btn--ghost-light:hover, .hero-ctas .btn--ghost-light:focus-visible { --btn-bg: var(--white); --btn-fg: var(--ink); --btn-bd: var(--white); }

/* Trust bar directly under the hero (start of the next section, above the fold) */
.trust-bar { background: var(--white); border-bottom: 1px solid var(--line); }
.trust-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; padding-block: 0.9rem; }
.trust-points { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; font-size: 0.9rem; color: var(--muted); }
.trust-points li { display: inline-flex; align-items: center; gap: 0.55rem; }
.trust-points strong { color: var(--ink); font-weight: 600; }
.trust-points svg { width: 20px; height: 20px; color: var(--aqua-deep); flex: none; }

/* Mobile: deliberate stacked composition. Image band on top (cropped to the
   technician), headline and CTAs on ink beneath, all within the first screen. */
@media (max-width: 999px) {
  .hero { height: auto; display: block; background: var(--ink); padding-top: 0; }
  .hero-media { position: relative; inset: auto; height: calc(clamp(220px, 38svh, 440px) + var(--header-h)); z-index: 0; }
  .hero-media > img, .hero-media > video { object-position: 64% 30%; }
  .hero::after { display: none; }
  .hero-media::after { /* soft blend from photo into the ink panel */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
    background: linear-gradient(0deg, var(--ink), rgba(11, 20, 24, 0)); pointer-events: none;
  }
  .hero-inner { position: relative; margin-top: -2.75rem; padding-bottom: 1.75rem; }
  .hero h1 { font-size: clamp(2.3rem, 1.4rem + 4.6vw, 2.9rem); max-width: none; text-shadow: none; }
  .hero .eyebrow, .hero-sub { text-shadow: none; }
  .hero-sub { font-size: 1rem; margin-top: 0.9rem; color: rgba(255, 255, 255, 0.82); }
  .hero-ctas { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0.5rem; margin-top: 1.4rem; }
  .hero-ctas .btn { padding-inline: 0.8rem; min-height: 54px; font-size: 0.975rem; }
  .hero .eyebrow { font-size: 0.72rem; letter-spacing: 0.1em; }
  .hero .eyebrow::before { width: 18px; }
}
@media (max-width: 719px) {
  .hide-sm { display: none; }
  .trust-inner { padding-block: 1rem; }
  .trust-points { display: grid; gap: 0.5rem; }
}
@media (min-width: 720px) and (max-width: 999px) {
  .hero-copy { max-width: 640px; }
  .hero h1 { font-size: 3.5rem; }
  .hero-sub { font-size: var(--fs-lg); }
  .hero-ctas { display: flex; }
}
@media (max-height: 560px) and (min-width: 720px) { .hero { --hero-h: 460px; } }

/* ---------- Association strip ---------- */
.assoc { border-bottom: 1px solid var(--line); }
.assoc-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; padding-block: 1.75rem; }
.assoc p { font-size: var(--fs-sm); color: var(--muted); max-width: 34ch; }
.assoc ul { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem 3rem; }
.assoc img { height: 72px; width: auto; filter: grayscale(1); opacity: 0.78; transition: filter 0.3s, opacity 0.3s; }
.assoc img:hover { filter: none; opacity: 1; }

/* ---------- Services index ---------- */
.svc-layout { display: grid; gap: 3rem; }
@media (min-width: 1000px) { .svc-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 4rem; align-items: start; } }
.svc-group + .svc-group { margin-top: 3rem; }
.svc-group-title {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 0.9rem; border-bottom: 1.5px solid var(--ink);
}
.svc-list li { border-bottom: 1px solid var(--line); }
.svc-item {
  display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: 1rem;
  padding: 1.35rem 0; text-decoration: none; position: relative;
}
.svc-num { font-family: var(--font-display); font-size: 0.875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.svc-name { font-family: var(--font-display); font-weight: 650; font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); letter-spacing: -0.025em; line-height: 1.1; transition: color 0.2s; }
.svc-desc { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: 0.45rem; max-width: 52ch; line-height: 1.5; }
.svc-go {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line);
  display: grid; place-items: center; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.25s var(--ease);
}
.svc-go svg { width: 18px; height: 18px; }
.svc-item:hover .svc-go, .svc-item:focus-visible .svc-go, .svc-item.is-active .svc-go { background: var(--ink); border-color: var(--ink); color: var(--white); transform: rotate(-45deg); }
.svc-item:hover .svc-name, .svc-item.is-active .svc-name { color: var(--aqua-deep); }
.svc-thumb { display: none; }
@media (max-width: 999px) {
  .svc-item { grid-template-columns: 84px 1fr; }
  .svc-num, .svc-go { display: none; }
  .svc-thumb { display: block; width: 84px; height: 96px; object-fit: cover; border-radius: var(--radius); }
}
.svc-stage { max-width: 480px; justify-self: end; width: 100%; position: sticky; top: calc(var(--header-h) + 2rem); display: none; }
@media (min-width: 1000px) { .svc-stage { display: block; } }
.svc-stage-frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); }
.svc-stage-item {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; visibility: hidden; transform: scale(1.04);
  transition: opacity 0.5s var(--ease), transform 0.9s var(--ease), visibility 0s linear 0.5s;
}
.svc-stage-item.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.svc-stage-frame .svc-ba { position: absolute; inset: 0; aspect-ratio: auto; max-width: none; max-height: none; margin: 0; border-radius: 0; box-shadow: none; background: var(--paper-2); }
.svc-stage-caption { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; font-size: var(--fs-sm); color: var(--muted); }
.svc-stage-caption strong { color: var(--ink); font-family: var(--font-display); }

/* ---------- Before / after ---------- */
.results { overflow: hidden; }
.ba-shell { display: grid; gap: 2.5rem; }
@media (min-width: 1000px) { .ba-shell { grid-template-columns: 0.8fr 1.2fr; gap: 4.5rem; align-items: center; } }
.ba-tabs { display: grid; gap: 0.25rem; margin-top: 2.25rem; }
.ba-tab {
  display: grid; grid-template-columns: 2rem 1fr; gap: 0.75rem; align-items: baseline; text-align: left;
  padding: 1rem 0; background: none; border: 0; border-top: 1px solid var(--line-dark); color: var(--muted-on-dark); cursor: pointer;
}
.ba-tab:last-child { border-bottom: 1px solid var(--line-dark); }
.ba-tab .n { font-family: var(--font-display); font-size: 0.85rem; }
.ba-tab strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; color: inherit; display: block; }
.ba-tab small { display: block; font-size: 0.875rem; margin-top: 0.2rem; }
.ba-tab[aria-selected="true"] { color: var(--white); }
.ba-tab[aria-selected="true"] .n { color: var(--aqua); }

.ba {
  position: relative; aspect-ratio: 4 / 5; max-height: 78vh; margin-inline: auto; width: 100%; max-width: 560px;
  overflow: hidden; border-radius: var(--radius); background: var(--ink-2); user-select: none; touch-action: pan-y;
  --pos: 50%;
}
@media (min-width: 1000px) { .ba { aspect-ratio: 5 / 6; } }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba .ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-label {
  position: absolute; top: 1rem; z-index: 2; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.4rem 0.7rem; border-radius: 2px; pointer-events: none;
}
.ba-label--before { left: 1rem; background: rgba(11,20,24,0.8); color: var(--white); }
.ba-label--after { right: 1rem; background: var(--aqua); color: var(--ink); }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; z-index: 3;
  background: var(--white); pointer-events: none;
}
.ba-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1418' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 24px no-repeat;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.ba-range {
  position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.ba-range:focus-visible + .ba-handle::after { outline: 3px solid var(--aqua); outline-offset: 3px; }
.ba-hint { text-align: center; font-size: 0.875rem; color: var(--muted-on-dark); margin-top: 1rem; }

.diptychs { display: grid; gap: 1.5rem; margin-top: clamp(3.5rem, 6vw, 6rem); }
@media (min-width: 760px) { .diptychs { grid-template-columns: repeat(3, 1fr); } }
.diptych .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: var(--radius); overflow: hidden; }
.diptych figure { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--ink-2); }
.diptych img { width: 100%; height: 100%; object-fit: cover; }
.diptych figcaption {
  position: absolute; left: 0.5rem; top: 0.5rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.25rem 0.5rem; border-radius: 2px; background: rgba(11,20,24,0.8); color: var(--white);
}
.diptych figure + figure figcaption { background: var(--aqua); color: var(--ink); }
.diptych h3 { font-size: 1.1rem; margin-top: 1rem; letter-spacing: -0.01em; }
.diptych p { font-size: 0.9rem; color: var(--muted-on-dark); margin-top: 0.25rem; }

/* ---------- Why / reasons ---------- */
.why { display: grid; gap: 3rem; }
@media (min-width: 1000px) { .why { grid-template-columns: 0.95fr 1.05fr; gap: 5rem; align-items: start; } }
.why-media { position: relative; max-width: 520px; }
.why-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
@media (min-width: 1000px) { .why-media { position: sticky; top: calc(var(--header-h) + 2rem); } }
.guarantee {
  position: relative; margin: -4.5rem 1.25rem 0; padding: 1.75rem; background: var(--ink); color: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 600px) { .guarantee { margin: -5.5rem 2rem 0 -1.5rem; max-width: 420px; } }
.guarantee .seal { display: flex; align-items: center; gap: 0.75rem; color: var(--aqua); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.guarantee .seal svg { width: 22px; height: 22px; }
.guarantee h3 { font-size: 1.5rem; margin-top: 0.75rem; }
.guarantee p { margin-top: 0.6rem; color: var(--muted-on-dark); font-size: 0.975rem; }

.reasons { display: grid; gap: 0; margin-top: 2.5rem; counter-reset: r; }
@media (min-width: 640px) { .reasons { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
.reason { padding: 1.75rem 0; border-top: 1px solid var(--line); }
.reason-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); color: var(--aqua-deep); margin-bottom: 1rem; }
.reason-icon svg { width: 22px; height: 22px; }
.reason h3 { font-size: 1.2rem; letter-spacing: -0.015em; }
.reason p { margin-top: 0.5rem; color: var(--muted); font-size: 0.975rem; }

/* ---------- Process ---------- */
.steps { display: grid; gap: 0; counter-reset: step; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding: 2rem 0; border-top: 1.5px solid var(--ink); }
@media (min-width: 860px) { .step { padding: 2rem 2.5rem 0 0; } }
.step-num { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--aqua-deep); letter-spacing: 0.08em; }
.step h3 { font-size: var(--fs-h4); margin-top: 1.25rem; }
.step p { margin-top: 0.6rem; color: var(--muted); }

/* ---------- Reviews ---------- */
.reviews { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .reviews { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.review {
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  padding: clamp(1.75rem, 3vw, 2.75rem); background: var(--white); border-radius: var(--radius); border: 1px solid var(--line);
}
.review .stars { display: flex; gap: 3px; color: var(--ink); }
.review .stars svg { width: 18px; height: 18px; }
.review blockquote { font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 0.7vw, 1.55rem); line-height: 1.35; letter-spacing: -0.015em; font-weight: 500; margin-top: 1.25rem; }
.review figcaption { display: flex; align-items: center; gap: 0.85rem; font-size: var(--fs-sm); }
.review .avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: var(--aqua); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; }
.review figcaption strong { display: block; font-family: var(--font-display); }
.review figcaption span { color: var(--muted); }

/* ---------- Areas ---------- */
.areas { display: grid; gap: 3rem; }
@media (min-width: 1000px) { .areas { grid-template-columns: 0.9fr 1.1fr; gap: 5rem; align-items: start; } }
/* Regions: five equal columns so no area outweighs another */
.regions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 clamp(1rem, 2vw, 2rem); }
.region { padding: 1.5rem 0 1.75rem; border-top: 1px solid var(--line-dark); }
.region h3 {
  display: flex; align-items: baseline; gap: 0.6rem;
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 650; letter-spacing: -0.02em; color: var(--white);
}
.region h3 span { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; color: var(--aqua); }
.region ul { margin-top: 1rem; display: grid; gap: 0.45rem; }
.region li { font-size: 0.975rem; color: var(--muted-on-dark); }
/* Small screens: each region becomes a heading + compact suburb line */
@media (max-width: 759px) {
  .regions { grid-template-columns: 1fr; }
  .region { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.75rem; padding: 1.1rem 0; }
  .region h3 { font-size: 1.15rem; }
  .region ul { margin-top: 0.15rem; display: block; }
  /* inline-block items keep each suburb on one line but still wrap between suburbs */
  .region li { display: inline-block; font-size: 0.925rem; line-height: 1.6; white-space: nowrap; margin-right: 0.3em; }
  .region li:not(:last-child)::after { content: ","; }
}
@media (min-width: 760px) and (max-width: 999px) { .region li { font-size: 0.9rem; } .region h3 { font-size: 1.15rem; } }
.areas-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem;
  margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line-dark);
}
.areas-foot p { font-size: var(--fs-lg); color: var(--white); max-width: 44ch; }

/* Compact region list (contact + service areas pages) */
.region-lines { display: grid; gap: 0; margin: 0; }
.region-lines > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: 0.9rem 0; border-top: 1px solid var(--line); }
.region-lines > div:last-child { border-bottom: 1px solid var(--line); }
.region-lines dt { font-family: var(--font-display); font-weight: 650; }
.region-lines dd { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
@media (max-width: 479px) { .region-lines > div { grid-template-columns: 1fr; gap: 0.25rem; } }

/* ---------- FAQ accordion ---------- */
.faq-layout { display: grid; gap: 2.5rem; }
@media (min-width: 1000px) { .faq-layout { grid-template-columns: 0.8fr 1.2fr; gap: 5rem; } }
.faq { border-top: 1.5px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.35rem 0; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line); }
.faq summary .pm::before, .faq summary .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); transition: transform 0.25s var(--ease); }
.faq summary .pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] summary .pm::after { transform: translate(-50%, -50%) rotate(0); }
.faq details > div { padding: 0 3rem 1.5rem 0; color: var(--muted); }

/* ---------- CTA band ---------- */
.cta-band { position: relative; isolation: isolate; color: var(--white); overflow: hidden; background: var(--ink); }
.cta-band::before { content: ""; position: absolute; z-index: -1; left: -15vw; bottom: -30vw; width: 55vw; height: 55vw; border-radius: 50%; border: 1.5px solid rgba(92,230,255,0.14); box-shadow: 0 0 0 4vw rgba(92,230,255,0.03); }
.cta-band-inner { display: grid; gap: 2.5rem; padding-block: clamp(5rem, 4rem + 6vw, 9rem); }
@media (min-width: 1000px) { .cta-band-inner { grid-template-columns: 1.3fr 0.7fr; align-items: end; } }
.cta-band h2 { max-width: 15ch; }
.cta-band h2 span { color: var(--aqua); }
.cta-contact { display: grid; gap: 1rem; }
.cta-contact a.big { font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); font-weight: 650; letter-spacing: -0.02em; text-decoration: none; }
.cta-contact a.big:hover { color: var(--aqua); }
.cta-contact small { color: var(--muted-on-dark); display: block; font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position: relative; isolation: isolate; color: var(--white); background: var(--ink); overflow: hidden; }
.page-hero-inner { display: grid; gap: 2.5rem; align-items: center; padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
@media (min-width: 1000px) { .page-hero-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 4rem; } }
.page-hero-media { overflow: hidden; border-radius: var(--radius); aspect-ratio: 16 / 10; max-width: 440px; width: 100%; justify-self: end; background: var(--ink-2); }
@media (min-width: 1000px) { .page-hero-media { aspect-ratio: 4 / 5; max-height: 560px; } }
@media (max-width: 999px) { .page-hero-media { justify-self: stretch; max-width: none; } }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero h1 { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.5rem); max-width: 16ch; margin-top: 1.25rem; }
.page-hero .lead { color: rgba(255,255,255,0.82); margin-top: 1.25rem; max-width: 52ch; }
.page-hero--plain { background: var(--paper); color: var(--ink); }
.page-hero--plain::after { display: none; }
.page-hero--plain .lead { color: var(--muted); }

.breadcrumbs { font-size: var(--fs-sm); color: rgba(255,255,255,0.7); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.4rem; opacity: 0.6; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.page-hero--plain .breadcrumbs { color: var(--muted); }

/* ---------- Related services ---------- */
.related { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 640px) { .related { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .related { grid-template-columns: repeat(4, 1fr); } }
.related a { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem; background: var(--white); text-decoration: none; min-height: 150px; transition: background 0.2s; }
.related a:hover { background: var(--paper); }
.related strong { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -0.01em; }
.related span { font-size: 0.9rem; color: var(--muted); }
.related svg { width: 18px; height: 18px; margin-top: auto; color: var(--aqua-deep); }

/* Service tiles (services overview page) */
.tiles { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 5; padding: 1.5rem; border-radius: var(--radius); overflow: hidden; isolation: isolate; color: var(--white); text-decoration: none; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.8s var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,20,24,0) 35%, rgba(11,20,24,0.9)); }
.tile:hover img { transform: scale(1.05); }
.tile strong { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.1; }
.tile span { font-size: 0.925rem; color: rgba(255,255,255,0.8); margin-top: 0.5rem; }

/* Gallery grid (Our Work placeholder) */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }

/* ---------- Contact page ---------- */
.contact-hero { background: var(--ink); color: var(--white); position: relative; overflow: hidden; isolation: isolate; }
/* Photo hero: image fills the section, light scrim only behind the text */
.contact-hero-media { position: absolute; inset: 0; z-index: -2; }
.contact-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 35%; }
.contact-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 22, 34, 0.7) 0%, rgba(8, 22, 34, 0.45) 35%, rgba(8, 22, 34, 0) 62%);
}
.contact-hero h1, .contact-hero .lead, .contact-hero .contact-quick, .contact-hero .breadcrumbs { text-shadow: 0 1px 14px rgba(8, 22, 34, 0.35); }
@media (max-width: 759px) {
  .contact-hero-media img { object-position: 72% 30%; }
  .contact-hero::after { background: linear-gradient(180deg, rgba(8, 22, 34, 0.55) 0%, rgba(8, 22, 34, 0.75) 100%); }
}
.contact-hero-inner { padding-block: clamp(3.5rem, 2.5rem + 5vw, 6.5rem) clamp(9rem, 8rem + 5vw, 12rem); }
.contact-hero h1 { font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); max-width: 14ch; margin-top: 1.25rem; }
.contact-hero .lead { color: rgba(255,255,255,0.9); margin-top: 1.25rem; max-width: 40ch; }
.contact-quick { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin-top: 2rem; }
.contact-quick a { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; text-decoration: none; min-height: 44px; }
.contact-quick a:hover { color: var(--aqua); }
.contact-quick svg { width: 20px; height: 20px; color: var(--aqua); }

.contact-main { margin-top: calc(-1 * clamp(7rem, 6rem + 4vw, 9rem)); position: relative; z-index: 2; padding-bottom: var(--section); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr); gap: 3rem; align-items: start; } }

.form-card { background: var(--white); border-radius: var(--radius); box-shadow: 0 40px 80px -40px rgba(11, 20, 24, 0.45); border: 1px solid var(--line); padding: clamp(1.5rem, 1rem + 3vw, 3.25rem); }
.form-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; padding-bottom: 1.5rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--line); }
.form-card-head h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.form-card-head p { font-size: var(--fs-sm); color: var(--muted); }

.form-grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.field { display: grid; gap: 0.45rem; align-content: start; }
.field label, .field legend { font-family: var(--font-display); font-weight: 600; font-size: 0.975rem; padding: 0; }
.field .opt { font-family: var(--font-body); font-weight: 400; color: var(--muted); font-size: 0.875rem; }
.field .req { color: var(--aqua-deep); }
.input {
  width: 100%; min-height: 54px; padding: 0.8rem 1rem; font-size: 1rem;
  background: var(--paper); border: 1.5px solid transparent; border-radius: var(--radius);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
textarea.input { min-height: 120px; resize: vertical; line-height: 1.5; }
.input::placeholder { color: #8a959a; }
.input:hover { border-color: var(--line); }
.input:focus { outline: none; background: var(--white); border-color: var(--ink); box-shadow: 0 0 0 4px rgba(7, 119, 143, 0.15); }
.field.is-invalid .input { border-color: var(--error); background: #fff6f5; }
.field-error { display: none; font-size: 0.875rem; color: var(--error); }
.field.is-invalid .field-error { display: block; }
.hint { font-size: 0.875rem; color: var(--muted); }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.3rem; }
.chip { position: relative; max-width: 100%; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0.55rem 0.95rem; max-width: 100%; line-height: 1.3;
  border: 1.5px solid var(--line); border-radius: 999px; font-size: 0.925rem; background: var(--white); cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chip span::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--steel); flex: none; transition: all 0.15s; }
.chip input[type="checkbox"] + span::before { border-radius: 3px; }
.chip input:checked + span { background: var(--ink); color: var(--white); border-color: var(--ink); }
.chip input:checked + span::before { background: var(--aqua); border-color: var(--aqua); box-shadow: inset 0 0 0 2px var(--ink); }
.chip input:focus-visible + span { outline: 3px solid var(--aqua-deep); outline-offset: 2px; }
.chip span:hover { border-color: var(--ink); }

.form-foot { display: grid; gap: 1rem; margin-top: 1.75rem; }
.form-foot .privacy { font-size: 0.875rem; color: var(--muted); }
.form-foot .privacy a { color: var(--aqua-deep); }
.form-notice {
  display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.85rem; color: #6b4e00;
  background: #fff7e0; border: 1px solid #f0d890; padding: 0.7rem 0.9rem; border-radius: var(--radius);
}
.form-notice svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.form-status { display: none; padding: 1.5rem; border-radius: var(--radius); }
.form-status.is-visible { display: block; }
.form-status--ok { background: #e9f7f0; border: 1px solid #b7e2cb; }
.form-status--ok h3 { font-size: 1.35rem; color: var(--success); }
.form-status p { margin-top: 0.5rem; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.btn[disabled] { opacity: 0.6; cursor: progress; }

.side-stack { display: grid; gap: 1.25rem; }
.side-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 2.5vw, 2rem); }
@media (min-width: 1000px) { .contact-main .side-card:first-child { box-shadow: 0 40px 80px -40px rgba(11, 20, 24, 0.35); } }
.side-card h2, .side-card h3 { font-size: 1.3rem; letter-spacing: -0.015em; }
.side-card--ink { background: var(--ink); color: var(--white); border-color: var(--ink); }
.contact-lines { display: grid; gap: 0; margin-top: 1rem; }
.contact-lines li { border-top: 1px solid var(--line); }
.contact-lines a, .contact-lines div { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; text-decoration: none; }
.contact-lines .ic { width: 44px; height: 44px; border-radius: 50%; background: var(--paper); color: var(--aqua-deep); display: grid; place-items: center; flex: none; }
.contact-lines .ic svg { width: 20px; height: 20px; }
.contact-lines small { display: block; font-size: 0.8rem; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.contact-lines strong { font-family: var(--font-display); font-size: 1.15rem; }
.contact-lines a:hover strong { color: var(--aqua-deep); }

.next-steps { display: grid; gap: 0; margin-top: 1.25rem; counter-reset: ns; }
.next-steps li { position: relative; padding: 0 0 1.4rem 3rem; }
.next-steps li:last-child { padding-bottom: 0; }
.next-steps li::before {
  counter-increment: ns; content: counter(ns);
  position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
  background: var(--aqua); color: var(--ink);
}
.next-steps li::after { content: ""; position: absolute; left: 15px; top: 36px; bottom: 4px; width: 2px; background: var(--line-dark); }
.next-steps li:last-child::after { display: none; }
.next-steps strong { display: block; font-family: var(--font-display); font-size: 1.05rem; }
.next-steps p { color: var(--muted-on-dark); font-size: 0.935rem; margin-top: 0.2rem; }

.check-list { display: grid; gap: 0.7rem; margin-top: 1rem; }
.check-list li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.975rem; }
.check-list svg { width: 20px; height: 20px; flex: none; color: var(--aqua-deep); margin-top: 2px; }
.area-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.area-tags li { font-size: 0.85rem; padding: 0.3rem 0.65rem; background: var(--paper); border-radius: 999px; }
.bg-paper .area-tags li { background: var(--white); border: 1px solid var(--line); }

/* ---------- Legal ---------- */
.legal { max-width: 780px; }
.legal h1, .legal h2 { font-size: 1.6rem; margin: 2rem 0 0.75rem; }
.legal h1:first-child, .legal > div > h1:first-child { margin-top: 0; }
.legal h3 { font-size: 1.2rem; margin: 1.5rem 0 0.5rem; }
.legal p, .legal li { color: #2c3a40; margin-bottom: 0.85rem; }
.legal ul { padding-left: 1.25rem; }
.legal-fallback { padding: 1.25rem; background: var(--paper); border-radius: var(--radius); font-size: var(--fs-sm); }

/* ---------- Footer ---------- */
.site-footer { background: var(--paper); color: var(--ink); border-top: 1px solid var(--line); }
.footer-top { display: grid; gap: 3rem; padding-block: clamp(4rem, 3rem + 4vw, 6rem) 3rem; }
@media (min-width: 480px) and (max-width: 899px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (min-width: 900px) { .footer-top { grid-template-columns: 1.3fr repeat(3, 1fr); gap: 2.5rem; } }
.footer-brand img { height: 61px; width: auto; }
.footer-brand p { margin-top: 1.25rem; color: var(--muted); font-size: 0.975rem; max-width: 36ch; }
.footer-brand .btn { margin-top: 1.5rem; }
.footer-col h2 { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.footer-col ul { display: grid; gap: 0.1rem; }
.footer-col a { display: inline-flex; min-height: 36px; align-items: center; text-decoration: none; font-size: 0.975rem; }
.footer-col a:hover { color: var(--aqua-deep); text-decoration: underline; text-underline-offset: 3px; }
.footer-contact a { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.footer-contact p { color: var(--muted); font-size: 0.95rem; margin-top: 0.75rem; }
/* Association logos (full colour, optically balanced heights) */
.footer-assoc { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 3rem; padding-block: 2rem; border-top: 1px solid var(--line); }
.footer-assoc p { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.footer-assoc ul { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 3rem; }
.footer-assoc img { width: auto; }
.footer-assoc .logo-nocowboys { height: 38px; }
.footer-assoc .logo-ecia { height: 72px; }
.footer-assoc .logo-sitesafe { height: 80px; }
@media (max-width: 599px) { .footer-assoc ul { gap: 1.25rem 2rem; } .footer-assoc .logo-nocowboys { height: 30px; } .footer-assoc .logo-ecia { height: 58px; } .footer-assoc .logo-sitesafe { height: 64px; } }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; padding-block: 1.75rem; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--muted); }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- 404 ---------- */
.nf { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.nf .big { font-family: var(--font-display); font-size: clamp(5rem, 3rem + 10vw, 11rem); font-weight: 700; letter-spacing: -0.06em; line-height: 1; color: var(--aqua-deep); }


/* ==========================================================================
   Inner pages (service, about, FAQs, areas, work, reviews)
   ========================================================================== */
/* Text + image split used for "What we do", "Who we are", guarantee */
.what-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
@media (min-width: 1000px) { .what-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 5rem; align-items: start; } }
.what-media { margin: 0; }
.what-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
@media (min-width: 1000px) { .what-media { position: sticky; top: calc(var(--header-h) + 2rem); } }
@media (max-width: 999px) { .what-media { max-width: 560px; } .what-media img { aspect-ratio: 4 / 3; } }

/* Numbered sub-services */
.subs { display: grid; gap: 0; margin-top: 2.5rem; border-top: 1.5px solid var(--ink); }
@media (min-width: 640px) { .subs { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
.sub { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.sub-num { font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; color: var(--aqua-deep); letter-spacing: 0.08em; }
.sub h3 { font-size: 1.2rem; letter-spacing: -0.015em; margin-top: 0.6rem; }
.sub p { margin-top: 0.5rem; color: var(--muted); font-size: 0.975rem; }

/* Key facts band */
.facts-band { padding-block: clamp(2.5rem, 2rem + 2vw, 3.75rem); }
.facts { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }
.facts li { display: grid; gap: 0.4rem; padding-top: 1.25rem; border-top: 1.5px solid var(--ink); }
.facts strong { font-family: var(--font-display); font-weight: 650; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); }
.facts span { color: var(--muted); font-size: 0.975rem; max-width: 32ch; }

/* Problems we solve */
.problems { display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .problems { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.problem { padding: clamp(1.5rem, 2.5vw, 2.25rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem; }
.problem h3 { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.3; letter-spacing: -0.015em; }
.problem h3::before { content: "“"; color: var(--aqua-deep); margin-right: 0.1em; }
.problem h3::after { content: "”"; color: var(--aqua-deep); }
.problem p { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--muted); font-size: 0.975rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.problem p svg { width: 20px; height: 20px; flex: none; color: var(--aqua-deep); margin-top: 2px; }

/* Service result block */
.result-layout { display: grid; gap: 2.5rem; }
@media (min-width: 1000px) { .result-layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4.5rem; align-items: center; } }
.ba--page { max-width: 560px; }
.diptych--lg { max-width: 600px; margin-inline: auto; }
.diptych--lg figure { aspect-ratio: 3 / 4; }
.result-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.result-gallery figure { margin: 0; }
.result-gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }
.result-gallery figcaption { font-size: 0.85rem; color: var(--muted-on-dark); margin-top: 0.5rem; }

/* About */
.who-list { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin-top: 2rem; }
.who-list li { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 600; }
.who-list svg { width: 18px; height: 18px; color: var(--aqua-deep); }
.value-grid { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .value-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .value-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.value { padding: 1.75rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.value .reason-icon { background: var(--paper); }
.value h3 { font-size: 1.2rem; letter-spacing: -0.015em; }
.value p { margin-top: 0.5rem; color: var(--muted); font-size: 0.975rem; }
.crew-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
@media (min-width: 900px) { .crew-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.crew-grid figure { margin: 0; }
.crew-grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }

/* FAQs page */
.faq-page { display: grid; gap: 2.5rem; }
@media (min-width: 1000px) { .faq-page { grid-template-columns: 240px minmax(0, 1fr); gap: 5rem; align-items: start; } }
.faq-nav-title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.75rem; }
.faq-nav ul { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.faq-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0.4rem 0.85rem; border: 1.5px solid var(--line); border-radius: 999px; text-decoration: none; font-size: 0.925rem; }
.faq-nav a:hover { border-color: var(--ink); }
@media (min-width: 1000px) {
  .faq-nav { position: sticky; top: calc(var(--header-h) + 2rem); }
  .faq-nav ul { display: grid; gap: 0.1rem; }
  .faq-nav a { border: 0; border-radius: var(--radius); padding: 0.45rem 0.6rem; margin-inline: -0.6rem; min-height: 36px; }
  .faq-nav a:hover { background: var(--paper); color: var(--aqua-deep); }
}
.faq-groups { display: grid; gap: 3.5rem; }
.faq-group { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.faq-group-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1.5rem; margin-bottom: 1.25rem; }
.faq-group-head .link-arrow { font-size: 0.95rem; }
.faq-more { padding: 2rem; background: var(--paper); border-radius: var(--radius); }

/* Service areas: all-services list */
@media (min-width: 1000px) { .related--all { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Light variants (used where a section would otherwise sit dark-on-dark under the page hero) */
.results--light .ba-tab { color: var(--muted); border-color: var(--line); }
.results--light .ba-tab:last-child { border-bottom-color: var(--line); }
.results--light .ba-tab[aria-selected="true"] { color: var(--ink); }
.results--light .ba-tab[aria-selected="true"] .n { color: var(--aqua-deep); }
.results--light .ba-hint, .results--light .diptych p { color: var(--muted); }
.results--light .ba { background: var(--paper-2); }
@media (min-width: 760px) { .diptychs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }
.areas--light .region { border-top-color: var(--line); }
.areas--light .region h3 { color: var(--ink); }
.areas--light .region h3 span { color: var(--aqua-deep); }
.areas--light .region li { color: var(--muted); }
.areas--light .areas-foot { border-top-color: var(--line); }
.areas--light .areas-foot p { color: var(--ink); }

/* Our work gallery groups */
.gal-group + .gal-group { margin-top: 3.5rem; }
.gal-title { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding-bottom: 0.75rem; margin-bottom: 1.25rem; border-bottom: 1.5px solid var(--ink); }
.gallery figure { margin: 0; }


/* ==========================================================================
   WashNZ premium layer: glass, depth, cinematic imagery and restrained motion.
   Appended after styles.css at build time (src/build.mjs).
   Animates transform/opacity only; switched off for prefers-reduced-motion.
   ========================================================================== */

/* ---------- Glass panel (reusable) ---------- */
.glass {
  background: var(--glass-dark);
  -webkit-backdrop-filter: saturate(1.4) blur(var(--glass-blur)); backdrop-filter: saturate(1.4) blur(var(--glass-blur));
  border: 1px solid var(--glass-border); border-radius: 10px;
  box-shadow: 0 24px 48px -28px rgba(11, 20, 24, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--white);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: rgba(11, 20, 24, 0.82); } }

/* ---------- Staged entrance for hero copy (home, contact, inner pages) ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.hero-copy > *, .page-hero-copy > *, .contact-hero-inner > * { animation: rise 0.85s var(--ease-out) both; }
.hero-copy > :nth-child(1), .page-hero-copy > :nth-child(1), .contact-hero-inner > :nth-child(1) { animation-delay: 0.05s; }
.hero-copy > :nth-child(2), .page-hero-copy > :nth-child(2), .contact-hero-inner > :nth-child(2) { animation-delay: 0.18s; }
.hero-copy > :nth-child(3), .page-hero-copy > :nth-child(3), .contact-hero-inner > :nth-child(3) { animation-delay: 0.31s; }
.hero-copy > :nth-child(4), .page-hero-copy > :nth-child(4), .contact-hero-inner > :nth-child(4) { animation-delay: 0.44s; }
.hero-copy > :nth-child(5), .page-hero-copy > :nth-child(5), .contact-hero-inner > :nth-child(5) { animation-delay: 0.57s; }
.page-hero-media { animation: rise 1.1s var(--ease-out) 0.25s both; }

/* Contact hero: photo runs under the fixed header */
.contact-hero-inner { padding-top: calc(var(--header-h) + clamp(3.5rem, 2.5rem + 5vw, 6.5rem)); }
.contact-hero-media { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* ---------- Image treatment ---------- */
.what-media img, .why-media img, .page-hero-media, .svc-stage-frame, .ba, .diptych .pair, .tile,
.gallery img, .crew-grid img, .result-gallery img, .mega-feature { border-radius: var(--radius-img); }
.what-media img, .why-media img, .page-hero-media, .svc-stage-frame { box-shadow: var(--shadow-img); }
.gallery figure, .crew-grid figure, .result-gallery figure { overflow: hidden; border-radius: var(--radius-img); }
.gallery img, .crew-grid img, .result-gallery img, .diptych img { transition: transform 0.9s var(--ease-out); }
@media (hover: hover) {
  .gallery figure:hover img, .crew-grid figure:hover img, .result-gallery figure:hover img, .diptych:hover img { transform: scale(1.04); }
}

/* ---------- Service tiles & cards ---------- */
.tile { transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out); }
.tile img { transition: transform 0.9s var(--ease-out); }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 20, 24, 0) 20%, rgba(11, 20, 24, 0.55)); opacity: 0; transition: opacity 0.55s var(--ease-out); }
@media (hover: hover) {
  .tile:hover { transform: translateY(-3px); box-shadow: 0 30px 50px -30px rgba(11, 20, 24, 0.6); }
  .tile:hover img { transform: scale(1.04); }
  .tile:hover::before { opacity: 1; }
}
.related a strong { transition: color 0.35s var(--ease); }
.related a svg { transition: transform 0.45s var(--ease-out); }
@media (hover: hover) { .related a:hover strong { color: var(--aqua-deep); } .related a:hover svg { transform: translateX(4px); } }
.svc-item .svc-name { transition: color 0.35s var(--ease), transform 0.5s var(--ease-out); }
@media (hover: hover) { .svc-item:hover .svc-name { transform: translateX(4px); } }
.mega-feature img { transition: transform 0.9s var(--ease-out); }

/* ---------- Before / after: the main proof point ---------- */
@property --pos { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.ba { box-shadow: var(--shadow-img); transition: --pos 0.5s var(--ease-out); }
.ba.is-dragging { transition: none; }
@media (min-width: 1000px) {
  .ba-shell { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); }
  .results .ba { max-width: 620px; }
}
.ba-handle { width: 2px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 0 0 1px rgba(11, 20, 24, 0.12), 0 0 22px rgba(92, 230, 255, 0.45); }
.ba-handle::after {
  width: 56px; height: 56px;
  background-color: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 28px rgba(11, 20, 24, 0.35);
  transition: transform 0.4s var(--ease-out), background-color 0.3s;
}
@media (hover: hover) { .ba:hover .ba-handle::after { transform: translate(-50%, -50%) scale(1.07); background-color: #fff; } }
.ba-label { border-radius: 999px; padding: 0.4rem 0.8rem; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ba-label--before { background: rgba(11, 20, 24, 0.55); border: 1px solid rgba(255, 255, 255, 0.2); }
.ba-label--after { background: rgba(92, 230, 255, 0.92); }
.ba-tab { transition: color 0.35s var(--ease); }
.ba-tab strong { transition: transform 0.45s var(--ease-out); }
@media (hover: hover) { .ba-tab:hover { color: var(--white); } .results--light .ba-tab:hover { color: var(--ink); } .ba-tab:hover strong { transform: translateX(3px); } }

/* ---------- Why WashNZ: editorial rhythm ---------- */
.reasons { column-gap: 3rem; }
.reason { padding: 2rem 0; }
.reason-icon { background: transparent; border: 1px solid var(--line); transition: transform 0.5s var(--ease-out), border-color 0.4s; }
.reason h3 { font-size: 1.3rem; }
@media (hover: hover) { .reason:hover .reason-icon { transform: translateY(-3px); border-color: var(--aqua-deep); } }

/* ---------- Where we work: volcanic-cone contours + glass region panels ---------- */
#areas.bg-ink { position: relative; isolation: isolate; overflow: hidden; }
#areas.bg-ink::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-radial-gradient(circle at 86% 18%, rgba(92, 230, 255, 0.07) 0 1px, transparent 1.5px 34px),
    repeating-radial-gradient(circle at 8% 92%, rgba(92, 230, 255, 0.05) 0 1px, transparent 1.5px 40px);
  -webkit-mask-image: radial-gradient(circle at 86% 18%, #000 0 22%, transparent 48%), radial-gradient(circle at 8% 92%, #000 0 18%, transparent 42%);
  mask-image: radial-gradient(circle at 86% 18%, #000 0 22%, transparent 48%), radial-gradient(circle at 8% 92%, #000 0 18%, transparent 42%);
}
@media (min-width: 760px) {
  .regions { gap: clamp(0.75rem, 1.2vw, 1.25rem); }
  .region {
    padding: 1.5rem 1.25rem 1.75rem; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: transform 0.5s var(--ease-out), border-color 0.4s, background-color 0.4s;
  }
  .areas--light .region { background: var(--white); border-color: var(--line); }
}
@media (min-width: 760px) and (hover: hover) {
  .region:hover { transform: translateY(-3px); border-color: rgba(92, 230, 255, 0.35); background: rgba(255, 255, 255, 0.06); }
  .areas--light .region:hover { border-color: var(--aqua-deep); background: var(--white); }
}

/* ---------- Final CTA: cinematic photo + glass contact panel ---------- */
.cta-media { position: absolute; inset: 0; z-index: -2; }
.cta-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.cta-band.has-photo::before { display: none; }
.cta-band.has-photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(11, 20, 24, 0.92) 0%, rgba(11, 20, 24, 0.78) 45%, rgba(11, 20, 24, 0.5) 100%);
}
.cta-contact.glass { padding: 1.75rem; gap: 1.25rem; }
@media (min-width: 1000px) { .cta-band.has-photo .cta-band-inner { align-items: center; } }

/* ---------- Soft transitions between white and paper sections ---------- */
main > section:not(.bg-paper):not(.bg-ink):not(.hero):not(.page-hero):not(.contact-hero):not(.cta-band):not(.trust-bar) + section.bg-paper {
  background: linear-gradient(180deg, var(--white) 0, var(--paper) 160px);
}
main > section.bg-paper + section:not(.bg-paper):not(.bg-ink):not(.cta-band):not(.facts-band) {
  background: linear-gradient(180deg, var(--paper) 0, var(--white) 160px);
}

/* ---------- Section headings: more presence, deliberate spacing ---------- */
h2, .h2 { letter-spacing: -0.035em; }
.section-head { margin-bottom: clamp(3rem, 2rem + 3vw, 5.5rem); }

/* ---------- Motion ---------- */
/* Scroll reveal: main.js adds .reveal (staggered --d delay for card groups) and .is-in on entry */
.reveal { opacity: 0; transform: translateY(var(--rv)); transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out); transition-delay: var(--d, 0ms); }
.reveal--slow { transition-duration: 1.15s; }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@media (max-width: 759px) { :root { --rv: 14px; --glass-blur: 14px; } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-media, .contact-hero-media { transform: none !important; }
  .hero-media > img, .contact-hero-media > img,
  .hero-copy > *, .page-hero-copy > *, .contact-hero-inner > *, .page-hero-media { animation: none !important; }
  .ba { transition: none; }
}

/* ---------- Mobile hero CTAs: one line each, stack on the narrowest phones ---------- */
@media (max-width: 479px) {
  .hero-ctas { grid-template-columns: 1fr 1fr; gap: 0.45rem; }
  .hero-ctas .btn { white-space: nowrap; padding-inline: 0.55rem; gap: 0.4rem; font-size: 0.93rem; }
  .hero-ctas .btn svg { width: 16px; height: 16px; }
}
@media (max-width: 379px) { .hero-ctas { grid-template-columns: 1fr; } }

/* ---------- Hero photo containment ----------
   The slow zoom scales the image; clip it to its band on mobile so no sliver
   shows below the fade. On desktop the photo extends 20px above the hero so
   the parallax shift (max 16px) never reveals a gap under the glass header. */
.hero-media, .contact-hero-media { overflow: hidden; }
@media (min-width: 1000px) { .hero-media, .contact-hero-media { top: -20px; } }
@media (max-width: 999px) { .hero-media { overflow: hidden; } .hero-media > img { transform-origin: 58% 30%; } }

/* Homepage service stage before/after sliders (fade between services, slide within one) */
.svc-stage-frame .svc-ba {
  transition: opacity 0.5s var(--ease), transform 0.9s var(--ease), visibility 0s linear 0.5s, --pos 0.5s var(--ease-out);
}
.svc-stage-frame .svc-ba.is-active { transition-delay: 0s; }
.svc-stage-frame .svc-ba.is-dragging { transition: none; }
.svc-stage-frame .svc-ba .ba-handle::after { width: 44px; height: 44px; background-size: 20px; }

/* Google reviews (rendered by main.js from /api/reviews) */
.g-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.g-summary[hidden] { display: none; }
.g-score { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.85rem; }
.g-score > strong { font-family: var(--font-display); font-size: 2rem; line-height: 1; letter-spacing: -0.02em; }
.g-score > span { color: var(--muted); font-size: var(--fs-sm); }
.g-score .stars { display: flex; gap: 3px; color: #f5b301; }
.g-score .stars svg { width: 20px; height: 20px; }
.g-actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; }
.review--google .stars .off, .g-score .stars .off { opacity: 0.22; }
.review--google .stars span { display: inline-flex; }
.review--google figcaption strong, .review--google figcaption strong a { color: var(--ink); text-decoration: none; }
.review--google figcaption a:hover { text-decoration: underline; }
img.avatar { object-fit: cover; }
.g-reviews--clamp .review blockquote { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.review--cta { background: var(--paper); }
.review--cta .stars { color: #f5b301; }
.review--cta h3 { font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem); letter-spacing: -0.02em; margin-top: 1.25rem; }
.review--cta p { color: var(--muted); margin-top: 0.75rem; max-width: 42ch; }
.review--cta .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Homepage review carousel: 3 across on desktop, 1 (with a peek of the next) on mobile */
.g-carousel .reviews--track {
  display: grid; grid-template-columns: none; grid-auto-flow: column; gap: 1.5rem;
  grid-auto-columns: 86%; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-bottom: 0.25rem;
}
.g-carousel .reviews--track::-webkit-scrollbar { display: none; }
.g-carousel .reviews--track > * { scroll-snap-align: start; min-width: 0; }
@media (min-width: 700px) { .g-carousel .reviews--track { grid-auto-columns: calc((100% - 1.5rem) / 2); } }
@media (min-width: 1000px) { .g-carousel .reviews--track { grid-auto-columns: calc((100% - 3rem) / 3); } }
.g-carousel .reviews--track:focus-visible { outline: 2px solid var(--aqua-deep); outline-offset: 4px; }
.g-carousel .review { gap: 1.5rem; }
.g-carousel .review blockquote { font-family: var(--font-body); font-size: 1rem; line-height: 1.65; font-weight: 400; letter-spacing: 0; margin-top: 1rem; }
.g-carousel .review figcaption { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.g-carousel .review--cta h3 { font-size: 1.4rem; }
.g-carousel.g-reviews--clamp .review blockquote { -webkit-line-clamp: 9; }
.carousel-nav { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.75rem; }
.carousel-btn {
  flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--white); color: var(--ink); border: 1px solid var(--line);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.carousel-btn svg { width: 20px; height: 20px; }
.carousel-btn:hover:not(:disabled) { background: var(--ink); color: var(--white); border-color: var(--ink); }
.carousel-btn:focus-visible { outline: 3px solid var(--aqua); outline-offset: 2px; }
.carousel-btn:disabled { opacity: 0.35; cursor: default; }
.carousel-progress { flex: 1; height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.carousel-progress span { display: block; height: 100%; width: 33%; background: var(--aqua-deep); border-radius: 3px; transition: transform 0.15s linear; }
.g-carousel.is-static .carousel-nav { display: none; }
/* Reviews page: carousel on mobile/tablet only; desktop keeps the 2-column grid */
@media (min-width: 900px) {
  .g-carousel--mobile .reviews--track { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; gap: 2rem; overflow: visible; scroll-snap-type: none; padding-bottom: 0; }
  .g-carousel--mobile .review blockquote { font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 0.7vw, 1.55rem); line-height: 1.35; letter-spacing: -0.015em; font-weight: 500; margin-top: 1.25rem; }
  .g-carousel--mobile .review figcaption { border-top: 0; padding-top: 0; }
  .g-carousel--mobile .review--cta h3 { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem); }
  .g-carousel--mobile .carousel-nav { display: none; }
}
@media (min-width: 700px) and (max-width: 899px) { .g-carousel--mobile .reviews--track { grid-auto-columns: calc((100% - 1.5rem) / 2); } }

/* ---------- Inner-page heroes: midnight charcoal to deep teal, cyan as atmosphere ----------
   One system for every dark .page-hero (Services, service pages, About, Our Work, FAQs, Areas, Reviews).
   --g-x / --g-y place the cyan glow; it sits behind the photo, away from the headline. */
:root {
  --hero-midnight: #091115;
  --hero-charcoal: #0e181d;
  --hero-teal: #0a2c34;
  --hero-teal-pool: rgba(7, 119, 143, 0.26);   /* --aqua-deep */
  --hero-glow: 92, 230, 255;                   /* --aqua as RGB, used at low alpha only */
}
.page-hero:not(.page-hero--plain) {
  --g-x: 78%; --g-y: 50%;
  background-color: var(--hero-midnight);
  background-image:
    radial-gradient(110% 85% at 100% 100%, var(--hero-teal-pool) 0%, rgba(7, 119, 143, 0) 62%),
    radial-gradient(70% 60% at 0% 0%, rgba(36, 52, 60, 0.55) 0%, rgba(36, 52, 60, 0) 70%),
    linear-gradient(118deg, var(--hero-midnight) 0%, var(--hero-charcoal) 44%, #0b2228 76%, var(--hero-teal) 100%);
}
.page-hero:not(.page-hero--plain)::before,
.page-hero:not(.page-hero--plain)::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }
/* The glow: a soft cyan bloom behind the image, drifting very slowly. */
.page-hero:not(.page-hero--plain)::before {
  inset: -8%;
  background: radial-gradient(34% 44% at var(--g-x) var(--g-y),
    rgba(var(--hero-glow), 0.15) 0%, rgba(var(--hero-glow), 0.06) 42%, rgba(var(--hero-glow), 0) 72%);
  animation: hero-drift 32s ease-in-out infinite alternate;
  will-change: transform;
}
/* Fine grain so the long dark gradients never band. */
.page-hero:not(.page-hero--plain)::after {
  inset: 0; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes hero-drift {
  from { transform: translate3d(-1.2%, 0.8%, 0) scale(1); }
  to   { transform: translate3d(1.4%, -1.2%, 0) scale(1.05); }
}
/* Per-page variation: same system, glow placed to suit each composition. */
.page-hero--glow-high { --g-x: 82%; --g-y: 26%; }
.page-hero--glow-low  { --g-x: 74%; --g-y: 80%; }
.page-hero--glow-top  { --g-x: 86%; --g-y: 14%; }
/* Below 1000px the photo stacks under the copy, so the glow moves down behind it. */
@media (max-width: 999px) {
  .page-hero:not(.page-hero--plain) { --g-x: 58%; --g-y: 80%; }
  .page-hero--glow-high { --g-x: 76%; --g-y: 70%; }
  .page-hero--glow-low  { --g-x: 42%; --g-y: 88%; }
  .page-hero--glow-top  { --g-x: 82%; --g-y: 66%; }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero:not(.page-hero--plain)::before { animation: none; will-change: auto; }
}
/* Review carousels: mouse drag (main.js). Snapping pauses while dragging so movement follows the pointer. */
@media (hover: hover) and (pointer: fine) {
  .g-carousel:not(.is-static) .reviews--track { cursor: grab; }
  .g-carousel .reviews--track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
  .g-carousel .reviews--track.is-dragging * { pointer-events: none; }
}

/* Thank-you page: confirmation that the auto-reply email was sent */
.confirm-note {
  display: flex; gap: 0.7rem; align-items: flex-start; margin-bottom: 2.25rem;
  padding: 0.95rem 1.1rem; border-radius: var(--radius); font-size: 0.95rem;
  background: #eaf8fb; border: 1px solid #bfe6ee; color: var(--ink);
}
.confirm-note[hidden] { display: none; }
.confirm-note svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--aqua-deep); }
.confirm-note strong { word-break: break-all; }