/* ==========================================================================
   RAW SIGNAL — design tokens
   ========================================================================== */
:root {
  /* colour */
  --ink:        #16140F;
  --ink-soft:   #3A362C;
  --paper:      #FAF7F0;
  --paper-dim:  #F0EBDE;
  --line:       rgba(22, 20, 15, 0.12);
  --accent:     #E8402C;   /* signal red   */
  --accent-2:   #2B2FEC;   /* electric indigo */
  --lime:       #D8FF3E;   /* flash accent, used sparingly */
  --muted:      #7A7566;
  --dark:       #16140F;
  --on-dark:    #F4F1E8;
  --on-dark-muted: #9A9788;

  /* type */
  --font-display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* scale */
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 18px;
  --radius-sm: 10px;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body, h1, h2, h3, h4, p, figure { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

html, body {
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ink); color: var(--paper); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}

/* ==========================================================================
   Utility
   ========================================================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.section-head {
  max-width: 700px;
  padding: 0 var(--gutter);
  margin: 0 auto 64px;
  text-align: left;
}
.section-head h2 { font-size: clamp(32px, 5vw, 52px); }
.section-head__sub {
  margin-top: 18px;
  color: var(--ink-soft);
  font-size: 17px;
  max-width: 46ch;
}

/* reveal-up: animated via JS/GSAP, base hidden state for no-js fallback handled by JS class toggle */
.reveal-up { will-change: transform, opacity; }

/* buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 30px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  transition: transform .5s var(--ease), background-color .3s ease, color .3s ease, border-color .3s ease;
}
.btn span { position: relative; z-index: 1; }
.btn--primary {
  background: var(--ink);
  color: var(--paper);
}
.btn--primary:hover { background: var(--accent); color: var(--paper); }
.btn--ghost {
  background: transparent;
  border: 1.5px solid var(--line);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.btn--outline {
  background: transparent;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  padding: 13px 26px;
}
.btn--outline:hover { background: var(--ink); color: var(--paper); }
.btn--small { padding: 11px 22px; font-size: 14px; }

/* ==========================================================================
   Custom cursor
   ========================================================================== */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  border-radius: 50%;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
.cursor-dot { width: 6px; height: 6px; background: var(--paper); }
.cursor-ring {
  width: 34px; height: 34px;
  border: 1px solid var(--paper);
  transition: width .25s var(--ease), height .25s var(--ease), opacity .25s ease;
}
.cursor-ring.is-hovering { width: 60px; height: 60px; }
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 999;
  background: transparent;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transform-origin: left;
}

/* ==========================================================================
   Nav
   ========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 22px 0;
  transition: padding .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav.is-scrolled {
  padding: 14px 0;
  background: rgba(250, 247, 240, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 var(--line);
}
.nav__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
}
.nav__logo span { color: var(--accent); }
.nav__links {
  display: flex;
  gap: 32px;
  font-size: 14.5px;
  font-weight: 500;
}
.nav__links a {
  position: relative;
  padding: 4px 0;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta { margin-left: 8px; }
.nav__burger {
  display: none;
  width: 34px; height: 22px;
  position: relative;
  flex-direction: column;
  justify-content: space-between;
}
.nav__burger span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .35s var(--ease), opacity .2s ease;
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(10px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-10px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 490;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 36px;
  padding: 0 var(--gutter);
  transform: translateY(-100%);
  transition: transform .55s var(--ease);
}
.mobile-menu.is-open { transform: translateY(0); }
.mobile-menu nav { display: flex; flex-direction: column; gap: 20px; }
.mobile-menu nav a { font-family: var(--font-display); font-size: 34px; font-weight: 700; }
.mobile-menu .btn { width: fit-content; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px var(--gutter) 100px;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__glow {
  position: absolute;
  width: 60vw; height: 60vw;
  max-width: 900px; max-height: 900px;
  left: 50%; top: 30%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(232,64,44,0.14), transparent 65%);
  filter: blur(10px);
}
.hero__grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
}
.hero__title {
  font-size: clamp(44px, 8.6vw, 118px);
  color: var(--ink);
  max-width: 16ch;
}
.hero__title em {
  font-style: normal;
  color: var(--accent);
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line-inner { display: block; transform: translateY(110%); }

.hero__sub {
  margin-top: 28px;
  max-width: 46ch;
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--ink-soft);
}
.hero__actions {
  margin-top: 40px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hero__scroll-cue {
  position: absolute;
  bottom: 42px;
  left: var(--gutter);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__scroll-line { width: 1px; height: 46px; background: var(--line); position: relative; overflow: hidden; }
.hero__scroll-line i {
  position: absolute; top: -100%; left: 0; width: 100%; height: 100%;
  background: var(--ink);
  animation: scrollcue 2.2s ease-in-out infinite;
}
@keyframes scrollcue {
  0% { transform: translateY(-100%); }
  60% { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* ==========================================================================
   Marquee strip
   ========================================================================== */
.marquee-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  overflow: hidden;
}
.marquee-strip__track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee-strip__group {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-right: 22px;
  white-space: nowrap;
}
.marquee-strip__group span {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-strip:hover .marquee-strip__track { animation-play-state: paused; }

/* ==========================================================================
   Proof / pinned work section
   ========================================================================== */
.proof {
  background: var(--dark);
  color: var(--on-dark);
  padding: 120px 0 140px;
}
.proof .eyebrow { color: var(--on-dark-muted); }
.proof .section-head h2 { color: var(--on-dark); }
.proof .section-head__sub { color: var(--on-dark-muted); }

.proof__pin {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 80px;
  align-items: start;
}
.proof__phone { position: relative; }
.phone {
  position: sticky;
  top: 120px;
  width: 280px;
  aspect-ratio: 9/18.5;
  margin: 0 auto;
  border-radius: 40px;
  background: #0B0A08;
  border: 6px solid #2A271F;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6);
  padding: 6px;
}
.phone__notch {
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 90px; height: 20px;
  background: #0B0A08;
  border-radius: 0 0 14px 14px;
  z-index: 2;
}
.phone__screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 34px;
  overflow: hidden;
  background: linear-gradient(160deg, #24211A, #100F0C);
}
.phone__video {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.phone__video-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 14px);
}
.phone__play {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(244,241,232,0.12);
  color: var(--on-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  backdrop-filter: blur(6px);
}
.phone__overlay {
  position: absolute;
  left: 14px; right: 14px; bottom: 16px;
  display: flex;
  gap: 10px;
}
.phone__stat {
  background: rgba(20,18,14,0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(244,241,232,0.12);
  border-radius: 12px;
  padding: 8px 12px;
  flex: 1;
}
.phone__stat strong { display: block; font-family: var(--font-display); font-size: 16px; }
.phone__stat small { font-family: var(--font-mono); font-size: 10px; color: var(--on-dark-muted); text-transform: uppercase; letter-spacing: .04em; }

.proof__list { display: flex; flex-direction: column; gap: 6px; }
.proof__item {
  padding: 56px 0;
  border-top: 1px solid rgba(244,241,232,0.12);
  opacity: 0.35;
  transition: opacity .5s var(--ease);
}
.proof__item:last-child { border-bottom: 1px solid rgba(244,241,232,0.12); }
.proof__item.is-active { opacity: 1; }
.proof__index {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  letter-spacing: .08em;
}
.proof__item h3 {
  margin-top: 14px;
  font-size: clamp(22px, 2.6vw, 30px);
  max-width: 22ch;
  color: var(--on-dark);
}
.proof__item p {
  margin-top: 16px;
  max-width: 52ch;
  color: var(--on-dark-muted);
  font-size: 15.5px;
}
.proof__meta {
  margin-top: 20px;
  display: flex;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--on-dark-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.proof__link {
  display: inline-flex;
  gap: 6px;
  margin-top: 22px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--on-dark);
  border-bottom: 1px solid transparent;
}
.proof__link:hover { border-color: currentColor; }
.proof__link i { transition: transform .3s var(--ease); }
.proof__link:hover i { transform: translateX(4px); }

/* ==========================================================================
   Services
   ========================================================================== */
.services { padding: 140px 0; }
.services__grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.service-card {
  background: var(--paper);
  padding: 48px 36px;
  transition: background-color .4s ease;
}
.service-card:hover { background: var(--paper-dim); }
.service-card__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-2);
  border: 1px solid rgba(43,47,236,0.28);
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 22px;
}
.service-card h3 { font-size: 26px; margin-bottom: 16px; }
.service-card p { color: var(--ink-soft); font-size: 15px; max-width: 34ch; }
.service-card__link {
  display: inline-flex;
  gap: 6px;
  margin-top: 26px;
  font-weight: 600;
  font-size: 14.5px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}
.service-card__link:hover { border-color: var(--ink); }
.service-card__link i { transition: transform .3s var(--ease); }
.service-card__link:hover i { transform: translateX(4px); }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials { padding: 100px 0 140px; }
.testimonials__track {
  display: flex;
  gap: 24px;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.testimonials__track::-webkit-scrollbar { display: none; }
.testi-card {
  flex: 0 0 min(560px, 84vw);
  scroll-snap-align: start;
  background: var(--paper-dim);
  border-radius: var(--radius);
  padding: 44px;
}
.testi-card p {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.1vw, 24px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.testi-card__who { margin-top: 28px; display: flex; flex-direction: column; gap: 2px; }
.testi-card__who strong { font-size: 14.5px; }
.testi-card__who span { font-size: 13px; color: var(--muted); }
.testimonials__nav {
  max-width: var(--container);
  margin: 28px auto 0;
  padding: 0 var(--gutter);
  display: flex;
  gap: 12px;
}
.testimonials__nav button {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  font-size: 16px;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.testimonials__nav button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ==========================================================================
   Manifesto
   ========================================================================== */
.manifesto {
  background: var(--dark);
  color: var(--on-dark);
  padding: 160px var(--gutter);
  text-align: center;
}
.manifesto__inner { max-width: 900px; margin: 0 auto; }
.manifesto h2 {
  font-size: clamp(34px, 6vw, 60px);
  color: var(--on-dark);
}
.manifesto p {
  margin-top: 30px;
  font-size: clamp(16px, 1.7vw, 19px);
  color: var(--on-dark-muted);
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}
.manifesto__links {
  margin-top: 40px;
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
}
.manifesto__links a {
  font-weight: 600;
  border-bottom: 1px solid rgba(244,241,232,0.3);
  padding-bottom: 3px;
  transition: border-color .3s ease;
}
.manifesto__links a:hover { border-color: var(--on-dark); }

/* ==========================================================================
   CTA / contact
   ========================================================================== */
.cta { padding: 140px 0 60px; }
.cta__grid {
  max-width: var(--container);
  margin: 0 auto 80px;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.cta-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 44px;
}
.cta-card h3 { font-size: 24px; margin-bottom: 14px; }
.cta-card p { color: var(--ink-soft); font-size: 15px; margin-bottom: 28px; max-width: 40ch; }

.contact-form {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px var(--gutter) 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.contact-form label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.contact-form label span { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-size: 11.5px; }
.contact-form label em { font-style: normal; color: var(--muted); text-transform: none; letter-spacing: 0; }
.contact-form input, .contact-form textarea {
  border: none;
  border-bottom: 1.5px solid var(--line);
  padding: 10px 2px;
  background: transparent;
  font-size: 16px;
  resize: vertical;
  transition: border-color .3s ease;
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--ink); outline: none; }
.contact-form__consent { flex-direction: row !important; align-items: center; gap: 10px !important; }
.contact-form__consent input { width: 16px; height: 16px; accent-color: var(--ink); }
.contact-form button { align-self: flex-start; margin-top: 6px; }
.contact-form__note { font-size: 12.5px; color: var(--muted); margin-top: -6px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--dark);
  color: var(--on-dark);
  padding: 100px var(--gutter) 40px;
}
.site-footer__top { max-width: var(--container); margin: 0 auto 64px; }
.site-footer__top .nav__logo { font-size: 28px; }
.site-footer__top p { margin-top: 16px; color: var(--on-dark-muted); max-width: 46ch; }
.site-footer__grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 80px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(244,241,232,0.12);
}
.site-footer__col { display: flex; flex-direction: column; gap: 14px; }
.site-footer__col h4 {
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--on-dark-muted);
  margin-bottom: 4px;
}
.site-footer__col a { font-size: 14.5px; color: var(--on-dark-muted); transition: color .25s ease; }
.site-footer__col a:hover { color: var(--on-dark); }
.site-footer__bottom {
  max-width: var(--container);
  margin: 32px auto 0;
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--on-dark-muted);
  flex-wrap: wrap;
  gap: 10px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .proof__pin { grid-template-columns: 300px 1fr; gap: 48px; }
  .services__grid { grid-template-columns: 1fr; }
  .cta__grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .proof__pin { grid-template-columns: 1fr; }
  .phone { position: relative; top: 0; margin-bottom: 48px; }
  .site-footer__grid { grid-template-columns: repeat(2, max-content); row-gap: 40px; }
}

@media (max-width: 640px) {
  .hero { padding-top: 120px; }
  .hero__title { max-width: 100%; }
  .hero__scroll-cue { display: none; }
  .section-head { margin-bottom: 44px; }
  .contact-form__row { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .testi-card { flex-basis: 88vw; padding: 32px; }
  .manifesto { padding: 100px var(--gutter); }
  .proof { padding: 90px 0 100px; }
  .services { padding: 90px 0; }
  .cta { padding: 90px 0 40px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero__title .line-inner { transform: none !important; }
}


/* ==========================================================================
   HILDEN-STYLE HEADER BEHAVIOUR + IMAGE LOGO
   ========================================================================== */
.nav {
  transform: translate3d(0, 0, 0);
  will-change: transform, background-color;
  transition:
    transform .72s var(--ease-soft),
    padding .45s var(--ease),
    background-color .45s var(--ease),
    box-shadow .45s var(--ease);
}

.nav__inner {
  max-width: none;
  padding-left: clamp(20px, 3.4vw, 56px);
  padding-right: clamp(20px, 3.4vw, 56px);
}

.nav__logo {
  width: clamp(122px, 10.5vw, 176px);
  height: 44px;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.nav__logo-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

/* Keep the slot clean until you add src="" yourself. */
.nav__logo-image:not([src]),
.nav__logo-image[src=""] {
  visibility: hidden;
}

.nav.is-scrolled {
  padding: 13px 0;
  background: rgba(250, 247, 240, 0.92);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  box-shadow: 0 1px 0 var(--line);
}

.nav.is-hidden {
  transform: translate3d(0, calc(-100% - 18px), 0);
}

.nav.is-visible {
  transform: translate3d(0, 0, 0);
}

.site-footer__logo {
  width: clamp(150px, 15vw, 240px);
  height: 72px;
}


/* ==========================================================================
   CONTINUOUS FLOATING HERO IMAGE STREAMS
   Inspired by the moving visual wall behaviour of the reference site.
   ========================================================================== */
.hero {
  isolation: isolate;
}

.hero__bg {
  z-index: -3;
}

.hero__media-wall {
  position: absolute;
  inset: -28vh 0 -24vh;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.96;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 11%,
    #000 84%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 11%,
    #000 84%,
    transparent 100%
  );
}

.hero__media-column {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(135px, 17vw, 270px);
}

.hero__media-column--left {
  left: clamp(-48px, -2vw, -10px);
  transform: rotate(-2.5deg);
}

.hero__media-column--middle {
  left: 50%;
  width: clamp(110px, 12vw, 190px);
  transform: translateX(-50%) rotate(1.5deg);
  opacity: 0.5;
}

.hero__media-column--right {
  right: clamp(-52px, -2.5vw, -12px);
  transform: rotate(2.5deg);
}

.hero__media-track {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 30px);
  width: 100%;
  will-change: transform;
  animation-name: heroMediaFloatUp;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.hero__media-track--slow { animation-duration: 34s; }
.hero__media-track--medium {
  animation-duration: 28s;
  animation-delay: -11s;
}
.hero__media-track--fast {
  animation-duration: 23s;
  animation-delay: -7s;
}

.hero__media-group {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 30px);
  flex: none;
}

.hero__media-card {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: clamp(9px, 1.1vw, 18px);
  background:
    linear-gradient(145deg, rgba(22,20,15,.13), rgba(22,20,15,.035)),
    var(--paper-dim);
  box-shadow:
    0 22px 56px rgba(22,20,15,.10),
    0 1px 0 rgba(255,255,255,.28) inset;
}

.hero__media-card--portrait { aspect-ratio: 4 / 5; }
.hero__media-card--landscape { aspect-ratio: 5 / 3.2; }
.hero__media-card--square { aspect-ratio: 1; }
.hero__media-card--small {
  width: 76%;
  align-self: flex-end;
}

.hero__media-column--right .hero__media-card--small {
  align-self: flex-start;
}

.hero__media-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.035);
}

.hero__media-card img:not([src]),
.hero__media-card img[src=""] {
  opacity: 0;
}

@keyframes heroMediaFloatUp {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, calc(-50% - 15px), 0); }
}

/* Make the main hero copy sit clearly over the moving image wall. */
.hero__inner {
  z-index: 2;
}

.hero__inner::before {
  content: "";
  position: absolute;
  inset: -80px -5vw;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 48% 48%,
    rgba(250,247,240,.98) 0%,
    rgba(250,247,240,.90) 38%,
    rgba(250,247,240,.52) 62%,
    rgba(250,247,240,0) 78%
  );
  filter: blur(6px);
}

@media (max-width: 900px) {
  .hero__media-column--middle {
    display: none;
  }

  .hero__media-column {
    width: clamp(120px, 24vw, 190px);
  }

  .hero__media-wall {
    opacity: 0.74;
  }
}

@media (max-width: 640px) {
  .hero__media-column {
    width: 34vw;
    min-width: 112px;
  }

  .hero__media-column--left { left: -14vw; }
  .hero__media-column--right { right: -14vw; }

  .hero__media-card {
    border-radius: 10px;
  }

  .hero__inner::before {
    inset: -60px -16vw;
    background: radial-gradient(
      ellipse at center,
      rgba(250,247,240,.98) 0%,
      rgba(250,247,240,.92) 52%,
      rgba(250,247,240,.22) 82%,
      transparent 100%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media-track {
    animation: none !important;
  }

  .nav {
    transition-duration: 0.001ms !important;
  }
}
/* ==========================================================
   BIG TOP LOGO — HILDEN STYLE
   ========================================================== */

/* ==========================================================
   FULL WIDTH TOP IMAGE
   ========================================================== */

.hero-main-logo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  width: 100%;
  z-index: 510;

  display: block;
  padding-top: 6px;
}

.hero-main-logo img {
  display: block;

  width: 100%;
  max-width: none;

  height: auto;

  object-fit: contain;
  object-position: center top;
}


/* ==========================================================
   HEADER UNDER BIG LOGO
   ========================================================== */

.nav {

  position: absolute;

  top: clamp(
    185px,
    18.5vw,
    330px
  );

  left: 0;
  right: 0;

  width: 100%;

  padding: 0;

  background: transparent;

  z-index: 500;

  transform:
    translate3d(
      0,
      0,
      0
    );

  transition:

    top .6s
    cubic-bezier(
      .22,
      1,
      .36,
      1
    ),

    transform .6s
    cubic-bezier(
      .22,
      1,
      .36,
      1
    ),

    background-color
    .4s ease,

    padding
    .4s ease;

}


.nav__inner {

  width: 100%;

  max-width: none;

  padding: 0;

  justify-content: center;

}


/* center menu */

.nav__links {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 38px;

  font-size: 16px;

}


/* ==========================================================
   WHEN USER SCROLLS
   ========================================================== */

.nav.is-scrolled {

  position: fixed;

  top: 0;

  padding: 18px 0;

  background:
    rgba(
      250,
      247,
      240,
      .94
    );

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

  box-shadow:

    0 1px 0

    rgba(
      0,
      0,
      0,
      .08
    );

}


/* hide big logo while scrolling */

.hero-main-logo {

  transition:

    opacity .5s ease,

    transform .7s
    cubic-bezier(
      .22,
      1,
      .36,
      1
    );

}


body.is-page-scrolled
.hero-main-logo {

  opacity: 0;

  transform:

    translateX(-50%)

    translateY(-40px);

  pointer-events: none;

}


/* ==========================================================
   HERO SPACE
   ========================================================== */

.hero {

  padding-top:

    clamp(
      400px,
      32vw,
      540px
    );

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (
  max-width: 900px
) {

  .hero-main-logo {

    width: 96vw;

    height:
      clamp(
        120px,
        25vw,
        220px
      );

  }


  .nav {

    top:
      clamp(
        125px,
        24vw,
        210px
      );

  }


  .nav__links {

    display: none;

  }


  .nav__burger {

    display: flex;

  }


  .nav__inner {

    justify-content:
      flex-end;

    padding:

      0

      24px;

  }


  .hero {

    padding-top:

      clamp(
        290px,
        50vw,
        420px
      );

  }

}
/* ==========================================================
   TOP FULL-WIDTH LOGO
   ========================================================== */

.hero-main-logo {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;

  transform: none !important;

  display: block;

  width: 100%;
  height: auto;

  margin: 0;
  padding: 0;

  z-index: 510;
}

.hero-main-logo img {
  display: block;

  width: 100%;
  height: auto;

  max-width: none;

  object-fit: contain;
  object-position: center top;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   HEADER DIRECTLY UNDER LOGO
   ========================================================== */

.nav {
  position: sticky !important;

  top: 0 !important;
  left: auto !important;
  right: auto !important;

  width: 100%;

  padding: 18px 0;

  background: var(--paper);

  z-index: 500;
}


.nav__inner {
  width: 100%;
  max-width: none;

  display: flex;

  justify-content: center;
  align-items: center;

  padding: 0 30px;
}


.nav__links {
  display: flex;

  justify-content: center;
  align-items: center;

  gap: 38px;
}


/* Header while scrolling */

.nav.is-scrolled {
  position: sticky !important;
  top: 0 !important;

  padding: 15px 0;

  background: rgba(250, 247, 240, 0.94);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}


/* ==========================================================
   REMOVE OLD HERO SPACE
   ========================================================== */

.hero {
  padding-top: 120px !important;
}/* ==========================================================
   FULL WIDTH LOGO — NO SPACE ABOVE
   ========================================================== */

.hero-main-logo {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;

  display: block;

  width: 100%;
  height: clamp(300px, 43vw, 760px);

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden;

  transform: none !important;

  z-index: 10;
}


.hero-main-logo img {
  position: absolute;

  top: -17%;
  left: 0;

  width: 100%;
  height: auto;

  max-width: none;

  display: block;

  margin: 0;
  padding: 0;

  object-fit: contain;
}


/* ==========================================================
   HEADER DIRECTLY UNDER THE LOGO
   ========================================================== */

.nav {
  position: sticky !important;

  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  width: 100%;

  margin: 0 !important;
  padding: 18px 0 !important;

  background: rgba(250, 247, 240, 0.96) !important;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  z-index: 500;

  transform: none !important;
}


.nav.is-hidden,
.nav.is-visible,
.nav.is-scrolled {
  transform: none !important;

  top: 0 !important;

  padding: 18px 0 !important;
}


.nav__inner {
  width: 100%;

  max-width: none;

  justify-content: center;

  padding: 0 30px;
}


.nav__links {
  display: flex;

  justify-content: center;
  align-items: center;

  gap: 38px;
}


/* ==========================================================
   HERO
   ========================================================== */

.hero {
  padding-top: 100px !important;
}
/* ==========================================================
   PAGE FLOW:
   LOGO -> HEADER -> HERO -> REST OF WEBSITE
   ========================================================== */

.hero-main-logo {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;

  width: 100%;
  height: 33vw; /* قللنا الارتفاع بعد قص الفراغ اللي فوق */

  max-height: 600px;
  min-height: 300px;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden;

  transform: none !important;

  display: block;
}


/* نرفع الصورة نفسها عشان نشيل الفراغ الموجود جوه الـ JPG */

.hero-main-logo img {
  position: absolute;

  top: -12vw; /* زود الرقم لو عايز ترفعها أكتر */
  left: 0;

  width: 100%;
  height: auto;

  max-width: none;

  margin: 0;
  padding: 0;

  display: block;
}


/* ==========================================================
   HEADER DIRECTLY AFTER LOGO
   ========================================================== */

.nav {
  position: relative !important;

  top: auto !important;
  left: auto !important;
  right: auto !important;

  width: 100%;

  margin: 0 !important;
  padding: 18px 0 !important;

  background: var(--paper) !important;

  transform: none !important;

  z-index: 100;
}


.nav.is-scrolled,
.nav.is-hidden,
.nav.is-visible {
  position: relative !important;

  top: auto !important;

  transform: none !important;

  padding: 18px 0 !important;
}


.nav__inner {
  width: 100%;
  max-width: none;

  display: flex;

  justify-content: center;
  align-items: center;

  padding: 0 30px;
}


.nav__links {
  display: flex;

  justify-content: center;
  align-items: center;

  gap: 38px;
}


/* ==========================================================
   HERO STARTS DIRECTLY AFTER HEADER
   ========================================================== */

.hero {
  margin: 0 !important;

  padding-top: 100px !important;
}
/* ==========================================================
   STICKY HEADER — ALWAYS FOLLOWS SCROLL
   ========================================================== */

.nav {
  position: sticky !important;
  top: 0 !important;

  width: 100%;

  margin: 0 !important;
  padding: 18px 0 !important;

  background: rgba(250, 247, 240, 0.96) !important;

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  z-index: 9999 !important;

  transform: none !important;

  transition:
    background-color 0.3s ease,
    padding 0.3s ease;
}


/* prevent old JS from hiding the header */

.nav.is-hidden,
.nav.is-visible,
.nav.is-scrolled {
  position: sticky !important;

  top: 0 !important;

  transform: none !important;

  opacity: 1 !important;

  visibility: visible !important;
}


/* center navigation */

.nav__inner {
  width: 100%;
  max-width: none;

  display: flex;

  justify-content: center;
  align-items: center;
}


.nav__links {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 38px;
}
/* =========================================
   HEADER FOLLOWS SCROLL
   ========================================= */

.nav {
  position: sticky !important;
  top: 0 !important;

  width: 100%;
  margin: 0 !important;
  padding: 18px 0 !important;

  background: rgba(250, 247, 240, 0.96) !important;

  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);

  z-index: 99999 !important;

  transform: none !important;
}


/* منع أي كود قديم من إخفاء الـ header */

.nav.is-hidden,
.nav.is-visible,
.nav.is-scrolled {
  position: sticky !important;
  top: 0 !important;

  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* Center menu */

.nav__inner {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  max-width: none;
}


.nav__links {
  display: flex;
  justify-content: center;
  align-items: center;

  gap: 38px;
}
.nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
  transform: none !important;
}

.nav.is-scrolled,
.nav.is-hidden,
.nav.is-visible {
  transform: none !important;
}
/* ==========================================================
   HILDEN STYLE SCROLLING HEADER
   ========================================================== */

.nav-sticky-wrapper {
  position: relative;
  width: 100%;
}


.nav {
  position: relative !important;

  top: auto !important;
  left: auto !important;
  right: auto !important;

  width: 100%;

  margin: 0 !important;
  padding: 20px 0 !important;

  background: #faf7f0;

  z-index: 99999;

  transform: none !important;

  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}


/* لما الـheader يوصل فوق */

.nav.is-fixed {
  position: fixed !important;

  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  width: 100%;

  background: rgba(250, 247, 240, 0.96);

  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);

  box-shadow:
    0 1px 0
    rgba(0, 0, 0, 0.08);
}


/* منع أي CSS قديم من إخفاء الـheader */

.nav.is-hidden,
.nav.is-visible,
.nav.is-scrolled {
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}


.nav__inner {
  width: 100%;
  max-width: none;

  display: flex;

  justify-content: center;
  align-items: center;

  padding: 0 30px;
}


.nav__links {
  display: flex;

  justify-content: center;
  align-items: center;

  gap: 42px;
}


.nav__links a {
  font-size: 16px;

  color: #16140f;
}
/* =========================================================
   FLOATING HEADER — FIXED WHEN IT REACHES TOP
   ========================================================= */

.floating-nav-placeholder {
  position: relative;
  width: 100%;
  height: 64px;
  z-index: 9999;
}

.floating-nav {
  position: relative;
  width: 100%;
  height: 64px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #faf7f0;

  z-index: 99999;
}

.floating-nav.is-fixed {
  position: fixed !important;

  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  width: 100%;

  background: rgba(250, 247, 240, 0.96);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.floating-nav__inner {
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}

.floating-nav__links {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 42px;
}

.floating-nav__links a {
  display: block;

  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;

  color: #16140f;

  text-decoration: none;
}
/* =========================================
   TRANSPARENT FLOATING HEADER
   ========================================= */

.floating-nav {
  background: transparent !important;
  box-shadow: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.floating-nav.is-fixed {
  background: transparent !important;
  box-shadow: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* =========================================================
   DYNAMIC HEADER TEXT COLOR
   ========================================================= */

.floating-nav__links a {
  transition: color 0.35s ease;
}


/* Header over light sections */

.floating-nav.nav-on-light .floating-nav__links a {
  color: #16140f !important;
}


/* Header over dark sections */

.floating-nav.nav-on-dark .floating-nav__links a {
  color: #ffffff !important;
}
/* ================================
   LOGO SCROLL ANIMATION
   ================================ */

.hero-main-logo {
  margin-top: -70px !important; /* ارفع اللوجو لفوق */
  transform-origin: center top;
  will-change: transform, opacity;
}

.hero-main-logo img {
  will-change: transform, opacity;
}
/* =========================================================
   BIG LOGO
   Scrolls naturally with the page
   ========================================================= */

.hero-main-logo {
  position: relative;

  display: block;

  width: 100%;

  margin: 0;
  padding: 0;

  z-index: 1;
}


.hero-main-logo img {
  display: block;

  width: 100%;
  height: auto;

  margin: 0;
  padding: 0;
}


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

.floating-nav-placeholder {
  position: relative;

  width: 100%;

  z-index: 9999;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.floating-nav {
  position: relative;

  width: 100%;

  min-height: 70px;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 0 40px;

  background: transparent;

  z-index: 99999;
}


/* =========================================================
   FIXED NAV WHEN SCROLLING
   ========================================================= */

.floating-nav.is-fixed {
  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  width: 100%;

  background: transparent;
}


/* =========================================================
   CENTER LINKS
   ========================================================= */

.floating-nav__links {
  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  align-items: center;

  gap: 42px;
}


.floating-nav__links a {
  font-size: 16px;

  color: #16140f;

  text-decoration: none;

  transition:
    color 0.35s ease;
}


/* =========================================================
   SMALL LEFT ICON
   Hidden initially
   ========================================================= */

.floating-nav__icon {
  position: absolute;

  left: 30px;

  top: 50%;

  width: 60px;
  height: 60px;

  transform:
    translateY(-50%)
    translateX(-15px);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition:

    opacity 0.45s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    ),

    transform 0.55s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}


.floating-nav__icon img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;
}


/* =========================================================
   SHOW ICON AFTER NAV BECOMES FIXED
   ========================================================= */

.floating-nav.is-fixed
.floating-nav__icon {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform:

    translateY(-50%)

    translateX(0);

}


/* Don't show broken image icon
   until you add your icon src */

.floating-nav__icon img:not([src]),
.floating-nav__icon img[src=""] {

  visibility: hidden;

}
/* =========================================
   DYNAMIC HEADER ICON
   ========================================= */

.floating-nav__icon {
  position: absolute;
}

.floating-nav__icon-image {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 100%;
  height: 100%;

  object-fit: contain;

  transform: translate(-50%, -50%);

  transition: opacity 0.35s ease;
}


/* Default: black icon */

.floating-nav__icon-image--dark {
  opacity: 1;
}

.floating-nav__icon-image--light {
  opacity: 0;
}


/* Dark section: white icon */

.floating-nav.nav-on-dark
.floating-nav__icon-image--dark {
  opacity: 0;
}

.floating-nav.nav-on-dark
.floating-nav__icon-image--light {
  opacity: 1;
}


/* Light section: black icon */

.floating-nav.nav-on-light
.floating-nav__icon-image--dark {
  opacity: 1;
}

.floating-nav.nav-on-light
.floating-nav__icon-image--light {
  opacity: 0;
}

/* ==========================================================================
   GLOBAL FLOATING MEDIA OVERLAY — FINAL OVERRIDES
   The moving image streams are no longer part of the Hero section.
   They stay fixed over the viewport and move upward automatically.
   ========================================================================== */

.hero__media-wall {
  position: fixed !important;
  inset: 0 !important;

  width: 100vw !important;
  height: 100vh !important;
  height: 100svh !important;

  z-index: 120 !important;

  pointer-events: none !important;
  overflow: hidden !important;

  opacity: 1 !important;

  -webkit-mask-image: none !important;
  mask-image: none !important;

  transform: none !important;
}


/* Keep the three streams spread across the full viewport. */

.hero__media-column {
  position: absolute !important;
  top: -28vh !important;
  bottom: auto !important;

  height: 156vh !important;

  width: clamp(150px, 17vw, 290px) !important;

  overflow: visible !important;
}


.hero__media-column--left {
  left: clamp(-30px, 2vw, 40px) !important;
  right: auto !important;

  transform: rotate(-2.5deg) !important;
}


.hero__media-column--middle {
  left: 50% !important;
  right: auto !important;

  width: clamp(120px, 13vw, 215px) !important;

  transform: translateX(-50%) rotate(1.5deg) !important;

  opacity: 0.92 !important;
}


.hero__media-column--right {
  left: auto !important;
  right: clamp(-34px, 2vw, 42px) !important;

  transform: rotate(2.5deg) !important;
}


/* The streams run independently from page scrolling. */

.hero__media-track {
  width: 100% !important;

  display: flex !important;
  flex-direction: column !important;

  gap: clamp(22px, 2.2vw, 34px) !important;

  will-change: transform;

  animation-name: globalMediaFloatUp !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}


.hero__media-track--slow {
  animation-duration: 42s !important;
  animation-delay: -8s !important;
}


.hero__media-track--medium {
  animation-duration: 34s !important;
  animation-delay: -18s !important;
}


.hero__media-track--fast {
  animation-duration: 27s !important;
  animation-delay: -12s !important;
}


.hero__media-group {
  display: flex !important;
  flex-direction: column !important;

  gap: clamp(22px, 2.2vw, 34px) !important;

  flex: none !important;
}


/* Real image cards sit above all normal page content. */

.hero__media-card {
  position: relative;

  width: 100%;

  overflow: hidden;

  border-radius: clamp(10px, 1.1vw, 18px);

  background: transparent !important;

  box-shadow:
    0 24px 60px rgba(22, 20, 15, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.18) inset;
}


.hero__media-card img {
  width: 100% !important;
  height: 100% !important;

  display: block !important;

  object-fit: cover !important;

  transform: scale(1.02);
}


/* Hide empty placeholder cards until you add a real image src. */

.hero__media-card:has(img:not([src])),
.hero__media-card:has(img[src=""]) {
  visibility: hidden;
}


/* Seamless endless upward loop. */

@keyframes globalMediaFloatUp {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, calc(-50% - 17px), 0);
  }
}


/* Keep the navigation, cursor, progress bar and mobile menu above the images. */

.floating-nav-placeholder {
  z-index: 9999 !important;
}


.floating-nav {
  z-index: 99999 !important;
}


.mobile-menu {
  z-index: 100000 !important;
}


.scroll-progress {
  z-index: 100001 !important;
}


.cursor-dot,
.cursor-ring {
  z-index: 100002 !important;
}


/* The Hero no longer clips or owns the moving images. */

.hero {
  isolation: isolate;
}


@media (max-width: 900px) {

  .hero__media-column--middle {
    display: none !important;
  }


  .hero__media-column {
    width: clamp(130px, 25vw, 200px) !important;
  }


  .hero__media-column--left {
    left: -8vw !important;
  }


  .hero__media-column--right {
    right: -8vw !important;
  }

}


@media (max-width: 640px) {

  .hero__media-column {
    width: 36vw !important;
    min-width: 118px !important;
  }


  .hero__media-column--left {
    left: -14vw !important;
  }


  .hero__media-column--right {
    right: -14vw !important;
  }

}


@media (prefers-reduced-motion: reduce) {

  .hero__media-track {
    animation: none !important;
  }

}
/* =========================================================
   FULL SCREEN LOGO SECTION
   Background behind the logo + image inside the logo
   ========================================================= */

.logo-work-section {
  position: relative;

  width: 100%;
  min-height: 100vh;
  height: 100vh;

  overflow: hidden;
  isolation: isolate;

  background-color: #000;

  /*
    BACKGROUND IMAGE BEHIND EVERYTHING
    غيّر اسم الصورة هنا بس
  */

  background-image:
    url("../assets/images/5aa0219a-23b8-4bbe-8d78-08a92da15354-original.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  

  
}


/* =========================================================
   PHOTO INSIDE THE LOGO ONLY

   الأبيض في logo-section.jpg يظهر فيه logo-man
   الأسود يبقى شفاف ويظهر الـbackground من وراه
   ========================================================= */

.logo-work-photo {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  background-image: url("../assets/images/logo-man.png");
  background-size: cover;
  background-position: center -90%;
  background-repeat: no-repeat;

  z-index: 1;

  /* نفس الـ M SVG */
  -webkit-mask-image: url("../assets/images/logo-section-3.svg");
  mask-image: url("../assets/images/logo-section-3.svg");

  /* مهم جدًا: luminance مش alpha */
  -webkit-mask-mode: luminance;
  mask-mode: luminance;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  /* نفس الحجم اللي انت عايزه */
  -webkit-mask-size: 500% 500%;
  mask-size: 500% 500%;
}


/* =========================================================
   ORIGINAL LOGO IMAGE

   سيب العنصر موجود في الـHTML زي ما هو.
   بس الصورة نفسها بقت مستخدمة كـ mask فوق،
   لذلك لو ظهرت هنا هتسود الخلفية تاني.
   ========================================================= */

.logo-work-shape {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 100%;
  height: 100%;

  max-width: none;

  object-fit: cover;

  transform:
    translate(-50%, -50%)
    scale(1);

  transform-origin: center;

  opacity: 0;

  pointer-events: none;

  z-index: 2;
}


/* =========================================================
   OPTIONAL DARK OVERLAY ON BACKGROUND ONLY
   ========================================================= */

.logo-work-section::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  background:
    rgba(0, 0, 0, 0.08);

  pointer-events: none;
}


/* ==================================================
   FLOATING IMAGES — BOTTOM TO TOP
   ================================================== */

.floating-images-stream {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.floating-image {
  position: absolute;

  /* كل الصور تبدأ من تحت الشاشة */
  top: 110vh;

  width: 1000px;

  margin: 0;
  padding: 0;

  animation-name: imageFloatUp;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  will-change: transform;
}

.floating-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 180px;
  object-fit: cover;

  border-radius: 6px;
}


/* =====================================
   RANDOM POSITIONS
   ===================================== */

.floating-image:nth-child(1) {
  left: 4%;
  width: 200px;
  animation-duration: 20s;
  animation-delay: -3s;
}

.floating-image:nth-child(2) {
  left: 81%;
  width: 145px;
  animation-duration: 28s;
  animation-delay: -15s;
}

.floating-image:nth-child(3) {
  left: 23%;
  width: 105px;
  animation-duration: 26s;
  animation-delay: -8s;
}

.floating-image:nth-child(4) {
  left: 68%;
  width: 125px;
  animation-duration: 30s;
  animation-delay: -20s;
}

.floating-image:nth-child(5) {
  left: 43%;
  width: 150px;
  animation-duration: 27s;
  animation-delay: -12s;
}

.floating-image:nth-child(6) {
  left: 8%;
  width: 135px;
  animation-duration: 31s;
  animation-delay: -23s;
}

.floating-image:nth-child(7) {
  left: 89%;
  width: 110px;
  animation-duration: 25s;
  animation-delay: -5s;
}

.floating-image:nth-child(8) {
  left: 55%;
  width: 140px;
  animation-duration: 29s;
  animation-delay: -17s;
}

.floating-image:nth-child(9) {
  left: 31%;
  width: 115px;
  animation-duration: 32s;
  animation-delay: -26s;
}

.floating-image:nth-child(10) {
  left: 74%;
  width: 130px;
  animation-duration: 26s;
  animation-delay: -10s;
}

.floating-image:nth-child(11) {
  left: 15%;
  width: 145px;
  animation-duration: 30s;
  animation-delay: -19s;
}

.floating-image:nth-child(12) {
  left: 92%;
  width: 105px;
  animation-duration: 28s;
  animation-delay: -24s;
}


/* =====================================
   MOVEMENT
   ===================================== */

@keyframes imageFloatUp {

  0% {
    transform:
      translateY(0)
      rotate(-2deg);
  }

  50% {
    transform:
      translateY(-75vh)
      rotate(2deg);
  }

  100% {
    transform:
      translateY(-150vh)
      rotate(-2deg);
  }

}


/* MOBILE */

@media (max-width: 768px) {

  .floating-image {
    width: 90px;
  }

  .floating-image img {
    max-height: 130px;
  }

}
/* =========================================================
   MARK & MATTER HERO
   ========================================================= */

.hero--mark {
  position: relative;

  width: 100%;
  min-height: 100vh;

  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #ffffff;
}


/* ================= BACKGROUND ================= */

.hero-mark__background {
  position: absolute;
  inset: 0;

  background-image: url("../assets/images/hero-background.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: scale(1.03);

  z-index: 0;
}


.hero-mark__overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.02),
      rgba(0, 0, 0, 0.08)
    );

  z-index: 1;
}


/* =========================================================
   CENTER
   ========================================================= */

.hero-mark__content {
  position: relative;

  z-index: 3;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  transform: translateY(30px);
}


/* =========================================================
   MAIN TITLE
   ========================================================= */

.hero-mark__title {
  position: relative;

  display: flex;
  flex-direction: column;

  align-items: flex-start;

  line-height: 0.72;
}


.hero-mark__mark {
  font-family: "Bricolage Grotesque", sans-serif;

  font-size: clamp(90px, 11vw, 210px);

  font-weight: 400;

  letter-spacing: -0.07em;
}


.hero-mark__matter {
  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(90px, 11vw, 210px);

  font-weight: 400;

  letter-spacing: -0.075em;

  white-space: nowrap;
}


.hero-mark__ampersand {
  display: inline-block;

  margin-right: 0.01em;
}


/* =========================================================
   WRITING SIGNATURE
   ========================================================= */

.hero-mark__signature {
  position: relative;

  display: inline-block;

  margin-top: 35px;

  font-family: "Caveat", cursive;

  font-size: clamp(40px, 4.5vw, 78px);

  font-weight: 400;

  line-height: 1;

  white-space: nowrap;

  color: #ffffff;
}


/* TEXT */

.hero-mark__signature-text {
  display: block;

  padding: 5px 20px 10px 10px;

  clip-path: inset(0 100% 0 0);

  opacity: 0;
}


/* WHEN ANIMATION STARTS */

.hero-mark__signature.is-writing
.hero-mark__signature-text {

  opacity: 1;

  animation:
    signatureWriting 3.4s
    cubic-bezier(.25, .1, .25, 1)
    forwards;
}


/* TEXT WRITING */

@keyframes signatureWriting {

  0% {
    clip-path: inset(0 100% 0 0);
  }

  8% {
    clip-path: inset(0 97% 0 0);
  }

  25% {
    clip-path: inset(0 74% 0 0);
  }

  48% {
    clip-path: inset(0 50% 0 0);
  }

  72% {
    clip-path: inset(0 25% 0 0);
  }

  100% {
    clip-path: inset(0 0 0 0);
  }

}


/* =========================================================
   HAND + PEN
   ========================================================= */

.hero-mark__writer {
  position: absolute;

  left: -45px;
  top: 45%;

  width: 80px;

  z-index: 5;

  pointer-events: none;

  opacity: 0;

  transform:
    translateY(-50%)
    rotate(-10deg);
}


.hero-mark__writer-svg {
  display: block;

  width: 100%;
  height: auto;

  overflow: visible;

  filter:
    drop-shadow(
      0 5px 5px
      rgba(0, 0, 0, 0.18)
    );
}


/* START HAND ANIMATION */

.hero-mark__signature.is-writing
.hero-mark__writer {

  animation:
    writerMove 3.6s
    cubic-bezier(.25, .1, .25, 1)
    forwards;
}


/* =========================================================
   HAND MOVEMENT
   ========================================================= */

@keyframes writerMove {

  0% {

    left: -35px;

    top: 54%;

    opacity: 0;

    transform:
      translateY(-50%)
      rotate(-12deg);
  }


  4% {

    opacity: 1;
  }


  12% {

    left: 5%;

    top: 43%;

    transform:
      translateY(-50%)
      rotate(-8deg);
  }


  25% {

    left: 22%;

    top: 55%;

    transform:
      translateY(-50%)
      rotate(-13deg);
  }


  40% {

    left: 39%;

    top: 42%;

    transform:
      translateY(-50%)
      rotate(-7deg);
  }


  55% {

    left: 55%;

    top: 55%;

    transform:
      translateY(-50%)
      rotate(-12deg);
  }


  70% {

    left: 70%;

    top: 42%;

    transform:
      translateY(-50%)
      rotate(-8deg);
  }


  85% {

    left: 86%;

    top: 55%;

    transform:
      translateY(-50%)
      rotate(-12deg);
  }


  95% {

    left: 98%;

    top: 46%;

    opacity: 1;
  }


  100% {

    left: 105%;

    top: 46%;

    opacity: 0;

    transform:
      translateY(-50%)
      rotate(-8deg);
  }

}


/* PEN SMALL MOVEMENT */

.hero-mark__signature.is-writing
.writer-pen {

  transform-origin: center;

  animation:
    penWritingMovement
    0.22s
    ease-in-out
    infinite alternate;
}


@keyframes penWritingMovement {

  from {
    transform:
      translateY(-1px)
      rotate(-1deg);
  }

  to {
    transform:
      translateY(2px)
      rotate(1deg);
  }

}


/* =========================================================
   BUTTONS
   ========================================================= */

.hero-mark__actions {
  margin-top: 45px;

  position: relative;

  z-index: 7;
}


/* =========================================================
   TOP LEFT
   ========================================================= */

.hero-mark__top-left {
  position: absolute;

  top: 9%;
  left: 4.5%;

  z-index: 4;

  font-family: "Bricolage Grotesque", sans-serif;

  font-size: 18px;

  font-weight: 500;

  color: #ffffff;
}


/* =========================================================
   PROJECT 2026
   ========================================================= */

.hero-mark__project {
  position: absolute;

  right: 4%;
  top: 9%;

  z-index: 4;

  writing-mode: vertical-rl;

  text-orientation: mixed;

  font-family: "IBM Plex Mono", monospace;

  font-size: 15px;

  letter-spacing: 0.35em;

  color: #ffffff;
}


/* =========================================================
   BOTTOM RIGHT
   ========================================================= */

.hero-mark__bottom-right {
  position: absolute;

  right: 4%;
  bottom: 4%;

  z-index: 4;

  font-family: "Bricolage Grotesque", sans-serif;

  font-size: 16px;

  font-weight: 500;

  color: #ffffff;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

  .hero-mark__mark,
  .hero-mark__matter {

    font-size: clamp(
      65px,
      19vw,
      110px
    );

  }


  .hero-mark__signature {

    margin-top: 25px;

    font-size: clamp(
      35px,
      10vw,
      55px
    );

  }


  .hero-mark__writer {

    width: 58px;

  }


  .hero-mark__top-left {

    top: 30px;
    left: 20px;

    font-size: 12px;

  }


  .hero-mark__project {

    right: 18px;

    font-size: 10px;

  }


  .hero-mark__bottom-right {

    right: 18px;
    bottom: 18px;

    font-size: 10px;

  }

}
/* =========================================================
   MARK & MATTER HERO
   ========================================================= */

.hero--mark {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #dcd8d2; /* fallback until you add image */
}

.hero-mark__background {
  position: absolute;
  inset: 0;
  z-index: 0;

  /* حط صورتك هنا بعدين */
  background-image: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-mark__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.03);
}

.hero-mark__content {
  position: relative;
  z-index: 3;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-mark__logo-wrap {
  width: min(760px, 76vw);
}

.hero-mark__logo {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* top left */
.hero-mark__top-left {
  position: absolute;
  top: 34px;
  left: 42px;
  z-index: 4;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.92);
}

/* right vertical */
.hero-mark__project {
  position: absolute;
  top: 30px;
  right: 34px;
  z-index: 4;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: "IBM Plex Mono", monospace;
  font-size: 15px;
  letter-spacing: 0.4em;
  color: rgba(255,255,255,0.9);
}

/* bottom right */
.hero-mark__bottom-right {
  position: absolute;
  right: 42px;
  bottom: 28px;
  z-index: 4;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
}

/* handwriting area */
.hero-mark__signature {
  position: relative;
  margin-top: 22px;
  width: min(700px, 74vw);
  height: 110px;
}

.hero-mark__signature-line {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.hero-mark__signature-text {
  display: inline-block;
  font-family: "Comic Sans MS", "Segoe Print", cursive;
  font-size: clamp(36px, 4.8vw, 82px);
  font-weight: 400;
  color: #f7f3ee;
  letter-spacing: 0.01em;
  white-space: nowrap;
  width: 0;
  overflow: hidden;
}

/* hand */
.hero-mark__writer {
  position: absolute;
  left: 0;
  top: 50%;
  width: 110px;
  height: 80px;
  transform: translate(0, -50%);
  opacity: 0;
}

.hero-mark__writer-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* active animation */
.hero-mark__signature.is-writing .hero-mark__signature-text {
  animation: handwritingReveal 2.8s steps(28) forwards;
}

.hero-mark__signature.is-writing .hero-mark__writer {
  opacity: 1;
  animation: handMoveWrite 2.8s linear forwards;
}

/* after finish خلي الإيد تختفي */
.hero-mark__signature.is-done .hero-mark__writer {
  opacity: 0;
}

@keyframes handwritingReveal {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes handMoveWrite {
  0% {
    left: 11%;
    transform: translate(0, -50%) rotate(-6deg);
    opacity: 1;
  }
  20% {
    transform: translate(0, -50%) rotate(-3deg);
  }
  40% {
    transform: translate(0, -50%) rotate(-7deg);
  }
  60% {
    transform: translate(0, -50%) rotate(-4deg);
  }
  80% {
    transform: translate(0, -50%) rotate(-6deg);
  }
  100% {
    left: 84%;
    transform: translate(0, -50%) rotate(-2deg);
    opacity: 1;
  }
}

.hero-mark__actions {
  margin-top: 24px;
  position: relative;
  z-index: 5;
}

/* mobile */
@media (max-width: 900px) {
  .hero-mark__logo-wrap {
    width: min(680px, 84vw);
  }

  .hero-mark__signature {
    height: 90px;
  }
}

@media (max-width: 768px) {
  .hero-mark__top-left {
    top: 22px;
    left: 20px;
    font-size: 12px;
  }

  .hero-mark__project {
    top: 20px;
    right: 14px;
    font-size: 11px;
  }

  .hero-mark__bottom-right {
    right: 18px;
    bottom: 18px;
    font-size: 11px;
  }

  .hero-mark__writer {
    width: 72px;
    height: 54px;
  }

  .hero-mark__signature {
    width: 90vw;
    height: 72px;
  }

  .hero-mark__signature-text {
    font-size: clamp(24px, 7vw, 46px);
  }
}


/* ==========================================================================
   FINAL HEADER + TOP LOGO FIX
   Keep this block at the VERY END of style.css
   ========================================================================== */

/* ---------- Large logo at the very top ---------- */
.hero-main-logo {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;

  display: block !important;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;

  z-index: 20 !important;

  /* Do not force opacity here: JS controls the fade while scrolling. */
}

.hero-main-logo img {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;

  display: block !important;

  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain !important;
  object-position: center top !important;
}


/* ---------- Header placeholder ---------- */
.floating-nav-placeholder {
  position: relative !important;

  width: 100% !important;
  height: 64px;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  z-index: 9998 !important;
}


/* ---------- Transparent floating header ---------- */
.floating-nav {
  position: relative !important;

  width: 100% !important;
  min-height: 64px !important;
  height: 64px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 24px !important;

  background: transparent !important;

  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;

  box-shadow: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  z-index: 9999 !important;
}


/* Header follows the page when it reaches the top */
.floating-nav.is-fixed {
  position: fixed !important;

  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  width: 100% !important;

  background: transparent !important;

  border: 0 !important;
  border-bottom: 0 !important;

  box-shadow: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ---------- Center menu ---------- */
.floating-nav__inner {
  position: relative !important;

  width: 100% !important;
  height: 64px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;
}


.floating-nav__links {
  position: absolute !important;

  left: 50% !important;
  top: 50% !important;

  transform: translate(-50%, -50%) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 42px !important;

  white-space: nowrap !important;
}


.floating-nav__links a {
  font-family: "Inter", sans-serif !important;

  font-size: 16px !important;
  font-weight: 400 !important;

  text-decoration: none !important;

  transition: color 0.35s ease !important;
}


/* ---------- Very small logo on the left ---------- */
.floating-nav__icon {
  position: absolute !important;

  left: 18px !important;
  top: 50% !important;

  width: 55px !important;
  height: 55px !important;

  transform:
    translateY(-50%)
    translateX(-8px) !important;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  z-index: 5 !important;

  transition:
    opacity 0.3s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.3s ease !important;
}


/* Show the tiny logo only after header becomes fixed */
.floating-nav.is-fixed .floating-nav__icon,
.floating-nav__icon.is-visible {
  opacity: 1 !important;
  visibility: visible !important;

  pointer-events: auto !important;

  transform:
    translateY(-50%)
    translateX(0) !important;
}


.floating-nav__icon-image {
  position: absolute !important;

  top: 50% !important;
  left: 50% !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: contain !important;

  transform: translate(-50%, -50%) !important;

  transition: opacity 0.35s ease !important;
}


/* ---------- Dynamic light/dark header colors ---------- */
.floating-nav.nav-on-light .floating-nav__links a {
  color: #16140f !important;
}

.floating-nav.nav-on-dark .floating-nav__links a {
  color: #ffffff !important;
}


.floating-nav.nav-on-light .floating-nav__icon-image--dark {
  opacity: 1 !important;
}

.floating-nav.nav-on-light .floating-nav__icon-image--light {
  opacity: 0 !important;
}


.floating-nav.nav-on-dark .floating-nav__icon-image--dark {
  opacity: 0 !important;
}

.floating-nav.nav-on-dark .floating-nav__icon-image--light {
  opacity: 1 !important;
}


/* ---------- Burger follows dynamic colors ---------- */
.floating-nav.nav-on-light .nav__burger span {
  background: #16140f !important;
}

.floating-nav.nav-on-dark .nav__burger span {
  background: #ffffff !important;
}


/* ---------- Mobile ---------- */
@media (max-width: 900px) {

  .floating-nav {
    padding: 0 18px !important;
  }


  .floating-nav__links {
    display: none !important;
  }


  .floating-nav__inner {
    justify-content: flex-end !important;
  }


  .floating-nav__icon {
    left: 14px !important;

    width: 23px !important;
    height: 23px !important;
  }


  .nav__burger {
    display: flex !important;
  }

}


/* ==========================================================================
   FINAL MARK & MATTER HERO — AUTHORITATIVE OVERRIDES
   Keep this block at the VERY END of style.css
   ========================================================================== */

.hero--mark {
  --mark-hero-background: none;

  position: relative !important;
  z-index: 3 !important;

  width: 100% !important;
  min-height: 100vh !important;
  min-height: 100svh !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  isolation: isolate;

  color: #ffffff !important;
  background: #c8c4bd !important;
}


/* Background image layer.
   Change only --mark-hero-background above when you add your image. */
.hero--mark .hero-mark__background {
  position: absolute !important;
  inset: 0 !important;

  z-index: 0 !important;

  background-image: var(--mark-hero-background) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;

  transform: scale(1.025);
}


/* Cinematic overlay */
.hero--mark .hero-mark__overlay {
  position: absolute !important;
  inset: 0 !important;

  z-index: 1 !important;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.06) 0%,
      rgba(0, 0, 0, 0.02) 45%,
      rgba(0, 0, 0, 0.12) 100%
    ) !important;

  pointer-events: none;
}


/* Keep the old global floating images behind this hero only */
.hero--mark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}


/* Main centered composition */
.hero--mark .hero-mark__content {
  position: relative !important;
  z-index: 4 !important;

  width: min(1100px, 92vw);

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;

  transform: translateY(18px) !important;
}


/* MARK & MATTER image logo */
.hero--mark .hero-mark__logo-wrap {
  width: min(820px, 75vw) !important;
  min-height: clamp(170px, 22vw, 350px);

  display: flex;
  align-items: center;
  justify-content: center;
}


.hero--mark .hero-mark__logo {
  display: block !important;

  width: 100% !important;
  height: auto !important;

  max-width: none !important;

  object-fit: contain !important;

  pointer-events: none;
}


/* Hide the empty slot cleanly until you add src */
.hero--mark .hero-mark__logo:not([src]),
.hero--mark .hero-mark__logo[src=""] {
  visibility: hidden !important;
}


/* Handwritten phrase area */
.hero--mark .hero-mark__signature {
  position: relative !important;

  width: min(760px, 76vw) !important;
  height: clamp(82px, 8vw, 126px) !important;

  margin-top: 6px !important;

  color: #ffffff !important;

  overflow: visible !important;
}


.hero--mark .hero-mark__signature-line {
  position: absolute !important;

  left: 50% !important;
  top: 50% !important;

  width: max-content !important;
  max-width: 100% !important;

  transform: translate(-50%, -50%) !important;

  overflow: visible !important;
  white-space: nowrap !important;
}


.hero--mark .hero-mark__signature-text {
  display: inline-block !important;

  width: auto !important;

  padding: 0 12px 10px !important;

  overflow: visible !important;
  white-space: nowrap !important;

  font-family: "Caveat", "Segoe Print", cursive !important;
  font-size: clamp(44px, 5vw, 82px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;

  letter-spacing: 0.01em !important;

  color: #ffffff !important;

  opacity: 0 !important;

  clip-path: inset(0 100% 0 0) !important;
  -webkit-clip-path: inset(0 100% 0 0) !important;

  will-change: clip-path, opacity;
}


/* Writing starts only when JS adds .is-writing */
.hero--mark
.hero-mark__signature.is-writing
.hero-mark__signature-text {
  opacity: 1 !important;

  animation:
    finalSignatureWriting
    3.4s
    steps(34, end)
    forwards !important;
}


@keyframes finalSignatureWriting {

  from {
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
  }

}


/* Faux 3D hand + pen */
.hero--mark .hero-mark__writer {
  position: absolute !important;

  left: -3% !important;
  top: 52% !important;

  width: clamp(92px, 8vw, 145px) !important;
  height: auto !important;

  z-index: 8 !important;

  opacity: 0 !important;

  pointer-events: none !important;

  transform:
    translateY(-50%)
    rotate(-8deg) !important;

  transform-origin: center center;

  will-change: left, top, transform, opacity;
}


.hero--mark .hero-mark__writer-svg {
  display: block !important;

  width: 100% !important;
  height: auto !important;

  overflow: visible !important;

  filter:
    drop-shadow(0 10px 14px rgba(0, 0, 0, 0.22));
}


/* Hand follows the writing */
.hero--mark
.hero-mark__signature.is-writing
.hero-mark__writer {
  animation:
    finalWriterMove
    3.55s
    cubic-bezier(.22, .72, .24, 1)
    forwards !important;
}


@keyframes finalWriterMove {

  0% {
    left: -4%;
    top: 52%;
    opacity: 0;
    transform:
      translateY(-50%)
      rotate(-10deg)
      scale(.96);
  }

  5% {
    opacity: 1;
  }

  18% {
    left: 13%;
    top: 47%;
    transform:
      translateY(-50%)
      rotate(-7deg)
      scale(1);
  }

  34% {
    left: 30%;
    top: 55%;
    transform:
      translateY(-50%)
      rotate(-11deg)
      scale(1);
  }

  51% {
    left: 48%;
    top: 47%;
    transform:
      translateY(-50%)
      rotate(-7deg)
      scale(1.01);
  }

  68% {
    left: 65%;
    top: 55%;
    transform:
      translateY(-50%)
      rotate(-10deg)
      scale(1);
  }

  85% {
    left: 82%;
    top: 48%;
    transform:
      translateY(-50%)
      rotate(-7deg)
      scale(1);
  }

  96% {
    left: 94%;
    top: 51%;
    opacity: 1;
  }

  100% {
    left: 99%;
    top: 49%;
    opacity: 0;
    transform:
      translateY(-50%)
      rotate(-5deg)
      scale(.98);
  }

}


/* Tiny pen-writing vibration */
.hero--mark
.hero-mark__signature.is-writing
.writer-pen {
  transform-origin: 55% 50%;

  animation:
    finalPenVibration
    .18s
    ease-in-out
    infinite alternate;
}


@keyframes finalPenVibration {

  from {
    transform:
      translateY(-1.5px)
      rotate(-1deg);
  }

  to {
    transform:
      translateY(1.5px)
      rotate(1deg);
  }

}


/* Buttons */
.hero--mark .hero-mark__actions {
  position: relative !important;
  z-index: 7 !important;

  margin-top: 22px !important;

  justify-content: center !important;
}


/* Keep buttons readable on image backgrounds */
.hero--mark .btn--primary {
  background: #111111 !important;
  color: #ffffff !important;
}


.hero--mark .btn--ghost {
  border-color: rgba(255, 255, 255, 0.58) !important;
  color: #ffffff !important;
}


.hero--mark .btn--ghost:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #111111 !important;
}


/* Top left label */
.hero--mark .hero-mark__top-left {
  position: absolute !important;

  top: 7.5% !important;
  left: 4.2% !important;

  z-index: 6 !important;

  font-family: "Bricolage Grotesque", sans-serif !important;
  font-size: clamp(13px, 1.25vw, 19px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;

  letter-spacing: -0.02em !important;

  color: #ffffff !important;
}


/* Vertical PROJECT 2026 */
.hero--mark .hero-mark__project {
  position: absolute !important;

  top: 7% !important;
  right: 3.8% !important;

  z-index: 6 !important;

  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;

  font-family: "IBM Plex Mono", monospace !important;
  font-size: clamp(10px, .95vw, 15px) !important;
  font-weight: 500 !important;

  letter-spacing: .36em !important;

  color: #ffffff !important;
}


/* Bottom right label */
.hero--mark .hero-mark__bottom-right {
  position: absolute !important;

  right: 4.2% !important;
  bottom: 3.2% !important;

  z-index: 6 !important;

  font-family: "Bricolage Grotesque", sans-serif !important;
  font-size: clamp(11px, 1vw, 16px) !important;
  font-weight: 500 !important;

  color: #ffffff !important;
}


/* Responsive */
@media (max-width: 900px) {

  .hero--mark .hero-mark__logo-wrap {
    width: min(760px, 84vw) !important;
    min-height: clamp(145px, 30vw, 280px);
  }


  .hero--mark .hero-mark__signature {
    width: 84vw !important;
  }


  .hero--mark .hero-mark__writer {
    width: clamp(78px, 12vw, 112px) !important;
  }

}


@media (max-width: 640px) {

  .hero--mark .hero-mark__content {
    width: 94vw;
    transform: none !important;
  }


  .hero--mark .hero-mark__logo-wrap {
    width: 88vw !important;
    min-height: 150px;
  }


  .hero--mark .hero-mark__signature {
    width: 92vw !important;
    height: 72px !important;
  }


  .hero--mark .hero-mark__signature-text {
    font-size: clamp(34px, 10vw, 52px) !important;
  }


  .hero--mark .hero-mark__writer {
    width: 72px !important;
  }


  .hero--mark .hero-mark__top-left {
    top: 24px !important;
    left: 18px !important;
  }


  .hero--mark .hero-mark__project {
    top: 22px !important;
    right: 14px !important;
  }


  .hero--mark .hero-mark__bottom-right {
    right: 18px !important;
    bottom: 18px !important;
  }


  .hero--mark .hero-mark__actions {
    margin-top: 18px !important;
  }

}
/* =========================================================
   POWERED BY PEOPLE — HANDWRITING
   ========================================================= */

.hero-mark__signature {
  position: relative;

  width: min(680px, 72vw);
  height: 115px;

  margin-top: -20px;
  margin-bottom: -20px;

  z-index: 10;

  overflow: visible;
}


/* TEXT POSITION */

.hero-mark__signature-line {
  position: absolute;

  top: 50%;
  left: 50%;

  transform:
    translate(-50%, -50%);

  width: max-content;

  white-space: nowrap;

  overflow: visible;
}


/* HANDWRITTEN TEXT */

.hero-mark__signature-text {
  display: inline-block;

  font-family:
    "Caveat",
    "Segoe Print",
    cursive;

  font-size:
    clamp(
      44px,
      4.8vw,
      80px
    );

  font-weight: 500;

  line-height: 1;

  color: #ffffff;

  white-space: nowrap;

  opacity: 0;

  clip-path:
    inset(
      0
      100%
      0
      0
    );

  -webkit-clip-path:
    inset(
      0
      100%
      0
      0
    );
}


/* WRITING ANIMATION */

.hero-mark__signature.is-writing
.hero-mark__signature-text {

  opacity: 1;

  animation:
    writePoweredByPeople
    3.8s
    steps(38, end)
    forwards;
}


@keyframes writePoweredByPeople {

  0% {

    clip-path:
      inset(
        0
        100%
        0
        0
      );

    -webkit-clip-path:
      inset(
        0
        100%
        0
        0
      );

  }


  100% {

    clip-path:
      inset(
        0
        0
        0
        0
      );

    -webkit-clip-path:
      inset(
        0
        0
        0
        0
      );

  }

}


/* =========================================================
   3D HAND
   ========================================================= */

.hero-mark__writer {

  position: absolute;

  top: 49%;
  left: -4%;

  width:
    clamp(
      110px,
      9vw,
      160px
    );

  z-index: 20;

  opacity: 0;

  pointer-events: none;

  transform:
    translateY(-50%)
    rotate(-9deg);

  will-change:
    left,
    top,
    transform,
    opacity;

}


.hero-mark__writer-svg {

  display: block;

  width: 100%;
  height: auto;

  overflow: visible;

  filter:
    drop-shadow(
      0
      14px
      16px
      rgba(
        0,
        0,
        0,
        .25
      )
    );

}


/* HAND MOVES WITH TEXT */

.hero-mark__signature.is-writing
.hero-mark__writer {

  animation:
    handWritePowered
    3.9s
    cubic-bezier(
      .22,
      .7,
      .25,
      1
    )
    forwards;

}


@keyframes handWritePowered {

  0% {

    left: -3%;

    top: 52%;

    opacity: 0;

    transform:
      translateY(-50%)
      rotate(-11deg);

  }


  4% {

    opacity: 1;

  }


  15% {

    left: 11%;

    top: 46%;

    transform:
      translateY(-50%)
      rotate(-7deg);

  }


  30% {

    left: 27%;

    top: 55%;

    transform:
      translateY(-50%)
      rotate(-11deg);

  }


  45% {

    left: 43%;

    top: 47%;

    transform:
      translateY(-50%)
      rotate(-7deg);

  }


  60% {

    left: 59%;

    top: 55%;

    transform:
      translateY(-50%)
      rotate(-10deg);

  }


  75% {

    left: 74%;

    top: 47%;

    transform:
      translateY(-50%)
      rotate(-6deg);

  }


  90% {

    left: 88%;

    top: 54%;

  }


  97% {

    left: 96%;

    opacity: 1;

  }


  100% {

    left: 101%;

    opacity: 0;

  }

}


/* PEN MICRO MOVEMENT */

.hero-mark__signature.is-writing
.writer-pen {

  transform-origin:
    50%
    50%;

  animation:
    penMicroWrite
    .16s
    ease-in-out
    infinite
    alternate;

}


@keyframes penMicroWrite {

  from {

    transform:
      translateY(-2px)
      rotate(-1deg);

  }


  to {

    transform:
      translateY(2px)
      rotate(1deg);

  }

}


/* =========================================================
   MOVE BUTTONS UP
   ========================================================= */

.hero--mark
.hero-mark__actions {

  margin-top: 0 !important;

  transform:
    translateY(-15px);

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (
  max-width: 768px
) {

  .hero-mark__signature {

    width: 88vw;

    height: 85px;

    margin-top: -10px;

    margin-bottom: -8px;

  }


  .hero-mark__signature-text {

    font-size:
      clamp(
        35px,
        9vw,
        52px
      );

  }


  .hero-mark__writer {

    width: 82px;

  }


  .hero--mark
  .hero-mark__actions {

    transform:
      translateY(-8px);

  }

}
/* =========================================================
   FINAL FIX — POWERED BY PEOPLE HANDWRITING
   MUST BE THE LAST BLOCK IN style.css
   ========================================================= */


/* =========================================
   SIGNATURE CONTAINER
   ========================================= */

.hero--mark .hero-mark__signature {
  position: relative !important;

  width: min(680px, 72vw) !important;
  height: 105px !important;

  margin-top: -35px !important;
  margin-bottom: -15px !important;

  z-index: 20 !important;

  overflow: visible !important;
}


/* =========================================
   TEXT POSITION
   ========================================= */

.hero--mark .hero-mark__signature-line {
  position: absolute !important;

  top: 50% !important;
  left: 50% !important;

  transform:
    translate(-50%, -50%) !important;

  width: max-content !important;

  overflow: visible !important;

  white-space: nowrap !important;
}


/* =========================================
   TEXT DEFAULT STATE
   ========================================= */

.hero--mark .hero-mark__signature-text {
  display: inline-block !important;

  width: auto !important;

  overflow: visible !important;

  font-family:
    "Caveat",
    "Segoe Print",
    cursive !important;

  font-size:
    clamp(
      44px,
      4.8vw,
      80px
    ) !important;

  font-weight: 500 !important;

  line-height: 1 !important;

  white-space: nowrap !important;

  color: #ffffff !important;

  opacity: 0 !important;
}


/* =========================================
   WRITING STATE
   ========================================= */

.hero--mark
.hero-mark__signature.is-writing
.hero-mark__signature-text {

  opacity: 1 !important;

  /*
    نشيل الـ clip-path القديم
    لأنه كان معمول !important
    ومانع الـ animation
  */

  clip-path: none !important;

  -webkit-clip-path: none !important;


  /*
    نستخدم mask بدل clip-path
    عشان الجملة تظهر كأنها بتتكتب
  */

  -webkit-mask-image:
    linear-gradient(
      #000 0 0
    );

  mask-image:
    linear-gradient(
      #000 0 0
    );


  -webkit-mask-repeat:
    no-repeat;

  mask-repeat:
    no-repeat;


  -webkit-mask-position:
    left center;

  mask-position:
    left center;


  -webkit-mask-size:
    0% 100%;

  mask-size:
    0% 100%;


  animation:
    poweredByPeopleWritingFixed
    3.8s
    steps(40, end)
    forwards !important;

}


/* =========================================
   TEXT WRITING ANIMATION
   ========================================= */

@keyframes poweredByPeopleWritingFixed {

  0% {

    -webkit-mask-size:
      0% 100%;

    mask-size:
      0% 100%;

  }


  100% {

    -webkit-mask-size:
      100% 100%;

    mask-size:
      100% 100%;

  }

}


/* =========================================================
   3D HAND
   ========================================================= */

.hero--mark .hero-mark__writer {

  position: absolute !important;

  left: -5% !important;
  top: 48% !important;

  width:
    clamp(
      110px,
      9vw,
      160px
    ) !important;

  height: auto !important;

  z-index: 30 !important;

  opacity: 0 !important;

  pointer-events: none !important;

  transform:
    translateY(-50%)
    rotate(-9deg) !important;

}


/* =========================================
   HAND START
   ========================================= */

.hero--mark
.hero-mark__signature.is-writing
.hero-mark__writer {

  opacity: 1 !important;

  animation:
    poweredHandWritingFixed
    3.9s
    cubic-bezier(
      .22,
      .7,
      .25,
      1
    )
    forwards !important;

}


/*
  بنحرك margin-left
  بدل left لأن الـ left القديم
  عندك عليه !important
*/

@keyframes poweredHandWritingFixed {

  0% {

    margin-left: 0%;

    margin-top: 3px;

  }


  15% {

    margin-left: 14%;

    margin-top: -7px;

  }


  30% {

    margin-left: 29%;

    margin-top: 5px;

  }


  45% {

    margin-left: 44%;

    margin-top: -6px;

  }


  60% {

    margin-left: 60%;

    margin-top: 5px;

  }


  75% {

    margin-left: 75%;

    margin-top: -6px;

  }


  90% {

    margin-left: 90%;

    margin-top: 4px;

  }


  100% {

    margin-left: 102%;

    margin-top: 0;

  }

}


/* =========================================
   HIDE HAND AFTER WRITING
   ========================================= */

.hero--mark
.hero-mark__signature.is-done
.hero-mark__writer {

  opacity: 0 !important;

}


/* =========================================
   PEN MICRO MOVEMENT
   ========================================= */

.hero--mark
.hero-mark__signature.is-writing
.writer-pen {

  transform-origin:
    center center;

  animation:
    poweredPenMovementFixed
    0.16s
    ease-in-out
    infinite
    alternate !important;

}


@keyframes poweredPenMovementFixed {

  from {

    transform:
      translateY(-2px)
      rotate(-1deg);

  }


  to {

    transform:
      translateY(2px)
      rotate(1deg);

  }

}


/* =========================================================
   BUTTONS — MOVE UP
   ========================================================= */

.hero--mark
.hero-mark__actions {

  margin-top: 0 !important;

  transform:
    translateY(-28px) !important;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (
  max-width: 768px
) {

  .hero--mark
  .hero-mark__signature {

    width: 88vw !important;

    height: 80px !important;

    margin-top: -20px !important;

  }


  .hero--mark
  .hero-mark__signature-text {

    font-size:
      clamp(
        34px,
        9vw,
        52px
      ) !important;

  }


  .hero--mark
  .hero-mark__writer {

    width: 82px !important;

  }


  .hero--mark
  .hero-mark__actions {

    transform:
      translateY(-15px) !important;

  }

}
/* =========================================================
   REAL 3D HAND IMPROVEMENT
   ========================================================= */

.hero--mark .hero-mark__writer {
  width: clamp(130px, 10vw, 175px) !important;
  z-index: 35 !important;
  transform:
    translateY(-50%)
    rotate(-10deg)
    scale(1) !important;
}

.hero--mark .hero-mark__writer-svg {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  overflow: visible !important;
  filter: drop-shadow(0 16px 18px rgba(0,0,0,.22));
}

/* subtle whole hand movement */
.hero--mark .hero-mark__signature.is-writing .hero-mark__writer-svg {
  animation: handRealisticTilt 0.45s ease-in-out infinite alternate;
}

@keyframes handRealisticTilt {
  from {
    transform: rotate(-1.2deg) translateY(-1px);
  }
  to {
    transform: rotate(1.2deg) translateY(1px);
  }
}

/* pen micro vibration */
.hero--mark .hero-mark__signature.is-writing .writer-pen {
  transform-origin: 72% 44%;
  animation: penNibReal 0.14s ease-in-out infinite alternate !important;
}

@keyframes penNibReal {
  from {
    transform: translateY(-1.3px) rotate(-1deg);
  }
  to {
    transform: translateY(1.8px) rotate(1deg);
  }
}
/* ==========================================================================
   FIXED RIGHT-SIDE LABEL AFTER FIRST HERO — FINAL OVERRIDE
   In the first hero: PROJECT 2026 stays in place.
   After the first hero ends: POWERED BY PEOPLE appears in the exact same place
   and stays fixed while scrolling through all following sections.
   ========================================================================== */

.post-hero-powered-label {
  position: fixed !important;

  top: 7% !important;
  right: 3.8% !important;

  z-index: 9997 !important;

  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;

  font-family: "IBM Plex Mono", monospace !important;
  font-size: clamp(10px, .95vw, 15px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;

  letter-spacing: .36em !important;

  color: #ffffff !important;

  opacity: 0 !important;
  visibility: hidden !important;

  pointer-events: none !important;

  transform: translateZ(0);

  transition:
    opacity .28s ease,
    visibility .28s ease !important;
}


/* Shown by main.js after the first hero has completely finished */
.post-hero-powered-label.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
}


/* Keep PROJECT 2026 visible only inside the first hero */
.hero--mark .hero-mark__project {
  opacity: 1 !important;
  visibility: visible !important;
}


/* Mobile: same position logic as PROJECT 2026 */
@media (max-width: 640px) {

  .post-hero-powered-label {
    top: 22px !important;
    right: 14px !important;

    font-size: 10px !important;
    letter-spacing: .32em !important;
  }

}
/* =========================================================
   POWERED BY PEOPLE — DYNAMIC COLOR
   ========================================================= */

.post-hero-powered-label.is-on-light {
  color: #16140f !important;
}

.post-hero-powered-label.is-on-dark {
  color: #ffffff !important;
}
/* =========================================================
   LOGO WORK SECTION — TEXT
   ========================================================= */

.logo-work-copy {
  position: absolute;
  inset: 0;

  z-index: 10;

  pointer-events: none;

  color: #ffffff;
}


/* =========================================================
   POWERED BY PEOPLE — TOP LEFT
   ========================================================= */

.logo-work-powered {
  position: absolute;

  top: 8%;
  left: 4.5%;

  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(13px, 1.25vw, 21px);
  font-weight: 500;

  line-height: 1;
}


/* =========================================================
   SELECTED WORK — BOTTOM LEFT
   ========================================================= */

.logo-work-selected {
  position: absolute;

  left: 3%;
  bottom: 4%;

  z-index: 12;
}


/* EST. © 2012 */

.logo-work-meta {
  display: flex;
  align-items: center;

  gap: clamp(28px, 3vw, 55px);

  margin-left: 8px;
  margin-bottom: 12px;

  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(18px, 2vw, 34px);
  font-weight: 500;

  line-height: 1;
}


.logo-work-copyright {
  display: flex;
  align-items: center;
  justify-content: center;

  width: clamp(42px, 4vw, 72px);
  height: clamp(42px, 4vw, 72px);

  border: 4px solid #ffffff;
  border-radius: 50%;

  font-size: clamp(25px, 2.5vw, 44px);
}


/* BIG TITLE */

.logo-work-selected h2 {
  margin: 0;

  display: flex;
  flex-direction: column;

   gap: 20px;

  font-family: "Arial Black", "Helvetica Neue", sans-serif;

  font-size: clamp(70px, 10.5vw, 200px);
  font-weight: 900;

  line-height: 0.72;

  letter-spacing: -0.075em;

  color: #ffffff;
}


.logo-work-selected h2 span {
  display: block;
  white-space: nowrap;
}


/* =========================================================
   PROJECT 2026 — RIGHT SIDE
   ========================================================= */

.logo-work-project {
  position: absolute;

  top: 8%;
  right: 4%;

  writing-mode: vertical-rl;
  text-orientation: mixed;

  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(10px, 0.9vw, 15px);
  font-weight: 500;

  letter-spacing: 0.35em;

  color: #ffffff;
}


/* =========================================================
   BOTTOM RIGHT
   ========================================================= */

.logo-work-tagline {
  position: absolute;

  right: 4%;
  bottom: 5%;

  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(11px, 1.1vw, 18px);
  font-weight: 500;

  color: #ffffff;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

  .logo-work-powered {
    top: 25px;
    left: 20px;
  }

  .logo-work-selected {
    left: 18px;
    bottom: 35px;
  }

  .logo-work-selected h2 {
    font-size: clamp(55px, 18vw, 100px);
    line-height: 0.78;
  }

  .logo-work-meta {
    gap: 20px;
    font-size: 16px;
  }

  .logo-work-copyright {
    width: 40px;
    height: 40px;

    border-width: 2px;

    font-size: 25px;
  }

  .logo-work-project {
    right: 14px;
    top: 25px;
  }

  .logo-work-tagline {
    right: 18px;
    bottom: 15px;

    font-size: 9px;
  }

}


/* ==========================================================================
   VISION & MISSION — CINEMATIC STACKED PANELS
   ========================================================================== */

.vision-mission {
  position: relative;

  width: 100%;
  height: 100vh;
  height: 100svh;

  overflow: hidden;

  background: #f5f2eb;
  color: #16140f;

  z-index: 3;

  isolation: isolate;
}


/* =========================================================
   ALL PANELS
   ========================================================= */

.vision-mission__panel {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  background: #f5f2eb;

  overflow: hidden;
}


/* FIRST PANEL IS ALREADY VISIBLE */

.vision-mission__panel--intro {
  z-index: 1;
}

.vision-mission__panel--vision {
  z-index: 2;
}

.vision-mission__panel--mission {
  z-index: 3;
}

.vision-mission__panel--core {
  z-index: 4;
}


/* =========================================================
   INNER
   ========================================================= */

.vision-mission__panel-inner {
  position: relative;

  width: 100%;
  height: 100%;

  padding:
    clamp(80px, 8vw, 140px)
    clamp(24px, 5.5vw, 100px);

}


/* ==========================================================================
   PANEL 01 — OUR DIRECTION
   ========================================================================== */

.vision-mission__panel--intro
.vision-mission__panel-inner {

  display: grid;

  grid-template-columns:
    minmax(150px, .55fr)
    minmax(400px, 1.45fr);

  gap:
    clamp(50px, 8vw, 150px);

  align-items: start;

}


.vision-mission__eyebrow {

  padding-top: 12px;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    clamp(
      11px,
      .82vw,
      14px
    );

  font-weight: 500;

  letter-spacing:
    .24em;

  color:
    rgba(
      22,
      20,
      15,
      .52
    );

}


.vision-mission__intro-title {

  max-width:
    18ch;

  font-family:
    "Bricolage Grotesque",
    sans-serif;

  font-size:
    clamp(
      48px,
      5vw,
      90px
    );

  font-weight:
    500;

  line-height:
    .98;

  letter-spacing:
    -.055em;

  color:
    #16140f;

}


/* ==========================================================================
   VISION + MISSION PANELS
   ========================================================================== */

.vision-mission__panel--vision
.vision-mission__panel-inner,

.vision-mission__panel--mission
.vision-mission__panel-inner,

.vision-mission__panel--core
.vision-mission__panel-inner {

  display: grid;

  grid-template-columns:
    120px
    1fr;

  align-items:
    center;

  border-top:
    1px solid
    rgba(
      22,
      20,
      15,
      .18
    );

}


.vision-mission__number {

  position: absolute;

  top:
    clamp(
      70px,
      7vw,
      120px
    );

  left:
    clamp(
      24px,
      5.5vw,
      100px
    );

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    13px;

  letter-spacing:
    .15em;

  color:
    rgba(
      22,
      20,
      15,
      .46
    );

}


.vision-mission__main {

  grid-column:
    2;

  width:
    100%;

}


.vision-mission__label {

  display:
    block;

  margin-bottom:
    15px;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    12px;

  letter-spacing:
    .28em;

  color:
    rgba(
      22,
      20,
      15,
      .55
    );

}


.vision-mission__title {

  margin:
    0;

  font-family:
    "Arial Black",
    "Helvetica Neue",
    sans-serif;

  font-size:
    clamp(
      100px,
      16vw,
      300px
    );

  font-weight:
    900;

  line-height:
    .72;

  letter-spacing:
    -.085em;

  color:
    #16140f;

}


.vision-mission__copy {

  max-width:
    38ch;

  margin-top:
    clamp(
      45px,
      6vw,
      90px
    );

  margin-left:
    auto;

  font-family:
    "Inter",
    sans-serif;

  font-size:
    clamp(
      16px,
      1.3vw,
      21px
    );

  line-height:
    1.5;

  color:
    rgba(
      22,
      20,
      15,
      .76
    );

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (
  max-width: 768px
) {

  .vision-mission__panel-inner {

    padding:
      80px
      20px
      50px;

  }


  .vision-mission__panel--intro
  .vision-mission__panel-inner {

    display:
      flex;

    flex-direction:
      column;

    gap:
      50px;

  }


  .vision-mission__intro-title {

    font-size:
      clamp(
        42px,
        11vw,
        68px
      );

  }


.vision-mission__panel--vision
.vision-mission__panel-inner,

.vision-mission__panel--mission
.vision-mission__panel-inner,

.vision-mission__panel--core
.vision-mission__panel-inner {
  display: block;
}


  .vision-mission__number {

    top:
      40px;

    left:
      20px;

  }


  .vision-mission__main {

    position:
      absolute;

    left:
      20px;

    right:
      20px;

    bottom:
      70px;

  }


  .vision-mission__title {

    font-size:
      clamp(
        76px,
        25vw,
        130px
      );

  }


  .vision-mission__copy {

    margin-top:
      40px;

    margin-left:
      0;

  }

}
/* ==========================================================================
   CORE VALUES — FINAL AUTHORITATIVE BLOCK
   Keep this block at the very end of style.css
   ========================================================================== */

.vision-mission__main--core {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(420px, 1.08fr)
    minmax(420px, 0.92fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: center;

  width: 100%;
  height: 100%;
}


/* LEFT SIDE */

.core-values__heading {
  position: relative;
  z-index: 2;
}

.vision-mission__panel--core .vision-mission__title {
  max-width: 5.4ch;

  font-size: clamp(86px, 11.5vw, 210px);
  line-height: 0.76;

  white-space: normal;
}


/* RIGHT SIDE */

.core-values__stage {
  position: relative;

  width: 100%;

  height:
    clamp(
      460px,
      62vh,
      680px
    );

  overflow: hidden;

  z-index: 10;
}


/* EACH VALUE */

.core-value {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;

  opacity: 0;
  visibility: hidden;

  transform: translate3d(0, 70px, 0);

  pointer-events: none;

  will-change:
    transform,
    opacity;
}

.core-value__number {
  display: block;

  margin-bottom: 22px;

  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 500;

  letter-spacing: 0.18em;

  color: rgba(22, 20, 15, 0.42);
}

.core-value h3 {
  margin: 0;

  max-width: 11ch;

  font-family:
    "Bricolage Grotesque",
    sans-serif;

  font-size:
    clamp(
      46px,
      5vw,
      88px
    );

  font-weight: 600;

  line-height: .9;

  letter-spacing: -.055em;

  color: #16140f;

  text-wrap: balance;
}


/* MOBILE */

@media (max-width: 900px) {

  .vision-mission__main--core {
    position: absolute;

    left: 20px;
    right: 20px;
    top: 110px;
    bottom: 36px;

    display: block;

    width: auto;
    height: auto;
  }

  .vision-mission__panel--core .vision-mission__title {
    max-width: 6ch;

    font-size: clamp(58px, 17vw, 100px);
  }

  .core-values__stage {
    height: min(34vh, 300px);

    margin-top: 34px;
  }

  .core-value h3 {
    max-width: 13ch;

    font-size: clamp(36px, 10vw, 62px);
  }

}
/* =========================================================
   FLOATING IMAGES ABOVE VISION / MISSION
   WITHOUT BREAKING THE PANELS
   ========================================================= */

.floating-images-stream {
  z-index: 200 !important;
}

/* Keep the section itself normal */
.vision-mission {
  z-index: 3 !important;
}

/* DO NOT CHANGE PANEL Z-INDEX */

.vision-mission__panel--intro {
  z-index: 1 !important;
}

.vision-mission__panel--vision {
  z-index: 2 !important;
}

.vision-mission__panel--mission {
  z-index: 3 !important;
}

.vision-mission__panel--core {
  z-index: 4 !important;
}