/* An uninterrupted page canvas; the unenhanced/reduced-motion section colours
   remain in the original stylesheets. Only the canvas controller opts into this. */
body[data-canvas-active] { background: var(--canvas-bg); }
body[data-canvas-active] :is(.header, main, .footer) {
  --ink: var(--canvas-ink);
  --muted: var(--canvas-muted);
  --dark-body: var(--canvas-muted);
  --line: var(--canvas-line);
  --dark-line: var(--canvas-line);
  --soft: var(--canvas-soft);
  color: var(--ink);
}
/* The blur lives on a sibling backdrop, not on the header ancestor: a parent
   backdrop-filter would prevent the full-screen menu from sampling the page. */
.header, body[data-canvas-active] .header { background: transparent; }
.header { transition: transform 480ms cubic-bezier(.22,.68,0,1); }
.header::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--canvas-bg, #fff); }
.header[data-scroll-hidden="true"]:not(:focus-within) { transform: translateY(-100%); }
body.menu-open .header { transform: none; }
@supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
  .header::before {
    background: var(--canvas-glass, rgb(255 255 255 / .75));
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  }
}
body[data-canvas-active] :is(#system, .dark, .content-method, .closing, .content-next, .footer) {
  background: transparent;
  color: var(--canvas-ink);
}
body[data-canvas-active] :is(.content-page, .proof-brands) { background: transparent; }
body[data-canvas-active] :is(.header, main, .footer) :focus-visible { outline-color: var(--canvas-focus); }
body[data-canvas-active] :is(.header, main, .footer) ::selection { background: var(--canvas-ink); color: var(--canvas-bg); }
/* Buttons invert with the canvas. Their label never interpolates into its fill. */
body[data-canvas-active] :is(.header, main, .footer) .button:not(.outline) {
  background: var(--canvas-ink); border-color: var(--canvas-ink); color: var(--canvas-bg);
  transition: none;
}
body[data-canvas-active] :is(.header, main, .footer) .button:hover { text-decoration: underline; text-underline-offset: 4px; }
body[data-canvas-active] .audience:hover .circle-link { color: var(--canvas-bg); }
/* These are self-contained light surfaces, not pieces of the page canvas. */
body[data-canvas-active] :is(.journey-platform-context, .tags, .offer-name, .compare-label, .compare-tab, .content-case-placeholder--warm, .content-resource-project) {
  --ink: #151515; --muted: #5b5a58; --soft: #f5f5f5;
  color: var(--ink);
}
body[data-canvas-active] :is(.content-links a:hover h3, .content-resource a:hover, .article-nav a:hover, .content-email:hover, .case-facts nav a:hover, .case-resource-links a:hover strong, .proof-control:hover) { color: var(--canvas-focus); }
body[data-canvas-active] .footer .brand img { filter: none; }

/* Phone menu: substantial frosted surface, top-down entrance and bottom-up
   exit. Timing is shared with navigation.js and supports rapid reversals. */
.menu-icon { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; }
.menu-icon path { transform-origin: 14px 12px; transition: transform 320ms cubic-bezier(.16,1,.3,1); }
.menu-toggle[aria-expanded="true"] .menu-icon path:first-child { transform: translateY(4px) rotate(45deg); transform-origin: 14px 8px; }
.menu-toggle[aria-expanded="true"] .menu-icon path:last-child { transform: translateY(-4px) rotate(-45deg); transform-origin: 14px 16px; }
@media (max-width: 600px) {
  body.menu-open { position: fixed; top: var(--menu-scroll-offset); left: 0; right: 0; overflow: hidden; }
  /* A fixed body no longer provides a useful sticky scroll container. Keep
     the header at the viewport top, including an interrupted hide transition. */
  body.menu-open .header { position: fixed; inset: 0 0 auto; transform: none; transition: none; }
  .header-actions .menu-toggle { width: 48px; height: 48px; justify-content: center; padding: 10px; }
  /* polish.css retains its entrance transform with animation-fill-mode.
     A transformed nav would offset its own fixed backdrop and clip the menu. */
  body[data-page-ready] .header[data-menu-enhanced] .nav { animation: none; }
  .header[data-menu-enhanced] .nav {
    display: flex; position: fixed; inset: 72px 0 0; top: 72px;
    height: calc(100dvh - 72px); max-height: none;
    padding: 32px 20px max(28px, env(safe-area-inset-bottom));
    background: var(--canvas-bg, #fff); border: 0; overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; pointer-events: none;
  }
  .header[data-menu-enhanced] .nav[data-menu-state="open"],
  .header[data-menu-enhanced] .nav[data-menu-state="closing"] { visibility: visible; pointer-events: auto; }
  @supports ((backdrop-filter: blur(24px)) or (-webkit-backdrop-filter: blur(24px))) {
    .header[data-menu-enhanced] .nav {
      /* Keep the opaque declaration above if color-mix is unsupported. */
      background: color-mix(in srgb, var(--canvas-bg, #fff) 94%, transparent);
      -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    }
  }
  .header[data-menu-enhanced] .nav > a {
    flex-shrink: 0; opacity: 0; transform: translateY(-10px);
    transition: opacity 200ms ease var(--menu-exit-delay), transform 200ms ease var(--menu-exit-delay);
  }
  .header[data-menu-enhanced] .nav[data-menu-state="closed"] > a { transform: translateY(18px); transition: none; }
  .header[data-menu-enhanced] .nav.is-open > a {
    opacity: 1; transform: none;
    transition: opacity 460ms ease var(--menu-enter-delay), transform 500ms cubic-bezier(.16,1,.3,1) var(--menu-enter-delay);
  }
  .header[data-menu-enhanced] .nav > a:not(.button) {
    font-size: clamp(27px, 7.6vw, 38px); letter-spacing: -.035em; line-height: 1.2;
    padding-block: 17px; min-height: 64px; border-bottom: 1px solid var(--line);
  }
  .header[data-menu-enhanced] .nav > a:not(.button):hover,
  .header[data-menu-enhanced] .nav > a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
  .header[data-menu-enhanced] .nav .mobile-menu-cta {
    margin-top: 0; min-height: 54px; font-size: 15px; justify-content: center;
  }
  .header[data-menu-enhanced] .nav > a:nth-last-child(2) { margin-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .header, .menu-icon path, .header[data-menu-enhanced] .nav > a { transition: none !important; }
  .header[data-menu-enhanced] .nav > a { transform: none; }
}

/* Project spotlight is a desktop pointer interaction. The fixed veil dims the
   surrounding page while the active project sits above it; focus mirrors hover
   for keyboard users. Touch and phone layouts never enter this state. */
@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
  body::after {
    content: ''; position: fixed; inset: 0; z-index: 20; pointer-events: none;
    background: rgb(21 21 21 / .58); opacity: 0; visibility: hidden;
    transition: opacity 260ms ease 100ms, visibility 0s linear 360ms;
  }
  @supports selector(body:has(.work-item:hover)) {
    body:has(.home .work-item:is(:hover, :focus-within))::after {
      opacity: 1; visibility: visible;
      transition: opacity 260ms ease, visibility 0s;
    }
    body:has(.home .work-item:is(:hover, :focus-within)) .home .work-item:is(:hover, :focus-within) {
      position: relative; z-index: 21;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    body::after { transition: none; }
  }
}