/* =============================================
   PRELOADER — Studio Ident
   ============================================= */

html.preloader-skip .preloader {
  display: none !important;
}

.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  transition:
    opacity 500ms var(--ease-out-expo),
    visibility 500ms;
}

.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__glow {
  position: absolute;
  width: min(60vw, 420px);
  height: min(60vw, 420px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 2, 0.16) 0%, transparent 68%);
  filter: blur(28px);
  animation: preloader-glow 2s ease-in-out infinite alternate;
  pointer-events: none;
}

.preloader__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
}

.preloader__mark {
  width: clamp(4.5rem, 12vw, 6rem);
  opacity: 0;
  transform: scale(0.92);
  animation: ident-mark 700ms var(--ease-out-expo) forwards;
}

.preloader__line {
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  animation: ident-line 900ms var(--ease-out-expo) 280ms forwards;
}

.preloader__wordmark {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-soft);
  opacity: 0;
  transform: translateY(8px);
  animation: ident-text 500ms var(--ease-out-expo) 450ms forwards;
}

.preloader__skip {
  position: absolute;
  bottom: var(--space-6);
  right: var(--gutter);
  z-index: 2;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-color);
  transition:
    color var(--duration-base),
    border-color var(--duration-base),
    background-color var(--duration-base);
}

.preloader__skip:hover {
  color: var(--color-accent);
  border-color: var(--color-accent-border);
  background: var(--color-accent-muted);
}

@keyframes preloader-glow {
  from { opacity: 0.55; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1.05); }
}

@keyframes ident-mark {
  to { opacity: 1; transform: scale(1); }
}

@keyframes ident-line {
  to { width: 8.5rem; }
}

@keyframes ident-text {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .preloader { display: none !important; }
}

/* =============================================
   HEADER
   ============================================= */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-height);
  transition:
    background-color var(--duration-base) var(--ease-out-expo),
    border-color var(--duration-base) var(--ease-out-expo),
    backdrop-filter var(--duration-base),
    -webkit-backdrop-filter var(--duration-base);
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background-color: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom-color: var(--border-color);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-header__brand {
  flex-shrink: 0;
  position: relative;
  z-index: 1001;
}

.site-header__logo {
  height: 3.8rem;
  width: auto;
  transition: opacity var(--duration-base);
}

.site-header__nav {
  display: none;
}

.site-header__list {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.site-header__link {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  transition: color var(--duration-base) var(--ease-out-expo);
  position: relative;
  padding-bottom: 4px;
}

.site-header__link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out-expo);
}

.site-header__link:hover {
  color: var(--color-text-primary);
}

.site-header__link:hover::after {
  transform: scaleX(1);
}

.site-header__link.is-active {
  color: var(--color-accent);
}

.site-header__link.is-active::after {
  transform: scaleX(1);
}

.site-header__actions {
  display: none;
  align-items: center;
  gap: var(--space-5);
}

.site-header__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 2.5rem;
  height: 2.5rem;
  padding: var(--space-2);
  position: relative;
  z-index: 1001;
}

.site-header__toggle-bar {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-text-primary);
  transition:
    transform var(--duration-base) var(--ease-out-expo),
    opacity var(--duration-base),
    background-color var(--duration-base);
}

.site-header.is-menu-open .site-header__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header.is-menu-open .site-header__toggle-bar:nth-child(2) {
  opacity: 0;
}

.site-header.is-menu-open .site-header__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu — full-screen cinematic */
.site-header__mobile {
  /* position: fixed; */
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--duration-slow) var(--ease-out-expo),
    visibility var(--duration-slow);
}

.site-header__mobile-bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 196, 2, 0.08) 0%, transparent 50%),
    #000000;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 700ms var(--ease-out-expo);
  height: 100vh;
}

.site-header.is-menu-open .site-header__mobile {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.site-header.is-menu-open .site-header__mobile-bg {
  transform: scaleY(1);
}

.site-header__mobile-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.site-header__mobile-link {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 8vw, 3.5rem);
  font-weight: 600;
  color: var(--color-text-primary);
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 600ms var(--ease-out-expo),
    transform 600ms var(--ease-out-expo),
    color var(--duration-base);
    font-size: 20px;
}

.site-header__mobile-index {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent);
}

.site-header.is-menu-open .site-header__mobile-list li:nth-child(1) .site-header__mobile-link {
  opacity: 1; transform: translateY(0); transition-delay: 180ms;
}
.site-header.is-menu-open .site-header__mobile-list li:nth-child(2) .site-header__mobile-link {
  opacity: 1; transform: translateY(0); transition-delay: 260ms;
}
.site-header.is-menu-open .site-header__mobile-list li:nth-child(3) .site-header__mobile-link {
  opacity: 1; transform: translateY(0); transition-delay: 340ms;
}
.site-header.is-menu-open .site-header__mobile-list li:nth-child(4) .site-header__mobile-link {
  opacity: 1; transform: translateY(0); transition-delay: 420ms;
}
.site-header.is-menu-open .site-header__mobile-list li:nth-child(5) .site-header__mobile-link {
  opacity: 1; transform: translateY(0); transition-delay: 500ms;
}

.site-header__mobile-link:hover {
  color: var(--color-accent);
}

.site-header__mobile-cta {
  position: relative;
  z-index: 1;
  margin-top: var(--space-10);
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 600ms var(--ease-out-expo) 580ms,
    transform 600ms var(--ease-out-expo) 580ms;
}

.site-header.is-menu-open .site-header__mobile-cta {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .site-header__mobile-bg {
    transform: none;
    transition: none;
  }

  .site-header__mobile-link,
  .site-header__mobile-cta {
    opacity: 1;
    transform: none;
    transition: color var(--duration-base);
  }
}

@media (min-width: 1024px) {
  .site-header__nav,
  .site-header__actions {
    display: flex;
  }

  .site-header__toggle,
  .site-header__mobile {
    display: none;
  }
}

/* =============================================
   HERO — Opening Scene (final)
   ============================================= */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: calc(var(--header-height) + var(--space-8)) var(--space-10);
  background: #000;
  overflow: hidden;
}

.hero__atmosphere {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 50% at 78% 42%, rgba(255, 196, 2, 0.1) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 12% 80%, rgba(255, 196, 2, 0.04) 0%, transparent 55%),
    linear-gradient(180deg, #000 0%, #0a0a0a 45%, #000 100%);
  pointer-events: none;
  z-index: 0;
}

.hero__layout {
  position: relative;
  z-index: 1;

  align-items: center;
  width: 100%;
  text-align: center;
}

.hero__copy {

 
  align-items: flex-start;
  gap: var(--space-5);
  max-width: 100%;
}

.hero__title {
  font-size: var(--text-hero);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
  max-width: 100%;
      font-size: 60px;
    font-weight: bold;
    line-height: 70px;
    text-transform: uppercase;
}

.hero__title-line--typewriter {
  display: block;
}

.typewriter-word {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  vertical-align: bottom;
  border-right: 3px solid #ffc402;
  animation:
    typewriter-reveal 1.4s steps(7, end) 1.2s forwards ,
    typewriter-cursor 0.75s step-end infinite;
}

@keyframes typewriter-reveal {
  from {
    width: 0;
  }

  to {
    width: 19ch;
  }
}

@keyframes typewriter-cursor {
  0%,
  50% {
    border-color: #ffc402;
  }

  51%,
  100% {
    border-color: transparent;
  }
}
.hero__title-line {
  display: block;
}

.hero__lede {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--color-text-secondary);
  max-width: 40ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
  margin-top: 30px;
}

.hero__signals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-color);
  width: 100%;


      margin: 100px 0px;
    max-width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    margin-bottom: 0px;
}

.hero__signal {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  position: relative;
}

.hero__signal + .hero__signal::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: var(--space-5);
  margin-bottom: 2px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0.7;
  vertical-align: middle;
}

/* Right cinematic subject */

.hero__visual {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 34rem;
}

.hero__visual-glow {
  position: absolute;
  top: 10%;
  left: 10%;
  right: 10%;
  bottom: 18%;
  background: radial-gradient(circle, rgba(255, 196, 2, 0.22) 0%, transparent 68%);
  filter: blur(40px);
  animation: hero-glow 8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

.hero__visual-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  /* Soft edge fade into black — not a card */
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 8%,
    #000 78%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 8%,
    #000 78%,
    transparent 100%
  );
}

.hero__visual-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, #000 0%, transparent 18%, transparent 82%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.75) 100%);
  pointer-events: none;
}

.hero__visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.06);
  animation: hero-drift 18s ease-in-out infinite alternate;
  will-change: transform;
  filter: saturate(1.05) contrast(1.05);
}

.hero__visual-caption {
  position: relative;
  z-index: 2;
  margin-top: -1.5rem;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
}

.hero__visual-caption-accent {
  color: var(--color-accent);
  margin-right: var(--space-2);
}

.hero__scroll {
  position: absolute;
  bottom: var(--space-6);
  right: var(--gutter);
  z-index: 2;
}

/* Entrance — gated by body.preloader-done */

[data-hero-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 800ms var(--ease-out-expo),
    transform 800ms var(--ease-out-expo);
}

body.preloader-done .hero__eyebrow[data-hero-reveal] {
  opacity: 1;
  transform: none;
  transition-delay: 60ms;
  margin-bottom: 27px;
}

body.preloader-done .hero__title-line[data-hero-reveal]:nth-child(1) {
  opacity: 1;
  transform: none;
  transition-delay: 160ms;
}

body.preloader-done .hero__title-line[data-hero-reveal]:nth-child(2) {
  opacity: 1;
  transform: none;
  transition-delay: 260ms;
}

body.preloader-done .hero__title-line[data-hero-reveal]:nth-child(3) {
  opacity: 1;
  transform: none;
  transition-delay: 360ms;
}

body.preloader-done .hero__lede[data-hero-reveal] {
  opacity: 1;
  transform: none;
  transition-delay: 460ms;
  max-width: 100%;
  padding: 20px 50px;
}

body.preloader-done .hero__actions[data-hero-reveal] {
  opacity: 1;
  transform: none;
  transition-delay: 560ms;
}

body.preloader-done .hero__signals[data-hero-reveal] {
  opacity: 1;
  transform: none;
  transition-delay: 660ms;
}

body.preloader-done .hero__visual[data-hero-reveal] {
  opacity: 1;
  transform: none;
  transition-delay: 280ms;
}

body.preloader-done .hero__scroll[data-hero-reveal] {
  opacity: 1;
  transform: none;
  transition-delay: 800ms;
}

@keyframes hero-drift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to { transform: scale(1.1) translate3d(-1.2%, -0.8%, 0); }
}

@keyframes hero-glow {
  from { opacity: 0.55; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1.08); }
}

@media (min-width: 960px) {
  .hero__layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    
  }

  .hero__visual {
    justify-self: end;
    max-width: 28rem;
  }

  .hero__visual-frame {
    mask-image: linear-gradient(
      105deg,
      transparent 0%,
      #000 12%,
      #000 72%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      #000 10%,
      #000 82%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      105deg,
      transparent 0%,
      #000 12%,
      #000 72%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      #000 10%,
      #000 82%,
      transparent 100%
    );
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
}

@media (max-width: 959px) {
  .hero {
    justify-content: flex-start;
    padding-block: calc(var(--header-height) + var(--space-6)) var(--space-12);
  }

  .hero__title {
    max-width: none;
  }

  .hero__actions {
    width: 100%;
    flex-direction: column;
  }

  .hero__actions .c-btn {
    width: 100%;
  }

  .hero__visual {
    max-width: 22rem;
  }

  .hero__scroll {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  body.preloader-done .hero__scroll[data-hero-reveal] {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__visual-img,
  .hero__visual-glow,
  .preloader__glow {
    animation: none;
  }

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

/* =============================================
   MANIFESTO STRIP — Studio Signal
   ============================================= */

.manifesto {
  position: relative;
  padding-block: var(--space-8);
  background: var(--color-bg-elevated);
  overflow: hidden;
}

.manifesto__rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  opacity: 0.55;
}

.manifesto__rule--bottom {
  top: auto;
  bottom: 0;
}

.manifesto__marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  margin-bottom: var(--space-5);
}

.manifesto__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-scroll 36s linear infinite;
}

.manifesto__group {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-right: var(--space-6);
}

.manifesto__item {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.manifesto__sep {
  color: var(--color-accent);
  font-size: 0.65rem;
  opacity: 0.85;
}

.manifesto__inner {
  text-align: center;
}

.manifesto__line {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  max-width: none;
  margin-inline: auto;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .manifesto__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: var(--space-4) var(--space-6);
  }
}

/* =============================================
   DUALITY — Full-bleed cinematic field
   ============================================= */

.duality {
  --duality-duration: 12s;
  position: relative;
  background: #111111;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(36rem, 88vh, 48rem);
  display: flex;
  align-items: center;
}

/* Full-bleed living field — the section IS the visual */

.duality__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.duality__plane {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
}

.duality__plane--a {
  background:
    radial-gradient(ellipse 55% 70% at 22% 48%, rgba(255, 196, 2, 0.16) 0%, transparent 68%),
    linear-gradient(90deg, rgba(255, 196, 2, 0.05) 0%, transparent 48%);
  animation: duality-plane-a var(--duality-duration) ease-in-out infinite alternate;
}

.duality__plane--b {
  background:
    radial-gradient(ellipse 55% 70% at 78% 52%, rgba(255, 255, 255, 0.08) 0%, transparent 68%),
    linear-gradient(270deg, rgba(255, 255, 255, 0.04) 0%, transparent 48%);
  animation: duality-plane-b var(--duality-duration) ease-in-out infinite alternate;
}

.duality__seam {
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 196, 2, 0.45) 28%,
    rgba(255, 255, 255, 0.28) 72%,
    transparent 100%
  );
  opacity: 0.55;
  animation: duality-seam var(--duality-duration) ease-in-out infinite alternate;
}

.duality__mark {
  position: absolute;
  left: 58%;
  top: 50%;
  width: min(96vw, 58rem);
  height: auto;
  transform: translate(-50%, -50%);
  overflow: visible;
}

.duality__orb {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}

.duality__orb--a {
  animation: duality-orb-a var(--duality-duration) ease-in-out infinite alternate;
}

.duality__orb--b {
  animation: duality-orb-b var(--duality-duration) ease-in-out infinite alternate;
}

.duality__side {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}

.duality__side--a {
  animation: duality-side-a var(--duality-duration) ease-in-out infinite alternate;
}

.duality__side--b {
  animation: duality-side-b var(--duality-duration) ease-in-out infinite alternate;
}

.duality__axis {
  stroke: rgba(255, 196, 2, 0.35);
  stroke-width: 1;
  stroke-dasharray: 3 11;
  animation: duality-axis var(--duality-duration) ease-in-out infinite alternate;
}

.duality__pulse {
  transform-origin: 400px 280px;
  animation: duality-pulse var(--duality-duration) ease-in-out infinite alternate;
}

.duality__halo {
  transform-origin: 400px 280px;
  opacity: 0.3;
  animation: duality-halo var(--duality-duration) ease-in-out infinite alternate;
}

.duality__edge-svg {
  font-family: var(--font-body), system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.duality__edge-svg--a {
  fill: rgba(255, 196, 2, 0.7);
}

.duality__edge-svg--b {
  fill: rgba(255, 255, 255, 0.4);
}

/* Narrative floats inside the field — not a paired column */

.duality__narrative {
  position: relative;
  z-index: 2;
  width: 100%;
}

.duality__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  max-width: 30rem;
  padding-block: var(--space-6);
  padding-right: var(--space-4);
  /* Soft scrim so type stays crisp over the living mark
  background: radial-gradient(
    ellipse 120% 90% at 0% 40%,
    rgba(17, 17, 17, 0.82) 0%,
    rgba(17, 17, 17, 0.45) 55%,
    transparent 78%
  ); */
}

.duality__eyebrow {
  margin: 0;
}

.duality__title {
  margin: 0;
  font-size: clamp(2rem, 3.6vw, 2.95rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: var(--tracking-tight);
  color: #fff;
  font-weight: bold;

}

.duality__lede {
  margin: 0;
  font-size: clamp(1.05rem, 1.45vw, 1.15rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.84);
  max-width: 32ch;
}

.duality__body {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.5);
  max-width: 38ch;
}

.duality__actions {
  margin-top: var(--space-2);
}

/* Play only in view */

.duality.is-active .duality__plane,
.duality.is-active .duality__seam,
.duality.is-active .duality__orb,
.duality.is-active .duality__side,
.duality.is-active .duality__axis,
.duality.is-active .duality__pulse,
.duality.is-active .duality__halo {
  animation-play-state: running;
}

.duality:not(.is-active) .duality__plane,
.duality:not(.is-active) .duality__seam,
.duality:not(.is-active) .duality__orb,
.duality:not(.is-active) .duality__side,
.duality:not(.is-active) .duality__axis,
.duality:not(.is-active) .duality__pulse,
.duality:not(.is-active) .duality__halo {
  animation-play-state: paused;
}

@keyframes duality-plane-a {
  from { opacity: 0.55; transform: translateX(-2%); }
  to { opacity: 1; transform: translateX(4%); }
}

@keyframes duality-plane-b {
  from { opacity: 0.5; transform: translateX(2%); }
  to { opacity: 1; transform: translateX(-4%); }
}

@keyframes duality-seam {
  from { opacity: 0.25; transform: translateX(-50%) scaleY(0.92); }
  to { opacity: 0.75; transform: translateX(-50%) scaleY(1); }
}

@keyframes duality-orb-a {
  from { transform: translate(-28px, 8px) scale(0.94); opacity: 0.7; }
  to { transform: translate(36px, -6px) scale(1.08); opacity: 1; }
}

@keyframes duality-orb-b {
  from { transform: translate(28px, -8px) scale(0.94); opacity: 0.65; }
  to { transform: translate(-36px, 6px) scale(1.08); opacity: 1; }
}

@keyframes duality-side-a {
  from { transform: translateX(-22px); }
  to { transform: translateX(26px); }
}

@keyframes duality-side-b {
  from { transform: translateX(22px); }
  to { transform: translateX(-26px); }
}

@keyframes duality-axis {
  from { stroke-opacity: 0.25; }
  to { stroke-opacity: 0.8; }
}

@keyframes duality-pulse {
  from { opacity: 0.35; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1.25); }
}

@keyframes duality-halo {
  from { opacity: 0.1; transform: scale(0.6); }
  to { opacity: 0.4; transform: scale(1.4); }
}

@media (min-width: 960px) {
 

  .duality__mark {
    left: 72%;
    width: min(78vw, 60rem);
  }
}

@media (max-width: 959px) {
  .duality {
    min-height: auto;
    padding-block: clamp(4rem, 12vw, 6rem);
  }

  .duality__mark {
    width: min(130%, 30rem);
    left: 50%;
    top: auto;
    bottom: -4%;
    transform: translateX(-50%);
    opacity: 0.9;
  }

  .duality__seam {
    display: none;
  }

  .duality__copy {
    max-width: 34rem;
    position: relative;
    z-index: 2;
    padding-bottom: clamp(13rem, 52vw, 19rem);
    background: none;
  }
}

@media (max-width: 767px) {
  .duality__title {
    max-width: none;
  }

  .duality__actions .c-btn {
    width: 100%;
    font-size: 13px;
  }

      .cta-band__actions {
        flex-direction: column;
        width: 80% !important;
        font-size: 12px !important;
    }

  .duality__plane--a,
  .duality__plane--b {
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: reduce) {
  .duality__plane,
  .duality__seam,
  .duality__orb,
  .duality__side,
  .duality__axis,
  .duality__pulse,
  .duality__halo {
    animation: none;
  }
}

/* =============================================
   WORK — Private Reel
   ============================================= */

.work {
  background: var(--color-bg-void);
  position: relative;
}

.work__header {
  margin-bottom: var(--space-10);
}

.work__header .c-eyebrow {
  margin-bottom: var(--space-4);
}

.work__title {
  margin-bottom: var(--space-5);
  font-size: 50px;
  font-weight: bold;
}

.work__intro {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
}

.work__reel-frame {
  position: relative;
  border: 1px solid var(--border-color);
  background: #050505;
  overflow: hidden;
}

.work__filmstrip {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  background: #0a0a0a;
  border-bottom: 1px solid var(--border-color);
}

.work__filmstrip--bottom {
  border-bottom: none;
  border-top: 1px solid var(--border-color);
}

.work__filmstrip span {
  flex: 1;
  height: 10px;
  background: rgba(255, 196, 2, 0.12);
  border: 1px solid rgba(255, 196, 2, 0.15);
}

.work__reel-stage {
  position: relative;
  min-height: clamp(16rem, 42vw, 26rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  text-align: center;
  padding: var(--space-10) var(--space-6);
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 196, 2, 0.07) 0%, transparent 55%),
    linear-gradient(180deg, #0c0c0c 0%, #000 100%);
  overflow: hidden;
}

.work__reel-sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.04) 48%,
    rgba(255, 196, 2, 0.06) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  animation: light-sweep 8s ease-in-out infinite;
  pointer-events: none;
}

.work__reel-mark {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.06);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  white-space: nowrap;
}

.work__reel-status {
  position: relative;
  z-index: 1;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-accent-border);
}

.work__empty-headline {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--color-text-primary);
  max-width: none;
}

.work__empty-note {
  position: relative;
  z-index: 1;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  max-width: 40ch;
}

.work__reel-stage .c-btn {
  position: relative;
  z-index: 1;
  margin-top: var(--space-2);
}

.work__reel-frame:hover .work__reel-status {
  background: var(--color-accent-muted);
  border-color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .work__reel-sweep {
    animation: none;
  }
}

/* =============================================
   CRAFT — Editorial Chapters
   ============================================= */

.craft {
  background: var(--color-bg-elevated);
}

.craft__header {
  margin-bottom: var(--space-10);
  font-size: 50px;
  font-weight: bold;
  /* max-width: min(22ch, 100%); */
}

.craft__header .c-eyebrow {
  margin-bottom: var(--space-4);
}

.craft__list {
  border-top: 1px solid var(--border-color);
}

.craft__block {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5) var(--space-6);
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--border-color);
  cursor: default;
  transition:
    background-color var(--duration-base) var(--ease-out-expo),
    padding var(--duration-base) var(--ease-out-expo);
}

.craft__title{
  font-size: 50px;
  font-weight: bold;
}
.craft__block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 0% 50%, rgba(255, 196, 2, 0.06) 0%, transparent 55%);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out-expo);
  pointer-events: none;
}

.craft__line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--duration-slow) var(--ease-out-expo);
}

.craft__index {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1;
  color: rgba(255, 196, 2, 0.35);
  transition:
    color var(--duration-base) var(--ease-out-expo),
    transform var(--duration-base) var(--ease-out-expo);
}

.craft__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.craft__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--color-text-primary);
  transition: transform var(--duration-base) var(--ease-out-expo);
}

.craft__desc {
  color: var(--color-text-muted);
  max-width: 52ch;
  transition:
    color var(--duration-base) var(--ease-out-expo),
    opacity var(--duration-base) var(--ease-out-expo);
}

.craft__block:hover,
.craft__block:focus-visible,
.craft__block.is-active {
  background: rgba(255, 255, 255, 0.015);
}

.craft__block:hover::before,
.craft__block:focus-visible::before,
.craft__block.is-active::before {
  opacity: 1;
}

.craft__block:hover .craft__line,
.craft__block:focus-visible .craft__line,
.craft__block.is-active .craft__line {
  transform: scaleY(1);
}

.craft__block:hover .craft__index,
.craft__block:focus-visible .craft__index,
.craft__block.is-active .craft__index {
  color: var(--color-accent);
  transform: translateX(4px);
}

.craft__block:hover .craft__name,
.craft__block:focus-visible .craft__name,
.craft__block.is-active .craft__name {
  transform: translateX(6px);
}

.craft__block:hover .craft__desc,
.craft__block:focus-visible .craft__desc,
.craft__block.is-active .craft__desc {
  color: var(--color-text-secondary);
}

@media (min-width: 768px) {
  .craft__block {
    grid-template-columns: 5rem 1fr;
    gap: var(--space-8);
    padding-block: var(--space-10);
    padding-inline: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .craft__line {
    transform: scaleY(1);
  }

  .craft__block:hover .craft__index,
  .craft__block:hover .craft__name {
    transform: none;
  }
}

/* =============================================
   PHILOSOPHY — Light / Shadow Diptych
   ============================================= */

.philosophy {
  background: #000;
  overflow: hidden;
}

.philosophy__grid {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

.philosophy__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.philosophy__body {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  font-size: 17px;
}

.philosophy__quote {
  font-family: var(--font-display);
  font-size: 27px;
  font-style: italic;
  font-weight: 500;
  color: var(--color-text-primary);
  padding-left: var(--space-5);
  border-left: 2px solid var(--color-accent);
  max-width: none;
  margin-top: var(--space-3);
}

.philosophy__diptych {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  position: relative;
  isolation: isolate;
}

.philosophy__frame {
  aspect-ratio: 3 / 4;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-5);
  overflow: hidden;
  transition: transform 1.2s var(--ease-out-expo);
}

.philosophy__title{
  font-size: 50px;
  font-weight: bold;
}
.philosophy__frame--a {
  background:
    linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.45) 100%),
    radial-gradient(ellipse at 40% 30%, #fff5d6 0%, #e8c872 35%, #8b7340 70%, #2a2410 100%);
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
}

.philosophy__frame--b {
  background:
    linear-gradient(180deg, transparent 25%, rgba(0, 0, 0, 0.75) 100%),
    radial-gradient(ellipse at 60% 40%, #1a1a1a 0%, #0a0a0a 45%, #000 100%);
  clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
  margin-left: -8%;
  border-left: 1px solid rgba(255, 196, 2, 0.15);
}

.philosophy__frame-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: var(--space-2);
}

.philosophy__frame--b .philosophy__frame-label {
  color: var(--color-accent);
}

.philosophy__frame-word {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 600;
  color: #0a0a0a;
}

.philosophy__frame--b .philosophy__frame-word {
  color: var(--color-text-primary);
}

.philosophy__axis {
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--color-accent), transparent);
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}

.philosophy__axis-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 20px rgba(255, 196, 2, 0.5);
}

.philosophy__diptych:hover .philosophy__frame--a {
  transform: translateY(-6px);
}

.philosophy__diptych:hover .philosophy__frame--b {
  transform: translateY(6px);
}

@media (min-width: 1024px) {
  .philosophy__grid {
    grid-template-columns: 1fr 1.05fr;
    gap: var(--space-12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .philosophy__diptych:hover .philosophy__frame--a,
  .philosophy__diptych:hover .philosophy__frame--b {
    transform: none;
  }
}

/* =============================================
   FOUNDER — Editorial Profile
   ============================================= */

.founder-glance {
  background: var(--color-bg-elevated);
}

.founder-glance__grid {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

.founder-glance__portrait {
  margin: 0;
  position: relative;
}

.founder-glance__portrait-frame {
  aspect-ratio: 4 / 5;
  max-width: 28rem;
  overflow: hidden;
  border: 1px solid var(--border-color);
  position: relative;
}
.founder-glance__portrait-frame img{
      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, .8) 85%, rgba(0, 0, 0, .3) 95%, transparent 100%);
}

.founder-glance__portrait-art {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 40% 30%, rgba(255, 196, 2, 0.12) 0%, transparent 50%),
    linear-gradient(165deg, #1a1a1a 0%, #0a0a0a 50%, #000 100%);
  transition: transform 1.4s var(--ease-out-expo);
}

.founder-glance__portrait-frame:hover .founder-glance__portrait-art {
  transform: scale(1.05);
}

.founder-glance__initials {
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 6rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.08);
}

.founder-glance__portrait-sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 40%,
    rgba(255, 196, 2, 0.07) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  animation: light-sweep 9s ease-in-out infinite;
}

.founder-glance__caption {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.founder-glance__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.founder-glance__name {
  font-size: 50px;
}

.founder-glance__role {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

.founder-glance__text p {
  color: var(--color-text-secondary);
}

.founder-glance__text p + p {
  margin-top: var(--space-4);
}

@media (min-width: 1024px) {
  .founder-glance__grid {
    grid-template-columns: 0.42fr 0.58fr;
    gap: var(--space-12);
  }

  .hero__title{
    font-size: 40px !important;
    line-height: 50px;
  }

  .manifesto__item{
    font-size: 22px;
  }



    .work__title,.craft__title , .philosophy__title, .founder-glance__name, .cta-band__title{
    font-size: 40px;
    line-height: 50px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .founder-glance__portrait-sweep {
    animation: none;
  }

  .founder-glance__portrait-frame:hover .founder-glance__portrait-art {
    transform: none;
  }
}

/* =============================================
   CTA BAND — Final Scene
   ============================================= */

.cta-band {
  position: relative;
  padding-block: var(--space-section);
  background: #000;
  overflow: hidden;
  isolation: isolate;
}

.cta-band__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(80vw, 700px);
  height: min(80vw, 700px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 196, 2, 0.12) 0%, transparent 65%);
  filter: blur(40px);
  animation: atmosphere-pulse 10s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

.cta-band__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-8);
}

.cta-band__eyebrow {
  justify-content: center;
}

.cta-band__title {
  max-width: 100%;
  font-size: 50px;
  font-weight: bold;
}

.cta-band__lede {
  color: var(--color-text-secondary);
  max-width: 48ch;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

@media(max-width:991px)
{
  .manifesto__item{
    font-size: 22px;
  }

    .work__title,.craft__title , .philosophy__title, .founder-glance__name, .cta-band__title{
    font-size: 40px !important;
    line-height: 50px !important;
  }

  .hero__title{
    font-size: 40px !important;
    line-height: 50px !important;
  }
}

@media(max-width:768px){
      .hero__actions {
        width: 40%;
        justify-content: center;
        margin: 30px auto;
    }

    .c-scroll-cue__label, .duality__canvas{
      display: none;
    }

    .duality__copy{
      padding-bottom: 0px;
    }

    .founder-glance__grid {
    display: flex;
    gap: var(--space-10);
    align-items: center;
    flex-direction: column-reverse;
}

    .duality__body, .duality__copy, .duality__lede{
      max-width: 100%;
    }

      .hero__title{
    font-size: 30px !important;
    line-height: 40px !important;
  }
}
@media (max-width: 767px) {

      .hero__actions .c-btn {
        width: 100%;
        font-size: 13px;
    }
  .cta-band__actions {
    flex-direction: column;
    width: 100%;
  }

      .work__title, .craft__title, .philosophy__title, .founder-glance__name, .cta-band__title {
        font-size: 30px !important;
        line-height: 40px !important;
    }

  .cta-band__actions .c-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-band__glow {
    animation: none;
  }
}

/* =============================================
   FOOTER — End Credits
   ============================================= */

.site-footer {
  background: #000;
  border-top: 1px solid var(--border-color);
  padding-block: clamp(3rem, 6vw, 4.5rem) var(--space-6);
}

.site-footer__credits {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.site-footer__end-card {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
  opacity: 0.7;
  max-width: none;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 2.75rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  text-align: center;
  justify-items: center;
}

.site-footer__brand {
  max-width: 28rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-footer__logo {
  display: block;
  height: 3.5rem;
  width: auto;
  margin-bottom: var(--space-5);
}

.site-footer__about {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.58);
  text-align: center;
}

.site-footer__about:last-of-type {
  margin-bottom: 0;
}

.site-footer__tagline {
  margin: var(--space-4) 0 0;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 196, 2, 0.55);
  text-align: center;
}

.site-footer__heading {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-4);
  text-align: center;
}

.site-footer__nav,
.site-footer__explore,
.site-footer__contact {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-footer__nav-list,
.site-footer__explore-list,
.site-footer__contact-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__link {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.68);
  transition: color var(--duration-base) var(--ease-out-expo);
}

.site-footer__link:hover {
  color: var(--color-accent);
}

.site-footer__contact-item {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.65rem;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.55);
  font-style: normal;
  line-height: 1.55;
  text-align: left;
}

.site-footer__contact-item address {
  margin: 0;
  font-style: normal;
  text-align: left;
}

.site-footer__contact-icon {
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
  color: rgba(255, 196, 2, 0.75);
}

.site-footer__contact-icon svg {
  width: 100%;
  height: 100%;
}

.site-footer__contact-item a {
  color: rgba(255, 255, 255, 0.68);
  transition: color var(--duration-base) var(--ease-out-expo);
}

.site-footer__contact-item a:hover {
  color: var(--color-accent);
}

.site-footer__bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer__copy,
.site-footer__made {
  margin: 0;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  max-width: none;
}

.site-footer__made {
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 196, 2, 0.45);
}

/* Tablet: 2 × 2 */
@media (min-width: 640px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(2rem, 4vw, 2.5rem) clamp(2rem, 4vw, 3.5rem);
  }

  .site-footer__brand {
    max-width: none;
  }
}

/* Desktop: 4 columns — left aligned */
@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: minmax(16rem, 1.55fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-10);
    align-items: start;
    text-align: left;
    justify-items: stretch;
  }

  .site-footer__brand {
    max-width: 22rem;
    padding-right: var(--space-4);
    align-items: flex-start;
  }

  .site-footer__about,
  .site-footer__tagline,
  .site-footer__heading {
    text-align: left;
  }

  .site-footer__nav,
  .site-footer__explore,
  .site-footer__contact {
    align-items: flex-start;
  }

  .site-footer__nav-list,
  .site-footer__explore-list,
  .site-footer__contact-list {
    align-items: flex-start;
  }

  .site-footer__contact-item {
    justify-content: flex-start;
  }

  .site-footer__bar {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .site-footer__copy {
    text-align: left;
  }

  .site-footer__made {
    text-align: right;
  }
}

@media (max-width: 639px) {
  .site-footer__logo {
    height: 3rem;
  }
}


@media(max-width:460px){
      .hero__actions {
        width: 63%;
        justify-content: center;
        margin: 30px auto;
    }

    body.preloader-done .hero__lede[data-hero-reveal]{
      padding: 20px 0px;
    }

    .site-header__mobile-list{
          margin-top: 100px;
    }

      .site-header__mobile-list li a{
        font-size: 20px;
      }
}