/* ACS brand layer, on every page (added by tools/build-brand.mjs; drawn by acs-brand.js):
   1. the book between neighbouring sections: five paper pages fanning from the spine under a line in the logo's colours,
      the seal on the spine; the section below is cut along the last page, so nothing else is painted
   2. faint emblem watermark on dark sections  3. emblem stamp on section labels  4. swoosh under one title
   5. the footer motto (rendered by lib/footer.mjs, editable in the admin)
   Logo blue #2490d8, green #90c03c. Logo parts: assets/brand/. Geometry is drawn in acs-brand.js at the real page width. */
:root { --logo-blue: #2490d8; --logo-green: #90c03c; }

/* 1. The book: a zero-height marker at the seam; the drawing reaches up over the bottom of the section above */
.acs-signature { position: relative; z-index: 2; height: 0; pointer-events: none; }
.acs-signature__book { position: absolute; left: var(--sig-left, 0); top: var(--sig-top, -114px); display: block; overflow: visible; }
.acs-signature__seal { position: absolute; left: var(--sig-cx, 50%); top: var(--sig-spine, -18px); width: var(--sig-size, 88px); height: var(--sig-size, 88px); translate: -50% -50%;
  filter: drop-shadow(0 10px 18px rgba(7, 26, 54, .16)); }

/* the pages and the seal stay still; only the top line moves, drawing out from the spine once */
.acs-signature__line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.22,1,.36,1); }
.acs-signature.is-in .acs-signature__line { stroke-dashoffset: 0; }

/* 2. Emblem watermark on dark sections */
.acs-wm-host { position: relative; isolation: isolate; overflow: clip; }
.acs-wm { position: absolute; z-index: -1; pointer-events: none; width: clamp(300px, 36vw, 560px); aspect-ratio: 1;
  right: -6%; top: 50%; transform: translateY(-50%) rotate(-8deg); opacity: .06;
  background: url(/assets/brand/acs-emblem-mono.svg?v=5) center / contain no-repeat; }

/* 3. Emblem stamp before each section label */
[class*="__eyebrow"]:not([class*="hero"])::before { content: ""; display: inline-block; width: 1.55em; height: 1.55em; margin-right: .6em; vertical-align: -.42em;
  background: url(/assets/brand/acs-emblem-noring.svg?v=5) center / contain no-repeat; }

/* 4. Swoosh under the first highlighted title */
.acs-swoosh { position: relative; white-space: nowrap; }
.acs-swoosh::after { content: ""; position: absolute; left: -2%; right: -1%; bottom: -.24em; height: .3em;
  background: url(/assets/brand/parts/swoosh-h.svg?v=5) center / 100% 100% no-repeat; }

/* 5. Footer sign-off: the motto, set like the logo (bold blue line over spaced green caps) */
.acs-motto { margin: 18px 0 4px; line-height: 1.1; }
.acs-motto b { display: block; font-size: 20px; font-weight: 800; letter-spacing: .01em; color: #5bb3ec; text-transform: uppercase; }
.acs-motto span { display: block; margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .32em; color: var(--logo-green); text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
  .acs-signature__line { stroke-dashoffset: 0; transition: none; }
}

/* 1b. The film as an open book: the drawing lies over the video frame (same box), above the video and its controls */
.acs-film-book { position: absolute; inset: 0; z-index: 6; height: auto; }

/* phones: the homepage banner picture ends like the book too: its bottom bends down into a spine, under the logo-colour line
   (replaces the slider's own wavy edge and accent line) */
@media (max-width: 820px) {
  .acs-hero .acs-hero__art { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201000%20645%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%200%20H1000%20V560%20C750%20563%20570%20584%20500%20640%20C430%20584%20250%20563%200%20560%20Z%27%2F%3E%3C%2Fsvg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201000%20645%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%200%20H1000%20V560%20C750%20563%20570%20584%20500%20640%20C430%20584%20250%20563%200%20560%20Z%27%2F%3E%3C%2Fsvg%3E") 0 0 / 100% 100% no-repeat; }
  .acs-hero .acs-hero__slide::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201000%20645%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20x2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%2390c03c%27%2F%3E%3Cstop%20offset%3D%27.26%27%20stop-color%3D%27%235bb3ec%27%2F%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%232490d8%27%2F%3E%3Cstop%20offset%3D%27.74%27%20stop-color%3D%27%235bb3ec%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%2390c03c%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M0%20560%20C250%20563%20430%20584%20500%20640%20C570%20584%20750%20563%201000%20560%27%20fill%3D%27none%27%20stroke%3D%27url(%23g)%27%20stroke-width%3D%273%27%20vector-effect%3D%27non-scaling-stroke%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E") 0 0 / 100% 100% no-repeat; }
}