/* Additions for the built website. They are not part of the design system's site.css:
   1. State views: the sample result and the contact form swap between views.
   2. The phone menu that opens from the menu button.
   3. The contact form's error line and its hidden spam trap. */

/* 1. State views */
[data-view] { display: contents; }
[data-view][hidden] { display: none !important; }

/* 2. Phone menu */
.w-menu { border-top: 1px solid var(--line-paper); background: var(--surface-paper); }
.w-header--dark .w-menu { border-top-color: var(--band-line); background: var(--surface-band); }
.w-menu[hidden] { display: none; }
.w-menu__list { display: flex; flex-direction: column; padding-top: 8px; padding-bottom: 16px; }
.w-menu__link { display: flex; align-items: center; min-height: var(--touch-min); border-bottom: 1px solid var(--line-paper); color: var(--ink); font-size: 16px; line-height: 24px; font-weight: 500; text-decoration: none; }
.w-header--dark .w-menu__link { color: var(--on-band); border-bottom-color: var(--band-line); }
.w-menu__link:last-child { border-bottom: 0; }
.w-menu__link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.w-menu__link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.w-header--dark .w-menu__link:focus-visible { box-shadow: var(--focus-ring-band); }
@media (min-width: 901px) { .w-menu { display: none !important; } }

/* 3. Contact form error */
.w-form-error { margin: 0; color: var(--danger); }

.w-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* 4. Case study videos: the explainer films on the case study pages */
.w-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-xl); background: var(--surface-band); }
.w-video:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* 5. Skip link: the first thing Tab reaches on every page. Hidden until focused. */
.w-skip { position: absolute; top: 12px; left: 16px; z-index: 100; display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0 16px; border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 500; text-decoration: none; transform: translateY(calc(-100% - 24px)); }
.w-skip:focus { outline: none; transform: none; box-shadow: var(--focus-ring); }
main[id] { scroll-margin-top: var(--site-header); }
main[id]:focus { outline: none; }

/* 6. Footer: email and phone are links in the muted footer style */
.w-footer a.w-footer__reach { color: var(--on-band-muted); }
.w-footer a.w-footer__reach:hover { color: var(--on-band); }

/* 7. Photos carry width and height attributes; keep the design's sizing where the CSS sets only a width */
.w-team__photo > img, .w-banner > img { height: auto; }

/* 8. Home hero list of work: pause on hover or focus, and a pause button (WCAG 2.2.2) */
/* Hovering or focusing the button itself does not pause, so its play/pause state stays honest.
   Kept as separate rules so browsers without :has() still get the button and off-screen pause. */
.w-marquee.is-paused .w-marquee__track, .w-marquee.is-offscreen .w-marquee__track { animation-play-state: paused; }
.w-marquee:hover:not(:has(.w-marquee__toggle:hover)) .w-marquee__track { animation-play-state: paused; }
.w-marquee:focus-within:not(:has(.w-marquee__toggle:focus)) .w-marquee__track { animation-play-state: paused; }
.w-marquee__toggle { position: absolute; top: 50%; right: 16px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-top: -18px; padding: 0; border: 1px solid var(--band-line-strong); border-radius: var(--radius-md); background: var(--surface-band); color: var(--on-band-muted); cursor: pointer; transition: color .15s ease-out, border-color .15s ease-out, background-color .15s ease-out; }
.w-marquee__toggle:hover { color: var(--on-band); background: var(--band-hover); }
.w-marquee__toggle:focus-visible { outline: none; box-shadow: var(--focus-ring-band); }
.w-marquee__toggle .lm-icon { display: block; }
.w-marquee__toggle [data-icon="play"], .w-marquee__toggle[aria-pressed="true"] [data-icon="pause"] { display: none; }
.w-marquee__toggle[aria-pressed="true"] [data-icon="play"] { display: block; }
@media (max-width: 900px), (pointer: coarse) {
  .w-marquee__toggle { width: var(--touch-min); height: var(--touch-min); margin-top: calc(var(--touch-min) / -2); right: 8px; }
}
@media (prefers-reduced-motion: reduce) { .w-marquee__toggle { display: none; } }

/* 9. Fields: the input fills its control, so the whole 40/44px box is the tap target */
.lm-field__control > .lm-field__input { align-self: stretch; }