/* ---------- Root / Base ---------- */
:root{
  --bg:#070707;
  --panel:#0f0f10;
  --panel2:#121214;
  --text:#eaeaea;
  --muted:#a7a7a7;
  --muted2:#8c8c8c;
  --yellow:#ffd400;
  --border:rgba(255,255,255,.10);
  --border2:rgba(255,255,255,.14);
  --shadow: 0 18px 55px rgba(0,0,0,.60);
  --shadow2: 0 10px 34px rgba(0,0,0,.45);
  --radius:18px;
  --radius2:22px;
  --max:1160px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body{
  margin:0;
  font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 50% -120px, rgba(255,212,0,.10), transparent 60%),
    radial-gradient(900px 400px at 15% 0%, rgba(255,255,255,.06), transparent 62%),
    radial-gradient(900px 400px at 85% 10%, rgba(255,255,255,.04), transparent 65%),
    linear-gradient(#050505, #000);
  color:var(--text);
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

/* Utility container feel (sections are centered already) */
section{
  padding: 92px 20px;
  text-align:center;
}

/* Smooth reveal */
.reveal-section{
  opacity:0;
  transform: translateY(18px);
  transition: opacity 700ms cubic-bezier(.22,1,.36,1),
              transform 700ms cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.reveal-section.revealed{
  opacity:1;
  transform: translateY(0);
}

.reveal-title{
  font-size: 34px;
  letter-spacing: .2px;
  margin: 0 0 18px;
}
.section-sub{
  max-width: 760px;
  margin: 0 auto 28px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 14px 20px;
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-weight: 700;
  letter-spacing: .2px;
  cursor:pointer;
  transition: transform 220ms cubic-bezier(.22,1,.36,1),
              background 220ms cubic-bezier(.22,1,.36,1),
              border-color 220ms cubic-bezier(.22,1,.36,1),
              box-shadow 220ms cubic-bezier(.22,1,.36,1);
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); }

.btn.primary{
  background: linear-gradient(180deg, rgba(255,212,0,.95), rgba(255,212,0,.78));
  color:#141414;
  border-color: rgba(255,212,0,.85);
  box-shadow: 0 18px 46px rgba(255,212,0,.16), 0 16px 40px rgba(0,0,0,.55);
}
.btn.primary:hover{
  box-shadow: 0 20px 55px rgba(255,212,0,.20), 0 16px 44px rgba(0,0,0,.60);
}
.btn.secondary{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}
.btn.secondary:hover{
  background: rgba(255,255,255,.08);
}

/* =========================
   BACK TO TOP
   ========================= */
.back-to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.55);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 60; /* above page, below modals */
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.back-to-top.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Hide Back-to-Top while any popup/modal is open */
body.overlay-open .back-to-top{
  opacity: 0 !important;
  transform: translateY(10px) !important;
  pointer-events: none !important;
}

.back-to-top:hover{
  border-color: rgba(255, 212, 0, .55);
  box-shadow: 0 22px 55px rgba(0,0,0,.65);
}

.back-to-top:active{
  transform: translateY(1px);
}

@media (max-width: 768px){
  .back-to-top{
    right: 14px;
    bottom: 14px;
    width: 42px;
    height: 42px;
  }
}

/* ---------- Topbar ---------- */
.topbar{
  position: sticky;
  top:0;
  z-index: 50;
  backdrop-filter: blur(16px);
  background: rgba(0,0,0,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: box-shadow 260ms ease, background 260ms ease;
}
.topbar.scrolled{
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
  background: rgba(0,0,0,.68);
}
.topbar-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
}
.topbar-brand{
  font-weight: 900;
  letter-spacing: .6px;
  font-size: 16px;
  display:flex;
  align-items:center;
  gap:8px;
}

/* Move the yellow dot before PHOTOKNACK without changing the dot style */
.topbar-brand .brand-dot{
  order: -1;
}

.brand-dot{
  width:10px;
  height:10px;
  border-radius: 999px;
  background: var(--yellow);
  box-shadow: 0 0 0 5px rgba(255,212,0,.10);
}

.topbar-nav{
  display:flex;
  align-items:center;
  gap: 18px;
  font-weight: 700;
  font-size: 13px;
  color: rgba(255,255,255,.86);
}
.topbar-nav a{
  opacity: .86;
  padding: 8px 10px;
  border-radius: 999px;
  transition: opacity 220ms ease, background 220ms ease;
}
.topbar-nav a:hover{
  opacity: 1;
  background: rgba(255,255,255,.06);
}

/* ---------- Hero (Video Background + Cinematic Animation) ---------- */
.hero{
  position: relative;
  padding: 0;
  min-height: calc(100vh - 64px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  text-align:center;
}

/* Video layer */
.hero-video{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.hero-bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.05);
  transform: scale(1.03);
}

/* Dark overlay above video */
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(700px 380px at 50% 22%, rgba(255,212,0,.14), transparent 55%),
    radial-gradient(900px 520px at 50% 10%, rgba(0,0,0,.30), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,.75));
}

/* Content above overlay */
.hero-content{
  position: relative;
  z-index: 2;
  max-width: 860px;
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;
  padding: 120px 18px 70px;
}

.hero-kicker{
  margin:0 0 14px;
  color: rgba(255,255,255,.78);
  font-weight: 800;
  letter-spacing: 4px;
  font-size: 11px;
  text-transform: uppercase;
}

.hero-title{
  margin: 0;
  font-weight: 900;
  letter-spacing: .4px;
  font-size: 66px;
  line-height: .92;
  text-shadow: 0 20px 55px rgba(0,0,0,.70);
}

.hero-title .highlight{
  color: var(--yellow);
  text-shadow: 0 18px 60px rgba(255,212,0,.12), 0 18px 55px rgba(0,0,0,.70);
}

.hero-subtitle{
  margin: 18px auto 0;
  max-width: 640px;
  color: rgba(255,255,255,.82);
  font-size: 16px;
  line-height: 1.75;
}

.hero-buttons{
  margin-top: 26px;
  display:flex;
  justify-content:center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Mobile tweaks */
@media (max-width: 768px){
  .hero-title{ font-size: 48px; }
  .hero-content{ padding: 96px 16px 56px; }
}

/* Cinematic entrance animation (clean + classy) */
.hero-anim .hero-kicker{
  animation: heroFadeUp 900ms cubic-bezier(.22,1,.36,1) both;
  animation-delay: 80ms;
}
.hero-anim .hero-title{
  animation: heroTitleRise 1050ms cubic-bezier(.22,1,.36,1) both;
  animation-delay: 130ms;
}
.hero-anim .hero-subtitle{
  animation: heroFadeUp 950ms cubic-bezier(.22,1,.36,1) both;
  animation-delay: 280ms;
}
.hero-anim .hero-buttons{
  animation: heroFadeUp 900ms cubic-bezier(.22,1,.36,1) both;
  animation-delay: 420ms;
}

@keyframes heroFadeUp{
  from{ opacity:0; transform: translateY(16px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes heroTitleRise{
  from{ opacity:0; transform: translateY(20px) scale(.985); filter: blur(1px); }
  to{ opacity:1; transform: translateY(0) scale(1); filter: blur(0px); }
}

/* ---------- Outcomes (Services) ---------- */
.services{
  max-width: var(--max);
  margin: 0 auto;
}
.services-grid{
  max-width: var(--max);
  margin: 28px auto 0;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.service-box{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 18px 18px 18px;
  text-align: left;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  transform: translateY(0) scale(1);
  transition: border-color 240ms cubic-bezier(.22,1,.36,1),
              box-shadow 240ms cubic-bezier(.22,1,.36,1),
              transform 240ms cubic-bezier(.22,1,.36,1),
              background 240ms cubic-bezier(.22,1,.36,1);
}
/* IMPORTANT: No hover highlight (only auto highlight) */
.service-box:hover{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  transform: translateY(0) scale(1);
}

.svc-title{
  font-weight: 900;
  color: rgba(255,255,255,.92);
  font-size: 14px;
  letter-spacing: .2px;
  margin-bottom: 10px;
  text-decoration: none;
}
.svc-desc{
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.65;
  text-decoration: none;
}

.service-box.svc-active{
  border-color: rgba(255,212,0,.55);
  box-shadow: 0 18px 48px rgba(0,0,0,.60), 0 0 0 1px rgba(255,212,0,.18) inset;
  background: rgba(255,255,255,.04);
  transform: translateY(-2px) scale(1.01);
}
.service-box.svc-active .svc-title{
  color: var(--yellow);
}

/* ---------- Scale (Insights) ---------- */
.insights{
  max-width: var(--max);
  margin: 0 auto;
}
.insights h2{
  margin: 0 0 22px;
  font-size: 34px;
}
.insights-grid{
  max-width: var(--max);
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.insight-card{
  text-align:left;
  padding: 20px 18px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.insight-number{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 26px;
  color: var(--yellow);
  text-shadow: 0 14px 40px rgba(255,212,0,.14), 0 14px 44px rgba(0,0,0,.55);
}
.insight-text{
  margin-top: 8px;
  color: rgba(255,255,255,.70);
  font-size: 13px;
  line-height: 1.6;
}

/* ---------- Collaborations (Logo Marquee) ---------- */
.collabs{
  max-width: var(--max);
  margin: 0 auto;
}
.logo-marquee{
  max-width: var(--max);
  margin: 26px auto 0;
  overflow:hidden;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.logo-track{
  display:flex;
  gap: 12px;
  width: max-content;
  animation: marquee 28s linear infinite;
  padding: 6px 0;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Desktop: allow click+drag without showing scrollbar */
@media (min-width: 769px){
  .logo-marquee.logo-manual{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    cursor: grab;
  }
  .logo-marquee.logo-manual::-webkit-scrollbar{
    height: 0;
    display: none; /* Chrome/Safari */
  }
  .logo-marquee.logo-manual.dragging{ cursor: grabbing; }
  .logo-marquee.logo-manual img{ pointer-events: none; } /* prevent image drag */
}

/* White box behind logos (as requested) */
.logo-tile{
  width: 160px;
  height: 74px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 14px 38px rgba(0,0,0,.42);
  overflow:hidden;
}

.logo-img{
  max-width: 118px;
  max-height: 38px;
  width:auto;
  height:auto;
  object-fit: contain;
  filter: none;
  opacity: 1;
}

.logo-insta360{ transform: scale(1.35); }
.logo-smallrig{ transform: scale(1.65); }
.logo-img.logo-wondershare{ transform: scale(2.2); transform-origin: center; }
.logo-img.logo-wondershare{
  max-width: 150px;
  max-height: 52px;
}
.logo-sennheiser{ transform: scale(1.50); }
.logo-instagram{ transform: scale(1.50); }
.logo-irix{ transform: scale(0.92); }

/* Higgsfield logo sizing fix (only this logo) */
.logo-img.logo-higgsfield{
  transform: scale(1.65);
  transform-origin: center;
  max-width: 160px;
  max-height: 58px;
}

/* ---------- Work (Tabs + Panels) ---------- */
.work{
  max-width: var(--max);
  margin: 0 auto;
}

/* =========================
   WORK TABS (POPPY BUTTONS)
   ========================= */
.work-tabs{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap: 12px;
  margin: 24px auto 10px;
}

.tab-btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(18,18,18,.75);
  color: rgba(255,255,255,.88);

  padding: 12px 16px;
  border-radius: 999px;
  cursor: pointer;

  font-weight: 800;
  letter-spacing: .2px;

  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: transform 180ms ease,
              border-color 180ms ease,
              background 180ms ease,
              box-shadow 180ms ease,
              color 180ms ease;
}

.tab-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(255, 212, 0, .40);
  box-shadow: 0 22px 55px rgba(0,0,0,.60);
  color: #fff;
}

.tab-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 212, 0, .18),
              0 22px 55px rgba(0,0,0,.60);
  border-color: rgba(255, 212, 0, .55);
}

.tab-btn.active{
  background: linear-gradient(180deg, rgba(255,212,0,.18), rgba(255,212,0,.06));
  border-color: rgba(255, 212, 0, .55);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 26px 65px rgba(0,0,0,.68),
              0 0 0 1px rgba(255,212,0,.16) inset;
}

.work-subtext{
  max-width: 860px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

@media (max-width: 768px){
  .work-tabs{ gap: 10px; }
  .tab-btn{ padding: 11px 14px; font-weight: 900; }
}

/* Panels: closed by default */
.work-panels{ margin-top: 28px; }
.work-panel{
  max-width: var(--max);
  margin: 0 auto;
  overflow: hidden;
  max-height: 0px;
  opacity: 0;
  transform: translateY(10px);
  transition: max-height 520ms cubic-bezier(.22,1,.36,1),
              opacity 520ms cubic-bezier(.22,1,.36,1),
              transform 520ms cubic-bezier(.22,1,.36,1);
}
.work-panel.active{
  opacity: 1;
  transform: translateY(0);
}
.work-panel.closing{
  opacity: 0;
  transform: translateY(10px);
}

/* Reel cards grid */
.reels-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 2px;
}

.reel-card{
  position:relative;
  border-radius: var(--radius2);
  overflow:hidden;
  cursor:pointer;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 44px rgba(0,0,0,.55);
  transform: translateY(0);
  transition: transform 260ms cubic-bezier(.22,1,.36,1),
              box-shadow 260ms cubic-bezier(.22,1,.36,1),
              border-color 260ms cubic-bezier(.22,1,.36,1);
}
.reel-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 18px 54px rgba(0,0,0,.62);
}
.reel-card img{
  width:100%;
  height: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

.reel-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top, rgba(0,0,0,.76), rgba(0,0,0,.12) 60%, rgba(0,0,0,.05));
  opacity: .95;
}

.play-icon{
  position:absolute;
  right: 14px;
  bottom: 14px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  font-size: 14px;
}

/* Desktop: remove thumbnail texts */
.reel-caption{
  position:absolute;
  left: 14px;
  bottom: 14px;
  right: 64px;
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.cap-title{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 13px;
}
.cap-sub{
  font-weight: 700;
  font-size: 12px;
  color: rgba(255,255,255,.75);
}
@media (min-width: 769px){
  .reel-caption{ display:none; }
}

/* ---------- Contact CTA section ---------- */
.contact{ padding: 90px 20px 100px; }
.contact h2{ margin: 0 0 10px; font-size: 34px; }
.contact p{ margin: 0 0 22px; color: var(--muted); font-size: 14px; }

/* ---------- Footer base ---------- */
.site-footer{
  padding: 50px 20px 60px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.40);
  text-align:center;
}

/* ---------- Responsive ---------- */
.desktop-video{ display:block; }
.mobile-video{ display:none; }

/* Mobile header: hide brand, center nav */
@media (max-width: 768px){
  section{ padding: 78px 16px; }

  .topbar-inner{ justify-content: center; }
  .topbar-brand{ display:none; }
  .topbar-nav{
    justify-content:center;
    width: 100%;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
  }
  .topbar-nav a{ padding: 7px 10px; }

  .hero{ min-height: calc(92vh - 60px); }
  .hero-content{ padding: 110px 16px 58px; }
  .hero-title{ font-size: 48px; line-height: .95; }
  .hero-subtitle{ font-size: 14px; }

  .desktop-video{ display:none; }
  .mobile-video{ display:block; }

  .services-grid{ grid-template-columns: 1fr; }
  .insights-grid{ grid-template-columns: 1fr 1fr; }
  .reels-grid{ grid-template-columns: 1fr 1fr; }

  /* FIX: remove ALL background gradients on mobile */
  body{
    background: #000 !important;
    background-image: none !important;
  }

  .svc-title, .svc-desc{
    color: rgba(255,255,255,.90);
    text-decoration: none;
  }
  .svc-desc{ color: rgba(255,255,255,.72); }
}

/* Tablet */
@media (max-width: 1024px) and (min-width: 769px){
  .services-grid{ grid-template-columns: 1fr 1fr; }
  .insights-grid{ grid-template-columns: 1fr 1fr; }
  .reels-grid{ grid-template-columns: 1fr 1fr 1fr; }
}

/* ---------- Footer (center icons + copy) ---------- */
.footer-social{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  margin-bottom: 12px;
}
.social-icon{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--yellow);
  background: rgba(255,212,0,.10);
  border: 1px solid rgba(255,212,0,.26);
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
  transition: transform 220ms cubic-bezier(.22,1,.36,1),
              background 220ms cubic-bezier(.22,1,.36,1),
              box-shadow 220ms cubic-bezier(.22,1,.36,1);
}
.social-icon:hover{
  transform: translateY(-2px);
  background: rgba(255,212,0,.14);
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
}
.footer-copy{
  color: rgba(255,255,255,.60);
  font-size: 12px;
  letter-spacing: .2px;
}

/* ---------- Reel Popup (Desktop-perfect + Mobile-safe) ---------- */
.reel-popup{
  position: fixed;
  inset: 0;
  z-index: 120;
  display:none;
}
.reel-popup.active{ display:block; }

.reel-popup-overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(10px);
}

.reel-popup-content{
  position:absolute;
  inset: 0;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 14px;
  padding: 18px;
}

.reel-popup-close{
  position: absolute;
  left: 50%;
  top: calc(14px + env(safe-area-inset-top));
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  cursor:pointer;
  z-index: 200;
  transition: transform 220ms cubic-bezier(.22,1,.36,1),
              background 220ms cubic-bezier(.22,1,.36,1);
}
.reel-popup-close:hover{
  transform: translateX(-50%) translateY(-1px);
  background: rgba(0,0,0,.68);
}

.reel-popup-close:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.68);
}

.reel-frame{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;

  height: min(78vh, 760px);
  max-height: calc(100vh - 150px);
  aspect-ratio: 9 / 16;

  border-radius: 18px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 60px rgba(0,0,0,.72);
}

@media (max-width: 768px){
  .reel-frame{
    height: min(76vh, 680px);
    max-width: calc(100vw - 28px);
  }
}

#reelPopupVideo{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#reelTapLayer{
  position:absolute;
  inset: 0;
  cursor: pointer;
  z-index: 2;
}

.reel-playpause,
.reel-mute{
  z-index: 5;
  pointer-events: auto;
}

.reel-playpause{
  position:absolute;
  left: 14px;
  bottom: 14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.55);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  cursor: pointer;
  z-index: 5;
}

.reel-mute{
  position:absolute;
  right: 14px;
  bottom: 14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.55);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  cursor: pointer;
  z-index: 6;
}

.reel-mute::before{
  content: "🔇";
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 16px;
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.reel-mute.unmuted::before{ content: "🔊"; }

.reel-playpause::before{
  content: "❚❚";
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 14px;
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  letter-spacing: -2px;
}
.reel-playpause.paused::before{
  content: "▶";
  font-size: 14px;
  letter-spacing: 0;
  transform: translateX(1px);
}

.reel-popup-actions{ display:flex; justify-content:center; }
.popup-instagram-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .3px;
  background: rgba(255,212,0,.12);
  border: 1px solid rgba(255,212,0,.32);
  color: var(--yellow);
  transition: transform 220ms cubic-bezier(.22,1,.36,1),
              background 220ms cubic-bezier(.22,1,.36,1);
}
.popup-instagram-link:hover{
  transform: translateY(-1px);
  background: rgba(255,212,0,.16);
}

/* ---------- Mobile thumbs popup ---------- */
.mobile-thumb-popup{
  position: fixed;
  inset: 0;
  z-index: 110;
  display:none;
}
.mobile-thumb-popup.active{ display:block; }

.mobile-thumb-overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.70);
  backdrop-filter: blur(8px);
}

.mobile-thumb-content{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: min(940px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow:hidden;
  border-radius: 22px;
  background: rgba(15,15,16,.92);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 85px rgba(0,0,0,.75);
  animation: modalIn 420ms cubic-bezier(.22,1,.36,1) both;
}
.mobile-thumb-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.mobile-thumb-header h3{
  margin:0;
  font-size: 14px;
  letter-spacing: .2px;
}
.mobile-thumb-close{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.42);
  color: rgba(255,255,255,.9);
  font-weight: 900;
  cursor:pointer;
}

.mobile-thumb-grid{
  padding: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  overflow:auto;
  max-height: calc(100vh - 140px);
}
.mobile-thumb-item{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: 0 16px 44px rgba(0,0,0,.55);
}
.mobile-thumb-item img{
  width:100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

/* ---------- Contact Modal ---------- */
.contact-modal{
  position: fixed;
  inset:0;
  z-index: 130;
  display:none;
}
.contact-modal.active{ display:block; }

.contact-modal-overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
}

.contact-modal-content{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: min(740px, calc(100vw - 26px));
  max-height: calc(100vh - 26px);
  overflow:auto;
  padding: 18px 18px 18px;
  border-radius: 22px;
  background: rgba(15,15,16,.92);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 85px rgba(0,0,0,.75);
  animation: modalIn 420ms cubic-bezier(.22,1,.36,1) both;
}

.form-section{
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: 0 16px 44px rgba(0,0,0,.45);
}

.form-section-title{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .28px;
  color: rgba(255,255,255,.86);
  text-transform: uppercase;
  margin: 2px 0 10px;
}

.contact-modal-close{
  position: sticky;
  top: 0;
  float:right;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.42);
  color: rgba(255,255,255,.9);
  font-weight: 900;
  cursor:pointer;
  margin-left: auto;
}
.contact-modal-content h3{
  margin: 8px 0 6px;
  font-size: 20px;
  letter-spacing: .2px;
}
.contact-modal-subtitle{
  margin: 0 0 16px;
  color: rgba(255,255,255,.70);
  font-size: 13px;
  line-height: 1.6;
}

.contact-form{
  display:flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

/* Scrollable form area (feels shorter) */
.contact-form-body{
  overflow: auto;
  min-height: 0;
  padding-right: 6px;
  margin-right: -6px;
}

/* Footer stays visible */
.contact-form-footer{
  flex: 0 0 auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(15,15,16,.92);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
.contact-submit{
  width: 100%;
  justify-content: center;
}

.form-field{ display:grid; gap: 8px; text-align:left; }
.form-field span{
  font-size: 12px;
  color: rgba(255,255,255,.76);
  font-weight: 800;
  letter-spacing: .2px;
}
.form-field span b{ color: var(--yellow); }
.form-field input,
.form-field textarea,
.form-field select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  outline:none;
  transition: border-color 220ms ease, background 220ms ease;
}

/* iOS FIX: prevent zoom-in on input focus (mobile only) */
@media (max-width: 768px){
  .contact-modal .form-field input,
  .contact-modal .form-field textarea,
  .contact-modal .form-field select{
    font-size: 16px;
  }
}

/* Contact form: 2-column grid for first 4 fields */
.contact-grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Mobile: stack them */
@media (max-width: 768px){
  /* Mobile: Name + Phone side-by-side */
  .contact-grid-2{
    grid-template-columns: 1fr 1fr;
  }

  /* Keep Brand + Email full-width (stacked) */
  .contact-grid-2 > .form-field:nth-child(3),
  .contact-grid-2 > .form-field:nth-child(4){
    grid-column: 1 / -1;
  }
}

/* FIX: Desktop dropdown option list (prevents white-on-white) */
.form-field select option{
  background: #0f0f10;      /* dark option panel */
  color: #eaeaea;           /* readable option text */
}

/* Optional: keep selected option readable on some systems */
.form-field select optgroup{
  background: #0f0f10;
  color: #eaeaea;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{
  border-color: rgba(255,212,0,.45);
  background: rgba(255,255,255,.06);
}
.form-field textarea{ resize: vertical; min-height: 96px; }

.contact-selects{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 4px;
}

.contact-fineprint{
  margin: 10px 0 0;
  color: rgba(255,255,255,.60);
  font-size: 12px;
  line-height: 1.6;
}

@keyframes modalIn{
  from{ opacity:0; transform: translate(-50%,-48%) scale(.98); }
  to{ opacity:1; transform: translate(-50%,-50%) scale(1); }
}

/* ---------- Extra premium micro-animations ---------- */
.reel-card, .insight-card, .service-box, .logo-tile{ will-change: transform; }

.service-box.svc-active{
  animation: svcFloat 1200ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes svcFloat{
  0%{ transform: translateY(0) scale(1); }
  45%{ transform: translateY(-3px) scale(1.012); }
  100%{ transform: translateY(-2px) scale(1.01); }
}

.hero-overlay{ animation: heroGlow 6s ease-in-out infinite; }
@keyframes heroGlow{
  0%,100%{ filter: saturate(1) brightness(1); }
  50%{ filter: saturate(1.05) brightness(1.04); }
}

.logo-track{ will-change: transform; }
@media (hover: hover) and (pointer: fine){
  .logo-marquee:hover .logo-track{ animation-play-state: paused; }
}


/* Mobile: allow swipe/drag on the logo marquee */
@media (max-width: 768px){
  .logo-marquee{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
  }
  .logo-marquee::-webkit-scrollbar{ display:none; }
}

@media (max-width: 768px){
  /* ✅ Keep popup centered (do NOT shrink width on an absolute/inset container) */
  .reel-popup-content{
    inset: 0;
    width: 100%;
    padding: 14px 14px 12px;
    align-items: center;
  }

  /* ✅ Make video frame perfectly centered */
  .reel-frame{
    margin-left: auto;
    margin-right: auto;
  }

  /* ✅ Align the button block under the frame */
  .reel-popup-actions{
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .mobile-thumb-content{ width: calc(100vw - 18px); }
  .contact-modal-content{ width: calc(100vw - 18px); }
  .contact-selects{ grid-template-columns: 1fr 1fr; }
  .contact-selects .form-field:last-child{ grid-column: 1 / -1; }
}

/* =========================================================
   EASTER EGG: TETRIS (Shift + K) — NO SCROLL, Auto-fit canvas
   ========================================================= */
.tetris-modal{
  position: fixed;
  inset: 0;
  z-index: 140;
  display: none;
}
.tetris-modal.active{ display:block; }

.tetris-overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.74);
  backdrop-filter: blur(12px);
}

.tetris-panel{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: min(1120px, calc(100vw - 26px));
  height: min(92vh, 860px);
  overflow: hidden; /* NO SCROLL */
  padding: 16px;
  border-radius: 22px;
  background:
    radial-gradient(900px 420px at 18% 12%, rgba(255,212,0,.10), transparent 62%),
    radial-gradient(900px 420px at 85% 14%, rgba(255,255,255,.06), transparent 62%),
    linear-gradient(180deg, rgba(18,18,20,.94), rgba(10,10,10,.90));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 90px rgba(0,0,0,.78);
  animation: modalIn 420ms cubic-bezier(.22,1,.36,1) both;
  display:flex;
  flex-direction: column;
}

.tetris-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(255,212,0,.10), transparent 35%, rgba(255,255,255,.06), transparent 70%),
    radial-gradient(500px 220px at 25% 10%, rgba(255,212,0,.08), transparent 60%),
    radial-gradient(500px 220px at 80% 15%, rgba(255,255,255,.05), transparent 60%);
  opacity: .55;
  mix-blend-mode: screen;
}

.tetris-close{
  position:absolute;
  right: 14px;
  top: 12px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.42);
  color: rgba(255,255,255,.9);
  font-weight: 900;
  cursor:pointer;
  z-index: 5;
}

.tetris-header{
  position: relative;
  z-index: 2;
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 6px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex: 0 0 auto;
}

.tetris-title-wrap h3{
  margin: 0;
  font-size: 18px;
  letter-spacing: .5px;
  font-weight: 900;
}
.tetris-sub{
  margin: 6px 0 0;
  color: rgba(255,255,255,.70);
  font-size: 13px;
  line-height: 1.45;
}
.tetris-sub b{ color: var(--yellow); }

.tetris-soundhint{
  display:inline-block;
  margin-left: 10px;
  color: rgba(255,255,255,.60);
  font-size: 12px;
}
.tetris-soundhint b{ color: var(--yellow); }

.tetris-header-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}
.tetris-btn{
  padding: 11px 14px;
  font-weight: 900;
  letter-spacing: .25px;
}

/* BODY: fixed, no scroll */
.tetris-body{
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  padding: 14px 6px 6px;
  overflow: hidden; /* NO SCROLL */
}

/* Left stage */
.tetris-stage{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 12px;
  position: relative;
  overflow:hidden;
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
  display:flex;
  flex-direction: column;
  min-height: 0;
}

.tetris-stage::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  border-radius: 18px;
  background:
    radial-gradient(420px 260px at 15% 15%, rgba(255,212,0,.12), transparent 60%),
    radial-gradient(420px 260px at 85% 20%, rgba(255,255,255,.06), transparent 62%);
  opacity: .75;
}

.tetris-stage-decor{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 0;
}
.tetris-glow{
  position:absolute;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  filter: blur(28px);
  opacity: .45;
  background: rgba(255,212,0,.18);
  animation: tGlow 5.6s ease-in-out infinite;
}
.tetris-glow.g1{ left:-60px; top: 20px; }
.tetris-glow.g2{ right:-70px; top: 80px; opacity:.35; animation-duration: 6.3s; background: rgba(255,255,255,.10); }
.tetris-glow.g3{ left: 30%; bottom:-90px; opacity:.28; animation-duration: 7.2s; background: rgba(255,212,0,.14); }

@keyframes tGlow{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-10px) scale(1.06); }
}

.tetris-canvas-wrap{
  position: relative;
  z-index: 1;
  border-radius: 18px;
  overflow:hidden;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  flex: 1 1 auto;
  min-height: 0;
  display:flex;
}

#tetrisCanvas{
  width: 100%;
  height: 100%;
  display:block;
}

/* toast overlay */
.tetris-toast{
  position:absolute;
  left:50%;
  top: 12px;
  transform: translateX(-50%) translateY(-10px);
  opacity: 0;
  pointer-events:none;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.58);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  letter-spacing: .25px;
  font-size: 12px;
  box-shadow: 0 18px 46px rgba(0,0,0,.55);
  transition: opacity 220ms ease, transform 220ms cubic-bezier(.22,1,.36,1);
}
.tetris-toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.tetris-toast.big{
  font-size: 13px;
  padding: 10px 14px;
  border-color: rgba(255,212,0,.22);
  box-shadow: 0 18px 60px rgba(255,212,0,.12), 0 18px 46px rgba(0,0,0,.60);
}

/* confetti layer */
.tetris-confetti{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  opacity: 0;
}
.tetris-confetti.boom{ opacity: 1; }

.tetris-confetti-piece{
  position:absolute;
  top: -16px;
  width: 10px;
  height: 16px;
  border-radius: 4px;
  background: rgba(255,212,0,.85);
  box-shadow: 0 10px 26px rgba(0,0,0,.40);
  animation: confettiFall 820ms cubic-bezier(.22,1,.36,1) forwards;
}
.tetris-confetti-piece:nth-child(3n){ background: rgba(255,255,255,.75); }
.tetris-confetti-piece:nth-child(4n){ background: rgba(255,212,0,.65); }
.tetris-confetti-piece:nth-child(5n){ background: rgba(180,140,255,.70); }
.tetris-confetti-piece:nth-child(7n){ background: rgba(90,215,255,.70); }

@keyframes confettiFall{
  0%{ transform: translateY(-10px) rotate(0deg); opacity: 0; }
  15%{ opacity: 1; }
  100%{ transform: translateY(620px) rotate(220deg); opacity: 0; }
}

/* mobile on-screen controls */
.tetris-mobile-controls{
  display:none;
  margin-top: 10px;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
  justify-content:center;
}
.tetris-pad-btn{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.40);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  border-radius: 14px;
  padding: 12px 14px;
  min-width: 56px;
  box-shadow: 0 18px 46px rgba(0,0,0,.50);
  transition: transform 180ms cubic-bezier(.22,1,.36,1),
              background 180ms ease,
              border-color 180ms ease;
}
.tetris-pad-btn:active{ transform: translateY(1px); }
.tetris-pad-btn:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.20);
}
.tetris-pad-wide{
  min-width: 140px;
  border-color: rgba(255,212,0,.26);
  background: rgba(255,212,0,.10);
  color: var(--yellow);
}

/* Right HUD */
.tetris-hud{
  display:flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.tetris-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 12px;
  text-align:left;
  box-shadow: 0 16px 50px rgba(0,0,0,.52);
}
.tetris-card-title{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .28px;
  color: rgba(255,255,255,.86);
  margin-bottom: 10px;
}

.tetris-stats .tetris-stat-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.78);
  font-size: 13px;
}
.tetris-stats .tetris-stat-row:last-child{ border-bottom:none; }
.tetris-stats b{ color: rgba(255,255,255,.92); font-weight: 900; }

.tetris-progress{
  margin-top: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.tetris-progress-bar{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(255,212,0,.92), rgba(255,255,255,.22));
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(255,212,0,.10);
  transition: width 320ms cubic-bezier(.22,1,.36,1);
}

.tetris-mini-note{
  margin-top: 8px;
  color: rgba(255,255,255,.55);
  font-size: 12px;
  line-height: 1.4;
}

#tetrisNext{
  width: 100%;
  height: auto;
  display:block;
  border-radius: 16px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
}

.tetris-controls-list{
  margin: 0;
  padding-left: 16px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.55;
}
.tetris-controls-list b{
  color: rgba(255,255,255,.92);
  font-weight: 900;
}

.tetris-finish-text{
  color: rgba(255,255,255,.74);
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 12px;
}

/* Make layout vertical on smaller screens */
@media (max-width: 900px){
  .tetris-body{ grid-template-columns: 1fr; }
}

/* Show on-screen controls on small screens */
@media (max-width: 760px){
  .tetris-header{
    align-items:flex-start;
    flex-direction: column;
  }
  .tetris-header-actions{
    width: 100%;
    justify-content:flex-start;
  }
  .tetris-mobile-controls{
    display:flex;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   MOBILE ONLY (iPhone): stop zoom + fix caret misalignment
   Keeps modal centered WITHOUT transform (desktop untouched)
   ========================================================= */
@media (max-width: 768px){

  /* Keep Contact modal perfectly centered + stable on iOS (no zoom/jump) */
  .contact-modal.active{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px;
  }

  .contact-modal-content{
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 740px;
    margin: 0;

    transform: none;

    /* IMPORTANT: disable the desktop translate(-50%,-50%) animation on mobile
       (it shifts the modal when we switch to flex centering) */
    animation: none !important;

    /* keep it inside the viewport */
    max-height: calc(100vh - 18px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent iPhone auto-zoom on focus + reduce caret glitches */
  .contact-modal .form-field input,
  .contact-modal .form-field textarea,
  .contact-modal .form-field select{
    font-size: 16px;
    line-height: 1.35;
  }
}




/* =========================================================
   MOBILE CONTACT MODAL STABILITY (iOS: no zoom, no misalign)
   ========================================================= */
@media (max-width: 768px){
  /* Use flex centering (avoid transform bugs / caret misplacement) */
  .contact-modal.active{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 10px;
  }
  .contact-modal-content{
    position: relative;
    left: auto;
    top: auto;
    transform: none;

    width: 100%;
    max-height: calc(100vh - 20px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent iOS Safari auto-zoom on inputs */
  .contact-modal-content input,
  .contact-modal-content textarea,
  .contact-modal-content select{
    font-size: 16px;
    line-height: 1.25;
  }

  /* Keep Name + Phone side-by-side on phone */
  .contact-grid-2{
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}



/* Tetris: subtle shake on line clear */
#tetrisCanvasWrap.tetris-shake{
  animation: tShake 180ms cubic-bezier(.22,1,.36,1);
  transform-origin: center;
}
@keyframes tShake{
  0%{ transform: translateX(0); }
  25%{ transform: translateX(var(--shake-amp, 2px)); }
  55%{ transform: translateX(calc(var(--shake-amp, 2px) * -1)); }
  78%{ transform: translateX(calc(var(--shake-amp, 2px) * 0.6)); }
  100%{ transform: translateX(0); }
}