@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;0,900;1,400;1,700;1,900&family=Outfit:wght@300;400;500;600&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #080808;
  --bg-2:     #0f0f0f;
  --fg:       #f0ece4;
  --accent:           #c4808c;
  --accent-2:         #e8a84a;
  /* Rose gold gradient — matches the DF logo metallic sheen */
  --accent-grad:      linear-gradient(135deg, #f0c0cc 0%, #c4808c 45%, #964060 100%);
  --accent-grad-btn:  linear-gradient(135deg, #daa0b0 0%, #b87080 55%, #c48090 100%);
  --accent-grad-text: linear-gradient(135deg, #f5c8d4 0%, #c4808c 42%, #964060 100%);
  --muted:    rgba(240, 236, 228, 0.38);
  --border:   rgba(240, 236, 228, 0.07);
  --font-d:   'Playfair Display', Georgia, serif;
  --font-b:   'Outfit', system-ui, sans-serif;
  --nav-h:    72px;
  --safe-top: env(safe-area-inset-top, 0px);
  --expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --snap:     cubic-bezier(0.76, 0, 0.24, 1);
}

/* ── GRAIN OVERLAY ─────────────────────────────────── */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 9990;
  pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px;
}

html {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-b);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body { background: var(--bg); min-height: 100vh; overflow-x: hidden; }

/* ── SCROLLBAR ─────────────────────────────────────── */
::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent); }

/* ── CURSOR ────────────────────────────────────────── */
* { cursor: none; }

.cursor {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9000;
  will-change: transform;
}

.cursor-ring {
  position: absolute;
  top: -20px; left: -20px;
  width: 40px; height: 40px;
  border: 1px solid rgba(240, 236, 228, 0.45);
  border-radius: 50%;
  transition: width 0.4s var(--expo), height 0.4s var(--expo),
              top 0.4s var(--expo), left 0.4s var(--expo),
              background 0.3s ease, border-color 0.3s ease;
}

.cursor-dot {
  position: absolute;
  top: -4px; left: -4px;
  width: 8px; height: 8px;
  background: var(--fg);
  border-radius: 50%;
  mix-blend-mode: difference;
  transition: opacity 0.2s ease;
}

.cursor.hover .cursor-ring {
  width: 80px; height: 80px;
  top: -40px; left: -40px;
  background: rgba(196, 128, 140, 0.1);
  border-color: var(--accent);
}

.cursor.hover .cursor-dot { opacity: 0; }

.cursor-label {
  position: absolute;
  top: -40px; left: -40px;
  width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-b);
  font-size: 0.58rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.cursor.hover .cursor-label { opacity: 1; }

/* ── NAVBAR ────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 800;
  height: calc(var(--nav-h) + var(--safe-top));
  display: flex; align-items: center; justify-content: flex-end;
  padding: var(--safe-top) 48px 0;
  transition: background 0.5s ease, backdrop-filter 0.5s ease, transform 0.45s var(--expo);
}

/* Hidden while scrolling down — slides back in on scroll up or near the top */
.nav.nav-hidden {
  transform: translateY(-100%);
}

/* Centered nav group: links either side of the logo, centered in the bar */
.nav-center {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 40px;
}

.nav-right {
  display: flex; align-items: center; gap: 16px;
}


.nav.scrolled {
  background: rgba(8, 8, 8, 0.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
}

/* ── NOTCH SEAL ────────────────────────────────────────
   Separate fixed element so it is never inside a
   backdrop-filter compositing context.
   height = env(safe-area-inset-top) → covers the
   iPhone status-bar / Dynamic Island zone with solid
   background. On devices with no notch it collapses
   to height:0 and is invisible.                        */
.notch-seal {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--bg);
  z-index: 801;           /* sits just above the nav (800) */
  pointer-events: none;
}

.nav-logo {
  font-family: var(--font-d);
  font-size: 1.2rem; font-weight: 700;
  color: var(--fg); text-decoration: none;
  letter-spacing: -0.01em;
  display: flex; align-items: center;
}

.nav-logo-img {
  height: 94px;
  width: 94px;
  display: block;
  background: linear-gradient(135deg, #f0c0cc 0%, #c4808c 45%, #964060 100%);
  -webkit-mask-image: url('../images/df-logo.png');
  mask-image: url('../images/df-logo.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.nav-links {
  display: flex; align-items: center; gap: 40px; list-style: none;
}

.nav-links a {
  font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  transition: color 0.3s ease;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute; bottom: -4px; left: 0; right: 0;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--expo);
}

.nav-links a:hover,
.nav-links a.active { color: var(--fg); }

.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }

.nav-instagram {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: none;
  color: var(--fg); text-decoration: none;
  transition: color 0.3s ease, opacity 0.3s ease;
  flex-shrink: 0; opacity: 0.85;
}
.nav-instagram:hover {
  color: var(--accent);
  opacity: 1;
}
.nav-contact {
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); text-decoration: none;
  border: 1px solid rgba(196, 128, 140, 0.35);
  padding: 10px 22px; border-radius: 100px;
  transition: background 0.35s var(--expo), color 0.3s ease, border-color 0.3s ease;
}

.nav-contact:hover { background: var(--accent-grad-btn); color: #080808; border-color: transparent; }

.lang-toggle {
  display: flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 13px; border-radius: 99px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.68rem; font-family: var(--font-b);
  font-weight: 500; letter-spacing: 0.07em;
  text-decoration: none; white-space: nowrap;
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
  flex-shrink: 0;
}
.lang-toggle:hover {
  border-color: var(--accent);
  color: var(--fg);
  background: rgba(196,128,140,0.07);
}

.hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; padding: 4px;
}
.hamburger span {
  display: block; width: 22px; height: 1px; background: var(--fg);
  transition: transform 0.35s var(--expo), opacity 0.3s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── MOBILE MENU ───────────────────────────────────── */
.mobile-menu {
  position: fixed; inset: 0; z-index: 799;
  background: rgba(8,8,8,0.98);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease;
}

.mobile-menu.open { opacity: 1; pointer-events: all; }

.mobile-menu a {
  font-family: var(--font-d);
  font-size: clamp(2.8rem, 10vw, 4.5rem);
  font-weight: 700; line-height: 1.15;
  color: var(--fg); text-decoration: none;
  padding: 10px 0;
  transform: translateY(28px); opacity: 0;
  transition: color 0.3s ease, transform 0.55s var(--expo), opacity 0.55s ease;
}

.mobile-menu.open a { transform: translateY(0); opacity: 1; }
.mobile-menu.open a:nth-child(1) { transition-delay: 0.05s; }
.mobile-menu.open a:nth-child(2) { transition-delay: 0.1s; }
.mobile-menu.open a:nth-child(3) { transition-delay: 0.15s; }
.mobile-menu.open a:nth-child(4) { transition-delay: 0.2s; }
.mobile-menu a:hover { color: var(--accent); }

/* ── STICKY CTA ────────────────────────────────────── */
.sticky-cta {
  position: fixed; bottom: 32px; right: 32px;
  z-index: 700; opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.55s var(--expo), transform 0.55s var(--expo);
}

.sticky-cta.visible { opacity: 1; transform: translateY(0); pointer-events: all; }

.sticky-cta-btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-b);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: var(--bg);
  background: var(--fg); border: 1px solid var(--fg);
  padding: 14px 22px 14px 26px; border-radius: 100px;
  transition: background 0.35s var(--expo), color 0.3s ease,
              border-color 0.3s ease;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
}

.sticky-cta-btn:hover { background: var(--accent-grad-btn); border-color: transparent; color: #080808; }

.sticky-cta-icon {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(8,8,8,0.12);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.35s var(--expo);
}

.sticky-cta-btn:hover .sticky-cta-icon { transform: rotate(45deg); }

/* ── HERO ──────────────────────────────────────────── */
.hero {
  position: relative; min-height: 88vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 0 48px;
  overflow: hidden;
}

.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 55% 60% at 15% 55%, rgba(140, 60, 160, 0.22) 0%, transparent 65%),
    radial-gradient(ellipse 45% 50% at 82% 25%, rgba(60, 80, 200, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 55% 95%, rgba(196, 128, 140, 0.15) 0%, transparent 55%),
    radial-gradient(ellipse 35% 35% at 70% 60%, rgba(232, 168, 74, 0.08) 0%, transparent 50%);
}

.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
}

.hero-content {
  position: relative; z-index: 2;
  max-width: 1200px; width: 100%;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 44px;
  opacity: 0;
}

.hero-eyebrow-line { width: 30px; height: 1px; background: var(--accent-grad); }

.hero-title {
  font-family: var(--font-d);
  font-size: clamp(4rem, 9.5vw, 10rem);
  font-weight: 700; line-height: 0.92;
  color: #ffffff;
  letter-spacing: -0.035em; color: var(--fg);
  margin-bottom: 52px;
}

.hero-title em {
  font-style: italic;
  background: var(--accent-grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Word split helpers */
.ww { display: inline-block; overflow: hidden; vertical-align: bottom; }
.wi { display: inline-block; transform: translateY(110%); }

.hero-sub {
  max-width: 520px; margin: 0 auto 64px;
  font-size: 1rem; font-weight: 300;
  line-height: 1.75; color: var(--muted);
  opacity: 0; transform: translateY(18px);
}

.hero-actions {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  opacity: 0; transform: translateY(18px);
}

/* ── HERO CAMERA ───────────────────────────────────── */
.hero-camera-wrap {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}

.hero-camera {
  width: 280px;
  display: block;
  opacity: 0.90;
  filter:
    drop-shadow(0 0 40px rgba(196,128,140,0.18))
    drop-shadow(0 0 90px rgba(120,60,180,0.12))
    drop-shadow(0 30px 60px rgba(0,0,0,0.80));
  animation: cameraFloat 9s ease-in-out infinite;
}

@keyframes cameraFloat {
  0%, 100% { transform: translateY(0px)   rotate(-5deg); }
  50%       { transform: translateY(-20px) rotate(-3.5deg); }
}

@media (max-width: 1200px) {
  .hero-camera { width: 220px; }
}

@media (max-width: 960px) {
  /* Right-edge, vertically centred — mirrors desktop composition */
  .hero-camera-wrap {
    right: -12%;
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  .hero-camera {
    width: 190px;
    opacity: 0.55;
    filter:
      drop-shadow(0 0 30px rgba(196,128,140,0.28))
      drop-shadow(0 0 65px rgba(120,60,180,0.18))
      drop-shadow(0 20px 40px rgba(0,0,0,0.75));
  }
}

@media (max-width: 480px) {
  .hero-camera-wrap { right: -16%; }
  .hero-camera { width: 170px; opacity: 0.50; }
}


.hero-scroll-indicator {
  position: absolute; bottom: 40px; left: 50%;
  transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  opacity: 0;
}

.hero-scroll-line {
  width: 1px; height: 52px;
  background: linear-gradient(to bottom, transparent, rgba(240,236,228,0.22));
  animation: scrollLineAnim 2.2s ease-in-out infinite;
}

@keyframes scrollLineAnim {
  0%   { transform: scaleY(0); transform-origin: top; }
  49%  { transform: scaleY(1); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

.hero-scroll-text {
  font-size: 0.6rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted);
  writing-mode: vertical-rl;
}

/* ── MARQUEE ───────────────────────────────────────── */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-2); padding: 16px 0;
  display: flex;
}

.marquee-track {
  display: flex;
  flex-shrink: 0;
  min-width: 100%;
  animation: marqueeRoll 32s linear infinite;
  white-space: nowrap;
}

@keyframes marqueeRoll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee-item {
  display: inline-flex; align-items: center; gap: 36px;
  padding: 0 36px;
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}

.marquee-sep {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}

/* ── WORK SECTION (bricks-style large grid) ────────── */
.work-section { padding: 40px 0 0; }

.work-header {
  padding: 0 48px; margin-bottom: 28px;
  display: flex; align-items: flex-end; justify-content: space-between;
}

.section-title {
  font-family: var(--font-d);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 700; line-height: 1;
  letter-spacing: -0.03em;
}

.section-title em {
  font-style: italic;
  background: var(--accent-grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.view-all-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  transition: color 0.3s ease;
}

.view-all-link svg { transition: transform 0.35s var(--expo); }
.view-all-link:hover { color: var(--fg); }
.view-all-link:hover svg { transform: translateX(5px); }

/* Grid container */
.work-grid-wrap { position: relative; }

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
}

/* Cards */
.wg-card {
  position: relative; overflow: hidden;
  display: block; text-decoration: none; color: inherit;
  background: var(--bg-2);
  will-change: transform;
}

.wg-card { aspect-ratio: 1/1; }

/* CTA snap card — mobile only */
.wg-card--cta { display: none; }

.wg-cta-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
  border: 1px solid rgba(240,236,228,0.1);
  border-radius: 18px;
}

.wg-cta-label {
  font-size: 1rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg);
}

.wg-cta-inner svg { color: var(--accent); }

/* Thumbnail */
.wg-thumb {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 0.95s var(--expo), opacity 0.55s ease;
}

/* Desktop-only overlay: 10% dark at rest, clears on hover */
@media (min-width: 769px) {
  .wg-card:not(.wg-card--cta)::after {
    content: '';
    position: absolute; inset: 0; z-index: 2;
    background: rgba(8, 8, 8, 0.10);
    pointer-events: none;
    transition: background 0.55s var(--expo);
  }
  .wg-card:not(.wg-card--cta):hover::after {
    background: rgba(8, 8, 8, 0);
  }
}

.wg-card:hover {
  box-shadow: 0 0 50px rgba(196, 128, 140, 0.12), 0 0 120px rgba(140, 60, 160, 0.08);
}

.wg-card:hover .wg-thumb {
  transform: scale(1.05);
}

/* Video */
.wg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
}

.wg-card:hover .wg-video { opacity: 1; }

/* Autoplaying showcase video — always visible, plays continuously on loop
   from the moment the page loads (rather than only revealing on hover) */
.wg-video--auto { opacity: 1; }

/* Info overlay */
.wg-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 72px 28px 42px;
  background: linear-gradient(to top, rgba(8,8,8,0.96) 0%, rgba(8,8,8,0.78) 38%, rgba(8,8,8,0.32) 75%, transparent 100%);
  display: flex; flex-direction: column; gap: 9px;
  transform: translateY(8px);
  transition: transform 0.55s var(--expo);
  z-index: 2;
}

.wg-card:hover .wg-info { transform: translateY(0); }

.wg-cat {
  font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
  opacity: 0.9;
  transform: translateY(2px);
  transition: opacity 0.4s ease, transform 0.4s var(--expo);
}

.wg-card:hover .wg-cat { opacity: 1; transform: translateY(0); }

.wg-name {
  font-family: var(--font-d);
  font-size: clamp(1.15rem, 1.9vw, 1.7rem);
  font-weight: 700; font-style: italic; letter-spacing: -0.02em; line-height: 1.15;
  color: var(--fg);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.6);
  transition: background 0.4s ease, -webkit-text-fill-color 0.4s ease, letter-spacing 0.4s ease;
}

.wg-card:hover .wg-name { letter-spacing: -0.01em; }

/* On hover, the title fills with the site's signature accent gradient —
   the same treatment used on case-study card names and emphasised
   headline words across the theme. */
.wg-card:hover .wg-name {
  background: var(--accent-grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Video-playing badge (top-right) */
.wg-badge {
  position: absolute; top: 18px; right: 18px; z-index: 3;
  display: flex; align-items: center; gap: 7px;
  background: rgba(8,8,8,0.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(196,128,140,0.3);
  padding: 6px 13px; border-radius: 100px;
  opacity: 0; transform: translateY(-6px);
  transition: opacity 0.4s ease, transform 0.45s var(--expo);
  pointer-events: none;
}

.wg-card:hover .wg-badge { opacity: 1; transform: translateY(0); }

.wgb-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: vphBlink 1.8s ease-in-out infinite;
}

.wgb-text {
  font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(240,236,228,0.7); font-family: var(--font-b); font-weight: 500;
}

/* Fade gradient at bottom of grid */
.work-grid-fade {
  /* Removed — this overlay sat directly on top of the card titles
     ("Brand Film" / "Product Videography") and made them hard to read
     once the cards became shorter. */
  display: none;
}

/* See All Work CTA */
.work-see-more {
  display: flex; justify-content: center; align-items: center;
  padding: 52px 0 100px;
  position: relative; z-index: 3;
  margin-top: 0;
}

/* ── SERVICES — kota-style rows ────────────────────── */
/* ── SERVICE SECTION HEADER ────────────────────────────── */
.svc-header {
  padding: 100px 60px 48px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.svc-header-kicker {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.svc-header-title {
  font-family: var(--font-d);
  font-size: clamp(2.6rem, 5.5vw, 5.5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.svc-header-title em {
  font-style: italic;
  color: var(--muted);
}

/* ── SERVICE CARDS GRID ────────────────────────────────── */
.svc-cards-section {
  border-top: 1px solid var(--border);
}

.svc-cards-header {
  padding: 80px 60px 56px;
  display: flex;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}

.svc-cards-kicker {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.svc-cards-title {
  font-family: var(--font-d);
  font-size: clamp(2.8rem, 5.5vw, 5.5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  flex: 1;
}

.svc-cards-title em {
  font-style: italic;
  color: var(--muted);
}

.svc-cards-all {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 8px;
  transition: color 0.3s ease;
}

.svc-cards-all:hover { color: var(--fg); }
.svc-cards-all svg { transition: transform 0.4s var(--expo); }
.svc-cards-all:hover svg { transform: translate(3px, -3px); }

.svc-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  position: relative;
  --mx: -500px;
  --my: -500px;
}

/* Cursor spotlight — radial glow follows mouse across the grid */
.svc-cards-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 420px at var(--mx) var(--my),
    rgba(196, 128, 140, 0.07) 0%,
    rgba(196, 128, 140, 0.03) 40%,
    transparent 70%);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.svc-cards-grid:hover::before { opacity: 1; }

.svc-card {
  position: relative;
  overflow: hidden;
  padding: 44px 40px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--fg);
  display: flex;
  flex-direction: column;
  min-height: 300px;
  cursor: pointer;
  transition: box-shadow 0.45s ease;
  will-change: transform;
}

.svc-card:hover {
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
  z-index: 2;
}

/* Featured card — col 1-2, taller */
.svc-card--lg {
  grid-column: span 2;
  min-height: 340px;
}

.svc-card--lg .svc-card-icon {
  width: 56px;
  height: 56px;
  margin: 36px 0 28px;
}

.svc-card--lg .svc-card-name {
  font-size: clamp(2rem, 3.5vw, 3.6rem);
}

/* Wide card — col 2-3 */
.svc-card--wide {
  grid-column: span 2;
}

/* Background — clip-path sweep from left on hover */
.svc-card-bg {
  position: absolute;
  inset: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.svc-card:hover .svc-card-bg {
  clip-path: inset(0 0% 0 0);
}

.svc-card-num {
  font-family: var(--font-b);
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  position: relative;
  z-index: 1;
  margin-bottom: auto;
  transition: color 0.35s ease;
}

.svc-card:hover .svc-card-num { color: rgba(240, 236, 228, 0.4); }

.svc-card-icon {
  display: block;
  width: 44px;
  height: 44px;
  margin: 32px 0 24px;
  color: rgba(240, 236, 228, 0.28);
  position: relative;
  z-index: 1;
  transition: color 0.4s ease, transform 0.55s var(--expo);
}

.svc-card:hover .svc-card-icon {
  color: rgba(240, 236, 228, 0.9);
  transform: scale(1.15) translateY(-3px);
}

.svc-card-name {
  font-family: var(--font-d);
  font-size: clamp(1.5rem, 2.2vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 0 0 14px;
  position: relative;
  z-index: 1;
  transition: letter-spacing 0.55s var(--expo), color 0.35s ease;
}

.svc-card:hover .svc-card-name {
  letter-spacing: -0.01em;
  color: var(--fg);
}

.svc-card-tag {
  font-family: var(--font-b);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  position: relative;
  z-index: 1;
  transition: color 0.35s ease, opacity 0.35s ease;
}

.svc-card:hover .svc-card-tag {
  color: rgba(240, 236, 228, 0.55);
}

/* Arrow — top-right corner, shifts diagonally on hover */
.svc-card-arrow {
  position: absolute;
  top: 40px;
  right: 40px;
  color: rgba(240, 236, 228, 0.14);
  z-index: 1;
  transition: transform 0.55s var(--expo), color 0.35s ease, opacity 0.35s ease;
}

.svc-card:hover .svc-card-arrow {
  transform: translate(4px, -4px);
  color: var(--accent-2);
  opacity: 1;
}

/* Number badge repositioned for large card */
.svc-card--lg .svc-card-arrow {
  top: 44px;
  right: 44px;
}

@media (max-width: 900px) {
  .svc-cards-header { padding: 56px 24px 40px; flex-direction: column; align-items: flex-start; }
  .svc-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-card--lg  { grid-column: span 2; }
  .svc-card--wide { grid-column: span 2; }
  .svc-card { min-height: 240px; padding: 34px 28px; }
  .svc-card--lg .svc-card-name { font-size: clamp(1.7rem, 5vw, 2.8rem); }
}

@media (max-width: 600px) {
  .svc-cards-grid { grid-template-columns: 1fr; }
  .svc-card--lg  { grid-column: span 1; }
  .svc-card--wide { grid-column: span 1; }
  .svc-card { min-height: 220px; }
}

/* ── SERVICE ROWS SECTION ──────────────────────────────── */
.svc-rows-section {
  border-top: 1px solid var(--border);
}

.svc-row {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 40px;
  padding: 44px 60px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  text-decoration: none; color: var(--fg);
  transition: padding-left 0.7s var(--expo), border-left-color 0.5s ease;
}

.svc-row:nth-child(1) { border-left-color: rgba(180, 60, 60, 0.7); }
.svc-row:nth-child(2) { border-left-color: rgba(70, 80, 200, 0.7); }
.svc-row:nth-child(3) { border-left-color: rgba(50, 140, 70, 0.7); }
.svc-row:nth-child(4) { border-left-color: rgba(220, 140, 40, 0.7); }
.svc-row:nth-child(5) { border-left-color: rgba(160, 80, 200, 0.7); }

.svc-row:nth-child(1):hover { border-left-color: rgba(212, 90, 90, 1); }
.svc-row:nth-child(2):hover { border-left-color: rgba(100, 120, 255, 1); }
.svc-row:nth-child(3):hover { border-left-color: rgba(70, 200, 100, 1); }
.svc-row:nth-child(4):hover { border-left-color: rgba(232, 168, 74, 1); }
.svc-row:nth-child(5):hover { border-left-color: rgba(196, 128, 140, 1); }

.svc-row-bg {
  position: absolute; inset: 0;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.75s var(--expo), opacity 0.2s ease;
}

.svc-row:hover .svc-row-bg {
  opacity: 1;
  clip-path: inset(0 0% 0 0);
}

.svc-row:hover { padding-left: 80px; }

.svc-row-num {
  font-family: var(--font-b);
  font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted); min-width: 32px;
  position: relative; z-index: 1;
}

.svc-row-name {
  font-family: var(--font-d);
  font-size: clamp(2.4rem, 4.8vw, 5.8rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.02em;
  flex: 1;
  position: relative; z-index: 1;
  transition: letter-spacing 0.6s var(--expo);
}

.svc-row:hover .svc-row-name { letter-spacing: 0.005em; }

.svc-row-tag {
  font-family: var(--font-b);
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
  position: relative; z-index: 1;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.5s ease 0.1s, transform 0.5s var(--expo) 0.1s;
}

.svc-row:hover .svc-row-tag { opacity: 1; transform: translateX(0); }

.svc-row-arrow {
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  color: rgba(240,236,228,0.2);
  transition: transform 0.65s var(--expo), color 0.35s ease;
}

.svc-row:hover .svc-row-arrow {
  transform: translate(6px, -6px);
  color: var(--accent-2);
}

/* Video placeholder — shown when no src loaded */
.video-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(135deg, rgba(18,18,18,0.97), rgba(8,8,8,0.99));
  z-index: 1; pointer-events: none;
  transition: opacity 0.35s ease;
}

.work-preview video + .video-placeholder { opacity: 1; }
.work-preview video.playing + .video-placeholder { opacity: 0; }

.vph-ring {
  position: relative; width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(196,128,140,0.3);
  display: flex; align-items: center; justify-content: center;
}

.vph-ring::before {
  content: ''; position: absolute; inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(196,128,140,0.12);
  animation: vphPulse 2.2s ease-in-out infinite;
}

@keyframes vphPulse {
  0%,100% { transform: scale(1); opacity: 0.5; }
  50%      { transform: scale(1.18); opacity: 0.15; }
}

.vph-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  animation: vphBlink 1.8s ease-in-out infinite;
}

@keyframes vphBlink {
  0%,100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

.vph-label {
  font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); font-family: var(--font-b); font-weight: 500;
}

/* Portfolio video */
.portfolio-video {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.portfolio-card:hover .portfolio-video { opacity: 1; }

.portfolio-card:hover .portfolio-thumb {
  transform: scale(1.06);
  filter: grayscale(10%) brightness(0.85);
  opacity: 0;
}

/* Portfolio video placeholder badge */
.portfolio-vid-badge {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  display: flex; align-items: center; gap: 7px;
  background: rgba(8,8,8,0.75);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(196,128,140,0.25);
  padding: 6px 12px; border-radius: 100px;
  opacity: 0; transform: translateY(-4px);
  transition: opacity 0.4s ease, transform 0.4s var(--expo);
  pointer-events: none;
}

.portfolio-card:hover .portfolio-vid-badge { opacity: 1; transform: translateY(0); }

.pvb-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: vphBlink 1.8s ease-in-out infinite;
}

.pvb-text {
  font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(240,236,228,0.65); font-family: var(--font-b); font-weight: 500;
}

/* ── STATEMENT ─────────────────────────────────────── */
.statement-section {
  padding: 160px 48px;
  max-width: 1400px; margin: 0 auto;
}

.statement-text {
  font-family: var(--font-d);
  font-size: clamp(2.2rem, 5vw, 5.2rem);
  font-weight: 700; line-height: 1.18;
  letter-spacing: -0.03em; color: var(--fg);
}

.statement-text em {
  font-style: italic;
  background: var(--accent-grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.statement-text .sw { opacity: 0.1; display: inline-block; }

/* ── SERVICES ACCORDION ────────────────────────────── */
.services-section {
  padding: 120px 0;
  border-top: 1px solid var(--border);
}

.services-header {
  padding: 0 48px; margin-bottom: 80px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: end;
}

.services-desc {
  font-size: 0.92rem; font-weight: 300;
  line-height: 1.8; color: var(--muted);
  max-width: 400px;
}

.service-list { border-top: 1px solid var(--border); }

.service-item { border-bottom: 1px solid var(--border); overflow: hidden; }

.service-trigger {
  display: flex; align-items: center; gap: 32px;
  padding: 30px 48px; cursor: pointer;
  transition: background 0.3s ease;
  width: 100%; border: none; background: none;
  color: var(--fg); text-align: left;
}

.service-trigger:hover { background: rgba(255,255,255,0.02); }

.service-num {
  font-size: 0.68rem; font-weight: 400;
  letter-spacing: 0.14em; color: var(--muted);
  width: 32px; flex-shrink: 0;
}

.service-name {
  font-family: var(--font-d);
  font-size: clamp(1.7rem, 3.2vw, 2.8rem);
  font-weight: 700; letter-spacing: -0.025em; flex: 1; line-height: 1;
}

.service-toggle {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--muted);
  transition: all 0.35s var(--expo);
}

.service-item.open .service-toggle {
  background: var(--accent); border-color: var(--accent);
  color: #080808; transform: rotate(45deg);
}

.service-body {
  max-height: 0; overflow: hidden;
  transition: max-height 0.55s var(--expo);
}

.service-item.open .service-body { max-height: 500px; }

.service-body-inner {
  padding: 0 48px 44px 112px;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px;
}

.service-desc-text {
  font-size: 0.92rem; font-weight: 300;
  line-height: 1.85; color: var(--muted);
}

.service-feats { list-style: none; display: flex; flex-direction: column; gap: 11px; }

.service-feats li {
  font-size: 0.8rem; color: var(--muted);
  display: flex; align-items: center; gap: 14px; line-height: 1.5;
}

.service-feats li::before {
  content: '';
  width: 18px; height: 1px; background: var(--accent); flex-shrink: 0;
}

/* ── DECORATIVE AMBIENT ICONS ──────────────────────── */

/* Hero — aperture iris ring, far left, very faint */
.hero-deco-apt {
  position: absolute; left: -5%; top: 50%;
  transform: translateY(-50%);
  width: min(440px, 38vw);
  opacity: 0.055; pointer-events: none; z-index: 0;
}
@media (max-width: 960px) {
  /* Aperture moves to top-left — camera owns bottom-right */
  .hero-deco-apt {
    left: -14%;
    right: auto;
    top: 8%;
    bottom: auto;
    transform: none;
    width: min(240px, 64vw);
    opacity: 0.05;
  }
}
@media (max-width: 480px) {
  .hero-deco-apt {
    left: -18%;
    top: 6%;
    width: min(200px, 70vw);
    opacity: 0.045;
  }
}

/* Work section — 35mm film frame ghost, right side */
.work-section { position: relative; overflow: hidden; }
.work-deco-film {
  position: absolute; right: -2%; top: 50%;
  transform: translateY(-50%);
  width: min(400px, 45vw);
  opacity: 0.04; pointer-events: none; z-index: 0;
}
@media (max-width: 768px) { .work-deco-film { display: none; } }

/* Work cards — concentric aperture mark in top-right corner */
.wg-card::before {
  content: ''; position: absolute;
  top: 14px; right: 14px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(240,236,228,0.16);
  box-shadow: 0 0 0 6px rgba(240,236,228,0.052), 0 0 0 13px rgba(240,236,228,0.024);
  pointer-events: none; z-index: 3;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.wg-card:hover::before {
  border-color: rgba(196,128,140,0.32);
  box-shadow: 0 0 0 6px rgba(196,128,140,0.07), 0 0 0 13px rgba(196,128,140,0.028);
}

/* Service row — icon reveals on hover (appears between tag + arrow) */
.svc-row-icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  color: rgba(240,236,228,0.55);
  opacity: 0; transform: scale(0.7) translateY(5px);
  transition: opacity 0.4s ease 0.13s, transform 0.45s var(--expo) 0.13s;
  position: relative; z-index: 1;
}
.svc-row:hover .svc-row-icon { opacity: 1; transform: scale(1) translateY(0); }
@media (max-width: 768px) { .svc-row-icon { display: none; } }

/* Numbers — aperture ghost centred behind stats */
.numbers-deco-apt {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 360px; opacity: 0.038;
  pointer-events: none; z-index: 0;
}

/* CTA — play circle ghost, right side */
.cta-deco-play {
  position: absolute; right: 5%; top: 50%;
  transform: translateY(-50%);
  width: 270px; opacity: 0.045;
  pointer-events: none;
}
@media (max-width: 768px) { .cta-deco-play { display: none; } }

/* ── NUMBERS ───────────────────────────────────────── */
.numbers-section {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--border);
}

.num-item {
  padding: 64px 48px;
  border-right: 1px solid var(--border);
}

.num-item:last-child { border-right: none; }

.num-val {
  font-family: var(--font-d);
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  font-weight: 700; letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--fg) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--fg); line-height: 1;
  margin-bottom: 10px; display: block;
}

.num-label {
  font-size: 0.78rem; font-weight: 400;
  color: var(--muted); letter-spacing: 0.06em; line-height: 1.55;
}

/* Text-based service highlights reuse .num-val/.num-label with a tighter scale */
.numbers-section .num-val {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: -0.02em;
  white-space: normal;
}

/* ── BRANDS STRIP ──────────────────────────────────── */
.brands-strip {
  padding: 80px 60px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 80px;
}

.brands-strip-label {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.7;
  white-space: nowrap;
  padding-top: 22px;
  min-width: 110px;
}

.brands-list {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.brand-entry {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--fg);
  transition: gap 0.5s var(--expo);
}

.brand-entry:first-child { border-top: 1px solid var(--border); }
.brand-entry:hover { gap: 36px; }

.brand-entry-num {
  font-family: var(--font-b);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 26px;
  flex-shrink: 0;
}

.brand-entry-name {
  font-family: var(--font-d);
  font-size: clamp(1.7rem, 3.2vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  flex: 1;
  color: rgba(240, 236, 228, 0.55);
  transition: color 0.4s ease;
}

.brand-entry:hover .brand-entry-name { color: var(--fg); }

.brand-entry-cat {
  font-family: var(--font-b);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.4s ease 0.05s, transform 0.45s var(--expo) 0.05s;
  flex-shrink: 0;
}

.brand-entry:hover .brand-entry-cat { opacity: 1; transform: translateX(0); }

.brand-entry-arrow {
  color: rgba(240, 236, 228, 0.18);
  flex-shrink: 0;
  transition: transform 0.55s var(--expo), color 0.35s ease;
}

.brand-entry:hover .brand-entry-arrow {
  transform: translate(5px, -5px);
  color: var(--accent-2);
}

@media (max-width: 900px) {
  .svc-header { padding: 60px 24px 32px; }
  .brands-strip { flex-direction: column; gap: 28px; padding: 60px 24px; }
  .brands-strip-label { padding-top: 0; white-space: normal; }
  .brand-entry-name { font-size: clamp(1.4rem, 6vw, 2.4rem); }
  .brand-entry-cat { display: none; }
}

/* ── CTA SECTION ───────────────────────────────────── */
.cta-section {
  position: relative; overflow: hidden;
  min-height: 80vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 120px 48px;
  border-top: 1px solid var(--border);
  position: relative; overflow: hidden;
}

.cta-glow {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(196,128,140,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.cta-inner { position: relative; z-index: 1; max-width: 960px; }

.cta-kicker {
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 28px; display: block;
}

.cta-title {
  font-family: var(--font-d);
  font-size: clamp(3.2rem, 8vw, 8.5rem);
  font-weight: 700; line-height: 0.93;
  letter-spacing: -0.04em; margin-bottom: 52px;
}

.cta-title em {
  font-style: italic;
  background: var(--accent-grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cta-actions { display: flex; align-items: center; justify-content: center; gap: 20px; }

/* ── BUTTONS ───────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-b);
  font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none;
  padding: 16px 34px; border-radius: 100px;
  border: 1px solid transparent;
  transition: background 0.35s var(--expo), color 0.3s ease,
              border-color 0.3s ease, transform 0.25s var(--expo);
}

.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn-primary:hover {
  background: var(--accent-grad-btn); border-color: transparent; color: #080808;
  box-shadow: 0 0 36px rgba(196, 128, 140, 0.45), 0 8px 24px rgba(0,0,0,0.4);
}

.btn-ghost { background: transparent; color: var(--fg); border-color: var(--border); }
.btn-ghost:hover {
  border-color: rgba(240,236,228,0.25); background: rgba(240,236,228,0.04);
  box-shadow: 0 0 24px rgba(240,236,228,0.08);
}

.btn-accent { background: var(--accent-grad-btn); color: #080808; border-color: transparent; }
.btn-accent:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }

/* ── FOOTER ────────────────────────────────────────── */
.footer {
  padding: 88px 48px 52px;
  border-top: 1px solid var(--border);
}

.footer-grid {
  display: grid; grid-template-columns: 2.5fr 1fr 1fr 1fr;
  gap: 80px; margin-bottom: 80px;
}

.footer-logo {
  font-family: var(--font-d); font-size: 1.4rem; font-weight: 700;
  letter-spacing: -0.02em; color: var(--fg); margin-bottom: 16px;
  display: block;
}

.footer-logo-img {
  height: 144px;
  width: 144px;
  display: block;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #f0c0cc 0%, #c4808c 45%, #964060 100%);
  -webkit-mask-image: url('../images/df-logo.png');
  mask-image: url('../images/df-logo.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.footer-about {
  font-size: 0.85rem; font-weight: 300;
  line-height: 1.8; color: var(--muted);
  margin-bottom: 32px; max-width: 280px;
}

.footer-socials { display: flex; gap: 20px; }

.footer-social {
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  transition: color 0.3s ease;
}

.footer-social:hover { color: var(--fg); }

.footer-col h4 {
  font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 24px;
}

.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 13px; }

.footer-col ul li a {
  font-size: 0.875rem; font-weight: 300;
  color: var(--muted); text-decoration: none;
  transition: color 0.3s ease;
}

.footer-col ul li a:hover { color: var(--fg); }

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 40px; border-top: 1px solid var(--border);
}

.footer-copy { font-size: 0.75rem; font-weight: 300; color: var(--muted); }

.footer-legal { display: flex; gap: 28px; }

.footer-legal a {
  font-size: 0.75rem; font-weight: 300;
  color: var(--muted); text-decoration: none;
  transition: color 0.3s ease;
}

.footer-legal a:hover { color: var(--fg); }

/* ── PAGE HERO (inner pages) ───────────────────────── */
.page-hero {
  min-height: 65vh;
  display: flex; align-items: flex-end;
  padding: calc(var(--nav-h) + var(--safe-top) + 90px) 48px 80px;
  border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}

.page-hero-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 60% at 15% 60%, rgba(196,128,140,0.05) 0%, transparent 55%);
  pointer-events: none;
}

.page-hero-inner {
  position: relative; z-index: 1;
  max-width: 1400px; width: 100%; margin: 0 auto;
}

/* ── HERO LOGO MARK ─────────────────────────────── */

.hero-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}

/*
  Homepage: lives inside .hero-content (in normal flow),
  so logo + title + buttons center as one cohesive block —
  overlap is physically impossible.
*/
.hero-content .hero-logo-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 32px;
}

/* Inner pages: hero logo intentionally omitted — homepage only */

.hero-logo-mark {
  display: block;
  height: 160px;
  width: 160px;
  background: linear-gradient(135deg, #f0c0cc 0%, #c4808c 45%, #964060 100%);
  -webkit-mask-image: url('../images/df-logo.png');
  mask-image: url('../images/df-logo.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  will-change: transform, opacity;
}

.page-label {
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 24px;
  display: flex; align-items: center; gap: 14px;
  opacity: 0;
}

.page-label-line { width: 28px; height: 1px; background: var(--accent-grad); }

.page-title {
  font-family: var(--font-d);
  font-size: clamp(3.8rem, 9vw, 9rem);
  font-weight: 700; line-height: 0.92;
  letter-spacing: -0.04em; color: var(--fg);
}

.page-title em {
  font-style: italic;
  background: var(--accent-grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-desc {
  font-size: 1rem; font-weight: 300; line-height: 1.75;
  color: var(--muted); max-width: 540px;
  margin-top: 40px; opacity: 0; transform: translateY(14px);
}

/* ── PORTFOLIO ─────────────────────────────────────── */
.portfolio-sec { padding: 80px 48px 120px; }

.portfolio-filters {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; margin-bottom: 64px;
}

.filter-btn {
  font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); background: transparent;
  border: 1px solid var(--border);
  padding: 9px 20px; border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn:hover { color: var(--fg); border-color: rgba(240,236,228,0.18); }

.filter-btn.active {
  background: var(--fg); color: var(--bg); border-color: var(--fg);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  gap: 3px;
}

.portfolio-card {
  position: relative; overflow: hidden;
  aspect-ratio: 4/3; background: var(--bg-2);
  transition: opacity 0.4s ease, transform 0.4s var(--expo);
}

.portfolio-card.p-large { grid-column: span 2; aspect-ratio: 16/9; }

.portfolio-thumb {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: grayscale(40%) brightness(0.7);
  transition: transform 0.75s var(--expo), filter 0.5s ease;
}

.portfolio-card:hover .portfolio-thumb {
  transform: scale(1.06);
  filter: grayscale(10%) brightness(0.85);
}

.portfolio-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-weight: 900;
  font-size: clamp(3rem, 7vw, 8rem);
  color: rgba(240,236,228,0.04);
  transition: transform 0.75s var(--expo), color 0.5s ease;
}

.portfolio-card:hover .portfolio-placeholder {
  transform: scale(1.05); color: rgba(240,236,228,0.06);
}

.portfolio-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0.08) 55%, transparent 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px 24px;
  opacity: 0; transition: opacity 0.4s ease;
}

.portfolio-card:hover .portfolio-overlay { opacity: 1; }

.portfolio-cat {
  font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 7px;
}

.portfolio-name {
  font-family: var(--font-d); font-size: 1.3rem;
  font-weight: 700; letter-spacing: -0.01em;
  color: var(--fg); line-height: 1.1;
}

.portfolio-view {
  font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-top: 10px;
  display: flex; align-items: center; gap: 8px;
}

/* ── SERVICES DETAIL PAGE ──────────────────────────── */
.svc-block {
  padding: 100px 48px;
  border-bottom: 1px solid var(--border);
  max-width: 1400px; margin: 0 auto;
}

.svc-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 100px; align-items: center;
}

.svc-grid.flip { direction: rtl; }
.svc-grid.flip > * { direction: ltr; }

.svc-number {
  font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 18px;
}

.svc-title {
  font-family: var(--font-d);
  font-size: clamp(2.8rem, 5.5vw, 4.5rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.035em;
  margin-bottom: 28px;
}

.svc-title em {
  font-style: italic;
  background: var(--accent-grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.svc-text {
  font-size: 0.95rem; font-weight: 300;
  line-height: 1.85; color: var(--muted); margin-bottom: 36px;
}

.svc-feats { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 48px; }

.svc-feats li {
  font-size: 0.84rem; color: var(--muted);
  display: flex; align-items: center; gap: 14px; line-height: 1.5;
}

.svc-feats li::before { content: ''; width: 20px; height: 1px; background: var(--accent); flex-shrink: 0; }

/* ── perspective wrapper ── */
.svc-visual-wrap {
  perspective: 900px;
  perspective-origin: center center;
}

.svc-visual {
  position: relative; border-radius: 4px;
  background: var(--bg-2);
  border: 1px solid var(--border); aspect-ratio: 5/6;
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between; gap: 0;
  padding-bottom: 28px;
  /* 3D */
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);
  transition: transform 0.7s var(--expo), box-shadow 0.7s ease;
  will-change: transform;
  cursor: default;
}

/* idle float — only on devices with hover (desktop) */
@media (hover: hover) {
  .svc-visual {
    animation: svcFloat 5s ease-in-out infinite;
  }
  .svc-visual.is-tilting {
    animation: none;
  }
}

@keyframes svcFloat {
  0%, 100% { transform: translateY(0px)   rotateX(0deg)  rotateY(0deg); }
  25%       { transform: translateY(-6px)  rotateX(2deg)  rotateY(-2deg); }
  50%       { transform: translateY(-10px) rotateX(-1deg) rotateY(2deg); }
  75%       { transform: translateY(-4px)  rotateX(2deg)  rotateY(-1deg); }
}

/* glare overlay — injected by JS */
.svc-visual-shine {
  position: absolute; inset: 0; z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.13), transparent 65%);
}
.svc-visual:hover .svc-visual-shine { opacity: 1; }

/* depth layers — float up in Z */
.svc-visual-num {
  font-family: var(--font-d); font-weight: 900;
  font-size: clamp(6rem, 14vw, 12rem);
  letter-spacing: -0.06em; line-height: 1;
  background: linear-gradient(135deg, rgba(196,128,140,0.14), rgba(196,128,140,0.02));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  transform: translateZ(30px);
}

.svc-metric-val {
  font-family: var(--font-d); font-size: 3.2rem;
  font-weight: 700; letter-spacing: -0.03em;
  color: var(--accent); display: block; line-height: 1; text-align: center;
}

.svc-metric-label {
  font-size: 0.75rem; font-weight: 400;
  color: var(--muted); text-align: center; margin-top: 4px;
}

/* ══════════════════════════════════════════════════════
   SERVICE CARD ART VISUALS
   ══════════════════════════════════════════════════════ */

/* ── Metric wrap — bottom bar of each card ─────────── */
.svc-metric-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 16px 20px 0; width: 100%;
  border-top: 1px solid var(--border);
  transform: translateZ(45px);
}

/* ── Common art container ──────────────────────────── */
.svc-art {
  width: 100%; flex: 1; min-height: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 20px 20px 0; gap: 11px;
  position: relative; z-index: 1;
  transform: translateZ(15px);
}

/* ══ ART 01 — SOCIAL MEDIA (Instagram post) ═══════════ */
.svc-art--social { align-items: stretch; }

.sa-ig-post {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column; flex: 1; min-height: 0;
}

.sa-ig-top {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; flex-shrink: 0;
}

.sa-ig-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-grad);
  border: 1.5px solid rgba(196,128,140,0.35);
}

.sa-ig-name {
  font-size: 0.68rem; font-weight: 600; color: var(--fg);
  line-height: 1.2; letter-spacing: 0;
}

.sa-ig-sub { font-size: 0.52rem; color: var(--muted); line-height: 1; }

.sa-ig-more {
  margin-left: auto; font-size: 0.75rem; color: var(--muted);
  letter-spacing: 0.1em;
}

.sa-ig-media {
  flex: 1; min-height: 0; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1a0810 0%, #2d1020 45%, #180814 70%, #0d060c 100%);
  display: flex; align-items: flex-end; padding: 10px;
}

.sa-ig-media::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 28% 38%, rgba(196,128,140,0.2) 0%, transparent 60%),
    radial-gradient(ellipse 45% 65% at 78% 28%, rgba(150,64,96,0.14) 0%, transparent 50%),
    radial-gradient(ellipse 35% 40% at 60% 70%, rgba(232,168,74,0.06) 0%, transparent 50%);
}

.sa-ig-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 45%, rgba(0,0,0,0.65) 100%);
}

.sa-ig-reach {
  position: relative; z-index: 1;
  font-size: 0.55rem; font-weight: 600; color: #fff;
  background: rgba(196,128,140,0.22); border: 1px solid rgba(196,128,140,0.38);
  border-radius: 20px; padding: 3px 9px; letter-spacing: 0.04em;
}

.sa-ig-bottom {
  padding: 8px 12px 10px; flex-shrink: 0;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 7px;
}

.sa-ig-actions { display: flex; align-items: center; gap: 12px; }

.sa-ig-like {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.62rem; font-weight: 600; color: var(--fg);
}

.sa-ig-comment {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.62rem; color: var(--muted);
}

.sa-ig-engage-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.52rem; color: var(--muted);
}

.sa-ig-engage-bar {
  flex: 1; height: 3px;
  background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden;
}

.sa-ig-engage-fill {
  height: 100%; width: 82%;
  background: var(--accent-grad); border-radius: 2px;
}

.sa-ig-engage-row strong { color: var(--fg); font-weight: 600; }

/* ══ ART 02 — PAID ADVERTISING (Campaign dashboard) ═══ */
.svc-art--ads { align-items: stretch; gap: 10px; }

.sa-ads-header {
  display: flex; align-items: center; justify-content: space-between; padding: 0 2px;
}

.sa-ads-title { font-size: 0.62rem; font-weight: 500; color: var(--fg); }

.sa-ads-live {
  font-size: 0.5rem; font-weight: 700; color: #4ade80;
  letter-spacing: 0.12em; text-transform: uppercase;
}

.sa-campaign-list { display: flex; flex-direction: column; gap: 9px; flex: 1; justify-content: center; }

.sa-campaign {
  display: grid; grid-template-columns: 46px 1fr auto auto;
  align-items: center; gap: 8px;
}

.sa-plat {
  font-size: 0.52rem; font-weight: 700; padding: 3px 5px; border-radius: 4px;
  text-align: center; letter-spacing: 0.02em; white-space: nowrap;
}

.sa-plat--meta   { background: rgba(24,119,242,0.14); color: #93c5fd; border: 1px solid rgba(24,119,242,0.22); }
.sa-plat--google { background: rgba(234,67,53,0.12);  color: #fca5a5; border: 1px solid rgba(234,67,53,0.2); }
.sa-plat--tiktok { background: rgba(255,255,255,0.05); color: var(--fg); border: 1px solid var(--border); }

.sa-bar-track {
  height: 5px; background: rgba(255,255,255,0.05);
  border-radius: 3px; overflow: hidden;
}

.sa-bar-fill {
  height: 100%; background: var(--accent-grad); border-radius: 3px;
}

.sa-roas { font-size: 0.6rem; font-weight: 700; color: var(--fg); white-space: nowrap; }

.sa-up-arrow { font-size: 0.65rem; color: #4ade80; line-height: 1; }

.sa-ads-totals {
  display: flex; align-items: stretch;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}

.sa-total-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 8px 4px; gap: 2px;
}

.sa-total-sep { width: 1px; background: var(--border); }

.sa-total-label {
  font-size: 0.46rem; color: var(--muted);
  letter-spacing: 0.09em; text-transform: uppercase;
}

.sa-total-val { font-size: 0.68rem; font-weight: 700; color: var(--fg); }

.sa-total-hi { color: #4ade80; }

/* ══ ART 03 — CREATIVE & DESIGN (Brand identity) ══════ */
.svc-art--creative { gap: 12px; }

.sa-palette { display: flex; gap: 7px; align-items: center; }

.sa-swatch {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.08); flex-shrink: 0;
  transition: transform 0.4s var(--expo);
}

.sa-swatch:hover { transform: translateY(-4px) scale(1.12); }

.sa-brand-mark {
  position: relative; width: 68px; height: 68px;
  display: flex; align-items: center; justify-content: center;
}

.sa-bm-ring {
  position: absolute; border-radius: 50%;
  border: 2px solid transparent;
}

.sa-bm-ring--1 {
  width: 60px; height: 60px;
  border-color: rgba(196,128,140,0.45);
  border-top-color: rgba(196,128,140,0.95);
  animation: ringRotate 9s linear infinite;
}

.sa-bm-ring--2 {
  width: 40px; height: 40px;
  border-color: rgba(232,168,74,0.25);
  border-right-color: rgba(232,168,74,0.75);
  animation: ringRotate 5.5s linear infinite reverse;
}

.sa-bm-core {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent-grad); position: relative; z-index: 1;
  box-shadow: 0 0 16px rgba(196,128,140,0.5);
}

@keyframes ringRotate { to { transform: rotate(360deg); } }

.sa-type-row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}

.sa-type-aa {
  font-family: var(--font-d); font-size: 1.7rem; font-weight: 900;
  color: var(--fg); line-height: 1; letter-spacing: -0.02em; flex-shrink: 0;
}

.sa-weights { display: flex; flex-direction: column; gap: 1px; }

.sa-weights span {
  font-size: 0.48rem; color: var(--muted);
  letter-spacing: 0.06em; line-height: 1.5;
}

.sa-weights span:last-child { color: var(--fg); }

.sa-tags { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }

.sa-tag {
  font-size: 0.5rem; font-weight: 500; padding: 3px 9px; border-radius: 20px;
  border: 1px solid var(--border); color: var(--muted); letter-spacing: 0.06em;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.sa-tag:hover { border-color: rgba(196,128,140,0.4); color: var(--accent); }

/* ══ ART 04 — SEO & CONTENT (Search rankings) ══════════ */
.svc-art--seo { align-items: stretch; gap: 9px; }

.sa-search-bar {
  display: flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 20px;
  padding: 7px 12px; color: var(--muted); font-size: 0.6rem;
}

.sa-search-cursor {
  width: 1px; height: 10px; background: var(--accent); border-radius: 1px;
  animation: blink 1.2s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.sa-serp { display: flex; flex-direction: column; gap: 6px; flex: 1; justify-content: center; }

.sa-serp-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px;
}

.sa-serp-row--top {
  background: rgba(196,128,140,0.07); border: 1px solid rgba(196,128,140,0.22);
}

.sa-rank {
  font-size: 0.54rem; font-weight: 800;
  width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
  border-radius: 4px; flex-shrink: 0;
}

.sa-rank--1 { background: var(--accent-grad); color: #fff; font-size: 0.5rem; }

.sa-rank--dim {
  color: var(--muted); font-size: 0.55rem;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
}

.sa-serp-info { flex: 1; min-width: 0; }

.sa-serp-url { font-size: 0.5rem; color: #4ade80; margin-bottom: 2px; }

.sa-serp-title {
  font-size: 0.6rem; font-weight: 600; color: var(--fg); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sa-serp-bar {
  height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; flex: 1;
}

.sa-serp-arrow { flex-shrink: 0; }

.sa-traffic-wrap {
  display: flex; flex-direction: column; gap: 5px; height: 52px; flex-shrink: 0;
}

.sa-traffic-wrap svg { flex: 1; min-height: 0; }

.sa-traffic-row {
  display: flex; justify-content: space-between; align-items: center; padding: 0 2px;
}

.sa-traffic-start { font-size: 0.46rem; color: var(--muted); }

.sa-traffic-end { font-size: 0.52rem; font-weight: 700; color: #4ade80; }

/* ══ ART 05 — PRINT & PRODUCTION ═══════════════════════ */
.svc-art--print { align-items: stretch; gap: 10px; }

/* reuse .sa-ads-header/.sa-ads-live from Art 02 */
.sa-ws-pulse {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-right: 5px; vertical-align: middle;
  animation: wsPulse 2.2s ease-in-out infinite;
}

@keyframes wsPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(196,128,140,0.55); }
  60%       { opacity: 0.8; box-shadow: 0 0 0 4px rgba(196,128,140,0); }
}

/* Product rows — reuse .sa-campaign-list / .sa-campaign / .sa-bar-track / .sa-bar-fill */
.sa-plat--pkg  { background: rgba(196,128,140,0.18); color: #f0c0cc; }
.sa-plat--app  { background: rgba(100,120,200,0.18); color: #a0b0f0; }
.sa-plat--bags { background: rgba(80,160,100,0.18);  color: #90d0a0; }

.sa-campaign--hi {
  border: 1px solid rgba(196,128,140,0.28);
  background: rgba(196,128,140,0.05);
  border-radius: 8px;
}

.sa-print-stat {
  font-size: 0.5rem; font-weight: 600; color: var(--accent);
  white-space: nowrap;
}

/* 2×2 packaging highlight grid */
.sa-pkg-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px; flex-shrink: 0;
}

.sa-pkg-cell {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 8px;
}

.sa-pkg-icon {
  width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; opacity: 0.85;
}

.sa-pkg-label {
  font-size: 0.45rem; font-weight: 600; color: var(--fg);
  letter-spacing: 0.03em; line-height: 1.2;
}

/* Color swatches strip */
.sa-colors-row {
  display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 10px; flex-shrink: 0;
}

.sa-colors-label {
  font-size: 0.43rem; font-weight: 600;
  color: var(--muted); letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap;
  margin-right: 2px;
}

.sa-swatch-sm {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.1);
}

.sa-colors-more {
  font-size: 0.4rem; color: var(--muted); margin-left: 3px; white-space: nowrap;
}

/* ── Mobile overrides for art (single-column wide card) ─ */
@media (max-width: 768px) {
  .svc-art { padding: 18px 18px 0; gap: 10px; }
  .svc-metric-wrap { padding: 14px 16px 0; }
  .svc-metric-val { font-size: clamp(1.8rem, 6vw, 2.6rem); }
  .svc-metric-label { font-size: 0.72rem; }
  .sa-type-aa { font-size: 1.6rem; }
  .sa-traffic-wrap { height: 48px; }
}

/* ── Desktop art scaling — sized for the larger card ── */
@media (min-width: 769px) {
  .svc-art { padding: 26px 26px 0; gap: 14px; }
  .svc-metric-wrap { padding: 18px 22px 0; }
  .sa-ads-title { font-size: 0.78rem; }
  .sa-ads-live { font-size: 0.62rem; }
  .sa-campaign-list { gap: 12px; }
  .sa-campaign { grid-template-columns: 58px 1fr auto auto; }
  .sa-plat { font-size: 0.65rem; padding: 4px 7px; }
  .sa-bar-track { height: 7px; }
  .sa-roas { font-size: 0.74rem; }
  .sa-up-arrow { font-size: 0.8rem; }
  .sa-total-item { padding: 10px 8px; }
  .sa-total-label { font-size: 0.58rem; }
  .sa-total-val { font-size: 0.84rem; }
  .sa-print-stat { font-size: 0.64rem; }
  .sa-pkg-cell { padding: 10px; gap: 8px; }
  .sa-pkg-icon { width: 20px; height: 20px; }
  .sa-pkg-label { font-size: 0.58rem; }
  .sa-colors-row { padding: 10px 14px; gap: 7px; }
  .sa-colors-label { font-size: 0.56rem; }
  .sa-swatch-sm { width: 16px; height: 16px; }
  .sa-colors-more { font-size: 0.52rem; }
  .sa-ig-avatar { width: 34px; height: 34px; }
  .sa-ig-name { font-size: 0.78rem; }
  .sa-ig-sub { font-size: 0.6rem; }
  .sa-ig-more { font-size: 0.86rem; }
  .sa-ig-reach { font-size: 0.64rem; }
  .sa-ig-like, .sa-ig-comment { font-size: 0.74rem; }
  .sa-ig-engage-row { font-size: 0.6rem; }
  .sa-swatch { width: 32px; height: 32px; }
  .sa-brand-mark { width: 84px; height: 84px; }
  .sa-bm-ring--1 { width: 76px; height: 76px; }
  .sa-bm-ring--2 { width: 50px; height: 50px; }
  .sa-bm-core { width: 20px; height: 20px; }
  .sa-type-aa { font-size: 2.1rem; }
  .sa-weights span { font-size: 0.58rem; }
  .sa-tag { font-size: 0.62rem; padding: 4px 12px; }
  .sa-search-bar { font-size: 0.74rem; padding: 9px 14px; }
  .sa-serp-url { font-size: 0.6rem; }
  .sa-serp-title { font-size: 0.74rem; }
  .sa-rank { width: 22px; height: 22px; }
  .sa-rank--1 { font-size: 0.6rem; }
  .sa-rank--dim { font-size: 0.65rem; }
  .sa-serp-bar { height: 8px; }
  .sa-traffic-wrap { height: 60px; }
  .sa-traffic-start { font-size: 0.56rem; }
  .sa-traffic-end { font-size: 0.64rem; }
}

/* ── CONTACT PAGE ──────────────────────────────────── */
.contact-wrap {
  padding: 80px 48px 120px;
  max-width: 1400px; margin: 0 auto;
}

.contact-layout {
  display: grid; grid-template-columns: 1fr 1.3fr; gap: 120px;
}

.contact-big-link {
  font-family: var(--font-d);
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  font-weight: 700; letter-spacing: -0.03em;
  color: var(--fg); text-decoration: none; line-height: 1;
  display: block; margin-bottom: 52px;
  transition: color 0.3s ease;
  border-bottom: 1px solid var(--border); padding-bottom: 32px;
}

.contact-big-link:hover { color: var(--accent); }

.contact-details { display: flex; flex-direction: column; gap: 28px; margin-bottom: 56px; }

.cd-label {
  font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 4px;
}

.cd-val { font-size: 0.92rem; font-weight: 300; color: var(--muted); }

/* Form */
.form-section-title {
  font-family: var(--font-d); font-size: 2rem;
  font-weight: 700; letter-spacing: -0.025em; margin-bottom: 40px;
}

.form-fields {
  border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; }

.form-field {
  position: relative;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s ease;
}

.form-field:focus-within { background: rgba(240,236,228,0.02); }

.form-row .form-field:last-child { border-right: none; }
.form-row:last-child .form-field { border-bottom: none; }

.form-field.full { grid-column: span 2; border-right: none; }

.form-field label {
  display: block; padding: 18px 20px 4px;
  font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); transition: color 0.3s ease;
}

.form-field:focus-within label { color: var(--accent); }

.form-field input,
.form-field select,
.form-field textarea {
  display: block; width: 100%; background: transparent;
  border: none; outline: none;
  font-family: var(--font-b); font-size: 0.95rem;
  font-weight: 300; color: var(--fg);
  padding: 0 20px 18px;
  -webkit-appearance: none;
}

.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(240,236,228,0.15); }

.form-field select option { background: #141414; color: var(--fg); }

.form-field textarea { min-height: 150px; resize: none; padding-top: 6px; }

.form-submit {
  margin-top: 24px;
  display: flex; align-items: center; gap: 20px;
}

.form-note {
  font-size: 0.75rem; font-weight: 300;
  color: var(--muted); line-height: 1.6;
}

/* ── LEAD FORM (animated) ──────────────────────────── */
.lead-form-section {
  position: relative; overflow: hidden;
  max-width: 880px; margin: 0 auto;
  padding: 8px 48px 110px;
}

.lead-form-deco {
  position: absolute; right: -130px; top: -90px;
  width: 380px; opacity: 0.05;
  pointer-events: none; z-index: 0;
  animation: lf-spin 90s linear infinite;
}

@keyframes lf-spin { to { transform: rotate(360deg); } }

.lead-form-head {
  position: relative; z-index: 1;
  max-width: 560px; margin-bottom: 48px;
}

/* The shared .page-label starts at opacity:0 and is revealed by the page-hero
   GSAP script — but that only targets the first .page-label on the page.
   This one is revealed by the .reveal/.visible scroll-observer on its parent
   instead, so it needs to start visible. */
.lead-form-head .page-label { opacity: 1; }

.lead-form-sub {
  font-size: 0.92rem; font-weight: 300;
  color: var(--muted); line-height: 1.75;
  margin-top: 18px; max-width: 480px;
}

.lead-form { position: relative; z-index: 1; }

/* Animated focus halo — a thin gradient line that draws in under each field,
   echoing the lens-aperture motif used across the site */
.form-field-glow {
  position: absolute; left: 20px; right: 20px; bottom: 0;
  height: 2px; border-radius: 2px;
  background: var(--accent-grad);
  opacity: 0; transform: scaleX(0.6); transform-origin: left center;
  pointer-events: none;
  box-shadow: 0 0 18px rgba(196, 128, 140, 0.5);
}

.form-field.full .form-field-glow { left: 20px; right: 20px; }

/* Submit button — animated states */
.lead-form .btn-primary {
  position: relative; overflow: hidden;
  --sent-wipe: 0%;
}

.lead-form .btn-primary.is-sending { cursor: progress; }

.lead-form .btn-primary.is-sending .btn-label::after {
  content: '\2026'; display: inline-block; width: 1.1em; overflow: hidden;
  white-space: nowrap; vertical-align: bottom;
  animation: lf-ellipsis 1.2s steps(4, end) infinite;
}

@keyframes lf-ellipsis {
  0%   { width: 0; }
  100% { width: 1.1em; }
}

.lead-form .btn-primary.is-sent {
  background: linear-gradient(90deg,
    var(--accent) 0%, var(--accent) var(--sent-wipe),
    var(--fg) var(--sent-wipe), var(--fg) 100%);
  border-color: transparent; color: #080808; cursor: default;
  box-shadow: 0 0 36px rgba(196, 128, 140, 0.4), 0 8px 24px rgba(0,0,0,0.35);
}

/* Success banner */
.lead-form-success {
  display: flex; align-items: center; gap: 14px;
  margin-top: 22px; padding: 16px 22px;
  border: 1px solid rgba(196, 128, 140, 0.22);
  background: rgba(196, 128, 140, 0.06);
  border-radius: 14px;
  color: var(--fg); font-size: 0.85rem; font-weight: 300; line-height: 1.5;
  visibility: hidden; opacity: 0;
}

.lead-form-success-icon {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: rgba(196, 128, 140, 0.14); color: var(--accent);
}

@media (max-width: 768px) {
  .lead-form-section { padding: 4px 20px 88px; }
  .lead-form-deco { width: 260px; right: -90px; top: -60px; }
  .form-row { grid-template-columns: 1fr; }
  .form-field.full { grid-column: span 1; }
  .form-row .form-field:last-child { border-right: none; }
}

/* Process steps */
.process-wrap {
  padding: 0 48px 80px;
  max-width: 1400px; margin: 0 auto;
}

.process-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
}

.process-step {
  padding: 40px 32px; background: var(--bg-2);
  border-right: 1px solid var(--border);
  transition: background 0.3s ease;
}

.process-step:last-child { border-right: none; }
.process-step:hover { background: rgba(255,255,255,0.025); }

.ps-num {
  font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.2em; color: var(--accent); margin-bottom: 16px;
}

.ps-title {
  font-family: var(--font-d); font-size: 1.1rem;
  font-weight: 700; letter-spacing: -0.01em; margin-bottom: 12px;
}

.ps-desc {
  font-size: 0.82rem; font-weight: 300;
  line-height: 1.7; color: var(--muted);
}

/* Section reveal initial state is set by GSAP via fromTo */

/* ── REVEAL UTILITIES ──────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.85s var(--expo), transform 0.85s var(--expo);
}

.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 0.1s; }
.reveal.d2 { transition-delay: 0.2s; }
.reveal.d3 { transition-delay: 0.3s; }

/* Page entrance */
body { animation: pageIn 0.45s var(--expo) both; }

@keyframes pageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── RESPONSIVE ────────────────────────────────────── */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
  .numbers-section { grid-template-columns: 1fr 1fr; }
  .num-item:nth-child(2) { border-right: none; }
  .num-item:nth-child(3) { border-top: 1px solid var(--border); border-right: 1px solid var(--border); }
  .num-item:nth-child(4) { border-top: 1px solid var(--border); border-right: none; }
  .svc-grid { gap: 40px; }
  .contact-layout { gap: 60px; }
  .portfolio-grid { grid-template-columns: repeat(2,1fr); }
  .portfolio-card.p-large { grid-column: span 1; aspect-ratio: 4/3; }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .wg-card { aspect-ratio: 1/1; }
}

/* The centered nav group + right-side actions only have room to coexist
   above ~1024px — below that they start to overlap, so switch to the
   hamburger menu earlier than the general mobile breakpoint. */
@media (max-width: 1024px) and (min-width: 769px) {
  .nav-links, .nav-contact { display: none; }
  .hamburger { display: flex; }
}

@media (max-width: 768px) {
  /* Hide custom cursor on touch devices */
  .cursor { display: none !important; }
  * { cursor: auto !important; }

  .sticky-cta { bottom: 20px; right: 20px; }
  .sticky-cta-btn { padding: 12px 18px 12px 20px; font-size: 0.68rem; }
  .nav { padding: var(--safe-top) 20px 0; }
  .nav-logo-img { height: 56px; width: 56px; }
  .nav-links, .nav-contact { display: none; }
  .lang-toggle { display: flex; touch-action: manipulation; min-height: 44px; }
  .hamburger { display: flex; }
  /* Hero: padding-driven, no dead zone */
  .hero {
    min-height: auto;
    padding: calc(var(--nav-h) + var(--safe-top) + 16px) 20px 72px;
    justify-content: center;
  }
  /* Hide scroll indicator — camera on right, no room needed */
  .hero-scroll-indicator { display: none; }
  .hero-title { font-size: clamp(3rem, 13vw, 5.5rem); }
  .hero-actions { flex-direction: column; gap: 12px; }

  /* Work: horizontal snap scroll, one card at a time */
  .work-section { padding: 60px 0 0; overflow: visible; }
  .work-grid-wrap { overflow: visible; }
  .work-grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    /* Side padding = half of leftover space so first/last card centres */
    padding: 0 10vw 28px;
  }
  .work-grid::-webkit-scrollbar { display: none; }
  .wg-card {
    min-width: 80vw;
    width: 80vw;
    flex-shrink: 0;
    scroll-snap-align: center;
    aspect-ratio: 3/4;
    border-radius: 18px;
    overflow: hidden; /* clip thumb to rounded corners */
  }
  /* Fade doesn't apply to horizontal scroll — hide it */
  .work-grid-fade { display: none; }
  /* CTA is now the 4th snap card — bottom button hidden */
  .work-see-more { display: none; }
  /* Show the inline CTA card, hide desktop-only cards */
  .wg-card--cta { display: block; }
  .wg-card--desktop { display: none; }
  .svc-row { padding: 30px 20px; gap: 16px; }
  .svc-row:hover { padding-left: 20px; }
  .svc-row-tag { display: none; }
  .svc-row-name { font-size: clamp(2rem, 9vw, 3rem); }
  .numbers-section { grid-template-columns: 1fr 1fr; }
  .num-item { padding: 36px 20px; }
  .num-item:nth-child(2) { border-right: none; }
  .num-item:nth-child(3) { border-top: 1px solid var(--border); border-right: 1px solid var(--border); }
  .num-item:nth-child(4) { border-top: 1px solid var(--border); border-right: none; }
  .cta-section { padding: 80px 20px; min-height: auto; }
  .cta-title { font-size: clamp(2.8rem, 11vw, 4.5rem); }
  .cta-actions { flex-direction: column; gap: 12px; }
  .footer { padding: 56px 20px 40px; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }
  .page-hero { padding: calc(var(--nav-h) + var(--safe-top) + 48px) 20px 56px; min-height: auto; }
  .page-title { font-size: clamp(2.8rem, 11vw, 4.5rem); }
  .hero-logo-mark { height: 110px; width: 110px; }
  .portfolio-sec { padding: 56px 20px 80px; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-card.p-large { grid-column: span 1; }
  .svc-block { padding: 48px 16px; }
  .svc-grid { grid-template-columns: 1fr; gap: 40px; }
  .svc-grid.flip { direction: ltr; }
  .svc-title { font-size: clamp(1.4rem, 4.5vw, 2.2rem); margin-bottom: 14px; }
  .svc-number { font-size: 0.55rem; margin-bottom: 12px; }
  .svc-text { font-size: 0.78rem; line-height: 1.7; margin-bottom: 20px; }
  .svc-feats { gap: 8px; margin-bottom: 24px; }
  .svc-feats li { font-size: 0.72rem; gap: 10px; }
  .svc-visual { padding-bottom: 24px; min-height: unset; aspect-ratio: 3/2; }
  .svc-metric-val { font-size: clamp(2rem, 7vw, 3rem); }
  .svc-metric-label { font-size: 0.7rem; }
  .contact-wrap { padding: 56px 20px 80px; }
  .contact-layout { grid-template-columns: 1fr; gap: 56px; }
  .process-wrap { padding: 0 20px 56px; }
  .process-grid { grid-template-columns: 1fr; }
  .process-step { border-right: none; border-bottom: 1px solid var(--border); }
  .process-step:last-child { border-bottom: none; }
  .form-row { grid-template-columns: 1fr; }
  .form-field.full { grid-column: span 1; }
  .form-row .form-field:last-child { border-right: none; }
}

/* ══════════════════════════════════════════════════════
   CONTACT MODAL
   ══════════════════════════════════════════════════════ */

.cm-backdrop {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(8, 8, 8, 0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  pointer-events: none; opacity: 0;
}

.cm-backdrop.cm-open {
  pointer-events: all;
  opacity: 1;
}

.cm-card {
  background: #0f0f0f;
  border: 1px solid rgba(240, 236, 228, 0.09);
  border-radius: 22px;
  padding: 48px;
  max-width: 540px; width: 100%;
  position: relative;
  box-shadow: 0 40px 100px rgba(0,0,0,0.65), inset 0 1px 0 rgba(240,236,228,0.05);
}

.cm-close {
  position: absolute; top: 18px; right: 18px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(240, 236, 228, 0.1);
  background: transparent;
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.cm-close:hover {
  color: var(--fg);
  border-color: rgba(240, 236, 228, 0.22);
  background: rgba(240, 236, 228, 0.05);
}

.cm-eyebrow {
  font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); display: block; margin-bottom: 16px;
}

.cm-title {
  font-family: var(--font-d);
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  font-weight: 700; line-height: 1.02;
  letter-spacing: -0.03em; margin-bottom: 12px;
}

.cm-sub {
  font-size: 0.88rem; font-weight: 300;
  color: var(--muted); line-height: 1.65;
  margin-bottom: 36px;
}

.cm-channels { display: flex; flex-direction: column; gap: 11px; }

.cm-channel {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 22px;
  border-radius: 14px;
  border: 1px solid rgba(240, 236, 228, 0.07);
  background: rgba(240, 236, 228, 0.022);
  text-decoration: none; color: var(--fg);
  transition: background 0.38s var(--expo), border-color 0.38s ease,
              transform 0.38s var(--expo), box-shadow 0.38s ease;
}

.cm-channel:hover { transform: translateY(-2px); }

.cm-channel--wa:hover {
  background: rgba(37, 211, 102, 0.07);
  border-color: rgba(37, 211, 102, 0.26);
  box-shadow: 0 10px 36px rgba(37, 211, 102, 0.09);
}

.cm-channel--ig:hover {
  background: rgba(196, 128, 140, 0.07);
  border-color: rgba(196, 128, 140, 0.26);
  box-shadow: 0 10px 36px rgba(196, 128, 140, 0.09);
}

.cm-channel--em:hover {
  background: rgba(232, 168, 74, 0.07);
  border-color: rgba(232, 168, 74, 0.26);
  box-shadow: 0 10px 36px rgba(232, 168, 74, 0.09);
}

.cm-channel-icon {
  width: 50px; height: 50px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.cm-channel--wa .cm-channel-icon { background: rgba(37, 211, 102, 0.1); color: #25D366; }
.cm-channel--ig .cm-channel-icon { background: rgba(196, 128, 140, 0.12); color: var(--accent); }
.cm-channel--em .cm-channel-icon { background: rgba(232, 168, 74, 0.12); color: var(--accent-2); }

.cm-channel-text {
  flex: 1; display: flex; flex-direction: column; gap: 3px;
}

.cm-channel-name { font-size: 0.97rem; font-weight: 500; }
.cm-channel-hint { font-size: 0.78rem; font-weight: 300; color: var(--muted); }

.cm-channel-arrow {
  color: var(--muted); flex-shrink: 0;
  transition: transform 0.38s var(--expo), color 0.3s ease;
}

.cm-channel:hover .cm-channel-arrow { transform: translate(3px, -3px); color: var(--fg); }

@media (max-width: 768px) {
  .cm-card { padding: 32px 22px; border-radius: 18px; }
  .cm-channel { padding: 17px 18px; gap: 15px; }
  .cm-channel-icon { width: 44px; height: 44px; border-radius: 11px; }
}

/* ══════════════════════════════════════════════════════
   CONTACT PAGE — CHANNEL SELECTOR (replaces form)
   ══════════════════════════════════════════════════════ */

.contact-channels-wrap {
  padding: 80px 48px 100px;
  max-width: 920px; margin: 0 auto;
}

.contact-channels-intro {
  margin-bottom: 52px;
}

.contact-channels-intro p {
  font-size: 1rem; font-weight: 300;
  color: var(--muted); line-height: 1.8;
  max-width: 480px;
}

.contact-channels-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}

.contact-channel-card {
  display: flex; flex-direction: column;
  padding: 44px 38px;
  border-radius: 20px;
  border: 1px solid rgba(240, 236, 228, 0.08);
  background: rgba(240, 236, 228, 0.02);
  text-decoration: none; color: var(--fg);
  transition: background 0.45s var(--expo), border-color 0.45s ease,
              transform 0.4s var(--expo), box-shadow 0.45s ease;
}

.contact-channel-card:hover { transform: translateY(-5px); }

.contact-channel-card--wa:hover {
  background: rgba(37, 211, 102, 0.06);
  border-color: rgba(37, 211, 102, 0.22);
  box-shadow: 0 24px 64px rgba(37, 211, 102, 0.07);
}

.contact-channel-card--ig:hover {
  background: rgba(196, 128, 140, 0.06);
  border-color: rgba(196, 128, 140, 0.22);
  box-shadow: 0 24px 64px rgba(196, 128, 140, 0.07);
}

.contact-channel-card--em:hover {
  background: rgba(232, 168, 74, 0.06);
  border-color: rgba(232, 168, 74, 0.22);
  box-shadow: 0 24px 64px rgba(232, 168, 74, 0.07);
}

.ccc-icon {
  width: 60px; height: 60px; border-radius: 17px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 28px; flex-shrink: 0;
}

.contact-channel-card--wa .ccc-icon { background: rgba(37, 211, 102, 0.1); color: #25D366; }
.contact-channel-card--ig .ccc-icon { background: rgba(196, 128, 140, 0.13); color: var(--accent); }
.contact-channel-card--em .ccc-icon { background: rgba(232, 168, 74, 0.13); color: var(--accent-2); }

.ccc-label {
  font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}

.ccc-name {
  font-family: var(--font-d);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1;
  margin-bottom: 14px;
}

.ccc-desc {
  font-size: 0.87rem; font-weight: 300;
  color: var(--muted); line-height: 1.75;
  flex: 1; margin-bottom: 32px;
}

.ccc-action {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--muted);
  transition: color 0.35s ease, gap 0.38s var(--expo);
}

.contact-channel-card--wa:hover .ccc-action { color: #25D366; gap: 13px; }
.contact-channel-card--ig:hover .ccc-action { color: var(--accent); gap: 13px; }
.contact-channel-card--em:hover .ccc-action { color: var(--accent-2); gap: 13px; }

.ccc-action svg { flex-shrink: 0; transition: transform 0.38s var(--expo); }
.contact-channel-card:hover .ccc-action svg { transform: translate(4px, -4px); }

@media (max-width: 1024px) {
  .contact-channels-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .contact-channels-wrap { padding: 52px 20px 72px; }
  .contact-channels-grid { grid-template-columns: 1fr; gap: 14px; }
  .contact-channel-card { padding: 32px 26px; border-radius: 17px; }
  .ccc-icon { width: 50px; height: 50px; border-radius: 13px; margin-bottom: 22px; }
}


/* ══════════════════════════════════════════════════════
   CASE STUDY — CLIENT CARDS (LARGE ALTERNATING)
   ══════════════════════════════════════════════════════ */

.cs-cards {
  max-width: 1300px;
  margin: 0 auto 100px;
  padding: 0 clamp(20px, 5vw, 80px);
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

/* Base card — image left, info right.
   Sticky + per-card top offset + increasing z-index makes each card
   pin in place while the next one slides up and covers it — leaving
   a thin sliver of every earlier card peeking out above, like a
   fanned stack of photos. */
.cs-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "image info";
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  position: sticky;
  border: 1px solid var(--border);
  box-shadow: 0 -16px 50px rgba(0, 0, 0, 0.5);
  will-change: transform;
}

.cs-card:nth-child(1) { top: 96px;  z-index: 1; }
.cs-card:nth-child(2) { top: 118px; z-index: 2; }
.cs-card:nth-child(3) { top: 140px; z-index: 3; }
.cs-card:nth-child(4) { top: 162px; z-index: 4; }
.cs-card:nth-child(5) { top: 184px; z-index: 5; }
.cs-card:nth-child(6) { top: 206px; z-index: 6; }
.cs-card:nth-child(7) { top: 228px; z-index: 7; }

/* Flip card — image right, info left */
.cs-card--flip {
  grid-template-areas: "info image";
}

/* Image half — 4:5 portrait ratio drives the card height */
.cs-card-img {
  grid-area: image;
  overflow: hidden;
  position: relative;
  aspect-ratio: 4 / 5;
}
.cs-card-img-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.95s var(--expo);
}
.cs-card:hover .cs-card-img-bg { transform: scale(1.05); }

/* Showcase video — plays on loop from page load, sits over the
   gradient placeholder and scales gently with the card on hover */
.cs-card-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.95s var(--expo);
}
.cs-card:hover .cs-card-video { transform: scale(1.05); }

/* Info half */
.cs-card-info {
  grid-area: info;
  padding: clamp(36px, 5vw, 72px);
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cs-card-num {
  display: block;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 32px;
}

.cs-card-name {
  font-family: var(--font-d);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 20px;
  color: var(--fg);
  transition: background 0.4s ease, -webkit-text-fill-color 0.4s ease;
}
.cs-card:hover .cs-card-name {
  background: var(--accent-grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cs-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: auto;
  padding-bottom: 40px;
}

.cs-tag {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 5px 12px;
  white-space: nowrap;
  transition: color 0.35s ease, border-color 0.35s ease;
}
.cs-card:hover .cs-tag {
  color: var(--accent);
  border-color: rgba(196, 128, 140, 0.3);
}

.cs-card-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.38s ease, gap 0.45s var(--expo);
}
.cs-card:hover .cs-card-cta { color: var(--fg); gap: 22px; }

.cs-card-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
  transition: border-color 0.38s ease, color 0.38s ease, transform 0.5s var(--expo);
}
.cs-card:hover .cs-card-arrow {
  border-color: var(--accent);
  color: var(--accent);
  transform: rotate(45deg);
}

/* Coming soon */
.cs-card--soon {
  opacity: 0.28;
  cursor: default;
  pointer-events: none;
}

/* Mobile: stack — image on top, info below */
@media (max-width: 768px) {
  .cs-cards { padding: 0 16px; gap: 0; margin-bottom: 70px; }

  .cs-card,
  .cs-card--flip {
    grid-template-columns: 1fr;
    grid-template-areas: "image" "info";
    min-height: auto;
    border-radius: 16px;
  }
  .cs-card-img { aspect-ratio: unset; height: 260px; }
  .cs-card-info { padding: 28px 24px; }
  .cs-card-name { font-size: clamp(1.5rem, 6vw, 2rem); }

  .cs-card:nth-child(1) { top: 64px;  }
  .cs-card:nth-child(2) { top: 80px;  }
  .cs-card:nth-child(3) { top: 96px;  }
  .cs-card:nth-child(4) { top: 112px; }
  .cs-card:nth-child(5) { top: 128px; }
  .cs-card:nth-child(6) { top: 144px; }
  .cs-card:nth-child(7) { top: 160px; }
}


/* ══════════════════════════════════════════════════════
   PORTFOLIO PAGE — INTERACTIONS & ANIMATIONS
   ══════════════════════════════════════════════════════ */

/* Thin accent line that grows from left as user scrolls */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 9999;
  pointer-events: none;
}

/* Specular radial-gradient that follows the cursor on card hover */
.cs-card-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  transition: opacity 0.4s ease;
}

/* ══════════════════════════════════════════════════════
   CASE STUDY — FULL-SCREEN OVERLAY
   ══════════════════════════════════════════════════════ */

.cso {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--bg);
  overflow: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0s;
  pointer-events: none;
  visibility: hidden;
}

.cso.is-open {
  pointer-events: all;
  clip-path: inset(0 0 0% 0);
  overflow-y: auto;
  overflow-x: hidden;
  visibility: visible;
}

/* Sticky top bar — sits at the very top of the full-screen overlay */
.cso-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: calc(var(--nav-h) + var(--safe-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--safe-top) clamp(20px, 5vw, 80px) 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.cso-bar-name {
  font-family: var(--font-d);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.55s var(--expo) 0.25s, transform 0.55s var(--expo) 0.25s;
}
.cso.is-open .cso-bar-name {
  opacity: 1;
  transform: translateY(0);
}

.cso-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.4s var(--expo);
}
.cso-close:hover {
  background: rgba(196, 128, 140, 0.1);
  border-color: rgba(196, 128, 140, 0.4);
  transform: rotate(90deg);
}

/* Hero image — 21:9 wide cinematic banner */
.cso-hero {
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  position: relative;
}
.cso-hero-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform 1.2s var(--expo);
}

.cso.is-open .cso-hero-img {
  transform: scale(1);
}

/* Showcase video — sits alongside the case-study body copy and stays
   in view (sticky) as the visitor scrolls through the sections. Plays
   with sound as soon as the case study opens (see case-study.js). */
.cso-body-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px);
  display: flex;
  align-items: flex-start;
  gap: clamp(28px, 4vw, 64px);
}

.cso-body-layout .cso-body {
  flex: 1; min-width: 0;
  max-width: none;
  margin: 0;
  padding: clamp(40px, 6vw, 80px) 0;
}

.cso-body-media {
  position: sticky;
  top: clamp(96px, 13vh, 150px);
  flex: 0 0 clamp(220px, 25vw, 320px);
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  margin-top: clamp(40px, 6vw, 80px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

.cso-body-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.2s var(--expo);
}
.cso.is-open .cso-body-video { transform: scale(1); }

@media (max-width: 900px) {
  .cso-body-layout { flex-direction: column; }
  /* Hide the sticky showcase video on mobile/tablet — case-study body
     content runs full width without it on smaller screens */
  .cso-body-media { display: none; }
  .cso-body-layout .cso-body { padding-top: 32px; }
}

/* Al Kayed Garage logo — shown at its natural aspect ratio inside the
   wide hero banner instead of being stretched or cropped to fill it.
   The letterbox picks up the artwork's own light background so the
   logo sits cleanly without any harsh edges. */
.cso-hero-img--alkayed {
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #edeff1;
  /* Breathing room around the logo — background-size: contain measures
     against the padding box, so this shrinks the artwork inward
     instead of letting it touch the banner's edges. */
  padding: clamp(40px, 9vw, 140px);
  box-sizing: border-box;
  background-origin: content-box;
  background-clip: content-box;
}

@media (max-width: 768px) {
  .cso-hero { aspect-ratio: 16 / 9; }

  .cso-hero-img--crack {
    background-size: cover;
    background-position: center;
  }
}

/* Overview strip — 4 columns */
.cso-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--border);
}

.cso-ov-cell {
  padding: 28px clamp(20px, 4vw, 60px);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cso-ov-cell:last-child { border-right: none; }

.cso-ov-label {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.cso-ov-val {
  font-family: var(--font-d);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
  line-height: 1.2;
}

@media (max-width: 768px) {
  .cso-overview { grid-template-columns: 1fr 1fr; }
  .cso-ov-cell:nth-child(2) { border-right: none; }
  .cso-ov-cell { padding: 20px; }
}
@media (max-width: 480px) {
  .cso-overview { grid-template-columns: 1fr; }
  .cso-ov-cell { border-right: none; border-bottom: 1px solid var(--border); padding: 16px 20px; }
  .cso-ov-cell:last-child { border-bottom: none; }
}

/* Body — text sections only (gallery lives outside) */
.cso-body {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 60px) clamp(40px, 6vw, 72px);
  display: flex;
  flex-direction: column;
  gap: 52px;
}

.cso-section {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: start;
}

.cso-section-label {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 6px;
  position: sticky;
  top: calc(var(--nav-h) + var(--safe-top) + 16px);
}

.cso-section-content h3 {
  font-family: var(--font-d);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 20px;
  color: var(--fg);
}

.cso-section-content p {
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.85;
  color: rgba(240, 236, 228, 0.72);
  margin-bottom: 20px;
}
.cso-section-content p:last-child { margin-bottom: 0; }

.cso-section-content ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cso-section-content ul li {
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(240, 236, 228, 0.7);
  padding-left: 18px;
  position: relative;
}
.cso-section-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 5px;
  height: 1px;
  background: var(--accent);
}

@media (max-width: 768px) {
  .cso-section {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .cso-section-label {
    position: static;
  }
  .cso-body { gap: 52px; }
}

/* Metrics grid */
.cso-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  margin-top: 28px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.cso-metric {
  padding: 28px 26px;
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cso-metric-val {
  font-family: var(--font-d);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  background: var(--accent-grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cso-metric-label {
  font-size: 0.78rem;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(240, 236, 228, 0.55);
}

@media (max-width: 480px) {
  .cso-metrics { grid-template-columns: 1fr; }
}

/* Mobile-only video block (Crack Restaurant overlay) */
.cso-mobile-media {
  display: none;
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #0a0a0a;
}
.cso-mobile-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 900px) {
  .cso-mobile-media { display: block; }
}

/* Mute toggle button on showcase video */
.cso-mute-btn {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 7px 14px 7px 10px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  z-index: 3;
  white-space: nowrap;
  transition: background 0.2s;
}
.cso-mute-btn:hover { background: rgba(0,0,0,0.75); }
.cso-mute-ico { flex-shrink: 0; }
.cso-mute-btn[data-muted="true"]  .cso-mute-ico--on  { display: none; }
.cso-mute-btn[data-muted="false"] .cso-mute-ico--off { display: none; }

/* Hero iframe preview (Sky Shield) */
.cso-hero--preview {
  aspect-ratio: unset !important;
  overflow: hidden;
  background: #0b1726;
}
.cso-hero-iframe {
  display: block;
  width: 100%;
  height: 75vh;
  min-height: 500px;
  border: none;
  pointer-events: none;
}
@media (max-width: 768px) {
  .cso-hero-iframe { height: 55vh; min-height: 320px; }
}

/* Transparent click-catcher over the iframe — iframes can't bubble
   cross-origin clicks to the parent, so this link intercepts the
   click and opens the real site in a new tab instead. */
.cso-hero-iframe-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 24px;
}

.cso-hero-iframe-hint {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 9px 18px 9px 16px;
  font-size: 0.74rem;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  transition: background 0.25s ease, transform 0.3s var(--expo);
}

.cso-hero-iframe-link:hover .cso-hero-iframe-hint {
  background: rgba(0, 0, 0, 0.82);
  transform: translateY(-2px);
}

/* Live site preview — browser chrome mockup */
.cso-preview-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.08);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 10px 16px;
}
.cso-preview-dots { display: flex; gap: 6px; flex-shrink: 0; }
.cso-preview-dots span { width: 10px; height: 10px; border-radius: 50%; }
.cso-preview-dots span:nth-child(1) { background: #ff5f56; }
.cso-preview-dots span:nth-child(2) { background: #febc2e; }
.cso-preview-dots span:nth-child(3) { background: #28c840; }
.cso-preview-urlbar {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 0.72rem;
  color: rgba(240,236,228,0.5);
  text-align: center;
}
.cso-preview-ext {
  color: rgba(240,236,228,0.4);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: color 0.2s;
}
.cso-preview-ext:hover { color: var(--accent); }
.cso-preview-viewport {
  width: 100%;
  height: 520px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.cso-preview-viewport iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
@media (max-width: 768px) {
  .cso-preview-viewport { height: 320px; }
}

/* Gallery — full-bleed section outside body column */
.cso-gallery-wrap {
  border-top: 1px solid var(--border);
  padding: 0 clamp(20px, 5vw, 60px) clamp(60px, 8vw, 100px);
}

.cso-gallery-label {
  display: block;
  padding: 28px 0 22px;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.cso-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.cso-gallery-item {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  position: relative;
}

.cso-gallery-item-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.65s var(--expo);
}
.cso-gallery-item:hover .cso-gallery-item-bg { transform: scale(1.05); }

/* Alternating wide cells: 1st and 5th span 2 columns */
.cso-gallery-item:nth-child(1) { grid-column: span 2; aspect-ratio: 2 / 1; }
.cso-gallery-item:nth-child(5) { grid-column: span 2; aspect-ratio: 2 / 1; }

@media (max-width: 640px) {
  .cso-gallery { grid-template-columns: 1fr 1fr; gap: 4px; }
  .cso-gallery-item { aspect-ratio: 1; }
  .cso-gallery-item:nth-child(1),
  .cso-gallery-item:nth-child(5) { grid-column: span 2; aspect-ratio: 2 / 1; }
}