/* Level 2: the 3D seal's stage and resting slots (static/js/ato-seal.js), and page transitions.
   Slots are empty layout boxes, so the seal never sits on text. Static tier: no stage, flat icons stay. */
.seal-stage { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 35; }
html:not([data-motion="full"]):not([data-motion="lite"]) .seal-stage { display: none; }

.seal-slot { pointer-events: none; aspect-ratio: 1; }
.seal-slot--hero { position: absolute; z-index: 1; right: 6.5%; top: 16%; width: min(31vw, 30rem); }
.seal-slot--help { width: 15rem; margin-top: 3rem; }
.seal-slot--services { width: 8.5rem; flex: none; }
.seal-slot--card { position: absolute; top: -2.75rem; right: -1.75rem; width: 7.5rem; } /* the seal's last stop: on the booking card's corner, like a wax seal */
.seal-slot--emblem { display: none; }
.seal-why { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; }
@media (min-width: 1024px) { .seal-why { width: 7rem; height: 7rem; margin: -2rem 0 -0.75rem -1.75rem; } } /* three gold seals over the navy pillars */
@media (max-width: 1023px) {
  .seal-slot--hero { display: none; }
  .seal-slot--emblem { display: block; width: 13rem; margin: 0.75rem auto 0.6rem; } /* phones: the seal is the hero's centrepiece, above the copy */
  .seal-slot--help { width: 6.5rem; margin: 1.75rem 0 0.75rem; } /* clear space below too: the seal never touches the next line */
  .seal-slot--card { top: -2.25rem; right: -0.5rem; width: 5.5rem; }
  .seal-slot--services { width: 4.5rem; }
}
@media (min-width: 768px) and (max-width: 1023px) { .seal-slot--emblem { margin-bottom: 1.75rem; } } /* tablets: its gold edge reached the eyebrow line below */
@media (max-width: 767px) { .seal-slot--emblem { width: 10.5rem; } } /* phones: the for-whom links stay in the first screen */
/* Static tier (reduced motion or no WebGL) and a WebGL failure: the slots show a still of the seal, rendered from the 3D one. */
html:not([data-motion="full"]):not([data-motion="lite"]) .seal-slot,
html[data-seal-fallback] .seal-slot { background: url("../images/v2/seal-poster.webp") center / contain no-repeat; }

/* The real 3D seal replaces these flat stand-ins once it draws. */
html[data-seal-ready] .hex-mark,
html[data-seal-ready] .seal-why > svg { visibility: hidden; }

/* Pages open with the logo's hexagon (cross-document View Transitions; Back and Forward checked in real Chrome). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 380ms cubic-bezier(0.77, 0, 0.175, 1) both seal-vt-out; }
  ::view-transition-new(root) { animation: 780ms cubic-bezier(0.77, 0, 0.175, 1) both seal-vt-in; }
}
[data-site-header] { view-transition-name: site-header; }
@keyframes seal-vt-out { to { opacity: 0.55; transform: scale(0.985); } }
@keyframes seal-vt-in {
  from { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%); }
  to { clip-path: polygon(50% -75%, 158.25% -12.5%, 158.25% 112.5%, 50% 175%, -58.25% 112.5%, -58.25% -12.5%); }
}

/* Who we plan for: three scenes. Stacked full-screen scenes by default (phones, static tier, no JS);
   ato-seal.js pins them on desktop ([data-scenes-pinned]) and draws the photographs in WebGL. */
.scenes { position: relative; background: #0d1828; }
.scenes-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.scene { position: relative; display: grid; align-items: end; min-height: 100svh; overflow: hidden; isolation: isolate; }
.scene-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.scene::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(13 24 40 / 0.9), rgb(13 24 40 / 0.45) 50%, rgb(13 24 40 / 0.15)); }
.scene-copy { padding-block: 7rem 5.5rem; }
.scenes-gl { display: none; } /* each scene keeps its own scrim, so scenes fade as whole units */
.scenes[data-scenes-pinned] { height: 320svh; }
.scenes[data-scenes-pinned] .scenes-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.scenes[data-scenes-pinned] .scenes-list { position: absolute; inset: 0; display: grid; z-index: 1; }
.scenes[data-scenes-pinned] .scene { grid-area: 1 / 1; min-height: 0; height: 100svh; }
.scenes[data-scenes-pinned] .scenes-gl { display: block; position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.scenes[data-scenes-gl-ready] .scene-img { visibility: hidden; }

/* The consultants' honeycomb in 3D (ato-seal.js): the team picture cut into gold-edged hexagonal tiles.
   The canvas sits inside the hexagon window, so the existing draw, fill and open choreography still applies. */
.hex-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
html[data-motion="full"] .hex-gl, html[data-motion="lite"] .hex-gl { display: block; }
[data-hex-gl-ready] [data-hex-faces] > :not(.hex-gl) { opacity: 0; } /* not visibility: screen readers keep the names */
/* The 3D tiles keep their colour while they fly in: the window's navy duotone is lighter over them. */
[data-hex-gl-ready] .hex-tint { opacity: calc(var(--tint, 0.2) * 0.35); }