/* reset.css */
/* Minimal modern reset. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"] { margin: 0; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
img, picture, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    animation-delay: 0s !important; transition-duration: 0.01ms !important; transition-delay: 0s !important;
  }
  .work-header.reveal-left.in-view > :not(.label) { animation-delay: 0s !important; }
}


/* tokens.css */
/* Design tokens. */
:root {
  --color-text: #000;
  --color-text-secondary: #969696;
  --color-bg: #fff;
  --color-accent: #7574e6;        /* brand purple */
  --color-accent-soft: #ecedff;   /* pale lavender */
  --color-stat-bg: #f0f1ff;
  --color-error: #ff5454;
  --radius: 20px;
  --radius-sm: 10px;
  --font: "Rubik", Arial, sans-serif;

  /* page-transition sheets */
  --sheet-1: #f0f0f0;
  --sheet-2: #1a1a1a;
  --sheet-3: #7574e6;

  /* --- Motion ------------------------------------------------------------
     Shared duration/easing tokens. They affect how elements transition, not
     their resting layout; values mirror the curves/timings previously shipped. */
  --dur-fast: 140ms;     /* micro feedback: color, small nudges */
  --dur-base: 250ms;     /* default hover/press transitions */
  --dur-slow: 450ms;     /* washes, settles, count-ups */
  --dur-reveal: 700ms;   /* scroll-reveal entrances (matches the old .reveal) */
  --ease-out: cubic-bezier(.22, 1, .36, 1);       /* standard decel */
  --ease-emphasized: cubic-bezier(.2, .7, .3, 1); /* existing snap-in curve */
  --ease-overshoot: cubic-bezier(.34, 1.56, .64, 1); /* gentle spring for hovers */
  --ease-sheet: cubic-bezier(.65, 0, .35, 1);     /* existing transition-sheet curve */
  --stagger-step: 70ms;  /* canonical inter-item cascade delay */
}


/* base.css */
/* Self-hosted Rubik (variable). woff2 primary, ttf fallback. */
@font-face {
  font-family: "Rubik";
  src: url("/fonts/Rubik-VariableFont_wght.woff2") format("woff2"),
       url("/fonts/Rubik-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("/fonts/Rubik-Italic-VariableFont_wght.woff2") format("woff2"),
       url("/fonts/Rubik-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

html, body { background-color: var(--color-bg); }
body {
  font-family: var(--font);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* Contain the off-screen start of `.reveal-left` slides at the true viewport edge.
   `clip` (not `hidden`) creates no scroll container, so sticky descendants still work. */
main { overflow-x: clip; }

/* Type scale */
.h1 { font-size: 60px; line-height: 80px; font-weight: 700; color: var(--color-text); }
.h2 { font-size: 40px; line-height: 50px; font-weight: 700; color: var(--color-text); }
.h3 { font-size: 30px; line-height: 50px; font-weight: 500; color: var(--color-text); }
.h4 { font-size: 20px; line-height: 32px; font-weight: 700; color: var(--color-text); }

.body-large  { font-size: 20px; line-height: 40px; }
.body-medium { font-size: 16px; line-height: 30px; }
.body-small  { font-size: 12px; line-height: 30px; text-align: center; }

.label { color: var(--color-accent); font-size: 16px; font-weight: 900; line-height: 46px; }

.h1-accent, .accent-text { color: var(--color-accent); }
.white-text { color: var(--color-bg); }
.black-text { color: var(--color-text); }
.bold-text { font-weight: 700; }
.opacity-fifty { opacity: .5; }

@media screen and (max-width: 767px) {
  .h1 { font-size: 40px; line-height: 48px; }
  .body-large { font-size: 16px; line-height: 30px; }
}
@media screen and (max-width: 479px) {
  .h1 { line-height: 48px; }
}


/* components.css */
/* ===========================================================================
   Components.
   =========================================================================== */

/* --- Navigation ---------------------------------------------------------- */
.sticky-navigation { position: sticky; top: 0; z-index: 999; }
.hidden-navigation {
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  transform: translateY(-100%); transition: transform .6s ease-out;
}
.hidden-navigation.is-visible { transform: translateY(0); }
.navigation { background-color: var(--color-bg); pointer-events: auto; }

.navigation-content-wrapper {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 12px 40px;
}
.navigation-logo-link { display: flex; align-items: center; gap: 16px; height: 28px; flex: none; }
.navigation-logo-link-image { width: auto; height: 28px; }
.navigation-logo-link-image-mobile { width: auto; height: 28px; display: none; }
.navigation-links-wraper { display: flex; gap: 28px; }
.navigation-link {
  color: var(--color-text); text-transform: uppercase; text-decoration: none;
  font-size: 16px; font-weight: 900; line-height: 46px;
}
.navigation-link.is-current {
  text-decoration: underline; text-decoration-color: var(--color-accent);
  text-decoration-thickness: 6px; text-underline-offset: 10px;
}
.navigation-menu-toggle { display: none; }
.navigation-menu-toggle img { width: 24px; height: 24px; }
.navigation-menu-toggle.is-close { display: inline-flex; }

.navigation-mobile {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column;
  background-color: var(--color-bg); overscroll-behavior: contain;
}
.navigation-links-wrapper-mobile {
  display: flex; flex-direction: column; align-items: flex-end; padding: 0 40px;
}
/* Staggered link cascade on open. Links rest hidden only while the menu is closed
   (the menu itself is [hidden], so nothing shows pre-open); `.is-open` cascades them in.
   Under reduced motion the global 0.01ms override completes the animation instantly. */
.navigation-mobile .navigation-links-wrapper-mobile .navigation-link { opacity: 0; transform: translateY(12px); }
.navigation-mobile.is-open .navigation-links-wrapper-mobile .navigation-link {
  animation: menu-link-in var(--dur-base) var(--ease-out) forwards;
  animation-delay: calc(var(--reveal-i, 0) * var(--stagger-step));
}
@keyframes menu-link-in { to { opacity: 1; transform: none; } }

/* --- Buttons ------------------------------------------------------------- */
.button-right {
  display: flex; align-items: center; gap: 24px; text-decoration: none;
  color: var(--color-text); font-size: 20px; font-weight: 900; line-height: 46px;
}
.button-right.accent-text { color: var(--color-accent); }
.button-right:hover { color: var(--color-accent); }
.white-rounded-background { background-color: var(--color-bg); border-radius: 10px; padding: 8px 24px; }
.bounce-right { width: 20px; height: 20px; transition: transform var(--dur-base) var(--ease-out); }
.button-right:hover .bounce-right, .reveal-bounce:hover .bounce-right { transform: translateX(8px); }

/* --- Hero (home) --------------------------------------------------------- */
.video-hero-section { position: relative; height: 150vh; overflow: hidden; background-color: var(--color-accent); }
.video-hero-video-wrapper {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 80%; margin-top: 100vh;
}
.video-hero-video { width: 100%; height: 100%; object-fit: cover; }
.video-hero-content {
  position: relative; z-index: 2; display: flex; flex-direction: column;
  justify-content: center; align-items: center; height: 100vh; padding: 100px 32px 40px;
}
.hero-title-stack { width: 100%; margin-top: auto; }
.animated-logo-text {
  width: 100%; text-align: right; color: var(--color-accent-soft);
  font-size: 57px; font-weight: 700; line-height: 80px; margin-bottom: -40px;
}
.animated-logo-text::after { content: '|'; margin-left: 2px; display: inline-block; vertical-align: middle; line-height: 0; animation: blink 1s step-start infinite; }
@keyframes blink { 50% { opacity: 0; } }

.hero-logo-stack, .hero-logo-stack-mobile { position: relative; width: 100%; z-index: 10; aspect-ratio: 1376 / 312; }
.hero-logo-stack-mobile { display: none; }
#logo-stroke, #logo, #logo-stroke-mobile, #logo-mobile { position: absolute; top: 0; left: 0; width: 100%; }
#logo-stroke path, #logo path, #logo-stroke-mobile path, #logo-mobile path { fill: var(--color-accent-soft); }

.down-arrow-wrapper { display: flex; justify-content: center; align-items: flex-end; margin-top: auto; z-index: 1; }
.down-arrow-wrapper img { width: 40px; height: auto; animation: arrow-bounce 3s ease-in-out infinite; }
.down-arrow-wrapper:hover img { animation: arrow-wobble .5s ease-in-out; }
@keyframes arrow-bounce { 0%, 35%, 100% { transform: translateY(0); } 10% { transform: translateY(8px); } 20% { transform: translateY(-2px); } 28% { transform: translateY(4px); } }
@keyframes arrow-wobble { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-9deg); } 70% { transform: rotate(9deg); } }

/* --- Home content -------------------------------------------------------- */
.home-content { display: flex; flex-direction: column; gap: 40px; padding: 80px 40px 24px; }
.vertical-padding-wrapper { padding: 80px 0 89px; }
.we-are-wrapper { display: flex; flex-direction: column; max-width: 80vw; }
.home-work-content-wrapper {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(382px, max-content));
  gap: 80px; width: 100%;
}
.home-work-title { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; position: sticky; top: 80px; }
.home-work-content { display: flex; flex-direction: column; gap: 25px; }

/* --- Work cards (home + listing) ---------------------------------------- */
.work-link { display: flex; flex-direction: column; gap: 16px; text-decoration: none; }
/* `isolation` keeps the tint's blend confined to the card art; without it the layer
   would composite against whatever the page paints behind the card.
   The mask is load-bearing, not decorative: while the tint and filter animate, WebKit
   promotes the image to its own layer and stops applying the frame's rounded
   `overflow: clip`, so the corners square off for the length of the transition. Declaring
   any mask routes the frame through a mask layer instead, and that carries the radius.
   Both gradient stops are fully opaque, so the mask paints nothing of its own. */
.work-link-image {
  position: relative; overflow: clip; border-radius: 10px; isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
}
.work-link-image img { width: 100%; }
.work-link-title { display: flex; flex-direction: column; }
/* Rest-state duotone: the image is desaturated, then the accent is blended in `overlay`,
   which multiplies the shadow half and screens the highlight half. Black and white survive
   at the ends and midtones land on the accent, so darks deepen and lights stay light.
   Hover unwinds both halves back to the untouched image, handing off to the mask below. */
.work-tint { position: absolute; inset: 0; z-index: 10; background-color: var(--color-accent); mix-blend-mode: overlay; transition: opacity var(--dur-slow) var(--ease-out); }
.work-link-image img { filter: grayscale(1); }
.work-link:hover .work-tint, .work-link:focus-visible .work-tint { opacity: 0; }
.work-link:hover .work-link-image img, .work-link:focus-visible .work-link-image img { filter: grayscale(0); }
.accent-overlay { position: absolute; inset: 0; width: 100%; height: 100%; background-color: var(--color-accent); }
.accent-overlay.mask-jpg { z-index: 21; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
/* Scale the mask in lockstep with the image zoom (same factor/origin/timing) so its
   negative space tracks the growing image and stays aligned; the frame clips the growth. */
.work-link:hover .accent-overlay.mask-jpg, .work-link:focus-visible .accent-overlay.mask-jpg { opacity: 1; transform: scale(1.04); }
.work-link .h4 { transition: color var(--dur-fast) var(--ease-out); }
.work-link:hover .h4 { color: var(--color-accent); }
.mask-jpg {
  -webkit-mask-image: url('/images/masks/hero-mask.jpg'); mask-image: url('/images/masks/hero-mask.jpg');
  -webkit-mask-mode: luminance; mask-mode: luminance;
  -webkit-mask-size: cover; mask-size: cover;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.mask-jpg[data-type="mobile"] {
  -webkit-mask-image: url('/images/masks/work-mask-mobile.jpg'); mask-image: url('/images/masks/work-mask-mobile.jpg');
}

/* --- Work listing -------------------------------------------------------- */
.work-section { display: flex; flex-direction: column; gap: 80px; margin-top: 80px; padding: 0 40px; }
.work-header { display: flex; flex-direction: column; justify-content: space-between; gap: 35px; max-width: 70vw; }
.work-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
/* `.work-link` is display:flex, which overrides UA [hidden]; restore display:none. */
.work-link[hidden] { display: none; }

/* --- Work filter --------------------------------------------------------- */
.work-toolbar { display: flex; justify-content: flex-end; margin-bottom: -48px; }
.work-filter { display: flex; gap: 28px; }
.work-filter-tab {
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
  color: var(--color-text); text-transform: uppercase; font-size: 16px; font-weight: 900; line-height: 46px;
  /* underline grows from the left on hover; zero-width at rest */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px;
  transition: background-size var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.work-filter-tab:hover, .work-filter-tab:focus-visible { background-size: 100% 2px; }
.work-filter-tab.is-current {
  background-image: none; /* the hover underline is replaced by the thick underline below */
  text-decoration: underline; text-decoration-color: var(--color-accent);
  text-decoration-thickness: 4px; text-underline-offset: 8px;
}

/* --- Footer -------------------------------------------------------------- */
.footer-section { margin-top: 80px; }
.footer { display: flex; flex-direction: column; gap: 24px; padding: 0 40px 40px; }
.primary-footer-container {
  display: grid; grid-template-columns: 1fr .5fr; gap: 24px;
  background-color: var(--color-accent); border-radius: 10px; padding: 120px 40px;
}
.primary-footer-content { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.primary-footer-menu { display: flex; flex-direction: column; }
.footer-nav-link { color: var(--color-bg); text-decoration: none; font-size: 20px; font-weight: 700; line-height: 46px; }
.footer-nav-link:hover { color: var(--color-text); }
.secondary-footer-container { display: flex; justify-content: space-between; align-items: center; }
.secondary-footer-menu { display: flex; justify-content: flex-end; gap: 24px; }
.secondary-footer-menu-link { text-decoration: none; }
.body-medium.secondary-footer-menu-link:hover { color: var(--color-accent); }

/* --- Work detail --------------------------------------------------------- */
.work-detail-section { display: flex; flex-direction: column; gap: 80px; padding: 80px 40px 0; }
.work-hero { position: relative; display: flex; flex-direction: column; gap: 40px; }
.work-hero-header { display: flex; flex-direction: column; gap: 40px; width: 70vw; }
.work-divider { height: 1px; flex: none; background-color: #0003; }
.work-hero-metric-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  background-color: var(--color-bg); padding-bottom: 16px; position: sticky; top: 60px;
}
.work-hero-metric { display: flex; flex-direction: column; }
/* A metric value that is a link. Inherits the plain value text (color via `a { color: inherit }`,
   opacity from the .opacity-fifty parent); only the underline is removed. */
.work-hero-metric-link { text-decoration: none; }
.desktop-only { display: block; width: 100%; height: 100%; border-radius: 10px; overflow: clip; }
.mobile-only { display: none; }
.work-hero-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.work-hero-stat {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px;
  background-color: var(--color-stat-bg); border-radius: 10px; padding: 77px 24px;
}
.work-hero-stat-value { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--color-accent); font-size: 40px; font-weight: 500; line-height: 80px; }
.work-hero-stat-text { line-height: 40px; }
.work-hero-stat-icon { width: 43px; height: 40px; }
.work-hero-stat-caption { text-align: center; white-space: nowrap; line-height: 20px; }
.work-content-body { display: flex; flex-direction: column; }
.work-content-wrapper { display: flex; flex-direction: column; justify-content: center; gap: 80px; }
.work-content { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; }
.work-content-header { display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; align-self: start; position: sticky; top: 80px; }
.work-content-items { display: flex; flex-direction: column; gap: 23px; }
.work-content-item { display: flex; flex-direction: column; gap: 23px; margin: 0; padding-bottom: 23px; }
.work-content-item-image { width: 100%; border-radius: 10px; overflow: clip; }

/* --- Legal pages --------------------------------------------------------- */
.legal-section { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 80px 40px 0; }
.width-seventy { width: 70vw; }
.legal-container { display: flex; flex-direction: column; }
.legal-container.body-large { gap: 16px; }
.legal-section:has(.app-privacy-logo) { padding-top: 24px; padding-bottom: 40px; }
.app-privacy-logo { width: 124px; margin-bottom: 24px; }
.legal-container > .bold-text ~ p { padding-left: 24px; } /* indent body copy under flush-left titles (not the intro above item 1) */
.legal-container > .bold-text { margin-top: 24px; } /* extra separation above each numbered section title */

/* --- App-Specific Disclosures: collapsible entries + data table ----------
   Each app is a native <details> (works with zero JS: collapsed, keyboard- and
   screen-reader-accessible, crawlable). accordion.js layers on a smooth height
   animation; the global reduced-motion override neutralizes it automatically.
   Indented to align with the padding-left:24px body copy under Section 2. */
.privacy-item {
  align-self: stretch;
  margin-left: 24px;
  border: 1px solid #0000001a;
  border-radius: 10px;
  background-color: var(--color-bg);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.privacy-item:hover, .privacy-item[open] { box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
.privacy-item-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px 24px; cursor: pointer;
  font-size: 20px; font-weight: 700; line-height: 32px;
  list-style: none; /* Firefox: drop the default disclosure triangle */
  border-radius: 10px;
  transition: background-color var(--dur-base) var(--ease-out);
}
.privacy-item-summary::-webkit-details-marker { display: none; } /* Safari/Chrome */
.privacy-item-summary:hover, .privacy-item[open] > .privacy-item-summary { background-color: var(--color-stat-bg); }
.privacy-item[open] > .privacy-item-summary { border-radius: 10px 10px 0 0; }
/* CSS-drawn chevron (currentColor-free, rotates on open); points down at rest. */
.privacy-chevron {
  width: 10px; height: 10px; flex: none; margin-bottom: 3px;
  border-right: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent);
  transform: rotate(45deg); transition: transform var(--dur-base) var(--ease-out);
}
.privacy-item[open] > .privacy-item-summary .privacy-chevron { transform: rotate(-135deg); margin-bottom: -3px; }
/* Body region: accordion.js animates its inline height; overflow clips the table mid-slide. */
.privacy-item-body { overflow: hidden; transition: height var(--dur-base) var(--ease-out); }

.privacy-table { width: 100%; border-collapse: collapse; }
.privacy-table th, .privacy-table td {
  text-align: left; vertical-align: top; padding: 14px 24px;
  font-size: 16px; font-weight: 400; line-height: 30px; /* body-medium */
  border-top: 1px solid #0003;
}
.privacy-table th { width: 32%; color: var(--color-accent); font-weight: 700; }

/* Section 3 provider matrix: column-header table (Service | Purpose | Privacy).
   Shares the .privacy-table cell rules; overrides below give it column headers and a
   dark service-name column so it reads distinctly from the field→detail app tables. */
.provider-table { align-self: stretch; margin-left: 24px; width: 100%; }
.provider-table thead th { color: var(--color-accent); font-weight: 700; border-top: 0; border-bottom: 2px solid #0003; }
.provider-table thead th:nth-child(1) { width: 28%; }
.provider-table thead th:nth-child(2) { width: 48%; }
.provider-table thead th:nth-child(3) { width: 24%; }
.provider-table tbody th { width: auto; color: var(--color-text); font-weight: 700; }
.provider-table tbody tr:first-child th, .provider-table tbody tr:first-child td { border-top: 0; }

/* --- Content grid (about / services) ------------------------------------ */
.content-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; padding: 80px 40px 0; }
.content-grid-title { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 80px; }
.content-grid-title-label-container { display: flex; flex-direction: column; align-items: flex-start; }
.content-grid-title-label { color: var(--color-accent); text-decoration: none; font-size: 16px; font-weight: 600; line-height: 46px; }
@media (hover: hover) { .content-grid-title-label:hover { color: var(--color-text); } } /* avoid sticky tap-hover on touch */
.content-grid-title-label.is-active { color: var(--color-text); } /* scrollspy: current section */
.content-grid-title-button-wrapper { margin-top: 80px; }
.content-grid-detail { display: flex; flex-direction: column; gap: 23px; }
.content-grid-detail-item { position: relative; display: flex; flex-direction: column; }
.content-grid-detail-image { position: relative; overflow: clip; border-radius: 10px; }
.content-grid-detail-image .image { aspect-ratio: 16 / 9; width: 100%; height: 100%; object-fit: cover; }
.scroll-anchor { position: absolute; top: -80px; height: 0; }
.content-grid-detail-item .body-medium p { margin: 0 0 8px; }
.content-grid-detail-item ul[role="list"] { padding-left: 24px; list-style: disc; }

/* --- Contact ------------------------------------------------------------- */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr; overflow: clip;
  background-color: var(--color-accent); border-radius: 10px; margin: 80px 40px;
}
.contact-detail { display: flex; flex-direction: column; justify-content: center; gap: 16px; width: 90%; padding: 80px 40px; }
/* The photo carries the same duotone baked into the /services photography: desaturated, then
   `rgb(1 0 114)` added to it, which is the accent with its minimum channel subtracted. Whites
   survive and blacks floor at #000072. There is no hover state here, so the tint is
   unconditional. `isolation` confines the blend to the photo rather than the purple panel
   behind it, and `overflow` keeps the reveal's scale settle inside the cell so the tint stays
   aligned with what is visible. */
.contact-grid-media { position: relative; isolation: isolate; overflow: clip; }
.contact-grid-media::after { content: ''; position: absolute; inset: 0; }
/* Guarded because an engine without `plus-lighter` drops the blend and paints the layer as a
   solid block over the photo. Without it the photo stays desaturated and simply untinted. */
@supports (mix-blend-mode: plus-lighter) {
  .contact-grid-media::after { background-color: rgb(1 0 114); mix-blend-mode: plus-lighter; }
}
.contact-grid-image { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }

.contact-form { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.contact-form-field-container { display: flex; flex-direction: column; gap: 8px; }
.contact-form-field-label { color: var(--color-accent-soft); font-size: 16px; font-weight: 900; line-height: 1; }
.contact-form-field-text, .contact-form-field-textarea {
  background-color: #ffffff1a; border: 2px solid #fff3; border-radius: 10px;
  color: var(--color-bg); padding: 16px 24px; font-size: 16px; line-height: 32px;
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
/* Focus lift: brighten the border + fill so the active field reads clearly on the
   purple panel (the global accent outline would be near-invisible here). */
.contact-form-field-text:focus, .contact-form-field-textarea:focus { border-color: var(--color-bg); background-color: #ffffff2e; }
.contact-form-field-text:focus-visible, .contact-form-field-textarea:focus-visible { outline-color: var(--color-bg); }
.contact-form-field-label { transition: color var(--dur-base) var(--ease-out); }
.contact-form-field-container:focus-within .contact-form-field-label { color: var(--color-bg); }
.contact-form-field-text { height: 64px; }
.contact-form-field-textarea { width: 100%; min-height: 135px; resize: none; }
.contact-form-field-text::placeholder, .contact-form-field-textarea::placeholder { color: #ffffff80; }
.contact-form-submit-button {
  display: inline-flex; align-items: center; gap: 24px; width: fit-content;
  background-color: var(--color-bg); color: var(--color-accent); border-radius: 10px;
  padding: 8px 24px; font-size: 20px; font-weight: 900; line-height: 46px;
}
.contact-form-submit-button:disabled { opacity: .6; cursor: progress; animation: btn-pulse 1.2s var(--ease-out) infinite; }
@keyframes btn-pulse { 50% { opacity: .35; } }
.contact-form-submit-button-image { width: 18px; height: 18px; }
/* Result messages rise + fade in when un-hidden (they are [hidden] until then). */
.form-done, .form-fail { animation: form-msg-in var(--dur-slow) var(--ease-out); }
@keyframes form-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.form-done { color: var(--color-bg); font-weight: 700; }
.form-fail { background-color: var(--color-error); border-radius: 10px; padding: 0 8px; color: var(--color-text); font-size: 12px; line-height: 30px; }
/* Gentle shake on validation failure (neutralized under reduced motion via the global override). */
.contact-form.shake { animation: form-shake var(--dur-slow) var(--ease-out); }
@keyframes form-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
/* Cat-03: a slow scale-settle as the contact panel reveals (no layout shift; grid clips). */
.contact-grid.reveal-blur .contact-grid-image { transform: scale(1.06); transition: transform 900ms var(--ease-out); }
.contact-grid.reveal-blur.in-view .contact-grid-image { transform: none; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Utility / 404 ------------------------------------------------------- */
.utility-page-wrap { display: flex; justify-content: center; align-items: center; width: 100vw; min-height: 100vh; background-color: var(--color-bg); }
.utility-page-content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 40px; padding: 0 24px; }
.utility-page-image-wrapper { width: 20vw; }
.utility-page-content .button-right { justify-content: center; }

/* --- Page-transition sheets (was inline in the old platform head) ------------- */
.transition-wrapper { position: fixed; inset: 0; z-index: 9999; pointer-events: none; display: flex; flex-direction: column; justify-content: center; }
.transition-sheet { position: absolute; top: -25vh; left: 0; width: 100vw; height: 150vh; transform: skewY(-10deg); will-change: transform; box-shadow: 0 -20px 40px rgba(0,0,0,.1); }
.sheet-1 { background-color: var(--sheet-1); z-index: 1; }
.sheet-2 { background-color: var(--sheet-2); z-index: 2; }
.sheet-3 { background-color: var(--sheet-3); z-index: 3; }

/* --- Scroll-reveal states ----------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.reveal.in-view { opacity: 1; transform: none; }
.reveal.reveal-blur { transform: none; filter: blur(5px); transition: opacity var(--dur-reveal) var(--ease-out), filter var(--dur-reveal) var(--ease-out); }
.reveal.reveal-blur.in-view { filter: none; }
/* subtle scale-in for cards/images: a 0.98 settle that resolves to the exact rest size. */
.reveal.reveal-scale { opacity: 0; transform: translateY(24px) scale(.98); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.reveal.reveal-scale.in-view { opacity: 1; transform: none; }
/* reveal-stagger: a container whose direct children cascade in as a unit. reveal.js sets
   `--reveal-i` (0,1,2…) per child on intersect; each child starts hidden and arrives offset by
   its index × the canonical stagger step. Children land at their exact rest position. */
.reveal.reveal-stagger.in-view { transition: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.reveal-stagger.in-view > * { opacity: 1; transform: none; transition-delay: calc(var(--reveal-i, 0) * var(--stagger-step)); }
/* slide-in-from-left: keep the observed wrapper in flow so the IntersectionObserver
   still sees the trigger on-screen; animate its children instead. The children start a full
   viewport-width to the left (off-screen regardless of their own width) and the overshoot uses
   fixed px so multiple children (e.g. the Work header's label + heading) slide as one unit.
   `main { overflow-x: clip }` contains the off-screen start at the true screen edge. */
.reveal.reveal-left { opacity: 1; transform: none; transition: none; }
.reveal.reveal-left > :not(.label) { opacity: 0; transform: translateX(-100vw); }
.reveal.reveal-left.in-view > :not(.label) { animation: snap-in-left .8s var(--ease-emphasized) forwards; }
/* Work page: hold the heading until the page-transition sheets clear (~0.85s);
   the static `.label` ("OUR WORK") eyebrow is excluded so it stays on screen throughout. */
.work-header.reveal-left.in-view > :not(.label) { animation-delay: .85s; }
@keyframes snap-in-left {
  0%   { opacity: 0; transform: translateX(-100vw); }
  60%  { opacity: 1; transform: translateX(12px); }   /* overshoot past final */
  80%  { transform: translateX(-4px); }               /* settle back */
  100% { opacity: 1; transform: translateX(0); }
}

/* ===========================================================================
   Micro-interactions — hover/press/focus gloss. All compositor-only
   (transform / opacity / background-size) and hover-only, so the rest state
   the site ships is never touched. Every hover has a :focus-visible twin.
   =========================================================================== */

/* Buttons: brief press feedback + arrow nudge (the arrow nudge already exists). */
.button-right, .contact-form-submit-button { transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.button-right:active, .contact-form-submit-button:not(:disabled):active { transform: scale(.97); }
/* White pills: soft elevation lift on hover/focus. */
.white-rounded-background, .contact-form-submit-button { transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.white-rounded-background:hover, .button-right:focus-visible .white-rounded-background,
.contact-form-submit-button:not(:disabled):hover, .contact-form-submit-button:focus-visible { box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }

/* Animated underline: grows from the left on hover/focus. Zero-width at rest, so
   nothing changes when idle. Uses a gradient (not a pseudo-element) so it also works
   on wrapping inline legal links. The nav `is-current` thick underline is excluded. */
.navigation-link:not(.is-current),
.legal-container a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.navigation-link:not(.is-current):hover, .navigation-link:not(.is-current):focus-visible,
.legal-container a:hover, .legal-container a:focus-visible { background-size: 100% 2px; }

/* Image frames: gentle scale-in-frame on hover. Containers already clip (overflow: clip
   + radius), so the image breathes with no layout shift. */
/* The card image also transitions `filter`, so the rest-state duotone lifts on the same
   curve as the zoom (see the tint block above). */
.work-link-image img { transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out); }
.content-grid-detail-image .image { transition: transform var(--dur-slow) var(--ease-out); }
.work-link:hover .work-link-image img, .work-link:focus-visible .work-link-image img,
.content-grid-detail-image:hover .image { transform: scale(1.04); }

/* ===========================================================================
   Responsive — the old platform default breakpoints (991 / 767 / 479).
   =========================================================================== */
@media screen and (max-width: 991px) {
  .navigation-content-wrapper { padding: 12px 24px; }
  .navigation-menu-toggle { display: inline-flex; width: 24px; height: 24px; }
  .navigation-logo-link-image-mobile { display: block; }
  .navigation-logo-link-image, .navigation-links-wraper { display: none; }
  .navigation-links-wrapper-mobile { padding: 0 24px; }

  .video-hero-section { height: 140vh; }
  .animated-logo-text { font-size: 40px; line-height: 60px; margin-bottom: -30px; }

  .home-work-content-wrapper { display: flex; flex-direction: column; }
  .work-grid { grid-template-columns: 1fr 1fr; }

  .work-hero-metric-grid { position: static; display: flex; flex-direction: column; }
  .work-hero-stat-grid { display: flex; flex-direction: column; }
  .work-content { display: flex; flex-direction: column; }
  .work-content-header { position: static; }

  .legal-section { padding-left: 24px; padding-right: 24px; }
  .content-grid { display: flex; flex-direction: column; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-grid-media { aspect-ratio: 1; }
  .utility-page-image-wrapper { width: 30vw; }
}

@media screen and (max-width: 767px) {
  .home-content { padding-left: 24px; padding-right: 24px; }
  .video-hero-section { height: 120vh; }
  .video-hero-video-wrapper { height: 60vh; }
  .video-hero-content { justify-content: center; padding: 0 24px 20px; }
  .animated-logo-text { font-size: 34px; line-height: 68px; }

  .footer { padding: 0 24px 24px; }
  .primary-footer-container { grid-template-columns: 1fr; }
  .primary-footer-menu { display: none; }
  .work-grid { display: flex; flex-direction: column; }
  .work-header { max-width: none; }
  .work-filter { flex-direction: row; flex-wrap: nowrap; gap: 22px; }

  .work-detail-section { padding-left: 24px; padding-right: 24px; }
  .work-hero-header { width: auto; }
  .mobile-only { display: block; width: 100%; border-radius: 10px; overflow: clip; }
  .desktop-only { display: none; }
  .work-hero-stat-text { font-size: 50px; }

  .content-grid { padding-left: 24px; padding-right: 24px; }
  .contact-grid { margin: 0 0 80px; border-radius: 0; } /* full-bleed purple panel, flush to nav */
  .contact-detail { width: 100%; padding-left: 24px; padding-right: 24px; }
  .contact-grid-media { display: none; } /* form-only focus on mobile */
  .utility-page-image-wrapper { width: 40vw; }
}

@media screen and (max-width: 479px) {
  .video-hero-section { height: 150vh; }
  .video-hero-video-wrapper { height: 100vh; }
  .video-hero-content { padding-bottom: 40px; }
  .animated-logo-text { white-space: nowrap; font-size: 26px; line-height: 48px; margin-bottom: -10px; }
  .hero-title-stack { margin-top: 200px; }
  .hero-logo-stack { display: none; }
  .hero-logo-stack-mobile { display: block; }

  .secondary-footer-container { flex: 0 auto; }
  .legal-section { padding-right: 24px; }
  .legal-container > .bold-text ~ p { padding-left: 16px; } /* tighter indent on small screens */
  .privacy-item { margin-left: 16px; }
  .privacy-item-summary { padding: 14px 16px; font-size: 16px; }
  /* Stack each field/value into a single column so nothing overflows. */
  .privacy-table th, .privacy-table td { display: block; width: 100%; padding: 12px 16px; }
  .privacy-table th { border-top: 1px solid #0003; padding-bottom: 0; }
  .privacy-table td { border-top: 0; padding-top: 4px; }
  /* Provider matrix → one labeled card per provider. Hide the column headers (kept for
     screen readers) and prefix each value with its column name via data-label. */
  .provider-table { margin-left: 16px; }
  .provider-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .provider-table tbody tr { display: block; padding: 8px 0; border-top: 1px solid #0003; }
  .provider-table tbody tr:first-child { border-top: 0; }
  .provider-table tbody th { border-top: 0; padding: 4px 16px 2px; }
  .provider-table tbody td { border-top: 0; padding: 2px 16px; }
  .provider-table tbody td::before { content: attr(data-label) ": "; color: var(--color-accent); font-weight: 700; }
  .utility-page-image-wrapper { width: 60vw; }
}