/* ═══════════════════════════════════════════
   13thStation — Service Pages Shared Styles
   ═══════════════════════════════════════════ */


/* Shared reveal animation base — used by .cf-reveal, .cr-reveal, .vp-reveal, .em-reveal */
[class*="-reveal"] {
  opacity:0; transform:translateY(30px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
[class*="-reveal"].shown {
  opacity:1 !important; transform:none !important;
}

/* ── Shared: Contact Section ─────────────────────────────────────
   This block is used by ALL 6 service pages.
   Duplicated contact-section styles consolidated here.
   ─────────────────────────────────────────────────────────────── */
@keyframes contactLeft  { from { opacity:0; transform:translateX(-36px); } to { opacity:1; transform:none; } }
@keyframes contactRight { from { opacity:0; transform:translateX( 36px); } to { opacity:1; transform:none; } }
.contact-section-dark { background:#F8F8F6; position:relative; overflow:hidden; padding:60px 0; }
.contact-sub-vibrant { font-size:16px; line-height:1.72; color:var(--muted); font-weight:500; }
.contact-left-anim  { opacity:0; }
.contact-right-anim { opacity:0; }
.contact-left-anim.contact-visible  { animation:contactLeft  0.7s ease both; }
.contact-right-anim.contact-visible { animation:contactRight 0.7s ease both; }
.contact-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:48px; align-items:start; }
.contact-info-cards { display:flex; flex-direction:column; gap:14px; }
.c-card { display:flex; align-items:flex-start; gap:16px; padding:20px 24px; border-radius:16px; background:#fff; border:1px solid rgba(0,0,0,.07); box-shadow:0 2px 12px rgba(0,0,0,.05); opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease, border-color .3s, box-shadow .3s; }
.c-card.c-card-visible { opacity:1; transform:none; }
.c-card:hover { border-color:rgba(245,196,0,.45); box-shadow:0 8px 24px rgba(245,196,0,.12); }
.c-card-icon { width:46px; height:46px; border-radius:13px; flex-shrink:0; background:linear-gradient(135deg,rgba(245,196,0,.20),rgba(245,196,0,.08)); border:1px solid rgba(245,196,0,.28); display:flex; align-items:center; justify-content:center; font-size:18px; transition:transform .25s, background .25s; }
.c-card:hover .c-card-icon { transform:scale(1.1); background:linear-gradient(135deg,rgba(245,196,0,.32),rgba(245,196,0,.14)); }
.c-label { font-size:10px; text-transform:uppercase; letter-spacing:1.8px; color:var(--gold-dk); font-weight:700; margin-bottom:5px; }
.c-val   { font-size:14px; color:rgba(17,17,17,.72); line-height:1.55; }
.c-val a { color:rgba(17,17,17,.72); transition:color .2s; }
.c-val a:hover { color:var(--gold-dk); }
.form-card { background:#fff; border:1px solid rgba(0,0,0,.08); box-shadow:0 8px 36px rgba(0,0,0,.08); border-radius:24px; padding:38px; }
.form-card h3 { font-size:20px; font-weight:700; margin-bottom:5px; color:var(--text); }
.form-card p  { font-size:13px; color:var(--muted); margin-bottom:26px; }
.fr { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fg { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.fg label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:rgba(17,17,17,.45); }
.fg input,.fg select,.fg textarea { width:100%; padding:12px 15px; border-radius:10px; background:#FAFAF8; border:1px solid rgba(0,0,0,.11); color:var(--text); font-family:var(--font); font-size:14px; outline:none; transition:border-color .2s, background .2s; -webkit-appearance:none; appearance:none; }
.fg input::placeholder,.fg textarea::placeholder { color:rgba(17,17,17,.30); }
.fg input:focus,.fg select:focus,.fg textarea:focus { border-color:rgba(245,196,0,.60); background:rgba(245,196,0,.04); box-shadow:0 0 0 3px rgba(245,196,0,.12); }
.fg textarea { resize:vertical; min-height:105px; }
.fg select option { background:#fff; color:#111; }
.form-submit { width:100%; padding:14px; border-radius:999px; background:linear-gradient(135deg,var(--gold),var(--gold-amber)); color:#000; font-size:15px; font-weight:700; font-family:var(--font); border:none; cursor:pointer; transition:all .25s; }
.form-submit:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(245,196,0,.38); }
@media (max-width:768px) {
  .contact-grid { grid-template-columns:1fr; gap:28px; }
  .form-card    { padding:28px 22px; }
  .fr           { grid-template-columns:1fr; }
}


/* ── Shared: Common Animations ───────────────────────────────── */
@keyframes goldBlink { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }


/* ═══════════════════════════════════════════════════════════════
   ── Corporate Films ──
   ═══════════════════════════════════════════════════════════════ */

/* ── ANIMATIONS ─────────────────────────────────────────── */
@keyframes wipeIn {
  from { clip-path:inset(0 100% 0 0); }
  to   { clip-path:inset(0 0 0 0); }
}
@keyframes lineExtend {
  from { width:0; }
  to   { width:64px; }
}
@keyframes imgSlideIn {
  from { clip-path:inset(0 0 0 100%); transform:scale(1.06); }
  to   { clip-path:inset(0 0 0 0);    transform:scale(1); }
}
@keyframes floatUp {
  from { opacity:0; transform:translateY(44px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes rowAccent {
  from { width:0; }
  to   { width:4px; }
}
@keyframes dotPop {
  0%   { transform:scale(0); opacity:0; }
  60%  { transform:scale(1.15); opacity:1; }
  100% { transform:scale(1); opacity:1; }
}
@keyframes hLineDraw {
  from { transform:scaleX(0); }
  to   { transform:scaleX(1); }
}
@keyframes statSlideUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:none; }
}
@keyframes spotScale {
  from { opacity:0; transform:scale(.97); }
  to   { opacity:1; transform:scale(1); }
}

/* ── SCROLL REVEAL (same pattern as .cr-reveal, .vp-reveal, .em-reveal — see consolidated [class*="-reveal"] at top) ── */
.cf-reveal {
  opacity:0;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.cf-reveal.up     { transform:translateY(32px); }
.cf-reveal.left   { transform:translateX(-32px); }
.cf-reveal.right  { transform:translateX(32px); }
.cf-reveal.shown  { opacity:1 !important; transform:none !important; }


/* ════════════════════════════════════════════
   1. HERO — Vertical split: image | content
════════════════════════════════════════════ */
.cf-hero {
  position:relative;
  background:#F5F5F2;
  padding:80px 0 48px;
  overflow:hidden;
}

/* Row layout */
.cfh-row {
  display:grid; grid-template-columns:1fr 1fr;
  gap:56px; align-items:center;
}

/* LEFT: Content */
.cfh-content {
  position:relative; z-index:2;
}
/* Breadcrumb */
.cfh-breadcrumb {
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--muted); margin-bottom:16px;
}
.cfh-breadcrumb a   { color:var(--muted); transition:color .2s; }
.cfh-breadcrumb a:hover { color:var(--text); }
.cfh-breadcrumb .sep { opacity:.4; }
.cfh-breadcrumb .cur { color:var(--gold-dk); font-weight:600; }

/* Pills */
.cfh-pills { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.cfh-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 16px; border-radius:999px;
  background:rgba(245,196,0,.08); border:1px solid rgba(245,196,0,.18);
  font-size:12px; font-weight:600; color:var(--gold-dk);
}
.cfh-pill::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--gold);
}

/* Headline */
.cfh-headline {
  font-size:clamp(32px,4.5vw,52px);
  font-weight:800; line-height:1.1;
  letter-spacing:-1.5px; color:var(--text);
  margin-bottom:20px;
}
.cfh-headline .g {
  background:linear-gradient(120deg,var(--gold) 0%,var(--gold-amber) 55%,var(--gold) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.cfh-sub {
  font-size:15px; line-height:1.78;
  color:var(--muted); margin-bottom:28px;
}
.cfh-ctas {
  display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px;
}
.cfh-ctas .btn-outline { color:var(--text); border-color:rgba(0,0,0,.22); }
.cfh-ctas .btn-outline:hover { border-color:var(--gold); color:var(--gold-dk); }
.cfh-meta {
  display:flex; gap:24px; align-items:center;
  padding-top:20px; border-top:1px solid rgba(0,0,0,.08);
}
.cfh-meta-n { font-size:22px; font-weight:800; color:var(--text); letter-spacing:-1px; display:block; line-height:1; }
.cfh-meta-l { font-size:10px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--muted); display:block; margin-top:3px; }
.cfh-meta-sep { width:1px; height:32px; background:rgba(0,0,0,.10); flex-shrink:0; }

/* RIGHT: Image with frame + floating cards */
.cfh-img-wrap {
  position:relative;
  align-self:center;
}
.cfh-img-frame {
  border-radius:20px; overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.12);
  min-height:480px;
}
.cfh-img-frame::before {
  content:''; position:absolute; top:-8px; left:-8px;
  width:45%; height:45%;
  border-top:3px solid var(--gold); border-left:3px solid var(--gold);
  border-radius:20px 0 0 0;
  z-index:1;
}
.cfh-img-frame img {
  width:100%; height:100%; object-fit:cover; display:block;
  min-height:480px;
  animation: imgSlideIn 1s cubic-bezier(.22,1,.36,1) .2s both;
}

/* Video in hero frame */
.em-video-frame { position:relative; overflow:visible; }
.em-video-frame::before {
  content:''; position:absolute; top:-8px; left:-8px;
  width:45%; height:45%;
  border-top:3px solid var(--gold); border-left:3px solid var(--gold);
  border-radius:20px 0 0 0;
  z-index:1;
}
.em-video-frame iframe {
  width:100%; height:100%; min-height:480px;
  border:0; display:block;
  border-radius:20px;
  animation: imgSlideIn 1s cubic-bezier(.22,1,.36,1) .2s both;
}

/* Floating cards */
.cfh-float-card {
  position:absolute; z-index:3;
  display:flex; align-items:center; gap:10px;
  background:#fff; border-radius:12px;
  padding:10px 16px;
  box-shadow:0 6px 24px rgba(0,0,0,.10);
  border:1px solid rgba(0,0,0,.06);
  animation: fadeIn .6s ease 1s both;
}
.cfh-float-card svg { color:var(--gold-dk); flex-shrink:0; }
.cfh-float-card strong { display:block; font-size:13px; font-weight:700; color:var(--text); }
.cfh-float-card span { display:block; font-size:11px; color:var(--muted); }
.cfh-float-top { top:16px; right:16px; }
.cfh-float-bottom { bottom:16px; left:16px; }


/* ════════════════════════════════════════════
   2. MARQUEE
════════════════════════════════════════════ */
@keyframes mScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.cf-marquee {
  overflow:hidden; position:relative; z-index:1;
  background:linear-gradient(135deg,var(--gold) 0%,#E6AD00 50%,var(--gold) 100%);
  padding:15px 0;
}
.cf-marquee-track {
  display:flex; width:max-content;
  animation:mScroll 32s linear infinite;
}
.cf-marquee-track:hover { animation-play-state:paused; }
.cf-marquee-item {
  padding:0 32px; font-size:13px; font-weight:800;
  letter-spacing:1.8px; text-transform:uppercase; color:#000;
  white-space:nowrap; display:flex; align-items:center; gap:12px;
}
.cf-marquee-item::after { content:'✦'; font-size:9px; opacity:.45; }


/* ════════════════════════════════════════════
   3. STATS
════════════════════════════════════════════ */
.cf-stats {
  position:relative; z-index:1;
  background:var(--bg); padding:60px 0;
  border-bottom:1px solid rgba(0,0,0,.07);
}
.cf-stats-row {
  max-width:1100px; margin:0 auto; padding:0 48px;
  display:flex; align-items:center; justify-content:space-between;
}
.cf-stat {
  flex:1; text-align:center; position:relative;
  padding:0 20px;
}
.cf-stat + .cf-stat::before {
  content:''; position:absolute; left:0; top:10%; bottom:10%;
  width:1px; background:rgba(0,0,0,.10);
}
.cf-stat-n {
  font-size:clamp(44px,5.5vw,72px); font-weight:800;
  letter-spacing:-2.5px; line-height:1; display:block; margin-bottom:6px;
  color:var(--text);
  transition:color .3s;
}
.cf-stat-n sub { font-size:.45em; letter-spacing:0; font-weight:600; }
.cf-stat:hover .cf-stat-n { color:var(--gold-dk); }
.cf-stat-l {
  font-size:12px; font-weight:600; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--muted); display:block;
}


/* ════════════════════════════════════════════
   4. FILM TYPES — Editorial numbered ROW LIST
════════════════════════════════════════════ */
.cf-types {
  position:relative; z-index:1;
  background:var(--bg-alt); padding:60px 0;
}
.cf-types-head {
  max-width:1200px; margin:0 auto 56px; padding:0 48px;
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end;
}
.cf-types-head .section-title { text-align:left; margin-bottom:0; }
.cf-types-head-sub { font-size:15px; line-height:1.78; color:var(--muted); }

.cf-types-list {
  max-width:1200px; margin:0 auto; padding:0 48px;
}
.cf-type-row {
  display:grid;
  grid-template-columns:72px 1fr auto 160px;
  gap:32px; align-items:center;
  padding:28px 20px;
  border-bottom:1px solid rgba(0,0,0,.08);
  position:relative; overflow:hidden; cursor:default;
  transition:background .25s;
}
.cf-type-row:first-child { border-top:1px solid rgba(0,0,0,.08); }
/* Gold left accent slides in on hover */
.cf-type-row::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:0;
  background:linear-gradient(135deg,var(--gold),var(--gold-amber));
  transition:width .3s cubic-bezier(.22,1,.36,1);
}
.cf-type-row:hover { background:rgba(245,196,0,.04); }
.cf-type-row:hover::before { width:4px; }

.cf-type-num {
  font-size:13px; font-weight:800; color:rgba(0,0,0,.20);
  letter-spacing:2px; user-select:none;
}
.cf-type-body { }
.cf-type-name {
  font-size:20px; font-weight:700; color:var(--text); letter-spacing:-.3px;
  display:flex; align-items:center; gap:12px; margin-bottom:5px;
}
.cf-type-icon { font-size:18px; }
.cf-type-desc { font-size:14px; line-height:1.65; color:var(--muted); }
.cf-type-tag {
  font-size:10px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--gold-dk);
  background:rgba(245,196,0,.10); border:1px solid rgba(245,196,0,.22);
  padding:5px 12px; border-radius:999px; white-space:nowrap; text-align:center;
}
.cf-type-link {
  font-size:13px; font-weight:700; color:var(--muted);
  transition:color .2s; text-align:right; white-space:nowrap;
}
.cf-type-row:hover .cf-type-link { color:var(--gold-dk); }


/* ════════════════════════════════════════════
   5. SHOWCASE — Featured work section
════════════════════════════════════════════ */
.cf-showcase {
  position:relative; z-index:1;
  background:var(--bg); padding:60px 0;
  overflow:hidden;
}
.cf-showcase-inner { max-width:1200px; margin:0 auto; padding:0 48px; }

.cf-showcase-head { margin-bottom:32px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.cf-showcase-head .section-title { margin-bottom:0; text-align:left; }
.cf-showcase-head a { font-size:13px; font-weight:700; color:var(--gold-dk); white-space:nowrap; flex-shrink:0; padding-bottom:4px; border-bottom:1.5px solid rgba(185,120,0,.30); transition:border-color .2s; }
.cf-showcase-head a:hover { border-color:var(--gold-dk); }

/* Featured large card */
.cf-feature-card {
  display:grid; grid-template-columns:1.2fr 1fr; gap:0;
  border-radius:20px; overflow:hidden;
  box-shadow:0 16px 64px rgba(0,0,0,.12);
  border:1px solid rgba(0,0,0,.07);
  margin-bottom:20px;
}
.cf-fc-img {
  position:relative; overflow:hidden; min-height:420px;
}
.cf-fc-img img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s ease;
}
.cf-feature-card:hover .cf-fc-img img { transform:scale(1.04); }
/* Video embed in feature card */
.cf-fc-video { cursor:pointer; }
.cf-fc-video .video-play {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.9);
  background:none; border:none; cursor:pointer;
  opacity:.9; z-index:2;
  transition:opacity .3s, transform .3s;
}
.cf-fc-video:hover .video-play { opacity:1; transform:translate(-50%,-50%) scale(1); }
.cf-fc-video:hover img { filter:brightness(.6); }
.cf-fc-video iframe {
  position:absolute; top:0; left:0;
  width:100%; height:100%; border:0; z-index:2;
}
/* "Featured" label on image */
.cf-fc-label {
  position:absolute; top:20px; left:20px;
  background:linear-gradient(135deg,var(--gold),var(--gold-amber));
  color:#000; font-size:10px; font-weight:800;
  letter-spacing:2px; text-transform:uppercase;
  padding:5px 12px; border-radius:999px;
}

.cf-fc-body {
  background:var(--bg-dark); padding:48px 44px;
  display:flex; flex-direction:column; justify-content:center;
}
.cf-fc-cat {
  font-size:10px; font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--gold); margin-bottom:16px;
  display:flex; align-items:center; gap:8px;
}
.cf-fc-cat::before { content:''; width:20px; height:1.5px; background:var(--gold); }
.cf-fc-title {
  font-size:clamp(22px,2.8vw,34px); font-weight:800;
  color:#fff; letter-spacing:-.8px; line-height:1.15; margin-bottom:16px;
}
.cf-fc-desc {
  font-size:15px; line-height:1.78;
  color:rgba(255,255,255,.55); margin-bottom:28px;
}
.cf-fc-tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:32px; }
.cf-fc-tag {
  font-size:11px; font-weight:600; color:rgba(255,255,255,.50);
  border:1px solid rgba(255,255,255,.15); padding:4px 12px; border-radius:999px;
}

/* Three smaller project cards */
.cf-projects-row {
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.cf-proj-card {
  border-radius:16px; overflow:hidden; position:relative;
  border:1px solid rgba(0,0,0,.07);
  box-shadow:0 4px 20px rgba(0,0,0,.06);
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.cf-proj-card:hover { transform:translateY(-6px); box-shadow:0 18px 48px rgba(0,0,0,.12); }
.cf-proj-card-img {
  height:200px; overflow:hidden; position:relative;
}
.cf-proj-card-img img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s ease;
}
.cf-proj-card:hover .cf-proj-card-img img { transform:scale(1.06); }
.cf-proj-card-img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.45));
}
.cf-proj-card-body {
  padding:20px; background:#fff;
  border-top:1px solid rgba(0,0,0,.06);
}
.cf-proj-cat {
  font-size:10px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--gold-dk); margin-bottom:6px;
}
.cf-proj-title {
  font-size:16px; font-weight:700; color:var(--text); letter-spacing:-.2px; margin-bottom:4px;
}
.cf-proj-sub { font-size:13px; color:var(--muted); }


/* ════════════════════════════════════════════
   6. PROCESS — Horizontal timeline
════════════════════════════════════════════ */
.cf-process {
  position:relative; z-index:1;
  background:var(--bg-dark); padding:60px 0;
  overflow:hidden;
}
.cf-process-inner { max-width:1200px; margin:0 auto; padding:0 48px; }
.cf-process-head { text-align:center; margin-bottom:40px; }
.cf-process-head .section-title { color:#fff; }
.cf-process-head .section-sub   { color:rgba(255,255,255,.50); }

/* The horizontal timeline track */
.cf-h-timeline {
  position:relative;
  padding:0;
}
/* Center horizontal line - drawn via JS trigger */
.cf-h-timeline::before {
  content:''; position:absolute; left:0; right:0;
  top:50%; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold) 5%, var(--gold) 95%, transparent);
  transform:translateY(-50%) scaleX(0);
  transform-origin:left;
  transition:transform 1.4s cubic-bezier(.22,1,.36,1);
  z-index:0;
}
.cf-h-timeline.line-drawn::before { transform:translateY(-50%) scaleX(1); }

/* Steps wrapper - 4 equal columns */
.cf-h-steps {
  display:grid; grid-template-columns:repeat(4,1fr);
  width:100%; position:relative; z-index:1;
}

.cf-h-step {
  display:grid;
  grid-template-rows:1fr auto 1fr;
  min-height:320px;
  justify-items:center;
  opacity:0;
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.cf-h-step:nth-child(odd)  { transform:translateY(-20px); }
.cf-h-step:nth-child(even) { transform:translateY(20px); }
.cf-h-step.step-in { opacity:1; transform:none; }

.cf-h-step:nth-child(1) { --pop-delay:.15s; }
.cf-h-step:nth-child(2) { --pop-delay:.35s; }
.cf-h-step:nth-child(3) { --pop-delay:.55s; }
.cf-h-step:nth-child(4) { --pop-delay:.75s; }

.cf-h-area-top {
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
  width:100%; padding:0 12px;
}
.cf-h-area-bottom {
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start;
  width:100%; padding:0 12px;
}
.cf-h-area-empty { /* spacer row */ }

/* Vertical connector lines */
.cf-h-vline {
  width:2px; height:36px; flex-shrink:0;
}
.cf-h-area-top    .cf-h-vline { background:linear-gradient(to bottom, rgba(245,196,0,.12), var(--gold)); }
.cf-h-area-bottom .cf-h-vline { background:linear-gradient(to bottom, var(--gold), rgba(245,196,0,.12)); }

/* The dot ON the line */
.cf-h-dot {
  width:50px; height:50px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),var(--gold-amber));
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; color:#000;
  box-shadow:0 0 0 6px rgba(245,196,0,.12), 0 6px 22px rgba(245,196,0,.40);
  position:relative; z-index:2;
}
.cf-h-step.step-in .cf-h-dot {
  animation:dotPop .5s cubic-bezier(.22,1,.36,1) var(--pop-delay,0s) both;
}

/* Step card */
.cf-h-card {
  background:rgba(255,255,255,.05);
  border:1px solid rgba(245,196,0,.15);
  border-radius:16px; padding:22px 20px;
  text-align:center; width:100%;
  box-sizing:border-box;
  transition:background .3s, border-color .3s;
}
.cf-h-step:hover .cf-h-card {
  background:rgba(255,255,255,.09);
  border-color:rgba(245,196,0,.30);
}
.cf-h-step-label {
  font-size:10px; font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--gold); margin-bottom:6px;
}
.cf-h-step-title {
  font-size:16px; font-weight:700; color:#fff; letter-spacing:-.2px; margin-bottom:8px;
}
.cf-h-step-desc {
  font-size:12px; line-height:1.65; color:rgba(255,255,255,.45);
}


/* ════════════════════════════════════════════
   7. WHY US — Benefit card grid
════════════════════════════════════════════ */
.cf-why {
  position:relative; z-index:1;
  background:var(--bg-alt); padding:60px 0;
}
.cf-why-head {
  max-width:1200px; margin:0 auto 52px; padding:0 48px;
  text-align:center;
}
.cf-why-head .section-title { text-align:center; }
.cf-why-head .section-sub { max-width:520px; margin:0 auto; }

.cf-why-grid {
  max-width:1200px; margin:0 auto; padding:0 48px;
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
/* 5th card spans full width */
.cf-why-card:nth-child(5) { grid-column:1 / -1; }

.cf-why-card {
  background:#fff;
  border:1.5px solid rgba(0,0,0,.06);
  border-radius:20px;
  padding:36px 40px;
  position:relative; overflow:hidden;
  display:flex; gap:28px; align-items:flex-start;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .3s;
}
.cf-why-card:hover {
  transform:translateY(-5px);
  box-shadow:0 20px 56px rgba(0,0,0,.09);
  border-color:rgba(245,196,0,.35);
}
/* Gold left bar slides in on hover */
.cf-why-card::before {
  content:''; position:absolute; left:0; top:16%; bottom:16%;
  width:3px; background:linear-gradient(to bottom, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  border-radius:0 2px 2px 0;
  transform:scaleY(0); transform-origin:center;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.cf-why-card:hover::before { transform:scaleY(1); }

/* Decorative background number */
.cf-why-card-bg {
  position:absolute; right:20px; bottom:10px;
  font-size:90px; font-weight:800; line-height:1;
  color:rgba(0,0,0,.03); letter-spacing:-4px;
  pointer-events:none; user-select:none;
}

.cf-why-card-left { flex-shrink:0; text-align:center; min-width:64px; }
.cf-why-card-icon {
  width:52px; height:52px; border-radius:14px;
  background:rgba(245,196,0,.10); border:1px solid rgba(245,196,0,.22);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; margin:0 auto 10px;
}
.cf-why-card-n {
  font-size:clamp(32px,3.5vw,46px); font-weight:800;
  letter-spacing:-2px; line-height:1; color:var(--gold-dk); display:block;
}

.cf-why-card-right { flex:1; }
.cf-why-card-claim {
  font-size:18px; font-weight:700; color:var(--text);
  letter-spacing:-.3px; line-height:1.25; margin-bottom:10px;
}
.cf-why-card-detail {
  font-size:14px; line-height:1.72; color:var(--muted);
}

/* 5th card: horizontal layout on large screen */
.cf-why-card:nth-child(5) {
  align-items:center;
}
.cf-why-card:nth-child(5) .cf-why-card-right {
  display:flex; gap:40px; align-items:center;
}
.cf-why-card:nth-child(5) .cf-why-card-detail { flex:1; }


/* ════════════════════════════════════════════
   8. TESTIMONIALS — Spotlight format
════════════════════════════════════════════ */
.cf-testi {
  position:relative; z-index:1;
  background:var(--bg); padding:60px 0;
}
.cf-testi-inner { max-width:1200px; margin:0 auto; padding:0 48px; }
.cf-testi-head  { text-align:center; margin-bottom:48px; }

/* Trusted-by brand strip */
.cf-trusted-strip {
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:10px 16px; margin-bottom:32px;
}
.cf-trusted-label {
  font-size:11px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--muted); margin-right:4px;
}
.cf-trusted-badge {
  padding:6px 16px; border-radius:999px;
  border:1.5px solid rgba(0,0,0,.10); background:#fff;
  font-size:13px; font-weight:700; color:rgba(0,0,0,.55);
  letter-spacing:.3px;
}

/* Spotlight quote */
.cf-spotlight {
  position:relative;
  background:var(--bg-dark);
  border-radius:24px; padding:64px 72px;
  overflow:hidden; margin-bottom:20px;
  opacity:0; transform:scale(.97);
  transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);
  border:1px solid rgba(245,196,0,.10);
}
.cf-spotlight.spot-in { opacity:1; transform:scale(1); }
/* Subtle gold glow orb */
.cf-spotlight::before {
  content:''; position:absolute; right:-80px; top:-80px;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(245,196,0,.07) 0%, transparent 70%);
  pointer-events:none;
}
/* Background quote mark decoration */
.cf-spot-deco {
  position:absolute; right:36px; top:-10px;
  font-size:260px; line-height:1; font-family:Georgia,serif;
  color:rgba(245,196,0,.08); font-weight:700;
  user-select:none; pointer-events:none;
}
.cf-spot-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.cf-spot-stars { color:var(--gold); font-size:17px; letter-spacing:3px; }
.cf-spot-verified {
  font-size:11px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--gold); opacity:.7;
}
.cf-spot-quote {
  font-size:clamp(20px,2.4vw,28px); font-weight:600;
  line-height:1.58; color:#fff; letter-spacing:-.3px;
  max-width:800px; margin-bottom:36px; font-style:italic;
  position:relative; z-index:1;
}
.cf-spot-quote em { font-style:normal; color:var(--gold); }
.cf-spot-footer {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  border-top:1px solid rgba(255,255,255,.08); padding-top:28px;
  position:relative; z-index:1;
}
.cf-spot-author { display:flex; align-items:center; gap:16px; }
.cf-spot-avatar {
  width:54px; height:54px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),var(--gold-amber));
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:800; color:#000;
  box-shadow:0 4px 16px rgba(245,196,0,.30);
}
.cf-spot-name { font-size:16px; font-weight:700; color:#fff; }
.cf-spot-role { font-size:13px; color:rgba(255,255,255,.40); margin-top:3px; }
.cf-spot-company {
  font-size:11px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:rgba(245,196,0,.60);
  padding:6px 16px; border-radius:999px;
  background:rgba(245,196,0,.08); border:1px solid rgba(245,196,0,.18);
  white-space:nowrap; flex-shrink:0;
}

/* Two smaller quotes side by side */
.cf-mini-quotes {
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.cf-mini-card {
  background:#fff; border:1.5px solid rgba(0,0,0,.07);
  border-radius:18px; padding:32px;
  position:relative; overflow:hidden;
  opacity:0; transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease, box-shadow .3s, border-color .3s;
}
.cf-mini-card.mini-in { opacity:1; transform:none; }
.cf-mini-card:hover { transform:translateY(-5px); box-shadow:0 16px 48px rgba(0,0,0,.09); border-color:rgba(245,196,0,.28); }
/* Gold top accent bar */
.cf-mini-card::before {
  content:''; position:absolute; top:0; left:24px; right:24px; height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-amber));
  border-radius:0 0 4px 4px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.cf-mini-card:hover::before { transform:scaleX(1); }
.cf-mini-stars { color:var(--gold); font-size:13px; letter-spacing:2px; margin-bottom:14px; }
.cf-mini-quote {
  font-size:14px; line-height:1.75; color:var(--muted);
  font-style:italic; margin-bottom:20px;
}
.cf-mini-author { display:flex; align-items:center; gap:12px; padding-top:16px; border-top:1px solid rgba(0,0,0,.07); }
.cf-mini-avatar {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),var(--gold-amber));
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:#000;
}
.cf-mini-name { font-size:13px; font-weight:700; color:var(--text); }
.cf-mini-role { font-size:11px; color:var(--muted); margin-top:2px; }


/* ════════════════════════════════════════════
   9. FAQ
════════════════════════════════════════════ */
.cf-faq {
  position:relative; z-index:1;
  background:var(--bg-dark); padding:60px 0;
}
.cf-faq-layout {
  max-width:1200px; margin:0 auto; padding:0 48px;
  display:grid; grid-template-columns:320px 1fr; gap:80px; align-items:start;
}

/* Left sticky panel */
.cf-faq-left {
  position:sticky; top:110px;
}
.cf-faq-left .section-title { color:#fff; text-align:left; margin-bottom:0; }
.cf-faq-left .section-sub   { color:rgba(255,255,255,.50); margin-top:12px; text-align:left; }
.cf-faq-left-cta { margin-top:32px; }
.cf-faq-left-divider {
  height:1px; background:rgba(255,255,255,.08); margin:36px 0;
}
.cf-faq-left-stat { }
.cf-faq-stat-n {
  font-size:52px; font-weight:800; letter-spacing:-2px; line-height:1;
  color:var(--gold); display:block;
}
.cf-faq-stat-l {
  font-size:11px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:rgba(255,255,255,.35); margin-top:6px; display:block;
}
.cf-faq-contact-note {
  margin-top:20px; font-size:13px; line-height:1.65; color:rgba(255,255,255,.35);
}
.cf-faq-contact-note a { color:var(--gold); font-weight:600; }

/* Right: accordion */
.cf-faq-acc { }
.cf-faq-item {
  border-bottom:1px solid rgba(255,255,255,.08);
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease;
}
.cf-faq-item:first-child { border-top:1px solid rgba(255,255,255,.08); }
.cf-faq-item.faq-in { opacity:1; transform:none; }
.cf-faq-q {
  width:100%; background:none; border:none; cursor:pointer;
  text-align:left; padding:24px 0;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-family:var(--font); font-size:16px; font-weight:600; color:#fff;
  transition:color .2s;
}
.cf-faq-q:hover { color:var(--gold); }
.cf-faq-icon {
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; color:rgba(255,255,255,.40); transition:all .28s; line-height:1;
}
.cf-faq-item.open .cf-faq-icon { transform:rotate(45deg); background:rgba(245,196,0,.15); color:var(--gold); border-color:rgba(245,196,0,.30); }
.cf-faq-a {
  max-height:0; overflow:hidden;
  font-size:15px; line-height:1.80; color:rgba(255,255,255,.48);
  transition:max-height .40s cubic-bezier(.4,0,.2,1), padding .28s;
  padding-bottom:0;
}
.cf-faq-item.open .cf-faq-a { max-height:300px; padding-bottom:24px; }


/* ════════════════════════════════════════════
   10. CTA
════════════════════════════════════════════ */
.cf-cta {
  position:relative; z-index:1;
  background:var(--bg-dark); padding:52px 0;
  text-align:center; overflow:hidden;
}
/* Background image overlay */
.cf-cta-bg {
  position:absolute; inset:0;
  background:url('/assets/images/chroma-service-a.jpg') center/cover no-repeat;
  opacity:.25; pointer-events:none;
}
/* Gold radial glow */
.cf-cta::before {
  content:''; position:absolute; left:50%; top:60%;
  width:800px; height:800px; border-radius:50%;
  background:radial-gradient(circle,rgba(245,196,0,.09) 0%,transparent 65%);
  transform:translate(-50%,-50%); pointer-events:none;
}
/* Top decorative line */
.cf-cta::after {
  content:''; position:absolute; top:0; left:50%;
  transform:translateX(-50%);
  width:120px; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.cf-cta-inner { position:relative; z-index:1; max-width:800px; margin:0 auto; padding:0 32px; }
.cf-cta-overline {
  font-size:10px; font-weight:700; letter-spacing:4px; text-transform:uppercase;
  color:var(--gold); display:flex; align-items:center; justify-content:center;
  gap:16px; margin-bottom:20px; opacity:.85;
}
.cf-cta-overline::before, .cf-cta-overline::after {
  content:''; width:48px; height:1px; background:var(--gold); opacity:.4;
}
.cf-cta-title {
  font-size:clamp(36px,5vw,64px); font-weight:800;
  line-height:.95; letter-spacing:-2px; color:#fff;
  margin-bottom:20px;
}
.cf-cta-title .g {
  background:linear-gradient(120deg,var(--gold) 0%,var(--gold-amber) 55%,var(--gold) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.cf-cta-sub {
  font-size:15px; line-height:1.72; color:rgba(255,255,255,.52);
  max-width:500px; margin:0 auto 28px;
}
.cf-cta-acts { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:20px; }
/* Mini stats row below buttons */
.cf-cta-stats {
  display:flex; align-items:center; justify-content:center; gap:0;
  border:1px solid rgba(255,255,255,.10); border-radius:16px;
  max-width:480px; margin:0 auto; overflow:hidden;
}
.cf-cta-stat {
  flex:1; padding:18px 20px; text-align:center;
  border-right:1px solid rgba(255,255,255,.10);
}
.cf-cta-stat:last-child { border-right:none; }
.cf-cta-stat-n {
  font-size:24px; font-weight:800; color:var(--gold); letter-spacing:-1px; display:block; line-height:1;
}
.cf-cta-stat-l {
  font-size:10px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  color:rgba(255,255,255,.35); display:block; margin-top:4px;
}


/* ════════════════════════════════════════════
   11. CONTACT FORM
════════════════════════════════════════════ */
.cf-contact {
  position:relative; z-index:1;
  background:var(--bg); padding:60px 0;
}
.cf-contact-grid {
  max-width:1200px; margin:0 auto; padding:0 48px;
  display:grid; grid-template-columns:1fr 1.5fr; gap:0; align-items:start;
}

/* Left info column - dark bg */
.cf-ci {
  background:var(--bg-dark);
  border-radius:24px 0 0 24px;
  padding:52px 44px;
  min-height:100%;
}
.cf-ci .section-title { text-align:left; color:#fff; }
.cf-ci p { font-size:15px; line-height:1.78; color:rgba(255,255,255,.50); margin-bottom:28px; }
.cf-ci-cards { display:flex; flex-direction:column; gap:10px; }
.cf-ci-card {
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 16px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  opacity:0; transform:translateY(12px);
  transition:opacity .5s ease, transform .5s ease, border-color .22s;
}
.cf-ci-card.ci-in { opacity:1; transform:none; }
.cf-ci-card:hover { border-color:rgba(245,196,0,.28); background:rgba(255,255,255,.07); }
.cf-ci-icon {
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  background:rgba(245,196,0,.10); border:1px solid rgba(245,196,0,.20);
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.cf-ci-label { font-size:10px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--gold); }
.cf-ci-val   { font-size:14px; color:rgba(255,255,255,.72); line-height:1.55; margin-top:3px; }
.cf-ci-val a { color:rgba(255,255,255,.72); transition:color .2s; }
.cf-ci-val a:hover { color:var(--gold); }

/* Right form card */
.cf-form-card {
  background:#fff; border-radius:0 24px 24px 0; padding:52px 44px;
  border:1px solid rgba(0,0,0,.07); border-left:none;
  box-shadow:0 8px 64px rgba(0,0,0,.08);
  position:relative;
}
/* Gold top-border accent */
.cf-form-card::before {
  content:''; position:absolute; top:0; left:24px; right:24px; height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-amber),var(--gold));
  border-radius:0 0 4px 4px;
}
.cf-form-card h3 { font-size:22px; font-weight:800; color:var(--text); letter-spacing:-.3px; margin-bottom:6px; }
.cf-form-card p  { font-size:14px; color:var(--muted); margin-bottom:28px; }
.cf-fr { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cf-fg { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.cf-fg label { font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:rgba(17,17,17,.40); }
.cf-fg input, .cf-fg select, .cf-fg textarea {
  padding:12px 16px; border-radius:10px;
  border:1.5px solid rgba(0,0,0,.10);
  font-family:var(--font); font-size:14px; color:var(--text);
  background:#fff; transition:border-color .2s, box-shadow .2s; outline:none;
}
.cf-fg input:focus, .cf-fg select:focus, .cf-fg textarea:focus {
  border-color:rgba(245,196,0,.60);
  box-shadow:0 0 0 4px rgba(245,196,0,.09);
}
.cf-fg textarea { min-height:120px; resize:vertical; }
.cf-submit {
  width:100%; padding:15px; border-radius:999px;
  background:linear-gradient(135deg,var(--gold),var(--gold-amber));
  color:#000; font-size:15px; font-weight:800;
  font-family:var(--font); border:none; cursor:pointer;
  transition:transform .22s, box-shadow .22s; letter-spacing:.3px;
}
.cf-submit:hover { transform:translateY(-2px); box-shadow:0 12px 36px rgba(245,196,0,.45); }


/* ════════════════════════════════════════════
   RESPONSIVE — Corporate Films
════════════════════════════════════════════ */
@media (max-width:1024px) {
  .cf-hero              { padding:80px 0 40px; }
  .cfh-row              { grid-template-columns:1fr; gap:32px; }
  .cfh-img-frame        { min-height:320px; }
  .cfh-img-frame img    { min-height:320px; }
  .em-video-frame iframe { min-height:320px; }
  .cfh-img-wrap         { max-width:480px; margin:0 auto; }
  .cfh-float-top        { top:12px; right:12px; }
  .cfh-float-bottom     { bottom:12px; left:12px; }
  .cfh-content          { padding:48px 32px 60px; }
  .cfh-float-card       { padding:8px 12px; }
  .cfh-float-card strong { font-size:12px; }
  .cfh-img-frame        { min-height:280px; }
  .cfh-img-frame img    { min-height:280px; }
  .em-video-frame iframe { min-height:280px; }
  .cf-types-head        { grid-template-columns:1fr; gap:16px; }
  .cf-feature-card      { grid-template-columns:1fr; }
  .cf-fc-img            { height:280px; }
  /* Why Us */
  .cf-why-grid          { grid-template-columns:1fr; }
  .cf-why-card:nth-child(5) { grid-column:auto; }
  .cf-why-card:nth-child(5) .cf-why-card-right { flex-direction:column; gap:12px; }
  /* Process timeline */
  .cf-h-steps           { grid-template-columns:1fr 1fr; }
  .cf-h-timeline::before { display:none; }
  .cf-h-step            { grid-template-rows:auto auto auto; min-height:auto; gap:8px; padding:16px 0; }
  .cf-h-area-top, .cf-h-area-bottom { justify-content:center; }
  .cf-h-vline           { height:20px; }
  /* Testimonials */
  .cf-mini-quotes       { grid-template-columns:1fr; }
  .cf-spot-footer       { flex-direction:column; align-items:flex-start; gap:12px; }
  /* FAQ */
  .cf-faq-layout        { grid-template-columns:1fr; gap:40px; }
  .cf-faq-left          { position:static; }
  /* Contact */
  .cf-contact-grid      { grid-template-columns:1fr; }
  .cf-ci                { border-radius:20px 20px 0 0; padding:40px 32px; }
  .cf-form-card         { border-radius:0 0 20px 20px; border-left:1px solid rgba(0,0,0,.07); }
  /* Stats */
  .cf-stats-row         { flex-wrap:wrap; }
  .cf-stat              { flex:0 0 50%; padding:20px; }
  .cf-stat:nth-child(even)::before { display:none; }
  .cf-proj-cards        { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .cfh-inner, .cf-types-head, .cf-types-list,
  .cf-showcase-inner, .cf-process-inner,
  .cf-why-head, .cf-why-grid,
  .cf-faq-layout, .cf-contact-grid { padding-left:20px; padding-right:20px; }
  .cf-projects-row  { grid-template-columns:1fr; }
  .cf-testi-inner   { padding:0 20px; }
  .cf-spotlight     { padding:36px 28px; }
  .cf-spot-quote    { font-size:18px; }
  .cf-spot-top      { flex-direction:column; gap:8px; align-items:flex-start; }
  .cf-cta-title     { letter-spacing:-2px; }
  .cf-cta-stats     { flex-direction:column; max-width:280px; }
  .cf-cta-stat      { border-right:none; border-bottom:1px solid rgba(255,255,255,.10); }
  .cf-cta-stat:last-child { border-bottom:none; }
  .cf-fr            { grid-template-columns:1fr; }
  .cf-form-card     { padding:28px 20px; }
  .cf-why-card      { flex-direction:column; }
  .cf-why-card-left { display:flex; gap:16px; align-items:center; }
  .cf-h-steps       { grid-template-columns:1fr; gap:8px; }
  .cf-trusted-strip { gap:8px; }
}
@media (prefers-reduced-motion:reduce) {
  .cf-hero *, .cf-marquee *, .cf-stats *, .cf-types *,
  .cf-showcase *, .cf-process *, .cf-why *, .cf-testi *,
  .cf-faq *, .cf-cta *, .cf-contact * {
    animation-duration:.01ms !important; transition-duration:.01ms !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   ── Chroma Studio ──
   ═══════════════════════════════════════════════════════════════ */

/* ── ANIMATIONS ─────────────────────────────────────────── */
@keyframes wordSlideUp {
  from { opacity:0; transform:translateY(100%); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes imageWipe {
  from { clip-path:inset(0 100% 0 0); }
  to   { clip-path:inset(0 0% 0 0); }
}
@keyframes cardFloat {
  from { opacity:0; transform:translateY(56px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes lineGrow {
  from { transform:scaleX(0); }
  to   { transform:scaleX(1); }
}
@keyframes lineGrowV {
  from { height:0; }
  to   { height:100%; }
}
@keyframes zigIn {
  from { opacity:0; transform:translateX(var(--tx,48px)); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes shimmer {
  0%   { background-position:200% center; }
  100% { background-position:-200% center; }
}
@keyframes scaleReveal {
  from { opacity:0; transform:scale(.94); }
  to   { opacity:1; transform:scale(1); }
}

/* ── SCROLL UTILITY ───────────────────────────────────────── */
.reveal-fade {
  opacity:0;
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal-fade.up    { transform:translateY(36px); }
.reveal-fade.left  { transform:translateX(-36px); }
.reveal-fade.right { transform:translateX(36px); }
.reveal-fade.scale { transform:scale(.95); }
.reveal-fade.in    { opacity:1 !important; transform:none !important; }


/* ════════════════════════════════════════════
   1. HERO
════════════════════════════════════════════ */
.cs-hero {
  position:relative; width:100%; min-height:88vh;
  background:var(--bg-dark); overflow:hidden;
  display:flex; align-items:center;
}

/* Background photo at low opacity */
.csh-photo {
  position:absolute; inset:0;
  background-image:url('https://images.unsplash.com/photo-1598387181032-a3103a2db5b3?w=1920&q=80');
  background-size:cover; background-position:center;
  opacity:.22;
  transform:scale(1.06);
  transition:transform 10s ease;
}
.cs-hero:hover .csh-photo { transform:scale(1); }

/* Left-dominant gradient overlay */
.csh-overlay {
  position:absolute; inset:0;
  background:linear-gradient(
    100deg,
    rgba(15,12,0,.96) 0%,
    rgba(15,12,0,.80) 40%,
    rgba(15,12,0,.40) 70%,
    rgba(15,12,0,.10) 100%
  );
}

/* Huge watermark "CHROMA" in the background */
.csh-watermark {
  position:absolute; left:-10px; bottom:-30px;
  font-size:clamp(140px,20vw,260px); font-weight:800;
  letter-spacing:-8px; line-height:1;
  color:rgba(245,196,0,.05);
  user-select:none; pointer-events:none; white-space:nowrap;
}

/* Gold accent line — left edge */
.csh-accent-line {
  position:absolute; left:0; top:10%; bottom:10%;
  width:3px;
  background:linear-gradient(to bottom, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  opacity:.6;
}

/* Inner layout */
.csh-inner {
  position:relative; z-index:2;
  max-width:1200px; margin:0 auto; padding:0 48px;
  padding-top:80px; width:100%;
  display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center;
}

/* ── LEFT: Text ── */
.csh-eyebrow {
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 18px; border-radius:999px;
  background:rgba(245,196,0,.12); border:1px solid rgba(245,196,0,.38);
  font-size:11px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--gold); margin-bottom:28px;
  animation:fadeIn .6s ease .1s both;
}
.csh-eyebrow-dot {
  width:6px; height:6px; border-radius:50%; background:var(--gold);
  animation:goldBlink 2s infinite;
}

/* Word-by-word headline mask technique */
.csh-headline {
  font-size:clamp(52px,7vw,96px);
  font-weight:800; line-height:1.0;
  letter-spacing:-3.5px; color:#fff;
  margin-bottom:28px; overflow:visible;
}
.csh-word-wrap { overflow:hidden; display:block; }
.csh-word {
  display:inline-block;
  animation:wordSlideUp .75s cubic-bezier(.22,1,.36,1) both;
}
.csh-word-1 { animation-delay:.2s; }
.csh-word-2 { animation-delay:.35s; }
.csh-word-3 { animation-delay:.50s; color:var(--gold); }
.csh-word-4 { animation-delay:.65s; font-weight:300; color:rgba(255,255,255,.55); letter-spacing:-2px; font-size:.72em; }

.csh-sub {
  font-size:17px; line-height:1.78;
  color:rgba(255,255,255,.60); max-width:480px;
  margin-bottom:36px;
  animation:fadeIn .8s ease .85s both;
}
.csh-ctas {
  display:flex; gap:12px; flex-wrap:wrap;
  animation:fadeIn .8s ease 1s both;
  margin-bottom:44px;
}

/* Breadcrumb row */
.csh-breadcrumb {
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:rgba(255,255,255,.32);
  animation:fadeIn .8s ease 1.1s both;
}
.csh-breadcrumb a { color:rgba(255,255,255,.32); transition:color .2s; }
.csh-breadcrumb a:hover { color:rgba(255,255,255,.70); }
.csh-breadcrumb span.sep { opacity:.4; }
.csh-breadcrumb span.cur { color:var(--gold); font-weight:600; }

/* ── RIGHT: Stacked image cards ── */
.csh-visual {
  position:relative; padding-bottom:40px;
  animation:fadeIn .9s ease .5s both;
}
/* Main image */
.csh-img-main {
  border-radius:20px; overflow:hidden;
  border:1px solid rgba(245,196,0,.22);
  box-shadow:0 32px 80px rgba(0,0,0,.70);
  aspect-ratio:4/3; position:relative;
}
.csh-img-main img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.csh-img-main::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(245,196,0,.06), transparent 55%);
}
/* Small image offset below-right */
.csh-img-sm {
  position:absolute; bottom:0; right:-28px;
  width:46%; aspect-ratio:4/3;
  border-radius:14px; overflow:hidden;
  border:3px solid var(--bg-dark);
  box-shadow:0 16px 40px rgba(0,0,0,.55);
}
.csh-img-sm img { width:100%; height:100%; object-fit:cover; display:block; }
/* Floating stat chip */
.csh-chip {
  position:absolute; top:-20px; left:-24px;
  background:rgba(10,8,0,.88); backdrop-filter:blur(14px);
  border:1px solid rgba(245,196,0,.28); border-radius:14px;
  padding:12px 16px; z-index:2;
  box-shadow:0 8px 28px rgba(0,0,0,.50);
}
.csh-chip-n { font-size:20px; font-weight:800; color:var(--gold); display:block; line-height:1; }
.csh-chip-l { font-size:10px; color:rgba(255,255,255,.50); font-weight:600; letter-spacing:.5px; }

/* Scroll hint */
.csh-scroll {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:7px;
  color:rgba(255,255,255,.30); font-size:10px; font-weight:700;
  letter-spacing:2.5px; text-transform:uppercase;
  animation:fadeIn 1s ease 1.4s both;
}
.csh-scroll svg { animation:goldBlink 2.5s ease-in-out infinite; }


/* ════════════════════════════════════════════
   2. MARQUEE
════════════════════════════════════════════ */
@keyframes marqScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.cs-marquee {
  overflow:hidden; position:relative; z-index:1;
  background:linear-gradient(135deg,var(--gold) 0%,#E6AD00 50%,var(--gold) 100%);
  padding:15px 0;
}
.cs-marquee-track {
  display:flex; width:max-content;
  animation:marqScroll 30s linear infinite;
}
.cs-marquee-track:hover { animation-play-state:paused; }
.cs-marquee-item {
  padding:0 32px; font-size:13px; font-weight:800;
  letter-spacing:1.8px; text-transform:uppercase; color:#000;
  white-space:nowrap; display:flex; align-items:center; gap:12px;
}
.cs-marquee-item::after { content:'✦'; font-size:9px; opacity:.45; }


/* ════════════════════════════════════════════
   3. STATS STRIP
════════════════════════════════════════════ */
.cs-stats {
  position:relative; z-index:1;
  background:var(--bg); padding:72px 0;
  border-bottom:1px solid rgba(0,0,0,.07);
}
.cs-stats-grid {
  max-width:1200px; margin:0 auto; padding:0 48px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
}
.css-cell {
  padding:28px 24px; text-align:center; position:relative;
  border-right:1px solid rgba(0,0,0,.07);
}
.css-cell:last-child { border-right:none; }
.css-n {
  font-size:clamp(52px,6vw,80px); font-weight:800;
  line-height:1; letter-spacing:-3px; display:block; margin-bottom:8px;
  color:transparent;
  -webkit-text-stroke:2px var(--gold-dk);
  transition:color .3s, -webkit-text-stroke .3s;
}
.css-cell:hover .css-n {
  color:var(--gold-dk);
  -webkit-text-stroke:2px transparent;
}
.css-l {
  font-size:12px; font-weight:600; letter-spacing:1px;
  text-transform:uppercase; color:var(--muted); display:block;
}
/* Gold underline that grows on hover */
.css-cell::after {
  content:''; position:absolute; bottom:0; left:16%; right:16%; height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-amber));
  transform:scaleX(0); transform-origin:center;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.css-cell:hover::after { transform:scaleX(1); }


/* ════════════════════════════════════════════
   4. OVERVIEW
════════════════════════════════════════════ */
/* Chroma hero — wider image, compact content */
.cs-hero-wide .cfh-row { grid-template-columns:2fr 3fr; gap:40px; }
.cs-hero-wide .cfh-headline { font-size:clamp(28px,3.5vw,44px); }
.cs-hero-wide .cfh-sub { font-size:14px; margin-bottom:20px; }
.cs-hero-wide .cfh-ctas { margin-bottom:20px; }
.cs-hero-wide .cfh-meta { gap:20px; }
.cs-hero-wide .cfh-img-frame { min-height:auto; }
.cs-hero-wide .cfh-img-frame img { min-height:auto; height:auto; object-fit:contain; }
@media(max-width:1024px) { .cs-hero-wide .cfh-row { grid-template-columns:1fr; } }

/* ── Chroma Floor Marquee ── */
.cs-floor-section { background:#fff; overflow:hidden; }
.cs-floor-marquee-wrap {
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.cs-floor-marquee-track {
  display:flex; gap:16px;
  width:max-content;
  animation:csFloorScroll 60s linear infinite;
}
.cs-floor-marquee-track:hover { animation-play-state:paused; }
@keyframes csFloorScroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}
.cs-floor-img {
  width:300px; height:220px; flex-shrink:0;
  border-radius:14px; overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
}
.cs-floor-img img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s;
}
.cs-floor-img:hover img { transform:scale(1.05); }
@media(max-width:768px) {
  .cs-floor-img { width:240px; height:180px; }
}
@media(max-width:520px) {
  .cs-floor-img { width:200px; height:150px; }
}

/* ── Green Keyed Showcase — Dark cinematic layout ── */
.cs-gk-showcase {
  background:#f5f5f0; padding:64px 0;
  position:relative; overflow:hidden;
}
.cs-gk-showcase::before {
  content:''; position:absolute; right:-100px; top:-100px;
  width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,180,0,.05) 0%, transparent 70%);
  pointer-events:none;
}

/* Main + side layout */
.cs-gk-row {
  display:grid; grid-template-columns:2fr 1fr;
  gap:16px; align-items:stretch;
}

/* Featured main video */
.cs-gk-main {
  position:relative; border-radius:16px; overflow:hidden;
  cursor:pointer;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 4px 24px rgba(0,0,0,.06);
  transition:border-color .3s, box-shadow .3s;
}
.cs-gk-main:hover { border-color:rgba(184,120,0,.3); box-shadow:0 8px 32px rgba(0,0,0,.1); }
.cs-gk-main img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:brightness(.85); transition:filter .3s;
}
.cs-gk-main:hover img { filter:brightness(.7); }
.cs-gk-main .video-play {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.9);
  background:none; border:none; cursor:pointer;
  opacity:.9; z-index:2;
  transition:opacity .3s, transform .3s;
}
.cs-gk-main:hover .video-play { opacity:1; transform:translate(-50%,-50%) scale(1.05); }
.cs-gk-main iframe {
  position:absolute; top:0; left:0;
  width:100%; height:100%; border:0; z-index:2;
}
.cs-gk-main-label {
  position:absolute; bottom:0; left:0; right:0;
  padding:24px 28px; z-index:1;
  background:linear-gradient(0deg, rgba(0,0,0,.85) 0%, transparent 100%);
}
.cs-gk-tag {
  display:inline-block; padding:4px 12px; border-radius:999px;
  background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.35);
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:1.2px; color:#fff; margin-bottom:8px;
}
.cs-gk-title {
  display:block; font-size:16px; font-weight:600; color:#fff;
}

/* Side stacked videos */
.cs-gk-side {
  display:flex; flex-direction:column; gap:16px;
}
.cs-gk-side-card {
  position:relative; border-radius:14px; overflow:hidden;
  cursor:pointer; flex:1;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 2px 16px rgba(0,0,0,.05);
  transition:border-color .3s, box-shadow .3s;
}
.cs-gk-side-card:hover { border-color:rgba(184,120,0,.3); box-shadow:0 6px 24px rgba(0,0,0,.08); }
.cs-gk-side-card img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:brightness(.85); transition:filter .3s;
}
.cs-gk-side-card:hover img { filter:brightness(.7); }
.cs-gk-side-card .video-play {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.7);
  background:none; border:none; cursor:pointer;
  opacity:.85; z-index:2;
  transition:opacity .3s, transform .3s;
}
.cs-gk-side-card:hover .video-play { opacity:1; transform:translate(-50%,-50%) scale(.85); }
.cs-gk-side-card iframe {
  position:absolute; top:0; left:0;
  width:100%; height:100%; border:0; z-index:2;
}
.cs-gk-side-label {
  position:absolute; bottom:0; left:0; right:0;
  padding:12px 16px;
  background:linear-gradient(0deg, rgba(0,0,0,.8) 0%, transparent 100%);
  font-size:12px; font-weight:600; color:rgba(255,255,255,.85);
  z-index:1;
}

@media(max-width:768px) {
  .cs-gk-row { grid-template-columns:1fr; }
  .cs-gk-side { flex-direction:row; }
  .cs-gk-side-card { flex:1; }
}
@media(max-width:520px) {
  .cs-gk-side { flex-direction:column; }
}

.cs-overview {
  position:relative; z-index:1;
  background:#fff;
}

/* Side-by-side: image left, content right */
.cs-ov-row {
  display:grid; grid-template-columns:1fr 1fr;
  gap:56px; align-items:center;
}

/* Left: hero image with inset overlay */
.cs-ov-img-col { position:relative; }
.cs-ov-img-hero {
  position:relative;
  border-radius:20px; overflow:visible;
}
.cs-ov-img-hero > img {
  width:100%; height:auto; display:block;
  border-radius:20px;
  box-shadow:0 12px 40px rgba(0,0,0,.12);
  transition:transform .5s ease;
}
.cs-ov-img-hero:hover > img { transform:scale(1.02); }

/* Inset image — overlapping bottom-right */
.cs-ov-img-inset {
  position:absolute; bottom:-24px; right:-24px;
  width:45%; border-radius:14px; overflow:hidden;
  border:4px solid #fff;
  box-shadow:0 8px 28px rgba(0,0,0,.15);
  z-index:2;
}
.cs-ov-img-inset img {
  width:100%; height:auto; display:block;
  transition:transform .5s ease;
}
.cs-ov-img-inset:hover img { transform:scale(1.05); }

/* Floating badge — top-left */
.cs-ov-float-badge {
  position:absolute; top:16px; left:16px; z-index:3;
  background:#fff; border-radius:10px;
  padding:10px 16px;
  box-shadow:0 4px 16px rgba(0,0,0,.10);
  border:1px solid rgba(245,196,0,.2);
}
.cs-ov-float-badge strong {
  display:block; font-size:16px; font-weight:800; color:var(--gold-dk);
}
.cs-ov-float-badge span {
  display:block; font-size:11px; color:var(--muted);
}

/* Right: text */
.cs-ov-text .section-title { text-align:left; }
.cs-ov-text .section-sub   { text-align:left; margin-bottom:24px; }
.cs-ov-list {
  list-style:none; display:flex; flex-direction:column; gap:12px;
  margin-bottom:28px;
}
.cs-ov-list li {
  display:flex; align-items:flex-start; gap:10px;
  font-size:14px; line-height:1.65; color:var(--muted);
}
.cs-ov-tick {
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),var(--gold-amber));
  display:flex; align-items:center; justify-content:center;
  font-size:10px; color:#000; margin-top:2px; font-weight:700;
}


/* ════════════════════════════════════════════
   5. FEATURES — Sticky sidebar layout
════════════════════════════════════════════ */
.cs-features {
  position:relative; z-index:1;
  background:var(--bg-dark); padding:60px 0;
}
.cs-features-inner {
  max-width:1200px; margin:0 auto; padding:0 48px;
}
.cs-features-head {
  text-align:center; margin-bottom:40px;
}
.cs-features-head .section-title { color:#fff; }
.cs-features-head .section-sub   { color:rgba(255,255,255,.55); }

.cs-features-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start;
}
/* LEFT: sticky image column */
.cs-feat-sticky {
  position:sticky; top:110px;
}
.cs-feat-sticky-img {
  border-radius:20px; overflow:hidden;
  border:1px solid rgba(245,196,0,.18);
  box-shadow:0 28px 72px rgba(0,0,0,.60);
  position:relative;
}
.cs-feat-sticky-img img { width:100%; height:auto; object-fit:contain; display:block; }
.cs-feat-sticky-img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.60));
}
/* Caption on the sticky image */
.cs-feat-sticky-cap {
  position:absolute; bottom:20px; left:20px; right:20px; z-index:2;
}
.cs-feat-sticky-cap h3 {
  font-size:20px; font-weight:800; color:#fff; letter-spacing:-.3px; margin-bottom:4px;
}
.cs-feat-sticky-cap p { font-size:13px; color:rgba(255,255,255,.60); }

/* Progress bar that fills as features scroll */
.cs-feat-progress {
  margin-top:16px; height:3px; background:rgba(255,255,255,.10); border-radius:2px; overflow:hidden;
}
.cs-feat-progress-bar {
  height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-amber));
  transition:width .4s ease; width:0%;
}

/* RIGHT: scrollable feature list */
.cs-feat-list { display:flex; flex-direction:column; gap:0; }
.cs-feat-item {
  padding:32px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:grid; grid-template-columns:52px 1fr; gap:20px; align-items:start;
  opacity:.45; transform:translateY(20px);
  transition:opacity .5s ease, transform .5s ease;
  cursor:default;
}
.cs-feat-item:first-child { padding-top:0; }
.cs-feat-item:last-child  { border-bottom:none; }
.cs-feat-item.feat-active { opacity:1; transform:none; }
.cs-feat-item:hover { opacity:1; transform:none; }

.cs-feat-num {
  width:44px; height:44px; border-radius:12px;
  background:rgba(245,196,0,.10); border:1px solid rgba(245,196,0,.22);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0; transition:background .3s;
}
.cs-feat-item.feat-active .cs-feat-num,
.cs-feat-item:hover .cs-feat-num {
  background:rgba(245,196,0,.18);
}
.cs-feat-body {}
.cs-feat-title {
  font-size:18px; font-weight:700; color:#fff; letter-spacing:-.2px;
  margin-bottom:8px;
}
.cs-feat-desc {
  font-size:14px; line-height:1.72; color:rgba(255,255,255,.55);
}
/* Gold tag on active */
.cs-feat-tag {
  display:inline-block; margin-top:10px;
  font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--gold-dk); background:rgba(245,196,0,.08);
  border:1px solid rgba(245,196,0,.20); border-radius:999px;
  padding:3px 10px; opacity:0; transition:opacity .3s;
}
.cs-feat-item.feat-active .cs-feat-tag,
.cs-feat-item:hover .cs-feat-tag { opacity:1; }


/* ════════════════════════════════════════════
   6. GALLERY — Horizontal drag-scroll reel
════════════════════════════════════════════ */
.cs-gallery {
  position:relative; z-index:1;
  background:var(--bg-alt); padding:60px 0;
  overflow:hidden;
}
.cs-gallery-head {
  max-width:1200px; margin:0 auto 40px; padding:0 48px;
  display:flex; align-items:flex-end; justify-content:space-between;
}
.cs-gallery-head .section-title { margin-bottom:0; text-align:left; }
.cs-gallery-hint {
  font-size:13px; color:var(--muted); display:flex; align-items:center; gap:7px;
  font-weight:600; padding-bottom:6px;
}
.cs-gallery-hint svg { flex-shrink:0; }

/* Horizontal scroll container */
.cs-gallery-reel {
  display:flex; gap:16px;
  padding:8px 48px 24px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; cursor:grab;
  -webkit-overflow-scrolling:touch;
}
.cs-gallery-reel:active { cursor:grabbing; }
.cs-gallery-reel::-webkit-scrollbar { height:4px; }
.cs-gallery-reel::-webkit-scrollbar-track { background:rgba(0,0,0,.06); border-radius:2px; }
.cs-gallery-reel::-webkit-scrollbar-thumb { background:var(--gold); border-radius:2px; }

.cs-reel-item {
  scroll-snap-align:start; flex-shrink:0;
  border-radius:16px; overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.12);
  transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s;
  position:relative;
}
.cs-reel-item:hover { transform:translateY(-8px) scale(1.02); box-shadow:0 20px 56px rgba(0,0,0,.18); }
.cs-reel-item img   { height:340px; width:auto; object-fit:cover; display:block; pointer-events:none; }
/* Hover overlay */
.cs-reel-item::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.45));
  opacity:0; transition:opacity .3s;
}
.cs-reel-item:hover::after { opacity:1; }
/* Gold border on hover */
.cs-reel-item::before {
  content:''; position:absolute; inset:0; border-radius:16px;
  border:2px solid rgba(245,196,0,.55); opacity:0; z-index:2;
  transition:opacity .3s;
}
.cs-reel-item:hover::before { opacity:1; }

/* Navigation arrows */
.cs-gallery-nav {
  max-width:1200px; margin:0 auto; padding:0 48px;
  display:flex; justify-content:flex-end; gap:10px; margin-top:8px;
}
.cs-gallery-btn {
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:var(--bg); border:1.5px solid rgba(0,0,0,.12);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:var(--text); font-weight:300;
  transition:all .22s;
}
.cs-gallery-btn:hover { background:var(--gold); border-color:var(--gold); color:#000; transform:scale(1.08); }


/* ════════════════════════════════════════════
   7. PROCESS — Zigzag alternating layout
════════════════════════════════════════════ */
.cs-process {
  position:relative; z-index:1;
  background:var(--bg); padding:60px 0;
}
.cs-process-inner {
  max-width:900px; margin:0 auto; padding:0 48px;
}
.cs-process-head { text-align:center; margin-bottom:40px; }

/* The zigzag list */
.cs-zig-list { position:relative; }
/* Center connector line */
.cs-zig-list::before {
  content:''; position:absolute; left:50%; top:0; bottom:0;
  width:2px; background:linear-gradient(to bottom,var(--gold),rgba(245,196,0,.1));
  transform:translateX(-50%);
  transform-origin:top;
  animation-name:lineGrowV; animation-duration:1.2s; animation-ease:ease;
  animation-fill-mode:both; animation-play-state:paused;
}
.cs-zig-list.line-active::before { animation-play-state:running; }

.cs-zig-item {
  display:grid; gap:0;
  grid-template-columns:1fr 60px 1fr;
  align-items:center; margin-bottom:36px;
  opacity:0;
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.cs-zig-item:last-child { margin-bottom:0; }
.cs-zig-item.zig-in { opacity:1 !important; transform:none !important; }

/* Odd steps: content left, empty right */
.cs-zig-item:nth-child(odd)  { --tx:-40px; transform:translateX(-40px); }
.cs-zig-item:nth-child(even) { --tx:40px;  transform:translateX(40px); }

.cs-zig-content {
  background:var(--bg-alt);
  border-radius:20px; padding:32px 28px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 4px 24px rgba(0,0,0,.05);
  transition:box-shadow .3s, border-color .3s;
}
.cs-zig-content:hover {
  box-shadow:0 16px 48px rgba(0,0,0,.10);
  border-color:rgba(245,196,0,.25);
}
/* Odd: content in left column, middle dot, right is spacer */
.cs-zig-item:nth-child(odd) .cs-zig-content { grid-column:1; }
.cs-zig-item:nth-child(odd) .cs-zig-dot     { grid-column:2; }
.cs-zig-item:nth-child(odd) .cs-zig-spacer  { grid-column:3; }
/* Even: spacer left, dot, content right */
.cs-zig-item:nth-child(even) .cs-zig-spacer  { grid-column:1; }
.cs-zig-item:nth-child(even) .cs-zig-dot     { grid-column:2; }
.cs-zig-item:nth-child(even) .cs-zig-content { grid-column:3; }

.cs-zig-dot {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; z-index:1;
}
.cs-zig-dot-circle {
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-amber));
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:800; color:#000;
  box-shadow:0 6px 22px rgba(245,196,0,.38);
  position:relative; z-index:2; flex-shrink:0;
}
.cs-zig-spacer { /* empty — just for grid alignment */ }

.cs-zig-step-label {
  font-size:10px; font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--gold-dk); margin-bottom:8px;
}
.cs-zig-title {
  font-size:20px; font-weight:800; color:var(--text);
  letter-spacing:-.3px; margin-bottom:10px; line-height:1.2;
}
.cs-zig-desc {
  font-size:14px; line-height:1.75; color:var(--muted);
}


/* ════════════════════════════════════════════
   8. TESTIMONIALS — 3-col static grid
════════════════════════════════════════════ */
.cs-testi {
  position:relative; z-index:1;
  background:var(--bg-dark); padding:60px 0;
  overflow:hidden;
}
/* Subtle radial glow */
.cs-testi::before {
  content:''; position:absolute; left:50%; top:30%;
  width:800px; height:800px; border-radius:50%;
  background:radial-gradient(circle,rgba(245,196,0,.06) 0%,transparent 70%);
  transform:translateX(-50%); pointer-events:none;
}
.cs-testi-head { text-align:center; margin-bottom:40px; }
.cs-testi-head .section-title { color:#fff; }
.cs-testi-head .section-sub   { color:rgba(255,255,255,.50); }

.cs-testi-grid {
  max-width:1200px; margin:0 auto; padding:0 48px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.cs-tcard {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(245,196,0,.14);
  border-radius:20px; padding:32px 28px;
  display:flex; flex-direction:column;
  transition:transform .3s cubic-bezier(.22,1,.36,1),
              box-shadow .3s, border-color .3s,
              background .3s;
  opacity:0; transform:translateY(32px);
}
.cs-tcard.tcard-in { opacity:1; transform:none; }
.cs-tcard:hover {
  transform:translateY(-8px);
  background:rgba(255,255,255,.07);
  border-color:rgba(245,196,0,.28);
  box-shadow:0 20px 56px rgba(0,0,0,.40);
}
/* Large decorative quote mark */
.cs-tcard-q {
  font-size:64px; line-height:.8; font-family:Georgia,serif;
  color:var(--gold); opacity:.35; margin-bottom:8px; display:block;
  font-weight:700;
}
.cs-tcard-text {
  font-size:14px; line-height:1.75; color:rgba(255,255,255,.65);
  font-style:italic; flex:1; margin-bottom:20px;
}
.cs-tcard-author { display:flex; align-items:center; gap:12px; }
.cs-tcard-avatar {
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),var(--gold-amber));
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:#000;
}
.cs-tcard-name { font-size:14px; font-weight:700; color:#fff; }
.cs-tcard-role { font-size:12px; color:rgba(255,255,255,.40); margin-top:1px; }
.cs-tcard-stars{ color:var(--gold); font-size:12px; letter-spacing:1.5px; margin-bottom:2px; }


/* ════════════════════════════════════════════
   9. FAQ
════════════════════════════════════════════ */
.cs-faq {
  position:relative; z-index:1;
  background:var(--bg-alt); padding:60px 0;
}
.cs-faq-grid {
  max-width:1200px; margin:0 auto; padding:0 48px;
  display:grid; grid-template-columns:.45fr 1fr; gap:80px; align-items:start;
}
/* Left: sticky heading column */
.cs-faq-col-left {
  position:sticky; top:110px;
}
.cs-faq-col-left .section-title { text-align:left; margin-bottom:12px; }
.cs-faq-col-left p {
  font-size:15px; line-height:1.75; color:var(--muted); margin-bottom:28px;
}
/* Count pill */
.cs-faq-count {
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 14px; border-radius:999px;
  background:rgba(245,196,0,.10); border:1px solid rgba(245,196,0,.22);
  font-size:12px; font-weight:700; color:var(--gold-dk);
}

/* Right: accordion */
.cs-faq-col-right { }
.cs-faq-item {
  border-bottom:1px solid rgba(0,0,0,.09);
  opacity:0; transform:translateY(16px);
  transition:opacity .5s ease, transform .5s ease;
}
.cs-faq-item:first-child { border-top:1px solid rgba(0,0,0,.09); }
.cs-faq-item.faq-in { opacity:1; transform:none; }
.cs-faq-q {
  width:100%; background:none; border:none; cursor:pointer;
  text-align:left; padding:20px 0;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--font); font-size:16px; font-weight:600; color:var(--text);
  transition:color .2s;
}
.cs-faq-q:hover { color:var(--gold-dk); }
.cs-faq-icon {
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:rgba(0,0,0,.06);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--muted); transition:all .28s; line-height:1;
}
.cs-faq-item.open .cs-faq-icon { transform:rotate(45deg); background:rgba(245,196,0,.15); color:var(--gold-dk); }
.cs-faq-a {
  max-height:0; overflow:hidden;
  font-size:15px; line-height:1.78; color:var(--muted);
  transition:max-height .38s cubic-bezier(.4,0,.2,1), padding .28s;
  padding-bottom:0;
}
.cs-faq-item.open .cs-faq-a { max-height:280px; padding-bottom:22px; }


/* ════════════════════════════════════════════
   10. CTA BAND — Diagonal split layout
════════════════════════════════════════════ */
.cs-cta {
  position:relative; z-index:1;
  height:480px; overflow:hidden;
  display:flex;
}
/* Left half */
.cs-cta-left {
  flex:1; background:var(--bg-dark);
  display:flex; align-items:center;
  padding:60px 60px 60px 48px;
  position:relative; z-index:2;
  clip-path:polygon(0 0, 100% 0, 88% 100%, 0 100%);
}
.cs-cta-left-inner { max-width:440px; }
.cs-cta-title {
  font-size:clamp(30px,3.8vw,50px); font-weight:800;
  line-height:1.12; letter-spacing:-1.5px; color:#fff; margin-bottom:16px;
}
.cs-cta-title .g { color:var(--gold); }
.cs-cta-sub {
  font-size:16px; line-height:1.7; color:rgba(255,255,255,.58);
  margin-bottom:32px;
}
.cs-cta-acts { display:flex; gap:12px; flex-wrap:wrap; }
/* Right half — background image */
.cs-cta-right {
  flex:.7; position:relative;
}
.cs-cta-right img {
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.06); transition:transform 8s ease;
}
.cs-cta:hover .cs-cta-right img { transform:scale(1); }
.cs-cta-right::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(270deg,rgba(0,0,0,.30),transparent 60%);
  z-index:1;
}


/* ════════════════════════════════════════════
   11. BOOKING / CONTACT
════════════════════════════════════════════ */
.cs-booking {
  position:relative; z-index:1;
  background:var(--bg); padding:60px 0;
}
.cs-booking-grid {
  max-width:1200px; margin:0 auto; padding:0 48px;
  display:grid; grid-template-columns:1fr 1.4fr; gap:64px; align-items:start;
}
/* Left info column */
.cs-bk-info { }
.cs-bk-info .section-title { text-align:left; }
.cs-bk-info p { font-size:15px; line-height:1.78; color:var(--muted); margin-bottom:28px; }
.cs-bk-cards { display:flex; flex-direction:column; gap:12px; }
.cs-bk-card {
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 16px; border-radius:12px;
  background:var(--bg-alt); border:1px solid rgba(0,0,0,.07);
  transition:border-color .22s;
  opacity:0; transform:translateY(12px);
  transition:opacity .5s ease, transform .5s ease, border-color .22s;
}
.cs-bk-card.bkc-in { opacity:1; transform:none; }
.cs-bk-card:hover { border-color:rgba(245,196,0,.30); }
.cs-bk-icon {
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  background:rgba(245,196,0,.10); border:1px solid rgba(245,196,0,.20);
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.cs-bk-label { font-size:10px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--gold-dk); }
.cs-bk-val   { font-size:14px; color:var(--text); line-height:1.5; margin-top:3px; }
.cs-bk-val a { color:var(--text); transition:color .2s; }
.cs-bk-val a:hover { color:var(--gold-dk); }

/* Right form */
.cs-bk-form {
  background:#fff; border-radius:24px; padding:44px 40px;
  border:1px solid rgba(0,0,0,.07);
  box-shadow:0 8px 48px rgba(0,0,0,.07);
}
.cs-bk-form h3 { font-size:22px; font-weight:800; color:var(--text); letter-spacing:-.3px; margin-bottom:6px; }
.cs-bk-form p  { font-size:14px; color:var(--muted); margin-bottom:28px; }
.cs-fr { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cs-fg { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.cs-fg label {
  font-size:11px; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase; color:rgba(17,17,17,.45);
}
.cs-fg input, .cs-fg select, .cs-fg textarea {
  padding:12px 16px; border-radius:10px;
  border:1.5px solid rgba(0,0,0,.10);
  font-family:var(--font); font-size:14px; color:var(--text);
  background:#fff; transition:border-color .2s, box-shadow .2s; outline:none;
}
.cs-fg input:focus, .cs-fg select:focus, .cs-fg textarea:focus {
  border-color:rgba(245,196,0,.55);
  box-shadow:0 0 0 4px rgba(245,196,0,.09);
}
.cs-fg textarea { min-height:120px; resize:vertical; }
.cs-submit {
  width:100%; padding:15px; border-radius:999px;
  background:linear-gradient(135deg,var(--gold),var(--gold-amber));
  color:#000; font-size:15px; font-weight:800;
  font-family:var(--font); border:none; cursor:pointer;
  transition:transform .22s, box-shadow .22s; letter-spacing:.3px;
}
.cs-submit:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(245,196,0,.40); }


/* ════════════════════════════════════════════
   RESPONSIVE — Chroma Studio
════════════════════════════════════════════ */
@media (max-width:1024px) {
  .csh-inner           { grid-template-columns:1fr; padding-top:80px; gap:40px; }
  .csh-visual          { display:none; }
  .cs-ov-row           { grid-template-columns:1fr; gap:48px; }
  .cs-ov-img-inset     { bottom:-16px; right:-16px; width:40%; }
  .cs-features-grid    { grid-template-columns:1fr; }
  .cs-feat-sticky      { position:relative; top:auto; display:none; }
  .cs-testi-grid       { grid-template-columns:1fr 1fr; }
  .cs-faq-grid         { grid-template-columns:1fr; gap:40px; }
  .cs-faq-col-left     { position:relative; top:auto; }
  .cs-cta              { height:auto; flex-direction:column; }
  .cs-cta-left         { clip-path:none; padding:60px 28px; }
  .cs-cta-right        { height:300px; }
  .cs-booking-grid     { grid-template-columns:1fr; gap:40px; }
  .cs-stats-grid       { grid-template-columns:1fr 1fr; }
  .css-cell:nth-child(2){ border-right:none; }
  .css-cell            { border-bottom:1px solid rgba(0,0,0,.07); }
  .css-cell:nth-child(3),.css-cell:nth-child(4) { border-bottom:none; }
}
@media (max-width:768px) {
  .csh-inner, .cs-gallery-reel,
  .cs-gallery-head, .cs-gallery-nav,
  .cs-faq-grid, .cs-booking-grid    { padding-left:20px; padding-right:20px; }
  .cs-ov-img-inset     { bottom:-12px; right:-12px; width:38%; border-width:3px; }
  .cs-testi-grid                    { grid-template-columns:1fr; }
  .cs-zig-list::before              { display:none; }
  .cs-zig-item                      { grid-template-columns:1fr; gap:12px; }
  .cs-zig-item:nth-child(even) .cs-zig-spacer,
  .cs-zig-item:nth-child(odd)  .cs-zig-spacer  { display:none; }
  .cs-zig-item:nth-child(even) .cs-zig-dot,
  .cs-zig-item:nth-child(odd)  .cs-zig-dot,
  .cs-zig-item:nth-child(even) .cs-zig-content,
  .cs-zig-item:nth-child(odd)  .cs-zig-content { grid-column:1; }
  .cs-zig-dot  { flex-direction:row; justify-content:flex-start; padding-left:4px; }
  .cs-fr       { grid-template-columns:1fr; }
  .cs-bk-form  { padding:28px 20px; }
  .cs-stats-grid { grid-template-columns:1fr 1fr; }
  .cs-features-inner { padding:0 20px; }
  .cs-features-head  { padding:0; }
  .cs-feat-list { padding:0; }
}
@media (prefers-reduced-motion:reduce) {
  .cs-hero *, .cs-marquee *, .cs-stats *, .cs-overview *,
  .cs-features *, .cs-gallery *, .cs-process *, .cs-testi *,
  .cs-faq *, .cs-cta *, .cs-booking * {
    animation-duration:.01ms !important; transition-duration:.01ms !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   ── Video Production ──
   ═══════════════════════════════════════════════════════════════ */

/* ── ANIMATIONS ─────────────────────────────────────────── */
@keyframes vpLineIn {
  from { clip-path:inset(0 100% 0 0); }
  to   { clip-path:inset(0 0 0 0); }
}
@keyframes vpFadeUp {
  from { opacity:0; transform:translateY(32px); }
  to   { opacity:1; transform:none; }
}
@keyframes vpFadeIn {
  from { opacity:0; } to { opacity:1; }
}
@keyframes vpThumbCascade {
  from { opacity:0; transform:translateX(52px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes vpPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(245,196,0,.50); }
  50%     { box-shadow:0 0 0 22px rgba(245,196,0,0); }
}
@keyframes mScrollVP { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── SCROLL REVEAL (same pattern as .cf-reveal, .cr-reveal, .em-reveal — see consolidated [class*="-reveal"] at top) ── */
.vp-reveal {
  opacity:0;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.vp-reveal.up    { transform:translateY(32px); }
.vp-reveal.left  { transform:translateX(-32px); }
.vp-reveal.right { transform:translateX(32px); }
.vp-reveal.shown { opacity:1 !important; transform:none !important; }


/* ════════════════════════════════════════════
   1. HERO
════════════════════════════════════════════ */
.vp-hero {
  position:relative;
  background:#F5F5F2;
  padding:80px 0 48px;
  overflow:hidden;
}
.vp-hero-bg, .vp-hero-overlay { display:none; }

/* LEFT: Content */
.vp-eyebrow {
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 18px; border-radius:999px;
  background:rgba(245,196,0,.12); border:1px solid rgba(245,196,0,.35);
  font-size:11px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--gold); margin-bottom:32px;
  animation:vpFadeIn .6s ease .2s both;
}
.vp-eyebrow-dot { width:6px;height:6px;border-radius:50%;background:var(--gold);animation:goldBlink 2s infinite; }

/* Line-by-line reveal */
.vp-headline { margin-bottom:0; }
.vp-hl-row {
  display:block; overflow:hidden;
}
.vp-hl-text {
  display:block;
  font-size:clamp(52px,6.5vw,88px); font-weight:800;
  letter-spacing:-3.5px; color:#fff; line-height:1.01;
  clip-path:inset(0 100% 0 0);
  animation:vpLineIn .90s cubic-bezier(.22,1,.36,1) var(--ld,.4s) forwards;
}
.vp-hl-text .g {
  background:linear-gradient(120deg,var(--gold) 0%,var(--gold-amber) 55%,var(--gold) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.vp-hero-sub {
  font-size:16px; line-height:1.82; color:rgba(255,255,255,.54);
  max-width:500px; margin:28px 0 38px;
  animation:vpFadeUp .7s ease 1.1s both;
}
.vp-hero-ctas {
  display:flex; gap:12px; flex-wrap:wrap; margin-bottom:32px;
  animation:vpFadeUp .7s ease 1.2s both;
}
.vp-hero-stats {
  display:flex; gap:32px; align-items:center;
  padding-top:28px; border-top:1px solid rgba(255,255,255,.10);
  animation:vpFadeUp .7s ease 1.3s both;
}
.vp-hero-stat-n {
  font-size:clamp(24px,3vw,32px); font-weight:800; color:#fff;
  letter-spacing:-1.2px; display:block; line-height:1;
}
.vp-hero-stat-l {
  font-size:11px; font-weight:600; letter-spacing:1px;
  text-transform:uppercase; color:rgba(255,255,255,.38); margin-top:3px; display:block;
}
.vp-hero-stat-sep { width:1px; height:36px; background:rgba(255,255,255,.12); }

/* Video preview inside hero frame */
.vp-video-preview { cursor:pointer; }
.vp-video-preview .video-play {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.9);
  background:none; border:none; cursor:pointer;
  opacity:.9; z-index:2;
  transition:opacity .3s, transform .3s;
}
.vp-video-preview:hover .video-play { opacity:1; transform:translate(-50%,-50%) scale(1); }
.vp-video-preview:hover img { filter:brightness(.6); }
.vp-video-preview iframe {
  position:absolute; top:0; left:0;
  width:100%; height:100%; border:0; z-index:2;
}

/* Genre ticker at bottom */
.vp-genre-bar {
  position:absolute; bottom:0; left:0; right:0; z-index:3;
  background:rgba(0,0,0,.55); backdrop-filter:blur(12px);
  border-top:1px solid rgba(245,196,0,.15); padding:11px 0; overflow:hidden;
}
.vp-genre-track {
  display:flex; width:max-content;
  animation:mScrollVP 30s linear infinite;
}
.vp-genre-item {
  padding:0 28px; font-size:11px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.45);
  white-space:nowrap; display:flex; align-items:center; gap:10px;
}
.vp-genre-item::after { content:'◆'; font-size:7px; color:var(--gold); opacity:.5; }


/* ════════════════════════════════════════════
   2. MARQUEE
════════════════════════════════════════════ */
@keyframes mScrollVP2 { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.vp-marquee {
  overflow:hidden; position:relative; z-index:1;
  background:linear-gradient(135deg,var(--gold) 0%,#E6AD00 50%,var(--gold) 100%);
  padding:14px 0;
}
.vp-marquee-track {
  display:flex; width:max-content;
  animation:mScrollVP2 32s linear infinite;
}
.vp-marquee-track:hover { animation-play-state:paused; }
.vp-marquee-item {
  padding:0 32px; font-size:13px; font-weight:800;
  letter-spacing:1.8px; text-transform:uppercase; color:#000;
  white-space:nowrap; display:flex; align-items:center; gap:12px;
}
.vp-marquee-item::after { content:'✦'; font-size:9px; opacity:.40; }


/* ════════════════════════════════════════════
   3. STATS
════════════════════════════════════════════ */
.vp-stats {
  background:var(--bg); padding:64px 0;
  border-bottom:1px solid rgba(0,0,0,.07);
}
.vp-stats-grid {
  max-width:1200px; margin:0 auto; padding:0 48px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
}
.vp-stat {
  padding:28px 32px; text-align:center; position:relative;
  border-right:1px solid rgba(0,0,0,.08); transition:background .25s;
}
.vp-stat:last-child { border-right:none; }
.vp-stat:hover { background:rgba(245,196,0,.03); }
.vp-stat-n {
  font-size:clamp(44px,5vw,68px); font-weight:800;
  letter-spacing:-2.5px; line-height:1;
  color:var(--text); display:block; margin-bottom:6px;
  transition:color .3s;
}
.vp-stat-n sub { font-size:.45em; letter-spacing:0; font-weight:600; }
.vp-stat:hover .vp-stat-n { color:var(--gold-dk); }
.vp-stat-l {
  font-size:12px; font-weight:600; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--muted); display:block;
}


/* ════════════════════════════════════════════
   4. PRODUCTION PHASES — 3-tab panel
════════════════════════════════════════════ */
.vp-phases {
  background:var(--bg-dark); padding:60px 0;
}
.vp-phases-inner { max-width:1200px; margin:0 auto; padding:0 48px; }
.vp-phases-head { text-align:center; margin-bottom:32px; }
.vp-phases-head .section-title { color:#fff; }
.vp-phases-head .section-sub   { color:rgba(255,255,255,.50); }

/* Tab row */
.vp-phase-tabs {
  display:flex; gap:0;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.vp-phase-tab {
  flex:1; padding:22px 28px; cursor:pointer;
  background:none; border:none; border-bottom:3px solid transparent;
  font-family:var(--font); text-align:left;
  transition:background .25s, border-color .25s;
  margin-bottom:-1px;
  display:flex; align-items:center; gap:14px;
}
.vp-phase-tab:hover { background:rgba(255,255,255,.04); }
.vp-phase-tab.active {
  border-bottom-color:var(--gold);
  background:rgba(245,196,0,.05);
}
.vp-phase-roman {
  font-size:clamp(32px,3.5vw,48px); font-weight:800;
  letter-spacing:-2px; line-height:1;
  opacity:.20; color:#fff; flex-shrink:0;
  transition:opacity .25s, color .25s;
}
.vp-phase-tab.active .vp-phase-roman { opacity:1; color:var(--gold); }
.vp-phase-tab-title {
  font-size:14px; font-weight:700; color:rgba(255,255,255,.45);
  letter-spacing:.3px; display:block; transition:color .25s;
}
.vp-phase-tab.active .vp-phase-tab-title { color:#fff; }
.vp-phase-tab-sub {
  font-size:11px; color:rgba(255,255,255,.25); margin-top:3px; display:block;
}

/* Content panel */
.vp-phase-panel {
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08); border-top:none;
  border-radius:0 0 20px 20px; padding:44px;
  display:none;
}
.vp-phase-panel.active { display:block; }
.vp-phase-body {
  display:grid; grid-template-columns:260px 1fr; gap:56px; align-items:start;
}
.vp-phase-desc {
  font-size:15px; line-height:1.80; color:rgba(255,255,255,.52);
  border-right:1px solid rgba(255,255,255,.08); padding-right:56px;
}
.vp-phase-desc strong {
  display:block; font-size:19px; font-weight:700; color:#fff;
  letter-spacing:-.3px; margin-bottom:12px;
}
.vp-phase-chips {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.vp-chip {
  display:flex; align-items:center; gap:10px; padding:13px 16px;
  border-radius:10px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  transition:background .22s, border-color .22s;
}
.vp-chip:hover { background:rgba(245,196,0,.09); border-color:rgba(245,196,0,.28); }
.vp-chip-icon { font-size:18px; flex-shrink:0; }
.vp-chip-label { font-size:13px; font-weight:600; color:rgba(255,255,255,.72); }


/* ════════════════════════════════════════════
   5. PORTFOLIO — Asymmetric masonry grid
════════════════════════════════════════════ */
.vp-portfolio {
  background:var(--bg-alt); padding:60px 0;
}
.vp-portfolio-inner { max-width:1200px; margin:0 auto; padding:0 48px; }
.vp-port-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom:44px;
}
.vp-port-head .section-title { text-align:left; margin-bottom:0; }
.vp-port-head a {
  font-size:13px; font-weight:700; color:var(--gold-dk); white-space:nowrap;
  padding-bottom:4px; border-bottom:1.5px solid rgba(185,120,0,.30);
  transition:border-color .2s;
}
.vp-port-head a:hover { border-color:var(--gold-dk); }

/* Top: asymmetric grid */
.vp-port-grid-top {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  grid-template-rows:240px 240px;
  gap:14px; margin-bottom:14px;
}
.vp-port-card-lg { grid-row:1 / 3; }

/* Bottom: 3-col row */
.vp-port-grid-bot {
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}

.vp-port-card {
  border-radius:18px; overflow:hidden; position:relative;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 6px 24px rgba(0,0,0,.08); cursor:pointer;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.vp-port-card:hover { transform:translateY(-5px); box-shadow:0 20px 52px rgba(0,0,0,.14); }
.vp-port-card-bot {
  height:200px;
  border-radius:16px; overflow:hidden; position:relative;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 4px 16px rgba(0,0,0,.07); cursor:pointer;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.vp-port-card-bot:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.12); }
.vp-port-img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.vp-port-card:hover .vp-port-img,
.vp-port-card-bot:hover .vp-port-img { transform:scale(1.06); }
.vp-port-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 38%,rgba(0,0,0,.78));
  display:flex; flex-direction:column; justify-content:flex-end; padding:20px 22px;
}
.vp-port-cat {
  font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--gold); margin-bottom:5px; display:flex; align-items:center; gap:6px;
}
.vp-port-cat::before { content:''; width:14px; height:1.5px; background:var(--gold); }
.vp-port-title {
  font-size:16px; font-weight:700; color:#fff; letter-spacing:-.2px; line-height:1.2;
}
.vp-port-card-bot .vp-port-title { font-size:14px; }
/* Play button hover */
.vp-port-play {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(0);
  width:52px; height:52px; border-radius:50%;
  background:rgba(245,196,0,.88);
  display:flex; align-items:center; justify-content:center; font-size:17px;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
  box-shadow:0 6px 20px rgba(245,196,0,.40);
}
.vp-port-card:hover .vp-port-play,
.vp-port-card-bot:hover .vp-port-play { transform:translate(-50%,-50%) scale(1); }


/* ════════════════════════════════════════════
   6. CAPABILITIES
════════════════════════════════════════════ */
.vp-caps {
  background:var(--bg); padding:60px 0; overflow:hidden;
}
.vp-caps-inner {
  max-width:1200px; margin:0 auto; padding:0 48px;
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
}
.vp-caps-left .section-title { text-align:left; }
.vp-caps-left .section-sub   { text-align:left; margin-bottom:36px; }
.vp-cap-list { display:flex; flex-direction:column; gap:0; }
.vp-cap-item {
  display:flex; align-items:center; gap:16px;
  padding:16px 0; border-bottom:1px solid rgba(0,0,0,.07);
}
.vp-cap-item:first-child { border-top:1px solid rgba(0,0,0,.07); }
.vp-cap-icon {
  width:42px; height:42px; border-radius:11px; flex-shrink:0;
  background:rgba(245,196,0,.08); border:1px solid rgba(245,196,0,.18);
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.vp-cap-body { flex:1; }
.vp-cap-name {
  font-size:14px; font-weight:700; color:var(--text); letter-spacing:-.1px; margin-bottom:6px;
}
.vp-cap-bar-track {
  height:3px; background:rgba(0,0,0,.07); border-radius:999px; overflow:hidden;
}
.vp-cap-bar {
  height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--gold),var(--gold-amber));
  width:0; transition:width 1.2s cubic-bezier(.22,1,.36,1);
}
.vp-cap-pct { font-size:12px; font-weight:700; color:var(--gold-dk); flex-shrink:0; }

/* Right: image + spec card */
.vp-caps-right { position:relative; padding-bottom:28px; padding-right:28px; }
.vp-caps-img {
  border-radius:20px; overflow:hidden;
  box-shadow:0 20px 72px rgba(0,0,0,.13);
}
.vp-caps-img img {
  width:100%; height:auto; object-fit:contain; display:block;
  transition:transform .7s ease;
}
.vp-caps-img:hover img { transform:scale(1.03); }
/* Floating spec card */
.vp-spec-card {
  position:absolute; bottom:0; right:0;
  background:var(--bg-dark); border:1px solid rgba(245,196,0,.22);
  border-radius:16px; padding:20px 24px;
  box-shadow:0 12px 44px rgba(0,0,0,.28);
  min-width:200px;
}
.vp-spec-title {
  font-size:10px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--gold); margin-bottom:12px;
}
.vp-spec-row {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:rgba(255,255,255,.70); margin-bottom:6px;
}
.vp-spec-row:last-child { margin-bottom:0; }
.vp-spec-dot { width:5px;height:5px;border-radius:50%;background:var(--gold);flex-shrink:0; }


/* ════════════════════════════════════════════
   7. PROCESS — Vertical numbered list
════════════════════════════════════════════ */
.vp-process {
  background:var(--bg-alt); padding:60px 0;
}
.vp-process-inner { max-width:900px; margin:0 auto; padding:0 48px; }
.vp-process-head { text-align:center; margin-bottom:40px; }

.vp-steps {
  position:relative; padding-left:72px;
}
/* The vertical line */
.vp-steps::before {
  content:''; position:absolute; left:23px; top:24px; bottom:24px; width:2px;
  background:linear-gradient(to bottom, var(--gold), rgba(245,196,0,.06));
  transform:scaleY(0); transform-origin:top;
  transition:transform 1.6s cubic-bezier(.22,1,.36,1);
}
.vp-steps.line-on::before { transform:scaleY(1); }

.vp-step {
  display:grid; grid-template-columns:auto 1fr;
  gap:28px; align-items:flex-start;
  padding-bottom:40px; position:relative;
  opacity:0; transform:translateX(-18px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.vp-step:last-child { padding-bottom:0; }
.vp-step.step-on { opacity:1; transform:none; }

.vp-step-bubble {
  position:relative; z-index:1;
  margin-left:-72px;
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  background:#fff; border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 18px rgba(245,196,0,.22);
  transition:background .3s, border-color .3s;
}
.vp-step:hover .vp-step-bubble { background:var(--gold); }
.vp-step-num {
  font-size:14px; font-weight:800; color:var(--gold-dk); letter-spacing:-.5px;
  transition:color .3s;
}
.vp-step:hover .vp-step-num { color:#000; }

.vp-step-card {
  background:#fff; border:1px solid rgba(0,0,0,.07);
  border-radius:16px; padding:28px 32px;
  box-shadow:0 4px 20px rgba(0,0,0,.05);
  transition:box-shadow .3s, border-color .3s;
}
.vp-step:hover .vp-step-card {
  box-shadow:0 14px 44px rgba(0,0,0,.10);
  border-color:rgba(245,196,0,.30);
}
.vp-step-title {
  font-size:18px; font-weight:700; color:var(--text);
  letter-spacing:-.3px; margin-bottom:9px;
  display:flex; align-items:center; gap:10px;
}
.vp-step-icon { font-size:20px; }
.vp-step-desc { font-size:14px; line-height:1.75; color:var(--muted); }
.vp-step-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; }
.vp-step-tag {
  font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--gold-dk); background:rgba(245,196,0,.08); border:1px solid rgba(245,196,0,.20);
  padding:4px 10px; border-radius:999px;
}


/* ════════════════════════════════════════════
   8. TESTIMONIALS — Horizontal slider
════════════════════════════════════════════ */
.vp-testi {
  background:var(--bg-dark); padding:60px 0; overflow:hidden;
}
.vp-testi-inner { max-width:1200px; margin:0 auto; padding:0 48px; }
.vp-testi-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom:44px;
}
.vp-testi-head-text {}
.vp-testi-head .section-title { color:#fff; text-align:left; margin-bottom:0; }
.vp-testi-head .section-sub   { color:rgba(255,255,255,.45); text-align:left; margin-top:8px; margin-bottom:0; }
.vp-testi-arrows { display:flex; gap:10px; flex-shrink:0; }
.vp-arrow {
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:17px; color:#fff; transition:all .22s; user-select:none;
}
.vp-arrow:hover { background:var(--gold); border-color:var(--gold); color:#000; }

.vp-testi-wrap { overflow:hidden; }
.vp-testi-track {
  display:flex; gap:16px;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.vp-testi-card {
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
  border-radius:20px; padding:32px; flex-shrink:0;
  width:calc(33.333% - 11px);
  transition:border-color .3s;
}
.vp-testi-card:hover { border-color:rgba(245,196,0,.25); }
.vtc-stars { color:var(--gold); font-size:13px; letter-spacing:2px; margin-bottom:16px; }
.vtc-quote {
  font-size:15px; line-height:1.74; color:rgba(255,255,255,.62);
  font-style:italic; margin-bottom:22px;
}
.vtc-author {
  display:flex; align-items:center; gap:12px;
  padding-top:16px; border-top:1px solid rgba(255,255,255,.08);
}
.vtc-avatar {
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),var(--gold-amber));
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:#000;
}
.vtc-name { font-size:14px; font-weight:700; color:#fff; }
.vtc-role { font-size:12px; color:rgba(255,255,255,.36); margin-top:2px; }
/* Dot indicators */
.vp-testi-dots {
  display:flex; gap:6px; justify-content:center; margin-top:28px;
}
.vp-testi-dot {
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.20); cursor:pointer;
  transition:background .25s, transform .25s;
}
.vp-testi-dot.active { background:var(--gold); transform:scale(1.4); }


/* ════════════════════════════════════════════
   9. FAQ
════════════════════════════════════════════ */
.vp-faq {
  background:var(--bg); padding:60px 0;
}
.vp-faq-inner { max-width:860px; margin:0 auto; padding:0 48px; }
.vp-faq-head { text-align:center; margin-bottom:32px; }
.vp-faq-grid { display:flex; flex-direction:column; gap:0; }

.vp-faq-card {
  border-bottom:1px solid rgba(0,0,0,.08);
  opacity:0; transform:translateY(14px);
  transition:opacity .45s ease, transform .45s ease;
}
.vp-faq-card:first-child { border-top:1px solid rgba(0,0,0,.08); }
.vp-faq-card.faq-on { opacity:1; transform:none; }

.vp-faq-btn {
  width:100%; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; gap:14px;
  padding:24px 4px; text-align:left;
  transition:background .2s;
}
.vp-faq-btn:hover { background:rgba(245,196,0,.04); border-radius:6px; }

.vp-faq-q-badge {
  font-size:10px; font-weight:800; letter-spacing:1px;
  color:var(--gold-dk); background:rgba(245,196,0,.10);
  border:1px solid rgba(245,196,0,.22); padding:3px 8px;
  border-radius:6px; flex-shrink:0;
}

.vp-faq-q-text {
  flex:1; font-size:15px; font-weight:700; color:var(--text);
  letter-spacing:-.2px; line-height:1.45;
}

.vp-faq-chevron {
  flex-shrink:0; width:20px; height:20px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(245,196,0,.10);
  color:var(--gold-dk); font-size:14px; font-weight:700;
  transition:transform .28s cubic-bezier(.22,1,.36,1), background .2s;
  line-height:1; user-select:none;
}
.vp-faq-card.open .vp-faq-chevron {
  transform:rotate(45deg);
  background:var(--gold);
  color:#000;
}

.vp-faq-a {
  max-height:0; overflow:hidden;
  transition:max-height .38s cubic-bezier(.22,1,.36,1), padding .28s ease;
  font-size:14px; line-height:1.76; color:var(--muted);
  padding:0 4px 0 46px;
}
.vp-faq-card.open .vp-faq-a {
  max-height:300px;
  padding-bottom:22px;
}


/* ════════════════════════════════════════════
   10. CTA
════════════════════════════════════════════ */
.vp-cta {
  background:var(--bg-dark); padding:72px 0;
  text-align:center; position:relative; overflow:hidden;
}
.vp-cta-bg {
  position:absolute; inset:0;
  background:url('/assets/images/home-6.jpg') center/cover no-repeat;
  opacity:.25; pointer-events:none;
}
.vp-cta::before {
  content:''; position:absolute; left:50%; top:50%;
  width:800px; height:800px; border-radius:50%;
  background:radial-gradient(circle,rgba(245,196,0,.09) 0%,transparent 65%);
  transform:translate(-50%,-50%); pointer-events:none;
}
.vp-cta-inner { position:relative; z-index:1; max-width:680px; margin:0 auto; padding:0 32px; }

/* Pulsing play button */
.vp-play-ring {
  width:96px; height:96px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-amber));
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 44px;
  box-shadow:0 0 0 0 rgba(245,196,0,.5);
  animation:vpPulse 3s ease-in-out infinite;
  cursor:pointer; transition:transform .25s;
}
.vp-play-ring:hover { transform:scale(1.10); }
.vp-play-ring-icon { font-size:30px; margin-left:4px; }

.vp-cta-overline {
  font-size:10px; font-weight:700; letter-spacing:4px;
  text-transform:uppercase; color:var(--gold); opacity:.80;
  margin-bottom:20px; display:flex; align-items:center; justify-content:center; gap:16px;
}
.vp-cta-overline::before,.vp-cta-overline::after {
  content:''; width:44px; height:1px; background:var(--gold); opacity:.40;
}
.vp-cta-title {
  font-size:clamp(42px,5.5vw,76px); font-weight:800;
  letter-spacing:-3.5px; line-height:.97; color:#fff; margin-bottom:24px;
}
.vp-cta-title .g {
  background:linear-gradient(120deg,var(--gold) 0%,var(--gold-amber) 55%,var(--gold) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.vp-cta-sub {
  font-size:16px; line-height:1.74; color:rgba(255,255,255,.48);
  max-width:460px; margin:0 auto 40px;
}
.vp-cta-acts { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }


/* ════════════════════════════════════════════
   11. CONTACT — Centered single-card form
════════════════════════════════════════════ */
.vp-contact {
  background:var(--bg-alt); padding:60px 0;
}
.vp-contact-inner { max-width:700px; margin:0 auto; padding:0 48px; }
.vp-contact-head { text-align:center; margin-bottom:40px; }
.vp-form-card {
  background:#fff; border-radius:24px; padding:48px 44px;
  border:1px solid rgba(0,0,0,.07);
  box-shadow:0 8px 52px rgba(0,0,0,.08);
  position:relative;
}
.vp-form-card::before {
  content:''; position:absolute; top:0; left:24px; right:24px; height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-amber),var(--gold));
  border-radius:0 0 4px 4px;
}
.vp-fr { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.vp-fg { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.vp-fg label { font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:rgba(17,17,17,.40); }
.vp-fg input, .vp-fg select, .vp-fg textarea {
  padding:12px 16px; border-radius:10px;
  border:1.5px solid rgba(0,0,0,.10);
  font-family:var(--font); font-size:14px; color:var(--text);
  background:#fff; transition:border-color .2s, box-shadow .2s; outline:none;
}
.vp-fg input:focus, .vp-fg select:focus, .vp-fg textarea:focus {
  border-color:rgba(245,196,0,.60);
  box-shadow:0 0 0 4px rgba(245,196,0,.09);
}
.vp-fg textarea { min-height:120px; resize:vertical; }
.vp-submit {
  width:100%; padding:15px; border-radius:999px;
  background:linear-gradient(135deg,var(--gold),var(--gold-amber));
  color:#000; font-size:15px; font-weight:800;
  font-family:var(--font); border:none; cursor:pointer;
  transition:transform .22s, box-shadow .22s; letter-spacing:.3px;
}
.vp-submit:hover { transform:translateY(-2px); box-shadow:0 12px 36px rgba(245,196,0,.42); }


/* ════════════════════════════════════════════
   RESPONSIVE — Video Production
════════════════════════════════════════════ */
@media (max-width:1024px) {
  .vp-hero             { padding:80px 0 40px; }
  .vp-hero-thumbs      { flex-direction:row; }
  .vp-thumb:nth-child(1),.vp-thumb:nth-child(2),.vp-thumb:nth-child(3) { height:150px; flex:1; }
  .vp-stats-grid       { grid-template-columns:1fr 1fr; }
  .vp-stat:nth-child(2n) { border-right:none; }
  .vp-phase-body       { grid-template-columns:1fr; gap:28px; }
  .vp-phase-desc       { border-right:none; padding-right:0; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:20px; }
  .vp-phase-chips      { grid-template-columns:1fr 1fr; }
  .vp-port-grid-top    { grid-template-columns:1fr; grid-template-rows:auto; }
  .vp-port-card-lg     { grid-row:auto; height:280px; }
  .vp-port-grid-bot    { grid-template-columns:1fr 1fr; }
  .vp-caps-inner       { grid-template-columns:1fr; gap:48px; }
  .vp-caps-right       { padding-bottom:20px; padding-right:20px; }
  .vp-testi-card       { width:calc(50% - 8px); }
  .vp-faq-inner        { padding:0 24px; }
}
@media (max-width:768px) {
  .vp-hero             { padding:80px 0 32px; }
  .vp-hero-thumbs      { flex-direction:column; }
  .vp-thumb:nth-child(1),.vp-thumb:nth-child(2),.vp-thumb:nth-child(3) { flex:auto; height:130px; }
  .vp-phases-inner, .vp-portfolio-inner, .vp-caps-inner,
  .vp-process-inner, .vp-testi-inner, .vp-faq-inner { padding-left:20px; padding-right:20px; }
  .vp-phase-tabs       { flex-direction:column; border-bottom:none; }
  .vp-phase-tab        { border-bottom:1px solid rgba(255,255,255,.08); border-left:3px solid transparent; }
  .vp-phase-tab.active { border-bottom-color:rgba(255,255,255,.08); border-left-color:var(--gold); }
  .vp-phase-panel      { padding:24px 20px; }
  .vp-phase-chips      { grid-template-columns:1fr; }
  .vp-port-grid-bot    { grid-template-columns:1fr; }
  .vp-steps            { padding-left:44px; }
  .vp-steps::before    { left:15px; }
  .vp-step-bubble      { margin-left:-44px; width:38px; height:38px; }
  .vp-testi-card       { width:calc(100% - 0px); min-width:260px; }
  .vp-fr               { grid-template-columns:1fr; }
  .vp-contact-inner    { padding-left:20px; padding-right:20px; }
  .vp-form-card        { padding:28px 20px; }
  .vp-cta-title        { letter-spacing:-2px; }
}
@media (prefers-reduced-motion:reduce) {
  .vp-hero *, .vp-marquee *, .vp-stats *, .vp-phases *,
  .vp-portfolio *, .vp-caps *, .vp-process *, .vp-testi *,
  .vp-faq *, .vp-cta *, .vp-contact * {
    animation-duration:.01ms !important; transition-duration:.01ms !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   ── Event Management ──
   ═══════════════════════════════════════════════════════════════ */

/* ── ANIMATIONS ─────────────────────────────────────────── */
@keyframes emFadeUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:none; }
}
@keyframes emFadeIn {
  from { opacity:0; } to { opacity:1; }
}
@keyframes emSlideLeft {
  from { opacity:0; transform:translateX(40px); }
  to   { opacity:1; transform:none; }
}
@keyframes mScrollEM { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes emDashDraw {
  from { stroke-dashoffset:600; }
  to   { stroke-dashoffset:0; }
}
@keyframes emBadgePop {
  from { opacity:0; transform:scale(.75) translateY(12px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
@keyframes emTickerScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── SHARED REVEAL (same pattern as .cf-reveal, .cr-reveal, .vp-reveal — see consolidated [class*="-reveal"] at top) ── */
.em-reveal { opacity:0; transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.em-reveal.up   { transform:translateY(28px); }
.em-reveal.left { transform:translateX(-28px); }
.em-reveal.right{ transform:translateX(28px); }
.em-reveal.shown { opacity:1; transform:none; }

/* ============================================================
   1. HERO
============================================================ */
.em-hero {
  min-height:88svh; background:var(--bg-dark);
  display:grid; grid-template-columns:1fr 1fr;
  position:relative; overflow:hidden;
}
.em-hero-left {
  display:flex; flex-direction:column; justify-content:center;
  padding:80px 64px 48px 80px;
  position:relative; z-index:2;
}
.em-hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--gold); margin-bottom:28px;
  animation:emFadeIn .7s ease .2s both;
}
.em-hero-eyebrow::before {
  content:''; width:28px; height:2px; background:var(--gold); border-radius:2px;
}
.em-hero-headline {
  font-size:clamp(44px,5.5vw,72px); font-weight:800;
  line-height:1.05; letter-spacing:-2.5px; color:#fff;
  margin-bottom:0;
}
.em-hero-static {
  display:block;
  animation:emFadeUp .8s cubic-bezier(.22,1,.36,1) .35s both;
}
.em-word-wrap {
  display:block; position:relative; height:1.05em; overflow:hidden;
  margin-top:4px;
}
.em-word {
  position:absolute; inset:0;
  font-size:inherit; font-weight:800; letter-spacing:inherit; line-height:1.05;
  color:var(--gold);
  opacity:0; transform:translateY(70%);
  transition:opacity .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1);
}
.em-word.active { opacity:1; transform:translateY(0); }
.em-word.exit   { opacity:0; transform:translateY(-50%);
  transition:opacity .3s ease, transform .3s ease; }
.em-hero-sub {
  font-size:16px; line-height:1.72; color:var(--muted-inv);
  max-width:420px; margin-top:28px; margin-bottom:44px;
  animation:emFadeUp .8s cubic-bezier(.22,1,.36,1) .6s both;
}
.em-hero-btns {
  display:flex; gap:14px; flex-wrap:wrap;
  animation:emFadeUp .8s cubic-bezier(.22,1,.36,1) .75s both;
}
.em-hero-meta {
  display:flex; gap:36px; margin-top:56px; padding-top:32px;
  border-top:1px solid rgba(255,255,255,.10);
  animation:emFadeUp .8s cubic-bezier(.22,1,.36,1) .9s both;
}
.em-hero-stat { display:flex; flex-direction:column; gap:4px; }
.em-hero-stat-n { font-size:28px; font-weight:800; letter-spacing:-1px; color:#fff; }
.em-hero-stat-l { font-size:12px; color:var(--muted-inv); letter-spacing:.5px; }
.em-hero-right { position:relative; overflow:hidden; }
.em-hero-img {
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.72) saturate(1.1);
  animation:emFadeIn 1.2s ease .2s both;
}
.em-hero-right::before {
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, var(--bg-dark) 0%, transparent 35%);
}
.em-hero-badge {
  position:absolute; bottom:52px; right:40px; z-index:3;
  background:rgba(15,12,0,.88); border:1px solid rgba(245,196,0,.32);
  backdrop-filter:blur(16px); border-radius:16px;
  padding:18px 24px; min-width:180px;
  animation:emBadgePop .7s cubic-bezier(.22,1,.36,1) 1s both;
}
.em-hb-label {
  font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--gold); margin-bottom:10px;
}
.em-hb-row { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.em-hb-dot { width:8px; height:8px; border-radius:50%; background:var(--gold); flex-shrink:0; }
.em-hb-text { font-size:12px; font-weight:600; color:#fff; line-height:1.3; }
.em-hb-row:last-child { margin-bottom:0; }

/* ============================================================
   2. MARQUEE
============================================================ */
/* Icon strip */
.em-icon-strip {
  background:#f5f5f0; padding:28px 0;
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
  overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none;
}
.em-icon-strip::-webkit-scrollbar { display:none; }
.em-icon-strip-track {
  display:flex; align-items:center; justify-content:center;
  gap:12px; flex-wrap:wrap;
  max-width:1200px; margin:0 auto; padding:0 24px;
}
.em-icon-item {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:999px;
  font-size:13px; font-weight:600; color:#1a1a1a;
  white-space:nowrap;
  transition:border-color .25s, box-shadow .25s, transform .25s;
}
.em-icon-item svg { color:var(--gold-dk); flex-shrink:0; }
.em-icon-item:hover {
  border-color:rgba(184,120,0,.25);
  box-shadow:0 4px 16px rgba(184,120,0,.08);
  transform:translateY(-2px);
}
.em-icon-dot {
  font-size:20px; color:rgba(0,0,0,.15); line-height:1;
  user-select:none;
}
@media(max-width:768px) {
  .em-icon-strip-track { justify-content:flex-start; flex-wrap:nowrap; }
  .em-icon-dot { display:none; }
}

/* ============================================================
   3. STATS TICKER
============================================================ */
.em-stats {
  background:var(--bg-dark); padding:36px 0; overflow:hidden;
  border-bottom:1px solid rgba(245,196,0,.10);
}
.em-stats-inner {
  display:flex; gap:0;
  animation:emTickerScroll 22s linear infinite;
  width:max-content;
}
.em-stat-cell {
  display:flex; align-items:center; gap:20px;
  padding:0 52px; border-right:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}
.em-stat-cell:last-child { border-right:none; }
.em-stat-n {
  font-size:clamp(36px,4vw,52px); font-weight:800;
  letter-spacing:-2px; color:#fff; line-height:1; white-space:nowrap;
}
.em-stat-n span { color:var(--gold); }
.em-stat-l { font-size:12px; line-height:1.4; color:var(--muted-inv); max-width:100px; }

/* ============================================================
   4. EVENT TYPES
============================================================ */
.em-types { background:var(--bg); padding:60px 0; }
.em-types-inner { max-width:1200px; margin:0 auto; padding:0 48px; }
.em-types-head { text-align:center; margin-bottom:36px; }
.em-types-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.em-type-card {
  background:var(--bg-alt); border:1.5px solid rgba(0,0,0,.07);
  border-radius:20px; padding:36px 32px;
  cursor:default; overflow:hidden;
  transition:border-color .3s, box-shadow .4s, transform .35s cubic-bezier(.22,1,.36,1);
  opacity:0; transform:translateY(20px);
}
.em-type-card.tc-on { opacity:1; transform:none; }
.em-type-card:hover {
  border-color:rgba(245,196,0,.40);
  box-shadow:0 24px 60px rgba(0,0,0,.09);
  transform:translateY(-6px);
}
.em-tc-icon {
  width:52px; height:52px; border-radius:14px;
  background:rgba(245,196,0,.10); border:1px solid rgba(245,196,0,.18);
  display:flex; align-items:center; justify-content:center;
  font-size:24px; margin-bottom:20px;
  transition:background .3s, transform .3s;
}
.em-type-card:hover .em-tc-icon {
  background:rgba(245,196,0,.20); transform:scale(1.08);
}
.em-tc-title {
  font-size:18px; font-weight:800; color:var(--text);
  letter-spacing:-.4px; margin-bottom:10px;
}
.em-tc-desc {
  font-size:14px; line-height:1.72; color:var(--muted); margin-bottom:0;
}
.em-tc-list {
  list-style:none; margin-top:0;
  max-height:0; overflow:hidden;
  transition:max-height .4s cubic-bezier(.22,1,.36,1), margin-top .3s ease;
}
.em-type-card:hover .em-tc-list {
  max-height:220px; margin-top:18px;
}
.em-tc-list li {
  font-size:13px; color:var(--muted); padding:5px 0;
  display:flex; align-items:center; gap:8px;
  border-top:1px solid rgba(0,0,0,.05);
}
.em-tc-list li::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--gold); flex-shrink:0;
}

/* ============================================================
   5. PROCESS
============================================================ */
.em-process { background:var(--bg-alt); padding:60px 0; }
.em-process-inner { max-width:1160px; margin:0 auto; padding:0 48px; }
.em-process-head { text-align:center; margin-bottom:40px; }
.em-process-steps {
  position:relative; display:flex; flex-direction:column; gap:0;
}
.em-process-steps::before {
  content:''; position:absolute;
  left:50%; top:0; bottom:0; width:1px;
  transform:translateX(-50%);
  background:repeating-linear-gradient(
    to bottom,
    rgba(245,196,0,.45) 0px,
    rgba(245,196,0,.45) 8px,
    transparent 8px,
    transparent 18px
  );
}
.em-pstep {
  display:grid; grid-template-columns:1fr 80px 1fr;
  align-items:center; gap:0;
  padding:56px 0;
  border-bottom:1px solid rgba(0,0,0,.07);
  opacity:0;
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.em-pstep:last-child { border-bottom:none; }
.em-pstep.step-on { opacity:1; transform:none !important; }
.em-pstep:nth-child(odd)  { transform:translateX(-20px); }
.em-pstep:nth-child(even) { transform:translateX(20px); }
.em-ps-content { padding:0 48px; }
.em-pstep:nth-child(even) .em-ps-content { order:3; }
.em-pstep:nth-child(even) .em-ps-img-wrap { order:1; }
.em-ps-num {
  font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  color:var(--gold); margin-bottom:12px;
  display:flex; align-items:center; gap:8px;
}
.em-ps-num::before {
  content:''; display:inline-block; width:18px; height:1.5px;
  background:var(--gold); border-radius:2px;
}
.em-ps-title {
  font-size:clamp(22px,2.8vw,32px); font-weight:800;
  letter-spacing:-.8px; color:var(--text); line-height:1.18;
  margin-bottom:14px;
}
.em-ps-body {
  font-size:15px; line-height:1.75; color:var(--muted); margin-bottom:20px;
}
.em-ps-tags { display:flex; flex-wrap:wrap; gap:8px; }
.em-ps-tag {
  font-size:11px; font-weight:600; letter-spacing:.5px;
  padding:4px 12px; border-radius:99px;
  background:rgba(245,196,0,.10); border:1px solid rgba(245,196,0,.22);
  color:var(--gold-dk);
}
.em-ps-bubble {
  display:flex; align-items:center; justify-content:center;
  z-index:2; position:relative;
}
.em-ps-circle {
  width:52px; height:52px; border-radius:50%;
  background:var(--bg-dark); border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:800; color:var(--gold);
  box-shadow:0 0 0 6px var(--bg-alt), 0 0 0 7px rgba(245,196,0,.15);
  flex-shrink:0;
}
.em-ps-img-wrap {
  border-radius:20px; overflow:hidden;
  aspect-ratio:4/3;
  box-shadow:0 20px 52px rgba(0,0,0,.10);
}
.em-ps-img-wrap img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.em-pstep:hover .em-ps-img-wrap img { transform:scale(1.04); }

/* ============================================================
   6. PORTFOLIO
============================================================ */
.em-portfolio { background:var(--bg); padding:60px 0; }
.em-port-inner { max-width:1200px; margin:0 auto; padding:0 48px; }
.em-port-head { text-align:center; margin-bottom:48px; }
.em-filters {
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin-bottom:44px;
}
.em-filter-btn {
  font-family:var(--font); font-size:13px; font-weight:700;
  padding:9px 22px; border-radius:99px; cursor:pointer;
  background:none; border:1.5px solid rgba(0,0,0,.12); color:var(--muted);
  transition:all .22s;
}
.em-filter-btn:hover { border-color:var(--gold-dk); color:var(--gold-dk); }
.em-filter-btn.active {
  background:var(--bg-dark); border-color:var(--bg-dark); color:var(--gold);
}
.em-port-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  grid-auto-flow:dense;
}
.em-port-card {
  border-radius:18px; overflow:hidden; position:relative;
  aspect-ratio:3/2; cursor:pointer;
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, opacity .35s;
  opacity:1; transform:scale(1);
}
.em-port-card.em-hidden { opacity:0; pointer-events:none; transform:scale(.92); }
.em-port-card img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.22,1,.36,1), filter .4s;
  filter:brightness(.85);
}
.em-port-card:hover { transform:translateY(-6px); box-shadow:0 24px 52px rgba(0,0,0,.14); }
.em-port-card:hover img { transform:scale(1.07); filter:brightness(.7); }
.em-port-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,12,0,.88) 0%, transparent 55%);
  padding:20px 22px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.em-port-cat {
  font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--gold); margin-bottom:6px;
}
.em-port-title {
  font-size:15px; font-weight:700; color:#fff; line-height:1.3;
}

/* ============================================================
   7. CLIENTS
============================================================ */
.em-clients { background:var(--bg-alt); padding:80px 0; }
.em-clients-inner { max-width:1200px; margin:0 auto; padding:0 48px; }
.em-cl-layout {
  display:grid; grid-template-columns:1fr 320px; gap:64px; align-items:center;
}
.em-cl-left {}
.em-cl-label {
  font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--muted); margin-bottom:32px;
}
.em-cl-logos {
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.em-cl-logo {
  background:#fff; border:1px solid rgba(0,0,0,.07); border-radius:14px;
  padding:18px 24px; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; color:var(--muted); letter-spacing:-.2px;
  transition:border-color .25s, box-shadow .25s, color .25s;
  min-height:64px;
}
.em-cl-logo:hover { border-color:rgba(245,196,0,.35); box-shadow:0 8px 24px rgba(0,0,0,.06); color:var(--text); }
.em-cl-right {}
.em-cl-stat-card {
  background:var(--bg-dark); border:1px solid rgba(245,196,0,.18);
  border-radius:24px; padding:44px 36px; text-align:center;
  position:relative; overflow:hidden;
}
.em-cl-stat-card::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(245,196,0,.10) 0%, transparent 65%);
}
.em-cl-stat-n {
  font-size:clamp(52px,6vw,72px); font-weight:800;
  letter-spacing:-3px; color:#fff; line-height:1;
  position:relative;
}
.em-cl-stat-n em { color:var(--gold); font-style:normal; }
.em-cl-stat-title {
  font-size:16px; font-weight:700; color:rgba(255,255,255,.80);
  margin-top:12px; margin-bottom:8px;
}
.em-cl-stat-sub { font-size:13px; color:var(--muted-inv); line-height:1.6; position:relative; }
.em-cl-stat-divider {
  width:36px; height:2px; background:var(--gold);
  border-radius:2px; margin:18px auto;
}

/* ============================================================
   8. CLIENT REVIEWS
============================================================ */
.em-testi { background:var(--bg-alt); padding:64px 0; }
.em-testi-inner { max-width:1200px; margin:0 auto; padding:0 48px; }
.em-testi-head { text-align:center; margin-bottom:40px; }
.em-rev-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.em-rev-card {
  background:#fff; border-radius:20px; padding:28px 28px 24px;
  border-top:3px solid var(--gold);
  box-shadow:0 2px 16px rgba(0,0,0,.05);
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(18px);
  transition:opacity .5s ease, transform .5s ease, box-shadow .3s;
}
.em-rev-card.rev-on { opacity:1; transform:none; }
.em-rev-card:hover { box-shadow:0 12px 40px rgba(0,0,0,.10); transform:translateY(-4px); }
.em-rev-stars { color:var(--gold); font-size:13px; margin-bottom:14px; letter-spacing:1px; }
.em-rev-quote {
  font-size:14px; line-height:1.74; color:var(--text);
  flex:1; margin-bottom:20px; position:relative;
}
.em-rev-quote::before {
  content:'\201C'; font-size:48px; line-height:.5; font-family:Georgia,serif;
  color:rgba(245,196,0,.25); display:block; margin-bottom:6px;
}
.em-rev-author {
  display:flex; align-items:center; gap:12px;
  border-top:1px solid rgba(0,0,0,.07); padding-top:16px;
}
.em-rev-avatar {
  width:40px; height:40px; border-radius:50%; overflow:hidden;
  border:2px solid rgba(245,196,0,.25); flex-shrink:0;
}
.em-rev-avatar img { width:100%; height:100%; object-fit:cover; }
.em-rev-name { font-size:13px; font-weight:700; color:var(--text); line-height:1.3; }
.em-rev-role { font-size:11px; color:var(--muted); margin-top:2px; }

/* ============================================================
   9. FAQ
============================================================ */
.em-faq { background:var(--bg-alt); padding:60px 0; }
.em-faq-inner { max-width:820px; margin:0 auto; padding:0 48px; }
.em-faq-head { text-align:center; margin-bottom:36px; }
.em-faq-list { display:flex; flex-direction:column; gap:0; }
.em-faq-item {
  display:grid; grid-template-columns:56px 1fr;
  gap:0; border-bottom:1px solid rgba(0,0,0,.08);
  opacity:0; transform:translateY(12px);
  transition:opacity .45s ease, transform .45s ease;
}
.em-faq-item:first-child { border-top:1px solid rgba(0,0,0,.08); }
.em-faq-item.faq-on { opacity:1; transform:none; }
.em-faq-num {
  font-size:13px; font-weight:800; color:rgba(245,196,0,.50);
  padding:26px 0 0;
  transition:color .25s;
  user-select:none;
  line-height:1;
}
.em-faq-item.open .em-faq-num { color:var(--gold); }
.em-faq-right {}
.em-faq-btn {
  width:100%; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:24px 0; text-align:left;
}
.em-faq-q {
  font-size:15px; font-weight:700; color:var(--text);
  letter-spacing:-.2px; line-height:1.45; flex:1;
}
.em-faq-icon {
  flex-shrink:0; width:22px; height:22px; border-radius:50%;
  background:rgba(245,196,0,.12); border:1px solid rgba(245,196,0,.22);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; color:var(--gold-dk); line-height:1;
  transition:transform .28s cubic-bezier(.22,1,.36,1), background .22s, color .22s;
  user-select:none;
}
.em-faq-item.open .em-faq-icon {
  transform:rotate(45deg); background:var(--gold); color:#000;
}
.em-faq-a {
  max-height:0; overflow:hidden;
  font-size:14px; line-height:1.76; color:var(--muted);
  transition:max-height .38s cubic-bezier(.22,1,.36,1), padding .28s ease;
  padding:0 0 0;
}
.em-faq-item.open .em-faq-a {
  max-height:260px; padding-bottom:24px;
}

/* ============================================================
   10. CTA
============================================================ */
.em-cta {
  background:var(--bg-dark); padding:72px 0;
  position:relative; overflow:hidden;
}
.em-cta-deco {
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.em-cta-deco-grid {
  position:absolute; right:-60px; top:50%; transform:translateY(-50%);
  display:grid; grid-template-columns:repeat(7,44px); grid-template-rows:repeat(5,44px);
  gap:6px; opacity:.06;
}
.em-cta-cell {
  border:1px solid var(--gold); border-radius:6px;
}
.em-cta-cell.lit {
  background:var(--gold); opacity:1;
}
.em-cta-glow {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:600px; height:400px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(245,196,0,.08) 0%, transparent 70%);
  pointer-events:none;
}
.em-cta-inner {
  max-width:720px; margin:0 auto; padding:0 48px;
  text-align:center; position:relative; z-index:2;
}
.em-cta-eyebrow {
  font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase;
  color:var(--gold); margin-bottom:20px; display:block;
}
.em-cta-title {
  font-size:clamp(36px,5vw,60px); font-weight:800;
  letter-spacing:-2px; color:#fff; line-height:1.08;
  margin-bottom:20px;
}
.em-cta-title em { color:var(--gold); font-style:normal; }
.em-cta-sub {
  font-size:16px; line-height:1.72; color:var(--muted-inv);
  margin-bottom:44px;
}
.em-cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   11. CONTACT
============================================================ */
.em-contact { background:var(--bg); padding:60px 0; }
.em-contact-inner { max-width:1180px; margin:0 auto; padding:0 48px; }
.em-contact-head { text-align:center; margin-bottom:40px; }
.em-contact-grid {
  display:grid; grid-template-columns:1fr 1.45fr; gap:52px; align-items:start;
}
.em-cl-panel {
  background:var(--bg-alt); border:1px solid rgba(0,0,0,.07);
  border-radius:24px; padding:44px 40px;
  position:sticky; top:100px;
}
.em-cl-panel-title {
  font-size:18px; font-weight:800; color:var(--text);
  letter-spacing:-.4px; margin-bottom:6px;
}
.em-cl-panel-sub {
  font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:28px;
}
.em-checklist { list-style:none; display:flex; flex-direction:column; gap:0; margin-bottom:32px; }
.em-check-item {
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 0; border-bottom:1px solid rgba(0,0,0,.07);
  font-size:14px; color:var(--text); line-height:1.4;
}
.em-check-item:last-child { border-bottom:none; }
.em-check-box {
  width:20px; height:20px; border-radius:6px; flex-shrink:0; margin-top:1px;
  background:linear-gradient(135deg,var(--gold),var(--gold-amber));
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:#000; font-weight:700;
}
.em-cl-divider { width:36px; height:2px; background:rgba(0,0,0,.10); border-radius:2px; margin:28px 0; }
.em-cl-contact-row {
  display:flex; align-items:center; gap:12px;
  font-size:13px; color:var(--muted); margin-bottom:12px;
}
.em-cl-contact-row:last-child { margin-bottom:0; }
.em-cl-icon {
  width:32px; height:32px; border-radius:9px; flex-shrink:0;
  background:rgba(245,196,0,.10); border:1px solid rgba(245,196,0,.18);
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.em-cl-contact-row a { color:var(--text); font-weight:600; }
.em-form-card {
  background:#fff; border:1.5px solid rgba(0,0,0,.08);
  border-radius:24px; padding:48px 44px;
  position:relative; overflow:hidden;
}
.em-form-card::before {
  content:''; position:absolute; top:0; left:28px; right:28px; height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-amber),var(--gold));
  border-radius:0 0 4px 4px;
}
.em-form-title { font-size:20px; font-weight:800; color:var(--text); margin-bottom:4px; letter-spacing:-.4px; }
.em-form-sub { font-size:13px; color:var(--muted); margin-bottom:28px; }
.em-fr { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.em-fg { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.em-fg:last-of-type { margin-bottom:0; }
.em-fg label {
  font-size:12px; font-weight:700; color:var(--text); letter-spacing:.3px; text-transform:uppercase;
}
.em-fg input, .em-fg select, .em-fg textarea {
  font-family:var(--font); font-size:14px; color:var(--text);
  background:var(--bg-alt); border:1.5px solid rgba(0,0,0,.09); border-radius:12px;
  padding:12px 16px; outline:none; transition:border-color .22s, box-shadow .22s; width:100%;
}
.em-fg input:focus, .em-fg select:focus, .em-fg textarea:focus {
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,196,0,.12);
}
.em-fg textarea { resize:vertical; min-height:110px; }
.em-submit {
  width:100%; margin-top:22px; padding:16px;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-amber) 100%);
  color:#000; font-size:15px; font-weight:800; font-family:var(--font);
  border:none; border-radius:99px; cursor:pointer;
  transition:transform .22s, box-shadow .22s;
  letter-spacing:-.2px;
}
.em-submit:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(245,196,0,.40); }

/* ════════════════════════════════════════════
   RESPONSIVE — Event Management
════════════════════════════════════════════ */
@media (max-width:1024px) {
  .em-types-grid      { grid-template-columns:1fr 1fr; }
  .em-types-grid .em-type-card:last-child { grid-column:1 / -1; }
  .em-pstep           { grid-template-columns:1fr 60px 1fr; }
  .em-ps-content      { padding:0 28px; }
  .em-port-grid       { grid-template-columns:1fr 1fr; }
  .em-rev-grid        { grid-template-columns:1fr 1fr; }
  .em-cl-layout       { grid-template-columns:1fr; gap:40px; }
  .em-cl-logos        { grid-template-columns:repeat(4,1fr); }
  .em-contact-grid    { grid-template-columns:1fr; }
  .em-cl-panel        { position:static; }
  .em-cl-stat-card    { text-align:center; }
}
@media (max-width:768px) {
  .em-types-inner, .em-process-inner, .em-port-inner,
  .em-clients-inner, .em-testi-inner, .em-faq-inner,
  .em-cta-inner, .em-contact-inner { padding-left:20px; padding-right:20px; }
  .em-types-grid      { grid-template-columns:1fr; }
  .em-types-grid .em-type-card:last-child { grid-column:auto; }
  .em-process-steps::before { display:none; }
  .em-pstep           { grid-template-columns:1fr; gap:20px; }
  .em-ps-bubble       { display:none; }
  .em-pstep:nth-child(even) .em-ps-content { order:0; }
  .em-pstep:nth-child(even) .em-ps-img-wrap { order:0; }
  .em-ps-content      { padding:0; }
  .em-port-grid       { grid-template-columns:1fr; }
  .em-rev-grid        { grid-template-columns:1fr; }
  .em-cl-logos        { grid-template-columns:repeat(2,1fr); }
  .em-contact-grid    { grid-template-columns:1fr; }
  .em-fr              { grid-template-columns:1fr; }
  .em-form-card       { padding:32px 24px; }
  .em-cl-panel        { padding:28px 24px; }
  .em-faq-item        { grid-template-columns:36px 1fr; }
  .em-cta-deco-grid   { display:none; }
  .em-stats-inner     { animation:none; }
}


/* ═══════════════════════════════════════════════════════════════
   ── Camera Rental ──
   ═══════════════════════════════════════════════════════════════ */

/* ── ANIMATIONS ── */
@keyframes crFadeUp   { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
@keyframes crFadeIn   { from{opacity:0} to{opacity:1} }
@keyframes mScrollCR  { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes crLensPulse {
  0%,100% { transform:scale(1);   opacity:.18; }
  50%     { transform:scale(1.06);opacity:.28; }
}
@keyframes crLensPulse2 {
  0%,100% { transform:scale(1);   opacity:.10; }
  50%     { transform:scale(1.09);opacity:.20; }
}
@keyframes crLensPulse3 {
  0%,100% { transform:scale(1);   opacity:.06; }
  50%     { transform:scale(1.12);opacity:.14; }
}
@keyframes crApertureRotate {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}
@keyframes crStatCount {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:none; }
}

/* ── SHARED REVEAL (same pattern as .cf-reveal, .vp-reveal, .em-reveal — see consolidated [class*="-reveal"] at top) ── */
.cr-reveal { opacity:0; transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.cr-reveal.up    { transform:translateY(24px); }
.cr-reveal.left  { transform:translateX(-24px); }
.cr-reveal.right { transform:translateX(24px); }
.cr-reveal.shown { opacity:1; transform:none; }

/* ============================================================
   1. HERO
============================================================ */
.cr-hero {
  min-height:88svh;
  background:var(--bg-dark);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.cr-hero-photo {
  position:absolute; inset:0; z-index:0;
  background-image:url('/assets/images/outdoor-1.jpg');
  background-size:cover; background-position:center;
  opacity:.22;
}
.cr-lens-bg {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.cr-lens-ring {
  position:absolute; border-radius:50%;
  border:1px solid rgba(245,196,0,1);
}
.cr-lens-ring:nth-child(1) { width:200px; height:200px; animation:crLensPulse 4s ease-in-out infinite; }
.cr-lens-ring:nth-child(2) { width:360px; height:360px; animation:crLensPulse2 4s ease-in-out 0.6s infinite; }
.cr-lens-ring:nth-child(3) { width:540px; height:540px; animation:crLensPulse3 4s ease-in-out 1.2s infinite; }
.cr-lens-ring:nth-child(4) { width:740px; height:740px; border-color:rgba(245,196,0,.04); animation:crLensPulse3 5s ease-in-out 0.4s infinite; }
.cr-lens-ring:nth-child(5) { width:980px; height:980px; border-color:rgba(245,196,0,.03); animation:crLensPulse3 6s ease-in-out 0.8s infinite; }
.cr-aperture {
  position:absolute; width:130px; height:130px;
  animation:crApertureRotate 22s linear infinite; opacity:.12;
}
.cr-aperture::before, .cr-aperture::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--gold);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.cr-aperture::after { transform:rotate(45deg); border-color:rgba(245,196,0,.5); }
.cr-lens-bg::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 75% 75% at 50% 50%, transparent 0%, rgba(10,8,0,.7) 55%, var(--bg-dark) 100%);
}
.cr-hero-inner {
  position:relative; z-index:2;
  padding:96px 48px 72px; max-width:820px; margin:0 auto; text-align:center;
}
.cr-hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(245,196,0,.10); border:1px solid rgba(245,196,0,.25);
  border-radius:99px; padding:6px 18px;
  font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--gold); margin-bottom:28px; animation:crFadeIn .6s ease .2s both;
}
.cr-hero-badge::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--gold); }
.cr-hero-headline {
  font-size:clamp(38px,5.8vw,74px); font-weight:800;
  line-height:1.05; letter-spacing:-3px; color:#fff;
  margin-bottom:20px; animation:crFadeUp .7s ease .35s both;
}
.cr-hero-headline .g { color:var(--gold); }
.cr-hero-sub {
  font-size:clamp(15px,1.6vw,18px); color:rgba(255,255,255,.58);
  line-height:1.72; max-width:580px; margin:0 auto 40px;
  animation:crFadeUp .7s ease .5s both;
}
.cr-hero-ctas {
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  animation:crFadeUp .7s ease .65s both;
}
.cr-hero-stats {
  display:flex; gap:0; justify-content:center;
  border-top:1px solid rgba(255,255,255,.08); margin-top:56px; padding-top:36px;
  animation:crFadeUp .7s ease .75s both;
}
.cr-hstat { flex:1; max-width:160px; text-align:center; padding:0 20px; border-right:1px solid rgba(255,255,255,.08); }
.cr-hstat:last-child { border-right:none; }
.cr-hstat-n { font-size:clamp(26px,3vw,36px); font-weight:800; color:var(--gold); line-height:1; }
.cr-hstat-l { font-size:11px; text-transform:uppercase; letter-spacing:1.6px; color:rgba(255,255,255,.40); margin-top:6px; }

/* ============================================================
   2. MARQUEE
============================================================ */
.cr-marquee { background:var(--gold); overflow:hidden; padding:13px 0; position:relative; z-index:2; }
.cr-mq-track { display:flex; width:max-content; animation:mScrollCR 28s linear infinite; }
.cr-mq-item {
  white-space:nowrap; padding:0 32px;
  font-size:12px; font-weight:800; letter-spacing:2.5px;
  text-transform:uppercase; color:#000;
  display:flex; align-items:center; gap:16px;
}
.cr-mq-item::after { content:'●'; font-size:6px; opacity:.4; }

/* ============================================================
   3. GEAR CATEGORIES
============================================================ */
.cr-gear { background:var(--bg); padding:60px 0; }
.cr-gear-inner { max-width:1180px; margin:0 auto; padding:0 48px; }
.cr-gear-head { text-align:center; margin-bottom:48px; }
.cr-gear-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cr-gear-card {
  background:#fff; border-radius:20px; border:1px solid rgba(0,0,0,.07);
  overflow:hidden; box-shadow:0 2px 16px rgba(0,0,0,.05);
  opacity:0; transform:translateY(20px);
  transition:opacity .5s ease, transform .5s ease, box-shadow .3s;
}
.cr-gear-card.gc-on { opacity:1; transform:none; }
.cr-gear-card:hover { box-shadow:0 16px 48px rgba(0,0,0,.10); transform:translateY(-4px); }
.cr-gear-img { width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--bg-alt); }
.cr-gear-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.cr-gear-card:hover .cr-gear-img img { transform:scale(1.04); }
.cr-gear-body { padding:24px; }
.cr-gear-cat { font-size:10px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--gold-dk); margin-bottom:8px; }
.cr-gear-name { font-size:18px; font-weight:800; color:var(--text); letter-spacing:-.3px; margin-bottom:10px; }
.cr-gear-desc { font-size:13px; color:var(--muted); line-height:1.68; margin-bottom:18px; }
.cr-gear-items { display:flex; flex-direction:column; gap:7px; margin-bottom:20px; }
.cr-gear-item { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text); font-weight:500; }
.cr-gear-item::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--gold); flex-shrink:0; }
.cr-gear-rate {
  display:inline-flex; align-items:baseline; gap:4px;
  background:rgba(245,196,0,.10); border:1px solid rgba(245,196,0,.25);
  border-radius:8px; padding:6px 14px; font-size:13px; font-weight:700; color:var(--text);
}
.cr-gear-rate span { font-size:11px; color:var(--muted); font-weight:500; }
.cr-gear-card.wide { grid-column:span 2; }
.cr-gear-card.wide .cr-gear-img { aspect-ratio:21/9; }

/* Split layout: image left + cards right */
.cr-gear-split {
  display:grid; grid-template-columns:1fr 2fr; gap:24px; align-items:start;
}
.cr-gear-split-left { display:flex; flex-direction:column; }
.cr-gear-split-img {
  border-radius:16px; overflow:hidden;
}
.cr-gear-split-img img {
  width:100%; height:auto; object-fit:contain; display:block;
  border-radius:16px;
}
@media(max-width:1024px) {
  .cr-gear-split { grid-template-columns:1fr; }
  .cr-gear-split-img { position:static; }
}

/* Icon-based gear grid */
.cr-gear-icon-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px;
}
.cr-gear-icon-card {
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:16px; padding:32px 28px;
  transition:transform .3s, box-shadow .3s, border-color .3s;
}
.cr-gear-icon-card:hover {
  transform:translateY(-4px);
  box-shadow:0 16px 48px rgba(0,0,0,.08);
  border-color:rgba(184,120,0,.2);
}
.cr-gear-icon-wrap {
  width:56px; height:56px; border-radius:14px;
  background:rgba(245,196,0,.08);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
  color:var(--gold-dk);
}
.cr-gear-icon-cat {
  font-size:10px; font-weight:800; letter-spacing:2px;
  text-transform:uppercase; color:var(--gold-dk); margin-bottom:6px;
}
.cr-gear-icon-name {
  font-size:18px; font-weight:800; color:var(--text);
  letter-spacing:-.3px; margin-bottom:10px;
}
.cr-gear-icon-desc {
  font-size:13px; color:var(--muted); line-height:1.68; margin-bottom:20px;
}
.cr-gear-icon-rate {
  font-size:15px; font-weight:800; color:var(--gold-dk);
  padding-top:16px; border-top:1px solid rgba(0,0,0,.06);
}
.cr-gear-icon-rate span { font-size:11px; color:var(--muted); font-weight:500; }
@media(max-width:600px) { .cr-gear-icon-grid { grid-template-columns:1fr; } }

/* ============================================================
   4. BUNDLES / KITS
============================================================ */
.cr-kits { background:var(--bg-alt); padding:60px 0; }
.cr-kits-inner { max-width:1180px; margin:0 auto; padding:0 48px; }
.cr-kits-head { text-align:center; margin-bottom:40px; }
.cr-kits-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cr-kit-card {
  background:#fff; border-radius:20px; padding:30px 28px;
  border-top:3px solid var(--gold); box-shadow:0 2px 16px rgba(0,0,0,.05);
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(18px);
  transition:opacity .5s ease, transform .5s ease, box-shadow .3s;
}
.cr-kit-card.kc-on { opacity:1; transform:none; }
.cr-kit-card:hover { box-shadow:0 16px 40px rgba(0,0,0,.10); }
.cr-kit-icon { font-size:28px; margin-bottom:14px; }
.cr-kit-name { font-size:17px; font-weight:800; color:var(--text); margin-bottom:8px; }
.cr-kit-desc { font-size:13px; color:var(--muted); line-height:1.68; flex:1; margin-bottom:20px; }
.cr-kit-list { list-style:none; display:flex; flex-direction:column; gap:7px; margin-bottom:20px; }
.cr-kit-list li { font-size:13px; color:var(--text); display:flex; align-items:center; gap:9px; }
.cr-kit-list li::before { content:'\2713'; font-size:11px; font-weight:800; color:var(--gold-dk); flex-shrink:0; }
.cr-kit-rate { font-size:15px; font-weight:800; color:var(--text); padding-top:16px; border-top:1px solid rgba(0,0,0,.07); }
.cr-kit-rate-note { font-size:12px; color:var(--muted); font-weight:400; }

/* ============================================================
   5. HOW IT WORKS
============================================================ */
.cr-process { background:var(--bg); padding:60px 0; }
.cr-proc-inner { max-width:1100px; margin:0 auto; padding:0 48px; }
.cr-proc-head { text-align:center; margin-bottom:48px; }
.cr-proc-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.cr-proc-steps::before {
  content:''; position:absolute; top:28px; left:calc(12.5% + 20px); right:calc(12.5% + 20px);
  height:2px; background:linear-gradient(90deg,var(--gold),rgba(245,196,0,.2)); z-index:0;
}
.cr-proc-step {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:0 16px; position:relative; z-index:1;
}
.cr-proc-num {
  width:56px; height:56px; border-radius:50%;
  background:#fff; border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:800; color:var(--text);
  margin-bottom:20px; position:relative; z-index:1; box-shadow:0 0 0 6px var(--bg);
}
.cr-proc-title { font-size:15px; font-weight:800; color:var(--text); margin-bottom:8px; }
.cr-proc-desc { font-size:13px; color:var(--muted); line-height:1.65; }

/* ============================================================
   6. WHY US
============================================================ */
.cr-why { background:var(--bg-alt); padding:60px 0; }
.cr-why-inner { max-width:1180px; margin:0 auto; padding:0 48px; }
.cr-why-head { text-align:center; margin-bottom:40px; }
.cr-why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.cr-why-card {
  background:#fff; border-radius:18px; padding:28px 24px;
  border:1px solid rgba(0,0,0,.06); box-shadow:0 2px 12px rgba(0,0,0,.04);
  transition:box-shadow .3s, transform .3s;
}
.cr-why-card:hover { box-shadow:0 12px 36px rgba(0,0,0,.09); transform:translateY(-3px); }
.cr-why-icon {
  width:48px; height:48px; border-radius:14px; margin-bottom:16px;
  background:linear-gradient(135deg,rgba(245,196,0,.18),rgba(245,196,0,.06));
  border:1px solid rgba(245,196,0,.25);
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
.cr-why-title { font-size:15px; font-weight:800; color:var(--text); margin-bottom:8px; }
.cr-why-desc  { font-size:13px; color:var(--muted); line-height:1.66; }

/* ============================================================
   7. FAQ
============================================================ */
.cr-faq { background:var(--bg); padding:60px 0; }
.cr-faq-inner { max-width:780px; margin:0 auto; padding:0 48px; }
.cr-faq-head  { text-align:center; margin-bottom:40px; }
.cr-faq-list { display:flex; flex-direction:column; gap:0; }
.cr-faq-item {
  border-bottom:1px solid rgba(0,0,0,.08);
  opacity:0; transform:translateY(14px);
  transition:opacity .45s ease, transform .45s ease;
}
.cr-faq-item:first-child { border-top:1px solid rgba(0,0,0,.08); }
.cr-faq-item.fq-on { opacity:1; transform:none; }
.cr-faq-btn {
  width:100%; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; gap:14px;
  padding:22px 4px; text-align:left;
}
.cr-faq-chevron {
  flex-shrink:0; width:22px; height:22px; border-radius:50%;
  background:rgba(245,196,0,.10); color:var(--gold-dk);
  font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  transition:transform .28s cubic-bezier(.22,1,.36,1), background .2s;
}
.cr-faq-item.open .cr-faq-chevron { transform:rotate(45deg); background:var(--gold); color:#000; }
.cr-faq-q { font-size:15px; font-weight:700; color:var(--text); flex:1; }
.cr-faq-a {
  max-height:0; overflow:hidden;
  transition:max-height .38s cubic-bezier(.22,1,.36,1), padding .28s ease;
  font-size:14px; color:var(--muted); line-height:1.76; padding-left:36px;
}
.cr-faq-item.open .cr-faq-a { max-height:300px; padding-bottom:22px; }

/* ============================================================
   8. CTA BAND
============================================================ */
.cr-cta { background:var(--bg-dark); padding:0 0; overflow:hidden; }
.cr-cta-grid { display:grid; grid-template-columns:1fr 1fr; min-height:420px; }
.cr-cta-img { position:relative; overflow:hidden; }
.cr-cta-img img {
  width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.75);
  transition:transform .6s ease;
}
.cr-cta:hover .cr-cta-img img { transform:scale(1.04); }
.cr-cta-img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 60%, var(--bg-dark) 100%);
}
.cr-cta-content {
  padding:64px 56px;
  display:flex; flex-direction:column; justify-content:center;
}
.cr-cta-overline {
  font-size:11px; font-weight:800; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--gold); margin-bottom:18px;
}
.cr-cta-title {
  font-size:clamp(28px,3.5vw,46px); font-weight:800;
  color:#fff; line-height:1.12; letter-spacing:-1.5px; margin-bottom:16px;
}
.cr-cta-title em { font-style:normal; color:var(--gold); }
.cr-cta-sub { font-size:15px; color:rgba(255,255,255,.50); line-height:1.68; margin-bottom:32px; }
.cr-cta-acts { display:flex; gap:14px; flex-wrap:wrap; }
@media (max-width:768px) {
  .cr-cta-grid { grid-template-columns:1fr; }
  .cr-cta-img  { height:260px; }
  .cr-cta-img::after { background:linear-gradient(0deg, var(--bg-dark) 0%, transparent 60%); }
  .cr-cta-content { padding:40px 20px; }
}

/* ════════════════════════════════════════════
   RESPONSIVE — Camera Rental
════════════════════════════════════════════ */
@media (max-width:1024px) {
  .cr-gear-grid  { grid-template-columns:repeat(2,1fr); }
  .cr-gear-card.wide { grid-column:span 2; }
  .cr-kits-grid  { grid-template-columns:repeat(2,1fr); }
  .cr-why-grid   { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .cr-hero-inner { padding:80px 24px 48px; }
  .cr-hero-stats { flex-wrap:wrap; }
  .cr-hstat      { min-width:45%; border-right:none; border-bottom:1px solid rgba(255,255,255,.08); padding:16px 0; }
  .cr-gear-inner,.cr-kits-inner,.cr-proc-inner,.cr-why-inner,.cr-faq-inner { padding-left:20px; padding-right:20px; }
  .cr-gear-grid  { grid-template-columns:1fr; }
  .cr-gear-card.wide { grid-column:span 1; }
  .cr-gear-card.wide .cr-gear-img { aspect-ratio:16/9; }
  .cr-kits-grid  { grid-template-columns:1fr; }
  .cr-proc-steps { grid-template-columns:1fr 1fr; gap:32px; }
  .cr-proc-steps::before { display:none; }
  .cr-why-grid   { grid-template-columns:1fr 1fr; }
}
@media (max-width:520px) {
  .cr-proc-steps { grid-template-columns:1fr; }
  .cr-why-grid   { grid-template-columns:1fr; }
  .cr-kits-grid  { grid-template-columns:1fr; }
  .cr-hero-ctas  { flex-direction:column; align-items:center; }
}


/* ═══════════════════════════════════════════════════════════════
   ── Teleprompter ──
   ═══════════════════════════════════════════════════════════════ */

/* ── ANIMATIONS ─────────────────────────────────────────── */
@keyframes tpScroll {
  from { transform:translateY(0); }
  to   { transform:translateY(-50%); }
}
@keyframes tpFadeUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:none; }
}
@keyframes tpFadeIn {
  from { opacity:0; } to { opacity:1; }
}
@keyframes mScrollTP { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes tpCursorBlink {
  0%,100% { opacity:1; } 50% { opacity:0; }
}

/* ── SHARED REVEAL ── */
.tp-reveal { opacity:0; transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.tp-reveal.up    { transform:translateY(24px); }
.tp-reveal.left  { transform:translateX(-24px); }
.tp-reveal.right { transform:translateX(24px); }
.tp-reveal.shown { opacity:1; transform:none; }

/* ============================================================
   1. HERO
============================================================ */
.tp-hero {
  min-height:88svh; background:var(--bg-dark);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; text-align:center;
}
.tp-prompter-bg {
  position:absolute; inset:0; z-index:0;
  display:flex; align-items:flex-start; justify-content:center;
  overflow:hidden; pointer-events:none;
}
.tp-prompter-scroll {
  animation:tpScroll 22s linear infinite;
  width:100%; padding:0 80px;
}
.tp-prompter-line {
  font-size:clamp(13px,1.4vw,17px); font-weight:500;
  color:rgba(245,196,0,.06); line-height:2.2;
  letter-spacing:.5px; text-align:center;
  white-space:nowrap; overflow:hidden;
}
.tp-prompter-bg::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 80% at 50% 50%,
    transparent 0%, rgba(15,12,0,.85) 65%, var(--bg-dark) 100%);
}
.tp-hero-inner {
  position:relative; z-index:2;
  padding:88px 48px 64px; max-width:860px; margin:0 auto;
}
.tp-hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(245,196,0,.10); border:1px solid rgba(245,196,0,.25);
  border-radius:99px; padding:6px 18px;
  font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--gold); margin-bottom:28px; animation:tpFadeIn .7s ease .2s both;
}
.tp-hero-badge::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--gold); }
.tp-hero-headline {
  font-size:clamp(40px,6vw,76px); font-weight:800;
  line-height:1.06; letter-spacing:-3px; color:#fff;
  margin-bottom:20px; animation:tpFadeUp .85s cubic-bezier(.22,1,.36,1) .35s both;
}
.tp-hero-headline em { color:var(--gold); font-style:normal; }
.tp-hero-display {
  display:inline-block; background:rgba(245,196,0,.06);
  border:1px solid rgba(245,196,0,.18); border-radius:12px;
  padding:14px 28px; margin-bottom:28px;
  font-size:14px; font-weight:600; color:rgba(255,255,255,.75);
  letter-spacing:.3px; line-height:1.5;
  animation:tpFadeUp .85s cubic-bezier(.22,1,.36,1) .5s both;
  position:relative; overflow:hidden;
}
.tp-hero-display::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(245,196,0,.04) 0%, transparent 50%, rgba(245,196,0,.04) 100%);
}
.tp-cursor {
  display:inline-block; width:2px; height:1em;
  background:var(--gold); margin-left:4px; vertical-align:middle;
  animation:tpCursorBlink 1s ease infinite;
}
.tp-hero-sub {
  font-size:16px; line-height:1.70; color:var(--muted-inv);
  max-width:560px; margin:0 auto 40px;
  animation:tpFadeUp .85s cubic-bezier(.22,1,.36,1) .6s both;
}
.tp-hero-btns {
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  animation:tpFadeUp .85s cubic-bezier(.22,1,.36,1) .75s both;
}
.tp-hero-stats {
  display:flex; gap:0; justify-content:center;
  margin-top:52px; padding-top:36px;
  border-top:1px solid rgba(255,255,255,.08);
  animation:tpFadeUp .85s cubic-bezier(.22,1,.36,1) .9s both;
}
.tp-hstat {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:0 36px; border-right:1px solid rgba(255,255,255,.08);
}
.tp-hstat:last-child { border-right:none; }
.tp-hstat-n { font-size:28px; font-weight:800; letter-spacing:-1px; color:#fff; }
.tp-hstat-l { font-size:11px; color:var(--muted-inv); letter-spacing:.5px; text-align:center; max-width:100px; }

/* ============================================================
   2. MARQUEE
============================================================ */
.tp-marquee {
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-amber) 100%);
  padding:13px 0; overflow:hidden;
}
.tp-mq-track {
  display:flex; white-space:nowrap;
  animation:mScrollTP 26s linear infinite;
}
.tp-mq-item {
  display:inline-flex; align-items:center; gap:10px;
  padding:0 28px; font-size:12px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color:#000;
}
.tp-mq-item::after { content:'✦'; opacity:.4; }

/* ============================================================
   3. EQUIPMENT TYPES
============================================================ */
.tp-equipment { background:var(--bg); padding:60px 0; }
.tp-equip-inner { max-width:1160px; margin:0 auto; padding:0 48px; }
.tp-equip-head { text-align:center; margin-bottom:40px; }
.tp-equip-list { display:flex; flex-direction:column; gap:18px; }
.tp-equip-card {
  display:grid; grid-template-columns:340px 1fr;
  border:1.5px solid rgba(0,0,0,.08); border-radius:20px;
  overflow:hidden; background:#fff;
  transition:box-shadow .3s, border-color .3s, transform .35s cubic-bezier(.22,1,.36,1);
  opacity:0; transform:translateY(16px);
}
.tp-equip-card.eq-on { opacity:1; transform:none; }
.tp-equip-card:hover { box-shadow:0 16px 48px rgba(0,0,0,.09); border-color:rgba(245,196,0,.35); transform:translateY(-3px); }
.tp-equip-img { overflow:hidden; position:relative; }
.tp-equip-img img { width:100%; height:auto; object-fit:contain; transition:transform .5s cubic-bezier(.22,1,.36,1); }
.tp-equip-card:hover .tp-equip-img img { transform:scale(1.06); }
.tp-equip-tag {
  position:absolute; top:14px; left:14px;
  background:var(--bg-dark); color:var(--gold);
  font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  padding:5px 12px; border-radius:99px; border:1px solid rgba(245,196,0,.25);
}
.tp-equip-body { padding:28px 32px; display:flex; flex-direction:column; justify-content:center; }
.tp-equip-name { font-size:20px; font-weight:800; color:var(--text); letter-spacing:-.4px; margin-bottom:8px; }
.tp-equip-desc { font-size:14px; line-height:1.72; color:var(--muted); margin-bottom:20px; }
.tp-equip-specs { display:grid; grid-template-columns:1fr 1fr; gap:8px; list-style:none; margin-bottom:22px; }
.tp-equip-specs li {
  font-size:12px; color:var(--text); font-weight:600;
  display:flex; align-items:center; gap:7px; line-height:1.4;
}
.tp-equip-specs li::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--gold); flex-shrink:0; }
.tp-equip-badge {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:.5px;
  color:var(--gold-dk); background:rgba(245,196,0,.10);
  border:1px solid rgba(245,196,0,.22); border-radius:99px;
  padding:5px 14px; width:fit-content;
}

/* ============================================================
   4. USE CASES
============================================================ */
.tp-usecases { background:var(--bg-alt); padding:60px 0; }
.tp-uc-inner { max-width:1160px; margin:0 auto; padding:0 48px; }
.tp-uc-head { margin-bottom:40px; }
.tp-uc-layout { display:grid; grid-template-columns:300px 1fr; gap:64px; align-items:start; }
.tp-uc-left {}
.tp-uc-title { font-size:clamp(26px,3vw,36px); font-weight:800; letter-spacing:-.8px; color:var(--text); line-height:1.18; margin-bottom:16px; }
.tp-uc-sub { font-size:14px; line-height:1.75; color:var(--muted); margin-bottom:28px; }
.tp-uc-cta { display:inline-flex; }
.tp-uc-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tp-uc-tile {
  background:#fff; border:1.5px solid rgba(0,0,0,.07); border-radius:16px;
  padding:20px 20px 18px; display:flex; gap:14px; align-items:flex-start;
  transition:border-color .25s, box-shadow .25s, transform .3s;
  opacity:0; transform:translateY(14px);
}
.tp-uc-tile.uc-on { opacity:1; transform:none; }
.tp-uc-tile:hover { border-color:rgba(245,196,0,.35); box-shadow:0 8px 28px rgba(0,0,0,.07); transform:translateY(-3px); }
.tp-uc-icon {
  width:40px; height:40px; border-radius:11px; flex-shrink:0;
  background:rgba(245,196,0,.10); border:1px solid rgba(245,196,0,.18);
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.tp-uc-info {}
.tp-uc-name { font-size:13px; font-weight:700; color:var(--text); margin-bottom:4px; }
.tp-uc-note { font-size:12px; line-height:1.55; color:var(--muted); }

/* ============================================================
   5. SESSION FLOW
============================================================ */
.tp-session { background:var(--bg-dark); padding:60px 0; }
.tp-session-inner { max-width:1160px; margin:0 auto; padding:0 48px; }
.tp-session-head { text-align:center; margin-bottom:44px; }
.tp-session-head .section-title { color:#fff; }
.tp-session-head .section-sub  { color:var(--muted-inv); }
.tp-timeline { display:grid; grid-template-columns:repeat(5, 1fr); position:relative; gap:0; }
.tp-timeline::before {
  content:''; position:absolute; top:28px; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(245,196,0,.30) 20%, rgba(245,196,0,.30) 80%, transparent);
  z-index:0;
}
.tp-tl-step {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:0 12px; position:relative; z-index:1;
  opacity:0; transform:translateY(16px);
  transition:opacity .5s ease, transform .5s ease;
}
.tp-tl-step.tl-on { opacity:1; transform:none; }
.tp-tl-dot {
  width:56px; height:56px; border-radius:50%; flex-shrink:0;
  background:rgba(245,196,0,.10); border:1.5px solid rgba(245,196,0,.30);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; margin-bottom:16px;
  transition:background .3s, border-color .3s;
}
.tp-tl-step:hover .tp-tl-dot { background:rgba(245,196,0,.20); border-color:var(--gold); }
.tp-tl-time {
  font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--gold); margin-bottom:6px;
}
.tp-tl-label { font-size:13px; font-weight:700; color:#fff; margin-bottom:6px; line-height:1.3; }
.tp-tl-desc { font-size:11px; color:var(--muted-inv); line-height:1.55; }

/* ============================================================
   8. FAQ
============================================================ */
.tp-faq { background:var(--bg); padding:60px 0; }
.tp-faq-inner { max-width:1100px; margin:0 auto; padding:0 48px; }
.tp-faq-head { text-align:center; margin-bottom:40px; }
.tp-faq-cols { display:grid; grid-template-columns:1fr 1fr; gap:0 40px; }
.tp-faq-item {
  border-bottom:1px solid rgba(0,0,0,.08);
  opacity:0; transform:translateY(12px);
  transition:opacity .45s ease, transform .45s ease;
}
.tp-faq-item:first-child { border-top:1px solid rgba(0,0,0,.08); }
.tp-faq-col:last-child .tp-faq-item:first-child { border-top:1px solid rgba(0,0,0,.08); }
.tp-faq-item.faq-on { opacity:1; transform:none; }
.tp-faq-btn {
  width:100%; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 0; text-align:left;
}
.tp-faq-q { font-size:14px; font-weight:700; color:var(--text); letter-spacing:-.2px; line-height:1.4; flex:1; }
.tp-faq-icon {
  flex-shrink:0; width:20px; height:20px; border-radius:50%;
  background:rgba(245,196,0,.10); border:1px solid rgba(245,196,0,.20);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:var(--gold-dk); line-height:1;
  transition:transform .28s cubic-bezier(.22,1,.36,1), background .22s;
  user-select:none;
}
.tp-faq-item.open .tp-faq-icon { transform:rotate(45deg); background:var(--gold); color:#000; }
.tp-faq-a {
  max-height:0; overflow:hidden;
  font-size:13px; line-height:1.72; color:var(--muted);
  transition:max-height .38s cubic-bezier(.22,1,.36,1), padding .28s ease;
  padding:0;
}
.tp-faq-item.open .tp-faq-a { max-height:240px; padding-bottom:18px; }

/* ============================================================
   9. CTA
============================================================ */
/* Gallery marquee */
.tp-gallery { padding:60px 0; background:var(--bg); overflow:hidden; }
.tp-gallery-marquee { overflow:hidden; }
.tp-gallery-track {
  display:flex; gap:16px;
  animation:tpGalleryScroll 40s linear infinite;
  width:max-content;
}
.tp-gallery-track img {
  height:240px; width:auto; border-radius:14px;
  object-fit:cover; flex-shrink:0;
  transition:transform .3s, box-shadow .3s;
}
.tp-gallery-track img:hover {
  transform:scale(1.04);
  box-shadow:0 12px 32px rgba(0,0,0,.12);
}
@keyframes tpGalleryScroll {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
@media(max-width:768px) {
  .tp-gallery-track img { height:180px; }
}

.tp-cta { background:var(--bg-dark); padding:72px 0; text-align:center; position:relative; overflow:hidden; }
.tp-cta-glow {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:700px; height:500px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(245,196,0,.07) 0%, transparent 70%);
  pointer-events:none;
}
.tp-cta-inner { max-width:680px; margin:0 auto; padding:0 48px; position:relative; z-index:2; }
.tp-cta-pullquote {
  display:flex; align-items:flex-start; gap:16px; text-align:left;
  background:rgba(245,196,0,.07); border:1px solid rgba(245,196,0,.18);
  border-radius:16px; padding:22px 24px; margin-bottom:40px;
}
.tp-cta-qmark {
  font-size:40px; line-height:.7; color:rgba(245,196,0,.40);
  font-family:Georgia,serif; flex-shrink:0; margin-top:4px;
}
.tp-cta-qtext { font-size:14px; line-height:1.70; color:rgba(255,255,255,.80); font-style:italic; }
.tp-cta-qname { font-size:12px; color:var(--gold); font-weight:700; margin-top:8px; font-style:normal; display:block; }
.tp-cta-eyebrow { font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:16px; display:block; }
.tp-cta-title { font-size:clamp(28px,4vw,48px); font-weight:800; letter-spacing:-1.5px; color:#fff; line-height:1.1; margin-bottom:16px; }
.tp-cta-title em { color:var(--gold); font-style:normal; }
.tp-cta-sub { font-size:15px; color:var(--muted-inv); line-height:1.70; margin-bottom:36px; }
.tp-cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   10. CONTACT
============================================================ */
.tp-contact { background:var(--bg-alt); padding:60px 0; }
.tp-contact-inner { max-width:680px; margin:0 auto; padding:0 48px; }
.tp-contact-head { text-align:center; margin-bottom:36px; }
.tp-form-card {
  background:#fff; border-radius:24px; padding:44px 44px 40px;
  box-shadow:0 4px 32px rgba(0,0,0,.07);
  border-top:3px solid var(--gold); position:relative;
}
.tp-form-title { font-size:20px; font-weight:800; color:var(--text); margin-bottom:4px; letter-spacing:-.4px; }
.tp-form-sub { font-size:13px; color:var(--muted); margin-bottom:28px; }
.tp-fr { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.tp-fg { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.tp-fg:last-of-type { margin-bottom:0; }
.tp-fg label { font-size:11px; font-weight:700; color:var(--text); letter-spacing:.5px; text-transform:uppercase; }
.tp-fg input, .tp-fg select, .tp-fg textarea {
  font-family:var(--font); font-size:14px; color:var(--text);
  background:var(--bg-alt); border:1.5px solid rgba(0,0,0,.09); border-radius:12px;
  padding:12px 16px; outline:none; width:100%;
  transition:border-color .22s, box-shadow .22s;
}
.tp-fg input:focus, .tp-fg select:focus, .tp-fg textarea:focus {
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,196,0,.12);
}
.tp-fg textarea { resize:vertical; min-height:100px; }
.tp-submit {
  width:100%; margin-top:20px; padding:15px;
  background:linear-gradient(135deg,var(--gold),var(--gold-amber));
  color:#000; font-size:15px; font-weight:800; font-family:var(--font);
  border:none; border-radius:99px; cursor:pointer;
  transition:transform .22s, box-shadow .22s;
}
.tp-submit:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(245,196,0,.38); }
.tp-contact-note {
  text-align:center; margin-top:20px; font-size:13px; color:var(--muted);
  display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
}
.tp-contact-note a { color:var(--text); font-weight:600; text-decoration:none; }
.tp-contact-note a:hover { color:var(--gold-dk); }

/* ════════════════════════════════════════════
   RESPONSIVE — Teleprompter
════════════════════════════════════════════ */
@media (max-width:1024px) {
  .tp-equip-card       { grid-template-columns:280px 1fr; }
  .tp-uc-layout        { grid-template-columns:1fr; }
  .tp-timeline         { grid-template-columns:repeat(3,1fr); gap:20px; }
  .tp-timeline::before { display:none; }
}
@media (max-width:768px) {
  .tp-hero-inner       { padding:80px 24px 48px; }
  .tp-equip-card       { grid-template-columns:1fr; }
  .tp-equip-img        { }
  .tp-equip-body       { padding:20px 22px; }
  .tp-uc-grid          { grid-template-columns:1fr; }
  .tp-timeline         { grid-template-columns:1fr 1fr; }
  .tp-faq-cols         { grid-template-columns:1fr; }
  .tp-fr               { grid-template-columns:1fr; }
  .tp-form-card        { padding:28px 20px; }
  .tp-hero-stats       { flex-wrap:wrap; gap:16px; }
  .tp-hstat            { border-right:none; padding:0 20px; }
}