:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-duration: 780ms;
  --nav-offset: 76px;
  --page-gutter: clamp(20px, 5vw, 72px);
  --content-max: 1600px;
}

html {
  min-width: 0;
  overflow-x: clip;
  scroll-padding-top: var(--nav-offset);
  scrollbar-gutter: stable;
}

body {
  min-width: 0;
  overflow-x: clip;
}

.campaign-page,
.campaign-page *,
.campaign-page *::before,
.campaign-page *::after {
  box-sizing: border-box;
}

.campaign-page {
  width: 100%;
  min-width: 0 !important;
  overflow-x: clip;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 16px;
  border-radius: 999px;
  background: #0B2B45;
  color: #fff;
  font: 600 14px/1 var(--font-body);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 180ms var(--motion-ease);
}

.skip-link:focus {
  transform: translateY(0);
}

html.lenis {
  scroll-behavior: auto !important;
}

#gallery,
#motion-work,
#grid,
#about {
  scroll-margin-top: 0;
}

.site-nav {
  padding-inline: max(56px, calc((100vw - var(--content-max)) / 2)) !important;
}

.site-nav a,
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.nav-links a {
  justify-content: center;
  min-width: 44px;
  touch-action: manipulation;
}

.site-nav a:hover {
  color: #B95000 !important;
}

.media-button {
  appearance: none;
  display: block;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  touch-action: manipulation;
}

.eyebrow:not(.eyebrow--dark) {
  color: #B95000 !important;
}

.hero {
  grid-template-columns: repeat(2, minmax(0, 620px)) !important;
  justify-content: center;
  gap: clamp(40px, 4vw, 64px) !important;
  padding: clamp(80px, 7vw, 100px) max(var(--page-gutter), calc((100vw - var(--content-max)) / 2)) clamp(72px, 6vw, 84px) !important;
}

.hero-copy {
  width: 100%;
  justify-self: end;
}

.hero-copy > :nth-child(2) {
  font-size: clamp(64px, 5.7vw, 82px) !important;
}

.hero-actions a {
  min-height: 49px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  touch-action: manipulation;
}

.hero-actions a:first-child {
  color: #0B2B45 !important;
}

.hero-actions a:first-child:hover {
  background: #E0731C !important;
  color: #0B2B45 !important;
}

.hero-visual {
  width: 100%;
  max-width: 620px;
  justify-self: start;
}

.section-intro,
.about-section,
.site-footer {
  padding-inline: max(var(--page-gutter), calc((100vw - var(--content-max)) / 2)) !important;
}

.section-intro > :nth-child(2) {
  font-size: clamp(40px, 3.7vw, 52px) !important;
}

.feature-row {
  grid-template-columns: repeat(2, minmax(0, 620px)) !important;
  justify-content: center;
  gap: clamp(40px, 4vw, 64px) !important;
  padding: clamp(36px, 3vw, 52px) max(var(--page-gutter), calc((100vw - var(--content-max)) / 2)) !important;
}

.feature-media,
.feature-copy {
  width: 100%;
  max-width: 620px;
}

.feature-copy > :first-child {
  font-size: clamp(38px, 3.1vw, 44px) !important;
}

.grid-section {
  padding-block: clamp(72px, 6vw, 96px) !important;
  padding-inline: var(--page-gutter) !important;
}

.cs-motion,
.cs-motion-dialog {
  --ink: #0B2B45;
  --on-dark: #FFFFFF;
  --on-dark-mut: rgba(255, 255, 255, .68);
  --accent: #F6862B;
  --accent-2: #F6C547;
  --accent-ink: #0B2B45;
  --sans: var(--font-body);
  --serif: var(--font-body);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --maxw: 1504px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

.cs-motion {
  padding-block: clamp(64px, 8vw, 116px);
  background:
    radial-gradient(circle at 88% 5%, rgba(246, 197, 71, .22), transparent 28%),
    #0B2B45;
  color: var(--on-dark);
}

.cs-motion .wrap {
  max-width: calc(var(--maxw) + 48px);
  margin-inline: auto;
  padding-inline: 24px;
}

.cs-motion-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: clamp(28px, 6vw, 96px);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 52px);
}

.cs-motion .cs-kicker {
  color: var(--accent-2);
  font: 600 12px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.cs-motion h2 {
  max-width: 14ch;
  margin: 15px 0 0;
  color: var(--on-dark);
  font: 600 clamp(2.25rem, 4.7vw, 4.55rem)/.96 var(--font-display);
  letter-spacing: -.04em;
  text-wrap: balance;
}

.cs-motion h2 em {
  color: var(--accent-2);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}

.cs-motion-head > p {
  max-width: 38ch;
  margin: 0;
  color: var(--on-dark-mut);
  font: 400 clamp(1rem, 1.35vw, 1.14rem)/1.58 var(--font-body);
}

.cs-motion-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}

.cs-motion-card {
  appearance: none;
  position: relative;
  aspect-ratio: 1 / 1;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  color: var(--on-dark);
  background: rgba(255, 255, 255, .045);
  cursor: pointer;
  text-align: left;
  isolation: isolate;
}

.cs-motion-card img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #0c2a25;
  transition: transform .5s var(--ease), filter .35s var(--ease);
}

.cs-motion-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 11, 31, 0) 44%, rgba(5, 11, 31, .75) 100%);
}

.cs-motion-play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  color: var(--on-dark);
  background: rgba(17, 25, 54, .5);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(8px);
  font: 600 10px/1 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: transform .35s var(--ease), background .35s var(--ease);
}

.cs-motion-label {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 15px;
  left: 16px;
  color: var(--on-dark);
  font: 500 1rem/1.2 var(--font-body);
  letter-spacing: -.01em;
}

.cs-motion-card:hover img {
  transform: scale(1.045);
  filter: saturate(1.08);
}

.cs-motion-card:hover .cs-motion-play {
  background: var(--accent);
  color: var(--accent-ink);
  transform: translate(-50%, -50%) scale(1.08);
}

.cs-motion-card:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 4px;
}

.cs-motion-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--on-dark);
  background: rgba(10, 17, 43, .98);
}

.cs-motion-dialog::backdrop {
  background: rgba(4, 8, 22, .82);
  backdrop-filter: blur(8px);
}

.cs-motion-dialog-inner {
  box-sizing: border-box;
  display: flex;
  width: min(100%, 1600px);
  min-height: 100%;
  margin-inline: auto;
  padding: clamp(20px, 3vw, 48px);
  flex-direction: column;
}

.cs-motion-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.cs-motion-dialog-kicker {
  display: block;
  color: var(--accent-2);
  font: 600 10px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.cs-motion-dialog h2 {
  margin: 7px 0 0;
  color: var(--on-dark);
  font: 600 clamp(1.4rem, 2.2vw, 2.2rem)/1.1 var(--font-display);
  letter-spacing: -.025em;
}

.cs-motion-dialog-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
}

.cs-motion-count {
  color: var(--on-dark-mut);
  font: 500 11px/1 var(--mono);
  letter-spacing: .08em;
}

.cs-motion-close,
.cs-motion-nav {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, .24);
  color: var(--on-dark);
  background: transparent;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}

.cs-motion-close {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 100px;
  font: 500 14px/1 var(--sans);
}

.cs-motion-close span {
  margin-left: 7px;
  color: var(--accent-2);
  font-size: 20px;
  line-height: 0;
  vertical-align: -2px;
}

.cs-motion-viewer {
  position: relative;
  display: grid;
  flex: 1;
  min-height: 0;
  margin-block: clamp(20px, 3vh, 38px);
  place-items: center;
}

.cs-motion-media {
  width: min(100%, 68vh, 1040px);
}

.cs-motion-player {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 18px;
  background: #07152f;
  box-shadow: 0 36px 96px -42px rgba(0, 0, 0, .9);
}

.cs-motion-timeline {
  display: grid;
  grid-template-columns: auto 42px minmax(0, 1fr) 42px auto;
  gap: 12px;
  align-items: center;
  margin-top: 10px;
}

.cs-motion-control {
  min-width: 56px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 100px;
  color: var(--on-dark);
  background: transparent;
  cursor: pointer;
  font: 600 10px/1 var(--mono);
  letter-spacing: .05em;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}

.cs-motion-control:hover {
  border-color: var(--accent-2);
  color: var(--accent-ink);
  background: var(--accent-2);
}

.cs-motion-control:focus-visible,
.cs-motion-player:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 4px;
}

.cs-motion-time {
  color: var(--on-dark-mut);
  font: 500 10px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

.cs-motion-time:last-child {
  text-align: right;
}

.cs-motion-range {
  --scrub-progress: 0%;
  appearance: none;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.cs-motion-range:disabled {
  cursor: wait;
  opacity: .55;
}

.cs-motion-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--accent-2) 0 var(--scrub-progress), rgba(255, 255, 255, .26) var(--scrub-progress) 100%);
}

.cs-motion-range::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .42);
}

.cs-motion-range::-moz-range-track {
  height: 4px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .26);
}

.cs-motion-range::-moz-range-progress {
  height: 4px;
  border-radius: 100px;
  background: var(--accent-2);
}

.cs-motion-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .42);
}

.cs-motion-range:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 100px;
}

.cs-motion-nav {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  line-height: 1;
}

.cs-motion-prev {
  left: max(0px, calc(50% - min(43vw, 560px)));
  transform: translate(-100%, -50%);
}

.cs-motion-next {
  right: max(0px, calc(50% - min(43vw, 560px)));
  transform: translate(100%, -50%);
}

.cs-motion-close:hover,
.cs-motion-nav:hover {
  border-color: var(--accent-2);
  color: var(--accent-ink);
  background: var(--accent-2);
}

.cs-motion-close:focus-visible,
.cs-motion-nav:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 4px;
}

.cs-motion-dialog-hint {
  margin: 0;
  color: var(--on-dark-mut);
  font: 500 11px/1.4 var(--mono);
  letter-spacing: .05em;
  text-align: center;
}

.ad-grid {
  width: min(100%, 1094px);
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.ad-card {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

.ad-card__image {
  width: 100% !important;
  height: 100% !important;
}

.about-intro,
.pillar-grid {
  width: 100%;
  margin-inline: auto;
}

.about-intro {
  max-width: 1200px;
}

.about-intro > :nth-child(2) {
  font-size: clamp(48px, 5vw, 74px) !important;
}

.pillar-grid {
  max-width: 1440px;
}

.site-footer {
  padding-block: clamp(44px, 4vw, 56px) !important;
}

.marquee-track {
  gap: clamp(14px, 2vw, 22px) !important;
  padding-right: clamp(14px, 2vw, 22px);
}

.marquee-card {
  width: clamp(176px, 45vw, 250px) !important;
  height: clamp(176px, 45vw, 250px) !important;
}

.marquee-section.is-paused .marquee-track,
.marquee-section:focus-within .marquee-track,
html.document-hidden .marquee-track {
  animation-play-state: paused !important;
}

.media-button:focus-visible,
.site-nav a:focus-visible,
.hero-actions a:focus-visible,
.site-footer a:focus-visible,
.lightbox button:focus-visible {
  outline: 3px solid #F6C547;
  outline-offset: 4px;
}

.hero-card:focus-visible,
.feature-media:focus-visible,
.ad-card:focus-visible,
.marquee-card:focus-visible {
  outline-offset: -5px;
}

[data-reveal] {
  opacity: 1;
  transform: none;
}

[data-reveal].reveal-pending {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal="fade"].reveal-pending {
  transform: none;
}

[data-reveal].reveal-pending.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

[data-reveal].reveal-pending:focus-visible {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: 0ms !important;
}

[data-reveal="fade"].reveal-pending.is-visible {
  transform: none;
}

[data-reveal].reveal-settled {
  will-change: auto;
}

html.motion-modal-open,
body.motion-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

.lightbox {
  min-height: 100dvh;
  overflow: auto;
  overscroll-behavior: contain;
  padding:
    max(24px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left)) !important;
}

.lightbox__dialog {
  position: relative;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  margin: auto;
}

.lightbox__close {
  position: absolute;
  right: -18px;
  top: -18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 2px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  background: #0B2B45;
  color: #fff;
  cursor: pointer;
  font: 400 32px/1 var(--font-body);
  touch-action: manipulation;
}

.lightbox__image {
  display: block;
  width: auto !important;
  height: auto !important;
  aspect-ratio: auto;
}

.lightbox__controls button {
  flex: 0 0 48px;
  touch-action: manipulation;
}

.ad-card {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
  contain: layout paint;
}

.ad-card__image {
  transition:
    opacity 180ms ease,
    transform 480ms var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {
  .ad-card:hover .ad-card__image {
    opacity: .82;
    transform: scale(1.018);
  }
}

@media (max-width: 1199px) {
  .site-nav {
    padding: 16px clamp(24px, 4vw, 40px) !important;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr) !important;
    gap: clamp(28px, 4vw, 44px) !important;
    padding: clamp(72px, 8vw, 84px) 40px clamp(64px, 7vw, 72px) !important;
  }

  .hero-copy > :nth-child(2) {
    font-size: clamp(56px, 6.5vw, 76px) !important;
  }

  .hero-card--primary {
    right: clamp(0px, 3vw, 36px) !important;
  }

  .hero-card--secondary {
    left: 0 !important;
  }

  .hero-card--tertiary {
    right: 0 !important;
  }

  .feature-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 44px !important;
    padding: 40px !important;
  }

  .section-intro,
  .grid-section,
  .about-section {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  .ad-grid {
    width: 100%;
    max-width: 900px;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .ad-card {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .ad-card__image {
    width: 100% !important;
    height: 100% !important;
  }

  .pillar-grid {
    width: 100%;
    max-width: 900px;
    margin-inline: auto;
    grid-template-columns: 1fr !important;
    gap: 36px;
  }

  .pillar {
    padding: 0 !important;
    border: 0 !important;
  }

  .site-footer {
    margin-top: 48px !important;
    padding: 44px 40px !important;
  }
}

@media (min-width: 1200px) and (max-width: 1599px) {
  .pillar-grid {
    gap: clamp(24px, 3vw, 40px);
  }

  .pillar {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
    padding: 0 24px !important;
    border: 0 !important;
  }

  .pillar:first-child {
    padding-left: 0 !important;
  }

  .pillar:last-child {
    padding-right: 0 !important;
  }

  .pillar + .pillar {
    border-left: 1px solid rgba(11, 43, 69, .14) !important;
  }

  .pillar-media {
    width: clamp(150px, 13vw, 184px) !important;
    height: clamp(150px, 13vw, 184px) !important;
  }

  .pillar-copy {
    max-width: 340px;
  }
}

@media (max-width: 899px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 36px !important;
    padding: 72px 40px 60px !important;
  }

  .hero-copy {
    max-width: 640px !important;
    justify-self: center;
  }

  .hero-copy > :nth-child(2) {
    font-size: clamp(52px, 8vw, 70px) !important;
  }

  .hero-visual {
    width: 100%;
    max-width: 620px;
    height: clamp(410px, 60vw, 480px) !important;
    justify-self: center;
  }

  .hero-card--primary {
    right: 7% !important;
    width: min(45vw, 340px) !important;
    height: min(45vw, 340px) !important;
  }

  .hero-card--secondary {
    left: 2% !important;
    top: 26% !important;
    width: min(37vw, 280px) !important;
    height: min(37vw, 280px) !important;
  }

  .hero-card--tertiary {
    right: 1% !important;
    width: min(31vw, 235px) !important;
    height: min(31vw, 235px) !important;
  }

  .feature-row {
    grid-template-columns: minmax(0, 620px) !important;
    justify-content: center;
    gap: 30px !important;
    padding: 36px 40px !important;
  }

  .feature-media {
    order: 1 !important;
  }

  .feature-copy {
    order: 2 !important;
  }
}

@media (max-width: 767px) {
  :root {
    --nav-offset: 70px;
  }

  html {
    scrollbar-gutter: auto;
    scrollbar-width: none;
  }

  html::-webkit-scrollbar {
    display: none;
  }

  .site-nav {
    min-height: var(--nav-offset);
    padding:
      12px max(18px, env(safe-area-inset-right))
      12px max(18px, env(safe-area-inset-left)) !important;
    gap: 10px;
    -webkit-backdrop-filter: blur(12px);
  }

  .nav-brand {
    gap: 8px !important;
  }

  .nav-brand > :first-child {
    font-size: 22px !important;
  }

  .nav-brand > :last-child {
    display: none;
  }

  .nav-links {
    gap: clamp(2px, 1.5vw, 10px) !important;
    font-size: 12px !important;
  }

  .nav-links a {
    min-height: 44px;
    padding-inline: 4px;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 34px !important;
    padding:
      64px max(20px, env(safe-area-inset-right))
      48px max(20px, env(safe-area-inset-left)) !important;
  }

  .hero-copy {
    max-width: none !important;
  }

  .hero-copy > :nth-child(2) {
    font-size: clamp(48px, 13vw, 68px) !important;
  }

  .hero-copy > :nth-child(3) {
    font-size: 18px !important;
  }

  .hero-copy > :last-child {
    flex-wrap: wrap;
  }

  .hero-visual {
    height: clamp(320px, 100vw, 420px) !important;
  }

  .hero-card--primary {
    right: 5% !important;
    width: min(56vw, 280px) !important;
    height: min(56vw, 280px) !important;
  }

  .hero-card--secondary {
    left: 1% !important;
    top: 118px !important;
    width: min(45vw, 224px) !important;
    height: min(45vw, 224px) !important;
  }

  .hero-card--tertiary {
    right: 1% !important;
    width: min(38vw, 190px) !important;
    height: min(38vw, 190px) !important;
  }

  .marquee-section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  .section-intro {
    padding:
      64px max(20px, env(safe-area-inset-right))
      32px max(20px, env(safe-area-inset-left)) !important;
  }

  .section-intro > :nth-child(2),
  .grid-intro > :nth-child(2) {
    font-size: clamp(38px, 10vw, 52px) !important;
  }

  .feature-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
    padding:
      32px max(20px, env(safe-area-inset-right))
      32px max(20px, env(safe-area-inset-left)) !important;
  }

  .feature-media {
    order: 1 !important;
  }

  .feature-copy {
    order: 2 !important;
  }

  .feature-copy > :first-child {
    font-size: clamp(34px, 9vw, 44px) !important;
  }

  .grid-section {
    padding:
      64px max(20px, env(safe-area-inset-right))
      64px max(20px, env(safe-area-inset-left)) !important;
    gap: 34px !important;
  }

  .ad-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 560px;
  }

  .about-section {
    gap: 48px !important;
    padding:
      72px max(20px, env(safe-area-inset-right))
      28px max(20px, env(safe-area-inset-left)) !important;
  }

  .about-intro > :nth-child(2) {
    font-size: clamp(44px, 11vw, 64px) !important;
  }

  .pillar {
    grid-template-columns: 118px minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: start;
  }

  .pillar-media {
    width: 118px !important;
    height: 118px !important;
  }

  .pillar--split .pillar-media img:first-child {
    left: 0 !important;
    top: 6px !important;
    width: 70px !important;
    height: 108px !important;
  }

  .pillar--split .pillar-media img:last-child {
    right: 0 !important;
    top: 16px !important;
    width: 70px !important;
    height: 98px !important;
  }

  .pillar-copy > :first-child {
    font-size: 22px !important;
  }

  .site-footer {
    align-items: flex-start !important;
    flex-direction: column;
    margin-top: 38px !important;
    padding:
      38px max(20px, env(safe-area-inset-right))
      max(38px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)) !important;
  }

  .footer-column--end {
    align-items: flex-start !important;
  }

  .lightbox {
    padding:
      max(20px, env(safe-area-inset-top))
      max(20px, env(safe-area-inset-right))
      max(20px, env(safe-area-inset-bottom))
      max(20px, env(safe-area-inset-left)) !important;
  }

  .lightbox__dialog {
    width: 100%;
    max-height: calc(100dvh - 40px);
  }

  .lightbox__image {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 156px) !important;
  }

  .lightbox__controls {
    max-width: calc(100vw - 40px);
  }

  .lightbox__title {
    flex: 1;
    min-width: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lightbox__close {
    right: -10px;
    top: -14px;
  }
}

@media (max-width: 350px) {
  .hero-actions a {
    flex: 1 1 100%;
    width: 100%;
  }
}

@media (max-width: 390px) {

  .pillar {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .pillar-media {
    width: 112px !important;
    height: 112px !important;
  }

  .pillar--split .pillar-media img:first-child {
    width: 66px !important;
    height: 104px !important;
  }

  .pillar--split .pillar-media img:last-child {
    width: 66px !important;
    height: 94px !important;
  }
}

@media (max-width: 880px) {
  .cs-motion-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .cs-motion-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .cs-motion-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cs-motion-play {
    width: 58px;
    height: 58px;
  }

  .cs-motion-dialog-inner {
    padding: 18px;
  }

  .cs-motion-dialog-head {
    align-items: center;
  }

  .cs-motion-dialog-actions {
    gap: 9px;
  }

  .cs-motion-count {
    display: none;
  }

  .cs-motion-media {
    width: 100%;
  }

  .cs-motion-player {
    border-radius: 12px;
  }

  .cs-motion-timeline {
    grid-template-columns: auto 34px minmax(0, 1fr) 34px auto;
    gap: 7px;
  }

  .cs-motion-control {
    min-width: 48px;
    padding-inline: 9px;
  }

  .cs-motion-nav {
    top: auto;
    bottom: 0;
    width: 48px;
    height: 48px;
    transform: none;
  }

  .cs-motion-prev {
    left: 0;
  }

  .cs-motion-next {
    right: 0;
    transform: none;
  }

  .cs-motion-dialog-hint {
    padding-inline: 56px;
    line-height: 1.45;
  }
}

@media (hover: none), (pointer: coarse) {
  .campaign-page a,
  .campaign-page button {
    -webkit-tap-highlight-color: transparent;
  }

  .hero-actions a:active {
    transform: translateY(1px) scale(.99);
  }

  .feature-media:active,
  .ad-card:active,
  .marquee-card:active {
    transform: scale(.985);
  }

  .marquee-section {
    gap: 14px !important;
  }

  .marquee-track {
    width: 100% !important;
    overflow-x: auto;
    padding: 0 20px 8px !important;
    animation: none !important;
    scroll-padding-inline: 20px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .marquee-track::-webkit-scrollbar {
    display: none;
  }

  .marquee-card {
    scroll-snap-align: start;
  }

  .marquee-card[aria-hidden="true"] {
    display: none;
  }
}

@media (hover: none) {
  .ad-card:hover .ad-card__image {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  [data-reveal],
  [data-reveal].reveal-pending,
  [data-reveal].is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0ms !important;
  }

  .hero-card,
  .marquee-track,
  .sc-shine {
    animation: none !important;
  }

  .ad-card__image {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .marquee-track {
    width: 100% !important;
    overflow-x: auto;
    padding-inline: var(--page-gutter);
    scroll-snap-type: x mandatory;
  }

  .marquee-card {
    scroll-snap-align: start;
  }

  .marquee-card[aria-hidden="true"] {
    display: none;
  }
}

/* The Light Guys campaign theme */
:root {
  --page-gutter: clamp(20px, 5vw, 72px);
  --content-max: 1420px;
}

body,
.campaign-page {
  background: #F7F1E6 !important;
}

.site-nav a:hover {
  color: #C92A2A !important;
}

.hero-copy h1,
.section-intro h2,
.feature-copy h3,
.grid-intro h2,
.about-intro h2,
.pillar-copy h3,
.site-footer a {
  font-family: "Playfair Display", Georgia, serif !important;
}

.hero-actions a:first-child {
  color: #FFFFFF !important;
}

.hero-actions a:first-child:hover {
  color: #FFFFFF !important;
  background: #A91F1F !important;
}

.feature-row {
  grid-template-columns: repeat(2, minmax(0, 520px)) !important;
}

.feature-media,
.feature-copy {
  max-width: 520px;
}

.feature-media img {
  aspect-ratio: 2 / 3 !important;
}

.cs-motion,
.cs-motion-dialog {
  --ink: #0C241B;
  --on-dark: #FFFFFF;
  --on-dark-mut: rgba(255, 255, 255, .72);
  --accent: #C92A2A;
  --accent-2: #D7B35B;
  --accent-ink: #0C241B;
  --serif: "Playfair Display", Georgia, serif;
}

.cs-motion {
  background:
    radial-gradient(circle at 88% 5%, rgba(215, 179, 91, .24), transparent 30%),
    linear-gradient(135deg, #0C241B, #123B2A 68%, #184936);
}

.cs-motion h2,
.cs-motion-dialog h2 {
  font-family: "Playfair Display", Georgia, serif;
}

.cs-motion--single .cs-motion-grid {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}

.cs-motion--single .cs-motion-card {
  box-shadow: 0 30px 80px -42px rgba(0, 0, 0, .8);
}

.cs-motion--single .cs-motion-nav {
  visibility: hidden;
}

.cs-motion-dialog {
  background: rgba(6, 24, 17, .985);
}

.cs-motion-dialog::backdrop {
  background: rgba(3, 12, 9, .88);
}

.cs-motion-player {
  background: #081810;
}

.marquee-section,
.grid-section,
.site-footer {
  background: #123B2A !important;
}

.marquee-card {
  width: clamp(176px, 32vw, 210px) !important;
  height: clamp(264px, 48vw, 315px) !important;
}

.ad-grid {
  width: min(100%, 990px);
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.ad-card {
  aspect-ratio: 2 / 3 !important;
  overflow: hidden;
  border-radius: 8px;
  background: #0C241B;
}

.ad-card__image {
  aspect-ratio: 2 / 3;
}

.about-section {
  background: #F7F1E6;
}

.pillar-grid .pillar + .pillar {
  border-color: rgba(18, 59, 42, .16) !important;
}

.pillar-media {
  background: #E9F1E8 !important;
}

.lightbox button:hover {
  border-color: #D7B35B !important;
  color: #D7B35B !important;
}

.media-button:focus-visible,
.site-nav a:focus-visible,
.hero-actions a:focus-visible,
.site-footer a:focus-visible,
.lightbox button:focus-visible {
  outline-color: #D7B35B;
}

@media (max-width: 1199px) {
  .ad-grid {
    max-width: 780px;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 899px) {
  .hero-visual {
    height: clamp(460px, 78vw, 620px) !important;
  }

  .hero-card--primary {
    width: min(42vw, 280px) !important;
    height: min(63vw, 420px) !important;
  }

  .hero-card--secondary {
    width: min(34vw, 230px) !important;
    height: min(51vw, 345px) !important;
  }

  .hero-card--tertiary {
    width: min(28vw, 190px) !important;
    height: min(42vw, 285px) !important;
  }

  .feature-row {
    grid-template-columns: minmax(0, 520px) !important;
  }
}

@media (max-width: 767px) {
  .nav-brand img {
    width: 56px !important;
    height: 52px !important;
  }

  .hero-visual {
    height: clamp(440px, 125vw, 580px) !important;
  }

  .hero-card--primary {
    width: min(50vw, 250px) !important;
    height: min(75vw, 375px) !important;
  }

  .hero-card--secondary {
    top: 28% !important;
    width: min(40vw, 200px) !important;
    height: min(60vw, 300px) !important;
  }

  .hero-card--tertiary {
    width: min(32vw, 160px) !important;
    height: min(48vw, 240px) !important;
  }

  .ad-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .feature-media,
  .feature-copy {
    max-width: none;
  }
}

@media (max-width: 430px) {
  .hero-actions a {
    flex: 1 1 calc(50% - 8px);
    text-align: center;
  }

  .hero-actions a:last-child {
    flex-basis: 100%;
  }
}

/* Midnight Workshop reference: hero preview */
.site-nav {
  background: linear-gradient(180deg, rgba(10, 16, 32, .97), rgba(10, 16, 32, .88)) !important;
  border-bottom-color: rgba(190, 205, 235, .14) !important;
  color: #F4EFE4;
}

.site-nav a,
.site-nav .nav-brand > div {
  color: #F4EFE4 !important;
}

.site-nav a:hover {
  color: #FFE9BD !important;
}

.hero {
  isolation: isolate;
  background:
    radial-gradient(92% 95% at 78% 10%, rgba(38, 64, 110, .66), transparent 55%),
    radial-gradient(70% 90% at 15% 100%, rgba(25, 52, 92, .46), transparent 66%),
    linear-gradient(135deg, #070B16 0%, #0C1426 50%, #101A30 100%) !important;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 22%, rgba(255, 255, 255, .72) 0 1px, transparent 1.5px),
    radial-gradient(circle at 32% 68%, rgba(188, 208, 255, .52) 0 1px, transparent 1.5px),
    radial-gradient(circle at 67% 33%, rgba(255, 255, 255, .58) 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 72%, rgba(188, 208, 255, .48) 0 1px, transparent 1.5px);
  background-size: 220px 190px, 270px 240px, 310px 260px, 250px 230px;
  opacity: .65;
}

.hero-copy,
.hero-visual {
  position: relative;
  z-index: 5;
}

.hero-copy .eyebrow {
  color: #F3D28A !important;
}

.hero-copy h1 {
  color: #F4EFE4 !important;
}

.hero-copy p {
  color: #9FB0C8 !important;
}

.tlg-snow {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.tlg-snow i {
  position: absolute;
  top: -24px;
  border-radius: 50%;
  background: rgba(244, 249, 255, .82);
  box-shadow: 0 0 12px rgba(188, 208, 255, .45);
  animation: tlg-snowfall linear infinite;
}

@keyframes tlg-snowfall {
  0% { transform: translate3d(0, -8vh, 0); opacity: 0; }
  12% { opacity: .7; }
  88% { opacity: .52; }
  100% { transform: translate3d(var(--snow-drift), 108vh, 0); opacity: 0; }
}

.tlg-lightstring {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  height: 48px;
  pointer-events: none;
}

.tlg-lightstring__wire {
  position: absolute;
  top: 11px;
  right: -2%;
  left: -2%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(200, 215, 245, .30), rgba(200, 215, 245, .18), transparent);
}

.tlg-lightstring__row {
  position: absolute;
  top: 11px;
  right: 0;
  left: 0;
  display: flex;
  justify-content: space-around;
  padding-inline: 1.5%;
}

.tlg-lightstring i {
  display: block;
  width: 10px;
  height: 14px;
  border-radius: 50% 50% 52% 52% / 42% 42% 64% 64%;
  animation: tlg-bulb-glow ease-in-out infinite;
}

@keyframes tlg-bulb-glow {
  0%, 100% { opacity: .55; box-shadow: 0 0 6px 1px currentColor; }
  50% { opacity: 1; box-shadow: 0 0 16px 5px currentColor; }
}

@media (prefers-reduced-motion: reduce) {
  .tlg-snow i,
  .tlg-lightstring i {
    animation: none !important;
  }
}

/* Midnight Workshop reference: complete campaign theme */
:root {
  --tlg-ink: #0A1020;
  --tlg-panel: #101A30;
  --tlg-panel-2: #0D1526;
  --tlg-night: #070B16;
  --tlg-gold: #F3D28A;
  --tlg-gold-soft: #FFE9BD;
  --tlg-glow: #FFCF76;
  --tlg-paper: #F4EFE4;
  --tlg-muted: #9FB0C8;
  --tlg-muted-2: #6F819B;
  --tlg-line: rgba(190, 205, 235, .14);
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
}

html,
body,
.campaign-page,
main {
  background: var(--tlg-ink) !important;
  color: var(--tlg-paper);
}

body {
  font-family: var(--font-body);
}

.hero-copy h1,
.section-intro h2,
.feature-copy h3,
.grid-intro h2,
.about-intro h2,
.pillar-copy h3,
.site-footer a,
.cs-motion h2,
.cs-motion-dialog h2 {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
}

.site-nav {
  box-shadow: 0 16px 50px -36px rgba(0, 0, 0, .9);
}

.nav-brand img {
  filter: drop-shadow(0 5px 16px rgba(0, 0, 0, .52));
}

.nav-brand > div,
.nav-links {
  font-family: var(--font-body) !important;
}

.hero-copy .eyebrow,
.eyebrow,
.eyebrow--dark,
.cs-kicker,
.cs-motion-dialog-kicker {
  color: var(--tlg-gold) !important;
}

.eyebrow,
.cs-kicker,
.cs-motion-dialog-kicker,
.feature-meta,
.site-footer > div > div:first-child {
  font-family: "Space Mono", ui-monospace, monospace !important;
}

/* Keep the gallery label in the same campaign-gold used for the hero label. */
.section-intro .eyebrow {
  color: var(--tlg-gold) !important;
}

.about-intro .eyebrow,
#about-title span {
  color: var(--tlg-gold) !important;
}

.hero-actions a {
  min-height: 48px;
  border-color: var(--tlg-line) !important;
  box-shadow: none;
}

.hero-actions a:first-child {
  color: #2A1D05 !important;
  background: linear-gradient(180deg, var(--tlg-gold-soft), var(--tlg-gold)) !important;
  box-shadow: 0 0 0 1px rgba(255, 233, 189, .4), 0 14px 40px -14px rgba(255, 207, 118, .7);
}

.hero-actions a:first-child:hover {
  color: #2A1D05 !important;
  background: linear-gradient(180deg, #FFF1CE, #F3D28A) !important;
  transform: translateY(-2px);
}

.hero-actions a:nth-child(2) {
  color: var(--tlg-paper) !important;
  background: rgba(255, 255, 255, .045) !important;
  border: 1px solid var(--tlg-line) !important;
}

.hero-actions a:nth-child(2):hover,
.hero-actions a:last-child:hover {
  color: var(--tlg-gold-soft) !important;
  background: rgba(255, 233, 189, .07) !important;
  border-color: var(--tlg-gold) !important;
}

.hero-actions a:last-child {
  color: var(--tlg-gold-soft) !important;
  background: transparent !important;
  border-color: rgba(243, 210, 138, .55) !important;
}

.hero-card {
  border: 1px solid rgba(243, 210, 138, .2) !important;
  box-shadow: 0 30px 80px -34px rgba(0, 0, 0, .9), 0 0 38px -22px rgba(255, 207, 118, .45) !important;
}

.tlg-lightstring i {
  position: relative;
}

.tlg-lightstring i::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 6px;
  height: 5px;
  border-radius: 2px 2px 0 0;
  background: #39445A;
  transform: translateX(-50%);
}

.cs-motion,
.cs-motion-dialog {
  --ink: var(--tlg-ink);
  --on-dark: var(--tlg-paper);
  --on-dark-mut: var(--tlg-muted);
  --accent: var(--tlg-gold);
  --accent-2: var(--tlg-gold-soft);
  --accent-ink: #2A1D05;
  --serif: var(--font-display);
}

.cs-motion {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(100% 120% at 84% -20%, #1B2A4D 0%, transparent 55%),
    linear-gradient(180deg, var(--tlg-night), var(--tlg-panel-2)) !important;
}

.cs-motion .wrap {
  position: relative;
  z-index: 5;
}

.cs-motion-card {
  aspect-ratio: 1 / 1;
  border-color: var(--tlg-line);
  background: rgba(255, 255, 255, .025);
}

.cs-motion-card img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

.cs-motion-play {
  color: var(--tlg-paper);
  background: rgba(10, 16, 32, .65);
}

.cs-motion-card:hover .cs-motion-play {
  color: #2A1D05;
  background: var(--tlg-gold);
}

.cs-motion-dialog {
  background: rgba(7, 11, 22, .985);
}

.cs-motion-player {
  background: #05080F;
}

.tlg-snow--soft {
  z-index: 2;
  opacity: .58;
}

.marquee-section {
  background: var(--tlg-panel-2) !important;
  border-block: 1px solid var(--tlg-line);
}

.marquee-card {
  border: 1px solid var(--tlg-line) !important;
  box-shadow: 0 16px 42px -28px rgba(0, 0, 0, .9);
}

.gallery-section,
.section-intro {
  background: var(--tlg-ink) !important;
}

.section-intro h2,
.about-intro h2,
.pillar-copy h3 {
  color: var(--tlg-paper) !important;
}

.feature-row {
  border-top: 1px solid var(--tlg-line);
}

.feature-row:last-child {
  border-bottom: 1px solid var(--tlg-line);
}

.feature-media {
  border: 1px solid rgba(243, 210, 138, .18) !important;
  box-shadow: 0 28px 72px -36px rgba(0, 0, 0, .92) !important;
}

.feature-copy h3 {
  color: var(--tlg-paper) !important;
}

.feature-copy p {
  color: var(--tlg-muted) !important;
}

.feature-meta {
  color: var(--tlg-muted-2) !important;
}

.grid-section {
  background:
    radial-gradient(100% 70% at 50% 0%, rgba(27, 42, 77, .8), transparent 70%),
    var(--tlg-night) !important;
  border-block: 1px solid var(--tlg-line);
}

.grid-intro h2 {
  color: var(--tlg-paper) !important;
}

.grid-intro p {
  color: var(--tlg-muted) !important;
}

.ad-card {
  border: 1px solid var(--tlg-line) !important;
  background: var(--tlg-panel-2) !important;
}

.ad-card:hover {
  border-color: rgba(243, 210, 138, .48) !important;
  box-shadow: 0 0 24px -10px rgba(255, 207, 118, .5);
}

.about-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(110% 110% at 50% -20%, #1C2C52, transparent 62%),
    var(--tlg-ink) !important;
  border-bottom: 1px solid var(--tlg-line);
}

.about-section > *:not(.tlg-snow) {
  position: relative;
  z-index: 5;
}

.about-intro p,
.pillar-copy p {
  color: var(--tlg-muted) !important;
}

.about-intro > div:nth-child(3),
.pillar-copy > div {
  background: var(--tlg-gold) !important;
}

.pillar-media {
  border: 1px solid var(--tlg-line);
  background: var(--tlg-panel-2) !important;
}

.pillar-grid .pillar + .pillar {
  border-color: var(--tlg-line) !important;
}

.pillar--split .pillar-media {
  border: 0;
  background: transparent !important;
}

.site-footer {
  margin-top: 0 !important;
  background: #05080F !important;
  border-top: 1px solid var(--tlg-line);
}

.site-footer > div > div:first-child {
  color: var(--tlg-muted-2) !important;
}

.site-footer a {
  color: var(--tlg-paper) !important;
}

.site-footer a:hover {
  color: var(--tlg-gold-soft) !important;
}

.lightbox {
  background: rgba(5, 8, 15, .94) !important;
}

.lightbox__image {
  border: 1px solid rgba(243, 210, 138, .2);
  aspect-ratio: auto !important;
}

.lightbox button:hover {
  color: var(--tlg-gold-soft) !important;
  border-color: var(--tlg-gold) !important;
}

.media-button:focus-visible,
.site-nav a:focus-visible,
.hero-actions a:focus-visible,
.site-footer a:focus-visible,
.lightbox button:focus-visible {
  outline-color: var(--tlg-gold) !important;
}

@media (max-width: 767px) {
  .tlg-lightstring__row {
    padding-inline: 0;
  }

  .tlg-lightstring i {
    width: 8px;
    height: 12px;
  }

  .tlg-snow--soft {
    opacity: .42;
  }
}