/* Final brand surfaces: load after client-brand.css and page-specific styles.
   Colour changes only. Font sizes, layout and the original Google branding stay intact. */
:root {
  --paper: #ffffff;
  --soft: #eff9ff;
  --ink: #103d58;
  --muted: #365f73;
  --navy: #103d58;
  --pg-paper: #ffffff;
  --pg-ink: #103d58;
  --pg-muted: #365f73;
  --pg-line: #cce6f2;
  --surface-sky: #edf8ff;
  --surface-leaf: #f2fae9;
  --surface-ink: #103d58;
  --surface-copy: #365f73;
}
html,
body.site-typography,
body.site-typography.pg-page,
body.site-typography.about-page {
  background: #fff;
  color: var(--surface-ink);
  --pg-paper: #fff;
  --pg-ink: var(--surface-ink);
  --pg-muted: var(--surface-copy);
  --ab-paper: #fff;
  --ab-ink: var(--surface-ink);
  --ab-muted: var(--surface-copy);
}

/* White breathing room between the blue and green sections. */
.site-typography :is(#about, #projects, #reviews, #faq, .ab-story, .pg-section:not(.pg-guide)) {
  background-color: #fff;
  color: var(--surface-ink);
}
.site-typography #services {
  background: linear-gradient(125deg, #e5f5ff 0%, #f4fbff 60%, #f2fae9 100%);
  color: var(--surface-ink);
}
.site-typography #credentials { background: #fff; }
.site-typography #credentials .credentials-grid.wrap {
  background-image: linear-gradient(110deg, rgba(0,77,127,.9), rgba(0,95,145,.88) 58%, rgba(49,95,12,.9)), url('/review-skimmer-modern-pergola.webp');
}
.site-typography #credentials .credential h3 { color: #fff; }
.site-typography #credentials .credential p { color: #e4f4fc; }
.site-typography #credentials .trust-strip,
.site-typography .client-logo-strip { background: #fff; }
.site-typography .trust-strip > p { color: var(--surface-copy); }
.site-typography .client-logos > li { background: #f4fbff; border-color: #d0e9f5; }
.site-typography #about .about-benefit {
  background: linear-gradient(135deg, #e1f3ff, #f4fbff);
  border-color: #bce2f3;
}
.site-typography #about .about-benefit--teal,
.site-typography #about .about-benefit--sand {
  background: linear-gradient(135deg, #e9f6d9, #f7fcef);
  border-color: #cce4af;
}
.site-typography #about .about-benefit-icon { background: #fff; color: var(--brand-blue-ink, #006da6); }
.site-typography #about .about-benefit--teal .about-benefit-icon,
.site-typography #about .about-benefit--sand .about-benefit-icon { color: var(--brand-green-ink, #3e7610); }
.site-typography :is(.about-copy, .review-project-card p, .home-journal-card p, .featured-client-copy p, .review-service-areas p) { color: var(--surface-copy); }
.site-typography :is(#about, #projects, .home-journal) :is(h2, h3),
.site-typography #services .section-heading h2,
.site-typography #reviews :is(.reviews-intro h2, .featured-client-copy h3, .project-video-heading),
.site-typography :is(#about, #services, #projects) .eyebrow { color: var(--surface-ink); }
.site-typography .service-categories button { background: #fff; color: var(--brand-blue-ink, #006da6); border-color: #bddff0; }
.site-typography .service-categories button:is(:hover, .active) { background: var(--brand-blue-ink, #006da6); color: #fff; border-color: var(--brand-blue-ink, #006da6); }
.site-typography .featured-client-video { background: linear-gradient(135deg, #f4fbff, #eaf6dc); border-color: #cce4b3; }
.site-typography .featured-label { color: var(--brand-green-ink, #3e7610); }
.site-typography .home-locations,
.site-typography.about-page .ab-locations { background: linear-gradient(125deg, #e5f5ff, #f1faff 68%, #f2fae9); }
.site-typography .home-journal { background: linear-gradient(180deg, #fff, #edf8ff); }
.site-typography :is(.home-office-card, .ab-location-card) { background: #fff; border-color: #cbe5f1; color: var(--surface-ink); }
.site-typography :is(.home-office-card, .ab-location-card) p { color: var(--surface-copy); }
.site-typography .review-service-areas { border-color: #c8e4f2; color: var(--surface-ink); }
.site-typography .review-service-areas li { background: var(--surface-leaf); border-color: #cce4b1; color: #315f0c; }

/* The process remains photographic, with the logo's blue and green in the overlay. */
body.site-typography #process.process-review { background: #005f91; }
body.site-typography #process.process-review .process-scene { filter: none; }
body.site-typography #process.process-review .process-overlay {
  background: linear-gradient(110deg, rgba(0,77,127,.88), rgba(0,95,145,.87) 58%, rgba(49,95,12,.88));
}
body.site-typography #process.process-review :is(h2, .eyebrow) { color: #fff; }
body.site-typography #process.process-review .process-heading-row > p,
body.site-typography #process.process-review :is(.process-current-label, .process-photo-note, #process-counter) { color: #e8f7ff; }
body.site-typography #process.process-review .process-card {
  background: linear-gradient(145deg, #fff, #edf8ff);
  border-color: #b7dced;
  color: var(--surface-ink);
}
body.site-typography #process.process-review .process-card:nth-of-type(even) {
  background: linear-gradient(145deg, #fff, #f0f8e5);
  border-color: #cde3b7;
}
body.site-typography #process.process-review .process-card-title { color: var(--surface-ink); }
body.site-typography #process.process-review .process-card-description { color: #34566b; }
body.site-typography #process.process-review .process-card-number { color: #47677a; }
body.site-typography #process.process-review .process-card.is-active {
  background: linear-gradient(135deg, #dff2ff, #fff);
  border-color: #73c9f0;
  box-shadow: 0 0 0 3px #b9e9ff42, 0 8px 20px #00385226;
}
body.site-typography #process.process-review .process-card.is-complete {
  background: linear-gradient(145deg, #fff, #edf8e0);
  border-color: #aad47d;
}
body.site-typography #process.process-review .process-card.is-active .process-card-icon { background: #006da6; color: #fff; }
body.site-typography #process.process-review .process-card.is-complete .process-card-icon { background: #e6f5d4; color: #315f0c; }
body.site-typography #process.process-review .process-route-base { stroke: #d4eefa99; }
body.site-typography #process.process-review .process-route-progress { stroke: #b0e76a; }
body.site-typography #process.process-review .process-time-track > span { background: #b0e76a; }

/* Keep Google's familiar white cards and untouched multicolour logo and stars. */
.site-typography #google-reviews { background: #edf8ff; border-color: #cae6f4; }
.site-typography #google-reviews :is(.google-review-card, .google-rating-summary) { background: #fff; border-color: #d7eaf3; }
.site-typography #google-reviews :is(.google-review-quote, .google-review-person p, .google-reviews-header p) { color: var(--surface-copy); }
.site-typography #google-reviews .google-review-avatar { background: #e4f4ff; color: #006da6; }
.site-typography #google-reviews :is(.google-review-person h4, .google-rating-summary > strong) { color: var(--surface-ink); }
.site-typography #faq .faq-intro {
  background-image: linear-gradient(130deg, rgba(0,77,127,.94), rgba(0,95,145,.9) 62%, rgba(49,95,12,.9)), url('/overflow-pool-palm-garden.webp');
}
.site-typography #faq .faq-item { background: #f2faff; border-color: #cce7f4; }
.site-typography #faq .faq-item:nth-child(even) { background: #f6fbf0; border-color: #d5e8be; }
.site-typography #faq .faq-item[open] { background: #e8f6ff; border-color: #9fd1e9; }
.site-typography #faq .faq-item :is(summary, p) { color: var(--surface-ink); }
.site-typography #contact .contact-overlay { background: linear-gradient(110deg, rgba(0,77,127,.92), rgba(0,95,145,.86) 60%, rgba(49,95,12,.9)); }
.site-typography :is(.consultation-form, .pg-form) { background: #fff; color: var(--surface-ink); border-color: #cce7f4; }

/* About and service pages use the same blue/green surfaces. */
body.site-typography.about-page .ab-capabilities { background: linear-gradient(115deg, #e8f5dc, #f4fbec 55%, #eaf7ff); }
.site-typography.about-page .ab-capabilities :is(h3, p) { color: var(--surface-ink); }
.site-typography.about-page :is(.ab-story-content .ab-copy, .ab-location-card p) { color: var(--surface-copy); }
.site-typography.about-page .ab-location-choices > button { background: #fff; border-color: #c8e3f0; color: #006da6; }
.site-typography.about-page .ab-location-choices > button[aria-pressed="true"] { background: #006da6; border-color: #006da6; color: #fff; }
body.site-typography .pg-guide { background: linear-gradient(120deg, #e9f7ff, #f7fcff); color: var(--surface-ink); }
body.site-typography:is(.pg-theme-green, .pg-theme-sand) .pg-guide { background: linear-gradient(120deg, #edf8e1, #f8fcf1); }
body.site-typography .pg-guide--mosaic .pg-guide-item { background: #fff; border-color: #cce6f2; }
body.site-typography .pg-guide :is(h2, h3) { color: var(--surface-ink); }
body.site-typography .pg-guide-item p,
.site-typography .pg-section .pg-lead,
.site-typography :is(.pg-feature p, .pg-blog-card p, .pg-faq-list details > p, .pg-article-body p, .pg-legal p, .pg-legal ul) { color: var(--surface-copy); }
.site-typography .pg-guide-number { color: var(--brand-blue-ink, #006da6); }
.site-typography:is(.pg-theme-green, .pg-theme-sand) .pg-guide-number { color: var(--brand-green-ink, #3e7610); }
body.site-typography.pg-theme-night .pg-guide { background: linear-gradient(110deg, #005884, #006da6 65%, #3e7610); color: #fff; }
body.site-typography.pg-theme-night .pg-guide :is(h2, h3) { color: #fff; }
body.site-typography.pg-theme-night .pg-guide :is(.pg-guide-item p, .pg-eyebrow, .pg-guide-number, .pg-lead) { color: #e8f7ff; }
.site-typography :is(.pg-service-card, .pg-blog-card, .pg-contact-method) { border-color: #cce5f0; }
.site-typography .pg-filter { background: #fff; border-color: #bddff0; color: #006da6; }
.site-typography .pg-filter[aria-pressed="true"] { background: #006da6; border-color: #006da6; color: #fff; }
.site-typography .pg-faq-group details { background: #f1f9ff; border-color: #cce6f3; }
.site-typography .pg-faq-group details:nth-child(even) { background: #f5fbed; border-color: #d1e5ba; }
.site-typography .pg-faq-group details[open] { background: #e6f5ff; border-color: #a1d4eb !important; }
.site-typography :is(.pg-cta, .ab-cta) { background: linear-gradient(110deg, #005884, #006da6 64%, #3e7610); color: #fff; }
.site-typography :is(.pg-cta, .ab-cta) :is(h2, .ab-title) { color: #fff; }
.site-typography :is(.pg-cta p, .ab-cta .ab-kicker) { color: #e8f7ff; }
.site-typography :is(.pg-cta, .ab-cta) :is(.pg-button--light, .ab-button-light) { background: #fff; color: #005884 !important; border-color: #fff; }

/* Shared footer and menus stay clean, with white against a gentle blue surface. */
body.site-typography .site-footer { background: linear-gradient(120deg, #fff, #edf8ff); color: var(--surface-ink); border-color: #cce7f3; }
body.site-typography .site-footer h3 { color: var(--surface-ink); }
.site-typography .site-footer :is(.sf-brand > p, .sf-contact address, .sf-social-heading, .sf-bottom) { color: var(--surface-copy); }
.site-typography .site-footer :is(.sf-bottom, .sf-social) { border-color: #c7e3f0; }
body.site-typography .unified-header.is-scrolled { background: rgba(255,255,255,.97); border-color: #d0e9f4; color: var(--surface-ink); }
body.site-typography .unified-header .mobile-nav:not([hidden]),
body.site-typography .unified-header .services-menu:not([hidden]) { background: #fff; border-color: #cce7f3; color: var(--surface-ink); }