/* ═══════════════════════════════════════════════════
   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: translate(-50%, -50%);
  transition: transform 0.1s, width 0.3s, height 0.3s, background 0.3s;
  mix-blend-mode: normal;
}
#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: translate(-50%, -50%);
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
#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.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

/* ═══════════════════════════════════════════════════
   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{
  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:8px 13px;
  font-family:var(--font-heading);
  font-size:12px;font-weight:600;letter-spacing:.06em;
  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:10px 22px !important;border-radius:50px !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;}
/* When drawer is open: hide nav-left brand but keep ham visible for toggle */
.mob-nav.open ~ nav .nav-left,
body.mob-open .nav-left{opacity:0;pointer-events:none;transition:opacity .25s ease;}
body.mob-open #mobClose{opacity:0;pointer-events:none;transition:opacity .25s ease;}
.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:var(--white2);
  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:14px 20px;
  font-family:var(--font-heading);font-size:14px;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);}
.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:14px 20px;
  font-family:var(--font-heading);font-size:14px;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:translateY(44px);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;}
.reveal.vis{opacity:1;transform:translateY(0);}
.reveal-l{opacity:0;transform:translateX(-48px);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;}
.reveal-l.vis{opacity:1;transform:translateX(0);}
.reveal-r{opacity:0;transform:translateX(48px);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;}
.reveal-r.vis{opacity:1;transform:translateX(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-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);}

/* Team section (About page) */
.about-team{padding:100px 60px;background:var(--black);}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:60px;}
.team-card{border-radius:20px;overflow:hidden;background:var(--black3);border:1px solid rgba(255,255,255,.05);transition:all .35s;}
.team-card:hover{border-color:rgba(255,92,0,.3);transform:translateY(-6px);}
.team-img{width:100%;aspect-ratio:3/4;overflow:hidden;position:relative;}
.team-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.team-card:hover .team-img img{transform:scale(1.05);}
.team-info{padding:20px;}
.team-name{font-family:var(--font-heading);font-size:16px;font-weight:800;margin-bottom:4px;}
.team-role{font-size:12px;color:var(--orange);font-family:var(--font-heading);font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
.team-bio{font-size:12px;color:var(--gray);margin-top:8px;line-height:1.6;}

/* Values (About page) */
.about-values{padding:100px 60px;background:var(--black2);}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px;}
.val-card{padding:36px;border-radius:20px;background:var(--glass);border:1px solid rgba(255,255,255,.05);transition:all .35s;}
.val-card:hover{border-color:rgba(255,92,0,.3);transform:translateY(-5px);}
.val-icon{font-size:36px;margin-bottom:18px;}
.val-title{font-family:var(--font-heading);font-size:18px;font-weight:800;margin-bottom:10px;}
.val-desc{font-size:14px;color:rgba(245,240,235,.55);line-height:1.7;font-weight:300;}

/* ═══════════════════════════════════════════════════
   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:1100px){
  .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:all .3s;
  position:relative;overflow:hidden;
}
.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);
}
.cs-view-all:hover::before{transform:scaleX(1);}
.cs-view-all:hover{color:#fff;}
.cs-view-all span{position:relative;z-index:1;}

/* ── 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:1100px){
  .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:768px){
  .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:768px){
  .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);}
.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:1100px){
  .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;}
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .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;}
  .services-grid{grid-template-columns:1fr 1fr;}
  .svc-card.svc-featured{grid-column:span 1;}
  .values-grid{grid-template-columns:1fr 1fr;}
  .pricing-grid{grid-template-columns:1fr;}
  .about-team,.about-values,.studio-equip,.pricing{padding:80px 24px;}
  .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;}
  .team-grid{grid-template-columns:1fr 1fr;}
  .values-grid{grid-template-columns:1fr;}
  .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;
  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; }
  #abTsmScrollSection .tsm-video-wrapper { height: 100svh; }
}

/* ═══════════════════════════════════════════════════
   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: 768px) {
  .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 */
  .about-team { padding: 60px 20px; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .team-img { aspect-ratio: 1/1; }
  .about-values { padding: 60px 20px; }
  .values-grid { grid-template-columns: 1fr; }
  .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; }
  #tsmScrollSection .tsm-video-wrapper { height: 100svh; }
  #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:768px){
  /* 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
══════════════════════════════════════════════════ */
@media(min-width:769px) and (max-width:1100px){

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

  /* Hero */
  .hero-left { padding: 120px 40px 80px; }

  /* About */
  .about { padding: 80px 40px; gap: 60px; }
  .about-badge-circle { right: -12px; }
  .about-float { left: 0; }

  /* Services bento — already handled by existing 1100 rule, reinforce padding */
  .services { padding: 80px 40px; }
  .svc-bento { gap: 12px; }

  /* Pricing */
  .pricing { padding: 80px 40px; }
  .pricing-grid { grid-template-columns: repeat(3,1fr); gap: 16px; }
  .price-card { padding: 32px 20px; }
  .price-amt { font-size: 52px; }

  /* Studio */
  .studio { padding: 80px 40px; }
  .studio-floats { right: -8px; }
  .studio-equip { padding: 80px 40px; }
  .equip-grid { grid-template-columns: repeat(2,1fr); }

  /* Featured work rows */
  .fw-header { padding: 60px 40px 40px; }
  .fw-topbar { padding: 14px 40px; }
  .fw-row { grid-template-columns: 60px 1fr 220px 120px; min-height: 140px; }
  .fw-row-info { padding: 28px 24px; }
  .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); }

  /* Case studies */
  .cs-full-grid { grid-template-columns: repeat(2,1fr); }
  .cs-stat-row { grid-template-columns: repeat(2,1fr); gap: 16px; }

  /* Journal */
  .journal { padding: 80px 40px; }
  .jnl-grid { grid-template-columns: 1fr 1fr; }
  .jnl-grid .jcard:first-child { grid-column: span 2; }
  .jnl-full-grid { grid-template-columns: repeat(2,1fr); }

  /* Future Vision */
  .future { padding: 80px 40px; }
  .future-grid { grid-template-columns: repeat(2,1fr); }
  .timeline-items { flex-wrap: wrap; }
  .ti { flex: 0 0 50%; }

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

  /* Portfolio */
  .portfolio { padding: 80px 40px; }
  .portfolio-masonry { grid-template-columns: repeat(2,1fr); grid-auto-rows: 260px; }
  .port-item.port-wide { grid-column: span 2; }
  .port-item.port-tall { grid-row: span 2; }

  /* Blogs & Newsletter */
  .blogs-newsletter { grid-template-columns: 1fr; }
  .blogs-half { padding: 80px 40px; }
  .newsletter-half { padding: 80px 40px; }

  /* FAQ */
  .faq-section { padding: 80px 40px; }
  .faq-inner { gap: 60px; }

  /* CTA */
  .cta { padding: 100px 40px; }
  .cta-cards { gap: 14px; }
  .cta-card { flex: 0 0 calc(50% - 8px); max-width: none; }

  /* Contact */
  .contact-section { padding: 80px 40px; }
  .contact-form { padding: 36px 32px; }

  /* Inner page hero */
  .inner-hero { padding: 140px 40px 80px; }

  /* Footer */
  footer { padding: 60px 40px 30px; padding-top: 260px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-bar-item { font-size: 28px; }

  /* About sub-pages */
  .about-team { padding: 80px 40px; }
  .team-grid { grid-template-columns: repeat(3,1fr); }
  .about-values { padding: 80px 40px; }
  .values-grid { grid-template-columns: repeat(2,1fr); }

  /* Home coverflow */
  .hcf-list { width: 19rem; height: 25rem; }
  .hcf-card { width: 19rem; height: 25rem; }
}

/* ── iPad landscape / small desktop (1024px) — slot between 900 and 1100 ── */
@media(min-width:901px) and (max-width:1100px){
  /* Restore nav links (hamburger hidden, desktop links visible) */
  .nav-links { display: flex; }
  .ham { display: none !important; }
  nav { padding: 0 28px; }
  .nav-links a, .nav-links button { padding: 8px 10px; font-size: 11px; }

  /* Hero — single column but keep padding comfortable */
  .hero-left { padding: 130px 48px 80px; }

  /* Studio reel — smaller aspect on tablet */
  .studio-reel { aspect-ratio: 4/3; }
}

/* ═══════════════════════════════════════════════════
   MOBILE SWIPE CAROUSEL — SERVICES SECTION
   Replaces the scroll-based coverflow on mobile
═══════════════════════════════════════════════════ */
.mob-svc-carousel-wrap {
  display: none; /* hidden on desktop */
  flex-direction: column;
  width: 100%;
  padding: 0 0 40px;
  position: relative;
  z-index: 2;
}
.mob-svc-track-outer {
  overflow: hidden;
  width: 100%;
  position: relative;
  /* show only one card at a time */
}
.mob-svc-track {
  display: flex;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  align-items: flex-start;
}
.mob-svc-card {
  /* Each card = 100vw wide, so exactly one fills the viewport */
  flex: 0 0 100vw;
  width: 100vw;
  /* Padding creates the visual "centered card with margins" look */
  padding: 0 20px;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  /* NO border/bg/radius here — inner wrapper handles that */
  background: transparent;
  border: none;
}
/* Inner card wrapper — image defines the height naturally */
.mob-svc-card-inner-wrap {
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: var(--black3);
  border: 1px solid rgba(255,255,255,.07);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: border-color 0.35s;
  position: relative; /* anchor for absolute num, grad, body */
}
.mob-svc-card.active .mob-svc-card-inner-wrap {
  border-color: rgba(255,92,0,0.45);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,92,0,0.1);
}
.mob-svc-card-img {
  position: relative; /* lets the image define card height */
  z-index: 0;
  display: block;
  line-height: 0;
}
.mob-svc-card-img img {
  width: 100%;
  height: auto;        /* natural image height — no cropping */
  display: block;
  opacity: 0.75;
  transition: opacity 0.4s, transform 0.5s;
  transform: scale(1.02);
}
.mob-svc-card.active .mob-svc-card-img img {
  opacity: 0.95;
  transform: scale(1.0);
}
.mob-svc-card-grad {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 70%;        /* gradient only at the bottom over text area */
  background: linear-gradient(to top,
    rgba(8,8,8,1.0) 0%,
    rgba(8,8,8,0.85) 40%,
    rgba(8,8,8,0.0) 100%);
  z-index: 1;
  pointer-events: none;
}
.mob-svc-card-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: 22px 24px 26px;
}
.mob-svc-card-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255,92,0,0.1);
  border: 1px solid rgba(255,92,0,0.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 14px;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.mob-svc-card.active .mob-svc-card-icon {
  background: rgba(255,92,0,0.22);
  border-color: rgba(255,92,0,0.5);
  transform: scale(1.08);
}
.mob-svc-card-num {
  position: absolute;
  top: 16px; right: 18px;
  font-family: var(--font-display);
  font-size: 64px;
  color: rgba(255,92,0,0.07);
  line-height: 1;
  z-index: 2;
  pointer-events: none;
}
.mob-svc-card-title {
  font-family: var(--font-heading);
  font-size: 18px; font-weight: 800;
  color: var(--white);
  margin-bottom: 7px;
  line-height: 1.2;
  transition: color 0.3s;
}
.mob-svc-card.active .mob-svc-card-title { color: var(--orange); }
.mob-svc-card-desc {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(245,240,235,0.52);
  font-weight: 300;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mob-svc-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 5px 13px;
  border-radius: 50px;
  background: rgba(255,92,0,0.1);
  border: 1px solid rgba(255,92,0,0.22);
  font-family: var(--font-heading);
  font-size: 10px; font-weight: 700;
  color: var(--orange);
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Navigation dots */
.mob-svc-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  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);
}
/* Nav arrows */
.mob-svc-arrows {
  display: flex;
  align-items: center;
  justify-content: space-between;
  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:768px){
  /* Hide the scroll-based coverflow on mobile */
  #homeSvcScrollWrapper { display: none !important; }
  #pageSvcScrollWrapper { display: none !important; }
  /* Show the touch carousel instead */
  .mob-svc-carousel-wrap { display: flex !important; }

  /* ── HERO MOBILE FIX ── */
  .hero { min-height: 100svh; flex-direction: column; }
  .hero-left { padding: 88px 20px 48px !important; }
  .hero-h1 { font-size: clamp(46px, 12vw, 72px) !important; line-height: 0.95 !important; }
  .hero-sub { font-size: 15px !important; line-height: 1.65 !important; }
  .hero-btns { flex-direction: column; gap: 12px; }
  .hero-btns .btn-p, .hero-btns .btn-s { width: 100%; justify-content: center; text-align: center; padding: 12px 24px; font-size: 13px; }
  .hero-stats { flex-wrap: wrap; gap: 18px 28px; margin-top: 32px; }
  .hero-stat .num { font-size: 34px !important; }
  .hero-stat .lbl { font-size: 11px; }
  .hero-right { display: none; } /* hide hero right strips on mobile */
  .hero-scroll { left: 20px; bottom: 24px; }
  .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: 64px 0 !important; }
  .testimonials-header { padding: 0 20px; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 36px; }
  /* Show ~1.3 cards so user knows it's swipeable */
  .tcard { flex: 0 0 calc(76vw) !important; min-width: 0 !important; padding: 24px 20px !important; }
  .tcard-text { font-size: 13px !important; margin-bottom: 18px !important; }
  .tcard::before { font-size: 90px !important; }
  .testi-marquee-track { gap: 12px !important; padding: 0 20px !important; }
  .testi-result { font-size: 10px !important; padding: 5px 10px !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 — 2-col grid ── */
  .journal { padding: 60px 20px !important; }
  .journal-header { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
  /* 2 columns on mobile — compact cards */
  .jnl-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !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:first-child .jcard-img { aspect-ratio: 16/10 !important; }
  .jcard:first-child .jcard-title { font-size: 14px !important; }
  .jcard-img { aspect-ratio: 16/10 !important; }
  .jcard-title { font-size: 13px !important; line-height: 1.3 !important; margin-bottom: 6px !important; }
  .jcard-excerpt { display: none !important; }
  .jcard-body { padding: 14px !important; }
  .jcard-meta { margin-bottom: 8px !important; }
  .jcard-cat { font-size: 9px !important; padding: 3px 8px !important; }
  .jcard-date { display: none !important; }
  .jcard-read { font-size: 10px !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 ── */
  .fw-header { padding: 40px 20px 24px !important; grid-template-columns: 1fr !important; }
  .fw-topbar { padding: 12px 20px !important; }
  .fw-header-right { align-items: flex-start; }
  /* Stacked: num+info / photo / metric */
  .fw-row {
    grid-template-columns: 44px 1fr !important;
    grid-template-rows: auto auto auto !important;
    min-height: auto !important;
  }
  .fw-row-num { padding: 0 !important; font-size: 10px !important; align-items: flex-start !important; padding-top: 20px !important; }
  .fw-row-info { padding: 18px 16px !important; gap: 8px !important; }
  .fw-row-cat { font-size: 13px !important; }
  .fw-row-name { font-size: 18px !important; }
  .fw-row-tags { gap: 5px !important; }
  .fw-row-tag { font-size: 9px !important; padding: 4px 10px !important; }
  .fw-row-photo {
    grid-column: 1 / 3 !important;
    grid-row: auto !important;
    height: 160px !important;
    border-left: none !important;
    border-right: none !important;
  }
  .fw-row-photo img { position: absolute !important; }
  .fw-row-metric {
    grid-column: 1 / 3 !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    padding: 14px 20px !important;
    border-top: 1px solid rgba(0,0,0,.08) !important;
    gap: 10px !important;
  }
  .fw-row-val { font-size: clamp(28px, 7vw, 40px) !important; }
  .fw-row-lbl { font-size: 10px !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(40px, 11vw, 62px) !important; }
  /* mob-svc-card is 100vw — no overrides needed at 480px */
  .section-title { font-size: clamp(30px, 9vw, 52px) !important; }
  #tsm-vc, #ab-tsm-vc { width: 72vw !important; height: 72vw !important; }
}

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

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

  /* ── 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: 16px 22px !important;
    font-size: 15px !important;
    letter-spacing: 0.05em !important;
    border-radius: 0 !important;
  }
  .mob-nav-link-arrow {
    font-size: 13px !important;
    opacity: 0.5;
  }
  .mob-services-toggle {
    padding: 16px 22px !important;
    font-size: 15px !important;
  }
  .mob-svc-item {
    padding: 13px 24px 13px 32px !important;
    font-size: 13px !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: cinematic full-screen treatment ── */
  .hero {
    min-height: 100svh !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    position: relative !important;
  }
  .hero-left {
    padding: 92px 22px 52px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .hero-eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.2em !important;
    padding: 7px 16px !important;
    margin-bottom: 24px !important;
    background: rgba(255,92,0,0.08) !important;
    border: 1px solid rgba(255,92,0,0.2) !important;
  }
  .hero-h1 {
    font-size: clamp(48px, 13vw, 74px) !important;
    line-height: 0.93 !important;
    letter-spacing: 0.01em !important;
    margin-bottom: 20px !important;
  }
  .hero-sub {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: rgba(245,240,235,0.7) !important;
    max-width: 100% !important;
    margin-bottom: 32px !important;
  }
  .hero-btns {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 0 !important;
  }
  .btn-p, .btn-s {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 15px 24px !important;
    font-size: 14px !important;
    border-radius: 14px !important;
    min-height: 52px !important;
  }
  .btn-p {
    box-shadow: 0 8px 28px rgba(255,92,0,0.38) !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: 28px !important; }
  .mob-svc-card-inner-wrap { border-radius: 22px !important; }
  .mob-svc-card-body { padding: 20px 22px 24px !important; }
  .mob-svc-card-title { font-size: 19px !important; }
  .mob-svc-card-desc {
    font-size: 13.5px !important;
    color: rgba(245,240,235,0.65) !important;
    -webkit-line-clamp: 3 !important;
  }
  .mob-svc-card-tag { font-size: 10.5px !important; padding: 6px 14px !important; }
  .mob-svc-dots { margin-top: 18px !important; gap: 7px !important; }
  .mob-svc-arrow {
    width: 48px !important; height: 48px !important;
    border-radius: 14px !important;
    font-size: 20px !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-header { padding: 40px 22px 28px !important; }
  .fw-title { font-size: clamp(40px, 10vw, 68px) !important; line-height: 0.9 !important; }
  .fw-row {
    grid-template-columns: 40px 1fr !important;
    grid-template-rows: auto auto auto !important;
  }
  .fw-row-info { padding: 18px 16px !important; }
  .fw-row-name { font-size: 20px !important; }
  .fw-row-photo { height: 180px !important; }
  .fw-row-metric { padding: 14px 22px !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: 64px 0 !important; }
  .testimonials-header { padding: 0 22px !important; margin-bottom: 32px !important; }
  .tcard {
    flex: 0 0 calc(78vw) !important;
    padding: 28px 22px !important;
    border-radius: 20px !important;
  }
  .tcard-text { font-size: 14px !important; line-height: 1.75 !important; }

  /* ── JOURNAL / BLOG: 2-col compact grid ── */
  .journal { padding: 64px 22px !important; }
  .journal-header { margin-bottom: 32px !important; }
  .jnl-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .jcard { border-radius: 16px !important; }
  .jcard-body { padding: 14px 12px 16px !important; }
  .jcard-title { font-size: 13px !important; line-height: 1.35 !important; }
  .jcard-cat { font-size: 9px !important; }
  .jcard-read { font-size: 10px !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: 64px 22px !important; }
  .faq-inner { grid-template-columns: 1fr !important; gap: 48px !important; }
  .faq-item { border-radius: 14px !important; }
  .faq-q { font-size: 14px !important; padding: 18px 20px !important; }
  .faq-a { padding: 0 20px 18px !important; font-size: 13.5px !important; }

  /* ── BLOGS & NEWSLETTER ── */
  .blogs-newsletter { grid-template-columns: 1fr !important; }
  .blogs-half, .newsletter-half { padding: 64px 22px !important; }
  .nl-h { font-size: clamp(34px, 9vw, 54px) !important; line-height: 0.95 !important; }
  .nl-sub { font-size: 14px !important; }
  .nl-form { flex-direction: column !important; gap: 10px !important; border-radius: 14px !important; }
  .nl-input { padding: 15px 18px !important; font-size: 14px !important; border-radius: 12px !important; min-height: 50px !important; }
  .nl-btn { padding: 15px 24px !important; font-size: 14px !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: 28px 22px 36px !important; border-radius: 20px !important; }
  .cf-title { font-size: 19px !important; }
  .cf-row { grid-template-columns: 1fr !important; gap: 0 !important; }
  .cf-input, .cf-textarea, .cf-select {
    padding: 14px 16px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    min-height: 50px !important;
  }
  .cf-textarea { min-height: 130px !important; }
  .cf-submit {
    padding: 16px !important;
    font-size: 15px !important;
    border-radius: 14px !important;
    min-height: 54px !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; }

  /* ── TEAM / VALUES / EQUIP ── */
  .about-team { padding: 64px 22px !important; }
  .team-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .team-card { border-radius: 18px !important; }
  .team-name { font-size: 14px !important; }
  .about-values { padding: 64px 22px !important; }
  .values-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .val-card { padding: 28px 22px !important; border-radius: 18px !important; }
  .val-title { font-size: 16px !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; }
    .val-card:hover { transform: none !important; }
    .price-card:hover { transform: none !important; }
  }
}

/* ── Micro-detail polish for very small phones ── */
@media(max-width:390px){
  nav { height: 56px !important; padding: 0 16px !important; }
  .nav-brand { font-size: 12px !important; }
  .hero-left { padding: 82px 18px 44px !important; }
  .hero-h1 { font-size: clamp(42px, 12.5vw, 60px) !important; }
  .hero-eyebrow { font-size: 9px !important; padding: 6px 13px !important; }
  .hero-sub { font-size: 14px !important; }
  .btn-p, .btn-s { font-size: 13px !important; padding: 14px 20px !important; min-height: 48px !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(36px, 10vw, 56px) !important; }
  .cta-h { font-size: clamp(34px, 10.5vw, 50px) !important; }
  .jcard-title { font-size: 12px !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; }
  .val-card:active { border-color: rgba(255,92,0,0.2) !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,92,0,0.35) !important; }
  .fsoc:active { background: var(--orange) !important; border-color: var(--orange) !important; color: #fff !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;
  }
}