/* Approved white site theme. Loaded last and scoped to themed pages.
   Original contents, imagery and interactions are preserved. */

html:has(body.site-white[data-page]) {
  background: #fff !important;
  color-scheme: light;
}

body.site-white[data-page] {
  --white-ink: #203b4a;
  --white-copy: #425b66;
  --white-muted: #536c75;
  --white-teal: #176d77;
  --white-teal-hover: #125761;
  --white-soft: #f5f9f9;
  --white-line: #dce7e9;
  --white-coral: #b93d35;
  --white-coral-hover: #ae3933;
  --ink: var(--white-ink);
  --ink-soft: var(--white-copy);
  --muted: var(--white-muted);
  --paper: #fff;
  --paper-deep: var(--white-soft);
  --surface: #fff;
  --line: var(--white-line);
  --on-dark: var(--white-ink);
  --on-dark-muted: var(--white-copy);
  --on-dark-subtle: var(--white-muted);
  --cyan: #438f98;
  --cyan-bright: #dceff0;
  --coral-action: var(--white-coral);
  --coral-action-hover: var(--white-coral-hover);
  --focus: var(--white-teal);
  --focus-ring-light: var(--white-teal);
  --guide-ink: var(--white-ink);
  --guide-muted: var(--white-muted);
  --guide-teal: var(--white-teal);
  --guide-teal-dark: var(--white-teal-hover);
  --guide-line: var(--white-line);
  --shadow-sm: 0 4px 18px rgba(32, 59, 74, .035);
  --shadow: 0 8px 26px rgba(32, 59, 74, .055);
  --site-icon-stroke: var(--white-teal);
  --site-icon-border: var(--white-line);
  --site-icon-top: #fff;
  --site-icon-bottom: #f0f7f7;
  --icon-surface-color: #e8f3f2;
  --icon-accent-surface-color: #f6eeea;
  --icon-detail-color: var(--white-teal);
  color: var(--white-copy) !important;
  background: #fff !important;
}

/* Remove heavy finish without touching visibility, dimensions or imagery. */
body.site-white[data-page="home"] *,
body.site-white[data-page="home"] *::before,
body.site-white[data-page="home"] *::after,
body.site-white[data-page]:not([data-page="home"]) :not(:where(.responsive-project-device, .responsive-project-device *, .responsive-project-screen, .responsive-project-screen *)),
body.site-white[data-page]:not([data-page="home"]) :not(:where(.responsive-project-device, .responsive-project-device *, .responsive-project-screen, .responsive-project-screen *))::before,
body.site-white[data-page]:not([data-page="home"]) :not(:where(.responsive-project-device, .responsive-project-device *, .responsive-project-screen, .responsive-project-screen *))::after {
  box-shadow: none !important;
  text-shadow: none !important;
  border-color: var(--white-line) !important;
}

/* Light text formerly inherited from dark sections now follows its container.
   Functional SVG paths keep their own fills and strokes. */
body.site-white[data-page] :where(a, button, span, strong, b, small, em, li, label, summary, figcaption, svg) {
  color: inherit !important;
}

body.site-white[data-page] :is(h1, h2, h3, h4, h5, h6) {
  color: var(--white-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.site-white[data-page] :is(p, .lead, .brand-tagline, .hero-project-hint, .hero-project-head-note, .home-projects-category, .home-projects-status, .footer-search-copy, .footer-cookie-note, .footer-copyright, .nav-submenu-link small, .mobile-nav-link-copy small, .mobile-nav-intro p, .mobile-nav-footer p) {
  color: var(--white-copy) !important;
}

body.site-white[data-page] :is(.accent, .eyebrow, .guide-kicker, .guide-card-tag, .guide-card-cta, .text-link, .footer-kicker, .footer-intent-links-label, .deliverables-contact-kicker, .section-related-links-label, .service-label, .home-projects-arrow, .hero-project-open, .showcase-live, .gbp-project-address, .footer-lead h2 span) {
  color: var(--white-teal) !important;
  -webkit-text-fill-color: currentColor !important;
  background-image: none !important;
}

/* Every full-width area remains white, including the old dark bands. */
body.site-white[data-page] :is(main, .hero, .home-opening, .home-introduction, .mobile-work-reel, .proof-bar, .section, .section--dark, .section--tint, .section--white, .agency-visual-story, .gbp-spotlight, .guide-home-section, .home-projects, .cta-section, .site-footer) {
  color: var(--white-copy) !important;
  background: #fff !important;
}

/* Only decorative overlays are neutralised. The body pseudo-elements are
   the functional page loader: preserve their backdrop and brand mark. */
body.site-white[data-page] :is(.hero, .section, .agency-visual-story, .site-footer, .cta-section, .cta-card, .hero-showcase, .hero-project-carousel, .coverage-card, .sticky-label, .service-card, .deliverable, .process-step, .search-ai-compact, .agency-visual-card, .guide-card-media, .editorial-photo-frame)::before,
body.site-white[data-page] :is(.hero, .section, .agency-visual-story, .site-footer, .cta-section, .cta-card, .hero-showcase, .hero-project-carousel, .coverage-card, .sticky-label, .service-card, .deliverable, .process-step, .search-ai-compact, .agency-visual-card, .guide-card-media, .editorial-photo-frame)::after,
body.site-white[data-page] .showcase-grid {
  background: none !important;
  border-color: transparent !important;
  filter: none !important;
}

body.site-white[data-page] :is(.service-card, .coverage-card, .sticky-label, .process-step, .deliverable, .deliverables-contact, .cta-card, .agency-visual-card, .search-ai-compact, .guide-card, .home-projects-card, .mobile-work-card, .faq-list details) {
  color: var(--white-copy) !important;
  background: #fff !important;
  border-color: var(--white-line) !important;
  box-shadow: 0 4px 18px rgba(32, 59, 74, .035) !important;
}

body.site-white[data-page] :is(.agency-visual-card figcaption, .search-ai-compact figcaption, .search-ai-compact-lanes, .search-ai-compact-lanes > div, .guide-card-body, .faq-answer, .footer-search-strip, .footer-bottom, .footer-grid, .footer-lead, .footer-intent-links, .footer-direct-contacts) {
  color: var(--white-copy) !important;
  background: #fff !important;
}

body.site-white[data-page] :is(.service-number, .step-number, .city-chip, .city-chip--primary, .hero-project-count, .hero-project-online, .responsive-project-label, .editorial-photo-badge, .footer-platforms > span, .service-card .service-label) {
  color: var(--white-teal) !important;
  background: var(--white-soft) !important;
  border-color: var(--white-line) !important;
}

body.site-white[data-page] :is(.hero-project-count strong, .hero-project-caption strong, .hero-project-next strong, .search-ai-compact-lanes b, .deliverable b, .service-number, .footer-title, .brand-name, .brand-name span) {
  color: var(--white-ink) !important;
}

body.site-white[data-page] :is(.agency-visual-card figcaption > span, .search-ai-compact-lanes span, .hero-project-caption small, .hero-project-next > span, .hero-proof, .home-opening-more, .home-opening-more small, .footer-direct-contact small) {
  color: var(--white-muted) !important;
}

/* Retain the existing project imagery, devices and screenshot geometry. */
body.site-white[data-page] :is(.hero-project-carousel, .hero-project-track, .hero-project-slide, .hero-project-preview, .hero-project-preview.has-responsive-project-preview, .hero-project-caption, .hero-project-head, .hero-project-footer, .responsive-project-stage, .mobile-work-card, .mobile-work-card figure.has-responsive-project-preview, .mobile-work-card figcaption, .editorial-photo-frame, .guide-card-media) {
  color: var(--white-copy) !important;
  background: #fff !important;
}

body.site-white[data-page] .hero-project-carousel {
  box-shadow: 0 8px 28px rgba(32, 59, 74, .055) !important;
}

body.site-white[data-page] :is(.hero-project-browser-bar, .hero-project-progress) {
  background: #edf3f4 !important;
}

body.site-white[data-page] :is(.hero-project-progress i, .scroll-progress, .hero-project-online::before, .hero-proof span::before, .showcase-live::before, .editorial-photo-badge::before, .footer-kicker-mark, .footer-intent-links-label::before, .eyebrow::before, .guide-kicker::before, .service-card::after) {
  background: #438f98 !important;
}

body.site-white[data-page] .editorial-photo-badge::before {
  background: currentColor !important;
}

body.site-white[data-page="home"] :is(.hero-project-online, .hero-proof span, .showcase-live)::before {
  background: var(--white-teal) !important;
}

/* Keep the small core crisp; only its independent halo expands and fades. */
body.site-white[data-page="home"] .showcase-live {
  position: relative;
}

body.site-white[data-page="home"] .showcase-live::before {
  flex: 0 0 7px;
  animation: none;
  opacity: 1;
  transform: none;
}

body.site-white[data-page="home"] .showcase-live::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: currentColor;
  content: "";
  pointer-events: none;
  opacity: 0;
  transform: scale(1);
  transform-origin: center;
  animation: homeLiveHalo 2.8s ease-in-out infinite;
}

@keyframes homeLiveHalo {
  0% { opacity: 0; transform: scale(1); }
  18% { opacity: .24; }
  80%, 100% { opacity: 0; transform: scale(2.8); }
}

@media (prefers-reduced-motion: reduce) {
  body.site-white[data-page="home"] .showcase-live::after {
    animation: none;
  }
}

body.site-white[data-page] :is(.hero-project-open, .hero-project-controls button, .home-projects-buttons button, .home-projects-prev, .home-projects-next, .home-opening-more-arrow, .back-to-top) {
  color: var(--white-teal) !important;
  background: #fff !important;
  border-color: #b7d1d5 !important;
}

body.site-white[data-page] .hero-project-controls button,
body.site-white[data-page] .hero-project-controls button .ui-icon {
  animation: none !important;
}

/* Header, desktop dropdowns and JS-inserted compact-menu components. */
body.site-white[data-page] :is(.site-header, .nav-shell, .site-header.is-scrolled .nav-shell, .site-nav, .nav-submenu, .nav-submenu-list, .nav-submenu-intro, .nav-submenu-link, .nav-submenu-link--featured, .mobile-nav-header, .mobile-nav-intro, .mobile-nav-footer) {
  color: var(--white-ink) !important;
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.site-white[data-page] :is(.nav-shell, .nav-submenu) {
  box-shadow: 0 5px 20px rgba(32, 59, 74, .045) !important;
}

body.site-white[data-page] :is(.nav-primary-link, .nav-group-toggle, .nav-submenu-link, .mobile-nav-close, .nav-toggle, .mobile-nav-brand) {
  color: var(--white-ink) !important;
  background: #fff !important;
}

body.site-white[data-page] :is(.site-nav > .nav-primary-link[aria-current="page"], .nav-group.is-section-current > .nav-group-toggle, .nav-submenu-link[aria-current="page"], .nav-primary-link.is-section-current) {
  color: var(--white-teal) !important;
  background: #eff7f7 !important;
}

body.site-white[data-page] .nav-backdrop {
  background: rgba(32, 59, 74, .12) !important;
  backdrop-filter: none !important;
}

body.site-white[data-page] :is(.mobile-nav-brand-mark, .mobile-nav-proof, .mobile-nav-meta span) {
  color: var(--white-teal) !important;
  background: var(--white-soft) !important;
}

body.site-white[data-page] .mobile-nav-brand-mark::after {
  background: none !important;
}

body.site-white[data-page] :is(.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after, .mobile-nav-close span::before, .mobile-nav-close span::after) {
  background: var(--white-ink) !important;
}

body.site-white[data-page] .nav-group-chevron::before {
  border-color: currentColor !important;
}

/* Flat turquoise icon tiles keep every existing SVG and its detail layers. */
body.site-white[data-page] :is(.section--dark, .hero, .site-footer, .site-nav, .nav-submenu-link--featured) {
  --icon-surface-color: #e8f3f2 !important;
  --icon-accent-surface-color: #f6eeea !important;
  --icon-detail-color: #176d77 !important;
}

body.site-white[data-page] :is(.icon-tile, .service-icon, .proof-icon, .deliverables-contact-icon, .mobile-nav-link-icon, .nav-submenu-icon, .home-opening-more-arrow, .footer-cookie-mark) {
  --icon-surface-color: #e8f3f2 !important;
  --icon-accent-surface-color: #f6eeea !important;
  --icon-detail-color: #176d77 !important;
  color: var(--white-teal) !important;
  background: #f3f8f8 !important;
  border-color: var(--white-line) !important;
}

body.site-white[data-page] :is(.icon-tile, .service-icon, .proof-icon, .deliverables-contact-icon, .mobile-nav-link-icon, .nav-submenu-icon) > .ui-icon {
  filter: none !important;
}

/* FAQ plus/minus are background drawings, so keep their functional layers. */
body.site-white[data-page] .faq-list summary {
  color: var(--white-ink) !important;
  background: #fff !important;
}

body.site-white[data-page] .faq-list summary::after {
  color: var(--white-teal) !important;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat,
    #f3f8f8 !important;
}

body.site-white[data-page] .faq-list details[open] summary::after {
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    #f3f8f8 !important;
}

body.site-white[data-page] .feature-list li::before {
  background-color: #edf6f3 !important;
}

/* Secondary actions, direct-contact tiles and floating controls. */
body.site-white[data-page] :is(.button--secondary, .footer-direct-contact, .deliverables-contact-direct a, .floating-whatsapp, .mobile-nav-footer a) {
  color: var(--white-teal) !important;
  background: #fff !important;
  border-color: #bfd6d9 !important;
}

body.site-white[data-page] :is(.footer-direct-contact-icon, .deliverables-contact-direct-icon, .floating-whatsapp__label) {
  color: var(--white-teal) !important;
  background: none !important;
}

body.site-white[data-page] .floating-whatsapp::before {
  background: none !important;
}

body.site-white[data-page] :is(.site-footer .brand img, .mobile-nav-brand img) {
  filter: none !important;
}

body.site-white[data-page] :is(.footer-links a, .footer-legal-links a, .footer-intent-links a, .footer-google-project a, .section-related-links a) {
  color: var(--white-teal) !important;
}

/* Primary actions retain the site's coral identity and legible white labels. */
body.site-white[data-page] :is(.button--primary, .button--coral, .button--light, .mobile-nav-cta, .footer-cta, .deliverables-contact-action > .button, .skip-link) {
  color: #fff !important;
  background: var(--white-coral) !important;
  border-color: var(--white-coral) !important;
}

body.site-white[data-page] :is(.button--primary, .button--coral, .button--light, .mobile-nav-cta, .footer-cta, .deliverables-contact-action > .button, .skip-link) :is(span, strong, small, svg) {
  color: #fff !important;
}

/* Do not clear pseudo backgrounds used as arrow masks. */
body.site-white[data-page] :is(.button--primary, .button--coral, .button--light, .mobile-nav-cta, .footer-cta)::after {
  color: #fff !important;
  background-color: currentColor !important;
}

body.site-white[data-page] :is(.button--primary, .button--coral, .button--light, .mobile-nav-cta, .footer-cta):is(:hover, :active) {
  color: #fff !important;
  background: var(--white-coral-hover) !important;
  border-color: var(--white-coral-hover) !important;
}

body.site-white[data-page] :is(.button--secondary, .footer-direct-contact, .deliverables-contact-direct a, .floating-whatsapp, .nav-primary-link:not(.mobile-nav-cta), .nav-group-toggle, .nav-submenu-link, .mobile-nav-footer a, .hero-project-controls button, .home-projects-buttons button, .home-projects-prev, .home-projects-next, .back-to-top):is(:hover, :active),
body.site-white[data-page] .hero-project-slide:is(:hover, :focus-visible) .hero-project-open {
  color: var(--white-teal-hover) !important;
  background: #eff7f7 !important;
  border-color: #86b5bd !important;
}

body.site-white[data-page] :is(.guide-card, .home-projects-card, .service-card, .deliverable, .process-step, .mobile-work-card):is(:hover, :focus-visible) {
  background: #fff !important;
  border-color: #bdd4d8 !important;
  box-shadow: 0 6px 22px rgba(32, 59, 74, .055) !important;
}

body.site-white[data-page] :is(.text-link, .footer-links a, .footer-legal-links a, .footer-intent-links a, .footer-google-project a, .section-related-links a):hover {
  color: var(--white-teal-hover) !important;
}

body.site-white[data-page] :focus-visible {
  outline: 3px solid var(--white-teal) !important;
  outline-offset: 3px !important;
}

body.site-white[data-page] ::selection {
  color: var(--white-ink);
  background: #dceff0;
}

/* Final visual QA: preserve the wordmark accent and remove extra framing. */
body.site-white[data-page] :is(.process-grid, .rich-copy, .section-related-links, .faq-list) {
  color: var(--white-copy) !important;
  background: #fff !important;
}
body.site-white[data-page] .container {
  background-image: none !important;
}

body.site-white[data-page] .brand-name > span {
  color: var(--white-coral) !important;
}

body.site-white[data-page] .footer-links > li {
  color: var(--white-copy) !important;
}

/* The existing WhatsApp artwork is white and needs a coloured surface. */
body.site-white[data-page] .floating-actions a.floating-whatsapp,
body.site-white[data-page] .floating-actions a.floating-whatsapp:is(:hover, :active, :visited) {
  color: #fff !important;
  background: #075e54 !important;
  border-color: #075e54 !important;
}
body.site-white[data-page] .floating-whatsapp .floating-whatsapp__label {
  color: #fff !important;
}
body.site-white[data-page] .whatsapp-official-icon {
  background-color: #075e54 !important;
  border-radius: 8px;
}

body.site-white[data-page] .home-opening .hero-project-carousel {
  border-color: transparent !important;
  box-shadow: none !important;
}

html:not(.nav-compact) body.site-white[data-page] .site-header .site-nav > .nav-primary-link:not(.button),
html:not(.nav-compact) body.site-white[data-page] .site-header .site-nav > .nav-group > .nav-group-toggle {
  background: #fff !important;
  border-color: transparent !important;
}

html:not(.nav-compact) body.site-white[data-page] .site-header .site-nav > .nav-primary-link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--white-teal);
  text-underline-offset: 6px;
}

@media (forced-colors: active) {
  body.site-white[data-page] .faq-list summary::after {
    color: CanvasText !important;
    background: Canvas !important;
  }
  body.site-white[data-page] :focus-visible {
    outline-color: Highlight !important;
  }
}

/* Keep enlarged words complete by giving narrow labels and workflow copy room. */
@media screen and (width < 320px) {
  body.site-white.site-refined[data-page-detail="agency"] .standard-hero.inner-hero > .container > .eyebrow,
  body.site-white[data-page-detail="italia"] .section-intro-copy > .eyebrow {
    letter-spacing: 0;
  }

  body.site-white[data-page-detail="italia"] .section-intro-copy > .eyebrow {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  body.site-white.site-refined[data-page-detail="roma"] .standard-hero > .container > .lead {
    font-size: min(1rem, 10vw) !important;
  }
}

@container section-intro-copy (max-width: 10rem) {
  body.site-white[data-page-detail="services"] .services-workflow-steps > li {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}


/* Approved refinements: lighter frames, spacing and separators. */

body.site-white.site-refined[data-page] {
  --white-line: #e7edef;
}

/* One surface per project: remove nested decorative frames, keep devices. */
body.site-white.site-refined[data-page] :is(.hero-project-track, .hero-project-caption, .home-projects-thumb) {
  border-color: transparent !important;
  box-shadow: none !important;
}

body.site-white.site-refined[data-page] .hero-project-track {
  border-radius: 10px !important;
}

body.site-white.site-refined[data-page] :is(.home-projects-card, .mobile-work-card),
body.site-white.site-refined[data-page] :is(.home-projects-card, .mobile-work-card):hover {
  border-color: transparent !important;
  box-shadow: none !important;
}

body.site-white.site-refined[data-page] .home-projects-card {
  padding: 0 0 16px !important;
  border-radius: 10px !important;
}

body.site-white.site-refined[data-page] :is(.home-projects-card, .mobile-work-card):focus-visible {
  border-color: var(--white-teal) !important;
}

body.site-white.site-refined[data-page] .home-opening :is(.hero-project-count, .hero-project-online, .hero-project-open) {
  background: #fff !important;
  border-color: transparent !important;
}

/* Consistent section rhythm; leave the first screen's responsive layout alone. */
body.site-white.site-refined[data-page] main > :is(.section, .gbp-spotlight, .guide-home-section, .cta-section) {
  padding-block: clamp(60px, 6vw, 88px) !important;
}

body.site-white.site-refined[data-page] :is(.section-heading, .home-projects-heading, .guide-home-heading) {
  margin-bottom: clamp(28px, 3.2vw, 40px) !important;
}

/* Open up nested text/method panels while retaining their existing columns. */
body.site-white.site-refined[data-page] :is(.rich-copy, .process-grid) {
  border-color: transparent !important;
  box-shadow: none !important;
}

body.site-white.site-refined[data-page] .rich-copy {
  padding-block: clamp(24px, 3.2vw, 40px) !important;
}

body.site-white.site-refined[data-page] :is(.service-card, .process-step, .deliverable, .guide-card),
body.site-white.site-refined[data-page] :is(.service-card, .process-step, .deliverable, .guide-card):hover {
  box-shadow: none !important;
}

/* Existing separators become the quiet visual boundaries on white. */
body.site-white.site-refined[data-page] .home-projects-footer {
  margin-top: 24px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--white-line) !important;
}

body.site-white.site-refined[data-page] main > .guide-home-section {
  border-top: 1px solid var(--white-line) !important;
}

body.site-white.site-refined[data-page] .section-related-links {
  border-width: 1px 0 0 !important;
  border-radius: 0 !important;
  padding: 20px 0 0 !important;
}

@media (max-width: 600px) {
  body.site-white.site-refined[data-page] main > :is(.section, .gbp-spotlight, .guide-home-section, .cta-section) {
    padding-block: 52px !important;
  }

  body.site-white.site-refined[data-page] .home-introduction {
    padding-block: 40px !important;
  }
}


/* general-pages.css */
/* General inner pages. Append after the shared white theme and original CSS.
   Colour/surface overrides only: preserve copy, images, layout, type, native
   details state, form behaviour, SVG drawings and all responsive rules.
   privacy.html must receive data-page="privacy" for this shared scope. */

body.site-white[data-page]:not([data-page="home"]) {
  --gbp-teal: var(--white-teal);
  --gbp-soft: var(--white-soft);
  --breadcrumb-accent: var(--white-teal);
}

/* Page introductions and complete bands. */
body.site-white[data-page]:not([data-page="home"]) :is(
  .inner-hero, .page-hero, .privacy-hero, .privacy-section, .error-page,
  .territory-section, .contact-direct-section, .contact-continuity-section,
  .search-ai-section, .service-quote, .gbp-page, .gbp-hero, .gbp-overview,
  .gbp-section, .gbp-section--soft
) {
  color: var(--white-copy) !important;
  background: #fff !important;
  border-color: var(--white-line) !important;
  box-shadow: none !important;
}

/* Only named decorative background layers: content and image nodes survive. */
body.site-white[data-page]:not([data-page="home"]) :is(
  .inner-hero, .page-hero, .privacy-hero, .error-page, .statement-card,
  .value-card, .brand-story, .brand-lockup__mark-frame, .agency-process-visual,
  .contact-direct-overview, .contact-continuity-panel, .territory-service-note,
  .territory-panel, .tourism-atlas, .city-guides-hub, .city-guide-cta,
  .search-ai-path-card, .search-ai-map, .seo-panel
)::before,
body.site-white[data-page]:not([data-page="home"]) :is(
  .inner-hero, .page-hero, .privacy-hero, .error-page, .statement-card,
  .value-card, .brand-story, .brand-lockup__mark-frame, .agency-process-visual,
  .contact-direct-overview, .contact-continuity-panel, .territory-service-note,
  .territory-panel, .tourism-atlas, .city-guides-hub, .city-guide-cta,
  .search-ai-path-card, .search-ai-map, .seo-panel
)::after {
  background: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Additional service, agency and SEO surfaces absent from the homepage. */
body.site-white[data-page]:not([data-page="home"]) :is(
  .statement-card, .values-grid, .value-card, .brand-story,
  .brand-lockup__mark-frame, .agency-process-visual, .agency-process-visual--dark,
  .agency-process-visual--light, .agency-process-visual-copy,
  .agency-process-visual-media, .seo-panel, .search-box, .search-result,
  .search-ai-map, .search-ai-map-media, .search-ai-map figcaption,
  .search-ai-path-card, .search-ai-proof, .quote-brief, .gbp-callout,
  .roma-case-study, .roma-case-copy, .roma-case-points li,
  .compact-panel, .compact-panel-summary, .compact-panel-body,
  .compact-controls,
  .compact-example-list
) {
  color: var(--white-copy) !important;
  background: #fff !important;
  border-color: var(--white-line) !important;
  box-shadow: none !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(
  .breadcrumb-list, .breadcrumb-current, .breadcrumb-separator,
  .agency-process-visual-copy > p, .search-description, .search-ai-map figcaption,
  .quote-reading, .quote-note, .quote-checklist li, .quote-item p,
  .compact-panel-body > p, .compact-status, .compact-search-label, .roma-case-location,
  .roma-case-points small, .brand-lockup__tagline
) {
  color: var(--white-copy) !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(
  .breadcrumb-list a, .agency-visual-kicker, .quote-kicker, .quote-brief-label,
  .quote-checklist svg, .quote-reading a, .search-domain, .search-title,
  .search-ai-map-label span, .roma-case-kicker, .roma-browser-url,
  .compact-examples-heading, .compact-panel-body > p a
) {
  color: var(--white-teal) !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(
  .brand-lockup__name, .search-ai-map-label strong, .search-ai-map figcaption strong,
  .roma-case-points strong, .contact-card b, .contact-card strong
) {
  color: var(--white-ink) !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(
  .brand-lockup__accent, .contact-brand-watermark__name > span
) {
  color: var(--white-coral) !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(
  .agency-visual-tags li, .brand-lockup__domain, .search-ai-map-label,
  .seo-signal, .roma-browser-bar, .roma-browser-status, .search-query,
  .compact-toggle, .compact-search-reset
) {
  color: var(--white-teal) !important;
  background: var(--white-soft) !important;
  border-color: var(--white-line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* A web icon gives the agency's domain badge a meaningful visual cue. */
body.site-white[data-page="agenzia"][data-page-detail="agency"] .brand-lockup__domain {
  --domain-icon-size: 24px;
  grid-template-columns: var(--domain-icon-size) minmax(0, 1fr);
}
body.site-white[data-page="agenzia"][data-page-detail="agency"] .brand-lockup__domain::before {
  content: none;
}
body.site-white[data-page="agenzia"][data-page-detail="agency"] .brand-lockup__domain-icon {
  --icon-surface-color: #f5fbfb;
  --icon-accent-surface-color: #cce6e8;
  --icon-detail-color: currentColor;
  width: var(--domain-icon-size);
  height: var(--domain-icon-size);
  color: inherit;
}
body.site-white[data-page="agenzia"][data-page-detail="agency"] .brand-lockup__domain > span {
  min-width: 0;
}
@media (max-width: 640px) {
  body.site-white[data-page="agenzia"][data-page-detail="agency"] .brand-lockup__domain {
    --domain-icon-size: 20px;
  }
  @container mobile-agency-brand (max-width: 16rem) {
    body.site-white[data-page="agenzia"][data-page-detail="agency"] .brand-lockup__domain {
      /* Reserve padding, borders, gap and the icon before fitting the address. */
      font-size: min(clamp(.9rem, 4cqi, 1rem), calc((100cqi - 54px) / 13));
    }
  }
}

/* The agency identity supports the copy instead of taking most of its row. */
body.site-white[data-page-detail="agency"] .agency-identity-layout {
  grid-template-columns: clamp(17rem, 28vw, 22rem) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
}
body.site-white[data-page-detail="agency"] .agency-identity-layout .brand-story {
  min-height: 0;
  padding: 28px 22px;
  gap: 20px;
  border-radius: 24px;
}
body.site-white[data-page-detail="agency"] .agency-identity-layout .brand-lockup__domain {
  --domain-icon-size: 20px;
  gap: 8px;
  padding: 8px 12px;
  font-size: min(.9375rem, calc((100cqi - 54px) / 13));
}
body.site-white[data-page-detail="agency"] .agency-identity-layout .brand-lockup__mark-frame {
  width: 132px;
  border-radius: 30px;
}
body.site-white[data-page-detail="agency"] .agency-identity-layout .brand-lockup__caption {
  gap: 10px;
}
body.site-white[data-page-detail="agency"] .agency-identity-layout .brand-lockup__name {
  font-size: min(1.8rem, 9cqi);
}
body.site-white[data-page-detail="agency"] .agency-identity-layout .brand-lockup__tagline {
  max-width: 100%;
  gap: 7px;
  font-size: .875rem;
  line-height: 1.5;
}
body.site-white[data-page-detail="agency"] .agency-identity-layout .brand-lockup__tagline::before,
body.site-white[data-page-detail="agency"] .agency-identity-layout .brand-lockup__tagline::after {
  width: 12px;
  flex-basis: 12px;
  height: 2px;
}
body.site-white[data-page-detail="agency"] .agency-identity-layout .split-copy {
  padding-top: 0;
}
body.site-white[data-page-detail="agency"] .agency-identity-layout .split-copy h2 {
  max-width: 25ch;
  margin-bottom: 22px;
  font-size: min(clamp(2.125rem, 3.5vw, 3.25rem), 13cqi);
  line-height: 1.12;
  letter-spacing: -.035em;
  text-wrap: balance;
}
body.site-white[data-page-detail="agency"] .agency-identity-layout .split-copy > p {
  max-width: 70ch;
}
@media (max-width: 900px) {
  body.site-white[data-page-detail="agency"] .agency-identity-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}
@media (min-width: 601px) and (max-width: 900px) {
  body.site-white[data-page-detail="agency"] .agency-identity-layout .brand-story {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-areas: "mark domain" "mark caption";
    justify-items: start;
    align-items: center;
    gap: 12px 24px;
    padding: 24px;
    text-align: left;
  }
  body.site-white[data-page-detail="agency"] .agency-identity-layout .brand-lockup__domain {
    grid-area: domain;
    /* The logo and column gap also occupy space inside this container. */
    font-size: min(.9375rem, calc((100cqi - 190px) / 13));
  }
  body.site-white[data-page-detail="agency"] .agency-identity-layout .brand-lockup__mark-frame {
    grid-area: mark;
    width: 112px;
  }
  body.site-white[data-page-detail="agency"] .agency-identity-layout .brand-lockup__caption {
    grid-area: caption;
    justify-items: start;
    container-type: inline-size;
  }
}
@media (max-width: 600px) {
  body.site-white[data-page-detail="agency"] .agency-identity-layout .brand-story {
    padding: 22px 18px;
    gap: 16px;
  }
  body.site-white[data-page-detail="agency"] .agency-identity-layout .brand-lockup__mark-frame {
    width: 104px;
    border-radius: 26px;
  }
}

/* An opaque light caption backing replaces dark photographic scrims without
   altering the photo, crop, caption position or its original dimensions. */
body.site-white[data-page]:not([data-page="home"]) .human-proof {
  background: #fff !important;
  border-color: var(--white-line) !important;
  box-shadow: none !important;
}
body.site-white[data-page]:not([data-page="home"]) .human-proof::after {
  background: none !important;
}
body.site-white[data-page]:not([data-page="home"]) .human-proof figcaption {
  color: var(--white-ink) !important;
}
body.site-white[data-page]:not([data-page="home"]) .human-proof figcaption::before {
  background: rgba(255, 255, 255, .97) !important;
  filter: none !important;
  box-shadow: none !important;
}
body.site-white[data-page]:not([data-page="home"]) .human-proof figcaption span {
  color: var(--white-teal) !important;
}

/* City/region directories, tourist-area atlas and informative chips. */
body.site-white[data-page]:not([data-page="home"]) :is(
  .territory-service-note, .italy-regions-panel, .territory-panel,
  .tourism-atlas, .tourism-card, .territory-atlas-cta, .city-guides-hub,
  .city-guide-card, .city-guide-card--office, .city-guide-cta,
  .city-detail, .region-card, .italy-disclosure, .italy-disclosure-content
) {
  color: var(--white-copy) !important;
  background: #fff !important;
  border-color: var(--white-line) !important;
  box-shadow: none !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(.territory-panel, .tourism-card) {
  --territory-accent: var(--white-teal) !important;
  --tourism-accent: var(--white-teal) !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(
  .territory-index a, .territory-list a, .region-cities a, .tourism-place-list a,
  .city-guide-action, .city-guide-region, .city-guide-card strong,
  .italy-disclosure-title, .italy-disclosure-indicator,
  .territory-subheading p a, .territory-panel > p a
) {
  color: var(--white-teal) !important;
  border-color: var(--white-line) !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(
  .tourism-place-list li, .territory-list li, .city-guide-card small,
  .italy-disclosure-copy, .guide-directory-status, .guide-directory-label,
  .city-guide-visual-metric, .territory-service-note > div > span
) {
  color: var(--white-copy) !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(
  .italy-region-list li, .city-guide-visual-metric, .territory-index a,
  .italy-disclosure-indicator, .italy-disclosure-toggle, .guide-directory-clear,
  .guide-directory-toggle, .city-guide-cta-link
) {
  color: var(--white-teal) !important;
  background: var(--white-soft) !important;
  border-color: #c6dce0 !important;
  box-shadow: none !important;
}

/* Native disclosure glyphs retain content/rotation/state from original CSS. */
body.site-white[data-page]:not([data-page="home"]) .compact-panel-summary::after {
  color: var(--white-teal) !important;
  background: var(--white-soft) !important;
  border-color: #c6dce0 !important;
  box-shadow: none !important;
}
body.site-white[data-page]:not([data-page="home"]) .italy-disclosure-indicator::before,
body.site-white[data-page]:not([data-page="home"]) .italy-disclosure-indicator::after {
  background: currentColor !important;
}
body.site-white[data-page]:not([data-page="home"]) :is(
  .compact-toggle[aria-expanded="true"],
  .compact-panel[open] > .compact-panel-summary,
  .italy-disclosure[open] > .italy-disclosure-summary,
  .italy-disclosure-toggle[aria-expanded="true"],
  .guide-directory-toggle[aria-expanded="true"]
) {
  color: var(--white-teal) !important;
  background: #eaf4f4 !important;
  border-color: #9fc7cd !important;
}

/* Direct contact cards and continuity information. */
body.site-white[data-page]:not([data-page="home"]) :is(
  .contact-direct-overview, .contact-channel-panel, .contact-card,
  .contact-channel-note, .contact-prep-note, .contact-continuity-panel,
  .contact-continuity-grid article, .contact-continuity-closing,
  .contact-form, .form-assurance
) {
  color: var(--white-copy) !important;
  background: #fff !important;
  border-color: var(--white-line) !important;
  box-shadow: none !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(
  .contact-channel-kicker, .contact-continuity-label, .contact-inline-label,
  .inline-contact-link, .contact-channel-note a, .contact-continuity-closing a
) {
  color: var(--white-teal) !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(
  .contact-card small, .contact-card > span:not(.contact-card-icon),
  .contact-brand-watermark__tagline, .contact-prep-note > span
) {
  color: var(--white-copy) !important;
}

/* The existing WhatsApp symbol includes white artwork. */
body.site-white[data-page]:not([data-page="home"]) .contact-whatsapp-button {
  color: #fff !important;
  background: #075e54 !important;
  border-color: #075e54 !important;
}
body.site-white[data-page]:not([data-page="home"]) .contact-whatsapp-button :is(span, strong, small, svg) {
  color: #fff !important;
}

/* Google Business Profile service, with all navigation and destinations kept. */
body.site-white[data-page]:not([data-page="home"]) :is(
  .gbp-service-card, .gbp-service-card--assistance, .gbp-project,
  .gbp-project-destination, .gbp-closing, .gbp-section-nav,
  .gbp-photo-frame, .gbp-guide-grid a
) {
  color: var(--white-copy) !important;
  background: #fff !important;
  border-color: var(--white-line) !important;
  box-shadow: none !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(
  .gbp-section-nav a, .gbp-section-nav span, .gbp-project-copy p a,
  .gbp-project-domain, .gbp-card-label, .gbp-text-link, .gbp-guide-arrow,
  .gbp-hero h1 span, .gbp-hero-more, .gbp-hero-more strong
) {
  color: var(--white-teal) !important;
  text-decoration-color: currentColor !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(
  .gbp-destination-label, .gbp-project-destination small, .gbp-hero-more small,
  .gbp-domain, .gbp-inline-domain, .gbp-hero-visual figcaption,
  .gbp-guide-grid a > span:first-child
) {
  color: var(--white-copy) !important;
}

/* Neutral, readable icon tiles. SVG fills/strokes and paths stay intact. */
body.site-white[data-page]:not([data-page="home"]) :is(
  .statement-icon, .quote-icon, .contact-card-icon:not(.contact-card-icon--whatsapp),
  .contact-continuity-icon, .contact-prep-icon, .inline-contact-icon,
  .territory-note-icon, .territory-panel-icon, .tourism-card-icon,
  .city-guide-map-icon, .roma-case-point-icon, .gbp-benefit-icon,
  .gbp-step-icon, .gbp-destination-icon, .gbp-photo-pin, .gbp-hero-more-arrow,
  .privacy-section-icon
) {
  --icon-surface-color: #e8f3f2 !important;
  --icon-accent-surface-color: #f6eeea !important;
  --icon-detail-color: var(--white-teal) !important;
  color: var(--white-teal) !important;
  background: var(--white-soft) !important;
  border-color: var(--white-line) !important;
  box-shadow: none !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(
  .quote-brief, .gbp-project, .gbp-closing, .contact-continuity-panel,
  .tourism-atlas, .territory-service-note
) {
  --icon-surface-color: #e8f3f2 !important;
  --icon-accent-surface-color: #f6eeea !important;
  --icon-detail-color: var(--white-teal) !important;
}

/* Privacy information panels and explicitly distinguishable current section. */
body.site-white[data-page]:not([data-page="home"]) :is(
  .privacy-controller-card, .privacy-index, .privacy-intro, .privacy-block,
  .privacy-block--cookie, .privacy-highlights > div, .privacy-field-grid > div,
  .privacy-contact-grid a, .privacy-cookie-facts > div, .privacy-data-list article,
  .privacy-check-list li
) {
  color: var(--white-copy) !important;
  background: #fff !important;
  border-color: var(--white-line) !important;
  box-shadow: none !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(
  .privacy-controller-card > strong, .privacy-controller-card dd,
  .privacy-cookie-facts strong, .privacy-contact-grid strong,
  .privacy-field-grid b, .privacy-highlights b
) {
  color: var(--white-ink) !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(
  .privacy-controller-card dt, .privacy-controller-card > span:not(.privacy-card-label),
  .privacy-cookie-facts span, .privacy-highlights span, .privacy-field-grid span,
  .privacy-contact-grid span, .privacy-updated, .privacy-check-list
) {
  color: var(--white-copy) !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(
  .privacy-card-label, .privacy-overline, .privacy-section-number,
  .privacy-index > span, .privacy-index a, .privacy-controller-card a,
  .privacy-block a, .privacy-data-list article > span
) {
  color: var(--white-teal) !important;
  text-decoration-color: currentColor !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(
  .privacy-cookie-callout, .privacy-hero-badges span
) {
  color: var(--white-copy) !important;
  background: var(--white-soft) !important;
  border-color: #c6dce0 !important;
  box-shadow: none !important;
}

body.site-white[data-page]:not([data-page="home"]) .privacy-index a:is(.is-active, [aria-current="location"]) {
  color: var(--white-teal) !important;
  background: #eaf4f4 !important;
  border-color: #9fc7cd !important;
  text-decoration: underline !important;
  text-underline-offset: .2em;
}

body.site-white[data-page]:not([data-page="home"]) :is(
  .privacy-section-number, .brand-lockup__domain, .privacy-hero-badges span
)::before,
body.site-white[data-page]:not([data-page="home"]) .brand-lockup__tagline::before,
body.site-white[data-page]:not([data-page="home"]) .brand-lockup__tagline::after {
  background: var(--white-teal) !important;
  box-shadow: none !important;
}

/* Existing fields only; native checkboxes, selects and validation survive. */
body.site-white[data-page]:not([data-page="home"]) :is(
  .form-field input:not([type="checkbox"]):not([type="radio"]),
  .form-field textarea, .form-field select, .guide-directory-search input,
  .compact-search input, .brief-model textarea
) {
  color: var(--white-ink) !important;
  background-color: #fff !important;
  border-color: #a9c2c9 !important;
  caret-color: var(--white-teal) !important;
  box-shadow: none !important;
}
body.site-white[data-page]:not([data-page="home"]) :is(
  .form-field input, .form-field textarea, .guide-directory-search input,
  .compact-search input, .brief-model textarea
)::placeholder {
  color: var(--white-muted) !important;
}
body.site-white[data-page]:not([data-page="home"]) :is(
  .form-field label, .checkbox-field, .form-note, .brief-model label,
  .brief-model legend, .brief-model .brief-hint
) {
  color: var(--white-copy) !important;
}
body.site-white[data-page]:not([data-page="home"]) :is(
  .checkbox-field input, .form-field input[type="checkbox"],
  .form-field input[type="radio"]
) {
  accent-color: var(--white-teal) !important;
}
body.site-white[data-page]:not([data-page="home"]) :is(
  .form-field input, .form-field textarea, .form-field select,
  .guide-directory-search input, .compact-search input, .brief-model textarea
):focus-visible {
  border-color: var(--white-teal) !important;
  outline: 3px solid var(--white-teal) !important;
  outline-offset: 3px !important;
}
body.site-white[data-page]:not([data-page="home"]) :is(
  .form-field input, .form-field textarea, .form-field select
)[aria-invalid="true"] {
  border-color: var(--white-coral) !important;
}
body.site-white[data-page]:not([data-page="home"]) .form-status:not(:empty) {
  color: var(--white-ink) !important;
  background: var(--white-soft) !important;
}

/* Preserve the GBP checkmark drawn with two borders. */
body.site-white[data-page]:not([data-page="home"]) .gbp-check-list li::before {
  border-color: var(--white-teal) !important;
}

/* Resting and active feedback remains visible on all the pale controls. */
body.site-white[data-page]:not([data-page="home"]) :is(
  .contact-card[href], .city-guide-card, .privacy-index a,
  .privacy-contact-grid a, .compact-toggle, .compact-search-reset,
  .guide-directory-clear, .guide-directory-toggle, .italy-disclosure-toggle,
  .compact-panel-summary, .italy-disclosure-summary, .city-guide-cta-link
):is(:hover, :active) {
  color: var(--white-teal) !important;
  background: #eff7f7 !important;
  border-color: #9fc7cd !important;
  box-shadow: none !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(
  .quote-brief, .gbp-project, .gbp-closing, .privacy-index,
  .privacy-controller-card, .privacy-block, .territory-panel, .tourism-card,
  .city-guides-hub, .contact-channel-panel, .contact-continuity-panel,
  .compact-panel
) :focus-visible {
  outline-color: var(--white-teal) !important;
}


/* portfolio-pages.css */
/* White site extension: portfolio and project case studies.
   Colour and surface overrides only. Device shells, image crops, layout,
   scroll-snap geometry and responsive viewport sizes remain untouched. */

body.site-white[data-page]:not([data-page="home"]) :is(.portfolio-card, .portfolio-body, .portfolio-visual-story, .portfolio-visual-story figcaption, .portfolio-next-project, .portfolio-next-project-footer, .case-main, .case-hero, .case-section, .case-section--soft, .case-cta, .case-cta-panel, .case-facts, .case-pillar, .case-panel, .case-panel--light, .case-journey-item, .case-related, .case-project-link) {
  color: var(--white-copy) !important;
  background: #fff !important;
  border-color: var(--white-line) !important;
  box-shadow: none !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(.portfolio-next-project, .case-hero, .case-cta-panel, .case-pillar)::before,
body.site-white[data-page]:not([data-page="home"]) :is(.portfolio-next-project, .case-hero, .case-cta-panel, .case-pillar)::after {
  background: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Project thumbnails keep all original desktop/tablet/phone components. */
body.site-white[data-page]:not([data-page="home"]) :is(.portfolio-media, .portfolio-media.has-responsive-project-preview, .responsive-project-stage, .case-browser, .case-browser.has-responsive-project-preview, .case-browser.has-responsive-project-carousel) {
  color: var(--white-copy) !important;
  background: #fff !important;
  border-color: var(--white-line) !important;
  box-shadow: none !important;
}

body.site-white[data-page]:not([data-page="home"]) .portfolio-card:is(:hover, :focus-within),
body.site-white[data-page]:not([data-page="home"]) .case-preview-link:is(:hover, :focus-visible) .case-browser,
body.site-white[data-page]:not([data-page="home"]) .case-project-link:is(:hover, :focus-visible) {
  background: #fff !important;
  border-color: #bfd6d9 !important;
  box-shadow: none !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(.portfolio-body h2, .portfolio-body h3, .portfolio-title-link, .portfolio-next-project h3, .portfolio-next-project strong, .case-title, .case-title-client, .case-title-summary, .case-copy h2, .case-section-heading h2, .case-pillar h3, .case-panel h2, .case-panel h3, .case-journey-item h3, .case-related h2, .case-cta-panel h2, .case-project-link strong, .case-fact dd, .case-quote) {
  color: var(--white-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(.portfolio-body p, .portfolio-visual-story figcaption > p, .portfolio-next-project p, .portfolio-next-project small, .case-lead, .case-copy p, .case-intro, .case-section-copy p, .case-pillar p, .case-panel p, .case-journey-item p, .case-cta-panel p) {
  color: var(--white-copy) !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(.portfolio-location, .portfolio-scope-note, .filter-status, .case-browser-url, .case-project-link span, .project-preview-swipe-hint) {
  color: var(--white-muted) !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(.case-kicker, .case-section-label, .case-fact dt, .case-domain, .portfolio-next-project .eyebrow, .portfolio-next-project-list li > span, .portfolio-next-project-actions .text-link, .portfolio-next-project-actions .text-link::after) {
  color: var(--white-teal) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(.case-kicker, .case-section-label)::before,
body.site-white[data-page]:not([data-page="home"]) :is(.filter-status, .portfolio-next-project-heading)::after,
body.site-white[data-page]:not([data-page="home"]) .filter-status::before {
  background: var(--white-teal) !important;
  box-shadow: none !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(.portfolio-index, .portfolio-meta .tag, .case-tags li, .case-service-link, .case-browser-bar, .case-browser-url, .filter-status) {
  color: var(--white-teal) !important;
  background: var(--white-soft) !important;
  border-color: var(--white-line) !important;
  box-shadow: none !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(.portfolio-actions, .portfolio-next-project-list, .portfolio-next-project-list li, .portfolio-next-project-footer, .portfolio-visual-story figcaption, .portfolio-visual-story figcaption > p, .case-fact, .case-project-nav, .case-quote) {
  border-color: var(--white-line) !important;
}

body.site-white[data-page]:not([data-page="home"]) .case-journey-item,
body.site-white[data-page]:not([data-page="home"]) .case-journey-item::before {
  border-color: #86b5bd !important;
}

/* Keep icons flat without changing their existing layered SVG paths. */
body.site-white[data-page]:not([data-page="home"]) :is(.case-pillar-mark, .portfolio-scope-icon, .portfolio-live-icon, .case-preview-cta-icon) {
  --icon-surface-color: #e8f3f2 !important;
  --icon-accent-surface-color: #f6eeea !important;
  --icon-detail-color: #176d77 !important;
  color: var(--white-teal) !important;
  background: var(--white-soft) !important;
  border-color: var(--white-line) !important;
  box-shadow: none !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(.case-pillar-mark, .portfolio-scope-icon)::before {
  background: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(.case-pillar-mark > .ui-icon, .portfolio-scope-icon > .ui-icon, .project-preview-tab-icon) {
  filter: none !important;
}

/* Sticky portfolio filters retain visible selected, hover and focus states. */
body.site-white[data-page]:not([data-page="home"]) .filters {
  color: var(--white-ink) !important;
  background: #fff !important;
  border-color: var(--white-line) !important;
  box-shadow: 0 3px 14px rgba(32, 59, 74, .04) !important;
}

body.site-white[data-page]:not([data-page="home"]) .filter-button {
  color: var(--white-ink) !important;
  background: #fff !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.site-white[data-page]:not([data-page="home"]) .filter-button:is(:hover, :active):not([aria-pressed="true"]) {
  color: var(--white-teal) !important;
  background: #edf5f6 !important;
}

body.site-white[data-page]:not([data-page="home"]) .filter-button[aria-pressed="true"] {
  color: #fff !important;
  background: var(--white-ink) !important;
  border-color: var(--white-ink) !important;
}

body.site-white[data-page]:not([data-page="home"]) .filter-button[aria-pressed="true"] :is(span, strong, svg) {
  color: #fff !important;
}

body.site-white[data-page]:not([data-page="home"]) .filters::-webkit-scrollbar-track {
  background: var(--white-soft) !important;
}

body.site-white[data-page]:not([data-page="home"]) .filters::-webkit-scrollbar-thumb {
  background: #86b5bd !important;
}

/* Case-study device controls are inserted by main.js after page load. */
body.site-white[data-page]:not([data-page="home"]) :is(.case-preview-slider, .case-preview-toolbar, .project-preview-carousel-footer) {
  color: var(--white-copy) !important;
  background: #fff !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(.project-preview-tabs, .project-preview-footer-copy) {
  color: var(--white-copy) !important;
  background: var(--white-soft) !important;
  border-color: var(--white-line) !important;
  box-shadow: none !important;
}

/* Use the native selected tab as the indicator at every container width. */
body.site-white[data-page]:not([data-page="home"]) .project-preview-tabs::before {
  background: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.site-white[data-page]:not([data-page="home"]) .project-preview-tab {
  color: var(--white-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.site-white[data-page]:not([data-page="home"]) .project-preview-tab:is(:hover, :active, :focus-visible):not([aria-selected="true"]) {
  color: var(--white-teal) !important;
  background: #e8f2f3 !important;
}

body.site-white[data-page]:not([data-page="home"]) .project-preview-tab[aria-selected="true"] {
  color: #fff !important;
  background: var(--white-teal) !important;
}

body.site-white[data-page]:not([data-page="home"]) .project-preview-tab[aria-selected="true"] :is(span, svg) {
  color: #fff !important;
}

body.site-white[data-page]:not([data-page="home"]) .project-preview-status {
  color: var(--white-ink) !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(.project-preview-arrow, .case-preview-cta, .case-actions .button--ghost, .portfolio-actions .portfolio-live-link) {
  color: var(--white-teal) !important;
  background: #fff !important;
  border-color: #bfd6d9 !important;
  box-shadow: none !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(.project-preview-arrow, .case-preview-cta, .case-actions .button--ghost, .portfolio-actions .portfolio-live-link, .case-service-link):is(:hover, :active, :focus-visible) {
  color: var(--white-teal) !important;
  background: #edf5f6 !important;
  border-color: #86b5bd !important;
  box-shadow: none !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(.case-preview-cta, .portfolio-actions .portfolio-live-link):is(:hover, :active, :focus-visible) :is(.case-preview-cta-icon, .portfolio-live-icon),
body.site-white[data-page]:not([data-page="home"]) .case-service-link:is(:hover, :active, :focus-visible)::after {
  color: var(--white-teal) !important;
  background: transparent !important;
  border-color: #86b5bd !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(.case-actions .button--case, .case-cta-panel > .button) {
  color: #fff !important;
  background: var(--white-coral) !important;
  border-color: var(--white-coral) !important;
  box-shadow: none !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(.case-actions .button--case, .case-cta-panel > .button):is(:hover, :active, :focus-visible) {
  color: #fff !important;
  background: #9e302b !important;
  border-color: #9e302b !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(.case-actions .button--case, .case-cta-panel > .button) :is(span, strong, small, svg) {
  color: #fff !important;
}

body.site-white[data-page]:not([data-page="home"]) :is(.case-actions .button--case, .case-cta-panel > .button)::after {
  color: #fff !important;
  background-color: currentColor !important;
}

/* The sector callout must reset the full layered background, not just its colour. */
body.site-white.site-refined[data-page="portfolio"] .portfolio-scope-note {
  color: var(--white-copy) !important;
  background: #fff !important;
  border-color: var(--white-line) !important;
}

body.site-white.site-refined[data-page="portfolio"] .portfolio-scope-note::after {
  background: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.site-white.site-refined[data-page="portfolio"] .portfolio-scope-note > .text-link {
  color: var(--white-teal) !important;
  background: #fff !important;
  border-color: #bfd6d9 !important;
}

body.site-white.site-refined[data-page="portfolio"] .portfolio-scope-note > .text-link:is(:hover, :focus-visible, :active) {
  color: var(--white-teal-hover) !important;
  background: var(--white-soft) !important;
  border-color: #86b5bd !important;
}

@media (forced-colors: active) {
  body.site-white[data-page]:not([data-page="home"]) :is(.filter-button[aria-pressed="true"], .project-preview-tab[aria-selected="true"]) {
    color: HighlightText !important;
    background: Highlight !important;
    outline: 2px solid Highlight !important;
    outline-offset: -2px !important;
  }
  body.site-white[data-page]:not([data-page="home"]) :is(.filter-button[aria-pressed="true"], .project-preview-tab[aria-selected="true"]) :is(span, strong, svg) {
    color: HighlightText !important;
  }
}


/* guide-pages.css */
/* Guide hub, categories, articles and the downloadable-brief form.
   Colour/surface overrides only: original typography, content, geometry,
   imagery, semantic states and interaction code remain unchanged. */
body.site-white[data-page]:not([data-page="home"]) {
  --guide-ink: var(--white-ink);
  --guide-muted: var(--white-muted);
  --guide-teal: var(--white-teal);
  --guide-teal-dark: #125761;
  --guide-mint: #edf6f6;
  --guide-coral: var(--white-coral);
  --guide-paper: #fff;
  --guide-line: var(--white-line);
  --guide-shadow: none;
}

/* The large dark editorial bands and tinted article background become white. */
body.site-white[data-page]:not([data-page="home"]) :is(.guide-hero, .guide-hub-hero, .guide-hub-intro, .guide-hub-groups, .guide-article-shell, .guide-related, .guide-final-cta, .guide-final-cta-inner, .guide-context-section, .directory-hero, .directory-section, .directory-section--soft, .brief-model, .brief-model-heading, .brief-model-work) {
  color: var(--white-copy) !important;
  background: #fff !important;
  box-shadow: none !important;
}
body.site-white[data-page]:not([data-page="home"]) :is(.guide-hero, .guide-hub-hero)::after,
body.site-white[data-page]:not([data-page="home"]) .guide-hero-visual::after {
  background: none !important;
}

/* Clear surfaces let the unchanged illustrations and editorial copy lead. */
body.site-white[data-page]:not([data-page="home"]) :is(.guide-hub-index, .guide-hero-panel, .guide-hero-insight, .guide-hero-visual, .guide-toc, .guide-summary, .guide-callout, .guide-checklist, .guide-principle, .guide-sources, .guide-table-wrap, .guide-card, .guide-card-body, .guide-context-links a, .directory-topic, .directory-results a, .directory-sectors, .brief-model fieldset) {
  --icon-surface-color: #e8f3f2 !important;
  --icon-accent-surface-color: #f6eeea !important;
  --icon-detail-color: #176d77 !important;
  color: var(--white-copy) !important;
  background: #fff !important;
  border-color: var(--white-line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.site-white[data-page]:not([data-page="home"]) :is(.guide-hub-index strong, .guide-hero-panel > strong, .guide-toc-title, .guide-card h3, .guide-card h4, .guide-table caption, .guide-table th, .directory-topic h3, .directory-reading-link h3, .directory-sectors-label strong, .brief-model legend, .brief-model label) {
  color: var(--white-ink) !important;
}
body.site-white[data-page]:not([data-page="home"]) :is(.guide-hub-lead, .guide-hero-lead, .guide-hero-panel dd, .guide-hero-insight p, .guide-hero-visual figcaption, .guide-summary p, .guide-summary li, .guide-section p, .guide-section li, .guide-checklist li, .guide-final-cta p, .guide-table td, .directory-lead, .directory-reading-link p, .directory-topic p) {
  color: var(--white-copy) !important;
}
body.site-white[data-page]:not([data-page="home"]) :is(.guide-hero-panel dt, .guide-final-cta-note, .guide-category-return, .directory-search-help, .directory-search-status, .directory-search-suggestions, .directory-sectors-label small, .directory-more-guides, .brief-hint, .brief-status) {
  color: var(--white-muted) !important;
}
body.site-white[data-page]:not([data-page="home"]) :is(.guide-kicker, .guide-card-tag, .guide-card-cta, .guide-section-number, .guide-principle b, .guide-hub-index a, .guide-hub-index a:visited, .guide-hub-index a::after, .guide-hero-insight a, .guide-hero-insight a:visited, .guide-section a:not(.button), .guide-sources a, .guide-context-links a, .guide-category-return a, .directory-context-links a, .directory-topic-count, .directory-topic-action, .directory-topic-arrow, .directory-reading-meta, .directory-result-category, .directory-sectors-toggle, .directory-more-guides a) {
  color: var(--white-teal) !important;
}
body.site-white[data-page]:not([data-page="home"]) .guide-hero-panel dd a {
  color: var(--white-teal) !important;
}
body.site-white[data-page]:not([data-page="home"]) .guide-table th {
  background: var(--white-soft) !important;
}
body.site-white[data-page]:not([data-page="home"]) :is(.guide-summary li::before, .guide-callout::before) {
  background: var(--white-teal) !important;
}
body.site-white[data-page]:not([data-page="home"]) .guide-checklist li::before {
  color: var(--white-teal) !important;
}

/* Keep the current TOC item and its number visibly selected. */
body.site-white[data-page]:not([data-page="home"]) .guide-toc ol a {
  color: var(--white-copy) !important;
  background: transparent !important;
}
body.site-white[data-page]:not([data-page="home"]) .guide-toc ol a::before {
  color: var(--white-teal) !important;
  background: var(--white-soft) !important;
  border-color: #bfd6d9 !important;
}
body.site-white[data-page]:not([data-page="home"]) .guide-toc ol a:is(:hover, :focus-visible, .is-active, [aria-current="location"]) {
  color: var(--white-ink) !important;
  background: #edf6f6 !important;
}
body.site-white[data-page]:not([data-page="home"]) .guide-toc ol a:is(.is-active, [aria-current="location"])::before {
  color: #fff !important;
  background: var(--white-teal) !important;
  border-color: var(--white-teal) !important;
}
body.site-white[data-page]:not([data-page="home"]) .guide-toc-contact {
  color: var(--white-teal) !important;
  background: #fff !important;
  border-color: #bfd6d9 !important;
}
body.site-white[data-page]:not([data-page="home"]) .guide-toc-contact-icon {
  color: var(--white-teal) !important;
  background: var(--white-soft) !important;
}
body.site-white[data-page]:not([data-page="home"]) .guide-toc-contact:is(:hover, :focus-visible, :active) {
  color: #125761 !important;
  background: #edf6f6 !important;
  border-color: #86b5bd !important;
}
body.site-white[data-page]:not([data-page="home"]) .guide-toc-contact:is(:hover, :focus-visible, :active) .guide-toc-contact-icon {
  color: var(--white-teal) !important;
  background: #fff !important;
}

/* Hub search, suggestions and dynamic results retain every existing state. */
body.site-white[data-page]:not([data-page="home"]) :is(.directory-search input, .brief-model textarea) {
  color: var(--white-ink) !important;
  background: #fff !important;
  border-color: #9db9be !important;
  caret-color: var(--white-teal);
}
body.site-white[data-page]:not([data-page="home"]) :is(.directory-search input, .brief-model textarea)::placeholder {
  color: var(--white-muted) !important;
  opacity: 1;
}
body.site-white[data-page]:not([data-page="home"]) :is(.directory-search button, .directory-search-suggestions button) {
  color: var(--white-teal) !important;
  background: #fff !important;
  border-color: #bfd6d9 !important;
}
body.site-white[data-page]:not([data-page="home"]) :is(.directory-search button, .directory-search-suggestions button):is(:hover, :active, :focus-visible, [aria-pressed="true"]) {
  color: #125761 !important;
  background: #edf6f6 !important;
  border-color: #86b5bd !important;
}
body.site-white[data-page]:not([data-page="home"]) :is(.directory-results a, .directory-topic):is(:hover, :focus-visible) {
  background: var(--white-soft) !important;
  border-color: #bfd6d9 !important;
}

/* Promotional cards use the same palette when present; SVG artwork is untouched. */
body.site-white[data-page]:not([data-page="home"]) :is(.directory-contact, .directory-promo) {
  --promo-ink: var(--white-ink);
  --promo-copy: var(--white-copy);
  --promo-accent: var(--white-teal);
  --promo-button-ink: #fff;
  --promo-background: #fff;
  --promo-glow: var(--white-soft);
  color: var(--white-copy) !important;
  background: #fff !important;
  border-color: var(--white-line) !important;
}
body.site-white[data-page]:not([data-page="home"]) :is(.directory-contact-brand, .directory-contact-description, .directory-contact-services li, .directory-contact-note) {
  color: var(--white-copy) !important;
}
body.site-white[data-page]:not([data-page="home"]) :is(.directory-contact-kicker, .directory-contact h3 span) {
  color: var(--white-teal) !important;
}
body.site-white[data-page]:not([data-page="home"]) :is(.directory-contact-brand::before, .directory-contact-services li::before) {
  background: var(--white-teal) !important;
}
body.site-white[data-page]:not([data-page="home"]) .directory-contact-link {
  color: #fff !important;
  background: var(--white-coral) !important;
  border-color: var(--white-coral) !important;
}
body.site-white[data-page]:not([data-page="home"]) .directory-contact-link:hover {
  background: #ae3933 !important;
}

@media (forced-colors: active) {
  body.site-white[data-page]:not([data-page="home"]) :is(.guide-toc ol a, .guide-toc ol a::before, .directory-topic, .directory-results a, .directory-search input, .directory-search button, .brief-model textarea) {
    border-color: CanvasText !important;
  }
  body.site-white[data-page]:not([data-page="home"]) .guide-toc ol a:is(.is-active, [aria-current="location"]) {
    outline: 2px solid Highlight !important;
  }
}


/* site-qa.css */
/* Shared navigation trails on the new white page headers. */
body.site-white[data-page] :is(.breadcrumb-nav, .breadcrumb-list) {
  color: var(--white-muted) !important;
  background: transparent !important;
}
body.site-white[data-page] .breadcrumb-list a {
  color: var(--white-teal) !important;
}
body.site-white[data-page] .breadcrumb-list [aria-current="page"] {
  color: var(--white-ink) !important;
}
body.site-white[data-page] .breadcrumb-list a:hover {
  color: var(--white-teal-hover) !important;
}

/* Visual QA: labels that previously carried their own dark background. */
body.site-white[data-page]:not([data-page="home"]) .value-card > b {
  color: var(--white-teal) !important;
  background: var(--white-soft) !important;
}
body.site-white[data-page]:not([data-page="home"]) :is(.button--coral, .button--primary, .button--light) :is(.contact-inline-label, .inline-contact-icon) {
  color: #fff !important;
}
body.site-white[data-page]:not([data-page="home"]) :is(.button--coral, .button--primary, .button--light) .inline-contact-icon {
  background: transparent !important;
}
body.site-white[data-page]:not([data-page="home"]) .portfolio-actions .text-link {
  color: var(--white-teal) !important;
  background: #fff !important;
  border-color: #bfd6d9 !important;
}
body.site-white[data-page]:not([data-page="home"]) .portfolio-actions .text-link:hover {
  color: var(--white-teal-hover) !important;
  background: var(--white-soft) !important;
}
body.site-white[data-page]:not([data-page="home"]) :is(.editorial-section-photo, .editorial-section-photo picture, .editorial-section-photo figcaption, .portfolio-visual-story picture) {
  color: var(--white-copy) !important;
  background: #fff !important;
}
body.site-white[data-page]:not([data-page="home"]) :is(.editorial-section-photo, .portfolio-visual-story) figcaption strong {
  color: var(--white-ink) !important;
}
body.site-white[data-page]:not([data-page="home"]) :is(.editorial-section-photo, .portfolio-visual-story) figcaption span {
  color: var(--white-copy) !important;
}

/* Device legend for covers that display desktop, tablet and mobile together.
   Keep the existing visibility rules and the enclosing project link intact. */
body.site-white[data-page] .responsive-project-label--devices {
  gap: 3px;
  min-height: 0;
  padding: 4px !important;
  border-radius: 999px;
  box-shadow: 0 3px 12px rgba(32, 59, 74, .06) !important;
  letter-spacing: 0 !important;
  text-transform: none;
  white-space: nowrap;
}

body.site-white[data-page] .responsive-project-label--devices::before {
  content: none;
}

body.site-white[data-page] .responsive-project-label-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--white-ink) !important;
  font-size: var(--type-caption);
  font-weight: 700;
  line-height: 1.25;
}

body.site-white[data-page] .responsive-project-label-item > span {
  color: inherit !important;
}

body.site-white[data-page] .responsive-project-label-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: inherit !important;
}

/* Keep keyboard focus inside controls whose parents clip their contents. */
body.site-white[data-page] :is(.filter-button, .project-preview-tab):focus-visible {
  outline: 2px solid var(--white-teal) !important;
  outline-offset: -3px !important;
}
body.site-white[data-page] :is(.filter-button[aria-pressed="true"], .project-preview-tab[aria-selected="true"]):focus-visible {
  outline-color: #fff !important;
}
body.site-white[data-page] .italy-disclosure-summary:focus-visible {
  outline-offset: -5px !important;
}
body.site-white[data-page] :is(.hero-project-slide, .hero-project-track, .home-projects-card):focus-visible {
  outline-offset: -3px !important;
}

/* The Google Business page retains visible feedback on its inline links. */
body.site-white[data-page]:not([data-page="home"]) :is(.gbp-section-nav a, .gbp-guide-grid a):is(:hover, :focus-visible, :active) {
  color: var(--white-teal-hover) !important;
  border-color: #86b5bd !important;
}
body.site-white[data-page]:not([data-page="home"]) .gbp-guide-grid a:is(:hover, :focus-visible, :active) strong {
  color: var(--white-teal-hover) !important;
}
body.site-white[data-page]:not([data-page="home"]) .gbp-hero-more:is(:hover, :focus-visible, :active) .gbp-hero-more-arrow {
  color: var(--white-teal-hover) !important;
  background: #e8f2f3 !important;
  border-color: #86b5bd !important;
}

@media (forced-colors: active) {
  body.site-white[data-page] :is(.filter-button, .project-preview-tab):focus-visible {
    outline-color: Highlight !important;
  }
  body.site-white[data-page] :is(.filter-button[aria-pressed="true"], .project-preview-tab[aria-selected="true"]):focus-visible {
    outline-color: HighlightText !important;
  }
  body.site-white[data-page] .nav-toggle span,
  body.site-white[data-page] .nav-toggle span::before,
  body.site-white[data-page] .nav-toggle span::after {
    background: ButtonText !important;
  }
}

/* Article introductions: one reading column followed by a shared editorial
   sheet. Keep metadata and the key takeaway distinct without nested cards. */
@media screen {
  body.site-white[data-page="guide"] .guide-introduction-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 3vw, 36px);
  }

  /* A quiet opening panel shared by the articles, with fluid insets and no
     fixed height so long introductions and enlarged text can reflow. */
  body.site-white[data-page="guide"] .guide-introduction-copy {
    min-width: 0;
    padding: clamp(24px, 3vw, 36px) clamp(20px, 3.2vw, 44px);
    border: 1px solid var(--white-line);
    border-inline-start: 3px solid;
    border-inline-start-color: var(--white-teal) !important;
    border-radius: 0 20px 20px 0;
    background: var(--white-soft);
  }

  body.site-white[data-page="guide"] main .guide-introduction .guide-hero-lead {
    max-width: 72ch;
    font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
    line-height: 1.7;
  }

  body.site-white[data-page="guide"] main .guide-introduction .guide-introduction-opening {
    max-width: 64ch;
    color: var(--white-ink) !important;
    font-size: clamp(1.125rem, 1.55vw, 1.375rem);
    font-weight: 600;
    line-height: 1.5;
  }

  body.site-white[data-page="guide"] main .guide-introduction .guide-introduction-opening + .guide-hero-lead {
    margin-top: .75em;
  }

  /* Reflow at spaces; never split a word to fill the remaining line. */
  body.site-white[data-page="guide"] .guide-introduction :is(p, dt, dd, strong, a, a > span, h2 > span) {
    overflow-wrap: normal !important;
  }

  /* A lexical hyphen is part of the word, including in the introduction. */
  body.site-white[data-page="guide"] .guide-introduction .word-unit {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
  }

  body.site-white[data-page="guide"] .guide-introduction aside.guide-hero-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    width: 100%;
    max-width: none;
    padding: clamp(20px, 2.5vw, 32px);
    border-radius: 22px;
    background: #fff !important;
    border-color: #dbe6e8 !important;
  }

  body.site-white[data-page="guide"] .guide-introduction .guide-hero-panel > strong {
    grid-column: 1 / -1;
    margin: 0;
    padding-bottom: 18px;
    border-bottom: 1px solid #e3ebed;
    font-size: 1.0625rem;
    font-weight: 750;
    line-height: 1.4;
    letter-spacing: -.02em;
  }

  body.site-white[data-page="guide"] .guide-introduction .guide-hero-panel dl {
    display: grid;
    /* At most two columns; larger text can naturally reduce them to one. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(12rem, calc((100% - 28px) / 2))), 1fr));
    gap: 24px 28px;
    align-content: start;
    margin: 0;
  }

  body.site-white[data-page="guide"] .guide-introduction .guide-hero-panel dl > div {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  body.site-white[data-page="guide"] .guide-introduction .guide-hero-panel dt {
    margin: 0 0 7px;
    font-size: .6875rem;
    font-weight: 750;
    line-height: 1.45;
    letter-spacing: .08em;
  }

  body.site-white[data-page="guide"] .guide-introduction .guide-hero-panel dd {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.6;
  }

  body.site-white[data-page="guide"] .guide-introduction .guide-hero-panel a[rel="author"] {
    font-size: inherit;
    line-height: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    overflow-wrap: normal !important;
  }

  /* Keep the takeaway on the editorial sheet's white surface. Its heading
     and spacing distinguish it without repeating the introduction panel. */
  body.site-white[data-page="guide"] .guide-introduction .guide-hero-panel .guide-hero-insight {
    align-self: stretch;
    align-content: start;
    min-height: 0;
    margin: 0;
    padding: 0;
    gap: 12px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: #fff !important;
    box-shadow: none !important;
  }

  body.site-white[data-page="guide"] main .guide-introduction .guide-hero-insight h2 {
    gap: 10px;
    font-size: .75rem !important;
    line-height: 1.5;
    letter-spacing: .08em;
    color: #20434b !important;
  }

  body.site-white[data-page="guide"] .guide-introduction .guide-hero-insight h2 .ui-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    color: #197c87;
  }

  body.site-white[data-page="guide"] .guide-introduction .guide-hero-insight p {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.6;
    color: #344f56 !important;
  }

  body.site-white[data-page="guide"] .guide-introduction .guide-hero-insight a,
  body.site-white[data-page="guide"] .guide-introduction .guide-hero-insight a:visited {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 44px;
    margin-top: 4px;
    padding: 11px 14px;
    gap: 16px;
    border: 1px solid #b9d3d7;
    border-color: #b9d3d7 !important;
    border-radius: 10px;
    background: #fff;
    color: #0b6877 !important;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    white-space: normal;
  }

  body.site-white[data-page="guide"] .guide-introduction .guide-hero-insight a .ui-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }

  body.site-white[data-page="guide"] .guide-introduction .guide-hero-insight a:is(:hover, :focus-visible) {
    background: #e4f0f1;
    border-color: #197c87 !important;
    color: #07535f !important;
  }

  body.site-white[data-page="guide"] .guide-introduction .guide-hero-panel a:focus-visible {
    outline: 2px solid #197c87 !important;
    outline-offset: 4px !important;
  }
}

@media screen and (min-width: 1101px) {
  body.site-white[data-page="guide"] .guide-introduction aside.guide-hero-panel {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
    column-gap: clamp(28px, 3vw, 44px);
  }
}

@media screen and (max-width: 520px) {
  body.site-white[data-page="guide"] .guide-introduction-copy {
    padding: 20px 16px;
    border-radius: 0 16px 16px 0;
  }

  body.site-white[data-page="guide"] .guide-introduction aside.guide-hero-panel {
    gap: 20px;
    padding: 20px 16px;
    border-radius: 18px;
  }

  body.site-white[data-page="guide"] .guide-introduction .guide-hero-panel dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  body.site-white[data-page="guide"] .guide-introduction .guide-hero-insight a {
    width: 100%;
    gap: 12px;
  }
}

@media screen and (forced-colors: active) {
  body.site-white[data-page="guide"] .guide-introduction .guide-hero-panel a:focus-visible {
    outline-color: Highlight !important;
  }
}

/* Make the reading path clear before the full-height guide cover ends.
   The cue stays with the title, before the photograph on narrow screens. */
@media screen {
  body.site-white[data-page="guide"] .guide-cover-heading .guide-scroll-cue {
    display: flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    max-width: 100%;
    min-height: 48px;
    margin-top: clamp(20px, 3vh, 32px);
    padding: 4px 8px 4px 0;
    border-radius: 8px;
    color: var(--white-teal) !important;
    font-size: .9375rem;
    font-weight: 650;
    line-height: 1.5;
    text-decoration: none;
    white-space: normal;
  }

  body.site-white[data-page="guide"] .guide-scroll-cue > span {
    min-width: 0;
    overflow-wrap: normal !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }

  body.site-white[data-page="guide"] .guide-scroll-cue > .ui-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 9px;
    border: 1px solid;
    border-color: #bdd6d9 !important;
    border-radius: 50%;
    background: #f1f7f7;
  }

  body.site-white[data-page="guide"] .guide-cover-heading .guide-scroll-cue:is(:hover, :focus-visible) {
    color: var(--white-teal-hover) !important;
    background: #f1f7f7;
  }

  body.site-white[data-page="guide"] .guide-cover-heading .guide-scroll-cue:focus-visible {
    outline: 2px solid var(--white-teal) !important;
    outline-offset: 4px !important;
  }
}

@media screen and (max-height: 650px) {
  body.site-white[data-page="guide"] .guide-cover-heading .guide-scroll-cue {
    margin-top: 16px;
  }
}

/* Give long titles room to wrap into fewer lines on low landscape screens,
   keeping the reading cue visible without reducing its text or touch target. */
@media screen and (min-width: 440px) and (max-height: 400px) and (orientation: landscape) {
  body.site-white[data-page="guide"] .guide-hero--cover .guide-hero-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }

  body.site-white[data-page="guide"] .guide-cover-heading .guide-scroll-cue {
    margin-top: 12px;
  }
}

@media screen and (forced-colors: active) {
  body.site-white[data-page="guide"] .guide-scroll-cue > .ui-icon {
    border-color: LinkText !important;
  }
  body.site-white[data-page="guide"] .guide-cover-heading .guide-scroll-cue:focus-visible {
    outline-color: Highlight !important;
  }
}

@media print {
  .guide-scroll-cue { display: none !important; }
}

/* Editorial hierarchy: give the main message the wider reading column.
   Keep the agency logo layout and existing sticky/reveal behaviour intact. */
@media screen {
  body.site-white[data-page] .split:has(> .split-copy):not(.agency-identity-layout),
  body.site-white[data-page] .service-intro-grid {
    gap: clamp(28px, 4vw, 56px);
  }

  body.site-white[data-page] .split:not(.agency-identity-layout) > .split-copy {
    padding-top: 0;
  }

  body.site-white[data-page] :is(.split-copy, .rich-copy) > h2 {
    max-width: 26ch;
    margin-bottom: 24px;
    font-size: min(clamp(2rem, 3.6vw, 3.25rem), 12cqi);
    line-height: 1.14;
    letter-spacing: -.035em;
    text-wrap: balance;
  }

  body.site-white[data-page] .section-heading h2 {
    max-width: 26ch;
    font-size: min(clamp(2rem, 3.6vw, 3.25rem), 12cqi);
    line-height: 1.14;
    letter-spacing: -.035em;
    text-wrap: balance;
  }

  body.site-white[data-page] .split-copy > .lead {
    margin-bottom: 24px;
    font-size: clamp(1.125rem, 1.5vw, 1.25rem);
    line-height: 1.65;
  }

  body.site-white[data-page] :is(.split-copy, .rich-copy) > p {
    max-width: 68ch;
  }

  body.site-white[data-page] .split > .coverage-card h3 {
    max-width: 100%;
    margin-bottom: 18px;
    line-height: 1.22;
    letter-spacing: -.025em;
    text-wrap: balance;
  }

  body.site-white[data-page] .split > .coverage-card,
  body.site-white[data-page] .service-intro-grid > .sticky-label {
    container-type: inline-size;
  }
}

@media screen and (min-width: 641px) {
  body.site-white[data-page] .split > .coverage-card,
  body.site-white[data-page] .service-intro-grid > .sticky-label {
    padding: clamp(24px, 2.5vw, 32px);
    border-radius: 22px;
    box-shadow: none !important;
  }

  body.site-white[data-page] .split > .coverage-card h3 {
    font-size: min(1.75rem, 13cqi) !important;
  }

  body.site-white[data-page] .service-intro-grid > .sticky-label h2 {
    font-size: min(clamp(1.5rem, 2.3vw, 2rem), 12cqi) !important;
    line-height: 1.2;
  }

  body.site-white.site-refined[data-page] .service-intro-grid > .rich-copy {
    padding: clamp(24px, 2.5vw, 36px) !important;
  }
}

@media screen and (min-width: 1025px) {
  body.site-white[data-page] .split:has(> .split-copy):not(.agency-identity-layout) {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  }

  body.site-white[data-page] .split.split--reverse:has(> .split-copy) {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  }

  body.site-white[data-page] .service-intro-grid {
    grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr);
  }
}

@media screen and (max-width: 1024px) {
  body.site-white[data-page] .split:has(> .split-copy):not(.agency-identity-layout),
  body.site-white[data-page] .service-intro-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.site-white[data-page] .split--reverse > * {
    order: initial;
  }

  body.site-white[data-page] .service-intro-grid > .sticky-label {
    position: relative;
    top: auto;
  }
}

@media screen and (max-width: 640px) {
  body.site-white[data-page] .section-heading h2 {
    font-size: min(clamp(2rem, 3.6vw, 3.25rem), max(40.8px, 11vw));
  }

  body.site-white[data-page] .split-copy > .lead {
    font-size: min(clamp(1.125rem, 1.5vw, 1.25rem), 9.3vw);
  }

  /* Supporting copy scales with its own reading width, including enlarged
     mobile text, so it cannot overtake the primary message. */
  body.site-white[data-page] .split > .coverage-card h3 {
    font-size: min(1.5rem, 11cqi) !important;
  }

  body.site-white[data-page] .service-intro-grid > .sticky-label h2 {
    font-size: min(1.5rem, 10cqi) !important;
    line-height: 1.2;
  }

  body.site-white[data-page] .split > .coverage-card > p,
  body.site-white[data-page] .service-intro-grid > .sticky-label > p {
    font-size: min(var(--type-body, 1.0625rem), 9cqi);
  }
}

/* Retain the existing reflow safeguards for enlarged reading sizes. */
@container adaptable-reading-row (max-width: 48rem) {
  body.site-white[data-page] .split--reverse > * {
    order: initial;
  }
}

@container adaptable-reading-row (max-width: 12rem) {
  body.site-white[data-page] :is(.split, .service-intro-grid) > :is(.coverage-card, .sticky-label) {
    padding-inline: 8px;
  }

  /* Give a long enlarged label its own line instead of collapsing its marker. */
  body.site-white[data-page] :is(.split, .service-intro-grid) > :is(.coverage-card, .sticky-label) > .eyebrow {
    flex-wrap: wrap;
  }

  /* Enlarged labels must stay inside a narrow reading column, including
     their padding and any arrow, without reducing the chosen text size. */
  body.site-white[data-page] :is(.split-copy, .rich-copy) .button-row > .button {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    padding-inline: 8px;
  }
}

/* References are supporting material, separate from the numbered steps. */
body.site-white[data-page="guide"] .guide-toc .guide-toc-sources {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-width: 0;
  min-height: 48px;
  margin-top: 18px;
  padding: 14px 12px;
  border: 1px solid;
  border-color: #c9dcdf !important;
  border-radius: 12px;
  color: var(--white-teal) !important;
  background: #f3f8f8;
  text-decoration: none;
}

body.site-white[data-page="guide"] .guide-toc-sources > .ui-icon {
  width: 24px;
  height: 24px;
  margin-top: 1px;
}

body.site-white[data-page="guide"] .guide-toc-sources-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

body.site-white[data-page="guide"] .guide-toc-sources-title {
  font-size: .9375rem;
  font-weight: 750;
  line-height: 1.4;
  overflow-wrap: normal !important;
}

body.site-white[data-page="guide"] .guide-toc-sources-note {
  color: var(--white-muted) !important;
  font-size: .75rem;
  font-weight: 450;
  line-height: 1.5;
  overflow-wrap: normal !important;
}

body.site-white[data-page="guide"] .guide-toc .guide-toc-sources:is(:hover, :focus-visible, .is-active, [aria-current="location"]) {
  color: var(--white-teal-hover) !important;
  border-color: var(--white-teal) !important;
  background: #e7f2f3;
}

body.site-white[data-page="guide"] .guide-toc-sources:is(.is-active, [aria-current="location"]) .guide-toc-sources-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.site-white[data-page="guide"] .guide-toc .guide-toc-sources:focus-visible {
  outline: 2px solid var(--white-teal) !important;
  outline-offset: 3px !important;
}

@container guide-toc (max-width: 15rem) {
  body.site-white[data-page="guide"] .guide-toc .guide-toc-sources {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

@media (forced-colors: active) {
  body.site-white[data-page="guide"] .guide-toc .guide-toc-sources {
    border-color: LinkText !important;
  }
  body.site-white[data-page="guide"] .guide-toc .guide-toc-sources:is(.is-active, [aria-current="location"]) {
    outline: 2px solid Highlight !important;
    outline-offset: -2px !important;
  }
  body.site-white[data-page="guide"] .guide-toc .guide-toc-sources:focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 3px !important;
  }
}