/* ═══════════════════════════════════════════════════════════════════
   ALL IN MEDIA — responsive.css
   Full responsive overrides — mobile-first corrections
   Breakpoints:
     xs  : max-width 480px   (small phones)
     sm  : max-width 600px   (phones)
     md  : max-width 900px   (tablets / large phone)
     lg  : max-width 1100px  (small laptops / landscape tablet)
     xl+ : min-width 1400px  (large desktops)
═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   GLOBAL / BASE
───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

body {
  overflow-x: hidden;
  width: 100%;
  min-height: 100dvh;
}

/* Hide custom cursor on touch devices */
@media (hover: none) {
  #cur-dot,
  #cur-ring { display: none !important; }
  body { cursor: auto; }
  .btn,
  .svc-card,
  .work-item,
  .sn-item,
  #back-top { cursor: pointer; }
}

/* ─────────────────────────────────────────────────────────────────
   PROGRESS BAR — always on top
───────────────────────────────────────────────────────────────── */
#progress-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 10001;
}


/* ═══════════════════════════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════════════════════════ */
#nav {
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 12px;
}


.nav-logo-img {
  height: clamp(36px, vw, 72px) !important;
  width: 223px !important;
  max-width: none !important;
  display: block !important;
  object-fit: contain !important;
}
/* Nav CTA button — hide on tiny screens */
@media (max-width: 480px) {
  #nav .btn.btn-sm {
    display: none;
  }
}

/* Desktop nav padding */
@media (min-width: 1101px) {
  #nav {
    padding: 22px 56px;
  }
}

/* Tablet — smaller logo */
@media (max-width: 900px) {
  #nav { padding: 14px 20px; }
  
  .nav-menu { display: none; }
  .nav-cta-desktop { display: none; }
  .nav-toggle { display: flex; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE / TABLET — FULL-SCREEN NAV PANEL (#mobileNavPanel)
 
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .mobile-nav-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 4.5vw, 26px);
    position: fixed;
    inset: 0;
    padding: 90px 24px 48px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(7, 7, 7, .97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
    z-index: 600;   /* #nav (z-index 500)  */
  }

  .mobile-nav-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity .35s ease, transform .35s ease;
  }

  .mnp-link {
    font-family: var(--f-mono);
    text-transform: uppercase;
    font-size: clamp(16px, 5.5vw, 20px);
    letter-spacing: 3px;
    color: var(--text);
    flex-shrink: 0;
  }

  .mnp-cta {
    margin-top: 8px;
    flex-shrink: 0;
  }
}

/* Landscape / short-height phones — konjam tighter spacing */
@media (max-width: 900px) and (max-height: 560px) {
  .mobile-nav-panel { gap: 12px; padding: 72px 24px 32px; }
  .mnp-link { font-size: 16px; }
}

/* Body scroll lock while mobile menu is open (JS toggles this class) */
body.nav-open-lock {
  overflow: hidden;
}


body.nav-open-lock #nav {
  transform: translateY(0) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════════════ */
#hero {
  padding: clamp(64px, 18vw, 700px) 24px clamp(48px, 6vw, 64px);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}


@media (max-width: 900px) {
  #hero {
    height: auto !important;
    min-height: 100dvh;
    padding-top: clamp(96px, 22vw, 160px);
  }
}

@media (min-width: 1101px) {
  #hero {
    padding: 700px 0px 64px 56px;
  }
}

/* Hero title — fluid font so it never overflows */
.hero-title {
  font-size: clamp(36px, 9vw, 115px);
}
.hero-word {
  font-size: clamp(22px, 8.2vw, 80px) !important;
  line-height: 1.05;
  overflow: hidden;
  display: block;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* Badge */
.hero-badge {
  font-size: clamp(9px, 2vw, 10px);
  padding-top: 20px;
}

/* Bottom row */
.hero-bottom {
  flex-direction: row;
  align-items: flex-end;
  gap: 20px;
  margin-top: 32px;
}

.hero-desc {
  font-size: clamp(15px, 1.8vw, 17px);
  max-width: 100%;
}

/* Hero visual — responsive sizes */
.hero-visual {
  right: clamp(16px, 5vw, 130px);
  width: clamp(140px, 28vw, 460px);
  height: clamp(140px, 28vw, 460px);
}

/* Scroll cue & bg num hidden on small screens */
@media (max-width: 768px) {
  .scroll-cue  { display: none; }
  .hero-bg-num { display: none; }
}

/* Phone layouts */
@media (max-width: 900px) {
  .hero-visual {
    width: clamp(100px, 24vw, 220px);
    height: clamp(100px, 24vw, 220px);
    right: 12px;
  }
}

@media (max-width: 600px) {
  #hero {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 40px;
  }

  .hero-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  
  .hero-visual {
    display: flex;
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: clamp(120px, 38vw, 170px);
    height: clamp(120px, 38vw, 170px);
    margin: 0 auto 20px;
  }
}

@media (max-width: 480px) {
  .hero-word {
    letter-spacing: 0.5px;
  }

  .hero-badge {
    letter-spacing: 1.5px;
    font-size: 8px;
  }
}

/* ── ≤360px — small phones: tighten letter-spacing and let the longest
   line ("Strategy. Production.") wrap onto two lines instead of
   shrinking to an unreadable size. The base clamp() floor (22px) still
   applies, so nothing gets smaller than that. ── */
@media (max-width: 360px) {
  .hero-word {
    letter-spacing: 0;
    white-space: normal;
  }

  #hero {
    padding-left: 14px;
    padding-right: 14px;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   MARQUEE / CLIENT LOGOS
═══════════════════════════════════════════════════════════════════ */
.marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.marquee-track {
  display: flex;
  width: max-content;  /* let it be as wide as content, not a fixed % */
  animation: scroll 20s linear infinite;
  will-change: transform;
}

.marquee-track img {
  /* Fixed width per logo — scales responsively */
  width: clamp(80px, 11vw, 160px);
  height: clamp(50px, 7vw, 90px);
  flex-shrink: 0;
  padding: 0 8px;
  object-fit: contain;
}

@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Pause on hover / reduced motion */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation-play-state: paused; }
}


/* ═══════════════════════════════════════════════════════════════════
   SERVICES — horizontal pin section
═══════════════════════════════════════════════════════════════════ */
/*.svc-sticky {*/
/*  padding: clamp(24px, 4vw, 60px) clamp(16px, 4vw, 56px) clamp(16px, 3vw, 40px);*/
/*  height: 100vh;*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  overflow: hidden;*/
/*}*/

/*.svc-head { margin-bottom: clamp(20px, 3vw, 40px); }*/

/*.svc-card {*/
/*  flex: 0 0 clamp(240px, 30vw, 360px);*/
/*  padding: clamp(24px, 3vw, 40px) clamp(16px, 2.5vw, 32px);*/
/*}*/

/*.svc-card h3 {*/
/*  font-size: clamp(20px, 2.8vw, 32px);*/
/*}*/

/*@media (max-width: 600px) {*/
/*  .svc-card {*/
/*    flex: 0 0 260px;*/
/*    padding: 20px 18px;*/
/*  }*/
/*  .svc-card h3 { font-size: 20px; }*/
/*  .svc-card p  { font-size: 15px; }*/
/*  .svc-num     { font-size: 52px; }*/
/*}*/

/*@media (max-width: 480px) {*/
/*  .svc-card { flex: 0 0 230px; }*/
/*}*/


/*@media (max-width: 360px) {*/
/*  .svc-card {*/
/*    flex: 0 0 calc(100vw - 32px); */
/*    padding: 20px 16px;*/
/*  }*/
/*  .svc-sticky {*/
/*    padding-left: 14px;*/
/*    padding-right: 14px;*/
/*  }*/
/*}*/

/*@media (max-width: 900px) {*/
/*  .svc-sticky {*/
/*    position: static !important;*/
/*    top: auto !important;*/
/*    height: auto !important;*/
/*    min-height: unset !important;*/
/*    overflow: visible !important;*/
/*  }*/

/*  .svc-track-wrap {*/
/*    flex: none;*/
/*    overflow-x: auto !important;*/
/*    -webkit-overflow-scrolling: touch;*/
/*    scroll-snap-type: x proximity;*/
/*    padding-bottom: 8px;*/
/*  }*/

/*  .svc-track {*/
/*    height: auto !important;*/
/*    transform: none !important;*/
/*    scroll-behavior: smooth;*/
/*  }*/

/*  .svc-card {*/
/*    height: auto;*/
/*    min-height: 260px;*/
/*    scroll-snap-align: start;*/
/*  }*/

/*  .svc-prog-wrap { display: none; }*/
/*}*/







/* ═══════════════════════════════════════════════════════════════════
   FIX 1 — svc-card title font: reduce size + reserve height for
   1 OR 2 line titles so paragraph/number position never shifts.
   Replace your existing ".svc-card h3" rule (in main css) with this.
═══════════════════════════════════════════════════════════════════ */
.svc-card h3 {
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: clamp(18px, 1.8vw, 24px);   /* was 32px fixed — too big for long titles */
  letter-spacing: 0.5px;
  line-height: 1.15;
  min-height: 2.4em;                      /* reserves space for 2 lines so short titles
                                              (1 line) and long titles (2 lines) start
                                              their paragraph at the same Y position */
  display: flex;
  align-items: flex-start;
}

.svc-card p {
  font-size: clamp(14px, 1.3vw, 17px);    /* slightly reduced */
}

.svc-num {
  font-size: clamp(44px, 5vw, 72px);      /* was 72px fixed, too big on tablet */
}

/*
@media (max-width: 900px) {
  .svc-sticky { ... }
  .svc-track-wrap { ... }
  .svc-track { ... }
  .svc-card { ... }
  .svc-prog-wrap { display: none; }
}
*/
/* WITH this (900px → 1100px): */
@media (max-width: 1100px) {
  .svc-sticky {
    position: static !important;
    top: auto !important;
    height: auto !important;
    min-height: unset !important;
    overflow: visible !important;
  }

  .svc-track-wrap {
    flex: none;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 8px;
  }

  .svc-track {
    height: auto !important;
    transform: none !important;
    scroll-behavior: smooth;
  }

  .svc-card {
    height: auto;
    min-height: 220px;          
    scroll-snap-align: start;
  }

  .svc-prog-wrap { display: none; }
}

/* Card width per breakpoint — tune the horizontal-scroll card size */
@media (max-width: 1100px) and (min-width: 901px) {
  .svc-card { flex: 0 0 300px; padding: 28px 24px; }
}

@media (max-width: 900px) {
  .svc-card { flex: 0 0 260px; padding: 20px 18px; }
  .svc-card h3 { font-size: 18px; }
  .svc-card p  { font-size: 14px; }
  .svc-num     { font-size: 46px; }
}

@media (max-width: 480px) {
  .svc-card { flex: 0 0 230px; }
}

@media (max-width: 360px) {
  .svc-card {
    flex: 0 0 calc(100vw - 32px);
    padding: 20px 16px;
  }
  .svc-sticky {
    padding-left: 14px;
    padding-right: 14px;
  }
}



/* ═══════════════════════════════════════════════════════════════════
   STATS
═══════════════════════════════════════════════════════════════════ */
#stats .stats-inner {
  display: flex;
  flex-wrap: wrap;         
  align-items: stretch;
  max-width: 1300px;
  margin: 0 auto;
}

.stat {
  flex: 1 1 140px;        
  padding: clamp(32px, 5vw, 72px) clamp(16px, 3vw, 48px);
  text-align: center;
}

.stat-n {
  font-size: clamp(48px, 9vw, 90px);
  letter-spacing: -1px;
}

.stat-l {
  font-size: clamp(8px, 1.2vw, 10px);
  letter-spacing: 2px;
}

/* Hide vertical dividers when wrapping */
@media (max-width: 900px) {
  .stat-div { display: none; }
  .stat { flex: 1 1 40%; border-bottom: 1px solid var(--border); }
  .stat:last-child,
  .stat:nth-last-child(2) { border-bottom: none; }
}

@media (max-width: 480px) {
  .stat { flex: 1 1 100%; }
  .stat { border-bottom: 1px solid var(--border); }
  .stat:last-child { border-bottom: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   PROCESS
═══════════════════════════════════════════════════════════════════ */
#process {
  padding: clamp(60px, 8vw, 100px) clamp(16px, 4vw, 56px);
}

.proc-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border);
}

.proc-item {
  padding: clamp(28px, 3.5vw, 48px) clamp(20px, 2.5vw, 36px);
  border-right: 1px solid var(--border);
}

.proc-content h3 {
  font-size: clamp(18px, 2vw, 26px);
  margin-bottom: 12px;
}

.proc-content p {
  font-size: clamp(13px, 1.4vw, 16px);
  line-height: 1.65;
}

@media (max-width: 900px) {
  .proc-list {
    grid-template-columns: 1fr 1fr;
  }
  .proc-item:nth-child(2) { border-right: none; }
  .proc-item { border-bottom: 1px solid var(--border); }
  .proc-item:last-child,
  .proc-item:nth-last-child(2) {
    border-bottom: none;
  }
}

@media (max-width: 540px) {
  .proc-list {
    grid-template-columns: 1fr;
  }
  .proc-item {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .proc-item:last-child { border-bottom: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   WORK GRID
═══════════════════════════════════════════════════════════════════ */
#work {
  padding: clamp(60px, 8vw, 120px) clamp(16px, 4vw, 56px);
}

.work-header { margin-bottom: clamp(28px, 4vw, 56px); }

.work-view-all {
  font-size: clamp(9px, 1.2vw, 11px);
}

@media (max-width: 700px) {
  .work-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .work-view-all {
    width: 100%;
    justify-content: center;
  }
}

.work-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: auto auto;
  gap: clamp(8px, 1.5vw, 16px);
}

.wi-bg          { min-height: clamp(200px, 30vw, 320px); }
.wi-tall .wi-bg { min-height: clamp(400px, 60vw, 640px); }

.wi-title {
  font-size: clamp(18px, 2.2vw, 25px);
}

/* Tablet: stack to single column */
@media (max-width: 900px) {
  .work-grid {
    grid-template-columns: 1fr;
  }
  .wi-tall          { grid-row: auto; }
  .wi-tall .wi-bg   { min-height: clamp(280px, 50vw, 480px); }
  .wi-bg            { min-height: clamp(200px, 40vw, 320px); }
  /* Show desc on all cards when single column */
  .work-item:not(.wi-tall) .wi-desc { display: block; }
}

@media (max-width: 600px) {
  #work { padding-left: 16px; padding-right: 16px; }
  .wi-tall .wi-bg { min-height: 300px; }
  .wi-bg          { min-height: 220px; }
  .wi-info        { padding: 20px 16px 20px; }
  .wi-title       { font-size: clamp(16px, 5vw, 22px); }
}


/* ═══════════════════════════════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════════════════════════════ */
#about {
  padding: clamp(60px, 8vw, 120px) clamp(16px, 4vw, 56px);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.about-stmt {
  font-size: clamp(18px, 2.8vw, 42px);
  margin: 20px 0 24px;
}

.about-body {
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.8;
  margin-bottom: 28px;
}

/* Floating cards — fix overflow on small containers */
.about-float-card { max-width: 90%; }
.afc-n            { font-size: clamp(22px, 3vw, 32px); }

@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-img-wrap {
    aspect-ratio: 4 / 3;
  }
  /* Reset translateX for mobile (was 56px, looks odd single-col) */
  #aboutRight {
    transform: translateY(40px);
  }
}

@media (max-width: 600px) {
  #about { padding: 60px 16px; }
  .about-img-wrap { aspect-ratio: 1 / 1; }
  .about-stmt { font-size: clamp(18px, 5vw, 26px); }
}

@media (max-width: 480px) {
  .afc-top  { top: 12px; right: 12px; }
  .afc-bot  { bottom: 48px; left: 12px; }
  .about-img-badge { bottom: 12px; left: 12px; font-size: 8px; }
}


/* ═══════════════════════════════════════════════════════════════════
   CONTACT / CTA
═══════════════════════════════════════════════════════════════════ */
#contact {
  margin: 0 clamp(16px, 4vw, 56px);
}

.cta-wrap {
  padding: clamp(48px, 7vw, 100px) clamp(24px, 6vw, 80px);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-title {
  font-size: clamp(44px, 6vw, 130px);
  line-height: 0.92;
  margin: 20px 0 28px;
}

.cta-sub {
  font-size: clamp(15px, 1.8vw, 18px);
  margin-bottom: 36px;
}

/* Rings — hide largest on mobile, they overflow */
@media (max-width: 600px) {
  .r3 { display: none; }
  .cta-title { font-size: clamp(36px, 11vw, 64px); }
  .cta-sub   { font-size: 14px; }
}

@media (max-width: 480px) {
  .r2, .r3 { display: none; }
  #contact  { margin: 0 12px; }
  .cta-wrap { padding: 40px 20px; }
  .cta-title { font-size: clamp(32px, 12vw, 52px); }
  .btn-lg { padding: 14px 24px; font-size: 11px; }
}


/* ═══════════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════════ */
#footer {
  margin: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 56px) 0;
  padding: 28px 0 36px;
}

.foot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.foot-logo {
  font-size: clamp(12px, 2vw, 16px);
  letter-spacing: 4px;
}

.foot-links {
  display: flex;
  gap: clamp(12px, 2.5vw, 28px);
  flex-wrap: wrap;
}

.foot-links a {
  font-size: clamp(9px, 1.2vw, 10px);
}

.foot-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: clamp(8px, 1.2vw, 10px);
}

@media (max-width: 600px) {
  .foot-top { flex-direction: column; align-items: flex-start; }
  .foot-bottom { flex-direction: column; gap: 4px; }
}


/* ═══════════════════════════════════════════════════════════════════
   SECTION SHARED — label + head fluid sizes
═══════════════════════════════════════════════════════════════════ */
.sec-label {
  font-size: clamp(9px, 1.2vw, 10px);
  letter-spacing: clamp(2px, 0.5vw, 5px);
  margin-bottom: clamp(12px, 2vw, 20px);
}

.sec-head {
  font-size: clamp(36px, 5.5vw, 108px) !important; /* !important needed to beat the unconditional !important in style-allinmedia.css line 463 */
  line-height: 1.02;   /* FIX 3 — was 0.92, clipped tall glyph tops (e.g. "What We Build") */
  padding-top: 6px;    /* FIX 3 */
}


/* ═══════════════════════════════════════════════════════════════════
   SIDE NAV + BACK TO TOP — hidden on mobile/tablet
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  #side-nav { display: none !important; }
}

#back-top {
  bottom: 20px;
  right: 16px;
}

@media (max-width: 480px) {
  #back-top { bottom: 16px; right: 12px; width: 36px; height: 36px; font-size: 14px; }
}


/* ═══════════════════════════════════════════════════════════════════
   PRELOADER — fluid sizes
═══════════════════════════════════════════════════════════════════ */
.pre-counter {
  font-size: clamp(72px, 16vw, 160px);
}

.pre-pct {
  font-size: clamp(22px, 4vw, 48px);
  padding-top: 10px;
}

.pre-bar-wrap {
  width: clamp(120px, 25vw, 160px);
}

.pre-logo {
  font-size: clamp(11px, 2.5vw, 16px);
  letter-spacing: clamp(4px, 1vw, 8px);
}


/* ═══════════════════════════════════════════════════════════════════
   BUTTONS — fluid padding
═══════════════════════════════════════════════════════════════════ */
.btn {
  font-size: clamp(9px, 1.2vw, 11px);
  padding: clamp(9px, 1.2vw, 11px) clamp(16px, 2vw, 22px);
}

.btn-lg {
  padding: clamp(12px, 1.5vw, 16px) clamp(24px, 3.5vw, 36px);
  font-size: clamp(10px, 1.3vw, 12px);
}


/* ═══════════════════════════════════════════════════════════════════
   LARGE DESKTOP (≥ 1400px) — max-width content clamp
═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
  #hero      {
    max-width: 1560px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(56px, 5vw, 120px);
    padding-right: clamp(56px, 5vw, 120px);
  }
  #work,
  #about,
  #process,
  #footer    { max-width: 1560px; margin-left: auto; margin-right: auto; padding-left: clamp(56px, 5vw, 100px); padding-right: clamp(56px, 5vw, 100px); }
  #contact   { max-width: 1560px; margin-left: auto; margin-right: auto; }
  #stats .stats-inner { max-width: 1400px; }

  
  .svc-sticky {
    max-width: 1560px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(56px, 5vw, 100px);
    padding-right: clamp(56px, 5vw, 100px);
  }
}


#services.svc-no-scroll .svc-sticky {
  position: static;
  height: auto;
  overflow: visible;
}
#services.svc-no-scroll .svc-track-wrap {
  overflow: visible;
}
#services.svc-no-scroll .svc-track {
  flex-wrap: wrap;
}


/* ═══════════════════════════════════════════════════════════════════
   REDUCED MOTION — respect OS preference
═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hero-visual-img,
  .hero-visual,
  .pre-scan,
  .marquee-track {
    animation: none !important;
    transition: none !important;
  }

  .glitch-layer { display: none !important; }
}







/* ═══════════════════════════════════════════════════════════════════
   FIX — hardcoded hero padding for 1101–1399px gap
═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1101px) and (max-width: 1399px) {
  #hero {
    padding: clamp(420px, 40vw, 700px) clamp(40px, 4vw, 80px) 64px clamp(40px, 4vw, 56px);
  }
  
  .svc-sticky
 {
    position: sticky;
    top: 0;
    height:92vh;
    overflow: hidden;
    padding: 60px 56px 40px;
    display: flex;
    flex-direction: column;
}
  
  
}

/* ═══════════════════════════════════════════════════════════════════
   ULTRAWIDE / 2K / 4K SCALING
═══════════════════════════════════════════════════════════════════ */

/* 1920 – 2559 */
@media (min-width: 1920px) {
  #hero, #work, #about, #process, #footer, #contact,
  .svc-sticky, #stats .stats-inner {
    max-width: 1720px;
  }
  .hero-visual {
    width: clamp(400px, 24vw, 520px);
    height: clamp(400px, 24vw, 520px);
  }
  
   .svc-sticky
 {
    position: sticky;
    top: 0;
    height: 82vh;
    overflow: hidden;
    padding: 60px 56px 40px;
    display: flex;
    flex-direction: column;
}
  
  

}

/* 2560 – 3439 (QHD) */
@media (min-width: 2560px) {
  #hero, #work, #about, #process, #footer, #contact,
  .svc-sticky, #stats .stats-inner {
    max-width: 1900px;
  }
  .hero-visual {
    width: clamp(460px, 20vw, 580px);
    height: clamp(460px, 20vw, 580px);
  }
  .hero-word { font-size: clamp(60px, 6.5vw, 96px) !important; }
  .sec-head  { font-size: clamp(70px, 6vw, 120px) !important; }
  
     .svc-sticky
 {
    position: sticky;
    top: 0;
    height: 62vh;
    overflow: hidden;
    padding: 60px 56px 40px;
    display: flex;
    flex-direction: column;
}

}

/* 3440 (21:9 ultrawide) — cap width, grow side margins instead of stretching text lines */
@media (min-width: 3440px) {
  #hero, #work, #about, #process, #footer, #contact,
  .svc-sticky, #stats .stats-inner {
    max-width: 2000px;
  }
  .hero-visual { width: 600px; height: 600px; }
  
     .svc-sticky
 {
    position: sticky;
    top: 0;
    height: 35vh;
    overflow: hidden;
    padding: 60px 56px 40px;
    display: flex;
    flex-direction: column;
}

}

/* 3840+ (4K UHD) */
@media (min-width: 3840px) {
  #hero, #work, #about, #process, #footer, #contact,
  .svc-sticky, #stats .stats-inner {
    max-width: 2200px;
  }
  
     .svc-sticky
 {
    position: sticky;
    top: 0;
    height: 35vh;
    overflow: hidden;
    padding: 60px 56px 40px;
    display: flex;
    flex-direction: column;
}
}