/* ==========================================================================
   Blue Tongue Plumbing & Gas — Design System v2
   Palette sampled directly from the real Blue Tongue logo artwork (vivid
   "Tongue Blue" ring + deep navy CTA blue + pale sky backdrop), paired with
   a warm sand accent for a coastal Southwest WA feel. Every colour pairing
   below has been checked against WCAG 2.2 AA contrast requirements.
   ========================================================================== */

:root {
  --color-primary: #0D99FF;       /* Vivid brand blue — logo ring */
  --color-primary-dark: #0B7FD9;
  --color-cta: #0032B9;           /* "Tongue Blue" — primary CTA colour, 9.74:1 on white */
  --color-cta-dark: #00238a;
  --color-ink: #0B1E33;
  --color-ink-soft: #3A4E68;
  --color-sky: #B3DEFF;           /* Light sky sampled from logo backdrop */
  --color-sky-soft: #EEF7FF;
  --color-surface: #ffffff;
  --color-surface-alt: #F4F8FC;
  --color-border: #DCE6F0;
  --color-accent: #8C6B32;        /* Warm sand — secondary accent, 4.92:1 on white */
  --color-accent-dark: #6E5427;
  --color-star: #e29b0c;
  --color-star-empty: #c9d3de;
  --color-success: #1c7a4d;

  --font-sans: "Fig Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Fig Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container-w: 1200px;
  --container-narrow-w: 780px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(11, 30, 51, 0.06), 0 1px 1px rgba(11, 30, 51, 0.04);
  --shadow-md: 0 8px 24px rgba(11, 30, 51, 0.12);
  --shadow-lg: 0 20px 45px rgba(11, 30, 51, 0.18);
  --header-h: 76px;
  --mobile-bar-h: 62px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-surface);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Reserve room for the fixed mobile Call/Book bar (+ iOS safe area + a
     little breathing room) so it never covers the last element on any
     page, including the final Projects card. Zeroed out on desktop, where
     the bar doesn't render, to avoid duplicate spacing. */
  padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom) + 24px);
  overflow-x: hidden;
}
@media (min-width: 900px) { body { padding-bottom: 0; } }

img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.15; margin: 0 0 0.5em; color: var(--color-ink); letter-spacing: -0.01em; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.25rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; color: var(--color-ink-soft); }
ul { padding: 0; margin: 0; list-style: none; }
figure { margin: 0; }

.container { max-width: var(--container-w); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: var(--container-narrow-w); }
.section { padding: 64px 0; }
@media (min-width: 900px) { .section { padding: 96px 0; } }
.section-alt { background: var(--color-surface-alt); }
.section-head { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.section-head-left { margin-left: 0; text-align: left; }
.section-intro { font-size: 1.05rem; }
.eyebrow { color: var(--color-cta); font-weight: 700; letter-spacing: 0.14em; font-size: 0.8rem; text-transform: uppercase; }

.icon { width: 1.15em; height: 1.15em; flex-shrink: 0; }
.icon-fill { fill: currentColor; stroke: none; }
.icon-flip { transform: rotate(180deg); }
.icon-star-filled { fill: var(--color-star); stroke: var(--color-star); }
.icon-star-empty { fill: none; stroke: var(--color-star-empty); }
.star-row { display: inline-flex; gap: 1px; }

.sr-only { position: absolute; 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: 12px; top: -60px; z-index: 200;
  background: var(--color-ink); color: #fff; padding: 12px 18px;
  border-radius: var(--radius-sm); transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------ Buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 0.98rem; padding: 13px 22px; border-radius: 999px;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn .icon { width: 1.1em; height: 1.1em; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--color-cta); color: #fff; }
.btn-primary:hover { background: var(--color-cta-dark); }
.btn-accent { background: var(--color-accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-accent:hover { background: var(--color-accent-dark); }
.btn-ghost { background: transparent; color: var(--color-cta); border-color: var(--color-border); }
.btn-ghost:hover { background: var(--color-sky-soft); }
.btn-outline { background: transparent; color: var(--color-cta); border-color: var(--color-primary); }
.btn-outline:hover { background: var(--color-sky-soft); }
.btn-outline-invert { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.7); backdrop-filter: blur(2px); }
.btn-outline-invert:hover { background: rgba(255,255,255,0.18); }
.btn-lg { padding: 16px 28px; font-size: 1.05rem; }
.btn-block { width: 100%; margin-top: 10px; }

/* ------------------------------------------------------------- Header -- */
.site-header {
  position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.94);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border);
}
.header-inner { display: flex; align-items: center; gap: 20px; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-logo { height: 40px; width: auto; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-weight: 800; font-size: 1.05rem; color: var(--color-ink); }
.brand-sub { font-size: 0.75rem; font-weight: 600; color: var(--color-cta); text-transform: uppercase; letter-spacing: 0.06em; }

.main-nav { display: none; flex: 1; min-width: 0; }
.main-nav ul { display: flex; gap: 2px; justify-content: center; align-items: center; flex-wrap: nowrap; }
.main-nav li { flex-shrink: 0; }
.nav-link { display: inline-block; padding: 10px 12px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 0.92rem; color: var(--color-ink-soft); white-space: nowrap; }
.nav-link:hover { background: var(--color-sky-soft); color: var(--color-cta); }
.nav-link.is-active { background: var(--color-sky); color: var(--color-cta); }

.nav-dropdown-item { position: relative; list-style: none; }
.nav-dropdown { position: relative; }
.nav-dropdown summary {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none;
}
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown-caret { width: 14px; height: 14px; transition: transform 0.15s ease; }
.nav-dropdown[open] .nav-dropdown-caret { transform: rotate(180deg); }
.nav-dropdown-panel {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 8px; min-width: 240px; max-height: 70vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1px; z-index: 120;
}
.nav-dropdown-panel li { list-style: none; }
.nav-dropdown-panel a {
  display: block; padding: 9px 12px; border-radius: var(--radius-sm); text-decoration: none;
  font-size: 0.9rem; font-weight: 600; color: var(--color-ink-soft); white-space: nowrap;
}
.nav-dropdown-panel a:hover { background: var(--color-sky-soft); color: var(--color-cta); }
.nav-dropdown-panel li:first-child a { color: var(--color-cta); border-bottom: 1px solid var(--color-border); border-radius: 0; margin-bottom: 4px; padding-bottom: 10px; }

.header-actions { display: none; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.header-call span { display: none; }
@media (min-width: 1200px) { .header-call span { display: inline; } }

.nav-toggle {
  margin-left: auto; background: none; border: none; padding: 8px; cursor: pointer;
  color: var(--color-ink); display: flex;
}
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-nav { border-top: 1px solid var(--color-border); background: #fff; padding: 12px 24px 20px; }
.mobile-nav ul { display: flex; flex-direction: column; }
.mobile-nav .nav-link { display: block; padding: 12px 8px; font-size: 1.05rem; }
.mobile-nav-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

@media (min-width: 900px) {
  .main-nav { display: flex; }
  .header-actions { display: flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
}

/* Intermediate widths (900-1199px): the collision zone the brief flagged.
   Drop the wordmark text (the logo mark alone still identifies the brand
   and keeps an accessible name via the link's aria-label), tighten nav
   item padding/gap/font, and keep the call button icon-only until there's
   real room for it. This range intentionally extends past 1100px — at
   exactly 1100px there still isn't enough room for full-size spacing, so
   "spacious" desktop styling only kicks in at 1200px. Verified clear of
   overlap at 768 / 900 / 1005 / 1100 / 1440px using computed nav-item
   widths against available header-inner width at each breakpoint. */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .header-inner { gap: 8px; }
  .brand-text { display: none; }
  .main-nav ul { gap: 0; }
  .nav-link, .nav-dropdown summary { padding: 7px 7px; font-size: 0.8rem; }
  .nav-dropdown-caret { width: 12px; height: 12px; }
  .header-actions { gap: 5px; }
  .header-call { padding: 10px 11px; }
  .header-book { padding: 10px 13px; font-size: 0.84rem; }
}
/* The container caps at max-width 1200px, so header content never gets
   more horizontal room beyond that regardless of viewport width — these
   sizes are the permanent "full desktop" style from 1200px up (verified
   comfortable at 1440px and wider, not just at the 1200px threshold). */
@media (min-width: 1200px) {
  .header-inner { gap: 20px; }
  .nav-link, .nav-dropdown summary { padding: 10px 10px; font-size: 0.875rem; }
  .header-call { padding: 12px 16px; font-size: 0.94rem; }
  .header-book { padding: 12px 18px; font-size: 0.94rem; }
}

/* --------------------------------------------------------------- Hero -- */
.hero { position: relative; background: var(--color-ink); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; align-items: stretch; } }

.hero-copy {
  position: relative; z-index: 2; color: #fff;
  padding: 56px 24px 46px; display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(180deg, rgba(11,30,51,0.65) 0%, rgba(11,30,51,0.92) 100%);
}
@media (min-width: 980px) {
  .hero-copy { padding: 0 56px 0 max(24px, calc((100vw - var(--container-w)) / 2 + 24px)); background: var(--color-ink); }
}
.hero .eyebrow { color: var(--color-sky); margin-bottom: 14px; }
.hero h1 { color: #fff; }
.hero-h1-brand {
  display: block; color: var(--color-sky); font-size: 0.52em; font-weight: 700;
  margin-top: 0.28em; letter-spacing: -0.005em;
}
.hero-h1-brand::before {
  content: ""; display: inline-block; width: 28px; height: 3px; border-radius: 3px;
  background: var(--color-accent); margin-right: 10px; vertical-align: middle;
}
.hero-sub { color: rgba(255,255,255,0.9); font-size: 1.1rem; max-width: 520px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 18px; }
.hero-trust { color: rgba(255,255,255,0.85); font-size: 0.92rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.hero-trust .icon { color: var(--color-sky); }

.hero-media { position: relative; min-height: 260px; }
@media (min-width: 980px) { .hero-media { min-height: 0; } }
.hero-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 65%;
}
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--color-ink) 0%, rgba(11,30,51,0) 18%);
}
@media (max-width: 979px) {
  .hero-media { position: absolute; inset: 0; }
  .hero-media::after { background: linear-gradient(180deg, rgba(11,30,51,0.15) 0%, rgba(11,30,51,0.55) 55%, var(--color-ink) 96%); }
  .hero-copy { background: none; }
}

/* --------------------------------------------------------- Trust strip - */
.trust-strip { background: var(--color-sky-soft); border-bottom: 1px solid var(--color-border); padding: 26px 0; }
.trust-strip-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; justify-content: space-between; }
.rating-badge { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-ink); }
.rating-stars { display: inline-flex; color: var(--color-star); gap: 1px; }
.rating-stars .icon { width: 18px; height: 18px; }
.rating-text strong { color: var(--color-ink); }
.rating-asof { font-size: 0.8rem; color: var(--color-ink-soft); margin: 2px 0 0; }
.rating-asof a { color: var(--color-cta); font-weight: 600; text-decoration: underline; }
.trust-points { display: flex; flex-wrap: wrap; gap: 16px 26px; }
.trust-points li { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; color: var(--color-ink-soft); }
.trust-points .icon { color: var(--color-primary); }

/* ------------------------------------------------------------ Services - */
/* Equal-prominence grid: every service tile is the same size, same image
   ratio, same heading level and same CTA treatment at every breakpoint —
   no bento spans promoting one service over another. */
.service-grid-bento {
  display: grid; grid-template-columns: 1fr; gap: 22px;
}
@media (min-width: 620px) { .service-grid-bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .service-grid-bento { grid-template-columns: repeat(3, 1fr); } }
.service-tile {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  text-decoration: none; color: #fff; aspect-ratio: 4 / 3; display: flex; align-items: flex-end;
  box-shadow: var(--shadow-sm); transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.service-tile:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.service-tile:hover .service-tile-media img { transform: scale(1.06); }
.service-tile:hover .service-tile-link .icon { transform: translateX(3px); }
.service-tile-media { position: absolute; inset: 0; }
.service-tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.service-tile-media.no-photo { background: linear-gradient(150deg, var(--color-cta), var(--color-primary)); }
.service-tile-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,30,51,0.92) 0%, rgba(11,30,51,0.35) 55%, rgba(11,30,51,0.05) 100%); }
.service-tile-body { position: relative; z-index: 2; padding: 20px 22px; width: 100%; }
.service-tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.16); backdrop-filter: blur(2px); margin-bottom: 10px; }
.service-tile-icon .icon { width: 20px; height: 20px; }
.service-tile h3 { color: #fff; margin-bottom: 4px; font-size: 1.05rem; }
.service-tile-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.88rem; color: var(--color-sky); }
.service-tile-link .icon { transition: transform 0.2s ease; }
.section-cta { text-align: center; margin-top: 36px; }

/* Simple card grid used on the services overview page + related-services */
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.service-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 28px; text-decoration: none; color: var(--color-ink); box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  display: flex; flex-direction: column;
}
.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--color-primary); }
.service-card-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--color-sky-soft); color: var(--color-cta); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.service-card-icon .icon { width: 26px; height: 26px; }
.service-card h3 { margin-bottom: 8px; }
.service-card p { flex: 1; margin-bottom: 14px; }
.service-card-link { font-weight: 700; color: var(--color-cta); display: inline-flex; align-items: center; gap: 6px; }

.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.value-card { background: var(--color-surface-alt); border-radius: var(--radius-lg); padding: 30px; text-align: center; }
.value-card-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--color-cta); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.value-card-icon .icon { width: 26px; height: 26px; }

/* The Blue Tongue Way: explicit breakpoints (rather than auto-fit) so the
   4th step never wraps alone onto a mostly-empty row — 4 columns from
   1200px, a balanced 2x2 from 700px, one compact column below that. */
.process-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 22px; counter-reset: step; }
@media (min-width: 700px) { .process-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 22px; } }
@media (min-width: 1200px) { .process-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; } }
.process-line { display: none; }
@media (min-width: 1200px) {
  .process-line {
    display: block; position: absolute; top: 24px; left: 12.5%; right: 12.5%; height: 2px;
    background: repeating-linear-gradient(90deg, var(--color-border) 0 10px, transparent 10px 18px);
    z-index: 0;
  }
}
.process-step { position: relative; z-index: 1; text-align: center; padding: 22px 18px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.process-step-num {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--color-accent); color: #fff; font-weight: 800; font-size: 1.1rem;
  margin-bottom: 12px;
}
.process-step h3 { font-size: 1.02rem; margin-bottom: 6px; }
.process-step p { font-size: 0.94rem; margin: 0; }

.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.testimonial-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 30px; margin: 0; box-shadow: var(--shadow-sm); }
.quote-icon { color: var(--color-sky); display: inline-flex; margin-bottom: 10px; }
.quote-icon .icon { width: 34px; height: 34px; }
.testimonial-card blockquote { margin: 0 0 16px; font-size: 1.02rem; color: var(--color-ink); }
.testimonial-card figcaption { font-size: 0.9rem; color: var(--color-ink-soft); }

/* -------------------------------------------------------- Service area - */
.area-section-inner { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 380px; display: flex; align-items: flex-end; }
.area-section-media { position: absolute; inset: 0; }
.area-section-media img { width: 100%; height: 100%; object-fit: cover; }
.area-section-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,30,51,0.92) 0%, rgba(11,30,51,0.55) 55%, rgba(11,30,51,0.15) 100%); }
.area-section-body { position: relative; z-index: 2; color: #fff; padding: 44px; max-width: 640px; }
.area-section-body .eyebrow { color: var(--color-sky); }
.area-section-body h2 { color: #fff; }
.area-section-body .section-intro { color: rgba(255,255,255,0.85); }
.area-chip-list { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 28px; }
.area-chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); padding: 10px 16px; border-radius: 999px; font-weight: 600; color: #fff; backdrop-filter: blur(2px); }

.area-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.area-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 26px; }
.area-card h3 { display: flex; align-items: center; gap: 10px; color: var(--color-cta); }

/* ------------------------------------------------------- Social gallery - */
.social-gallery-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 32px; }
.social-follow-links { display: flex; gap: 10px; }
.social-cta-row { text-align: center; margin-top: 32px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------- Inside Blue Tongue carousel
   Every ancestor is explicitly width-constrained so the carousel can never
   push the document itself wider than the viewport — the previous bug was
   a negative-margin bleed technique on .gallery-scroll extending past
   .container. overflow-x lives ONLY on the viewport, one level deep. */
#inside-blue-tongue,
#inside-blue-tongue .container,
.social-carousel {
  width: 100%; max-width: 100%; min-width: 0;
}
.social-carousel { position: relative; overflow: hidden; }
.social-carousel-viewport {
  width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-inline: contain; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.social-carousel-viewport::-webkit-scrollbar { display: none; }
.social-carousel-track { display: flex; width: 100%; min-width: 0; gap: 0; }

/* One complete post per slide on mobile — never a fixed/max-content width
   and never wider than the viewport. */
.social-post {
  flex: 0 0 100%; width: 100%; min-width: 0; box-sizing: border-box;
  padding-inline: 4px; scroll-snap-align: start; scroll-snap-stop: always;
  margin: 0; overflow: hidden; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
}
@media (min-width: 760px) { .social-post { flex-basis: 50%; } }
@media (min-width: 1100px) { .social-post { flex-basis: 33.333%; } }

.social-post-media {
  display: block; width: 100%; min-width: 0; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.social-post-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.social-post:hover .social-post-media img { transform: scale(1.04); }
.social-post-media:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; }

/* Caption panel below the image — never overlaid on the photo. */
.social-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; color: var(--color-ink-soft); }
.social-badge .icon { width: 18px; height: 18px; }
.social-post-body { display: block; padding: 18px 20px; }
.social-post-body .social-badge { margin-bottom: 10px; }
.social-post-body h3 { font-size: 1rem; margin: 0 0 6px; }
.social-post-body p { font-size: 0.92rem; line-height: 1.5; margin: 0 0 12px; }

.social-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.social-carousel-controls .carousel-btn { position: static; transform: none; background: var(--color-surface-alt); border: 1px solid var(--color-border); color: var(--color-ink); }
.social-carousel-controls .carousel-btn:hover { background: var(--color-sky-soft); }
.social-carousel-controls .carousel-btn:disabled { opacity: 0.4; cursor: default; }
.social-carousel-controls .carousel-dots { margin-top: 0; }

/* ---------------------------------------------------------------- FAQ -- */
.faq-list { border-top: 1px solid var(--color-border); }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: none; text-align: left; padding: 20px 4px; font-weight: 700; font-size: 1.02rem;
  cursor: pointer; color: var(--color-ink);
}
.faq-question .icon { color: var(--color-primary); transition: transform 0.2s ease; flex-shrink: 0; }
.faq-question[aria-expanded="true"] .icon { transform: rotate(180deg); }
.faq-answer { padding: 0 4px 20px; }
.faq-answer p { margin: 0; }

/* ------------------------------------------------------------ Final CTA - */
.final-cta { position: relative; background: var(--color-ink); color: #fff; text-align: center; overflow: hidden; }
.final-cta-media { position: absolute; inset: 0; }
.final-cta-media img { width: 100%; height: 100%; object-fit: cover; }
.final-cta-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(11,30,51,0.92), rgba(0,50,185,0.88)); }
.final-cta-inner { position: relative; z-index: 2; }
.final-cta-inner h2 { color: #fff; }
.final-cta-inner p { color: rgba(255,255,255,0.9); max-width: 560px; margin: 0 auto 6px; }
.final-cta .hero-ctas { justify-content: center; }

/* ------------------------------------------------------------- Footer -- */
.site-footer { background: var(--color-ink); color: rgba(255,255,255,0.82); padding: 64px 0 24px; }
.footer-grid { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.footer-areas-summary { color: rgba(255,255,255,0.7); font-size: 0.92rem; line-height: 1.6; max-width: 340px; }
.site-footer .brand-name { color: #fff; }
.site-footer .brand-sub { color: var(--color-sky); }
.footer-brand p { color: rgba(255,255,255,0.7); margin: 14px 0 18px; max-width: 320px; }
.footer-heading { color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; }
.footer-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.footer-list a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: rgba(255,255,255,0.82); }
.footer-list a:hover { color: #fff; }
.footer-suburbs li { color: rgba(255,255,255,0.7); padding: 3px 0; }
.footer-note a { color: var(--color-sky); text-decoration: none; font-weight: 600; }
.footer-hours { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.footer-hours th, .footer-hours td { text-align: left; padding: 5px 0; font-weight: 400; color: rgba(255,255,255,0.75); }
.footer-hours th { font-weight: 600; color: rgba(255,255,255,0.9); padding-right: 14px; }
.social-links { display: flex; gap: 12px; }
.social-links a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; text-decoration: none; color: #fff; }
.social-links a:hover { background: var(--color-primary); }
.social-links-lg a { width: 46px; height: 46px; }
.footer-book { margin-top: 6px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.14); margin-top: 44px; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: 0.82rem; color: rgba(255,255,255,0.6); }
.footer-legal { display: flex; gap: 18px; }
.footer-legal a { text-decoration: none; color: rgba(255,255,255,0.7); }
.footer-legal a:hover { color: #fff; text-decoration: underline; }

/* ---------------------------------------------------- Mobile action bar - */
.mobile-action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; display: flex;
  height: var(--mobile-bar-h); background: #fff; border-top: 1px solid var(--color-border);
  box-shadow: 0 -6px 20px rgba(11,30,51,0.12);
}
.mobile-action {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; font-weight: 700; font-size: 0.95rem;
}
.mobile-action.call { color: var(--color-cta); background: var(--color-sky-soft); }
.mobile-action.book { color: #fff; background: var(--color-accent); }
@media (min-width: 900px) { .mobile-action-bar { display: none; } }

/* ------------------------------------------------------- Page header --- */
/* No visible breadcrumb trail — removed sitewide (it overlapped and
   mis-rendered on mobile). Padding/spacing below is rebalanced for the
   eyebrow/H1/sub stack starting directly at the top of the header, with no
   breadcrumb-shaped gap left above the heading. BreadcrumbList JSON-LD is
   still emitted per-page (see schema.mjs / pages.mjs) for SEO. */
.page-header { position: relative; padding: 40px 0 40px; border-bottom: 1px solid var(--color-border); overflow: hidden; }
.page-header-light { background: var(--color-sky-soft); }
.page-header-brand { background: var(--color-ink); border-bottom-color: transparent; }
.page-header-brand h1, .page-header-brand .page-header-sub { color: #fff; }
.page-header-brand .page-header-sub { color: rgba(255,255,255,0.82); }
.page-header-brand .eyebrow { color: var(--color-sky); }
.page-header-image { padding: 64px 0 44px; border-bottom-color: transparent; }
.page-header-image h1, .page-header-image .page-header-sub { color: #fff; }
.page-header-image .page-header-sub { color: rgba(255,255,255,0.85); }
.page-header-image .eyebrow { color: var(--color-sky); }
.page-header-media { position: absolute; inset: 0; z-index: 0; }
.page-header-media img { width: 100%; height: 100%; object-fit: cover; }
.page-header-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,30,51,0.55) 0%, rgba(11,30,51,0.88) 100%); }
.page-header .container { position: relative; z-index: 1; }
.page-header .eyebrow { font-weight: 700; letter-spacing: 0.12em; font-size: 0.78rem; text-transform: uppercase; margin: 0 0 8px; display: block; }
.page-header-sub { max-width: 640px; font-size: 1.05rem; }

/* --------------------------------------------------------- Service page */
.service-detail-grid { display: grid; gap: 44px; }
@media (min-width: 950px) { .service-detail-grid { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.lede { font-size: 1.08rem; color: var(--color-ink); }
.check-list { margin: 18px 0 32px; display: flex; flex-direction: column; gap: 12px; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; }
.check-list .icon { color: var(--color-success); margin-top: 3px; }
.aside-card { position: sticky; top: calc(var(--header-h) + 20px); background: var(--color-surface-alt); border-radius: var(--radius-lg); padding: 28px; }
.aside-card h2 { font-size: 1.15rem; }
.aside-hours { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--color-border); }
.aside-hours h3 { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; margin-bottom: 8px; }
.aside-hours li { font-size: 0.9rem; color: var(--color-ink-soft); padding: 2px 0; }

/* ----------------------------------------------------------- About page */
.about-grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1.1fr 0.9fr; } }
.about-media { position: relative; }
.about-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.about-media-stack { position: relative; }
.about-media-secondary { position: absolute; width: 44%; bottom: -28px; right: -20px; border: 5px solid #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); aspect-ratio: 1/1; object-fit: cover; }
/* Reserved slot for a genuine photo of Jack / the team — deliberately
   styled as an obvious placeholder (dashed border, muted fill, camera
   icon) rather than silently reusing a generic job-site photo in this
   position. Replace with a real <img> the moment a photo is supplied. */
.about-team-photo-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: var(--color-surface-alt); border: 2px dashed var(--color-border); color: var(--color-ink-soft);
  text-align: center; font-size: 0.8rem; font-weight: 600; line-height: 1.35; padding: 12px;
}
.about-team-photo-slot .icon { width: 28px; height: 28px; opacity: 0.6; }
.licence-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.licence-card { background: var(--color-surface-alt); border-radius: var(--radius-lg); padding: 26px; }
.licence-card h3 { display: flex; align-items: center; gap: 10px; color: var(--color-cta); }

/* -------------------------------------------------------- Projects page */
/* Explicit 1/2/3-column breakpoints (not auto-fit) so cards never get
   forced into narrow, portrait-feeling columns at an in-between viewport —
   one column below 720px, two columns from 720px (this is what applies at
   the 1006px annotated viewport), three only from 1100px up. */
.project-grid-intro {
  max-width: 62ch; margin: 0 0 28px; color: var(--color-ink-soft);
  font-size: 1rem; line-height: 1.6;
}
.project-grid {
  display: grid; grid-template-columns: 1fr; gap: 24px; align-items: stretch;
}
@media (min-width: 720px) { .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.project-card {
  display: flex; flex-direction: column; min-width: 0; width: 100%; margin: 0; overflow: hidden;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.project-card:hover, .project-card:focus-within { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* The image wrapper is an <a> — force it to behave as a block-level media
   container with a fixed ratio, rather than retaining the image's tall
   intrinsic dimensions (the cause of captions being pushed out of view or
   photos filling the whole card with no visible caption). A neutral
   background shows through while the image loads. */
.project-media {
  position: relative; display: block; width: 100%; min-width: 0;
  aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface-alt);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.project-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.3s ease; }
.project-card:hover .project-media img, .project-card:focus-within .project-media img { transform: scale(1.04); }
.project-media:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; }

/* Written content sits in its own panel below the image, always visible —
   never overlaid on, or hover-revealed over, the photography. flex:1 plus
   margin-top:auto on the link keeps every card's link aligned along the
   bottom edge of the row regardless of description length. */
.project-card-content {
  display: flex; flex-direction: column; flex: 1; padding: 20px;
}
.project-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-cta); background: var(--color-sky-soft); padding: 4px 10px; border-radius: 999px; margin-bottom: 8px; align-self: flex-start; }
.project-card-content h2 { margin: 8px 0; font-size: 1.08rem; color: var(--color-ink); }
.project-card-content h2 a { text-decoration: none; color: inherit; }
.project-card-content h2 a:hover { text-decoration: underline; }
.project-card-content p { font-size: 0.94rem; line-height: 1.55; margin: 0 0 14px; }
.project-service-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto;
  font-weight: 700; font-size: 0.88rem; color: var(--color-cta); text-decoration: none;
}
.project-service-link:hover { text-decoration: underline; }
.project-service-link .icon { width: 0.95em; height: 0.95em; transition: transform 0.2s ease; }
.project-card:hover .project-service-link .icon, .project-card:focus-within .project-service-link .icon { transform: translateX(3px); }
.project-service-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  .project-card, .project-media img, .project-service-link .icon { transition: none; }
  .project-card:hover, .project-card:focus-within { transform: none; }
}
.project-feature { display: grid; gap: 30px; align-items: center; background: var(--color-ink); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 40px; }
@media (min-width: 900px) { .project-feature { grid-template-columns: 1fr 1fr; } }
.project-feature-media { aspect-ratio: 4/3; }
.project-feature-media img { width: 100%; height: 100%; object-fit: cover; }
.project-feature-body { padding: 8px 32px 32px; color: #fff; }
@media (min-width: 900px) { .project-feature-body { padding: 32px 40px; } }
.project-feature-body h2 { font-size: 1.3rem; color: #fff; }
.project-feature-body p { color: rgba(255,255,255,0.82); }

/* --------------------------------------------------------- Contact page */
/* Explicit 1/2/3-column breakpoints (not auto-fit) — the email card spans
   the full row at the 2-column tablet width (where a single narrow column
   would otherwise squeeze the address) and becomes an equal third column
   only once there's genuinely enough room. */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 44px; }
@media (min-width: 720px) {
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-card-email { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-card-email { grid-column: auto; }
}
.contact-card {
  min-width: 0; width: 100%;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: clamp(18px, 5vw, 26px); text-align: center; box-shadow: var(--shadow-sm);
}
.contact-card h2 { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1.05rem; }

/* Genuine mailto: link — never a fixed-width pill, never truncated. Wraps
   naturally (including a deliberate <wbr> break after "@") so the full
   address always stays inside its card at every width; overflow-wrap:anywhere
   is the hard backstop that guarantees no horizontal overflow even if a
   single unbroken segment would otherwise be wider than the card. */
.contact-email-link {
  display: flex; align-items: center; justify-content: center; width: 100%; max-width: 100%; min-width: 0;
  box-sizing: border-box; margin-top: 10px; padding: 14px clamp(10px, 4vw, 16px);
  border-radius: 999px; border: 2px solid var(--color-primary);
  color: var(--color-cta); font-weight: 700; text-decoration: none;
  white-space: normal; overflow-wrap: anywhere; word-break: normal; text-align: center; line-height: 1.3;
  font-size: clamp(0.74rem, 3.6vw, 0.95rem);
}
.contact-email-link:hover { background: var(--color-sky-soft); }

.contact-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.contact-details-card { background: var(--color-surface-alt); border-radius: var(--radius-lg); padding: 24px; }
.contact-details-card h2 { display: flex; align-items: center; gap: 10px; font-size: 1rem; }
.fine-print { font-size: 0.85rem; color: var(--color-ink-soft); }

/* Enlarged, clearly-labelled social actions — 48px+ touch target each. */
.contact-social-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.contact-social-link {
  min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 18px; border-radius: 999px; font-weight: 700; text-decoration: none;
  border: 2px solid var(--color-border); color: var(--color-ink); background: var(--color-surface);
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.contact-social-link svg, .contact-social-link .icon { width: 24px; height: 24px; }
.contact-social-link:hover, .contact-social-link:focus-visible { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.contact-social-link-facebook:hover { border-color: #1877F2; }
.contact-social-link-instagram:hover { border-color: #DD2A7B; }

/* ------------------------------------------------------------- Reviews - */
.reviews-live { background: var(--color-ink); color: #fff; text-align: center; }
.reviews-live .section-head h2 { color: #fff; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.reviews-live .section-intro { color: rgba(255,255,255,0.75); }
/* Only ever unhidden by JS, and only after a genuinely successful, live
   /api/reviews response (see assets/js/main.js -> activateCarousel). Never
   present in the server-rendered HTML as "on" by default. */
.live-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink);
  background: var(--color-star); padding: 5px 12px 5px 8px; border-radius: 999px; vertical-align: middle;
}
.live-badge .icon { width: 14px; height: 14px; }
.reviews-summary { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.reviews-summary-rating { font-size: 2.4rem; font-weight: 800; color: #fff; line-height: 1; }
.reviews-summary .rating-stars { color: var(--color-star); }
.reviews-summary .rating-stars .icon { width: 20px; height: 20px; }
.reviews-summary-count { font-size: 0.95rem; color: rgba(255,255,255,0.75); font-weight: 600; }
.attribution { font-size: 0.78rem; color: rgba(255,255,255,0.55); margin-top: 18px; }
.reviews-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.reviews-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 32px; text-align: left; }
.reviews-cards:empty { display: none; }
.review-skeleton {
  height: 150px; border-radius: var(--radius-lg); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  position: relative; overflow: hidden;
}
.review-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}
@keyframes skeleton-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .review-skeleton::after { animation: none; } }
.live-review-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg); padding: 22px; }
.live-review-card p { color: rgba(255,255,255,0.85); }
.live-review-card .review-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 0.82rem; color: rgba(255,255,255,0.6); }
.live-review-card .stars { color: var(--color-star); display: flex; gap: 2px; margin-bottom: 8px; }
.live-review-card .stars .icon { width: 15px; height: 15px; }

/* --------------------------------------------------- Reviews carousel -- */
.reviews-carousel { position: relative; width: 100%; max-width: 980px; margin: 32px auto 0; padding: 0 52px; }
.carousel-viewport { overflow: hidden; }
.carousel-track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none; padding: 4px 2px 10px; text-align: left;
}
.carousel-track::-webkit-scrollbar { display: none; }
.review-card {
  flex: 0 0 100%; scroll-snap-align: start; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-lg); padding: 24px;
  display: flex; flex-direction: column; min-height: 190px;
}
@media (min-width: 700px) { .review-card { flex-basis: calc(50% - 10px); } }
@media (min-width: 1000px) { .review-card { flex-basis: calc(33.333% - 14px); } }
.review-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.review-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.review-card .review-author { font-weight: 700; margin: 0 0 4px; font-size: 0.92rem; color: #fff; }
.review-card .star-row .icon { width: 13px; height: 13px; }
.review-card .review-text { flex: 1; font-size: 0.92rem; color: rgba(255,255,255,0.85); margin: 0 0 10px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
.review-card .review-meta-time { font-size: 0.78rem; color: rgba(255,255,255,0.55); margin: 0; }
.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.carousel-btn:hover { background: rgba(255,255,255,0.2); }
.carousel-prev { left: 0; }
.carousel-next { right: 0; }
.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.carousel-dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(255,255,255,0.25); padding: 0; cursor: pointer; }
.carousel-dot.is-active { background: var(--color-star); width: 22px; border-radius: 5px; transition: width 0.2s ease, background 0.2s ease; }
@media (max-width: 640px) { .reviews-carousel { padding: 0 8px; } .carousel-btn { display: none; } }

/* --------------------------------------------------------------- Legal - */
.legal-copy h2 { margin-top: 1.6em; font-size: 1.2rem; }
.legal-copy p { color: var(--color-ink-soft); }

/* --------------------------------------------------------------- Misc -- */
.not-found { padding: 120px 0; }

/* ------------------------------------------------ Blue Tongue Way / About */
.about-btw-callout { background: var(--color-sky-soft); border-radius: var(--radius-md); padding: 14px 18px; font-size: 0.95rem; }
.about-btw-callout a { color: var(--color-cta); font-weight: 700; text-decoration: none; margin-left: 6px; white-space: nowrap; }
.about-btw-callout a:hover { text-decoration: underline; }

/* --------------------------------------------------------- Service page */
.service-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 18px 0 28px; }
.service-gallery img { border-radius: var(--radius-md); aspect-ratio: 1/1; object-fit: cover; width: 100%; }
.aside-note { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--color-border); }
.aside-note h3 { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; margin-bottom: 8px; }
.aside-note p { font-size: 0.9rem; color: var(--color-ink-soft); margin: 0; }

/* ----------------------------------------------------- Service areas page */
.area-chip-list-light { display: flex; flex-wrap: wrap; gap: 10px; }
.area-chip-light { display: inline-flex; align-items: center; gap: 7px; background: var(--color-surface); border: 1px solid var(--color-border); padding: 9px 14px; border-radius: 999px; font-weight: 600; font-size: 0.9rem; color: var(--color-ink); }
.area-chip-light .icon { color: var(--color-cta); width: 15px; height: 15px; }
.area-services-grid { display: grid; gap: 30px; }
@media (min-width: 900px) { .area-services-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.area-service-links a { color: var(--color-cta); font-weight: 600; }
.area-outside-card { background: var(--color-surface-alt); border-radius: var(--radius-lg); padding: 28px; }
.area-chip-list-lg .area-chip-light { font-size: 0.95rem; padding: 11px 18px; }

/* ---------------------------------------------------- Live social feed - */
.social-live-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (min-width: 700px) { .social-live-grid { grid-template-columns: repeat(4, 1fr); } .social-live-card.is-featured { grid-column: span 2; grid-row: span 2; } }
.social-live-card { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; box-shadow: var(--shadow-sm); aspect-ratio: 4/5; }
.social-live-card.is-featured { aspect-ratio: 16/11; }
.social-live-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.social-live-card:hover img { transform: scale(1.06); }
.social-live-card .gallery-item-badge { position: absolute; top: 10px; left: 10px; }
.social-live-caption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 30px 14px 12px; font-size: 0.82rem; font-weight: 600; color: #fff;
  background: linear-gradient(0deg, rgba(11,30,51,0.85), transparent); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* --------------------------------------------------------- Animation --- */
/* Every [data-reveal] element is fully visible/readable with zero JS. These
   rules only take effect once JS adds .reveal-pending (initial hidden
   state) and later .is-visible (revealed) — see assets/js/main.js. If JS
   never runs, .reveal-pending is never added and nothing is ever hidden. */
[data-reveal].reveal-pending { opacity: 0; transform: translateY(16px); }
[data-reveal].reveal-pending.is-visible {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.55s ease, transform 0.55s ease;
  transition-delay: calc(var(--card-i, 0) * 70ms);
}
[data-reveal="hero-media"].reveal-pending { opacity: 1; transform: none; }
[data-reveal="hero-media"].reveal-pending img { transform: scale(1.06); }
[data-reveal="hero-media"].reveal-pending.is-visible img { transform: scale(1); transition: transform 1.1s ease; }
[data-reveal^="hero-"].reveal-pending.is-visible { transition-delay: calc(var(--card-i, 0) * 90ms); }
[data-reveal="hero-0"] { --card-i: 0; }
[data-reveal="hero-1"] { --card-i: 1; }
[data-reveal="hero-2"] { --card-i: 2; }
[data-reveal="hero-3"] { --card-i: 3; }
[data-reveal="hero-4"] { --card-i: 4; }
[data-reveal="btw"].reveal-pending.is-visible { transition-delay: calc(var(--card-i, 0) * 110ms); }