/* ---------- Tokens ---------- */
:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(2.75rem, 0.5rem + 6.5vw, 6.5rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;

  --transition-interactive: 220ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Content widths */
  --content-narrow: 640px;
  --content-default: 1040px;
  --content-wide: 1280px;

  /* Fonts — Cabinet Grotesk display + Satoshi body (clean, modern, refined) */
  --font-display: 'Cabinet Grotesk', 'Helvetica Neue', sans-serif;
  --font-body: 'Satoshi', 'Inter', 'Helvetica Neue', sans-serif;
}

/* ---------- Light mode — clean concrete neutrals + DSL lime accent ---------- */
:root,
[data-theme='light'] {
  --color-bg: #f4f4f1;
  --color-surface: #fafaf8;
  --color-surface-2: #ffffff;
  --color-surface-offset: #ebebe6;
  --color-surface-offset-2: #e5e5df;
  --color-divider: #d8d8d2;
  --color-border: #c4c4be;
  --color-border-strong: #7d7d78;   /* form control borders, 3.75:1 on #f4f4f1 */

  --color-text: #0f0f0f;
  --color-text-muted: #555553;
  --color-text-faint: #666664;
  --color-text-inverse: #f6f6f3;

  --color-primary: #0f0f0f;
  --color-primary-hover: #2a2a2a;
  --color-primary-active: #000;
  --color-primary-highlight: #dcdcd6;

  --color-accent: #c6f200;          /* DSL lime */
  --color-accent-ink: #0f0f0f;
  --color-accent-text: #566f00;     /* olive: lime as TEXT on light backgrounds, 5.19:1 on #f4f4f1 */
  color-scheme: light;

  --shadow-sm: 0 1px 2px oklch(0.2 0.01 80 / 0.06);
  --shadow-md: 0 8px 24px oklch(0.2 0.01 80 / 0.08);
  --shadow-lg: 0 20px 48px oklch(0.18 0.01 80 / 0.12);
}

/* ---------- Dark mode ---------- */
[data-theme='dark'] {
  --color-bg: #0e0e0d;
  --color-surface: #161615;
  --color-surface-2: #1d1d1c;
  --color-surface-offset: #181817;
  --color-surface-offset-2: #232322;
  --color-divider: #262625;
  --color-border: #353534;
  --color-border-strong: #6b6b68;

  --color-text: #ececea;
  --color-text-muted: #9a9a97;
  --color-text-faint: #8a8a87;
  --color-text-inverse: #0e0e0d;

  --color-primary: #c6f200;
  --color-primary-hover: #d8ff2a;
  --color-primary-active: #b3da00;
  --color-primary-highlight: #2a2f15;

  --color-accent: #c6f200;
  --color-accent-ink: #0e0e0d;
  --color-accent-text: #c6f200;
  color-scheme: dark;

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4);
  --shadow-md: 0 8px 24px oklch(0 0 0 / 0.5);
  --shadow-lg: 0 20px 48px oklch(0 0 0 / 0.6);
}

/* No-JS fallback: without theme-init.js there is no data-theme attribute, so follow the OS setting */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0e0e0d;
    --color-surface: #161615;
    --color-surface-2: #1d1d1c;
    --color-surface-offset: #181817;
    --color-surface-offset-2: #232322;
    --color-divider: #262625;
    --color-border: #353534;
    --color-border-strong: #6b6b68;

    --color-text: #ececea;
    --color-text-muted: #9a9a97;
    --color-text-faint: #8a8a87;
    --color-text-inverse: #0e0e0d;

    --color-primary: #c6f200;
    --color-primary-hover: #d8ff2a;
    --color-primary-active: #b3da00;
    --color-primary-highlight: #2a2f15;

    --color-accent: #c6f200;
    --color-accent-ink: #0e0e0d;
    --color-accent-text: #c6f200;
    color-scheme: dark;

    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4);
    --shadow-md: 0 8px 24px oklch(0 0 0 / 0.5);
    --shadow-lg: 0 20px 48px oklch(0 0 0 / 0.6);
  }
}

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 4vw, var(--space-10));
}

section {
  padding-block: clamp(var(--space-16), 9vw, var(--space-32));
}

/* ---------- Header / Nav ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  background: oklch(from var(--color-bg) l c h / 0.82);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.header.is-scrolled {
  border-bottom-color: var(--color-divider);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
  gap: var(--space-6);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  letter-spacing: -0.01em;
}
.logo {
  transition: background var(--transition-interactive);
}
.logo img {
  height: 36px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.footer .logo img { height: 42px; }
/* In LIGHT mode the white 'CONCRETE' text would disappear on the cream background.
   Use a CSS filter to darken the white parts to charcoal while keeping the lime DSL intact-ish.
   Trick: invert + hue-rotate keeps lime green but turns white -> dark.
   But a cleaner approach: use the logo on a dark chip in the header for light mode. */
.header .logo {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}
[data-theme='light'] .header .logo,
:root:not([data-theme]) .header .logo {
  background: #0f0f0f;
}
/* Footer logo: same chip in light mode */
[data-theme='light'] .footer .logo,
:root:not([data-theme]) .footer .logo {
  display: inline-flex;
  padding: 4px 10px;
  background: #0f0f0f;
  border-radius: var(--radius-sm);
}
[data-theme='dark'] .footer .logo,
[data-theme='dark'] .header .logo {
  background: transparent;
  padding: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
}
.nav-links a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 500;
}
.nav-links a:hover { color: var(--color-text); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.theme-toggle {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
}
.theme-toggle:hover {
  color: var(--color-text);
  background: var(--color-surface-offset-2);
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  border-radius: var(--radius-sm);
}

@media (max-width: 1220px) {
  .js .nav-links { display: none; }
  .js .nav-toggle { display: inline-flex; }
  .js .nav-links.is-open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-divider);
    padding: var(--space-4);
  }
  .js .nav-links.is-open a {
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-divider);
    font-size: var(--text-base);
  }
  .js .nav-links.is-open a:last-child { border-bottom: 0; }
}
/* Without JS the menu wraps instead of hiding */
html:not(.js) .nav { flex-wrap: wrap; }
html:not(.js) .nav-links { flex-wrap: wrap; gap: var(--space-2) var(--space-5); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.85rem 1.6rem;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-full);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}
[data-theme='dark'] .btn-primary { color: var(--color-accent-ink); }
.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-ghost:hover {
  background: var(--color-surface-offset-2);
  border-color: var(--color-text-muted);
}
.btn-arrow svg { transition: transform var(--transition-interactive); }
.btn-arrow:hover svg { transform: translateX(3px); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 88vh;
  min-height: 88svh;
  display: flex;
  align-items: flex-end;
  padding-block: 0 !important;
  overflow: hidden;
  color: #f7f5ef;
  isolation: isolate;
}
.hero-image {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.84) 0%,
    rgba(0,0,0,0.62) 35%,
    rgba(0,0,0,0.38) 65%,
    rgba(0,0,0,0.40) 100%
  );
}
.hero .container {
  width: 100%;
  padding-block: clamp(var(--space-16), 10vw, var(--space-24));
  display: grid;
  gap: var(--space-8);
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 245, 239, 0.85);
}
.hero-eyebrow::before {
  content: '';
  width: 32px; height: 1px;
  background: currentColor;
  display: inline-block;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: 0.98;
  font-weight: 500;
  letter-spacing: -0.025em;
  max-width: 16ch;
}
.hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-accent);
}
.hero-sub {
  font-size: var(--text-lg);
  max-width: 48ch;
  color: rgba(247, 245, 239, 0.88);
  font-weight: 400;
}
.hero-cta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}
.hero-cta .btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}
.hero-cta .btn-primary:hover {
  background: #d8ff2a;
  transform: translateY(-1px);
}
.hero-cta .btn-ghost {
  color: #f7f5ef;
  border-color: rgba(247, 245, 239, 0.4);
}
.hero-cta .btn-ghost:hover {
  background: rgba(247, 245, 239, 0.12);
  border-color: rgba(247, 245, 239, 0.8);
}
.hero-meta {
  position: absolute;
  bottom: var(--space-8);
  right: clamp(var(--space-4), 4vw, var(--space-10));
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 245, 239, 0.7);
  text-align: right;
  line-height: 1.6;
}
@media (max-width: 720px) {
  .hero-meta { display: none; }
}

/* ---------- Section headers ---------- */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: var(--space-10);
  margin-bottom: var(--space-16);
  align-items: end;
}
.section-eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
}
.section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: var(--space-3);
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: var(--space-4);
}
.section-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-text-muted);
}
.section-lede {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 56ch;
}

@media (max-width: 820px) {
  .section-head {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* ---------- About ---------- */
.about {
  background: var(--color-surface);
  border-block: 1px solid var(--color-divider);
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-8), 6vw, var(--space-20));
  align-items: center;
}
.about-image {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-surface-offset-2);
}
.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-text h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin-bottom: var(--space-6);
}
.about-text h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-text-muted);
}
.about-text p + p { margin-top: var(--space-4); }
.about-text p {
  color: var(--color-text-muted);
  font-size: var(--text-base);
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-divider);
}
.about-stat .num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1;
}
.about-stat .lbl {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

@media (max-width: 820px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-image { aspect-ratio: 4/3; max-width: 100%; }
}

/* ---------- Services ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.service-card {
  position: relative;
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 260px;
  transition: border-color var(--transition-interactive), transform var(--transition-interactive), box-shadow var(--transition-interactive);
}
.service-card:hover {
  border-color: var(--color-text-muted);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.service-num {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  color: var(--color-text-faint);
}
.service-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.service-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: auto;
}

@media (max-width: 900px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* ---------- Gallery ---------- */
.gallery {
  background: var(--color-surface);
  border-block: 1px solid var(--color-divider);
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 180px;
  gap: var(--space-4);
}
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface-offset-2);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item .caption {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f7f5ef;
  background: rgba(20, 19, 15, 0.72);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  backdrop-filter: blur(6px);
}
/* layout spans */
.gallery-item.span-1 { grid-column: span 3; grid-row: span 2; }
.gallery-item.span-2 { grid-column: span 3; grid-row: span 2; }
.gallery-item.span-3 { grid-column: span 2; grid-row: span 2; }
.gallery-item.span-4 { grid-column: span 2; grid-row: span 2; }
.gallery-item.span-5 { grid-column: span 2; grid-row: span 2; }
.gallery-item.span-6, .gallery-item.span-7 { grid-column: span 3; grid-row: span 2; }

@media (max-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
  }
  .gallery-item.span-1, .gallery-item.span-2,
  .gallery-item.span-3, .gallery-item.span-4,
  .gallery-item.span-5, .gallery-item.span-6,
  .gallery-item.span-7 { grid-column: span 1; grid-row: span 1; }
  .gallery-item.span-1 { grid-column: span 2; }
}

/* ---------- Why us ---------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.why-card {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border);
}
.why-num {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  letter-spacing: 0.15em;
  margin-bottom: var(--space-4);
}
.why-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}
.why-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
@media (max-width: 900px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .why-grid { grid-template-columns: 1fr; }
}

/* ---------- Contact ---------- */
.contact {
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(var(--space-10), 7vw, var(--space-20));
}
.contact-info h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: var(--space-6);
}
.contact-info h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-text-muted);
}
.contact-info > p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-10);
}
.contact-list { list-style: none; display: grid; gap: var(--space-6); }
.contact-list dt {
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.contact-list dd a, .contact-list dd {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.contact-list dd a:hover {
  color: var(--color-accent-text);
}

.form {
  background: var(--color-surface-2);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-divider);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
}
.field input,
.field select,
.field textarea {
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  font-size: var(--text-sm);
  color: var(--color-text);
  font-family: var(--font-body);
  width: 100%;
}
.field textarea {
  min-height: 120px;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-text);
}
.form .btn-primary {
  width: 100%;
  margin-top: var(--space-4);
  padding-block: 1.1rem;
}
.form-note {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-4);
  text-align: center;
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.footer {
  background: var(--color-bg);
  padding-block: var(--space-16) var(--space-8);
  border-top: 1px solid var(--color-divider);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}
.footer-brand p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-4);
  max-width: 36ch;
}
.footer h4, .footer .footer-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-4);
  text-transform: uppercase;
}
.footer ul { list-style: none; display: grid; gap: var(--space-2); }
.footer a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
}
.footer a:hover { color: var(--color-text); }

.footer-bottom {
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* ---------- Scroll reveal ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-visible { opacity: 1; transform: none; transition: none; }
}

/* ============ SERVICE AREAS LIST (added in merge) ============ */
.areas-list {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.areas-list li {
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in oklab, var(--color-text) 12%, transparent);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  transition: border-color var(--transition-interactive), color var(--transition-interactive);
}
.areas-list li:hover {
  border-color: var(--color-accent-text);
  color: var(--color-text);
}
@media (max-width: 900px) {
  .areas-list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .areas-list { grid-template-columns: repeat(2, 1fr); }
}

/* ============ Multi-page: linked service/why cards ============ */
a.service-card, a.why-card { text-decoration: none; color: inherit; cursor: pointer; }
a.service-card:hover, a.why-card:hover { border-color: var(--color-accent-text); }

/* ============ Before / After sliders ============ */
.ba-list { display: grid; gap: var(--space-16); }
.ba-item { display: grid; gap: var(--space-5); }
.ba-slider {
  position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--color-border);
  background: var(--color-surface-offset); cursor: ew-resize; user-select: none;
  touch-action: auto;
}
.ba-slider:has(.ba-range:focus-visible) { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.ba-slider img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none;
}
.ba-after  { z-index: 1; }
.ba-before { z-index: 2; clip-path: inset(0 50% 0 0); will-change: clip-path; }
.ba-slider.is-dragging .ba-before { transition: none; }
/* corner labels */
.ba-label {
  position: absolute; bottom: var(--space-3); z-index: 4;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(6px); pointer-events: none;
}
.ba-label.before { left: var(--space-3); background: rgba(20,20,20,0.72); color:#fff; }
.ba-label.after  { right: var(--space-3); background: var(--color-accent); color: var(--color-accent-ink); }
/* handle */
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; z-index: 5;
  width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
  pointer-events: none;
}
.ba-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 999px; background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  background-image:
    linear-gradient(45deg, transparent 42%, #0f0f0f 42%, #0f0f0f 46%, transparent 46%),
    linear-gradient(-45deg, transparent 42%, #0f0f0f 42%, #0f0f0f 46%, transparent 46%);
  background-repeat: no-repeat, no-repeat;
  background-position: 11px center, 33px center;
  background-size: 12px 20px, 12px 20px;
}
.ba-hint {
  position: absolute; top: var(--space-3); left: 50%; transform: translateX(-50%); z-index: 4;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; background: rgba(20,20,20,0.6); color:#fff;
  backdrop-filter: blur(6px); pointer-events: none; opacity: 0.9;
}
.ba-slider.is-dragging .ba-hint,
.ba-slider.is-touched .ba-hint { opacity: 0; transition: opacity .2s; }
.ba-range { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; z-index:6; margin:0; touch-action: pan-y; }
.ba-meta { max-width: 70ch; }
.ba-meta h3 { font-size: var(--text-xl, 1.4rem); margin: 0 0 var(--space-2); }
.ba-meta p { color: var(--color-text-muted); margin: 0; }
.ba-meta .ba-mix { display:inline-block; margin-top: var(--space-3); font-size:0.8rem; font-weight:600;
  color: var(--color-text); border:1px solid var(--color-border); border-radius:999px; padding:4px 12px; }
@media (max-width: 640px) { .ba-slider { aspect-ratio: 4 / 3; } }

/* ============ Links that sit on light backgrounds (lime fails contrast as text there) ============ */
.text-link { color: var(--color-accent-text); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.text-link:hover { text-decoration-thickness: 2px; }
.field ::placeholder { color: var(--color-text-muted); opacity: 1; }

/* ---- Quote form additions (append to style.css after the existing .form rules).
   REMOVE the old rules: .form-success { ... } , .form.is-submitted .form-fields , .form.is-submitted .form-success ---- */
.form { --form-error: #b3261e; }
[data-theme='dark'] .form { --form-error: #ff8a80; }
.field .opt { text-transform: none; letter-spacing: 0; color: var(--color-text-faint); font-weight: 400; }
.field [aria-invalid='true'] { border-color: var(--form-error); }
.field-error { font-size: var(--text-xs); color: var(--form-error); margin: 0; }
.form .btn-primary[disabled] { opacity: .6; cursor: progress; }
.form-note a { color: inherit; text-decoration: underline; }

/* Honeypot: off-screen (not display:none, which some bots skip) */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Error box (shown only after a real failure) */
.form-error:not([hidden]) {
  display: block;
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--form-error);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.form-error a { color: inherit; text-decoration: underline; }
.form-error:focus { outline: 2px solid var(--form-error); outline-offset: 2px; }

/* No-JS fallback: config.js adds the "js" class to <html>. Without it the fields are hidden and the call/email note shows. */
.form-nojs { display: none; font-size: var(--text-sm); color: var(--color-text); }
.form-nojs a { color: inherit; text-decoration: underline; }
html:not(.js) .form-nojs { display: block; }
html:not(.js) #quote-form .form-fields { display: none; }

/* ---- DSL ads components (p4). Append to the END of style.css so it wins over earlier equal-specificity rules. ---- */
/* Uses only the site's existing tokens (--space-*, --color-*, --radius-*, --text-*). */

/* 1. Header phone link (inside .nav-actions, before the theme toggle) */
.nav-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 44px;
  min-height: 44px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}
.nav-phone:hover { background: var(--color-surface-offset-2); }
.nav-phone svg { flex: none; }
/* Icon only by default, with the number in aria-label. Measured on the original header: showing "0405 818 456" in text at 1360px+
   squeezes the logo from 288px to 244px wide (it distorts) and the number needs ~45px the header does not have. The number is
   shown as text in the hero CTA, the sticky bar and the footer instead. To show it in the header anyway, add class "nav-phone--text"
   to the link and free up room (for example shorten the nav gaps) first. */
.nav-phone-num { display: none; }
.nav-phone { padding-inline: 0; }
@media (min-width: 1360px) {
  .nav-phone--text { padding-inline: var(--space-2); }
  .nav-phone--text svg { display: none; }
  .nav-phone--text .nav-phone-num { display: inline; }
}
/* up to 1100px the header is already full (measured: horizontal scroll appeared at 900px with the icon added), so the phone icon takes
   the place of the header quote button; the hero CTA, sticky bar and nav still lead to the quote form */
@media (max-width: 820px) {
  .nav-actions > .btn { display: none; }
}

/* 1b. Header room on phones. Measured at 375px: the 200x25 logo wordmark (36px tall = 288px wide) was crushed to 0px wide once the
   phone icon sat beside the quote button. On phones the sticky bar carries "Get a free quote" (and the contact page is the form
   itself), so the header copy of the button is dropped at this width, and the logo is sized to the room left. */
@media (max-width: 560px) {
  .header .logo { padding: 4px 6px; min-width: 0; }
  .header .logo img { height: 22px; }
}

/* 2. Hero CTA pair + trust line (service pages and suburb pages, under the lede) */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.trust-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  list-style: none;
  padding: 0;
  margin-top: var(--space-5);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.trust-line li { max-width: none; }
.trust-line li + li::before { content: '\00b7'; margin-right: var(--space-4); }
@media (max-width: 480px) {
  .cta-row .btn { flex: 1 1 100%; }
}

/* 3. Mobile sticky call / quote bar (hidden above 820px and on the contact page, which does not include it) */
.sticky-cta { display: none; }
@media (max-width: 820px) {
  :root { --sticky-h: 4.5rem; }
  .sticky-cta {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40; /* below .header (50) so the open mobile menu covers it */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    padding: var(--space-2) max(var(--space-3), env(safe-area-inset-right)) calc(var(--space-2) + env(safe-area-inset-bottom)) max(var(--space-3), env(safe-area-inset-left));
    background: var(--color-bg);
    border-top: 1px solid var(--color-divider);
    box-shadow: 0 -8px 24px oklch(0.2 0.01 80 / 0.08);
  }
  .sticky-cta .btn { min-height: 48px; padding-inline: var(--space-2); }
  .sticky-cta .btn-primary { background: var(--color-accent); color: var(--color-accent-ink); }
  /* the bar sits just before <footer>, so the sibling selector reserves its height and nothing is covered */
  .sticky-cta ~ .footer { padding-bottom: calc(var(--space-8) + var(--sticky-h) + env(safe-area-inset-bottom)); }
}
@media print { .sticky-cta { display: none; } }

/* 4. Form inputs: at least 16px so iOS Safari does not zoom on focus */
.field input,
.field select,
.field textarea { font-size: max(16px, 1rem); }

/* 5. Privacy page */
.legal h2 { font-size: var(--text-lg); margin-top: var(--space-10); margin-bottom: var(--space-3); }
.legal ul { padding-left: 1.25rem; margin-block: var(--space-3); }
.legal li { margin-bottom: var(--space-2); }
.legal p + p { margin-top: var(--space-3); }
.confirm { background: var(--color-accent); color: var(--color-accent-ink); padding: 0 0.3em; border-radius: var(--radius-sm); font-weight: 500; }
/* ---- end DSL ads components ---- */

/* ---- DSL integration fixes (i1) ---- */
/* <picture> wrappers must not change the layout of the cover-fit photo slots (base.css makes picture display:block; height:auto) */
.hero-image picture, .about-image picture, .gallery-item picture, .ba-slider picture { display: contents; }
/* Header logo: base.css gives every img max-width:100%, which let the flex row squeeze the 200x25 wordmark (height fixed, width shrinking)
   between 821px and 1101px. The logo keeps its natural width; the nav gaps tighten instead. */
.header .logo { flex: none; }
.header .logo img { max-width: none; }
/* Narrow phones (V3-01): the fixed-width logo forced the header, and so the whole page, out to 374px. Below 400px the logo
   shrinks in proportion (aspect ratio kept) so the header fits 320px and up. Declared after the 560px rule so it wins. */
@media (max-width: 400px) {
  .header .logo { flex: 0 1 auto; min-width: 0; }
  .header .logo img { height: auto; width: 100%; max-width: 150px; }
  .nav-actions { gap: var(--space-1); }
}
/* ---- end DSL integration fixes (i1) ---- */

/* ---- DSL polish (q4) ---- */
/* Logo <picture> wrapper must not become the flex item */
.logo picture { display: contents; }
/* Mobile call / quote bar: with JS it stays hidden until the hero call button has scrolled out of view (app.js toggles .is-visible).
   Without JS (or if app.js fails and drops the .js class) it stays hidden; the hero and footer still carry the phone number. */
.sticky-cta[hidden] { display: none !important; }
@media (max-width: 820px) {
  .sticky-cta { transform: translateY(100%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
  .sticky-cta.is-visible { transform: none; visibility: visible; transition: transform .22s ease, visibility 0s linear 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta, .sticky-cta.is-visible { transition: none; }
}
/* Privacy page: shown by app.js only while formEndpoint in config.js is empty */
.form-note { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-accent); background: var(--color-surface-offset-2); border-radius: var(--radius-sm); max-width: 70ch; }
/* ---- end DSL polish (q4) ---- */