/* ═══════════════════════════════════════════════════
   THE SONIC MEDIA — SHARED STYLESHEET
   All pages share this single CSS file
═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   ROOT & RESET
═══════════════════════════════════════════════════ */
:root {
  --orange: #FF5C00;
  --orange-dim: rgba(255,92,0,0.12);
  --orange-glow: 0 0 40px rgba(255,92,0,0.45);
  --black: #080808;
  --black2: #0f0f0f;
  --black3: #161616;
  --white: #F5F0EB;
  --white2: #E8E2DA;
  --gray: #666;
  --gray2: #999;
  --glass: rgba(255,255,255,0.04);
  --glass-b: rgba(255,255,255,0.08);
  --radius: 16px;
  --font-display: 'Bebas Neue', sans-serif;
  --font-heading: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;cursor:none !important;}
html{font-size:16px;}
body{
  font-family:var(--font-body);
  background:var(--black);
  color:var(--white);
  overflow-x:hidden;
  cursor:none;
}
/* ── Touch / Mobile: restore default cursor ── */
@media (hover: none) and (pointer: coarse) {
  *,*::before,*::after { cursor: auto !important; }
  body { cursor: auto; }
  #cursor, #cursor-follower, #cursor-trail, #mouse-glow { display: none !important; }
}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{display:block;max-width:100%;}
button{border:none;background:none;font-family:inherit;}

/* ═══════════════════════════════════════════════════
   PAGE ROUTER
═══════════════════════════════════════════════════ */
.page { display: none; }
.page.active { display: block; }

/* ═══════════════════════════════════════════════════
   CUSTOM CURSOR
═══════════════════════════════════════════════════ */
#cursor {
  position: fixed;
  width: 12px; height: 12px;
  background: var(--orange);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999999;
  transform: translate3d(-50%, -50%, 0);
  transition: transform 0.08s, width 0.2s, height 0.2s, background 0.2s;
  mix-blend-mode: normal;
  will-change: transform;
}
#cursor-follower {
  position: fixed;
  width: 40px; height: 40px;
  border: 1.5px solid rgba(255,92,0,0.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999998;
  transform: translate3d(-50%, -50%, 0);
  transition: all 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
#cursor-trail { position: fixed; pointer-events: none; z-index: 9999997; top: 0; left: 0; width: 100%; height: 100%; }
body:hover #cursor { opacity: 1; }
.cursor-hover #cursor { width: 50px; height: 50px; background: transparent; border: 2px solid var(--orange); mix-blend-mode: normal; }
.cursor-hover #cursor-follower { width: 10px; height: 10px; background: var(--orange); border-color: transparent; }

/* MOUSE GLOW */
#mouse-glow {
  position: fixed;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,92,0,0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: transform 0.25s ease;
  will-change: transform;
}

/* ═══════════════════════════════════════════════════
   SCROLL PROGRESS
═══════════════════════════════════════════════════ */
#sp{
  position:fixed;top:0;left:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--orange),#FFB347);
  z-index:99997;box-shadow:var(--orange-glow);
  transition:width .08s;
}

/* ═══════════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════════ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:9990;
  padding:0 48px;
  display:flex;align-items:center;justify-content:space-between;
  height:72px;
  transition:all .4s ease;
}
nav.stuck,
body.mob-open nav{
  background:rgba(8,8,8,.88);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-left{display:flex;align-items:center;gap:14px;cursor:pointer;}
.nav-logo-img{
  width:38px;height:38px;border-radius:8px;
  background:var(--orange);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:18px;color:#fff;
  flex-shrink:0;
  box-shadow:var(--orange-glow);
}
.nav-brand{
  font-family:var(--font-heading);
  font-size:15px;font-weight:800;letter-spacing:.04em;
  line-height:1.2;
}
.nav-brand small{
  display:block;font-size:9px;font-weight:400;
  letter-spacing:.25em;color:var(--orange);text-transform:uppercase;
}
.nav-links{
  display:flex;align-items:center;gap:4px;
}
.nav-links > li{position:relative;}
.nav-links a, .nav-links button{
  padding:6px 10px;
  font-family:var(--font-heading);
  font-size:10px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(245,240,235,.65);
  border-radius:6px;
  transition:color .25s,background .25s;
  display:flex;align-items:center;gap:5px;
  white-space:nowrap;
}
.nav-links a:hover,.nav-links button:hover{color:var(--white);background:rgba(255,255,255,.05);}
.nav-links .active-link{color:var(--white) !important;}
.has-drop{position:relative;}
.drop-arrow{font-size:9px;transition:transform .25s;}
.has-drop:hover .drop-arrow{transform:rotate(180deg);}
.dropdown{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--black3);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  padding:10px;
  min-width:200px;
  opacity:0;visibility:hidden;
  transform:translateX(-50%) translateY(-8px);
  transition:all .25s ease;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.has-drop:hover .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.dropdown a{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:8px;
  font-size:13px;font-weight:500;letter-spacing:.02em;
  color:rgba(245,240,235,.7);text-transform:none;
  transition:all .2s;
}
.dropdown a:hover{background:rgba(255,92,0,.1);color:var(--orange);}
.drop-icon{font-size:18px;width:30px;text-align:center;}
.nav-cta{
  background:var(--orange);color:#fff !important;
  padding:8px 18px !important;border-radius:50px !important;
  font-size:10px !important;
  font-weight:700 !important;
  box-shadow:0 0 20px rgba(255,92,0,.35);
  transition:all .3s !important;
}
.nav-cta:hover{box-shadow:var(--orange-glow) !important;transform:translateY(-2px);}
/* ─ HAMBURGER ─ */
.ham{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:10px;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  transition:background .25s;
  flex-shrink:0;
}
.ham:hover{background:rgba(255,92,0,.12);border-color:rgba(255,92,0,.3);}
.ham span{
  display:block;width:100%;height:2px;background:var(--white);border-radius:2px;
  transition:all .35s cubic-bezier(.77,0,.175,1);transform-origin:center;
}
/* ham.active — animate to X */
.ham.active{background:rgba(255,92,0,.15);border-color:rgba(255,92,0,.4);}
.ham.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.ham.active span:nth-child(2){opacity:0;transform:scaleX(0);}
.ham.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ─ MOBILE NAV OVERLAY ─ */
.mob-nav{
  position:fixed;inset:0;z-index:9985;
  display:flex;justify-content:flex-end;
  visibility:hidden;
  pointer-events:none;
  overflow:hidden;
}
.mob-nav.open{visibility:visible;pointer-events:all;}
/* Keep logo + brand visible in the top navbar even when the mobile drawer is open */
.nav-left{transition:opacity .25s ease;}
.ham{transition:opacity .25s ease, background .25s, border-color .25s;}

/* Backdrop */
.mob-nav-backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(6px);
  opacity:0;transition:opacity .4s ease;
}
.mob-nav.open .mob-nav-backdrop{opacity:1;}

/* Drawer panel */
.mob-nav-drawer{
  position:relative;z-index:1;
  width:min(320px,88vw);
  height:100%;
  background:var(--black2);
  border-left:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .42s cubic-bezier(.77,0,.175,1);
  overflow:hidden;
  flex-shrink:0;
}
.mob-nav.open .mob-nav-drawer{transform:translateX(0);}

/* Drawer header */
.mob-nav-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;
  border-bottom:1px solid rgba(255,255,255,.07);
  flex-shrink:0;
  min-height:68px;
}
.mob-nav-brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-heading);font-size:13px;font-weight:800;
  letter-spacing:.04em;color:var(--white);
  min-width:0;
}
.mob-nav-brand img{width:30px;height:30px;object-fit:contain;flex-shrink:0;}
.mob-close{
  width:36px;height:36px;border-radius:8px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:#fff;
  transition:all .2s;flex-shrink:0;
}
.mob-close:hover{background:rgba(255,92,0,.15);border-color:rgba(255,92,0,.35);color:var(--orange);}

/* Scrollable body */
.mob-nav-body{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:8px 0 20px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.mob-nav-body::-webkit-scrollbar{display:none;}

/* Section label */
.mob-nav-section-label{
  font-family:var(--font-heading);font-size:9px;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gray);
  padding:14px 20px 6px;
}

/* Primary nav links */
.mob-nav-link{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:12px 20px;
  font-family:var(--font-heading);font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
  color:rgba(245,240,235,.8);background:none;border:none;
  text-align:left;
  transition:color .2s,background .2s,padding .2s;
  position:relative;
  -webkit-tap-highlight-color:transparent;
}
.mob-nav-link::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:0;background:var(--orange);border-radius:0 2px 2px 0;
  transition:height .2s;
}
.mob-nav-link:hover{color:var(--white);background:rgba(255,255,255,.04);}
.mob-nav-link:hover::before{height:60%;}
.mob-nav-link.active-mob{color:var(--orange);background:rgba(255,92,0,.08);}
.mob-nav-link.active-mob::before{height:60%;}
.mob-nav-link-arrow{
  font-size:11px;color:var(--gray);
  transition:transform .3s,color .2s;
  flex-shrink:0;
}
.mob-nav-link:hover .mob-nav-link-arrow{color:var(--orange);transform:translateX(3px);}

/* Services accordion */
.mob-services-toggle{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:12px 20px;
  font-family:var(--font-heading);font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
  color:rgba(245,240,235,.8);background:none;border:none;
  text-align:left;
  transition:color .2s,background .2s;
  position:relative;
  -webkit-tap-highlight-color:transparent;
}
.mob-services-toggle::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:0;background:var(--orange);border-radius:0 2px 2px 0;
  transition:height .2s;
}
.mob-services-toggle:hover,.mob-services-toggle.open{color:var(--white);background:rgba(255,255,255,.04);}
.mob-services-toggle:hover::before,.mob-services-toggle.open::before{height:60%;}
.mob-services-toggle.open{color:var(--orange);}
.mob-acc-icon{
  width:22px;height:22px;border-radius:5px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;color:var(--gray2);flex-shrink:0;
  transition:all .3s;
}
.mob-services-toggle.open .mob-acc-icon{
  background:rgba(255,92,0,.15);border-color:rgba(255,92,0,.35);
  color:var(--orange);transform:rotate(180deg);
}

/* Services submenu */
.mob-services-submenu{
  max-height:0;overflow:hidden;
  transition:max-height .4s cubic-bezier(.4,0,.2,1);
  background:rgba(0,0,0,.25);
  border-top:1px solid transparent;
  border-bottom:1px solid transparent;
}
.mob-services-submenu.open{
  max-height:600px;
  border-color:rgba(255,255,255,.05);
}
.mob-svc-item{
  display:flex;align-items:center;gap:12px;
  width:100%;padding:11px 20px 11px 28px;
  font-family:var(--font-heading);font-size:12px;font-weight:600;
  letter-spacing:.03em;
  color:rgba(245,240,235,.6);background:none;border:none;
  text-align:left;
  transition:color .2s,background .2s,padding .2s;
}
.mob-svc-item:hover{color:var(--orange);background:rgba(255,92,0,.06);padding-left:36px;}
.mob-svc-item-icon{
  font-size:16px;width:28px;height:28px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);border-radius:6px;
}
.mob-svc-all{
  display:flex;align-items:center;gap:12px;
  width:100%;padding:12px 20px 12px 28px;
  font-family:var(--font-heading);font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--orange);background:none;border:none;
  text-align:left;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .2s;
}
.mob-svc-all:hover{background:rgba(255,92,0,.08);}

/* Divider */
.mob-nav-divider{
  height:1px;background:rgba(255,255,255,.06);
  margin:6px 20px;
}

/* CTA button */
.mob-nav-cta{
  margin:14px 20px 8px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 24px;border-radius:50px;
  background:var(--orange);color:#fff;
  font-family:var(--font-heading);font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  border:none;width:calc(100% - 40px);
  box-shadow:0 0 24px rgba(255,92,0,.35);
  transition:all .3s;
  -webkit-tap-highlight-color:transparent;
}
.mob-nav-cta:hover{box-shadow:0 0 40px rgba(255,92,0,.55);transform:translateY(-2px);}

/* Footer inside drawer */
.mob-nav-footer{
  padding:14px 20px;border-top:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
}
.mob-nav-footer-copy{
  font-size:10px;color:var(--gray);letter-spacing:.04em;
}
.mob-nav-footer-copy span{color:var(--orange);}
.mob-nav-socials{display:flex;gap:8px;}
.mob-nav-social{
  width:28px;height:28px;border-radius:6px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;transition:all .2s;
}
.mob-nav-social:hover{background:rgba(255,92,0,.15);border-color:rgba(255,92,0,.3);}

/* ═══════════════════════════════════════════════════
   SECTION COMMON
═══════════════════════════════════════════════════ */
section{position:relative;z-index:2;}
.section-tag{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-heading);font-size:11px;font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:var(--orange);
  margin-bottom:18px;
}
.section-tag::before{content:'';width:28px;height:1.5px;background:var(--orange);}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(48px,6vw,90px);
  letter-spacing:.02em;line-height:.95;
}
.section-title span{color:var(--orange);}
.reveal{opacity:0;transform:translate3d(0,44px,0);transition:opacity 0.8s cubic-bezier(0.22,1,0.36,1),transform 0.8s cubic-bezier(0.22,1,0.36,1);will-change:opacity,transform;}
.reveal.vis{opacity:1;transform:translate3d(0,0,0);}
.reveal-l{opacity:0;transform:translate3d(-48px,0,0);transition:opacity 0.8s cubic-bezier(0.22,1,0.36,1),transform 0.8s cubic-bezier(0.22,1,0.36,1);will-change:opacity,transform;}
.reveal-l.vis{opacity:1;transform:translate3d(0,0,0);}
.reveal-r{opacity:0;transform:translate3d(48px,0,0);transition:opacity 0.8s cubic-bezier(0.22,1,0.36,1),transform 0.8s cubic-bezier(0.22,1,0.36,1);will-change:opacity,transform;}
.reveal-r.vis{opacity:1;transform:translate3d(0,0,0);}
.d1{transition-delay:.10s}.d2{transition-delay:.20s}.d3{transition-delay:.30s}
.d4{transition-delay:.40s}.d5{transition-delay:.50s}.d6{transition-delay:.60s}

/* ═══════════════════════════════════════════════════
   INNER PAGE HERO (used on sub-pages)
═══════════════════════════════════════════════════ */
.inner-hero{
  padding:160px 60px 100px;
  background:var(--black2);
  position:relative;overflow:hidden;
  text-align:center;
}
.inner-hero::before{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:800px;height:400px;
  background:radial-gradient(ellipse,rgba(255,92,0,.1) 0%,transparent 70%);
  pointer-events:none;
}
.inner-hero .section-tag{justify-content:center;}
.inner-hero-h{
  font-family:var(--font-display);
  font-size:clamp(64px,8vw,120px);
  line-height:.92;letter-spacing:.01em;
  margin-bottom:24px;
}
.inner-hero-h span{color:var(--orange);}
.inner-hero-p{
  font-size:17px;line-height:1.75;
  color:rgba(245,240,235,.65);
  max-width:580px;margin:0 auto 44px;
  font-weight:300;
}
.breadcrumb{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-heading);font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--gray);margin-top:20px;
}
.breadcrumb .bc-sep{color:var(--orange);}
.breadcrumb .bc-cur{color:var(--white);}
.breadcrumb a{color:var(--gray);transition:color .25s;}
.breadcrumb a:hover{color:var(--orange);}

/* ═══════════════════════════════════════════════════
   HERO SECTION
═══════════════════════════════════════════════════ */
.hero{
  min-height:100vh;
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;
  overflow:hidden;
  position:relative;
}
.hero-left{
  padding:120px 60px 80px;
  position:relative;z-index:3;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--glass);border:1px solid var(--glass-b);
  backdrop-filter:blur(12px);
  padding:8px 20px;border-radius:50px;
  font-family:var(--font-heading);font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--orange);
  margin-bottom:32px;
  opacity:0;animation:fadeUp .8s .2s forwards;
}
.hero-eyebrow::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:var(--orange);animation:blink 2s infinite;
}
@keyframes blink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,92,0,.4)}50%{opacity:.7;box-shadow:0 0 0 7px rgba(255,92,0,0)}}
.hero-h1{
  font-family:var(--font-display);
  font-size:clamp(58px,7.5vw,112px);
  line-height:.93;letter-spacing:.01em;
  margin-bottom:28px;
  opacity:0;animation:fadeUp 1s .4s forwards;
}
.hero-h1 .or{color:var(--orange);text-shadow:0 0 60px rgba(255,92,0,.4);}
.hero-h1 .line{display:block;overflow:hidden;}
.hero-sub{
  font-size:17px;line-height:1.75;
  color:rgba(245,240,235,.65);
  max-width:480px;margin-bottom:44px;
  opacity:0;animation:fadeUp .8s .7s forwards;
  font-weight:300;
}
.hero-btns{
  display:flex;gap:14px;flex-wrap:wrap;
  opacity:0;animation:fadeUp .8s .9s forwards;
}
.btn-p{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--orange);color:#fff;
  padding:15px 34px;border-radius:50px;
  font-family:var(--font-heading);font-size:14px;font-weight:700;letter-spacing:.04em;
  transition:all .3s;position:relative;overflow:hidden;
  box-shadow:0 0 30px rgba(255,92,0,.4);
}
.btn-p::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transform:translateX(-100%);transition:transform .5s;
}
.btn-p:hover::before{transform:translateX(100%);}
.btn-p:hover{transform:translateY(-3px);box-shadow:0 0 50px rgba(255,92,0,.6);}
.btn-s{
  display:inline-flex;align-items:center;gap:10px;
  background:transparent;border:1px solid rgba(245,240,235,.2);
  color:var(--white);
  padding:15px 34px;border-radius:50px;
  font-family:var(--font-heading);font-size:14px;font-weight:600;letter-spacing:.04em;
  transition:all .3s;backdrop-filter:blur(10px);
}
.btn-s:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-3px);}
.hero-stats{
  display:flex;gap:40px;margin-top:56px;
  opacity:0;animation:fadeUp .8s 1.1s forwards;
}
.hero-stat .num{
  font-family:var(--font-display);font-size:42px;color:var(--orange);
  line-height:1;letter-spacing:.02em;
}
.hero-stat .lbl{
  font-size:12px;color:var(--gray2);letter-spacing:.08em;
  text-transform:uppercase;margin-top:4px;font-weight:400;
}
@keyframes fadeUp{to{opacity:1;transform:translateY(0);}}
.hero-right{
  position:relative;height:100vh;
  display:flex;gap:10px;
  overflow:hidden;
  padding:10px 0;
}
.mstrip{flex:1;display:flex;flex-direction:column;gap:10px;overflow:hidden;}
.mstrip-inner{display:flex;flex-direction:column;gap:10px;animation:stripDown 22s linear infinite;will-change:transform;backface-visibility:hidden;transform:translateZ(0);}
.mstrip:nth-child(2) .mstrip-inner{animation:stripUp 26s linear infinite;}
.mstrip:nth-child(3) .mstrip-inner{animation:stripDown 20s linear infinite;}
.mstrip:nth-child(4) .mstrip-inner{animation:stripUp 28s linear infinite;}
@keyframes stripDown{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(0,-50%,0)}}
@keyframes stripUp{0%{transform:translate3d(0,-50%,0)}100%{transform:translate3d(0,0,0)}}
.mstrip-img{width:100%;aspect-ratio:3/4;border-radius:12px;overflow:hidden;flex-shrink:0;position:relative;transform:translateZ(0);}
.mstrip-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;backface-visibility:hidden;}
.mstrip-img:hover img{transform:scale(1.06);}
.mstrip-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 50%,rgba(8,8,8,.7));border-radius:12px;}
.hero-right::before,.hero-right::after{content:'';position:absolute;left:0;right:0;z-index:4;pointer-events:none;}
.hero-right::before{top:0;height:120px;background:linear-gradient(to bottom,var(--black),transparent);}
.hero-right::after{bottom:0;height:120px;background:linear-gradient(to top,var(--black),transparent);}
.hero-right .side-fade{position:absolute;left:0;top:0;bottom:0;width:60px;background:linear-gradient(to right,var(--black),transparent);z-index:5;pointer-events:none;}
.hero-noise{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px;}
.hero-orb{position:absolute;bottom:-10%;left:30%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(255,92,0,.1) 0%,transparent 70%);pointer-events:none;z-index:1;}
.hero-mobile-bg{display:none;}
.svc-mobile-hero{display:none;}
.hero-scroll{position:absolute;bottom:36px;left:60px;z-index:10;display:flex;align-items:center;gap:14px;opacity:0;animation:fadeUp .8s 1.4s forwards;}
.scroll-line{width:48px;height:1px;background:rgba(245,240,235,.3);position:relative;overflow:hidden;}
.scroll-line::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--orange);animation:scrollPx 2s ease-in-out infinite;}
@keyframes scrollPx{0%{left:-100%}100%{left:100%}}
.scroll-txt{font-family:var(--font-heading);font-size:10px;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:var(--gray);}

/* ═══════════════════════════════════════════════════
   MARQUEE TICKER
═══════════════════════════════════════════════════ */
.ticker{padding:0;overflow:hidden;background:var(--orange);border-top:1px solid rgba(255,255,255,.1);}
.ticker-track{display:flex;align-items:center;padding:14px 0;animation:tickM 18s linear infinite;width:max-content;}
.ticker-item{display:flex;align-items:center;gap:12px;padding:0 32px;white-space:nowrap;font-family:var(--font-heading);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.9);border-right:1px solid rgba(255,255,255,.2);}
.ticker-item .dot{width:5px;height:5px;background:#fff;border-radius:50%;flex-shrink:0;}
@keyframes tickM{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ═══════════════════════════════════════════════════
   VIDEO SECTION
═══════════════════════════════════════════════════ */
.home-video-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--black);
  line-height: 0;
}
.home-video-section video,
.home-video-section iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: none;
}
.home-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8,8,8,0.35) 0%,
    transparent 18%,
    transparent 82%,
    rgba(8,8,8,0.35) 100%
  );
  pointer-events: none;
  z-index: 2;
}


/* ═══════════════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════════════ */
.about{padding:130px 60px;display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center;background:var(--white);color:var(--black);}
.about-visual{position:relative;}
.about-img-wrap{position:relative;width:100%;aspect-ratio:16/10;border-radius:20px;overflow:hidden;}
.about-img-wrap img{width:100%;height:100%;object-fit:cover;}
.about-img-wrap::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 60%,rgba(255,92,0,.15));}
.about-badge-circle{position:absolute;bottom:-24px;right:-24px;width:130px;height:130px;border-radius:50%;background:var(--orange);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 40px rgba(255,92,0,.5);}
.about-badge-circle .n{font-family:var(--font-display);font-size:38px;color:#fff;line-height:1;}
.about-badge-circle .l{font-family:var(--font-heading);font-size:9px;font-weight:600;color:rgba(255,255,255,.85);letter-spacing:.12em;text-transform:uppercase;text-align:center;}
.about-float{position:absolute;top:32px;left:-28px;background:var(--black);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px 18px;display:flex;align-items:center;gap:12px;box-shadow:0 20px 60px rgba(0,0,0,.4);}
.about-float-icon{width:36px;height:36px;background:var(--orange);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;}
.about-float .fl{font-size:10px;color:var(--gray);font-family:var(--font-heading);font-weight:500;}
.about-float .fv{font-size:14px;font-weight:700;color:var(--white);font-family:var(--font-heading);}
.about-section-tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-heading);font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--orange);margin-bottom:20px;}
.about-section-tag::before{content:'';width:28px;height:1.5px;background:var(--orange);}
.about-h2{font-family:var(--font-display);font-size:clamp(44px,5vw,76px);line-height:.95;letter-spacing:.02em;margin-bottom:26px;color:var(--black);}
.about-h2 span{color:var(--orange);}
.about-p{font-size:16px;line-height:1.8;color:#444;margin-bottom:36px;font-weight:300;}
.about-pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px;}
.pill{padding:10px 20px;border-radius:50px;border:1px solid rgba(0,0,0,.12);background:rgba(255,92,0,.06);font-family:var(--font-heading);font-size:12px;font-weight:600;color:#333;letter-spacing:.04em;display:flex;align-items:center;gap:8px;transition:all .3s;}
.pill:hover{background:var(--orange);color:#fff;border-color:var(--orange);}
.pill .pi{font-size:16px;}
.about-btn{display:inline-flex;align-items:center;gap:10px;background:var(--black);color:var(--white);padding:15px 32px;border-radius:50px;font-family:var(--font-heading);font-size:14px;font-weight:700;letter-spacing:.04em;transition:all .3s;}
.about-btn:hover{background:var(--orange);transform:translateY(-3px);box-shadow:0 0 30px rgba(255,92,0,.4);}

/* ═══════════════════════════════════════════════════
   MEET THE CO-FOUNDERS — Cinematic full-screen scroll
═══════════════════════════════════════════════════ */
.founders-cinematic{position:relative;background:var(--black);overflow:hidden;}
.fc-intro{padding:140px 24px 0;text-align:center;}

.fc-panel{
  position:relative;
  height:100vh;height:100dvh;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  overflow:hidden;
  padding:0 60px;
}

/* Ambient orange glows */
.fc-glow{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:0;opacity:.55;}
.fc-glow-1{width:520px;height:520px;background:rgba(255,92,0,.35);top:-10%;right:-8%;}
.fc-glow-2{width:520px;height:520px;background:rgba(255,92,0,.3);bottom:-12%;left:-8%;}

/* Media (photo) */
.fc-media{position:relative;z-index:1;width:38vw;max-width:460px;min-width:320px;aspect-ratio:4/5;height:auto;border-radius:8px;overflow:hidden;will-change:transform;}
.fc-media img{width:100%;height:100%;object-fit:cover;display:block;}
.fc-media-left{grid-column:1;justify-self:start;}
.fc-media-right{grid-column:2;justify-self:end;}

/* Copy */
.fc-copy{position:relative;z-index:1;will-change:transform,opacity;}
.fc-copy-right{grid-column:2;justify-self:start;padding-left:48px;}
.fc-copy-left{grid-column:1;grid-row:1;justify-self:end;text-align:right;padding-right:48px;}
.fc-index{font-family:var(--font-heading);font-size:14px;font-weight:700;letter-spacing:.25em;color:rgba(245,240,235,.35);margin-bottom:18px;}
.fc-role{font-family:var(--font-heading);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-bottom:14px;}
.fc-name{font-family:var(--font-heading);font-size:clamp(48px,7vw,108px);font-weight:800;line-height:.95;letter-spacing:-.02em;color:var(--white);margin-bottom:28px;}
.fc-bio{font-size:17px;line-height:1.8;color:rgba(245,240,235,.6);font-weight:300;max-width:420px;}
.fc-copy-left .fc-bio{margin-left:auto;}

/* Second panel mirrors the grid so photo sits right, copy sits left */
#fcPanel2 .fc-media{grid-column:2;}
#fcPanel2 .fc-copy{grid-column:1;grid-row:1;}

/* Respect reduced-motion: content is fully visible, no slide/parallax */
@media (prefers-reduced-motion: reduce){
  .fc-media,.fc-copy,.fc-glow{opacity:1!important;transform:none!important;}
}


/* ═══════════════════════════════════════════════════
   SERVICES — HOME (Bento Redesign)
═══════════════════════════════════════════════════ */
.services{padding:130px 60px;background:var(--black);position:relative;overflow:hidden;}
.services::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,92,0,.4),transparent);}
.services-bg-glow{position:absolute;top:30%;left:50%;transform:translateX(-50%);width:1000px;height:600px;background:radial-gradient(ellipse,rgba(255,92,0,.05) 0%,transparent 70%);pointer-events:none;}
.services-header{text-align:center;margin-bottom:80px;position:relative;z-index:2;}
.services-header .section-title{color:var(--white);}
.services-header .svc-header-sub{font-size:17px;line-height:1.7;color:rgba(245,240,235,.45);max-width:520px;margin:18px auto 0;font-weight:300;}

/* ── Bento Grid ── */
.svc-bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(220px,auto);gap:16px;position:relative;z-index:2;}

/* Card base */
.svc-b{position:relative;border-radius:24px;overflow:hidden;background:var(--black3);border:1px solid rgba(255,255,255,.06);cursor:pointer;transition:all 0.6s cubic-bezier(0.22,1,0.36,1);display:flex;flex-direction:column;justify-content:flex-end;transform:translateZ(0);backface-visibility:hidden;isolation:isolate;}
.svc-b:hover{border-color:rgba(255,92,0,.45);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,92,0,.12),inset 0 1px 0 rgba(255,255,255,.06);}

/* BG image layer */
.svc-b-img{position:absolute;inset:0;z-index:0;}
.svc-b-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .5s;opacity:.35;backface-visibility:hidden;transform:translateZ(0);}
.svc-b:hover .svc-b-img img{transform:scale(1.08) translateZ(0);opacity:.55;}

/* Gradient overlay */
.svc-b-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,8,.98) 0%,rgba(8,8,8,.6) 50%,rgba(8,8,8,.1) 100%);z-index:1;transition:opacity .4s;}

/* Accent glow on hover */
.svc-b::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 120%,rgba(255,92,0,.18) 0%,transparent 65%);opacity:0;transition:opacity .45s;z-index:1;pointer-events:none;}
.svc-b:hover::after{opacity:1;}

/* Number watermark */
.svc-b-num{position:absolute;top:16px;right:20px;font-family:var(--font-display);font-size:72px;color:rgba(255,92,0,.08);line-height:1;z-index:2;pointer-events:none;transition:color .4s,opacity .4s;}
.svc-b:hover .svc-b-num{color:rgba(255,92,0,.14);}

/* Content */
.svc-b-body{position:relative;z-index:3;padding:28px 30px 30px;}
.svc-b-icon{width:44px;height:44px;border-radius:12px;background:rgba(255,92,0,.1);border:1px solid rgba(255,92,0,.22);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px;transition:background .35s,border-color .35s,transform .35s;}
.svc-b:hover .svc-b-icon{background:rgba(255,92,0,.22);border-color:rgba(255,92,0,.5);transform:scale(1.1);}
.svc-b-title{font-family:var(--font-heading);font-size:18px;font-weight:800;color:var(--white);line-height:1.2;margin-bottom:8px;transition:color .3s;}
.svc-b:hover .svc-b-title{color:var(--orange);}
.svc-b-desc{font-size:13px;line-height:1.65;color:rgba(245,240,235,.45);font-weight:300;max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.16,1,.3,1),opacity .35s;opacity:0;}
.svc-b:hover .svc-b-desc{max-height:80px;opacity:1;}
.svc-b-arrow{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-family:var(--font-heading);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;}
.svc-b:hover .svc-b-arrow{opacity:1;transform:translateY(0);}
.svc-b-arrow-line{width:24px;height:1.5px;background:var(--orange);transition:width .35s;}
.svc-b:hover .svc-b-arrow-line{width:36px;}

/* Featured tag pill */
.svc-b-badge{position:absolute;top:20px;left:20px;z-index:3;padding:5px 12px;border-radius:50px;background:rgba(255,92,0,.15);border:1px solid rgba(255,92,0,.3);font-family:var(--font-heading);font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--orange);backdrop-filter:blur(8px);}

/* Grid layout spans */
.svc-b.b-w3{grid-column:span 3;}
.svc-b.b-w4{grid-column:span 4;}
.svc-b.b-w5{grid-column:span 5;}
.svc-b.b-w6{grid-column:span 6;}
.svc-b.b-w7{grid-column:span 7;}
.svc-b.b-w8{grid-column:span 8;}
.svc-b.b-h2{grid-row:span 2;}

/* Orange accent card */
.svc-b.svc-accent{background:linear-gradient(135deg,rgba(255,92,0,.18),rgba(255,60,0,.08));border-color:rgba(255,92,0,.25);}
.svc-b.svc-accent .svc-b-title{color:var(--orange);}

/* CTA row at bottom */
.svc-bento-cta{text-align:center;margin-top:50px;position:relative;z-index:2;}

/* ── OLD .svc-card kept for Services page ── */
.svc-card{position:relative;border-radius:20px;overflow:hidden;background:var(--black3);border:1px solid rgba(255,255,255,.06);cursor:default;transition:all 0.6s cubic-bezier(0.22,1,0.36,1);display:flex;flex-direction:column;}
.svc-card:hover{transform:translateY(-8px);border-color:rgba(255,92,0,.35);box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,92,0,.1);}
.svc-img{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;flex-shrink:0;}
.svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;display:block;}
.svc-card:hover .svc-img img{transform:scale(1.07);}
.svc-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 30%,rgba(8,8,8,.75));}
.svc-num{position:absolute;top:14px;right:16px;font-family:var(--font-display);font-size:52px;color:rgba(255,92,0,.18);line-height:1;z-index:1;pointer-events:none;letter-spacing:.02em;}
.svc-body{padding:26px 28px 30px;flex:1;display:flex;flex-direction:column;}
.svc-icon{font-size:26px;margin-bottom:12px;width:48px;height:48px;border-radius:12px;background:rgba(255,92,0,.1);border:1px solid rgba(255,92,0,.2);display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s;}
.svc-card:hover .svc-icon{background:rgba(255,92,0,.2);border-color:rgba(255,92,0,.4);}
.svc-title{font-family:var(--font-heading);font-size:17px;font-weight:800;color:var(--white);margin-bottom:8px;line-height:1.2;transition:color .3s;}
.svc-card:hover .svc-title{color:var(--orange);}
.svc-desc{font-size:13px;line-height:1.65;color:rgba(245,240,235,.5);font-weight:300;flex:1;}
.svc-tag{display:inline-flex;align-items:center;gap:6px;margin-top:18px;padding:5px 13px;border-radius:50px;background:rgba(255,92,0,.08);border:1px solid rgba(255,92,0,.18);font-family:var(--font-heading);font-size:10px;font-weight:700;color:var(--orange);letter-spacing:.08em;text-transform:uppercase;width:fit-content;transition:background .3s;}
.svc-card:hover .svc-tag{background:rgba(255,92,0,.16);}
.svc-card.svc-featured{grid-column:span 2;}
.svc-card.svc-featured .svc-img{aspect-ratio:21/9;}
.svc-card.svc-featured .svc-title{font-size:22px;}

/* Responsive bento */
@media(max-width:1023px){
  .svc-b.b-w3,.svc-b.b-w4{grid-column:span 6;}
  .svc-b.b-w5,.svc-b.b-w6,.svc-b.b-w7,.svc-b.b-w8{grid-column:span 12;}
  .svc-b.b-h2{grid-row:span 1;}
}
@media(max-width:700px){
  .services{padding:80px 24px;}
  .svc-b.b-w3,.svc-b.b-w4,.svc-b.b-w5,.svc-b.b-w6,.svc-b.b-w7,.svc-b.b-w8{grid-column:span 12;}
  .svc-b-desc{max-height:80px;opacity:1;}
  .svc-b-arrow{opacity:1;transform:translateY(0);}
}

/* Pricing (Services page) */
.pricing{padding:100px 60px;background:var(--black);}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px;}
.price-card{padding:40px 32px;border-radius:24px;border:1px solid rgba(255,255,255,.07);background:var(--black3);position:relative;transition:all .4s;}
.price-card:hover{transform:translateY(-8px);border-color:rgba(255,92,0,.3);}
.price-card.popular{border-color:var(--orange);background:linear-gradient(135deg,rgba(255,92,0,.08),var(--black3));}
.popular-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--orange);color:#fff;padding:5px 18px;border-radius:50px;font-family:var(--font-heading);font-size:11px;font-weight:700;letter-spacing:.1em;white-space:nowrap;}
.price-tier{font-family:var(--font-heading);font-size:13px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--orange);margin-bottom:16px;}
.price-amt{font-family:var(--font-display);font-size:64px;line-height:1;color:var(--white);margin-bottom:8px;}
.price-amt small{font-size:20px;color:var(--gray);}
.price-period{font-size:12px;color:var(--gray);margin-bottom:28px;}
.price-feats{display:flex;flex-direction:column;gap:12px;margin-bottom:36px;}
.price-feat{display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(245,240,235,.7);}
.price-feat::before{content:'✓';color:var(--orange);font-weight:700;flex-shrink:0;}

/* ═══════════════════════════════════════════════════
   STUDIO
═══════════════════════════════════════════════════ */
.studio{padding:130px 60px;background:var(--black);overflow:hidden;}
.studio-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.studio-content .section-title{margin-bottom:24px;}
.studio-p{font-size:16px;line-height:1.8;color:rgba(245,240,235,.6);margin-bottom:40px;font-weight:300;}
.studio-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:40px;}
.studio-card{padding:24px;border-radius:16px;background:var(--glass);border:1px solid rgba(255,255,255,.05);transition:all .35s;cursor:default;}
.studio-card:hover{border-color:rgba(255,92,0,.3);transform:translateY(-4px);}
.sc-icon{font-size:28px;margin-bottom:14px;}
.sc-title{font-family:var(--font-heading);font-size:14px;font-weight:700;margin-bottom:6px;}
.sc-desc{font-size:12px;color:var(--gray);line-height:1.6;font-weight:300;}
.studio-visual{position:relative;}
.studio-reel{width:100%;aspect-ratio:9/16;border-radius:24px;overflow:hidden;position:relative;background:var(--black3);display:flex;align-items:center;justify-content:center;}
.studio-reel-bg{position:absolute;inset:0;background:linear-gradient(135deg,#0f0f0f 0%,#1a0800 50%,#0f0f0f 100%);}
.reel-play{width:72px;height:72px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;box-shadow:0 0 0 0 rgba(255,92,0,.4);animation:playPulse 2s infinite;position:relative;z-index:2;cursor:pointer;transition:transform .3s;}
.reel-play:hover{transform:scale(1.1);}
@keyframes playPulse{0%{box-shadow:0 0 0 0 rgba(255,92,0,.4)}100%{box-shadow:0 0 0 30px rgba(255,92,0,0)}}
.reel-label{position:absolute;bottom:24px;left:24px;right:24px;font-family:var(--font-heading);font-size:22px;font-weight:800;color:rgba(255,255,255,.9);z-index:2;line-height:1.2;}
.reel-label span{color:var(--orange);}
.reel-tag{position:absolute;top:24px;left:24px;z-index:2;background:rgba(255,92,0,.9);padding:6px 14px;border-radius:50px;font-family:var(--font-heading);font-size:11px;font-weight:700;letter-spacing:.1em;color:#fff;}
.studio-floats{position:absolute;right:-20px;top:20%;display:flex;flex-direction:column;gap:12px;}
.sfloat{background:var(--black3);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:12px 16px;box-shadow:0 10px 40px rgba(0,0,0,.4);min-width:140px;}
.sfloat .sf-n{font-family:var(--font-display);font-size:24px;color:var(--orange);line-height:1;}
.sfloat .sf-l{font-family:var(--font-heading);font-size:10px;color:var(--gray);letter-spacing:.1em;text-transform:uppercase;margin-top:4px;}

/* Studio equipment section */
.studio-equip{padding:100px 60px;background:var(--black2);}
.equip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:60px;}
.equip-card{padding:28px;border-radius:16px;border:1px solid rgba(255,255,255,.06);background:var(--glass);text-align:center;transition:all .3s;}
.equip-card:hover{border-color:rgba(255,92,0,.25);transform:translateY(-5px);}
.equip-icon{font-size:42px;margin-bottom:16px;}
.equip-name{font-family:var(--font-heading);font-size:14px;font-weight:700;margin-bottom:6px;}
.equip-detail{font-size:12px;color:var(--gray);font-weight:300;}

/* ═══════════════════════════════════════════════════
   FEATURED WORK — EDITORIAL LIGHT REDESIGN
   Completely different from services: cream bg,
   horizontal list rows, oversized index numbers,
   B&W photo treatment, ink-stamp aesthetic
═══════════════════════════════════════════════════ */
.casestudies{
  background:#EDE8E1;
  color:#0D0D0D;
  position:relative;
  overflow:hidden;
}

/* ── Top bar strip ── */
.fw-topbar{
  background:#0D0D0D;
  padding:14px 72px;
  display:flex;align-items:center;justify-content:space-between;
}
.fw-topbar-label{
  font-family:var(--font-display);font-size:14px;font-weight:400;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.35);
}
.fw-topbar-count{
  font-family:var(--font-display);font-size:14px;letter-spacing:.15em;
  color:var(--orange);
}

/* ── Section header ── */
.fw-header{
  padding:80px 72px 0;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:40px;
  border-bottom:1px solid rgba(0,0,0,.1);
  padding-bottom:48px;
}
.fw-header-left{}
.fw-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-heading);font-size:10px;font-weight:700;
  letter-spacing:.35em;text-transform:uppercase;color:var(--orange);
  margin-bottom:18px;
}
.fw-eyebrow::before{content:'';width:22px;height:1.5px;background:var(--orange);}
.fw-title{
  font-family:var(--font-display);
  font-size:clamp(48px,5.5vw,88px);
  letter-spacing:.02em;line-height:.92;
  color:#0D0D0D;
}
.fw-title em{
  font-style:normal;
  display:inline-block;
  background:var(--orange);
  color:#fff;
  padding:0 16px 4px;
  line-height:.95;
  transform:rotate(-1.5deg);
  display:inline-block;
}
.fw-header-right{
  display:flex;flex-direction:column;align-items:flex-end;gap:20px;
  padding-bottom:8px;
}
.fw-tagline{
  font-size:15px;line-height:1.8;color:#555;
  font-weight:400;text-align:right;max-width:260px;
  font-family:var(--font-body);
}
.cs-view-all{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-heading);font-size:10px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;
  color:#0D0D0D;
  padding:13px 26px;
  border:1.5px solid #0D0D0D;
  border-radius:0;
  transition:color .3s;
  position:relative;overflow:hidden;
  isolation:isolate;
}
.cs-view-all::before{
  content:'';position:absolute;inset:0;
  background:#0D0D0D;
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.77,0,.175,1);
  z-index:-1;
}
.cs-view-all:hover::before{transform:scaleX(1);}
.cs-view-all:hover{color:#fff;}
.cs-view-all span{position:relative;z-index:1;}

/* ── Fresh Reads: View All — orange border/fill, white text on hover ── */
.fresh-reads-btn { color: var(--orange); border-color: var(--orange); }
.fresh-reads-btn::before { background: var(--orange); }
.fresh-reads-btn:hover { color: #fff; }

/* ── Work list rows ── */
.fw-list{
  display:flex;flex-direction:column;
}

.fw-row{
  display:grid;
  grid-template-columns:80px 1fr 360px 160px;
  align-items:stretch;
  border-bottom:1px solid rgba(0,0,0,.1);
  cursor:pointer;
  position:relative;
  transition:background .35s;
  min-height:160px;
}
.fw-row:hover{background:#fff;}

/* Index number */
.fw-row-num{
  font-family:var(--font-body);
  font-size:11px;font-weight:500;letter-spacing:.14em;
  color:rgba(0,0,0,.28);
  display:flex;align-items:center;
  justify-content:center;
  padding:0;
  border-right:1px solid rgba(0,0,0,.08);
  transition:color .3s;
  flex-shrink:0;
}
.fw-row:hover .fw-row-num{color:var(--orange);}

/* Main info col */
.fw-row-info{
  padding:32px 44px;
  display:flex;flex-direction:column;
  justify-content:center;
  gap:10px;
}
/* Category — small orange label above the title */
.fw-row-cat{
  font-family:var(--font-heading);font-size:15px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--orange);
}
/* Project title — the main heading of each row */
.fw-row-name{
  font-family:var(--font-display);
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight:400;line-height:1.05;
  letter-spacing:.02em;
  color:#0D0D0D;
  transition:color .3s;
}
.fw-row:hover .fw-row-name{color:var(--orange);}
.fw-row-tags{
  display:flex;gap:6px;flex-wrap:wrap;
  margin-top:2px;
}
.fw-row-tag{
  padding:5px 14px;
  border-radius:2px;
  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.1);
  font-family:var(--font-heading);
  font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:rgba(0,0,0,.45);
  transition:all .3s;
}
.fw-row:hover .fw-row-tag{background:rgba(255,92,0,.06);border-color:rgba(255,92,0,.25);color:var(--orange);}

/* Photo col */
.fw-row-photo{
  position:relative;overflow:hidden;
  border-left:1px solid rgba(0,0,0,.08);
  border-right:1px solid rgba(0,0,0,.08);
}
.fw-row-photo img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.1);
  transition:filter .6s ease,transform .7s cubic-bezier(.16,1,.3,1);
  transform:scale(1.05);
}
.fw-row:hover .fw-row-photo img{
  filter:grayscale(0) contrast(1);
  transform:scale(1);
}
/* Orange tint layer that fades on hover */
.fw-row-photo::after{
  content:'';position:absolute;inset:0;
  background:rgba(237,232,225,.55);
  mix-blend-mode:multiply;
  transition:opacity .5s;
}
.fw-row:hover .fw-row-photo::after{opacity:0;}

/* Metric col */
.fw-row-metric{
  padding:36px 28px;
  display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  text-align:center;
  gap:4px;
}
.fw-row-val{
  font-family:var(--font-display);
  font-size:clamp(38px,3.8vw,56px);
  line-height:1;
  color:var(--orange);
  letter-spacing:.02em;
  transition:transform .3s;
}
.fw-row:hover .fw-row-val{transform:scale(1.05);}
.fw-row-lbl{
  font-family:var(--font-heading);
  font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:#888;margin-top:2px;
}
/* Arrow that appears on hover */
.fw-row-arrow{
  font-size:20px;color:var(--orange);
  opacity:0;transform:translateX(-8px);
  transition:all .35s cubic-bezier(.16,1,.3,1) .05s;
  margin-top:12px;
}
.fw-row:hover .fw-row-arrow{opacity:1;transform:translateX(0);}

/* ── Big stat strip ── */
.fw-stat-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(0,0,0,.1);
}
.fw-stat-cell{
  padding:44px 40px;
  border-right:1px solid rgba(0,0,0,.1);
  position:relative;overflow:hidden;
  transition:background .3s;
}
.fw-stat-cell:last-child{border-right:none;}
.fw-stat-cell:hover{background:rgba(255,92,0,.06);}
.fw-stat-cell::before{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:2px;background:var(--orange);
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.fw-stat-cell:hover::before{transform:scaleX(1);}
.fw-stat-big{
  font-family:var(--font-display);
  font-size:clamp(48px,5.5vw,80px);
  line-height:1;color:#0D0D0D;
  letter-spacing:.01em;margin-bottom:10px;
}
.fw-stat-big span{color:var(--orange);}
.fw-stat-label{
  font-family:var(--font-heading);
  font-size:12px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;
  color:#777;
}

/* Responsive */
@media(max-width:1023px){
  .fw-row{grid-template-columns:60px 1fr 260px 130px;}
  .fw-header{padding:60px 40px 40px;}
  .fw-topbar{padding:14px 40px;}
  .fw-stat-strip{grid-template-columns:repeat(2,1fr);}
  .fw-stat-cell:nth-child(2){border-right:none;}
  .fw-stat-cell:nth-child(3){border-top:1px solid rgba(0,0,0,.1);}
}
@media(max-width:900px){
  .fw-header{grid-template-columns:1fr;padding:48px 24px 36px;}
  .fw-header-right{align-items:flex-start;}
  .fw-tagline{text-align:left;}
  .fw-topbar{padding:12px 24px;}
  .fw-row{
    grid-template-columns:48px 1fr;
    grid-template-rows:auto auto;
    min-height:auto;
  }
  .fw-row-photo{
    grid-column:1/3;height:200px;
    border-left:none;border-right:none;
  }
  .fw-row-photo img{position:absolute;}
  .fw-row-metric{
    grid-column:1/3;
    flex-direction:row;justify-content:flex-start;
    padding:16px 24px;
    border-top:1px solid rgba(0,0,0,.08);
    gap:12px;
  }
  .fw-row-arrow{margin-top:0;}
  .fw-stat-strip{grid-template-columns:1fr 1fr;}
  .fw-stat-cell:nth-child(2){border-right:1px solid rgba(0,0,0,.1);}
}

/* ── Full case studies list (dedicated page) ── */
.cs-full-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:20px;}
.cs-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:80px;padding-top:60px;border-top:1px solid rgba(0,0,0,.08);}
.cs-stat-item{text-align:center;}
.cs-stat-num{font-family:var(--font-display);font-size:56px;color:var(--orange);line-height:1;}
.cs-stat-lbl{font-size:12px;color:#666;letter-spacing:.1em;text-transform:uppercase;margin-top:6px;font-family:var(--font-heading);font-weight:600;}

/* Full case studies list (dedicated page) */
.cs-full-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:20px;}
.cs-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:80px;padding-top:60px;border-top:1px solid rgba(0,0,0,.08);}
.cs-stat-item{text-align:center;}
.cs-stat-num{font-family:var(--font-display);font-size:56px;color:var(--orange);line-height:1;}
.cs-stat-lbl{font-size:12px;color:#666;letter-spacing:.1em;text-transform:uppercase;margin-top:6px;font-family:var(--font-heading);font-weight:600;}

/* ═══════════════════════════════════════════════════
   JOURNAL
═══════════════════════════════════════════════════ */
.journal{padding:130px 60px;background:var(--black2);}
.journal-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:60px;}
.journal-header .section-title{color:var(--white);}
.jnl-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:20px;}
#home-casestudies-grid .jcard:nth-child(4){display:none;}
.jcard{border-radius:20px;overflow:hidden;background:var(--black3);border:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;transition:all .35s;}
.jcard:hover{border-color:rgba(255,92,0,.2);transform:translateY(-5px);}
.jcard-img{width:100%;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,rgba(255,92,0,.12),rgba(255,92,0,.03));flex-shrink:0;position:relative;}
.jcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.jcard:hover .jcard-img img{transform:scale(1.07);}
.jcard:first-child .jcard-img{aspect-ratio:16/9;}
.jcard-body{padding:24px;flex:1;display:flex;flex-direction:column;}
.jcard-meta{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.jcard-cat{padding:4px 12px;border-radius:50px;background:rgba(255,92,0,.1);border:1px solid rgba(255,92,0,.2);font-family:var(--font-heading);font-size:10px;font-weight:700;color:var(--orange);letter-spacing:.08em;text-transform:uppercase;}
.jcard-date{font-size:11px;color:var(--gray);font-family:var(--font-heading);font-weight:500;}
.jcard-title{font-family:var(--font-heading);font-size:17px;font-weight:800;line-height:1.3;color:var(--white);margin-bottom:10px;flex:1;}
.jcard:first-child .jcard-title{font-size:22px;}
.jcard-excerpt{font-size:13px;line-height:1.7;color:var(--gray);font-weight:300;margin-bottom:18px;}
.jcard-read{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-heading);font-size:12px;font-weight:700;color:var(--orange);letter-spacing:.06em;text-transform:uppercase;transition:gap .25s;}
.jcard:hover .jcard-read{gap:12px;}

/* Full journal grid (dedicated page) */
.jnl-full-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.jnl-cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:50px;}
.jcat-btn{padding:9px 22px;border-radius:50px;border:1px solid rgba(255,255,255,.1);font-family:var(--font-heading);font-size:12px;font-weight:600;color:var(--gray2);letter-spacing:.06em;text-transform:uppercase;transition:all .3s;background:none;}
.jcat-btn.active,.jcat-btn:hover{background:var(--orange);border-color:var(--orange);color:#fff;}

/* ═══════════════════════════════════════════════════
   FUTURE VISION — PREMIUM REDESIGN
   Tech-forward, terminal-inspired split-screen
═══════════════════════════════════════════════════ */
.future{padding:130px 60px;background:var(--black2);overflow:hidden;position:relative;}
/* Subtle grid background */
.future::before{
  content:'';
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,92,0,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,92,0,.03) 1px, transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
  z-index:0;
}
.future-header{text-align:center;margin-bottom:80px;position:relative;z-index:1;}
.future-header .section-title{font-size:clamp(56px,7vw,100px);}
.future-header-sub{
  font-size:15px;color:rgba(245,240,235,.45);max-width:480px;margin:16px auto 0;
  font-weight:300;line-height:1.7;
}
.future-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  margin-bottom:60px;
  position:relative;z-index:1;
  border:1px solid rgba(255,92,0,.12);
  border-radius:20px;
  overflow:hidden;
  background:rgba(255,92,0,.06);
}
/* Card base — terminal/HUD aesthetic */
.fv-card{
  border-radius:0;
  position:relative;
  overflow:hidden;
  border:none;
  border-right:1px solid rgba(255,92,0,.1);
  border-bottom:1px solid rgba(255,92,0,.1);
  background:var(--black);
  cursor:default;
  transition:all .5s cubic-bezier(.16,1,.3,1);
  transform:translateZ(0);
  backface-visibility:hidden;
}
.fv-card:nth-child(3n){border-right:none;}
.fv-card:nth-last-child(-n+3){border-bottom:none;}
.fv-card:hover{background:rgba(255,92,0,.06);z-index:2;}

/* Top accent bar */
.fv-card::after{
  content:'';
  position:absolute;top:0;left:0;right:100%;height:2px;
  background:linear-gradient(90deg,var(--orange),#FFB347);
  transition:right .5s cubic-bezier(.16,1,.3,1);
  z-index:3;
}
.fv-card:hover::after{right:0;}

.fv-card-img{
  width:100%;
  aspect-ratio:16/8;
  overflow:hidden;
  position:relative;
}
.fv-card-img img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .6s ease;
  display:block;
  backface-visibility:hidden;
  transform:translateZ(0);
  filter:saturate(.7) brightness(.65);
}
.fv-card:hover .fv-card-img img{
  transform:scale(1.06);
  filter:saturate(.9) brightness(.8);
}
.fv-card-img::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 20%,rgba(8,8,8,.85));
}
/* HUD scan-line effect */
.fv-card-img::before{
  content:'';
  position:absolute;inset:0;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,.08) 2px,
    rgba(0,0,0,.08) 4px
  );
  z-index:1;pointer-events:none;
}
.fv-card-body{padding:20px 24px 24px;position:relative;}

/* Card number — HUD style */
.fv-num{
  font-family:var(--font-heading);
  font-size:9px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:var(--orange);opacity:.6;
  position:absolute;top:16px;right:20px;
  /* override old large number style */
}

.fv-icon{font-size:22px;margin-bottom:8px;position:relative;z-index:1;display:block;}
.fv-title{
  font-family:var(--font-heading);font-size:15px;font-weight:800;
  margin-bottom:8px;color:var(--white);position:relative;z-index:1;
  line-height:1.25;letter-spacing:.01em;
}
.fv-desc{
  font-size:12.5px;line-height:1.65;
  color:rgba(245,240,235,.5);font-weight:300;
  position:relative;z-index:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fv-tag{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:12px;padding:4px 10px;border-radius:4px;
  background:rgba(255,92,0,.08);border:1px solid rgba(255,92,0,.18);
  font-family:var(--font-heading);font-size:9px;font-weight:700;
  color:var(--orange);letter-spacing:.1em;text-transform:uppercase;
  position:relative;z-index:1;
}
.fv-tag::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--orange);box-shadow:0 0 6px var(--orange);flex-shrink:0;}

/* Timeline */
.future-timeline{position:relative;border-top:1px solid rgba(255,92,0,.15);padding-top:60px;z-index:1;}
.timeline-line{position:absolute;top:60px;left:0;right:0;height:1px;background:rgba(255,255,255,.06);}
.timeline-prog{position:absolute;top:60px;left:0;height:1px;background:linear-gradient(90deg,var(--orange),transparent);width:60%;}
.timeline-items{display:flex;gap:0;position:relative;}
.ti{flex:1;padding:24px 20px;position:relative;cursor:default;transition:all .3s;}
.ti-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.15);margin-bottom:20px;border:2px solid rgba(255,255,255,.1);transition:all .3s;}
.ti.active .ti-dot,.ti:hover .ti-dot{background:var(--orange);border-color:var(--orange);box-shadow:0 0 12px rgba(255,92,0,.5);}
.ti-year{font-family:var(--font-display);font-size:28px;color:var(--gray);letter-spacing:.04em;margin-bottom:8px;transition:color .3s;}
.ti.active .ti-year,.ti:hover .ti-year{color:var(--orange);}
.ti-label{font-family:var(--font-heading);font-size:13px;font-weight:600;color:var(--gray2);letter-spacing:.04em;margin-bottom:8px;}
.ti-desc{font-size:12px;color:var(--gray);line-height:1.6;font-weight:300;}

/* ═══════════════════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════════════════ */
.testimonials{padding:130px 60px;background:var(--black);overflow:hidden;}
.testimonials-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:70px;}

/* Marquee wrapper */
.testi-marquee-wrap{
  overflow:hidden;
  position:relative;
  /* Fade edges */
  -webkit-mask:linear-gradient(90deg,transparent 0%,black 8%,black 92%,transparent 100%);
  mask:linear-gradient(90deg,transparent 0%,black 8%,black 92%,transparent 100%);
}

/* The actual scrolling track */
.testi-marquee-track{
  display:flex;
  gap:20px;
  width:max-content;
  animation:testiMarq 44s linear infinite;
  will-change:transform;
  backface-visibility:hidden;
  transform:translateZ(0);
}

/* Pause on hover (desktop) */
.testi-marquee-wrap:hover .testi-marquee-track{
  animation-play-state:paused;
}

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

/* Mobile: ensure cards are readable size */
@media(max-width:900px){
  .testi-marquee-track{gap:14px;animation-duration:36s;}
  .tcard{flex:0 0 300px;}
}
.tcard{flex:0 0 380px;background:var(--glass);border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:36px;position:relative;overflow:hidden;transition:all .4s;}
.tcard:hover{border-color:rgba(255,92,0,.2);transform:translateY(-4px);}
.tcard::before{content:'"';position:absolute;top:-10px;right:20px;font-size:140px;font-weight:900;color:rgba(255,92,0,.05);line-height:1;font-family:Georgia,serif;pointer-events:none;}
.tcard-stars{display:flex;gap:4px;margin-bottom:20px;}
.star{color:var(--orange);font-size:16px;}
.tcard-text{font-size:15px;line-height:1.8;color:rgba(245,240,235,.75);font-style:italic;margin-bottom:28px;font-weight:300;}
.tcard-author{display:flex;align-items:center;gap:14px;}
.avatar{width:48px;height:48px;border-radius:50%;background:var(--orange);border:2px solid rgba(255,92,0,.5);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:18px;font-weight:800;color:#fff;flex-shrink:0;}
.author-name{font-family:var(--font-heading);font-size:15px;font-weight:700;}
.author-role{font-size:12px;color:var(--gray);margin-top:2px;}
.testi-result{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:rgba(255,92,0,.08);border:1px solid rgba(255,92,0,.15);border-radius:50px;padding:6px 14px;font-family:var(--font-heading);font-size:11px;font-weight:700;color:var(--orange);letter-spacing:.06em;}

/* ═══════════════════════════════════════════════════
   PORTFOLIO
═══════════════════════════════════════════════════ */
.portfolio{padding:130px 60px;background:var(--black);overflow:hidden;}
.portfolio-header{text-align:center;margin-bottom:50px;}
.portfolio-header .section-title{color:var(--white);}
.portfolio-sub{font-size:18px;line-height:1.8;color:rgba(245,240,235,.6);max-width:560px;margin:20px auto 0;font-weight:300;}
.portfolio-filter{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:50px;}
.pfilt{padding:10px 24px;border-radius:50px;border:1px solid rgba(255,255,255,.1);font-family:var(--font-heading);font-size:12px;font-weight:600;color:var(--gray2);letter-spacing:.06em;text-transform:uppercase;transition:all .3s;}
.pfilt.active,.pfilt:hover{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 0 20px rgba(255,92,0,.35);}
.portfolio-masonry{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:280px;gap:16px;}
.port-item{position:relative;overflow:hidden;border-radius:16px;cursor:pointer;background:var(--black3);}
.port-item.port-tall{grid-row:span 2;}
.port-item.port-wide{grid-column:span 2;}
.port-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;display:block;}
.port-item:hover img{transform:scale(1.07);}
.port-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,8,.95) 0%,rgba(8,8,8,.2) 60%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:24px;transition:all .4s;}
.port-cat{font-family:var(--font-heading);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin-bottom:8px;}
.port-name{font-family:var(--font-heading);font-size:20px;font-weight:800;color:#fff;margin-bottom:8px;line-height:1.25;}
.port-meta{font-size:13px;color:rgba(255,255,255,.65);font-weight:400;}
.port-arrow{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;transform:scale(0) rotate(-45deg);transition:all .4s;}
.port-item:hover .port-arrow{transform:scale(1) rotate(0);}
.port-item.hidden{display:none;}

/* ═══════════════════════════════════════════════════
   BLOGS & NEWSLETTER
═══════════════════════════════════════════════════ */
.blogs-newsletter{display:grid;grid-template-columns:1fr 1fr;min-height:600px;}
.blogs-half{padding:100px 60px;background:var(--black);}
/* ── Fresh Reads: fix text colors on white background ── */
.blogs-half[style*="background:#ffffff"] .blog-item,
.blogs-half[style*="background: #ffffff"] .blog-item {
  border-bottom-color: rgba(0,0,0,.08) !important;
}
.blogs-half[style*="background:#ffffff"] .blog-info .bt,
.blogs-half[style*="background: #ffffff"] .blog-info .bt {
  color: #1a1a1a !important;
}
.blogs-half[style*="background:#ffffff"] .blog-info .bt:hover,
.blogs-half[style*="background: #ffffff"] .blog-item:hover .bt {
  color: var(--orange) !important;
}
.blogs-half[style*="background:#ffffff"] .blog-num,
.blogs-half[style*="background: #ffffff"] .blog-num {
  color: rgba(0,0,0,.18) !important;
}
.blog-list{margin-top:40px;}
.blog-item{display:flex;gap:20px;align-items:flex-start;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer;transition:all .3s;}
.blog-item:hover{padding-left:10px;}
.blog-item:last-child{border-bottom:none;}
.blog-num{font-family:var(--font-display);font-size:22px;color:rgba(255,92,0,.2);line-height:1;flex-shrink:0;width:36px;}
.blog-info .bt{font-family:var(--font-heading);font-size:16px;font-weight:700;margin-bottom:6px;line-height:1.3;color:var(--white);transition:color .3s;}
.blog-item:hover .bt{color:var(--orange);}
.blog-info .bm{font-size:12px;color:var(--gray);display:flex;gap:12px;align-items:center;}
.blog-info .bm span{color:var(--orange);font-weight:600;}
.newsletter-half{padding:100px 60px;background:var(--orange);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;}
.nl-bg{position:absolute;inset:0;pointer-events:none;}
.nl-bg-circle{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.1);}
.nl-bg-circle:nth-child(1){width:300px;height:300px;top:-80px;right:-80px;}
.nl-bg-circle:nth-child(2){width:500px;height:500px;top:-160px;right:-160px;}
.nl-bg-circle:nth-child(3){width:200px;height:200px;bottom:-60px;left:-60px;}
.nl-content{position:relative;z-index:2;}
.nl-tag{font-family:var(--font-heading);font-size:11px;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.nl-tag::before{content:'';width:24px;height:1.5px;background:rgba(255,255,255,.6);}
.nl-h{font-family:var(--font-display);font-size:clamp(36px,4vw,60px);color:#fff;line-height:.95;letter-spacing:.02em;margin-bottom:18px;}
.nl-p{font-size:16px;line-height:1.7;color:rgba(255,255,255,.8);margin-bottom:36px;font-weight:300;}
.nl-count{font-family:var(--font-heading);font-size:12px;font-weight:600;color:rgba(255,255,255,.7);margin-bottom:28px;display:flex;align-items:center;gap:8px;}
.nl-count::before{content:'';width:6px;height:6px;border-radius:50%;background:#fff;}
.nl-form{display:flex;flex-direction:column;gap:12px;}
.nl-input{width:100%;padding:16px 20px;border:1.5px solid rgba(255,255,255,.3);border-radius:12px;background:rgba(255,255,255,.12);color:#fff;font-family:var(--font-heading);font-size:14px;font-weight:500;outline:none;transition:border-color .3s;backdrop-filter:blur(10px);}
.nl-input::placeholder{color:rgba(255,255,255,.5);}
.nl-input:focus{border-color:rgba(255,255,255,.7);}
.nl-submit{width:100%;padding:16px;background:#fff;color:var(--orange);border:none;border-radius:12px;font-family:var(--font-heading);font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;transition:all .3s;cursor:pointer;}
.nl-submit:hover{background:var(--black);color:#fff;transform:translateY(-2px);}
.nl-privacy{font-size:11px;color:rgba(255,255,255,.5);margin-top:10px;text-align:center;}

/* ═══════════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════════ */
.faq-section{padding:130px 60px;background:var(--black);position:relative;overflow:hidden;}
.faq-bg-glow{position:absolute;top:50%;right:-10%;transform:translateY(-50%);width:700px;height:700px;background:radial-gradient(circle,rgba(255,92,0,.06) 0%,transparent 70%);pointer-events:none;}
.faq-section::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,92,0,.3),transparent);}
.faq-inner{display:grid;grid-template-columns:1fr 1.6fr;gap:100px;align-items:start;max-width:1400px;margin:0 auto;position:relative;z-index:2;}
.faq-sub{font-size:16px;line-height:1.8;color:rgba(245,240,235,.55);margin-bottom:44px;font-weight:300;max-width:360px;}
.faq-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.faq-stat{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:22px 20px;transition:border-color .3s,background .3s;}
.faq-stat:hover{background:rgba(255,92,0,.05);border-color:rgba(255,92,0,.2);}
.faq-stat .faq-stat-num{font-family:var(--font-display);font-size:38px;color:var(--orange);line-height:1;letter-spacing:.02em;}
.faq-stat .faq-stat-lbl{font-size:11px;color:var(--gray2);letter-spacing:.12em;text-transform:uppercase;margin-top:6px;font-family:var(--font-heading);font-weight:600;}
.faq-item-pro{border:1px solid rgba(255,255,255,.06);border-radius:14px;margin-bottom:12px;overflow:hidden;transition:border-color .3s,background .3s;background:rgba(255,255,255,.02);}
.faq-item-pro:hover,.faq-item-pro.faq-open{border-color:rgba(255,92,0,.25);background:rgba(255,92,0,.03);}
.faq-item-pro .faq-q-btn{width:100%;display:flex;justify-content:space-between;align-items:center;padding:22px 26px;background:none;border:none;color:var(--white);font-family:var(--font-heading);font-size:15px;font-weight:700;letter-spacing:.02em;text-align:left;cursor:pointer;gap:20px;transition:color .25s;}
.faq-item-pro.faq-open .faq-q-btn{color:var(--orange);}
.faq-q-icon{width:32px;height:32px;border-radius:50%;border:1.5px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .35s;font-size:16px;color:rgba(255,255,255,.5);font-style:normal;}
.faq-item-pro.faq-open .faq-q-icon{border-color:var(--orange);color:var(--orange);background:rgba(255,92,0,.1);transform:rotate(45deg);}
.faq-ans-pro{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(0.4,0,0.2,1);}
.faq-ans-pro p{padding:0 26px 22px;font-size:14.5px;color:rgba(245,240,235,.6);line-height:1.8;font-weight:300;border-top:1px solid rgba(255,255,255,.05);padding-top:16px;margin:0;}

/* ═══════════════════════════════════════════════════
   PERSPECTIVE ZOOM — CTA PRELUDE
═══════════════════════════════════════════════════ */
.cta-zoom-wrapper {
  height: 260vh;
  position: relative;
  z-index: 2;
}
.cta-zoom-container {
  height: 100vh;
  overflow: hidden;
  position: relative;
  perspective: 100vh;
  width: 100vw;
  background: var(--black2);
}
.cta-zoom-heading {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw + 1rem, 7rem);
  line-height: 1;
  letter-spacing: .02em;
  text-align: center;
  opacity: 0.07;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, -2000px);
  white-space: nowrap;
  z-index: 10;
  color: var(--white);
  pointer-events: none;
}
.cta-zoom-heading span { color: var(--orange); }
.czoom-item {
  position: absolute;
  transform-origin: center center;
  max-width: 320px;
  max-height: 320px;
}
.czoom-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
  filter: saturate(0.7) brightness(0.85);
  transition: filter .4s;
}
.czoom-item[data-layer="3"] { opacity: 0.65; z-index: 3; }
.czoom-item[data-layer="2"] { opacity: 0.45; z-index: 2; }
.czoom-item[data-layer="1"] { opacity: 0.22; z-index: 1; }

/* Positions — scattered around viewport */
.czoom-item:nth-child(2)  { left: 14vw;   top: 18%;    width: 12vw;  }
.czoom-item:nth-child(3)  { left: 29%;    top: 8%;    width: 9.5vw; }
.czoom-item:nth-child(4)  { left: 43%;    top: 10%;     width: 12vw;  }
.czoom-item:nth-child(5)  { right: 30%;   top: 9%;     width: 8vw;   }
.czoom-item:nth-child(6)  { right: 6%;    top: 26%;    width: 14vw;  }
.czoom-item:nth-child(7)  { bottom: 35%;  right: 13%;   width: 5vw;   }
.czoom-item:nth-child(8)  { bottom: 12%;  left: 15%;   width: 11vw;  }
.czoom-item:nth-child(9)  { bottom: 22%;  left: 36%;   width: 9vw;   }
.czoom-item:nth-child(10) { bottom: 44%;  left: 6%;    width: 5.5vw; }
.czoom-item:nth-child(11) { bottom: 4%;   right: 14%;  width: 15.5vw;}
.czoom-item:nth-child(12) { bottom: 9%;   right: 37%;  width: 8.5vw; }
.czoom-item:nth-child(13) { right: 3%;    top: 4%;     width: 6.5vw; }

/* ═══════════════════════════════════════════════════
   CTA
═══════════════════════════════════════════════════ */
.cta{padding:140px 60px;background:var(--black2);text-align:center;position:relative;overflow:hidden;}
.cta-bg-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:800px;height:400px;background:radial-gradient(ellipse,rgba(255,92,0,.12) 0%,transparent 70%);pointer-events:none;}
.cta-canvas{position:absolute;inset:0;opacity:.06;pointer-events:none;}
.cta-inner{position:relative;z-index:2;}
.cta-tag{display:inline-flex;align-items:center;gap:10px;background:rgba(255,92,0,.1);border:1px solid rgba(255,92,0,.2);padding:8px 20px;border-radius:50px;font-family:var(--font-heading);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-bottom:28px;}
.cta-h{font-family:var(--font-display);font-size:clamp(56px,8vw,120px);line-height:.9;letter-spacing:.01em;margin-bottom:24px;}
.cta-h span{color:var(--orange);}
.cta-p{font-size:18px;line-height:1.7;color:rgba(245,240,235,.6);max-width:580px;margin:0 auto 50px;font-weight:300;}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:60px;}
.cta-btns .btn-p, .cta-btns .btn-s { font-size: 16px; padding: 18px 44px; }
.cta-cards{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.cta-card{flex:0 0 calc(33.33% - 12px);max-width:280px;border-radius:20px;padding:32px 24px;position:relative;overflow:hidden;cursor:pointer;transition:all .4s cubic-bezier(.16,1,.3,1);text-align:left;}
.cta-card-a{background:linear-gradient(135deg,var(--orange),#FF8C33);box-shadow:0 20px 60px rgba(255,92,0,.25);}
.cta-card-b{background:var(--black3);border:1px solid rgba(255,92,0,.2);}
.cta-card-c{background:linear-gradient(135deg,#1a0800,var(--black));}
.cta-card:hover{transform:translateY(-10px) scale(1.02);}
.cc-icon{font-size:32px;margin-bottom:14px;}
.cc-title{font-family:var(--font-heading);font-size:17px;font-weight:800;margin-bottom:8px;color:var(--white);}
.cta-card-a .cc-title{color:#fff;}
.cc-desc{font-size:13px;color:rgba(245,240,235,.6);line-height:1.6;font-weight:300;}
.cta-card-a .cc-desc{color:rgba(255,255,255,.8);}
.cc-arrow{margin-top:20px;font-size:18px;color:var(--orange);font-weight:700;transition:transform .3s;display:block;}
.cta-card-a .cc-arrow{color:rgba(255,255,255,.8);}
.cta-card:hover .cc-arrow{transform:translateX(6px);}

/* ═══════════════════════════════════════════════════
   CONTACT PAGE
═══════════════════════════════════════════════════ */
.contact-section{padding:100px 60px;background:var(--black);}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start;}
.contact-info{}
.contact-info-title{font-family:var(--font-display);font-size:clamp(36px,4vw,60px);line-height:.95;margin-bottom:24px;}
.contact-info-title span{color:var(--orange);}
.contact-info-p{font-size:15px;line-height:1.8;color:rgba(245,240,235,.6);margin-bottom:48px;font-weight:300;}
.contact-methods{display:flex;flex-direction:column;gap:20px;margin-bottom:48px;}
.contact-method{display:flex;align-items:center;gap:18px;padding:20px 24px;border-radius:16px;border:1px solid rgba(255,255,255,.06);background:var(--glass);transition:all .3s;}
.contact-method:hover{border-color:rgba(255,92,0,.3);background:rgba(255,92,0,.04);}
.cm-icon{width:48px;height:48px;border-radius:12px;background:rgba(255,92,0,.1);border:1px solid rgba(255,92,0,.2);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.cm-lbl{font-family:var(--font-heading);font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gray);margin-bottom:4px;}
.cm-val{font-family:var(--font-heading);font-size:15px;font-weight:700;color:var(--white);}
.contact-form{padding:48px;border-radius:24px;background:var(--black3);border:1px solid rgba(255,255,255,.07);}
.cf-title{font-family:var(--font-heading);font-size:22px;font-weight:800;margin-bottom:8px;}
.cf-sub{font-size:14px;color:var(--gray);margin-bottom:36px;font-weight:300;}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.cf-field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.cf-label{font-family:var(--font-heading);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gray2);}
.cf-input,.cf-select,.cf-textarea{width:100%;padding:14px 18px;border:1.5px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.04);color:var(--white);font-family:var(--font-heading);font-size:14px;outline:none;transition:border-color .3s;resize:none;}
.cf-input::placeholder,.cf-textarea::placeholder{color:rgba(245,240,235,.3);}
.cf-input:focus,.cf-textarea:focus,.cf-select:focus{border-color:var(--orange);}
.cf-select{cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23FF5C00' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;}
.cf-select option{background:#161616;color:#F5F0EB;}
.cf-textarea{min-height:140px;}
.cf-submit{width:100%;padding:16px;background:var(--orange);color:#fff;border:none;border-radius:12px;font-family:var(--font-heading);font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:all .3s;margin-top:8px;}
.cf-submit:hover{background:linear-gradient(135deg,var(--orange),#FF8C33);transform:translateY(-2px);box-shadow:0 0 30px rgba(255,92,0,.5);}

/* Map / Location block */
.contact-map{margin-top:80px;border-radius:24px;overflow:hidden;height:320px;background:var(--black3);border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;position:relative;}
.contact-map-inner{text-align:center;z-index:2;}
.contact-map-pin{font-size:52px;margin-bottom:14px;}
.contact-map-city{font-family:var(--font-display);font-size:36px;color:var(--orange);}
.contact-map-country{font-size:13px;color:var(--gray);letter-spacing:.15em;text-transform:uppercase;font-family:var(--font-heading);font-weight:600;}
.contact-map-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,92,0,.08),transparent 70%);}

/* ═══════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════ */
footer{background:var(--black);border-top:1px solid rgba(255,255,255,.05);padding:90px 60px 40px;}
.footer-bar{overflow:hidden;border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04);padding:28px 0;margin-bottom:60px;}
.footer-bar-track{display:flex;align-items:center;animation:tickM 20s linear infinite;width:max-content;}
.footer-bar-item{display:flex;align-items:center;gap:24px;padding:0 40px;white-space:nowrap;font-family:var(--font-display);font-size:36px;letter-spacing:.04em;color:#ffffff;-webkit-text-stroke:0;}
.footer-bar-item .hl{color:var(--orange);-webkit-text-stroke:0;}
.footer-bar-item .sep{color:var(--orange);font-size:20px;-webkit-text-stroke:0;}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px;margin-bottom:70px;}
.footer-logo{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.footer-logo-mark{width:44px;height:44px;border-radius:10px;background:var(--orange);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:20px;color:#fff;box-shadow:0 0 20px rgba(255,92,0,.3);}
.footer-logo-name{font-family:var(--font-heading);font-size:17px;font-weight:800;line-height:1.2;}
.footer-logo-name small{display:block;font-size:9px;font-weight:400;letter-spacing:.22em;color:var(--orange);text-transform:uppercase;}
.footer-desc{font-size:14px;line-height:1.8;color:var(--gray);max-width:280px;margin-bottom:28px;font-weight:300;}
.footer-socials{display:flex;gap:10px;}
.fsoc{width:38px;height:38px;border-radius:50%;background:var(--glass);border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--gray);transition:all .3s;text-decoration:none;}
.fsoc:hover{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 0 15px rgba(255,92,0,.4);}
.footer-col-title{font-family:var(--font-heading);font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:24px;color:var(--white);}
.footer-links{display:flex;flex-direction:column;gap:12px;}
.footer-links a,.footer-links button{font-size:14px;color:var(--gray);font-weight:300;transition:all .3s;display:flex;align-items:center;gap:8px;background:none;border:none;text-align:left;cursor:pointer;font-family:var(--font-body);}
.footer-links a:hover,.footer-links button:hover{color:var(--orange);padding-left:6px;}
.footer-links a::before,.footer-links button::before{content:'→';font-size:12px;color:var(--orange);opacity:0;transition:opacity .3s;}
.footer-links a:hover::before,.footer-links button:hover::before{opacity:1;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.05);padding-top:28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
.footer-copy{font-size:13px;color:var(--gray);font-weight:300;}
.footer-copy span{color:var(--orange);}
.footer-bl{display:flex;gap:24px;padding-right:100px;}
.footer-bl a{font-size:13px;color:var(--gray);font-weight:300;transition:color .3s;}
.footer-bl a:hover{color:var(--orange);}

/* WhatsApp */
.wa-float{position:fixed;bottom:28px;right:28px;z-index:9980;width:60px;height:60px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 28px rgba(37,211,102,.45),0 2px 8px rgba(0,0,0,.25);animation:waFloat 3s ease-in-out infinite;transition:transform .3s,box-shadow .3s;text-decoration:none;}
.wa-float:hover{animation-play-state:paused;transform:scale(1.13);box-shadow:0 10px 36px rgba(37,211,102,.6),0 4px 12px rgba(0,0,0,.3);}
.wa-float svg{display:block;width:32px;height:32px;}
@keyframes waFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.email-float{position:fixed;bottom:100px;right:28px;z-index:9980;width:60px;height:60px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 28px rgba(255,92,0,.45),0 2px 8px rgba(0,0,0,.25);animation:emailFloat 3.5s ease-in-out infinite;transition:transform .3s,box-shadow .3s;text-decoration:none;}
.email-float:hover{animation-play-state:paused;transform:scale(1.13);box-shadow:0 10px 36px rgba(255,92,0,.65),0 4px 12px rgba(0,0,0,.3);}
.email-float svg{display:block;width:28px;height:28px;}
@keyframes emailFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */
@media(max-width:1023px){
  .hero{grid-template-columns:1fr;}
  .hero-right{display:none;}
  .hero-left{padding:140px 40px 100px;}
  .about{grid-template-columns:1fr;padding:80px 40px;gap:60px;}
  .studio-inner{grid-template-columns:1fr;}
  .future-grid{grid-template-columns:1fr 1fr;}
  .footer-top{grid-template-columns:1fr 1fr;gap:40px;}
  .fc-panel{grid-template-columns:1fr;grid-template-rows:auto auto;height:auto;min-height:100vh;min-height:100dvh;padding:140px 40px 80px;gap:36px;text-align:center;justify-items:center;}
  .fc-media,#fcPanel2 .fc-media{grid-column:1;justify-self:center;width:100%;max-width:420px;min-width:0;aspect-ratio:4/5;height:auto;}
  .fc-copy,#fcPanel2 .fc-copy,.fc-copy-right,.fc-copy-left{grid-column:1;grid-row:2;justify-self:center;text-align:center;padding:0;max-width:520px;}
  .fc-copy-left .fc-bio{margin-left:auto;margin-right:auto;}
  .equip-grid{grid-template-columns:repeat(2,1fr);}
  .cs-full-grid{grid-template-columns:repeat(2,1fr);}
  .contact-grid{grid-template-columns:1fr;gap:50px;}
}
@media(max-width:900px){
  nav{padding:0 24px;}
  .nav-links{display:none;}
  .ham{display:flex;}
  .hero-left{padding:110px 24px 80px;}
  .about{padding:80px 24px;}
  .services{padding:80px 24px;}
  .studio{padding:80px 24px;}
  .future{padding:80px 24px;}
  .testimonials{padding:80px 24px;}
  .casestudies{padding:80px 24px;}
  .journal{padding:80px 24px;}
  .blogs-half,.newsletter-half{padding:70px 24px;}
  .cta{padding:100px 24px;}
  footer{padding:60px 24px 30px;}
  .future-grid{grid-template-columns:1fr;}
  .tcard{flex:0 0 calc(100% - 0px);}
  .jnl-grid{grid-template-columns:1fr;}
  .jnl-full-grid{grid-template-columns:1fr 1fr;}
  .blogs-newsletter{grid-template-columns:1fr;}
  .cs-grid{grid-template-columns:1fr;}
  .cs-item:first-child{grid-row:auto;}
  .faq-inner{grid-template-columns:1fr;}
  .faq-section{padding:80px 40px;}
  .inner-hero{padding:130px 40px 80px;}
  .contact-section{padding:80px 24px;}
  /* Swap Map/Form order on mobile: form first, map+info second */
  .contact-form{order:1;}
  .contact-info{order:2;}
  .services-grid{grid-template-columns:1fr 1fr;}
  .svc-card.svc-featured{grid-column:span 1;}
  .pricing-grid{grid-template-columns:1fr;}
  .studio-equip,.pricing{padding:80px 24px;}
  .fc-panel{padding:120px 24px 60px;}
  .cs-stat-row{grid-template-columns:1fr 1fr;}
}
@media(max-width:600px){
  .hero-h1{font-size:56px;}
  .hero-stats{flex-wrap:wrap;gap:24px;}
  .cta-card{flex:0 0 100%;max-width:100%;}
  .cta-h{font-size:52px;}
  .services-grid{grid-template-columns:1fr;}
  .svc-card.svc-featured{grid-column:span 1;}.svc-card.svc-featured .svc-img{aspect-ratio:16/9;}
  .portfolio-masonry{grid-template-columns:1fr;grid-auto-rows:260px;}
  .port-item.port-tall{grid-row:span 1;}
  .port-item.port-wide{grid-column:span 1;}
  .fc-name{font-size:clamp(38px,11vw,56px);}
  .equip-grid{grid-template-columns:1fr 1fr;}
  .jnl-full-grid{grid-template-columns:1fr;}
  .cs-full-grid{grid-template-columns:1fr;}
  .cf-row{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;}
  .inner-hero{padding:120px 24px 60px;}
}

/* ═══════════════════════════════════════════════════
   HOME COVERFLOW SLIDER
═══════════════════════════════════════════════════ */
.home-coverflow-section {
  background: var(--black);
  padding-top: 0;
  overflow: hidden;
}
.hcf-header {
  text-align: center;
  padding: 60px 24px 0;
}
.hcf-sub {
  font-family: var(--font-body);
  font-size: 15px;
  color: rgba(245,240,235,.5);
  margin-top: 14px;
  font-weight: 300;
  letter-spacing: .02em;
}
/* Scroll-pinned wrapper — gives the scroll length */
.hcf-scroll-wrapper {
  height: 3200px;
  position: relative;
  margin-top: 0;
}
.hcf-gallery {
  width: 100%;
  height: 100vh;
  background: var(--black);
  position: sticky;
  top: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* The card list */
.hcf-list {
  width: 20rem;
  height: 26rem;
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}
/* Individual card outer */
.hcf-card {
  width: 20rem;
  height: 26rem;
  position: absolute;
}
.hcf-card-inner {
  height: 100%;
  width: 100%;
  transition: transform 0.1s ease;
}
.hcf-card:hover .hcf-card-inner { transform: translateY(-2%); }
/* Card face */
.hcf-card-face {
  background: var(--black3);
  overflow: hidden;
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 12px;
}
.hcf-card-face img {
  position: absolute;
  height: 100%;
  width: 100%;
  inset: 0;
  object-fit: cover;
  transform: scale(1.1);
}
.hcf-card-info {
  position: absolute;
  inset: 0;
  padding-top: 19rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: linear-gradient(to top, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0.25) 50%, transparent 100%);
}
.hcf-card-cat {
  color: var(--orange);
  text-transform: uppercase;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  font-weight: 700;
  width: 100%;
  text-align: center;
}
.hcf-card-title {
  padding: 0.3rem 0.75rem 2.5rem;
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.2rem;
  text-align: center;
  width: 100%;
  margin: 0;
  line-height: 1.25;
}
/* Glow overlay on card face */
.hcf-card-overlay {
  position: absolute;
  z-index: 50;
  height: 100%;
  width: 100%;
  inset: 0;
}
/* Reflection */
.hcf-card-reflection {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 2rem;
  left: 0;
  border-radius: 12px;
  overflow: hidden;
  filter: blur(5px);
  transition: 0.2s ease;
  transform: translate3d(0,0,0) rotate(180deg) translate(0,-100%) rotateY(180deg);
}
.hcf-card-reflection .hcf-card-face { clip-path: inset(50% 0 0 0); }
.hcf-card-reflection .hcf-card-info { background: transparent; }
/* Scroll hint pill */
.hcf-scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: .55;
  animation: hcfBounce 2s ease-in-out infinite;
  pointer-events: none;
  z-index: 10;
}
.hcf-scroll-hint span {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--white);
}
.hcf-scroll-hint-arrow {
  width: 22px; height: 22px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(45deg);
}
@keyframes hcfBounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}
@media(max-width:600px){
  .hcf-scroll-wrapper{ height: 2400px; }
}

/* ═══════════════════════════════════════════════════
   SCROLL REVEAL — THOUGHT VESSEL SECTION
═══════════════════════════════════════════════════ */
.tsm-scroll-section {
  position: relative;
  height: 300vh;
  background: var(--black);
}
.tsm-video-wrapper {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;   /* fallback for browsers without dvh support */
  height: 100dvh;  /* true visible viewport — adapts to mobile browser chrome show/hide */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  overflow: hidden;
}
#tsm-vc,
#ab-tsm-vc {
  width: 320px;
  height: 320px;
  overflow: hidden;
  background: var(--black2);
  position: relative;
  border-radius: 16px;
  clip-path: inset(0 0 0 0);
  border: 1px solid rgba(255,92,0,0.18);
}
#tsm-vid,
#ab-tsm-vid {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 0;
}
#tsm-dark-overlay,
#ab-tsm-dark-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0);
  pointer-events: none;
  z-index: 1;
}
.tsm-vid-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(8,8,8,0.55);
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding: 1.4rem 1.5rem 1.6rem;
  clip-path: inset(100% 0 0 0);
  backdrop-filter: blur(8px);
  z-index: 2;
  box-sizing: border-box;
}
.tsm-vid-overlay .tsm-caption {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  transform: translateY(30px);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--orange);
  width: 100%;
  text-align: center;
  font-weight: 700;
  flex-shrink: 0;
}
.tsm-vid-overlay .tsm-ov-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  gap: 8px;
  filter: blur(10px);
  transform: scale(1.1);
  padding: 0 0.5rem;
  width: 100%;
}
.tsm-vid-overlay h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 2rem);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--orange);
  line-height: 1.05;
}
.tsm-vid-overlay p {
  font-size: 0.82rem;
  line-height: 1.6;
  max-width: 24ch;
  margin: 0 auto;
  color: rgba(245,240,235,0.75);
  font-family: var(--font-body);
  font-weight: 300;
}
.tsm-vid-overlay .about-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange);
  color: #fff;
  padding: 9px 20px;
  border-radius: 50px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  transition: all .3s;
  flex-shrink: 0;
  white-space: nowrap;
  margin: 0;
}
.tsm-vid-overlay .about-btn:hover {
  background: #fff;
  color: var(--orange);
}
@media(max-width:600px){
  #tsm-vc, #ab-tsm-vc { width: 72vw; height: 72vw; }
  .tsm-vid-overlay h2 { font-size: 1.5rem; }
  .tsm-vid-overlay p  { font-size: 0.78rem; max-width: 22ch; }
  .tsm-vid-overlay .about-btn { font-size: 0.7rem; padding: 8px 16px; }
  /* Mobile: show the about page video section with optimised height */
  #abTsmScrollSection { display: block !important; }
  #abTsmScrollSection .tsm-scroll-section { height: 220vh; }
}

/* ═══════════════════════════════════════════════════
   FUTURE VISION — PINNED SPLIT-SCREEN MASK REVEAL
═══════════════════════════════════════════════════ */
.fv-container {
  max-width: 1440px;
  padding: 0 2rem;
  margin: 0 auto;
}
.fv-spacer { width: 100%; height: 8vh; }
.fv-arch {
  display: flex;
  gap: 60px;
  justify-content: space-between;
  max-width: 1100px;
  margin-inline: auto;
}
.fv-arch__left {
  display: flex;
  flex-direction: column;
  min-width: 300px;
}
.fv-arch__info {
  max-width: 380px;
  height: 100vh;
  display: grid;
  place-items: center;
}
.fv-header {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.1;
}
.fv-desc {
  color: rgba(245,240,235,0.6);
  font-size: 16px;
  letter-spacing: -0.02em;
  margin-block: 6px 28px;
  line-height: 1.65;
  font-weight: 300;
}
.fv-link {
  text-decoration: none;
  padding: 14px 20px;
  border-radius: 40px;
  display: inline-flex;
  gap: 6px;
  width: fit-content;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.fv-link:hover { opacity: 0.85; transform: translateY(-2px); }
.fv-detail-btn {
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 40px;
  display: inline-flex;
  gap: 6px;
  width: fit-content;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1.5px solid rgba(255,92,0,0.45);
  color: var(--orange);
  background: transparent;
  cursor: pointer;
  margin-left: 10px;
  transition: all 0.25s ease;
}
.fv-detail-btn:hover { background: rgba(255,92,0,0.12); border-color: var(--orange); transform: translateY(-2px); }
/* Future Vision Detail Modal */
#fv-modal-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(12px);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
#fv-modal-overlay.open { display: flex; }
#fv-modal {
  background: var(--black3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  max-width: 780px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  padding: 0;
  box-shadow: 0 40px 120px rgba(0,0,0,0.7);
  animation: modalIn 0.35s cubic-bezier(0.22,1,0.36,1);
}
@keyframes modalIn { from { opacity:0; transform: scale(0.94) translateY(24px); } to { opacity:1; transform: scale(1) translateY(0); } }
#fv-modal-img {
  width: 100%; height: 280px; object-fit: cover;
  border-radius: 24px 24px 0 0;
  display: block;
}
#fv-modal-body { padding: 40px 48px 48px; }
#fv-modal-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-size: 11px; font-weight: 700;
  letter-spacing: .25em; text-transform: uppercase; color: var(--orange);
  margin-bottom: 12px;
}
#fv-modal-tag::before { content:''; width:24px; height:1.5px; background:var(--orange); }
#fv-modal-title {
  font-family: var(--font-display);
  font-size: clamp(32px,4vw,54px);
  letter-spacing: .02em; line-height: .95;
  color: var(--white);
  margin-bottom: 8px;
}
#fv-modal-subtitle {
  font-family: var(--font-heading);
  font-size: 15px; font-weight: 600; color: var(--orange);
  margin-bottom: 24px; opacity: 0.85;
}
#fv-modal-text {
  font-size: 15px; line-height: 1.8; color: rgba(245,240,235,0.7);
  font-weight: 300; white-space: pre-line;
  border-left: 2px solid rgba(255,92,0,0.3);
  padding-left: 20px;
  margin-bottom: 32px;
}
#fv-modal-bullets {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-bottom: 36px;
}
.fv-modal-bullet {
  display: flex; align-items: flex-start; gap: 12px;
  background: rgba(255,92,0,0.07);
  border: 1px solid rgba(255,92,0,0.15);
  border-radius: 12px; padding: 14px 16px;
  font-size: 13px; color: rgba(245,240,235,0.8);
  font-family: var(--font-heading); font-weight: 500;
  line-height: 1.45;
}
.fv-modal-bullet::before {
  content: '→'; color: var(--orange); font-weight: 700; flex-shrink: 0; margin-top: 1px;
}
#fv-modal-close {
  position: absolute; top: 16px; right: 20px;
  background: rgba(255,255,255,0.08); border: none;
  color: var(--white); font-size: 22px; width: 44px; height: 44px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s; font-family: inherit; z-index: 2;
}
#fv-modal-close:hover { background: rgba(255,92,0,0.25); color: var(--orange); }
@media (max-width:600px) {
  #fv-modal-body { padding: 24px 20px 32px; }
  #fv-modal-bullets { grid-template-columns: 1fr; }
  #fv-modal-img { height: 200px; }
}
.fv-arch__right {
  flex-shrink: 1;
  height: 100vh;
  width: 100%;
  max-width: 540px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.fv-img-wrapper {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) translateZ(0);
  height: 420px;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,92,0,0.15);
  backface-visibility: hidden;
  isolation: isolate;
}
.fv-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: clip-path, object-position;
}
@media (max-width: 900px) { .fv-arch { gap: 30px; } }
@media (max-width: 900px) {
  .fv-arch { flex-direction: column; gap: 20px; }
  .fv-arch__left, .fv-arch__right { display: contents; }
  .fv-img-wrapper { position: static; transform: none; height: 280px; margin-bottom: 16px; backface-visibility: hidden; }
  .fv-arch__info { height: auto; padding: 20px 0; }
}
@media (max-width: 560px) {
  .fv-container { padding: 0 16px; }
  .fv-img-wrapper { height: 220px; border-radius: 14px; }
}


/* ═══════════════════════════════════════════════════
   HOME FOOTER — PARALLAX ANIMATION STRIP
═══════════════════════════════════════════════════ */
footer { position: relative; overflow: visible; padding-top: 280px; }
.footer-parallax {
  position: absolute;
  left: 0;
  top: 0;
  height: 280px;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.fp-layer {
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  background-position-y: 100% !important;
  animation: fpScroll 600s linear infinite;
}
.fp-trees   { background-image: url(https://i.ibb.co/nQM4PGJ/arbres.png);      bottom: -60px; animation-duration: 1000s; }
.fp-second  { background-image: url(https://i.ibb.co/J3TjC4W/second-plan.png); animation-duration: 600s; }
.fp-premier { background-image: url(https://i.ibb.co/RQhDWbk/premierplanv3.png); background-position-x: 260px; animation-duration: 500s; }
.fp-moto {
  position: absolute;
  bottom: 55px; left: 50%; margin-left: -250px;
  height: 200px; width: 150px;
  background: url() no-repeat;
  transform-origin: 50% 80%;
  animation: fpMoto 5s linear infinite;
}
.fp-voiture {
  position: absolute;
  bottom: 0; left: 5%; margin-left: 250px;
  height: 114px; width: 206px;
  background: url(https://i.ibb.co/0Qhp4DN/voiture-fumee.gif) no-repeat;
  animation: fpVoiture 1s linear infinite;
}
@keyframes fpScroll  { 0% { background-position-x: 260px; } 100% { background-position-x: -10000vw; } }
@keyframes fpMoto    { 0%{transform:translateY(0) rotate(0)} 5%{transform:translateY(0) rotate(-5deg)} 25%{transform:translateY(50px) rotate(-20deg)} 49%{transform:translateY(0) rotate(-1deg)} 51%{transform:translateY(0) rotate(1deg)} 75%{transform:translateY(50px) rotate(20deg)} 80%{transform:translateY(50px) rotate(0)} 98%{transform:translateY(0) rotate(0)} }
@keyframes fpVoiture { 0%{transform:rotate(0)} 25%{transform:rotate(-5deg)} 50%{transform:rotate(0)} 75%{transform:rotate(5deg)} 100%{transform:rotate(0)} }

/* ═══════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — COMPREHENSIVE OVERHAUL
═══════════════════════════════════════════════════ */

/* ── 480px and below (small phones) ── */
@media(max-width:480px){

  /* Hero */
  .hero-left { padding: 100px 20px 60px; }
  .hero-h1 { font-size: 48px !important; }
  .hero-sub { font-size: 15px; }
  .hero-btns { flex-direction: column; gap: 12px; }
  .hero-btns .btn-p, .hero-btns .btn-s { width: 100%; justify-content: center; padding: 11px 20px; font-size: 12px; }
  .hero-stats { gap: 20px; margin-top: 36px; }
  .hero-stat .num { font-size: 32px; }
  .hero-scroll { left: 20px; bottom: 20px; }

  /* Section common */
  .section-title { font-size: clamp(36px, 10vw, 56px) !important; }
  .inner-hero { padding: 100px 20px 50px; }
  .inner-hero-h { font-size: clamp(44px, 12vw, 80px); }
  .inner-hero-p { font-size: 15px; }

  /* About */
  .about { padding: 60px 20px; gap: 40px; }
  .about-visual { overflow: visible; padding-bottom: 28px; padding-right: 0; }
  .about-badge-circle { width: 100px; height: 100px; bottom: -16px; right: -8px; }
  .about-badge-circle .n { font-size: 28px; }
  .about-float { left: -8px; top: 20px; padding: 10px 14px; }
  .about-h2 { font-size: clamp(36px, 10vw, 56px); }

  /* Services bento */
  .services { padding: 60px 20px; }
  .svc-b { min-height: 180px; }

  /* Studio */
  .studio { padding: 60px 20px; }
  .studio-floats { right: -4px; }

  /* Case studies / Featured work */
  .fw-topbar { padding: 10px 20px; }
  .fw-header { padding: 40px 20px 28px; }
  .fw-row { grid-template-columns: 44px 1fr; }
  .fw-row-info { padding: 20px 16px; }
  .fw-row-name { font-size: 20px; }

  /* Testimonials */
  .testimonials { padding: 60px 20px; }
  .tcard { flex: 0 0 calc(100vw - 40px); }

  /* Journal */
  .journal { padding: 60px 20px; }
  .journal-header { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* Future */
  .future { padding: 60px 20px; }
  .future-grid { grid-template-columns: 1fr 1fr; border-radius:14px; }
  .fv-card:nth-child(2n){border-right:none;}
  .fv-card:nth-child(3n){border-right:1px solid rgba(255,92,0,.1);}
  .timeline-items { flex-direction: column; }
  .ti { padding: 16px 8px; }

  /* Blogs & Newsletter */
  .blogs-newsletter { grid-template-columns: 1fr; min-height: auto; }
  .blogs-half { padding: 60px 20px; }
  .newsletter-half { padding: 60px 20px; }
  .nl-h { font-size: clamp(36px, 10vw, 56px); }

  /* FAQ */
  .faq-section { padding: 60px 20px; }
  .faq-inner { grid-template-columns: 1fr; gap: 40px; }

  /* CTA zoom / perspective section */
  .cta-zoom-wrapper { display: none; } /* too complex for tiny screens */
  .cta { padding: 80px 20px; }
  .cta-h { font-size: clamp(44px, 11vw, 72px); }
  .cta-p { font-size: 15px; }
  .cta-cards { flex-direction: column; }
  .cta-card { flex: 0 0 100%; max-width: 100%; }

  /* Contact */
  .contact-section { padding: 60px 20px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-form { padding: 28px 20px; }
  .cf-row { grid-template-columns: 1fr; }

  /* Footer */
  footer { padding: 60px 20px 30px; padding-top: 220px; }
  .footer-parallax { height: 220px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-bl { flex-wrap: wrap; gap: 16px; }
  .footer-bar-item { font-size: 24px; }

  /* Pricing */
  .pricing { padding: 60px 20px; }
  .pricing-grid { grid-template-columns: 1fr; }

  /* Portfolio */
  .portfolio { padding: 60px 20px; }
  .portfolio-filter { gap: 6px; }
  .pfilt { padding: 8px 16px; font-size: 11px; }
  .portfolio-masonry { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .port-item.port-tall, .port-item.port-wide { grid-row: span 1; grid-column: span 1; }

  /* About pages — founders cinematic */
  .fc-intro { padding: 100px 20px 0; }
  .fc-panel { padding: 90px 20px 56px; gap: 28px; }
  .fc-media,#fcPanel2 .fc-media { border-radius: 6px; width: 78%; max-width: 320px; aspect-ratio: 4/5; height: auto; }
  .fc-name { font-size: clamp(32px,10.5vw,44px); margin-bottom: 16px; }
  .fc-bio { font-size: 14.5px; line-height: 1.65; }
  .fc-glow-1,.fc-glow-2{width:340px;height:340px;filter:blur(80px);}
  .studio-equip { padding: 60px 20px; }
  .equip-grid { grid-template-columns: 1fr 1fr; gap: 14px; }

  /* Stats */
  .cs-stat-row { grid-template-columns: 1fr 1fr; gap: 20px; }
  .fw-stat-strip { grid-template-columns: 1fr 1fr; }
  .fw-stat-cell { padding: 28px 20px; }
  .fw-stat-big { font-size: clamp(36px, 9vw, 56px); }
  .cs-full-grid { grid-template-columns: 1fr; }
  .jnl-full-grid { grid-template-columns: 1fr; }

  /* Future vision split */
  #fv-home-header { padding: 12px 20px; }
  #fv-home-header .section-title { font-size: clamp(18px, 5vw, 28px); }
  .fv-arch { flex-direction: column; gap: 0; }
  .fv-arch__info { height: auto; padding: 20px 0; }
  .fv-img-wrapper { height: 200px; }

  /* Mobile nav improvements - handled by drawer CSS */

  /* Scroll reveal TSM — show on mobile with optimised sizing */
  #tsmScrollSection { display: block !important; }
  #tsmScrollSection .tsm-scroll-section { height: 220vh; }
  #tsm-vc, #ab-tsm-vc { width: 72vw; height: 72vw; }

  /* Home coverflow */
  .hcf-scroll-wrapper { height: 2000px; }
  .hcf-list { width: 18rem; height: 23rem; }
  .hcf-card { width: 18rem; height: 23rem; }

  /* WhatsApp & Email float adjustment */
  .wa-float { width: 52px; height: 52px; bottom: 20px; right: 16px; }
  .wa-float svg { width: 26px; height: 26px; }
  .email-float { width: 52px; height: 52px; bottom: 84px; right: 16px; }
  .email-float svg { width: 22px; height: 22px; }

  /* Scroll progress */
  #sp { height: 3px; }
}

/* ── 768px and below (tablets) ── */
@media(max-width:900px){
  /* Nav */
  nav { padding: 0 20px; height: 64px; }

  /* Hero stats - show on mobile */
  .hero-stats { display: flex !important; flex-wrap: wrap; gap: 20px 32px; margin-top: 40px; }
  .hero-stat .num { font-size: 36px; }

  /* Footer */
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-bl { flex-wrap: wrap; }

  /* Testimonials header */
  .testimonials-header { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 40px; }

  /* Journal header */
  .journal-header { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 40px; }

  /* About floating badge: prevent overflow */
  .about-badge-circle { bottom: -20px; right: -10px; }

  /* About float card: no negative offset on mobile */
  .about-float { left: 12px; top: 12px; }

  /* Studio floats: tuck in */
  .studio-floats { position: static; flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
  .sfloat { min-width: 120px; }

  /* Future home header */
  #fv-home-header { padding: 12px 20px; }

  /* Pricing grid */
  .pricing-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .price-card { padding: 28px 20px; }
  .price-amt { font-size: 48px; }

  /* Contact form */
  .cf-row { grid-template-columns: 1fr; }
  .contact-form { padding: 32px 24px; }

  /* Inner hero */
  .inner-hero { padding: 110px 24px 60px; }
  .inner-hero-h { font-size: clamp(48px, 11vw, 80px); }

  /* Future vision */
  .fv-arch { flex-direction: column; gap: 0; }
  .fv-arch__info { height: auto; padding: 20px 0; }

  /* Mobile nav - drawer (layout managed by drawer CSS, not overridden here) */

  /* Section titles */
  .section-title { font-size: clamp(38px, 8vw, 72px); }
  .fw-title { font-size: clamp(40px, 8vw, 80px); }
}

/* ── 1024px ── */
@media(max-width:1024px){
  /* About badge: prevent overflow */
  .about-badge-circle { right: -10px; }

  /* Timeline items wrap */
  .timeline-items { flex-wrap: wrap; }

  /* Future home header sticky spacing */
  #fv-home-header { top: 64px; }

  /* Navigation padding */
  nav { padding: 0 32px; }
}

/* ── Landscape phones ── */
@media(max-height:500px) and (max-width:900px){
  .hero { min-height: auto; }
  .hero-left { padding-top: 80px; padding-bottom: 40px; }
  .mob-nav-drawer { overflow-y: auto; }
}

/* ── Safe area support (notch phones) ── */
@supports(padding-bottom: env(safe-area-inset-bottom)){
  .wa-float { bottom: calc(20px + env(safe-area-inset-bottom)); }
  .email-float { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .mob-nav-footer { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* ══════════════════════════════════════════════════
   TABLET / iPAD — fills gaps between 768–1100px
   Only properties not already handled above
══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════
   MOBILE SWIPE CAROUSEL — SERVICES SECTION
   Premium showcase carousel: native scroll-snap,
   peeking neighbor cards, scale/opacity parallax
═══════════════════════════════════════════════════ */
.mob-svc-carousel-wrap {
  display: none; /* hidden on desktop */
  flex-direction: column;
  width: 100%;
  padding: 0 0 24px;
  position: relative;
  z-index: 2;
}
.mob-svc-track-outer {
  overflow-x: auto;
  overflow-y: visible;
  width: 100%;
  position: relative;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Side padding = the "peek" amount for first/last card centering.
     Top/bottom padding reserves headroom for the active card's 105%
     scale-up so it never visually overlaps the heading or buttons. */
  padding: 14px 18vw 14px;
}
.mob-svc-track-outer::-webkit-scrollbar { display: none; }
.mob-svc-track {
  display: flex;
  align-items: center;
}
.mob-svc-card {
  /* 64% viewport width, 4:5 aspect → compact premium showcase card */
  flex: 0 0 64vw;
  width: 64vw;
  max-width: 270px;
  aspect-ratio: 4 / 5;
  padding: 0 5px;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  background: transparent;
  border: none;
  /* scale + opacity are set inline by JS as the card moves through center;
     transform-origin centered so neighbors scale evenly. No CSS transition
     here — values are recalculated every scroll frame for 1:1 tracking;
     scroll-snap handles the smooth settle motion. */
  transform-origin: center center;
  will-change: transform, opacity;
}
/* Inner card wrapper — fills the 4:5 box, image covers it fully */
.mob-svc-card-inner-wrap {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: var(--black3);
  border: 1px solid rgba(255,255,255,.08);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: border-color 0.35s, box-shadow 0.35s;
}
.mob-svc-card.active .mob-svc-card-inner-wrap {
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 18px 50px rgba(0,0,0,0.5);
}
.mob-svc-card-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  line-height: 0;
}
.mob-svc-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.8;
  transition: opacity 0.4s, transform 0.6s cubic-bezier(0.22,1,0.36,1);
  transform: scale(1.04);
}
.mob-svc-card.active .mob-svc-card-img img {
  opacity: 1;
  transform: scale(1.0);
}
.mob-svc-card-grad {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;        /* subtle gradient — just enough for title readability */
  background: linear-gradient(to top,
    rgba(8,8,8,0.92) 0%,
    rgba(8,8,8,0.55) 45%,
    rgba(8,8,8,0.0) 100%);
  z-index: 1;
  pointer-events: none;
}
.mob-svc-card-body {
  position: relative;
  z-index: 2;
  padding: 16px 18px 18px;
}
.mob-svc-card-title {
  font-family: var(--font-heading);
  font-size: 16px; font-weight: 800;
  color: var(--white);
  line-height: 1.18;
  letter-spacing: -.01em;
  transition: color 0.3s;
}
.mob-svc-card.active .mob-svc-card-title { color: #fff; }
/* Navigation dots */
.mob-svc-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
  padding: 0 20px;
}
.mob-svc-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: all 0.3s;
  flex-shrink: 0;
}
.mob-svc-dot.active {
  background: var(--orange);
  width: 20px;
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(255,92,0,0.5);
}
/* RING CAROUSEL — used by both the home page (#mobSvcCarousel) and the
   services page (#pageMobSvcCarousel) so they are visually and
   behaviorally identical, not just similarly named.
   Cards are positioned purely by JS transforms (translateX based on
   circular distance from the active index), not native scroll, so there
   is no edge, no clone, and nothing to snap or jump — it's a true loop. */
#mobSvcCarousel .mob-svc-track-outer,
#pageMobSvcCarousel .mob-svc-track-outer {
  overflow: hidden;
  scroll-snap-type: none;
  scroll-behavior: auto;
  padding: 14px 0;
  cursor: grab;
  user-select: none;
}
#mobSvcCarousel .mob-svc-track-outer:active,
#pageMobSvcCarousel .mob-svc-track-outer:active { cursor: grabbing; }
#mobSvcCarousel .mob-svc-track,
#pageMobSvcCarousel .mob-svc-track {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}
#mobSvcCarousel .mob-svc-card,
#pageMobSvcCarousel .mob-svc-card {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  /* transform is set inline by JS every frame — scroll-snap-align no
     longer applies since this card isn't in document scroll flow */
  scroll-snap-align: none;
}
/* Nav arrows */
.mob-svc-arrows {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px 0;
}
.mob-svc-arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  font-size: 18px;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.mob-svc-arrow:active {
  background: rgba(255,92,0,0.2);
  border-color: rgba(255,92,0,0.4);
  color: var(--orange);
}
.mob-svc-arrow.disabled {
  opacity: 0.3;
  pointer-events: none;
}
.mob-svc-count {
  font-family: var(--font-heading);
  font-size: 12px; font-weight: 700;
  color: rgba(245,240,235,0.4);
  letter-spacing: .1em;
}
.mob-svc-count span { color: var(--orange); }

/* Show/hide based on screen size */
@media(max-width:900px){
  /* Hide the scroll-based coverflow on mobile (home page preview) */
  #homeSvcScrollWrapper { display: none !important; }
  #pageSvcScrollWrapper { display: none !important; }
  /* Show the touch carousel instead */
  .mob-svc-carousel-wrap { display: flex !important; }

  /* ── HERO: see "EDITORIAL MOBILE HERO" block below for full styling ── */
  .hero-right { display: none; } /* hide hero right strips on mobile */
  .mstrip-wrap { display: none; }

  /* ── SECTION TITLE FIX ── */
  .section-title { font-size: clamp(34px, 9vw, 58px) !important; }

  /* ── HOME SERVICES SECTION HEADER ON MOBILE ── */
  #homeSvcCoverflowSection > .hcf-scroll-wrapper { display: none !important; }

  /* ── FUTURE VISION MOBILE FIX — HOME ── */
  #futureSplitSection {
    padding-bottom: 40px;
  }
  #fv-home-header {
    position: relative !important;
    top: auto !important;
    padding: 24px 20px !important;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  #fv-home-header .section-title {
    font-size: clamp(24px, 7vw, 38px) !important;
  }
  /* Convert Future Vision split-screen to card stack on mobile */
  .fv-container { padding: 0 16px !important; }
  .fv-arch {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .fv-arch__left { order: 1; }
  .fv-arch__right {
    display: none !important; /* hide sticky right pane — cards already show image */
  }
  .fv-arch__info {
    height: auto !important;
    padding: 0 !important;
    display: block !important;
    place-items: unset !important;
  }
  /* Mobile FV — 2-col card grid matching Case Studies jcard design */
  #home-fv-mobile, #page-fv-mobile {
    padding: 20px 20px 36px;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    background: var(--black);
  }
  .fv-mobile-card {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    background: var(--black3);
    border: 1px solid rgba(255,255,255,0.05);
    transition: border-color .35s, transform .35s;
  }
  .fv-mobile-card:active { border-color: rgba(255,92,0,0.2); transform: translateY(-3px); }
  .fv-mobile-card-img {
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(255,92,0,0.12), rgba(255,92,0,0.03));
  }
  .fv-mobile-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
  }
  .fv-mobile-card:active .fv-mobile-card-img img { transform: scale(1.07); }
  .fv-mobile-card-body {
    padding: 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .fv-mobile-card-tag {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 3px 8px;
    border-radius: 50px;
    background: rgba(255,92,0,0.1);
    border: 1px solid rgba(255,92,0,0.2);
    font-family: var(--font-heading);
    font-size: 9px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 8px;
    width: fit-content;
  }
  .fv-mobile-card-tag::before { display: none; }
  .fv-mobile-card-title {
    font-family: var(--font-heading);
    font-size: 13px; font-weight: 800;
    color: var(--white);
    margin-bottom: 6px;
    line-height: 1.3;
    flex: 1;
  }
  .fv-mobile-card-desc {
    font-size: 11px; line-height: 1.6;
    color: rgba(245,240,235,0.5);
    font-weight: 300;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
  }
  .fv-mobile-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-heading);
    font-size: 10px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--orange);
    background: none; border: none;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    margin-top: auto;
  }
  .fv-spacer { height: 4vh !important; }

  /* ── ABOUT SECTION MOBILE ── */
  .about { padding: 60px 20px !important; flex-direction: column !important; }
  .about-visual { order: -1; margin-bottom: 0; padding-bottom: 40px; padding-right: 0; }
  .about-h2 { font-size: clamp(34px, 9vw, 54px) !important; }
  .about-pills { gap: 8px; }
  .pill { padding: 8px 16px; font-size: 11px; }

  /* ── TESTIMONIALS MOBILE ── */
  .testimonials { padding: 56px 0 !important; }
  .testimonials-header { padding: 0 20px; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
  /* Smaller cards, ~62vw, still peek the next one to show it's swipeable */
  .tcard { flex: 0 0 calc(48vw) !important; min-width: 0 !important; padding: 16px 14px !important; border-radius: 14px !important; }
  .tcard-stars { font-size: 11px !important; margin-bottom: 8px !important; }
  .tcard-text { font-size: 12px !important; line-height: 1.5 !important; margin-bottom: 12px !important; }
  .tcard::before { font-size: 48px !important; top: -4px !important; right: 10px !important; }
  .tcard-author { gap: 8px !important; }
  .avatar { width: 32px !important; height: 32px !important; font-size: 13px !important; }
  .author-name { font-size: 12px !important; }
  .author-role { font-size: 10px !important; }
  .testi-marquee-track { gap: 8px !important; padding: 0 20px !important; }
  .testi-result { font-size: 9px !important; padding: 4px 9px !important; margin-top: 8px !important; }

  /* ── PORTFOLIO MOBILE ── */
  .portfolio { padding: 60px 20px !important; }
  .portfolio-masonry { grid-template-columns: 1fr !important; grid-auto-rows: 220px !important; }
  .port-item.port-tall,.port-item.port-wide { grid-row: span 1 !important; grid-column: span 1 !important; }

  /* ── FAQ MOBILE ── */
  .faq-section { padding: 60px 20px !important; }
  .faq-inner { grid-template-columns: 1fr !important; gap: 40px !important; }
  .faq-stats { grid-template-columns: 1fr 1fr !important; }

  /* ── JOURNAL / CASE STUDIES PREVIEW — single column, content left / image right ── */
  .journal { padding: 60px 20px !important; }
  .journal-header { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
  /* Single column stacked rows on mobile — content left, image right */
  .jnl-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  #home-casestudies-grid .jcard:nth-child(4) { display: flex !important; }
  /* First card no longer gets featured full-width treatment */
  .jnl-grid .jcard:first-child { grid-column: span 1 !important; }
  .jcard { flex-direction: row !important; align-items: stretch !important; min-height: 112px !important; }
  /* Fixed, consistent size + ratio for every card image — explicit px, no aspect-ratio reliance */
  .jcard-img,
  .jcard:first-child .jcard-img {
    order: 2 !important;
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    height: 112px !important;
    max-height: 112px !important;
    flex: 0 0 112px !important;
    align-self: center !important;
    aspect-ratio: 1 / 1 !important;
  }
  /* Readable, mobile-friendly typography */
  .jcard:first-child .jcard-title { font-size: 15px !important; }
  .jcard-title {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    margin-bottom: 6px !important;
  }
  .jcard-excerpt { display: none !important; }
  .jcard-body { order: 1 !important; padding: 14px 12px !important; flex: 1 !important; justify-content: center !important; gap: 2px !important; }
  .jcard-meta { margin-bottom: 8px !important; }
  .jcard-cat { font-size: 10px !important; font-weight: 600 !important; padding: 3px 9px !important; letter-spacing: .04em !important; }
  .jcard-date { display: none !important; }
  .jcard-read { font-size: 11px !important; font-weight: 600 !important; }

  /* ── BLOGS-NEWSLETTER ── */
  .blogs-newsletter { grid-template-columns: 1fr !important; }
  .blogs-half,.newsletter-half { padding: 60px 20px !important; }

  /* ── CTA SECTION MOBILE ── */
  .cta { padding: 52px 20px !important; }
  .cta-tag { font-size: 10px !important; padding: 6px 14px !important; margin-bottom: 16px !important; }
  .cta-h { font-size: clamp(34px, 9vw, 52px) !important; line-height: 0.92 !important; margin-bottom: 16px !important; }
  .cta-p { font-size: 14px !important; line-height: 1.65 !important; margin-bottom: 28px !important; max-width: 100% !important; }
  .cta-btns { flex-direction: column; align-items: stretch; gap: 10px !important; margin-bottom: 32px !important; }
  .cta-btns .btn-p, .cta-btns .btn-s { width: 100% !important; justify-content: center; text-align: center; font-size: 13px !important; padding: 13px 20px !important; }
  .cta-cards { flex-direction: column; gap: 10px !important; }
  .cta-card { flex: 0 0 100% !important; max-width: 100% !important; padding: 20px 18px !important; border-radius: 14px !important; }
  .cc-icon { font-size: 24px !important; margin-bottom: 10px !important; }
  .cc-title { font-size: 14px !important; margin-bottom: 6px !important; }
  .cc-desc { font-size: 12px !important; }
  .cc-arrow { margin-top: 12px !important; font-size: 15px !important; }
  .cta-zoom-wrapper { display: none !important; }

  /* ── CONTACT MOBILE ── */
  .contact-section { padding: 60px 20px !important; }
  .contact-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .contact-form { padding: 28px 20px !important; }
  .cf-row { grid-template-columns: 1fr !important; }

  /* ── RESULTS THAT SPEAK / FEATURED WORK — heading left, button right ── */
  .fw-header {
    padding: 32px 20px 20px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }
  .fw-header-left { flex: 1 !important; min-width: 0 !important; }
  .fw-eyebrow { font-size: 9px !important; letter-spacing: 0.2em !important; margin-bottom: 8px !important; }
  .fw-title { font-size: clamp(24px, 7vw, 34px) !important; line-height: 0.96 !important; }
  .fw-topbar { padding: 12px 20px !important; }
  .fw-header-right { flex-shrink: 0 !important; align-items: flex-end !important; gap: 0 !important; padding-bottom: 0 !important; }
  .fw-tagline { display: none !important; }
  .fw-header-right .cs-view-all { padding: 9px 14px !important; font-size: 9px !important; gap: 6px !important; white-space: nowrap !important; }
  /* Side-by-side: num+info+metric on the left, fixed square photo on the right */
  .fw-row {
    grid-template-columns: 24px 1fr 112px !important;
    grid-template-rows: auto auto !important;
    min-height: 112px !important;
    align-items: center !important;
  }
  .fw-row-num {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    padding: 0 !important;
    font-size: 10px !important;
    align-items: flex-start !important;
    padding-top: 16px !important;
    border-right: none !important;
  }
  .fw-row-info {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 14px 12px 4px !important;
    gap: 6px !important;
    justify-content: flex-end !important;
  }
  /* Category badge styled like the jcard pill */
  .fw-row-cat {
    display: inline-flex !important;
    align-self: flex-start !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
    padding: 3px 9px !important;
    border-radius: 50px !important;
    background: rgba(255,92,0,.1) !important;
    border: 1px solid rgba(255,92,0,.2) !important;
    text-transform: uppercase !important;
  }
  /* Title — same readable body font as case study cards */
  .fw-row-name {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
  }
  .fw-row-tags { gap: 6px !important; margin-top: 2px !important; }
  .fw-row-tag { font-size: 9px !important; padding: 3px 9px !important; }
  /* Fixed, consistent size + ratio for every row image */
  .fw-row-photo {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
    width: 112px !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    border-left: 1px solid rgba(0,0,0,.08) !important;
    border-right: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  .fw-row-photo img { position: absolute !important; }
  .fw-row-metric {
    grid-column: 2 !important;
    grid-row: 2 !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 4px 12px 14px !important;
    border-top: none !important;
    gap: 10px !important;
  }
  /* Hide the "Live / Done" status text on mobile rows */
  .fw-row-val { display: none !important; }
  .fw-row-lbl { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .04em !important; margin-top: 0 !important; }
  .fw-row-arrow { margin-top: 0 !important; }

  /* ── FOOTER MOBILE ── */
  footer { padding: 60px 20px 30px !important; padding-top: 220px !important; }
  .footer-parallax { height: 220px !important; }
  .footer-top { grid-template-columns: 1fr !important; gap: 32px !important; }
  .footer-bottom { flex-direction: column !important; align-items: flex-start !important; }
  .footer-bar-item { font-size: 22px !important; }
  .footer-bl { flex-wrap: wrap !important; gap: 14px !important; }
}

/* ── Small phones (480px and below) — extra touch ── */
@media(max-width:480px){
  .hero-h1 { font-size: clamp(34px, 9.5vw, 50px) !important; }
  /* mob-svc-card scales with vw automatically — no overrides needed at 480px */
  .section-title { font-size: clamp(30px, 9vw, 52px) !important; }
  #tsm-vc, #ab-tsm-vc { width: 72vw; height: 72vw; }
}

/* ══════════════════════════════════════════════════
   PREMIUM MOBILE UX OVERHAUL — HIGH-END POLISH
   Elevates every section to match desktop quality
══════════════════════════════════════════════════ */

/* ── Global mobile token refinements ── */
@media(max-width:900px){

  /* ── NAV: premium glass bar, refined height ── */
  nav {
    height: 60px !important;
    padding: 0 18px !important;
    background: rgba(8,8,8,0.92) !important;
    backdrop-filter: blur(24px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }
  .nav-logo-img { width: 34px; height: 34px; }
  .nav-brand { font-size: 13px; }

  /* ── NAV DRAWER: premium glass, edge-to-edge ── */
  .mob-nav-drawer {
    width: min(340px, 92vw) !important;
    background: rgba(12,12,12,0.97) !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
    border-left: 1px solid rgba(255,255,255,0.05) !important;
  }
  .mob-nav-header {
    background: linear-gradient(135deg, rgba(255,92,0,0.06), transparent) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    min-height: 72px !important;
    padding: 16px 20px !important;
  }
  .mob-nav-brand {
    font-size: 14px !important;
    letter-spacing: 0.06em !important;
  }
  .mob-nav-link {
    padding: 13px 22px !important;
    font-size: 11.5px !important;
    letter-spacing: 0.05em !important;
    border-radius: 0 !important;
  }
  .mob-nav-link-arrow {
    font-size: 11px !important;
    opacity: 0.5;
  }
  .mob-services-toggle {
    padding: 13px 22px !important;
    font-size: 11.5px !important;
  }
  .mob-svc-item {
    padding: 11px 24px 11px 32px !important;
    font-size: 11px !important;
  }
  .mob-nav-cta {
    margin: 16px 20px 12px !important;
    padding: 16px 24px !important;
    font-size: 14px !important;
    border-radius: 14px !important;
    letter-spacing: 0.08em !important;
    box-shadow: 0 8px 32px rgba(255,92,0,0.4), 0 0 0 1px rgba(255,92,0,0.2) !important;
  }
  .mob-close {
    width: 40px !important; height: 40px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
  }

  /* ── HERO: EDITORIAL MOBILE HERO — full-screen image, centered serif, minimalist CTAs ── */
  .hero {
    min-height: 100svh !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Full-bleed background image with Ken Burns zoom */
  .hero-mobile-bg {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    overflow: hidden !important;
  }
  .hero-mobile-bg img,
  .hero-mobile-bg video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: scale(1.08) !important;
    animation: heroKenBurns 14s ease-out forwards !important;
  }
  .hero-mobile-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: transparent !important;
  }
  @keyframes heroKenBurns {
    0% { transform: scale(1.08); }
    100% { transform: scale(1.18); }
  }

  /* Hide desktop visual chrome behind the new full-screen photo treatment */
  .hero-noise, .hero-orb { display: none !important; }

  .hero-left {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    padding: 0 28px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    max-width: 560px !important;
    margin: 0 auto !important;
  }

  /* Eyebrow badge — same glass-pill + blinking dot treatment as desktop */
  .hero-eyebrow {
    position: absolute !important;
    top: 15% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: max-content !important;
    max-width: calc(100% - 56px) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--glass) !important;
    border: 1px solid var(--glass-b) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 7px 16px !important;
    border-radius: 50px !important;
    font-family: var(--font-heading) !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--orange) !important;
    margin-bottom: 0 !important;
    opacity: 0;
    animation: heroFadeUp .9s .3s forwards, heroEyebrowPos .9s .3s forwards !important;
  }
  .hero-eyebrow::before {
    display: block !important;
    content: '' !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--orange) !important;
    animation: blink 2s infinite !important;
    flex-shrink: 0 !important;
  }
  @keyframes heroEyebrowPos {
    from { transform: translate(-50%, calc(-50% + 18px)); }
    to   { transform: translate(-50%, -50%); }
  }

  /* Subtitle removed from mobile hero layout */
  .hero-sub {
    display: none !important;
  }

  /* Bottom panel: occupies the bottom 25% of the hero, holds heading + CTAs */
  .hero-bottom-panel {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 25% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 18px !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  /* Same display font as desktop, single line, bigger than the button row width */
  .hero-h1 {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: clamp(17px, 6vw, 26px) !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin-bottom: 0 !important;
    color: var(--orange) !important;
    white-space: nowrap !important;
    opacity: 0;
    animation: heroFadeUp 1s .5s forwards !important;
  }
  .hero-h1 .line { display: inline; }
  .hero-h1 .line + .line::before { content: ' '; }
  .hero-h1 .or { color: var(--orange) !important; font-style: normal !important; text-shadow: none !important; }

  @keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Small block CTA buttons, in a row */
  .hero-btns {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 260px !important;
    margin: 0 auto !important;
    opacity: 0;
    animation: heroFadeUp .9s .9s forwards !important;
  }
  .hero-btns .btn-arrow { display: none !important; }
  .btn-p, .btn-s {
    display: block !important;
    flex: 1 1 0 !important;
    width: auto !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 7px 6px !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    border-radius: 2px !important;
    min-height: 30px !important;
    white-space: nowrap !important;
  }
  .btn-p {
    background: var(--orange) !important;
    box-shadow: none !important;
  }
  .btn-s {
    background: transparent !important;
    border: 1px solid rgba(245,240,235,.4) !important;
    backdrop-filter: none !important;
  }
  .hero-btns .btn-s {
    background: var(--orange) !important;
    border: none !important;
    color: #fff !important;
  }

  /* Hide stats + scroll-marquee chrome to keep the editorial layout uncluttered */
  .hero-stats { display: none !important; }
  .hero-scroll { display: none !important; }
  .hero-right { display: none !important; } /* hide hero right strips on mobile */
  .mstrip-wrap { display: none !important; }

  /* ══════════════════════════════════════════════════════════
     SERVICE-PAGE MOBILE HERO — same full-bleed video treatment
     as the homepage hero. Sits on top of each service page's
     existing (desktop-built) hero markup and hides it from view
     on phones, without touching anything at tablet/desktop sizes.
     ══════════════════════════════════════════════════════════ */
  #wsv-hero-new, #wsv-hero-ecom, #inf-hero-new, #seo-hero-new, .pm-hero {
    position: relative !important;
  }

  /* Hide each page's own desktop-built hero text so it can never show
     through behind the mobile video hero (defensive, in addition to
     the overlay's z-index stacking) */
  #wsv-hero-new .eyebrow, #wsv-hero-new .hero-h1, #wsv-hero-new .hero-sub, #wsv-hero-new .hero-btns,
  #wsv-hero-ecom .eyebrow, #wsv-hero-ecom .hero-h1, #wsv-hero-ecom .hero-sub, #wsv-hero-ecom .hero-btns,
  #inf-hero-new .eyebrow, #inf-hero-new .hero-h1, #inf-hero-new .hero-sub, #inf-hero-new .hero-btns,
  #seo-hero-new .eyebrow, #seo-hero-new .hero-h1, #seo-hero-new .hero-sub, #seo-hero-new .hero-btns,
  .pm-hero-label, .pm-hero-h1, .pm-hero-desc, .pm-hero-btns, .pm-hero-trust {
    display: none !important;
  }

  .svc-mobile-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 999 !important;
    overflow: hidden !important;
    min-height: 100svh !important;
    background: #0a0c10 !important;
  }
  .svc-mobile-hero-bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    overflow: hidden !important;
  }
  .svc-mobile-hero-bg video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: scale(1.08) !important;
    animation: heroKenBurns 14s ease-out forwards !important;
  }
  .svc-mobile-hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: transparent !important;
  }

  /* Eyebrow badge — identical glass-pill + blinking dot as the homepage */
  .svc-mobile-hero-eyebrow {
    position: absolute !important;
    top: 15% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: max-content !important;
    max-width: calc(100% - 56px) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--glass) !important;
    border: 1px solid var(--glass-b) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 7px 16px !important;
    border-radius: 50px !important;
    font-family: var(--font-heading) !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--orange) !important;
    z-index: 2 !important;
    opacity: 0;
    animation: heroFadeUp .9s .3s forwards, heroEyebrowPos .9s .3s forwards !important;
  }
  .svc-mobile-hero-eyebrow::before {
    display: block !important;
    content: '' !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--orange) !important;
    animation: blink 2s infinite !important;
    flex-shrink: 0 !important;
  }

  /* Bottom panel — heading + CTAs, same layout as the homepage */
  .svc-mobile-hero-panel {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 25% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 18px !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
  }
  .svc-mobile-hero-h1 {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: clamp(17px, 6vw, 26px) !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin: 0 !important;
    color: var(--orange) !important;
    white-space: nowrap !important;
    opacity: 0;
    animation: heroFadeUp 1s .5s forwards !important;
  }
  .svc-mobile-hero-h1 .line { display: inline; }
  .svc-mobile-hero-h1 .line + .line::before { content: ' '; }
  .svc-mobile-hero-h1 .or { color: var(--orange) !important; font-style: normal !important; }

  .svc-mobile-hero-btns {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 260px !important;
    margin: 0 auto !important;
    opacity: 0;
    animation: heroFadeUp .9s .9s forwards !important;
  }
  .svc-mobile-hero-btns a {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 0 !important;
    width: auto !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 7px 6px !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    border-radius: 2px !important;
    min-height: 30px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    background: var(--orange) !important;
    color: #fff !important;
    border: none !important;
  }

  /* ── TICKER: tighter on mobile ── */
  .ticker-item {
    padding: 0 20px !important;
    font-size: 11px !important;
  }

  /* ── VIDEO SECTION ── */
  .home-video-section {
    margin: 0 16px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }
  .home-video-section video { border-radius: 0; }

  /* ── ABOUT: refined image treatment ── */
  .about {
    padding: 64px 22px !important;
    gap: 0 !important;
  }
  .about-visual {
    margin-bottom: 48px !important;
  }
  .about-img-wrap {
    border-radius: 20px !important;
    aspect-ratio: 4/3 !important;
    overflow: hidden !important;
  }
  .about-img-wrap img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
  }
  .about-badge-circle {
    width: 96px !important; height: 96px !important;
    bottom: -20px !important; right: -12px !important;
    box-shadow: 0 0 0 4px var(--black), 0 0 32px rgba(255,92,0,0.4) !important;
  }
  .about-badge-circle .n { font-size: 28px !important; }
  .about-badge-circle .l { font-size: 8px !important; }
  .about-float {
    left: 16px !important; top: 16px !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
  }
  .about-float .fl { font-size: 9px !important; }
  .about-float .fv { font-size: 13px !important; }
  .about-section-tag { margin-bottom: 14px !important; }
  .about-h2 {
    font-size: clamp(36px, 9.5vw, 56px) !important;
    line-height: 0.93 !important;
    margin-bottom: 18px !important;
  }
  .about-p {
    font-size: 15px !important;
    line-height: 1.75 !important;
    margin-bottom: 28px !important;
  }
  .about-pills { gap: 8px !important; margin-bottom: 28px !important; }
  .pill {
    padding: 9px 16px !important;
    font-size: 11.5px !important;
    min-height: 40px !important;
  }
  .about-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 15px 24px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    min-height: 52px !important;
  }

  /* ── SERVICES BENTO: full-width cards on mobile ── */
  .services { padding: 64px 22px !important; }
  .services-header { margin-bottom: 48px !important; }
  .services-header .svc-header-sub {
    font-size: 15px !important;
    margin-top: 12px !important;
  }
  .svc-bento { gap: 12px !important; }
  .svc-b {
    min-height: 200px !important;
    border-radius: 20px !important;
  }
  .svc-b-body { padding: 20px 22px 22px !important; }
  .svc-b-title { font-size: 16px !important; }
  .svc-b-desc { max-height: 60px !important; opacity: 1 !important; font-size: 12.5px !important; }
  .svc-b-arrow { opacity: 1 !important; transform: translateY(0) !important; }
  .svc-b-icon { width: 40px !important; height: 40px !important; font-size: 20px !important; }

  /* ── MOB SVC CAROUSEL: premium feel ── */
  .mob-svc-carousel-wrap { padding-bottom: 20px !important; padding-top: 4px !important; }
  .mob-svc-dots { margin-top: 12px !important; gap: 6px !important; }

  /* ── STUDIO: vertical stack ── */
  .studio { padding: 64px 22px !important; }
  .studio-inner { grid-template-columns: 1fr !important; gap: 48px !important; }
  .studio-p { font-size: 15px !important; line-height: 1.75 !important; }
  .studio-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .studio-card { padding: 20px !important; border-radius: 16px !important; }
  .sc-title { font-size: 13px !important; }
  .sc-desc { font-size: 11.5px !important; }
  .studio-reel { aspect-ratio: 16/9 !important; border-radius: 20px !important; }
  .studio-floats {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 18px !important;
  }
  .sfloat { min-width: 130px !important; flex: 1 !important; border-radius: 14px !important; }
  .sfloat .sf-n { font-size: 22px !important; }
  .sfloat .sf-l { font-size: 9px !important; }

  /* ── FEATURED WORK / CASE STUDIES ── */
  .fw-topbar { padding: 11px 22px !important; }
  .fw-topbar-label { font-size: 9px !important; letter-spacing: 0.3em !important; }
  .fw-row {
    grid-template-columns: 22px 1fr 96px !important;
    grid-template-rows: auto auto !important;
    min-height: 96px !important;
  }
  .fw-row-info { padding: 12px 10px 4px !important; }
  .fw-row-name { font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.4 !important; }
  .fw-row-photo { width: 96px !important; aspect-ratio: 1 / 1 !important; height: auto !important; }
  .fw-row-metric { padding: 4px 10px 12px !important; }
  .fw-stat-strip { grid-template-columns: 1fr 1fr !important; }
  .fw-stat-cell { padding: 28px 20px !important; }
  .fw-stat-big { font-size: clamp(36px, 9vw, 56px) !important; }

  /* ── TESTIMONIALS: swipe carousel ── */
  .testimonials { padding: 56px 0 !important; }
  .testimonials-header { padding: 0 22px !important; margin-bottom: 28px !important; }
  .tcard {
    flex: 0 0 calc(52vw) !important;
    padding: 16px 14px !important;
    border-radius: 14px !important;
  }
  .tcard-text { font-size: 12px !important; line-height: 1.5 !important; }
  .avatar { width: 30px !important; height: 30px !important; font-size: 12px !important; }
  .author-name { font-size: 11px !important; }
  .author-role { font-size: 9px !important; }

  /* ── JOURNAL / BLOG: single column, content left / image right ── */
  .journal { padding: 64px 22px !important; }
  .journal-header { margin-bottom: 32px !important; }
  .jnl-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .jcard,
  .jcard:first-child {
    border-radius: 16px !important;
    min-height: 100px !important;
  }
  .jcard-img,
  .jcard:first-child .jcard-img {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    height: 96px !important;
    max-height: 96px !important;
    flex: 0 0 96px !important;
    align-self: center !important;
    aspect-ratio: 1 / 1 !important;
  }
  .jcard-body { padding: 12px 10px !important; }
  .jcard-title { font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.4 !important; }
  .jcard-cat { font-size: 9px !important; font-weight: 600 !important; }
  .jcard-read { font-size: 10px !important; font-weight: 600 !important; }

  /* ── FUTURE VISION: card grid ── */
  .future { padding: 64px 22px !important; }
  .future-grid { grid-template-columns: 1fr 1fr !important; gap: 1px !important; border-radius: 18px !important; }
  .future-header { margin-bottom: 48px !important; }
  .future-header-sub { font-size: 14px !important; }
  .fv-card-title { font-size: 14px !important; }
  .fv-card-desc { font-size: 11.5px !important; }

  /* ── FAQ ── */
  .faq-section { padding: 56px 20px !important; }
  .faq-bg-glow { width: 380px !important; height: 380px !important; }
  .faq-inner { grid-template-columns: 1fr !important; gap: 32px !important; }
  .faq-left .section-title { margin-bottom: 12px !important; }
  .faq-sub { font-size: 14px !important; line-height: 1.65 !important; margin-bottom: 24px !important; max-width: 100% !important; }
  .faq-left > div[style*="padding:28px"] { margin-top: 22px !important; padding: 20px !important; }
  .faq-left > div[style*="padding:28px"] p { font-size: 13.5px !important; margin-bottom: 12px !important; }
  .faq-item-pro { border-radius: 12px !important; margin-bottom: 10px !important; }
  .faq-item-pro .faq-q-btn { padding: 16px 18px !important; font-size: 13.5px !important; gap: 12px !important; line-height: 1.4 !important; }
  .faq-q-icon { width: 26px !important; height: 26px !important; font-size: 14px !important; }
  .faq-ans-pro p { padding: 0 18px 16px !important; padding-top: 12px !important; font-size: 13px !important; line-height: 1.65 !important; }

  /* ── BLOGS & NEWSLETTER ── */
  .blogs-newsletter { grid-template-columns: 1fr !important; }
  .blogs-half, .newsletter-half { padding: 56px 20px !important; }
  .blogs-half .section-title { margin-bottom: 4px !important; }
  .blog-list { margin-top: 22px !important; }
  .blog-item { padding: 16px 0 !important; gap: 14px !important; }
  .blog-num { font-size: 16px !important; width: 26px !important; }
  .blog-info .bt { font-size: 14px !important; line-height: 1.35 !important; margin-bottom: 5px !important; }
  .blog-info .bm { font-size: 11px !important; gap: 8px !important; flex-wrap: wrap !important; }
  .nl-h { font-size: clamp(32px, 9vw, 54px) !important; line-height: 0.95 !important; margin-bottom: 12px !important; }
  .nl-p { font-size: 13.5px !important; line-height: 1.6 !important; margin-bottom: 24px !important; }
  .nl-count { font-size: 11px !important; margin-bottom: 20px !important; }
  .nl-form { flex-direction: column !important; gap: 10px !important; border-radius: 14px !important; }
  .nl-input { padding: 15px 18px !important; font-size: 16px !important; border-radius: 12px !important; min-height: 50px !important; } /* 16px prevents iOS Safari zoom-in on focus */
  .nl-submit { padding: 15px 24px !important; font-size: 13px !important; border-radius: 12px !important; min-height: 50px !important; }

  /* ── CTA ── */
  .cta { padding: 64px 22px !important; }
  .cta-h { font-size: clamp(38px, 10vw, 58px) !important; line-height: 0.92 !important; margin-bottom: 16px !important; }
  .cta-p { font-size: 15px !important; margin-bottom: 32px !important; }
  .cta-btns { flex-direction: column !important; gap: 12px !important; margin-bottom: 36px !important; }
  .cta-btns .btn-p, .cta-btns .btn-s {
    width: 100% !important; justify-content: center !important;
    font-size: 14px !important; padding: 15px 24px !important;
    min-height: 52px !important; border-radius: 14px !important;
  }
  .cta-card { padding: 24px 20px !important; border-radius: 18px !important; }
  .cc-title { font-size: 15px !important; }

  /* ── CONTACT ── */
  .contact-section { padding: 64px 22px !important; }
  .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .contact-info-title { font-size: clamp(34px, 9vw, 52px) !important; }
  .contact-form { padding: 24px 20px 28px !important; border-radius: 20px !important; }
  .cf-title { font-size: 18px !important; margin-bottom: 5px !important; }
  .cf-sub { font-size: 12.5px !important; line-height: 1.5 !important; margin-bottom: 20px !important; }
  .cf-row { grid-template-columns: 1fr !important; gap: 0 !important; margin-bottom: 0 !important; }
  .cf-field { gap: 5px !important; margin-bottom: 11px !important; }
  .cf-label { font-size: 10px !important; }
  .cf-input, .cf-textarea, .cf-select {
    padding: 11px 14px !important;
    font-size: 16px !important; /* 16px prevents iOS Safari zoom-in on focus */
    border-radius: 10px !important;
    min-height: 44px !important;
  }
  .cf-textarea { min-height: 84px !important; }
  .cf-submit {
    padding: 14px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
    min-height: 48px !important;
    margin-top: 2px !important;
    letter-spacing: 0.1em !important;
  }
  .contact-method {
    padding: 16px 18px !important;
    border-radius: 14px !important;
    gap: 16px !important;
  }
  .cm-icon { width: 44px !important; height: 44px !important; font-size: 20px !important; border-radius: 10px !important; }

  /* ── FOOTER ── */
  footer { padding: 64px 22px 36px !important; padding-top: 220px !important; }
  .footer-desc { font-size: 13.5px !important; }
  .footer-col-title { font-size: 12px !important; }
  .footer-links a, .footer-links button { font-size: 13.5px !important; }
  .footer-copy { font-size: 12px !important; }
  .footer-bar-item { font-size: 20px !important; }
  .footer-socials { gap: 8px !important; }
  .fsoc { width: 40px !important; height: 40px !important; }

  /* ── PORTFOLIO ── */
  .portfolio { padding: 64px 22px !important; }
  .portfolio-filter { gap: 6px !important; flex-wrap: wrap !important; }
  .pfilt { padding: 9px 18px !important; font-size: 12px !important; border-radius: 50px !important; min-height: 40px !important; }
  .portfolio-masonry { gap: 10px !important; }

  /* ── PRICING ── */
  .pricing { padding: 64px 22px !important; }
  .pricing-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .price-card { padding: 32px 24px !important; border-radius: 22px !important; }
  .price-amt { font-size: 56px !important; }
  .price-feat { font-size: 13.5px !important; }

  /* ── INNER HERO ── */
  .inner-hero { padding: 110px 22px 64px !important; }
  .inner-hero-h { font-size: clamp(46px, 12vw, 80px) !important; line-height: 0.92 !important; }
  .inner-hero-p { font-size: 15px !important; margin-bottom: 32px !important; }

  /* ── BREADCRUMB ── */
  .breadcrumb { font-size: 11px !important; gap: 8px !important; }

  /* ── FOUNDERS CINEMATIC / EQUIP ── */
  .fc-intro { padding: 84px 20px 0 !important; }
  .fc-panel { padding: 64px 22px 48px !important; gap: 24px !important; }
  .fc-media,#fcPanel2 .fc-media { border-radius: 10px !important; width: 80% !important; max-width: 300px !important; aspect-ratio: 4/5 !important; height: auto !important; }
  .fc-name { font-size: clamp(28px,8vw,34px) !important; margin-bottom: 12px !important; }
  .fc-role { font-size: 11px !important; margin-bottom: 8px !important; }
  .fc-index { font-size: 11px !important; margin-bottom: 12px !important; }
  .fc-bio { font-size: 14px !important; line-height: 1.6 !important; }
  .fc-glow-1,.fc-glow-2 { width: 280px !important; height: 280px !important; filter: blur(70px) !important; }
  .studio-equip { padding: 64px 22px !important; }
  .equip-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .equip-card { padding: 22px 18px !important; border-radius: 16px !important; }

  /* ── SCROLL PROGRESS: slightly thicker on mobile ── */
  #sp { height: 3px !important; }

  /* ── WA & EMAIL FLOAT: safe position ── */
  .wa-float {
    bottom: 20px !important; right: 18px !important;
    width: 54px !important; height: 54px !important;
  }
  .email-float {
    bottom: 84px !important; right: 18px !important;
    width: 54px !important; height: 54px !important;
  }

  /* ── SECTION TAG: tighter on mobile ── */
  .section-tag { font-size: 10px !important; margin-bottom: 14px !important; }

  /* ── STAT STRIPS: readable on mobile ── */
  .cs-stat-row { grid-template-columns: 1fr 1fr !important; gap: 18px !important; margin-top: 48px !important; padding-top: 40px !important; }
  .cs-stat-num { font-size: 44px !important; }
  .cs-stat-lbl { font-size: 11px !important; }

  /* ── CASE STUDIES GRID ── */
  .cs-full-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .jnl-full-grid { grid-template-columns: 1fr !important; }

  /* ── MODAL OVERLAY: full-screen on mobile ── */
  #fv-modal-overlay { padding: 0 !important; align-items: flex-end !important; }
  #fv-modal {
    border-radius: 24px 24px 0 0 !important;
    max-height: 88vh !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  #fv-modal-img { height: 220px !important; border-radius: 24px 24px 0 0 !important; }
  #fv-modal-body { padding: 28px 22px 40px !important; }
  #fv-modal-bullets { grid-template-columns: 1fr !important; gap: 10px !important; }
  #fv-modal-close { top: 14px !important; right: 16px !important; width: 40px !important; height: 40px !important; }

  /* ── REMOVE HOVER STATES (they fire on tap on mobile) ── */
  @media (hover: none) {
    .svc-b:hover { border-color: rgba(255,255,255,0.06) !important; }
    .jcard:hover { transform: none !important; }
    .team-card:hover { transform: none !important; box-shadow: none !important; }
    .price-card:hover { transform: none !important; }
  }
}

/* ── Micro-detail polish for phones ≤430px (was 390px — device-independent) ── */
@media(max-width:430px){
  nav { height: 56px !important; padding: 0 16px !important; }
  .nav-brand { font-size: 12px !important; }
  .hero-left { padding: 0 18px !important; }
  .hero-h1 { font-size: clamp(32px, 10vw, 44px) !important; }
  .hero-eyebrow { font-size: 9px !important; }
  .hero-sub { font-size: 13.5px !important; }
  .btn-p, .btn-s { font-size: 7.5px !important; padding: 6px 5px !important; min-height: 28px !important; }
  .section-title { font-size: clamp(28px, 9.5vw, 48px) !important; }
  .about-h2 { font-size: clamp(30px, 10vw, 46px) !important; }
  .fw-title { font-size: clamp(22px, 6.5vw, 30px) !important; }
  .cta-h { font-size: clamp(34px, 10.5vw, 50px) !important; }
  .jcard-title { font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.4 !important; }
  .studio, .about, .services, .future, .journal, .testimonials, .casestudies, .cta { padding-left: 18px !important; padding-right: 18px !important; }
  .contact-form, .price-card { padding-left: 18px !important; padding-right: 18px !important; }
  .mob-nav-drawer { width: 94vw !important; }
  .team-grid { gap: 10px !important; }
  .team-name { font-size: 13px !important; }
  .pfilt { padding: 8px 14px !important; font-size: 11px !important; }
}

/* ── Active states for touch (replaces hover) ── */
@media (hover: none) and (pointer: coarse) {
  .btn-p:active { transform: scale(0.97) !important; box-shadow: 0 4px 16px rgba(255,92,0,0.4) !important; }
  .btn-s:active { border-color: var(--orange) !important; color: var(--orange) !important; }
  .jcard:active { border-color: rgba(255,92,0,0.2) !important; }
  .team-card:active { border-color: rgba(255,92,0,0.25) !important; }
  .price-card:active { border-color: rgba(255,92,0,0.25) !important; }
  .pill:active { background: var(--orange) !important; color: #fff !important; border-color: var(--orange) !important; }
  .mob-nav-link:active { color: var(--orange) !important; background: rgba(255,92,0,0.07) !important; }
  .contact-method:active { border-color: rgba(255,92,0,0.3) !important; background: rgba(255,92,0,0.04) !important; }
  .mob-svc-card-inner-wrap:active { border-color: rgba(255,255,255,0.12) !important; }
  .fsoc:active { background: var(--orange) !important; border-color: var(--orange) !important; color: #fff !important; }
  .svp-card-logo-type:active .svp-card-logo-wrap {
    background: rgba(255,92,0,.14) !important;
    border-color: rgba(255,92,0,.55) !important;
    box-shadow: 0 0 0 4px rgba(255,92,0,.12) !important;
  }
  .svp-card-logo-type:active .svp-card-logo-wrap img { transform: scale(1.08) !important; }
  .svp-cat-body-advertising .svp-card-logo-type:active .svp-card-logo-wrap {
    background: rgba(43,127,189,.14) !important;
    border-color: rgba(43,127,189,.55) !important;
    box-shadow: 0 0 0 4px rgba(43,127,189,.12) !important;
  }
}

/* ═══════════════════════════════════════════════════
   PREMIUM SCROLL ANIMATIONS — LINEAR / STRIPE STYLE
═══════════════════════════════════════════════════ */
/* ── Lenis smooth scroll base ── */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SCROLL REVEAL SYSTEM
   Classes auto-applied by JS IntersectionObserver
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Base hidden state — uses will-change for GPU layer */
.sr-fade-up,
.sr-fade-in,
.sr-blur-in,
.sr-scale-up,
.sr-slide-left,
.sr-slide-right,
.sr-clip-up {
  will-change: transform, opacity, filter;
}

/* ── Fade Up (primary reveal) ── */
.sr-fade-up {
  opacity: 0;
  transform: translateY(42px);
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.sr-fade-up.sr-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Fade In (no Y movement) ── */
.sr-fade-in {
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}
.sr-fade-in.sr-visible { opacity: 1; }

/* ── Blur In (Stripe-style soft focus reveal) ── */
.sr-blur-in {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(22px);
  transition:
    opacity 1.15s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.15s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, filter, transform;
}
.sr-blur-in.sr-visible {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
}

/* ── Scale Up (card reveals) ── */
.sr-scale-up {
  opacity: 0;
  transform: scale(0.92) translateY(24px);
  transition:
    opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.sr-scale-up.sr-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ── Slide Left / Right ── */
.sr-slide-left {
  opacity: 0;
  transform: translateX(-48px);
  transition:
    opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.sr-slide-right {
  opacity: 0;
  transform: translateX(48px);
  transition:
    opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.sr-slide-left.sr-visible,
.sr-slide-right.sr-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── Clip Reveal (text wipe up) ── */
.sr-clip-up {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translateY(10px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, clip-path, transform;
}
.sr-clip-up.sr-visible {
  opacity: 1;
  clip-path: inset(0 0 0% 0);
  transform: translateY(0);
}

/* ── Stagger delays — wider spread for smoother cascade ── */
.sr-d1  { transition-delay: 0.08s !important; }
.sr-d2  { transition-delay: 0.18s !important; }
.sr-d3  { transition-delay: 0.28s !important; }
.sr-d4  { transition-delay: 0.38s !important; }
.sr-d5  { transition-delay: 0.48s !important; }
.sr-d6  { transition-delay: 0.58s !important; }
.sr-d7  { transition-delay: 0.68s !important; }
.sr-d8  { transition-delay: 0.78s !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HOVER MICRO-INTERACTIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Lift + glow on cards */
.jcard,
.tcard,
.fv-card,
.studio-card,
.port-item {
  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.5s ease,
    box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.jcard:hover,
.fv-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 28px 72px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,92,0,0.18) !important;
}
.tcard:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,0.38), 0 0 0 1px rgba(255,92,0,0.2) !important;
}
.studio-card:hover {
  transform: translateY(-6px) !important;
}

/* Button shimmer glow on hover */
.btn-p {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease !important;
}
.btn-p:hover {
  transform: translateY(-4px) scale(1.025) !important;
  box-shadow: 0 0 70px rgba(255,92,0,0.7) !important;
}

/* Nav link underline sweep */
.nav-links a::after,
.nav-links button::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 1px;
  background: var(--orange);
  transition: left 0.28s ease, right 0.28s ease;
  border-radius: 1px;
}
.nav-links a:hover::after,
.nav-links button:hover::after {
  left: 12px;
  right: 12px;
}

/* Section-tag line grow */
.section-tag {
  transition: letter-spacing 0.4s ease;
}
.sr-visible .section-tag {
  letter-spacing: 0.32em;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PARALLAX DEPTH LAYERS
   Applied via JS on scroll
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.parallax-slow { will-change: transform; }
.parallax-medium { will-change: transform; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION ENTRANCE — subtle bg color shift
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.about { transition: box-shadow 0.6s ease; }
.about.sr-visible-section {
  box-shadow: inset 0 0 120px rgba(255,92,0,0.03);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STAT COUNTER NUMBER — count-up revealed
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sr-count { display: inline-block; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   INNER PAGE HERO — stagger children on navigate
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.inner-hero .section-tag,
.inner-hero .inner-hero-h,
.inner-hero .inner-hero-p,
.inner-hero .breadcrumb {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.inner-hero.ih-visible .section-tag { opacity:1; transform:translateY(0); transition-delay:0.06s; }
.inner-hero.ih-visible .inner-hero-h { opacity:1; transform:translateY(0); transition-delay:0.18s; }
.inner-hero.ih-visible .inner-hero-p { opacity:1; transform:translateY(0); transition-delay:0.32s; }
.inner-hero.ih-visible .breadcrumb   { opacity:1; transform:translateY(0); transition-delay:0.46s; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SCROLL PROGRESS INDICATOR — enhanced
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#sp {
  transition: width 0.06s linear !important;
  box-shadow: 0 0 12px rgba(255,92,0,0.6), 0 0 24px rgba(255,92,0,0.25) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOOTER BAR REVEAL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.footer-top > div {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.footer-top.ft-visible > div:nth-child(1) { opacity:1; transform:translateY(0); transition-delay:0.0s; }
.footer-top.ft-visible > div:nth-child(2) { opacity:1; transform:translateY(0); transition-delay:0.14s; }
.footer-top.ft-visible > div:nth-child(3) { opacity:1; transform:translateY(0); transition-delay:0.26s; }
.footer-top.ft-visible > div:nth-child(4) { opacity:1; transform:translateY(0); transition-delay:0.38s; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   AMBIENT GLOW PULSE on CTA sections
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes glowPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
.cta-bg-glow {
  animation: glowPulse 4s ease-in-out infinite !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   IMAGE REVEAL — clip-path wipe on scroll
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.about-img-wrap {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: clip-path;
}
.about-img-wrap.img-revealed {
  clip-path: inset(0% 0 0 0);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HORIZONTAL RULE GROW ANIMATION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.section-tag::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.sr-visible .section-tag::before,
.sr-fade-up.sr-visible .section-tag::before,
section.sr-visible > * .section-tag::before {
  transform: scaleX(1);
}

/* Always show section-tags that aren't inside animated parents */
.section-tag::before {
  transform: scaleX(1);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE — reduced motion
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (prefers-reduced-motion: reduce) {
  .sr-fade-up, .sr-fade-in, .sr-blur-in, .sr-scale-up,
  .sr-slide-left, .sr-slide-right, .sr-clip-up {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  .about-img-wrap {
    clip-path: none !important;
    transition: none !important;
  }
  .inner-hero .section-tag,
  .inner-hero .inner-hero-h,
  .inner-hero .inner-hero-p,
  .inner-hero .breadcrumb {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   NEW FOOTER — scoped overrides (must come last)
═══════════════════════════════════════════════════════════ */

/* Reset all old footer rules */
footer {
  background: #000 !important;
  padding: 0 !important;
  border: none !important;
  position: static !important;
  overflow: visible !important;
  padding-top: 0 !important;
}

/* Kill the old parallax strip */
.footer-parallax { display: none !important; }

/* The white rounded card */
.footer-card {
  background: #fff;
  border-radius: 2.2vw 2.2vw 0 0;
  padding: 3.2vw 4vw 0 4vw;
  overflow: hidden;
  width: 100%;
}

/* ── Footer top row: nav + social icons ── */
.footer-top {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  margin-bottom: 2vw !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Footer nav and social icons are divs — scroll-reveal JS handles them naturally */

/* Footer nav links (ABOUT / SERVICES / CONTACT) */
.footer-nav {
  display: flex;
  flex-direction: column;
}
.footer-nav a {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 2.6vw !important;
  font-weight: 800 !important;
  color: #000 !important;
  text-decoration: none !important;
  letter-spacing: 0.12vw !important;
  text-transform: uppercase !important;
  line-height: 1.22 !important;
  display: block !important;
  overflow: hidden !important;
  position: relative !important;
  background: none !important;
  padding: 0 !important;
}
.footer-nav a::after,
.footer-nav a::before { display: none !important; }
.footer-nav a .txt-default,
.footer-nav a .txt-hover {
  display: block;
  transition: transform 0.42s cubic-bezier(0.76,0,0.24,1),
              opacity   0.42s cubic-bezier(0.76,0,0.24,1);
  will-change: transform, opacity;
}
.footer-nav a .txt-default { transform: translateY(0); opacity: 1 !important; }
.footer-nav a .txt-hover {
  position: absolute; top: 0; left: 0; width: 100%;
  color: #111; transform: translateY(100%); opacity: 0 !important;
}
.footer-nav a:hover .txt-default { transform: translateY(-100%); opacity: 0 !important; }
.footer-nav a:hover .txt-hover   { transform: translateY(0);     opacity: 1 !important; }

/* Social icon grid */
.social-icons {
  display: flex;
  gap: 0.8vw;
  align-items: center;
  padding-top: 0.3vw;
}
.social-icon {
  width: 4.2vw; height: 4.2vw;
  background: #000;
  border-radius: 0.9vw;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; overflow: hidden; position: relative;
  transition: background 0.42s cubic-bezier(0.76,0,0.24,1);
}
.social-icon:hover { background: #222; }
.social-icon .ico-default,
.social-icon .ico-hover {
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.42s cubic-bezier(0.76,0,0.24,1),
              opacity   0.42s cubic-bezier(0.76,0,0.24,1);
  will-change: transform, opacity;
}
.social-icon .ico-default { transform: translateY(0);    opacity: 1; }
.social-icon .ico-hover   { position: absolute; inset: 0; transform: translateY(100%); opacity: 0; }
.social-icon:hover .ico-default { transform: translateY(-100%); opacity: 0; }
.social-icon:hover .ico-hover   { transform: translateY(0);     opacity: 1; }
.social-icon svg { width: 2.1vw; height: 2.1vw; fill: #fff; }
.social-icon .ico-hover svg { fill: #bbb; }

/* ── Bottom row: enquiry form + legal links ── */
.footer-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.8vw;
  gap: 2vw;
}
.enquiry-form {
  display: flex; align-items: center;
  border: 0.13vw solid #c0c0c0;
  border-radius: 0.6vw; overflow: hidden;
  height: 2.72vw; width: 27.2vw; flex-shrink: 0;
}
.enquiry-form input {
  border: none; outline: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6vw; font-weight: 500; color: #b0b0b0;
  letter-spacing: 0.056vw; padding: 0 0.8vw;
  flex: 1; height: 100%; text-transform: uppercase; background: #fff;
}
.enquiry-form input::placeholder { color: #b8b8b8; font-size: 0.6vw; letter-spacing: 0.056vw; }
.enquiry-btn {
  background: #fff; border: none;
  border-left: 0.13vw solid #c0c0c0;
  padding: 0 1.12vw; height: 100%;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8vw; font-weight: 700; color: #000;
  cursor: pointer; transition: background 0.15s; white-space: nowrap;
}
.enquiry-btn:hover { background: #f4f4f4; }

/* Legal links */
.legal-links { text-align: right; line-height: 1.72; flex-shrink: 0; }
.legal-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.3vw; font-weight: 800; color: #000;
  letter-spacing: 0.03vw; display: block;
}
.legal-links a {
  font-family: 'Krona One', sans-serif !important;
  display: block !important; font-size: 1.2vw !important;
  color: #000 !important; text-decoration: none !important;
  font-weight: 400 !important; overflow: hidden; position: relative;
  background: none !important; padding: 0 !important;
}
.legal-links a::after,
.legal-links a::before { display: none !important; }
.legal-links a .txt-default,
.legal-links a .txt-hover {
  display: block;
  transition: transform 0.42s cubic-bezier(0.76,0,0.24,1),
              opacity   0.42s cubic-bezier(0.76,0,0.24,1);
  will-change: transform, opacity;
}
.legal-links a .txt-default { transform: translateY(0);    opacity: 1; }
.legal-links a .txt-hover   { position: absolute; top:0; left:0; width:100%; text-align:right; color:#555; transform:translateY(100%); opacity:0; }
.legal-links a:hover .txt-default { transform: translateY(-100%); opacity: 0; }
.legal-links a:hover .txt-hover   { transform: translateY(0);     opacity: 1; }

/* ── Wordmark SVG ── */
.brand-name-wrap {
  margin-left: -4vw; margin-right: -4vw;
  display: block; line-height: 0; font-size: 0;
}
.brand-name-wrap svg { display: block; width: 100%; height: auto; }

/* ── Media query overrides (new footer stays consistent) ── */
@media (max-width: 1200px) {
  footer { padding-top: 0 !important; }
  .footer-top { grid-template-columns: none !important; }
}

/* ── Tablet (900px and below) ── */
@media (max-width: 900px) {
  footer { padding-top: 0 !important; }

  /* Card padding switches to px */
  .footer-card {
    padding: 28px 22px 0 22px !important;
    border-radius: 20px 20px 0 0 !important;
  }

  /* Top row: nav (left) + social icons (right) — keep as row */
  .footer-top {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
  }

  /* Nav links: readable px size */
  .footer-nav a {
    font-size: 22px !important;
    letter-spacing: 0.04em !important;
    line-height: 1.3 !important;
  }

  /* Social icons: fixed px */
  .social-icons { gap: 8px !important; }
  .social-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
  }
  .social-icon svg { width: 20px !important; height: 20px !important; }

  /* Bottom row: enquiry (left) + legal links (right) — keep as row */
  .footer-bottom-row {
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
  }

  /* Enquiry form: left side, fixed height */
  .enquiry-form {
    width: auto !important;
    flex: 1 !important;
    max-width: 260px !important;
    height: 44px !important;
    border-radius: 6px !important;
  }
  .enquiry-form input {
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    padding: 0 10px !important;
  }
  .enquiry-form input::placeholder { font-size: 11px !important; }
  .enquiry-btn {
    font-size: 12px !important;
    padding: 0 14px !important;
    white-space: nowrap !important;
  }

  /* Legal links: right side */
  .legal-links {
    text-align: right !important;
    flex-shrink: 0 !important;
  }
  .legal-title { font-size: 13px !important; }
  .legal-links a { font-size: 13px !important; }

  /* Brand wordmark: bleed to card edges */
  .brand-name-wrap { margin-left: -22px !important; margin-right: -22px !important; }
}

/* ── Mobile (480px and below) ── */
@media (max-width: 480px) {
  .footer-card {
    padding: 22px 18px 0 18px !important;
    border-radius: 16px 16px 0 0 !important;
  }

  /* Top row: nav (left) + social icons (right) — stays row */
  .footer-top {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }

  .footer-nav a {
    font-size: 18px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.03em !important;
  }

  .social-icons { gap: 6px !important; }
  .social-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 7px !important;
  }
  .social-icon svg { width: 18px !important; height: 18px !important; }

  /* Bottom row: enquiry (left) + legal links (right) — stays row */
  .footer-bottom-row {
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  /* Enquiry: left, shrinks gracefully */
  .enquiry-form {
    flex: 1 !important;
    max-width: 200px !important;
    width: auto !important;
    height: 40px !important;
    border-radius: 5px !important;
  }
  .enquiry-form input {
    font-size: 10px !important;
    letter-spacing: 0.03em !important;
    padding: 0 8px !important;
  }
  .enquiry-form input::placeholder { font-size: 10px !important; }
  .enquiry-btn {
    font-size: 11px !important;
    padding: 0 10px !important;
  }

  /* Legal links: right side */
  .legal-links {
    text-align: right !important;
    flex-shrink: 0 !important;
  }
  .legal-title { font-size: 12px !important; }
  .legal-links a { font-size: 12px !important; }

  /* Brand wordmark: bleed to card edges */
  .brand-name-wrap { margin-left: -18px !important; margin-right: -18px !important; }
}
/* ═══════════════════════════════════════════════════════════ */

/* ── Footer: anchor-as-social-icon normalization ── */
/* social-icon is now an <a> tag — reset link defaults */
a.social-icon {
  display: flex !important;
  text-decoration: none !important;
  color: inherit !important;
  -webkit-tap-highlight-color: transparent;
}

/* ── Footer nav + social icon: keyboard focus states ── */
.footer-nav a:focus-visible {
  outline: 2px solid #ff5c00 !important;
  outline-offset: 3px !important;
  border-radius: 2px !important;
}
a.social-icon:focus-visible {
  outline: 2px solid #ff5c00 !important;
  outline-offset: 3px !important;
}

/* ── Enquiry button: touch target & focus ── */
.enquiry-btn:focus-visible {
  outline: 2px solid #ff5c00;
  outline-offset: 2px;
}

/* ── Mobile: ensure touch targets meet 44px minimum ── */
@media (max-width: 900px) {
  .footer-nav a {
    min-height: 44px;
    display: flex !important;
    align-items: center;
  }
  a.social-icon {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .enquiry-btn {
    min-height: 44px !important;
  }
}
@media (max-width: 480px) {
  .footer-nav a {
    min-height: 40px;
  }
  a.social-icon {
    min-width: 40px !important;
    min-height: 40px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   GLOBAL MOBILE ZOOM-ON-FOCUS FIX
   iOS Safari auto-zooms the page when a tapped form field has
   a computed font-size below 16px. This rule forces every text
   field site-wide (including ones inside page-specific <style>
   blocks like .inp on the builder pages) to render at 16px on
   mobile, so tapping to type never triggers the zoom.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  input,
  textarea,
  select,
  .inp,
  .inp-select {
    font-size: 16px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   DEVICE-INDEPENDENT RESPONSIVE FIX
   Goal: Identical layout on all phones 360px–480px (iOS + Android)
   Strategy: width-only breakpoints, auto-fit grids, fluid units
   Added: 2026-06 — overrides are applied via cascade (appended last)
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. REMOVE DEVICE-SPECIFIC POINTER/HOVER TARGETING
      (hover:none is a capability flag, NOT a layout signal.
       Keep it only for cursor/hover cosmetics — already correct above.
       No layout changes should live inside hover:none blocks.)
   ───────────────────────────────────────────── */

/* ─────────────────────────────────────────────
   2. FLUID GRID FOUNDATION
      Replace rigid 1fr 1fr with auto-fit/minmax so the browser
      decides columns based purely on available width — device-agnostic.
      minmax(min, 1fr) means: stay 2-col until below `min` px, then 1-col.
   ───────────────────────────────────────────── */

/* Services grid (pages) — 2-col 360px+, 1-col below */
.services-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 16px !important;
}

/* Future vision grid — stay 2-col on 360px–480px */
.future-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)) !important;
}

/* Studio grid (2x2 feature cards inside studio section) */
.studio-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 12px !important;
}

/* Equipment grid — 2-col on mobile, 4-col on desktop */
.equip-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 16px !important;
}

/* Featured work stat strip */
.fw-stat-strip {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
}

/* Journal full grid (mobile fluid fallback only — desktop sizing matches
   Insights & Ideas .jnl-grid via the min-width:1025px rule below) */
@media (max-width: 1024px) {
  .jnl-full-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 20px !important;
  }
}

/* Case studies page: same box-size layout as the home page
   "Insights & Ideas" section (.jnl-grid) on desktop —
   row 1 mirrors the 1.5fr / 1fr / 1fr ratio (card 1 bigger), while every
   row after that (card 4 onward) is 3 perfectly equal-size boxes with NO
   leftover gap. A 21-column fine grid is used so the spans always add up
   exactly to a full row (9+6+6=21 for row 1, 7+7+7=21 for every row after). */
@media (min-width: 1025px) {
  .jnl-full-grid {
    grid-template-columns: repeat(21, 1fr) !important;
    gap: 20px !important;
  }
  .jnl-full-grid .jcard:first-child {
    grid-column: span 9 !important;
  }
  .jnl-full-grid .jcard:nth-child(2),
  .jnl-full-grid .jcard:nth-child(3) {
    grid-column: span 6 !important;
  }
  .jnl-full-grid .jcard:nth-child(n+4) {
    grid-column: span 7 !important;
  }
}

/* Pricing grid */
.pricing-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 20px !important;
}

/* FAQ stats */
.faq-stats {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  gap: 16px !important;
}

/* Contact form row */
.cf-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 14px !important;
}

/* ─────────────────────────────────────────────
   3. MOBILE BREAKPOINT — width-only, 360px–480px
      All phones in this range get identical layout.
      No device targeting, no pointer targeting.
   ───────────────────────────────────────────── */
@media (max-width: 900px) {

  /* --- Grids that must stay 2-column on 360px–480px --- */

  /* Future grid: 2-col always on mobile (border design requires it) */
  .future-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Restore correct nth-child borders for 2-col layout */
  .fv-card:nth-child(3n) { border-right: 1px solid rgba(255,92,0,.1) !important; }
  .fv-card:nth-child(2n) { border-right: none !important; }
  .fv-card:nth-last-child(-n+2) { border-bottom: none !important; }

  /* Studio grid: 2-col on mobile (feature cards) */
  .studio-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Equipment grid: 2-col on mobile */
  .equip-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* CS stat row: 2-col on mobile */
  .cs-stat-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  /* FW stat strip: 2-col */
  .fw-stat-strip {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Services grid: 2-col on mobile */
  .services-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  /* Pricing: stack to 1-col at tablet (cards are wide) */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* CS full grid: 1-col at tablet */
  .cs-full-grid {
    grid-template-columns: 1fr !important;
  }

  /* Journal full grid: 1-col at tablet */
  .jnl-full-grid {
    grid-template-columns: 1fr !important;
  }

  /* Contact form row: 1-col */
  .cf-row {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────────────
   4. ONLY COLLAPSE TO 1-COL BELOW 360px
      (very small/old devices — not targeting any brand)
   ───────────────────────────────────────────── */
@media (max-width: 359px) {
  .future-grid,
  .studio-grid,
  .equip-grid,
  .cs-stat-row,
  .fw-stat-strip,
  .services-grid,
  .faq-stats {
    grid-template-columns: 1fr !important;
  }

  /* Reset nth-child border rule for 1-col future-grid */
  .fv-card:nth-child(2n),
  .fv-card:nth-child(3n) {
    border-right: none !important;
  }
}

/* ─────────────────────────────────────────────
   5. REPLACE 390px DEVICE-SPECIFIC OVERRIDES
      Move sizing adjustments to width-based range
      that applies to ALL phones, not just one model.
      (390px targets iPhone 14 Pro Max — Android phones
       at 393/412/414px were excluded unintentionally)
   ───────────────────────────────────────────── */
@media (max-width: 430px) {
  /* These were previously in @media(max-width:390px) with !important
     Now they apply to all phones ≤430px, iOS and Android alike */
  nav { height: 56px !important; padding: 0 16px !important; }
  .nav-brand { font-size: 12px !important; }
  .hero-left { padding-left: 18px !important; padding-right: 18px !important; }
  .hero-h1 { font-size: clamp(32px, 9.5vw, 46px) !important; }
  .hero-eyebrow { font-size: 9px !important; }
  .hero-sub { font-size: 13.5px !important; }
  .btn-p, .btn-s { font-size: 8px !important; padding: 7px 6px !important; min-height: 30px !important; }
  .section-title { font-size: clamp(28px, 9vw, 44px) !important; }
  .about-h2 { font-size: clamp(28px, 9.5vw, 44px) !important; }
  .fw-title { font-size: clamp(22px, 6vw, 30px) !important; }
  .cta-h { font-size: clamp(32px, 10vw, 48px) !important; }
  .jcard-title { font-size: 13px !important; font-weight: 700 !important; line-height: 1.4 !important; }
  .mob-nav-drawer { width: 92vw !important; }
}

/* ─────────────────────────────────────────────
   6. SVP / VIEWPORT SECTIONS (service detail pages)
      These use inline <style> per page, but shared
      grid pattern: repeat(3,1fr) → auto-fit on mobile
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Catch any repeat(N,1fr) grids inside service viewport sections
     that aren't already handled by page-specific media queries */
  [class*="svp-grid"],
  [class*="svp-cat-grid"],
  [class*="-caps-grid"],
  [class*="-tech-grid"],
  [class*="-info-grid"],
  [class*="-stat-grid"] {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  }
}

/* ─────────────────────────────────────────────
   7. FLUID GAP & PADDING — vw-based so it scales
      proportionally on every device width, not jumping
      at a fixed breakpoint boundary
   ───────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Use clamp() for section padding: fluid between 16px and 24px */
  .hero-left,
  .about,
  .services,
  .studio,
  .studio-equip,
  .pricing,
  .future,
  .testimonials,
  .casestudies,
  .journal,
  .cta,
  .faq-section,
  .contact-section,
  .portfolio {
    padding-left: clamp(16px, 4.5vw, 24px) !important;
    padding-right: clamp(16px, 4.5vw, 24px) !important;
  }

  /* Fluid gap on common flex containers */
  .hero-stats { gap: clamp(12px, 4vw, 24px) !important; }
  .hero-btns  { gap: clamp(8px, 3vw, 14px) !important; }
}

/* ─────────────────────────────────────────────
   8. CONSISTENT CARD MIN-HEIGHT
      Prevents cards from collapsing to different heights
      due to content differences across grid cells
   ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .studio-card { min-height: 100px !important; }
  .equip-card  { min-height: 120px !important; }
  .fv-card     { min-height: 100px !important; }
  .svc-card    { min-height: 180px !important; }
}

/* ─────────────────────────────────────────────
   END DEVICE-INDEPENDENT RESPONSIVE FIX
   ───────────────────────────────────────────── */