/* 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; transition-duration: 0.01ms !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;
}


/* 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:hover { color: var(--color-accent); }
.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;
}

/* --- 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 .25s ease; }
.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; }
.work-link-image { position: relative; overflow: clip; border-radius: 10px; }
.work-link-image img { width: 100%; }
.work-link-title { display: flex; flex-direction: column; }
.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 .4s ease; }
.work-link:hover .accent-overlay.mask-jpg { opacity: 1; }
.work-link .h4 { transition: color .2s ease; }
.work-link:hover .h4 { color: var(--color-accent); }
.mask-jpg {
  -webkit-mask-image: url('/images/hero-mask.jpg'); mask-image: url('/images/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/work-mask-mobile.jpg'); mask-image: url('/images/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; }

/* --- 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; }
.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; }

/* --- 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; }
.content-grid-title-label:hover { color: var(--color-text); }
.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: 3 / 2; width: 100%; height: 100%; object-fit: cover; }
.hard-light-overlay-accent { position: absolute; inset: 0; background-color: var(--color-accent); mix-blend-mode: hard-light; }
.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; }
.contact-grid-image { width: 100%; height: 100%; object-fit: cover; opacity: .6; }

.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;
}
.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; }
.contact-form-submit-button-image { width: 18px; height: 18px; }
.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; }
.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 .7s ease, transform .7s ease; }
.reveal.in-view { opacity: 1; transform: none; }
.reveal.reveal-blur { transform: none; filter: blur(5px); transition: opacity .7s ease, filter .7s ease; }
.reveal.reveal-blur.in-view { filter: none; }
/* 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 cubic-bezier(.2,.7,.3,1) 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); }
}

/* ===========================================================================
   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-image { 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-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; }
  .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; }
  .contact-grid { margin-left: 24px; margin-right: 24px; }
  .contact-detail { width: 100%; padding-left: 12px; padding-right: 12px; }
  .utility-page-image-wrapper { width: 60vw; }
}