/* =====================================================
   WISE VISUALS — EDITORIAL MAGAZINE DESIGN SYSTEM
   v2. Hero with device mockup, issue markers,
   alternating rows, editorial typography.
   ===================================================== */

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

:root {
  /* Brand */
  --orange: #E85002;
  --orange-bright: #F16001;
  --orange-deep: #C10801;
  --sand: #D9C3AB;

  /* Surface */
  --bg: #050505;
  --bg-2: #0a0a0a;
  --bg-3: #111111;
  --bg-warm: #0d0907;

  /* Ink */
  --ink: #F9F9F9;
  --ink-dim: rgba(249, 249, 249, 0.62);
  --ink-mute: rgba(249, 249, 249, 0.42);
  --ink-faint: rgba(249, 249, 249, 0.22);
  --ink-ghost: rgba(249, 249, 249, 0.08);
  --hairline: rgba(249, 249, 249, 0.10);
  --hairline-strong: rgba(249, 249, 249, 0.20);

  /* Type — Archivo Black (display) + Futura PT (body, italic accents)
     Futura PT is a commercial font (Adobe Fonts). Stack: Futura PT → Jost
     (Google Fonts, closest free Futura clone) → macOS Futura → sans fallback.
     If you load Futura PT via Adobe Fonts later, it takes over automatically. */
  --display: 'Archivo Black', 'Futura PT', 'Futura', 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Futura PT', 'Jost', 'Futura', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Futura PT', 'Jost', 'Futura', 'Helvetica Neue', Arial, sans-serif;

  /* Radii */
  --r: 14px;
  --r-lg: 20px;
  --r-pill: 9999px;

  /* Layout */
  --max: 1240px;
  --gutter: 1.5rem;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
  font-feature-settings: 'ss01' on, 'kern' on;
}

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

::selection { background: var(--orange); color: #fff; }

/* =====================================================
   TYPOGRAPHY ATOMS
   ===================================================== */

.display {
  font-family: var(--display); font-weight: normal;
  letter-spacing: -0.035em;
  line-height: 0.95;
  text-wrap: balance;
}
.display .it {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.display .accent { color: var(--orange); }

.h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
.h2 { font-size: clamp(1.8rem, 3.8vw, 3rem); }
.h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--orange);
}
/* Decoration nuked — bewow-level restraint */
.eyebrow .rule { display: none; }
.eyebrow .dot { display: none; }

.kicker {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--orange);
  letter-spacing: -0.005em;
}

.lede {
  font-size: 1.15rem;
  color: var(--ink-dim);
  line-height: 1.65;
  max-width: 56ch;
}
.lede em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
  font-weight: 400;
}

/* =====================================================
   GRAIN + CURSOR + REVEAL
   ===================================================== */

.grain-overlay {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 100; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}

#cursor-dot {
  position: fixed; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,80,2,0.95) 0%, rgba(241,96,1,0.2) 60%, transparent 100%);
  mix-blend-mode: screen;
  pointer-events: none; z-index: 200;
  transform: translate(-50%,-50%);
  opacity: 0; transition: opacity 0.25s;
}

.reveal {
  opacity: 0; transform: translateY(28px); filter: blur(14px);
  transition:
    opacity 0.9s cubic-bezier(0.22,1,0.36,1),
    transform 0.9s cubic-bezier(0.22,1,0.36,1),
    filter 0.9s cubic-bezier(0.22,1,0.36,1);
}
.reveal.in { opacity: 1; transform: none; filter: blur(0); }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.18s; }
.reveal.d3 { transition-delay: 0.28s; }
.reveal.d4 { transition-delay: 0.38s; }
.reveal.d5 { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* =====================================================
   BUTTONS
   ===================================================== */

.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--sans); font-size: 0.88rem; font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer; text-decoration: none; border: none;
  transition: transform 0.18s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
  border-radius: var(--r-pill);
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 14px; height: 14px; stroke-width: 2; }

.btn-orange {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 12px 32px rgba(232, 80, 2, 0.28);
}
.btn-orange:hover { background: #ff5b08; box-shadow: 0 16px 44px rgba(232, 80, 2, 0.42); }

.btn-line {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--hairline-strong);
}
.btn-line:hover { border-color: var(--ink); background: rgba(255,255,255,0.04); }

.btn-text {
  color: var(--ink);
  padding: 0.4rem 0;
  border-radius: 0;
  border-bottom: 1px solid var(--orange);
}
.btn-text:hover { transform: none; color: var(--orange); }

/* =====================================================
   NAVBAR
   ===================================================== */

#navbar-wrap {
  position: fixed; top: 1.25rem; left: 50%; transform: translateX(-50%);
  width: calc(100% - 2rem); max-width: var(--max); z-index: 50;
  opacity: 0; animation: navIn 0.7s cubic-bezier(0.22,1,0.36,1) 0.2s forwards;
}
@keyframes navIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
#navbar {
  height: 58px;
  border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 0.9rem 0 1.5rem;
  background: rgba(10, 10, 10, 0.62);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--hairline);
  transition: background 0.3s, border-color 0.3s;
}
#navbar.scrolled {
  background: rgba(10, 10, 10, 0.85);
  border-color: var(--hairline-strong);
}
.nav-logo {
  display: inline-flex; align-items: center;
  text-decoration: none;
}
.nav-logo img { height: 26px; width: auto; }
.nav-links {
  display: flex; gap: 2rem; list-style: none; align-items: center;
}
.nav-links a {
  color: var(--ink-mute);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative; padding: 0.25rem 0;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--ink); font-weight: 500; }
.nav-links a.active::after {
  content: ''; position: absolute; bottom: -3px; left: 0; right: 0;
  height: 1px; background: var(--orange);
}
.nav-cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--orange); color: #fff; border-radius: var(--r-pill);
  padding: 0.55rem 1.15rem;
  font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; transition: background 0.2s, transform 0.15s;
}
.nav-cta:hover { background: #ff5b08; transform: scale(1.02); }
.nav-cta svg { width: 12px; height: 12px; stroke-width: 2.5; }
.nav-burger {
  display: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: transparent; border: 1px solid var(--hairline-strong);
  cursor: pointer; align-items: center; justify-content: center;
  color: var(--ink);
}
.nav-burger svg { width: 18px; height: 18px; }

@media (max-width: 920px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-burger { display: inline-flex; }
}

#mobile-menu {
  position: fixed; inset: 0; z-index: 49;
  background: rgba(0,0,0,0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
  display: flex; flex-direction: column; justify-content: center;
  padding: 6rem 2rem 3rem;
}
#mobile-menu.open { opacity: 1; pointer-events: all; }
#mobile-menu ul { list-style: none; display: flex; flex-direction: column; gap: 0.1rem; }
#mobile-menu li a {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 1rem 0;
  font-family: var(--display); font-weight: normal;
  font-size: 1.6rem; letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  transition: color 0.2s, padding 0.2s;
}
#mobile-menu li a::before {
  content: attr(data-num);
  font-family: var(--serif); font-style: italic;
  font-size: 0.85rem; color: var(--orange);
  width: 26px; flex-shrink: 0;
}
#mobile-menu li a:hover { color: var(--orange); padding-left: 0.5rem; }
#mobile-menu li a.active { color: var(--orange); }
.mobile-cta-row {
  margin-top: 2.5rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.mobile-cta-row a.primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  background: var(--orange); color: #fff;
  border-radius: var(--r-pill); padding: 1.1rem 1.5rem;
  font-weight: 500; text-decoration: none;
}
.mobile-cta-row .contact-line {
  font-size: 0.85rem; color: var(--ink-mute); text-align: center;
}
.mobile-cta-row .contact-line a { color: var(--ink); text-decoration: none; }

/* =====================================================
   HERO — EDITORIAL SPLIT WITH DEVICE MOCKUP
   ===================================================== */

#hero {
  position: relative;
  min-height: 100vh;
  padding: 7rem 1.5rem 5rem;
  overflow: hidden;
  isolation: isolate;
  display: flex; align-items: center;
}

/* Brand-gradient ambient backdrop */
#hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 18% 70%, rgba(232, 80, 2, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 80% 70% at 0% 100%, rgba(193, 8, 1, 0.45) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 80% 0%, rgba(241, 96, 1, 0.18) 0%, transparent 70%),
    var(--bg-warm);
}
#hero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.5) 100%);
}

.hero-grid {
  max-width: var(--max); margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 4rem; align-items: center;
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 3.5rem; }
}

.hero-issue {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 2.2rem;
  opacity: 0; transform: translateY(12px);
  animation: heroIn 0.8s cubic-bezier(0.22,1,0.36,1) 0.35s forwards;
}
.hero-issue .h-rule { width: 32px; height: 1px; background: var(--orange); }
.hero-issue .h-edition { color: var(--orange); }

@keyframes heroIn {
  to { opacity: 1; transform: none; }
}

.hero-title {
  font-family: var(--display); font-weight: normal;
  font-size: clamp(2.4rem, 5.2vw, 4.2rem);
  letter-spacing: -0.035em; line-height: 0.92;
  color: var(--ink);
  margin-bottom: 1.8rem;
  text-wrap: balance;
  opacity: 0; transform: translateY(16px); filter: blur(8px);
  animation: heroIn2 1s cubic-bezier(0.22,1,0.36,1) 0.5s forwards;
}
@keyframes heroIn2 {
  to { opacity: 1; transform: none; filter: blur(0); }
}
.hero-title .visuals {
  font-family: var(--serif); font-style: italic;
  font-weight: 400; letter-spacing: -0.01em;
  color: var(--ink);
  margin-right: 0.04em;
}
.hero-title .accent { color: var(--orange); }
.hero-title .sub-line {
  display: block;
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin-top: 0.6em;
  color: var(--ink);
}
.hero-title .sub-line .small-mark {
  color: var(--orange);
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 0.85em;
  letter-spacing: -0.005em;
}

.hero-sub {
  font-size: 1.05rem; color: var(--ink-dim);
  line-height: 1.65; max-width: 38rem;
  margin-bottom: 2.5rem;
  opacity: 0; transform: translateY(12px);
  animation: heroIn 0.8s ease 0.75s forwards;
}
.hero-sub em {
  font-family: var(--serif); font-style: italic;
  color: var(--ink); font-weight: 400;
}

.hero-ctas {
  display: flex; gap: 0.75rem; flex-wrap: wrap;
  opacity: 0;
  animation: heroIn 0.8s ease 0.95s forwards;
}

.hero-tagbar {
  margin-top: 3.5rem;
  display: flex; gap: 1.5rem; align-items: center;
  font-size: 0.74rem; color: var(--ink-mute);
  letter-spacing: 0.16em; text-transform: uppercase;
  flex-wrap: wrap;
  opacity: 0;
  animation: heroIn 0.8s ease 1.15s forwards;
}
.hero-tagbar .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--orange); opacity: 0.7; }

/* =====================================================
   HERO — DEVICE MOCKUP
   ===================================================== */

.hero-device-wrap {
  position: relative;
  display: flex; justify-content: center;
  perspective: 1800px;
  opacity: 0;
  animation: deviceIn 1.2s cubic-bezier(0.22,1,0.36,1) 0.6s forwards;
}
@keyframes deviceIn {
  from { opacity: 0; transform: translateY(40px) rotateY(-12deg); }
  to { opacity: 1; transform: translateY(0) rotateY(0); }
}
/* ===========================================================
   iPhone mockup — vertical 9:19.5, ready for reel <video>
   =========================================================== */
.hero-device {
  width: 100%; max-width: 260px;
  aspect-ratio: 9 / 19.5;
  border-radius: 44px;
  background: linear-gradient(155deg, #2c2c2c 0%, #060606 50%, #1a1a1a 100%);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 80px 140px rgba(0,0,0,0.75),
    0 40px 80px rgba(193, 8, 1, 0.22),
    0 10px 30px rgba(0,0,0,0.55),
    inset 0 1.5px 0 rgba(255,255,255,0.10),
    inset 0 -1.5px 0 rgba(0,0,0,0.5);
  padding: 9px;
  transform: rotate(-4deg) translateY(8px);
  position: relative;
  transition: transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.hero-device:hover { transform: rotate(-1deg) translateY(0) scale(1.02); }

/* Side hardware buttons (subtle hints) */
.hero-device .btn-silent,
.hero-device .btn-vol-up,
.hero-device .btn-vol-down,
.hero-device .btn-power {
  position: absolute;
  background: linear-gradient(to right, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
  pointer-events: none;
  border-radius: 1.5px;
}
/* Left side: silent + volume up + volume down */
.hero-device .btn-silent  { left: -2px; top: 12%;  width: 3px; height: 28px; }
.hero-device .btn-vol-up  { left: -2px; top: 19%;  width: 3px; height: 42px; }
.hero-device .btn-vol-down{ left: -2px; top: 27%;  width: 3px; height: 42px; }
/* Right side: power button (sleep/wake) */
.hero-device .btn-power {
  right: -2px; top: 17%;
  width: 3px; height: 60px;
  background: linear-gradient(to left, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
  border-radius: 0 1.5px 1.5px 0;
}

/* Screen — the inner display area */
.hero-device-screen {
  width: 100%; height: 100%;
  border-radius: 36px;
  background: #050505;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(0,0,0,0.5);
}

/* Dynamic Island */
.hero-device .island {
  position: absolute;
  top: 11px; left: 50%; transform: translateX(-50%);
  width: 88px; height: 26px;
  background: #050505;
  border-radius: 14px;
  z-index: 4;
  box-shadow:
    inset 0 0 0 0.5px rgba(255,255,255,0.04),
    0 0 0 1px rgba(0,0,0,0.6);
}

/* Status bar — "9:41" + signal icon */
.hero-device-screen .status {
  position: absolute;
  top: 13px; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 22px;
  font-family: var(--sans);
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.95);
  z-index: 5;
  pointer-events: none;
}
.hero-device-screen .status .signals {
  display: flex; gap: 4px; align-items: center;
  opacity: 0.88;
}
.hero-device-screen .status .signals svg { display: block; }

/* ===========================================================
   REEL SLOT
   Replace .reel-placeholder with a <video> tag later:
   <video autoplay loop muted playsinline class="reel-video">
     <source src="assets/reels/your-reel.mp4" type="video/mp4">
   </video>
   =========================================================== */
.reel-placeholder,
.reel-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
}
.reel-placeholder {
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(232, 80, 2, 0.22), transparent 65%),
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(193, 8, 1, 0.28), transparent 70%),
    linear-gradient(180deg, #161616 0%, #050505 60%);
  display: flex; align-items: center; justify-content: center;
}
.reel-video { object-fit: cover; }

/* Center play affordance */
.reel-play {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative; z-index: 2;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1),
              background 0.3s ease,
              border-color 0.3s ease;
  padding: 0;
}
.hero-device:hover .reel-play {
  background: rgba(232, 80, 2, 0.35);
  border-color: rgba(232, 80, 2, 0.65);
  transform: scale(1.08);
}
.reel-play svg {
  width: 22px; height: 22px;
  fill: rgba(255, 255, 255, 0.96);
  margin-left: 3px;  /* visually center the triangle */
}

/* Reels-style overlay UI at the bottom */
.reel-ui {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 14px 14px 18px;
  display: flex; justify-content: space-between; align-items: flex-end;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.45), transparent 75%);
}
.reel-meta {
  display: flex; flex-direction: column; gap: 4px;
  max-width: 60%;
}
.reel-meta .username {
  font-family: var(--sans);
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.96);
  letter-spacing: -0.005em;
}
.reel-meta .username::before { content: '@'; opacity: 0.6; }
.reel-meta .caption {
  font-family: var(--sans);
  font-size: 9.5px; line-height: 1.35;
  color: rgba(255,255,255,0.78);
}
.reel-meta .caption em {
  font-family: var(--serif); font-style: italic;
  color: rgba(255,255,255,0.92);
}

.reel-actions {
  display: flex; flex-direction: column; gap: 14px;
  align-items: center;
}
.reel-actions .action {
  width: 22px; height: 22px;
  color: rgba(255, 255, 255, 0.92);
  display: inline-flex; align-items: center; justify-content: center;
}
.reel-actions .action svg { width: 100%; height: 100%; fill: currentColor; }
.reel-actions .label {
  font-family: var(--sans);
  font-size: 8.5px; font-weight: 600;
  color: rgba(255,255,255,0.85);
  margin-top: -8px;
}

/* Screen reflection — subtle highlight at top */
.hero-device-screen::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 70%);
  pointer-events: none;
  z-index: 4;
  border-radius: 36px 36px 0 0;
}

/* Ground shadow */
.device-shelf {
  position: absolute;
  bottom: -2.5rem; left: -1rem; right: -1rem;
  height: 50px;
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(0,0,0,0.85), transparent 70%);
  filter: blur(10px);
  z-index: -1;
}

/* Responsive */
@media (max-width: 980px) {
  .hero-device-wrap { order: -1; }
  .hero-device { max-width: 240px; transform: rotate(-2deg); }
}
@media (max-width: 540px) {
  .hero-device { max-width: 215px; }
  .reel-meta .username { font-size: 10px; }
  .reel-meta .caption { font-size: 8.5px; }
}

/* Scroll cue */
.hero-scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  z-index: 5; font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute);
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.5rem;
  opacity: 0; animation: heroIn 0.8s ease 1.4s forwards;
}
.hero-scroll .vline { width: 1px; height: 30px; background: var(--ink-faint); }
@media (max-width: 980px) { .hero-scroll { display: none; } }

/* =====================================================
   TICKER
   ===================================================== */

#ticker {
  background: var(--bg); overflow: hidden; position: relative; height: 54px;
  display: flex; align-items: center;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.ticker-track {
  display: flex; gap: 0; white-space: nowrap;
  animation: tickerScroll 38s linear infinite;
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.ticker-item {
  display: inline-flex; align-items: center; gap: 1.5rem; padding: 0 2rem;
  font-size: 0.74rem; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-faint);
}
.ticker-item em {
  font-family: var(--serif); font-style: italic;
  color: var(--orange); letter-spacing: 0;
  font-size: 0.86rem; font-weight: 400; text-transform: none;
}
.ticker-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--orange); opacity: 0.6; }

/* =====================================================
   SECTION SHELL + ISSUE MARKER
   ===================================================== */

.section {
  position: relative;
  padding: 7rem 1.5rem;
}
.section-tight { padding: 4.5rem 1.5rem; }
.section-loose { padding: 10rem 1.5rem; }
.section-inner { max-width: var(--max); margin: 0 auto; position: relative; }

/* Magazine-style faded numbers — KILLED for cleaner look (bewow-grade) */
.issue-mark { display: none; }
.issue-mark.tl { top: -0.15em; left: -0.15em; }
.issue-mark.tr { top: -0.15em; right: -0.15em; }
.issue-mark.br { bottom: -0.05em; right: -0.05em; }

.section-head {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: end;
  margin-bottom: 4rem;
  position: relative; z-index: 1;
}
@media (max-width: 880px) { .section-head { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; } }
.section-head .head-left h2 { margin-top: 1.2rem; }
.section-head .head-right { font-size: 0.95rem; color: var(--ink-dim); line-height: 1.7; max-width: 32rem; }
.section-head .head-right em { font-family: var(--serif); font-style: italic; color: var(--ink); }

/* =====================================================
   WHY — EDITORIAL ARGUMENT
   ===================================================== */

.argument {
  display: grid; grid-template-columns: 5fr 4fr;
  gap: 5rem; align-items: start;
  position: relative; z-index: 1;
}
@media (max-width: 880px) { .argument { grid-template-columns: 1fr; gap: 3rem; } }

.argument-lede p {
  font-family: var(--sans);
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--ink-dim);
  margin-bottom: 1.4rem;
}
.argument-lede p strong { color: var(--ink); font-weight: 600; }
/* drop the editorial drop-cap — cleaner without */

.argument-points {
  display: flex; flex-direction: column;
}
.argument-point {
  display: grid; grid-template-columns: auto 1fr; gap: 1.2rem;
  padding: 1.8rem 0;
  border-top: 1px solid var(--hairline);
}
.argument-point:last-child { border-bottom: 1px solid var(--hairline); }
.argument-point .ap-num {
  font-family: var(--display);
  font-size: 1.1rem; line-height: 1;
  color: var(--orange);
  width: 36px;
}
.argument-point h4 {
  font-size: 1.1rem; font-weight: 600;
  color: var(--ink); margin-bottom: 0.5rem;
  letter-spacing: -0.005em;
}
.argument-point p {
  font-size: 0.98rem; color: var(--ink-dim);
  line-height: 1.7;
}

/* =====================================================
   SPLIT BAR — visual 70/30 distribution
   ===================================================== */
.split-bar {
  max-width: var(--max); margin: 0 auto 4rem;
  display: grid; grid-template-columns: 7fr 3fr;
  gap: 10px;
  position: relative; z-index: 1;
}
.split-seg {
  position: relative;
  padding: 2rem 1.8rem;
  border-radius: var(--r-card);
  display: flex; flex-direction: column; gap: 0.6rem;
}
.split-seg.social {
  background: linear-gradient(135deg, rgba(232,80,2,0.16), rgba(193,8,1,0.06) 75%, rgba(0,0,0,0.1));
  border: 1px solid rgba(232,80,2,0.3);
}
.split-seg.listing {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hairline-strong);
}
.split-tag {
  display: inline-flex; align-items: baseline; gap: 0.6rem;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute);
}
.split-tag .pct {
  font-family: var(--display);
  font-size: 1.4rem; letter-spacing: -0.02em;
  color: var(--ink);
}
.split-seg.social .split-tag .pct { color: var(--orange); }
.split-headline {
  font-family: var(--display); font-weight: normal;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  letter-spacing: -0.025em; line-height: 1.1;
  color: var(--ink);
}
.split-desc {
  font-size: 0.95rem;
  color: var(--ink-dim);
  line-height: 1.6;
  max-width: 28rem;
}
@media (max-width: 720px) {
  .split-bar { grid-template-columns: 1fr; gap: 8px; }
  .split-seg { padding: 1.5rem 1.3rem; }
}

/* =====================================================
   ALTERNATING CASE ROWS — portfolio teaser
   ===================================================== */

.cases {
  display: flex; flex-direction: column; gap: 6rem;
  position: relative; z-index: 1;
}
.case-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.case-row.reverse { direction: rtl; }
.case-row.reverse > * { direction: ltr; }
.case-img-wrap {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-3);
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.case-img-wrap:hover { transform: scale(1.04); }
.case-img-wrap .case-img {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(232,80,2,0.18), rgba(193,8,1,0.06) 50%, rgba(0,0,0,0.1)),
    linear-gradient(45deg, #131313 25%, #181818 25%, #181818 50%, #131313 50%, #131313 75%, #181818 75%);
  background-size: cover, 28px 28px;
  transition: transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
/* Image stays static — only the frame grows */
.case-img-wrap:hover .case-img { transform: none; }
.case-img-wrap .case-placeholder {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-family: var(--serif); font-style: italic;
  color: var(--ink-mute); font-size: 1.05rem; text-align: center;
}
.case-img-wrap .case-tag {
  position: absolute; top: 1.2rem; left: 1.2rem;
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  padding: 0.28rem 0.7rem; border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
}
.case-img-wrap .case-year {
  position: absolute; top: 1.2rem; right: 1.2rem;
  font-size: 0.7rem; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
}

.case-body .kicker { display: inline-block; margin-bottom: 0.6rem; }
.case-body h3 {
  font-family: var(--display); font-weight: normal;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  letter-spacing: -0.025em; line-height: 1.02;
  color: var(--ink); margin-bottom: 1rem;
}
.case-body h3 .it { font-family: var(--serif); font-style: italic; font-weight: 400; }
.case-body .case-meta { font-size: 0.78rem; color: var(--ink-mute); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.4rem; }
.case-body p { font-size: 1rem; color: var(--ink-dim); line-height: 1.7; margin-bottom: 1.8rem; max-width: 30rem; }
.case-body .case-stats {
  display: flex; gap: 2.5rem; margin: 1.8rem 0;
  padding: 1.2rem 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.case-body .case-stat .num {
  font-family: var(--display); font-weight: normal;
  font-size: 1.6rem; letter-spacing: -0.025em; color: var(--ink); line-height: 1;
}
.case-body .case-stat .num em { font-family: var(--serif); font-style: italic; color: var(--orange); font-weight: 400; }
.case-body .case-stat .lbl { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin-top: 0.3rem; }

@media (max-width: 880px) {
  .case-row { grid-template-columns: 1fr; gap: 1.5rem; }
  .case-row.reverse { direction: ltr; }
}

/* =====================================================
   SERVICES — EDITORIAL LIST (not cards)
   ===================================================== */

.services-list {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--hairline);
  position: relative; z-index: 1;
}
.service-row {
  display: grid;
  grid-template-columns: 80px 1.4fr 2.6fr auto;
  gap: 2rem;
  align-items: center;
  padding: 2rem 0;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  transition: padding 0.3s ease, background 0.3s ease;
  position: relative;
}
.service-row:hover {
  padding-left: 1.2rem; padding-right: 1.2rem;
  background: rgba(232, 80, 2, 0.04);
}
.service-row::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--orange);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.4s ease;
}
.service-row:hover::after { transform: scaleY(1); }

.service-row .sr-num {
  font-family: var(--serif); font-style: italic;
  font-size: 2rem; color: var(--orange);
  line-height: 1;
}
.service-row .sr-title {
  font-family: var(--sans); font-weight: 500;
  font-size: 1.4rem; letter-spacing: -0.02em; color: var(--ink);
}
.service-row .sr-desc {
  font-size: 0.92rem; color: var(--ink-dim); line-height: 1.65;
  max-width: 38rem;
}
.service-row .sr-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-dim);
  transition: all 0.3s;
}
.service-row:hover .sr-arrow {
  background: var(--orange); border-color: var(--orange); color: #fff;
  transform: translateX(4px);
}
.service-row .sr-arrow svg { width: 14px; height: 14px; }
@media (max-width: 880px) {
  .service-row { grid-template-columns: 50px 1fr; gap: 1rem; padding: 1.5rem 0; }
  .service-row .sr-desc { grid-column: 1 / -1; padding-left: calc(50px + 1rem); margin-top: -0.5rem; }
  .service-row .sr-arrow { display: none; }
}

/* =====================================================
   REELS — 3 converging tiles (side ones lean toward center)
   ===================================================== */

.reels-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  max-width: var(--max); margin: 0 auto;
  position: relative; z-index: 1;
  perspective: 1400px;
}
.reel-tile {
  flex-shrink: 0;
  width: 244px;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;
  background: var(--bg-3);
  border: 1px solid var(--hairline-strong);
  cursor: pointer;
  position: relative;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.7),
    0 20px 50px rgba(193, 8, 1, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s;
}
/* Left tile — leans right (toward center) */
.reel-tile:nth-child(1) {
  transform: rotate(-5deg) translateY(28px) scale(0.92);
  transform-origin: bottom right;
}
/* Middle tile — slightly larger, stands tall */
.reel-tile:nth-child(2) {
  z-index: 2;
  width: 268px;
}
/* Right tile — leans left (toward center) */
.reel-tile:nth-child(3) {
  transform: rotate(5deg) translateY(28px) scale(0.92);
  transform-origin: bottom left;
}
.reel-tile:hover {
  transform: rotate(0deg) translateY(0) scale(1.02) !important;
  z-index: 3;
  box-shadow:
    0 60px 130px rgba(0, 0, 0, 0.85),
    0 30px 70px rgba(232, 80, 2, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
@media (max-width: 880px) {
  .reels-grid { gap: 14px; }
  .reel-tile { width: 180px; }
  .reel-tile:nth-child(2) { width: 200px; }
}
@media (max-width: 540px) {
  .reels-grid { gap: 8px; }
  .reel-tile { width: 130px; border-radius: 16px; }
  .reel-tile:nth-child(2) { width: 148px; }
  .reel-tile:nth-child(1) { transform: rotate(-4deg) translateY(20px) scale(0.92); }
  .reel-tile:nth-child(3) { transform: rotate(4deg) translateY(20px) scale(0.92); }
}
.reel-tile .reel-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 80% at 30% 20%, rgba(232,80,2,0.2), transparent 60%),
    linear-gradient(180deg, #131313, #0a0a0a);
}
.reel-tile .reel-num {
  position: absolute; top: 1rem; left: 1rem;
  font-family: var(--serif); font-style: italic;
  font-size: 1.4rem; color: var(--ink); z-index: 2;
}
.reel-tile .reel-cap {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1.4rem 1rem 1rem;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  z-index: 2;
}
.reel-tile .reel-cap-title { font-size: 0.86rem; color: var(--ink); font-weight: 500; margin-bottom: 0.2rem; }
.reel-tile .reel-cap-sub { font-size: 0.7rem; color: var(--ink-mute); }
.reel-tile .reel-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  opacity: 0; transition: opacity 0.3s;
}
.reel-tile:hover .reel-play { opacity: 1; }
.reel-tile .reel-play svg { width: 16px; height: 16px; }

/* =====================================================
   STATS BAR + INLINE QUOTE
   ===================================================== */

#stats {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 4rem 1.5rem;
  background: var(--bg);
}
.stats-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
}
@media (max-width: 720px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } }
.stat {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding-left: 1.5rem;
  border-left: 1px solid var(--hairline-strong);
}
.stat .stat-num {
  font-family: var(--display); font-weight: normal;
  font-size: clamp(2.6rem, 5vw, 4rem);
  letter-spacing: -0.04em; line-height: 1;
  color: var(--ink);
}
.stat .stat-num em { color: var(--orange); font-weight: inherit; }
.stat .stat-lbl {
  font-size: 0.74rem; color: var(--ink-mute);
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-top: 0.7rem;
}

/* Pull quote — inline editorial */
.pullquote {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 2fr;
  gap: 3rem; align-items: start;
  padding: 5rem 1.5rem;
}
@media (max-width: 720px) { .pullquote { grid-template-columns: 1fr; padding: 4rem 1.5rem; } }
.pullquote .pq-side {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding-top: 1rem;
}
.pullquote .pq-mark {
  font-family: var(--serif); font-style: italic;
  font-size: 6rem; line-height: 0.4;
  color: var(--orange);
}
.pullquote .pq-author { font-size: 0.95rem; font-weight: 500; color: var(--ink); margin-top: 1.5rem; }
.pullquote .pq-role { font-size: 0.8rem; color: var(--ink-mute); }
.pullquote blockquote {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.3; color: var(--ink);
  letter-spacing: -0.005em;
}
.pullquote blockquote .accent { color: var(--orange); }

/* =====================================================
   FINAL CTA — left-aligned, brand gradient
   ===================================================== */

.final-cta {
  position: relative;
  padding: 8rem 1.5rem 9rem;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 60% at 0% 100%, rgba(232,80,2,0.35), transparent 60%),
    radial-gradient(ellipse 50% 70% at 100% 0%, rgba(193,8,1,0.18), transparent 65%),
    var(--bg-warm);
}
.final-cta-inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 4rem; align-items: end;
}
@media (max-width: 880px) { .final-cta-inner { grid-template-columns: 1fr; gap: 2rem; } }
.final-cta h2 {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  margin: 1rem 0 1.6rem;
}
.final-cta-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 2rem; }
.final-cta .cta-side {
  font-size: 0.95rem; color: var(--ink-dim); line-height: 1.7;
  padding-bottom: 0.5rem;
}
.final-cta .cta-side em { font-family: var(--serif); font-style: italic; color: var(--ink); }
.final-cta .cta-side .cta-meta {
  margin-top: 1.5rem;
  display: flex; flex-direction: column; gap: 0.4rem;
  font-size: 0.85rem;
}
.final-cta .cta-side .cta-meta span { color: var(--ink-mute); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.7rem; }
.final-cta .cta-side .cta-meta a { color: var(--ink); text-decoration: none; transition: color 0.2s; }
.final-cta .cta-side .cta-meta a:hover { color: var(--orange); }

/* =====================================================
   PAGE HERO (inner pages)
   ===================================================== */

.page-hero {
  position: relative;
  padding: 7.5rem 1.5rem 3rem;
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 880px) {
  .page-hero { padding: 6rem 1.5rem 2.5rem; }
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(232, 80, 2, 0.16), transparent 60%),
    radial-gradient(ellipse 60% 70% at 0% 100%, rgba(193, 8, 1, 0.1), transparent 60%);
}
.page-hero-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: 3rem; align-items: end;
}
@media (max-width: 880px) { .page-hero-grid { grid-template-columns: 1fr; gap: 1.5rem; } }
.page-hero h1 { margin-top: 0.7rem; }
.page-hero-meta { padding-bottom: 0.2rem; }
.page-hero-meta p {
  font-size: 0.95rem; color: var(--ink-dim); line-height: 1.65;
  max-width: 26rem;
}
.page-hero-meta p em { font-family: var(--serif); font-style: italic; color: var(--ink); }

/* =====================================================
   ABOUT STORY + PRINCIPLES
   ===================================================== */

.story {
  max-width: 760px; margin: 0 auto;
  position: relative; z-index: 1;
}
.story p {
  font-family: var(--sans);
  font-size: 1.15rem; color: var(--ink-dim);
  line-height: 1.8; margin-bottom: 1.4rem;
}
.story p em { font-family: var(--serif); font-style: italic; color: var(--ink); font-weight: 400; }
.story p:first-of-type::first-letter {
  float: left;
  font-family: var(--serif); font-style: italic;
  font-size: 5rem; line-height: 0.9;
  color: var(--orange);
  padding: 0.3rem 0.8rem 0 0;
}
.story-pull {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  color: var(--ink); line-height: 1.35;
  margin: 3rem 0; padding: 0 0 0 2rem;
  border-left: 2px solid var(--orange);
  letter-spacing: -0.005em;
}

.principles {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
@media (max-width: 880px) { .principles { grid-template-columns: 1fr; } }
.principle {
  background: var(--bg);
  padding: 3rem 2rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.principle .p-roman {
  font-family: var(--serif); font-style: italic;
  font-size: 1.4rem; color: var(--orange); letter-spacing: 0;
}
.principle h3 { font-size: 1.4rem; font-weight: 500; color: var(--ink); letter-spacing: -0.015em; line-height: 1.15; }
.principle p { font-size: 0.95rem; color: var(--ink-dim); line-height: 1.75; }

/* Founder */
.founder-block {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 4rem; align-items: center;
}
@media (max-width: 880px) { .founder-block { grid-template-columns: 1fr; gap: 2.5rem; } }
.founder-portrait {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 30% 30%, rgba(232,80,2,0.22), transparent 70%),
    linear-gradient(155deg, #1a1a1a, #050505);
  display: flex; align-items: center; justify-content: center;
}
.founder-portrait::after {
  content: 'portrét — placeholder';
  font-family: var(--serif); font-style: italic;
  color: var(--ink-mute); font-size: 1.1rem;
}
.founder-text h2 { margin-bottom: 1.4rem; }
.founder-text p {
  font-size: 1.05rem; color: var(--ink-dim);
  line-height: 1.75; margin-bottom: 1.2rem;
  max-width: 36rem;
}
.founder-text p em { font-family: var(--serif); font-style: italic; color: var(--ink); }
.founder-text .sig {
  font-family: var(--serif); font-style: italic;
  font-size: 1.4rem; color: var(--ink); margin-top: 1rem;
}
.founder-text .sig-role {
  font-size: 0.78rem; color: var(--ink-mute); letter-spacing: 0.1em;
  text-transform: uppercase; margin-top: 0.3rem;
}

/* =====================================================
   SERVICES PAGE — full detail
   ===================================================== */

.service-detail-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--hairline); }
.service-detail {
  display: grid;
  grid-template-columns: 100px 1.2fr 2fr;
  gap: 3rem; align-items: start;
  padding: 3rem 0;
  border-bottom: 1px solid var(--hairline);
}
.service-detail .sd-num {
  font-family: var(--serif); font-style: italic;
  font-size: 2.4rem; color: var(--orange); line-height: 1;
}
.service-detail .sd-name h3 {
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  letter-spacing: -0.025em; color: var(--ink); line-height: 1.05;
  margin-bottom: 0.6rem;
}
.service-detail .sd-name .sd-tag {
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--orange); font-weight: 500;
}
.service-detail .sd-body p { font-size: 1rem; color: var(--ink-dim); line-height: 1.75; margin-bottom: 1.2rem; }
.service-detail .sd-body ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 1.5rem; }
.service-detail .sd-body li {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 0.88rem; color: var(--ink-dim); line-height: 1.55;
}
.service-detail .sd-body li::before {
  content: '';
  flex-shrink: 0; width: 5px; height: 5px;
  margin-top: 0.55rem;
  background: var(--orange);
  border-radius: 50%;
}
@media (max-width: 880px) {
  .service-detail { grid-template-columns: 1fr; gap: 1rem; }
  .service-detail .sd-body ul { grid-template-columns: 1fr; }
}

/* Process — horizontal timeline */
.process {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  position: relative;
}
.process::before {
  content: '';
  position: absolute; top: 24px; left: 5%; right: 5%;
  height: 1px; background: var(--hairline);
  z-index: 0;
}
.process-step {
  display: flex; flex-direction: column; gap: 1rem;
  position: relative; z-index: 1;
  padding-top: 0;
}
.process-step .step-dot {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--orange);
  color: var(--orange);
  font-family: var(--serif); font-style: italic;
  font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
}
.process-step h3 { font-size: 1.05rem; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.process-step p { font-size: 0.86rem; color: var(--ink-dim); line-height: 1.65; }
@media (max-width: 880px) {
  .process { grid-template-columns: 1fr; gap: 0; }
  .process::before { display: none; }
  .process-step { padding: 1.5rem 0; border-bottom: 1px solid var(--hairline); flex-direction: row; align-items: flex-start; }
  .process-step .step-dot { flex-shrink: 0; }
}

/* Packages */
.packages {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--hairline);
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
@media (max-width: 880px) { .packages { grid-template-columns: 1fr; } }
.package {
  background: var(--bg);
  padding: 3rem 2rem;
  display: flex; flex-direction: column; gap: 1.4rem;
  position: relative;
}
.package.featured { background: linear-gradient(180deg, rgba(232,80,2,0.05), transparent 50%); }
.package.featured::before {
  content: 'Nejčastěji volené';
  position: absolute; top: 1.4rem; right: 1.5rem;
  background: var(--orange); color: #fff;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.22rem 0.7rem; border-radius: var(--r-pill);
}
.package .pkg-name { font-family: var(--sans); font-weight: 500; font-size: 1.4rem; letter-spacing: -0.02em; }
.package .pkg-sub { font-size: 0.9rem; color: var(--ink-mute); line-height: 1.6; }
.package .pkg-price {
  font-family: var(--display); font-weight: normal;
  font-size: 2.6rem; letter-spacing: -0.035em;
  line-height: 1; color: var(--ink);
  padding-bottom: 1.5rem; border-bottom: 1px solid var(--hairline);
}
.package .pkg-price .pkg-from {
  font-family: var(--serif); font-style: italic;
  font-size: 0.9rem; color: var(--ink-mute);
  letter-spacing: 0; margin-right: 0.4rem;
}
.package .pkg-price .pkg-unit {
  font-size: 0.85rem; color: var(--ink-mute); font-weight: 400; letter-spacing: 0;
}
.package ul { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; flex-grow: 1; }
.package ul li {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 0.9rem; color: var(--ink-dim); line-height: 1.6;
}
.package ul li::before {
  content: ''; flex-shrink: 0; width: 14px; height: 14px;
  margin-top: 0.2rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E85002' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.package .btn { align-self: flex-start; }

/* =====================================================
   PORTFOLIO PAGE — flexible grid
   ===================================================== */

.filter-row {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  max-width: var(--max); margin: 0 auto 3rem;
  position: relative; z-index: 1;
}
.filter-pill {
  font-size: 0.82rem; font-weight: 500;
  border-radius: var(--r-pill);
  padding: 0.5rem 1.1rem;
  background: transparent; color: var(--ink-mute);
  border: 1px solid var(--hairline-strong);
  cursor: pointer; transition: all 0.2s ease;
}
.filter-pill:hover { color: var(--ink); }
.filter-pill.active { background: var(--orange); color: #fff; border-color: var(--orange); }

.portfolio-flow {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  max-width: var(--max); margin: 0 auto;
}
@media (max-width: 880px) { .portfolio-flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .portfolio-flow { grid-template-columns: 1fr; } }
.portfolio-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-3);
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.portfolio-card:hover { transform: translateY(-6px) scale(1.04); }
.portfolio-card .pc-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(232,80,2,0.16), rgba(193,8,1,0.06) 50%, rgba(0,0,0,0.1)),
    linear-gradient(45deg, #131313 25%, #181818 25%, #181818 50%, #131313 50%, #131313 75%, #181818 75%);
  background-size: cover, 26px 26px;
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
/* Image stays static — only the card frame grows around it */
.portfolio-card:hover .pc-bg { transform: none; }
.portfolio-card .pc-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.5rem;
}
.portfolio-card .pc-tag {
  position: absolute; top: 1rem; left: 1rem;
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--orange);
}
.portfolio-card .pc-year {
  position: absolute; top: 1rem; right: 1rem;
  font-size: 0.7rem; color: rgba(255,255,255,0.5); letter-spacing: 0.05em;
}
.portfolio-card .pc-title {
  font-family: var(--sans); font-weight: 600;
  font-size: 1.3rem; letter-spacing: -0.025em; line-height: 1.1;
  color: var(--ink); margin-bottom: 0.3rem;
}
.portfolio-card .pc-loc { font-size: 0.78rem; color: rgba(255,255,255,0.55); }
.portfolio-card .pc-stamp {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-family: var(--serif); font-style: italic;
  color: rgba(255,255,255,0.18); font-size: 1rem;
  text-align: center;
}

/* =====================================================
   REFERENCES — logos, big quote, grid
   ===================================================== */

.logos-row {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
@media (max-width: 880px) { .logos-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .logos-row { grid-template-columns: repeat(2, 1fr); } }
.logos-row .lr-slot {
  border-right: 1px solid var(--hairline);
  height: 110px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic;
  font-size: 1.1rem; color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.logos-row .lr-slot:last-child { border-right: none; }
@media (max-width: 880px) {
  .logos-row .lr-slot:nth-child(3n) { border-right: none; }
  .logos-row .lr-slot:nth-child(n+4) { border-top: 1px solid var(--hairline); }
}

.ref-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
@media (max-width: 720px) { .ref-grid { grid-template-columns: 1fr; } }
.ref-card {
  padding: 2.5rem;
  background: linear-gradient(155deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column; gap: 1.4rem;
  position: relative;
}
.ref-card .rc-mark {
  font-family: var(--serif); font-style: italic;
  font-size: 3rem; line-height: 0.4;
  color: var(--orange);
}
.ref-card .rc-text {
  font-size: 1.05rem; color: var(--ink); line-height: 1.65;
}
.ref-card .rc-text em { font-family: var(--serif); font-style: italic; color: var(--orange); }
.ref-card .rc-meta {
  display: flex; align-items: center; gap: 0.85rem;
  margin-top: auto; padding-top: 1.4rem; border-top: 1px solid var(--hairline);
}
.ref-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(232,80,2,0.5), rgba(193,8,1,0.2));
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; color: var(--ink); flex-shrink: 0;
}
.ref-meta .rm-name { font-size: 0.95rem; font-weight: 500; color: var(--ink); }
.ref-meta .rm-role { font-size: 0.78rem; color: var(--ink-mute); margin-top: 0.15rem; }

/* =====================================================
   FAQ — accordion
   ===================================================== */

.faq-list {
  max-width: 860px; margin: 0 auto;
  border-top: 1px solid var(--hairline);
  position: relative; z-index: 1;
}
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-q {
  width: 100%; background: transparent; border: none; cursor: pointer;
  padding: 1.8rem 0;
  display: grid; grid-template-columns: 50px 1fr auto; gap: 1.5rem; align-items: center;
  text-align: left;
  color: var(--ink);
  font-family: var(--sans); font-size: 1.15rem; font-weight: 500;
  letter-spacing: -0.015em;
  transition: color 0.2s;
}
.faq-q:hover { color: var(--orange); }
.faq-q .faq-no {
  font-family: var(--serif); font-style: italic;
  font-size: 1.2rem; color: var(--orange);
}
.faq-q .faq-icon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem; line-height: 1; color: var(--ink-dim);
  transition: all 0.3s ease;
}
.faq-item.open .faq-q .faq-icon {
  background: var(--orange); border-color: var(--orange);
  color: #fff; transform: rotate(45deg);
}
.faq-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.22,1,0.36,1);
}
.faq-a > div { overflow: hidden; }
.faq-a > div > p {
  font-size: 1rem; color: var(--ink-dim); line-height: 1.8;
  padding: 0 3rem 1.8rem 65px;
  max-width: 720px;
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
@media (max-width: 600px) {
  .faq-q { grid-template-columns: 30px 1fr auto; gap: 1rem; font-size: 1rem; }
  .faq-a > div > p { padding-left: 42px; padding-right: 1rem; }
}

/* =====================================================
   CONTACT PAGE
   ===================================================== */

.contact-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 5rem; align-items: start;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; gap: 3rem; } }

.contact-details { display: flex; flex-direction: column; }
.contact-block {
  padding: 1.4rem 0;
  border-top: 1px solid var(--hairline);
  display: grid; grid-template-columns: 90px 1fr; gap: 1rem; align-items: baseline;
}
.contact-block:last-child { border-bottom: 1px solid var(--hairline); }
.contact-block .cb-lbl {
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute);
}
.contact-block .cb-val {
  font-size: 1.25rem; font-weight: 500; color: var(--ink);
  letter-spacing: -0.015em; text-decoration: none;
  transition: color 0.2s;
}
a.cb-val:hover { color: var(--orange); }
.contact-block .cb-val.small { font-size: 1rem; font-weight: 400; color: var(--ink-dim); }

/* CTA embed */
#cta-embed {
  border: 1.5px dashed rgba(232,80,2,0.4);
  border-radius: var(--r-lg);
  padding: 3rem 2.5rem;
  background: rgba(232,80,2,0.03);
  text-align: center;
  position: relative;
}
#cta-embed .embed-tag {
  display: inline-block;
  background: var(--orange); color: #fff;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.22rem 0.7rem; border-radius: var(--r-pill);
  margin-bottom: 1.2rem;
}
#cta-embed h3 {
  font-family: var(--sans); font-weight: 500;
  font-size: 1.4rem; color: var(--ink); margin-bottom: 0.6rem;
  letter-spacing: -0.02em;
}
#cta-embed p { font-size: 0.95rem; color: var(--ink-dim); line-height: 1.65; max-width: 460px; margin: 0 auto; }
#cta-embed code {
  display: inline-block; margin-top: 1.2rem;
  background: rgba(0,0,0,0.5); color: var(--orange);
  font-size: 0.78rem;
  padding: 0.4rem 0.7rem; border-radius: 6px;
  font-family: var(--sans);
  letter-spacing: 0.02em;
}

/* Fallback form */
.form-card {
  background: linear-gradient(155deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 2.5rem;
}
.form-card h3 { font-size: 1.1rem; font-weight: 500; color: var(--ink); margin-bottom: 1.5rem; letter-spacing: -0.015em; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.form-field label {
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-mute);
}
.form-field input, .form-field textarea, .form-field select {
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r);
  padding: 0.95rem 1rem;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  transition: border-color 0.2s, background 0.2s;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none;
  border-color: var(--orange);
  background: rgba(0,0,0,0.5);
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field input::placeholder, .form-field textarea::placeholder { color: rgba(249,249,249,0.32); }
.form-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: 0.5rem; }
.form-note { font-size: 0.82rem; color: var(--ink-mute); margin-top: 1rem; line-height: 1.65; }

/* Next steps */
.next-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
@media (max-width: 880px) { .next-steps { grid-template-columns: 1fr; } }
.next-step {
  padding: 3rem 2rem;
  border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 1rem;
}
.next-step:last-child { border-right: none; }
@media (max-width: 880px) {
  .next-step { border-right: none; border-bottom: 1px solid var(--hairline); }
  .next-step:last-child { border-bottom: none; }
}
.next-step .ns-no {
  font-family: var(--serif); font-style: italic;
  font-size: 2rem; color: var(--orange); line-height: 1;
}
.next-step h3 { font-size: 1.2rem; font-weight: 500; color: var(--ink); letter-spacing: -0.015em; }
.next-step p { font-size: 0.95rem; color: var(--ink-dim); line-height: 1.7; }

/* =====================================================
   FOOTER
   ===================================================== */

#footer {
  padding: 5rem 1.5rem 2.5rem;
  border-top: 1px solid var(--hairline);
}
.footer-inner { max-width: var(--max); margin: 0 auto; }
.footer-mark {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem;
  margin-bottom: 4rem;
}
@media (max-width: 880px) { .footer-mark { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
@media (max-width: 540px) { .footer-mark { grid-template-columns: 1fr; } }
.footer-brand .footer-logo { display: inline-flex; margin-bottom: 1.2rem; text-decoration: none; }
.footer-brand .footer-logo img { height: 28px; width: auto; }
.footer-brand p { font-size: 0.92rem; color: var(--ink-mute); line-height: 1.7; max-width: 280px; }
.footer-col h4 {
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 1.2rem; font-weight: 500;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; }
.footer-col li a {
  font-size: 0.95rem; color: var(--ink); text-decoration: none;
  transition: color 0.2s;
}
.footer-col li a:hover { color: var(--orange); }
.footer-bottom {
  padding-top: 1.8rem; border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem;
}
.footer-bottom .copy { font-size: 0.8rem; color: var(--ink-mute); }
.footer-bottom .ico { font-size: 0.76rem; color: var(--ink-faint); letter-spacing: 0.06em; }
.footer-bottom .social { display: flex; gap: 0.5rem; }
.footer-bottom .social a {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-dim); transition: all 0.2s;
}
.footer-bottom .social a:hover { color: var(--ink); border-color: var(--orange); background: rgba(232,80,2,0.1); }
.footer-bottom .social svg { width: 16px; height: 16px; }

/* =====================================================
   MODAL — portfolio detail
   ===================================================== */

#modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.0);
  display: flex; align-items: stretch;
  pointer-events: none; transition: background 0.4s;
}
#modal-overlay.open { pointer-events: all; background: rgba(0,0,0,0.94); }
#modal-panel {
  width: 100%; background: var(--bg-2);
  transform: translateY(100%); transition: transform 0.55s cubic-bezier(0.22,1,0.36,1);
  overflow-y: auto;
}
#modal-overlay.open #modal-panel { transform: translateY(0); }
.modal-topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 2rem;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.modal-brand img { height: 22px; }
.modal-close-btn, .modal-nav-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  background: rgba(255,255,255,0.04); color: var(--ink-dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; line-height: 1; transition: all 0.2s;
}
.modal-close-btn:hover, .modal-nav-btn:hover { background: rgba(255,255,255,0.1); color: var(--ink); }
.modal-close-btn { font-size: 1.4rem; }
.modal-nav-btns { display: flex; gap: 0.5rem; }
.modal-hero {
  width: 100%; aspect-ratio: 16/9;
  background:
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(232,80,2,0.18), transparent 70%),
    #0a0a0a;
  display: flex; align-items: center; justify-content: center;
}
.modal-hero-placeholder {
  font-family: var(--serif); font-style: italic;
  color: var(--ink-mute); font-size: 1.2rem;
}
.modal-body { padding: 3rem 2rem 5rem; max-width: 1120px; margin: 0 auto; width: 100%; }
.modal-meta {
  margin-bottom: 3rem;
  display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start;
}
@media (max-width: 640px) { .modal-meta { grid-template-columns: 1fr; } }
.modal-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.85rem; }
.modal-tag {
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: var(--r-pill); padding: 0.22rem 0.65rem;
  border: 1px solid rgba(232,80,2,0.32); color: rgba(232,80,2,0.85);
}
.modal-name {
  font-family: var(--display); font-weight: normal;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem); letter-spacing: -0.035em; line-height: 0.95;
  color: var(--ink); margin-bottom: 0.6rem;
}
.modal-loc { font-size: 0.9rem; color: var(--ink-mute); }
.modal-year {
  font-family: var(--serif); font-style: italic;
  font-size: 4rem; letter-spacing: -0.02em; line-height: 1;
  color: rgba(232,80,2,0.55);
}
.modal-desc { font-size: 1rem; color: var(--ink-dim); line-height: 1.8; max-width: 680px; margin-bottom: 3rem; }
.modal-section-lbl {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 1.2rem;
}
.modal-photos { margin-bottom: 3rem; }
.modal-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.modal-photo-grid .pi { border-radius: 10px; overflow: hidden; background: var(--bg-3); aspect-ratio: 3/2; position: relative; }
.modal-photo-grid .pi.wide { grid-column: span 2; }
.modal-photo-grid .pi.tall { aspect-ratio: 2/3; }
.modal-photo-grid .pi::after {
  content: 'foto — placeholder';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic;
  color: rgba(249,249,249,0.16); font-size: 0.95rem;
}
@media (max-width: 640px) { .modal-photo-grid { grid-template-columns: repeat(2, 1fr); } .modal-photo-grid .pi.wide { grid-column: span 2; } }
.modal-vv { margin-bottom: 1rem; }
.modal-vv-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 0.5rem; }
.modal-vv-card {
  flex: 0 0 200px; height: 355px;
  border-radius: 16px; overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(232,80,2,0.2), transparent 70%),
    #131313;
  border: 1px solid var(--hairline);
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.modal-vv-card .vv-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1rem 0.9rem 0.9rem;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  font-size: 0.76rem; color: var(--ink);
}
.modal-vv-card .vv-ph {
  font-family: var(--serif); font-style: italic;
  color: var(--ink-mute); font-size: 0.95rem;
}

/* =====================================================
   PROJECT DETAIL PAGE — replaces the old modal
   ===================================================== */

.proj-hero {
  position: relative;
  padding: 10rem var(--gutter) 4rem;
  overflow: hidden;
}
.proj-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(232, 80, 2, 0.14), transparent 60%),
    radial-gradient(ellipse 60% 70% at 0% 100%, rgba(193, 8, 1, 0.10), transparent 60%);
}
.proj-hero-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: 4rem; align-items: end;
}
@media (max-width: 880px) {
  .proj-hero { padding: 8rem var(--gutter) 3rem; }
  .proj-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.proj-hero h1 {
  margin-top: 1.2rem;
  font-size: clamp(1.8rem, 3.8vw, 3rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.proj-hero .lede-after-h1 {
  margin-top: 1.6rem;
  font-size: 1.05rem;
  color: var(--ink-dim);
  line-height: 1.7;
  max-width: 38rem;
}
.proj-hero .lede-after-h1 em { font-family: var(--serif); font-style: italic; color: var(--ink); }

.proj-tags {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-bottom: 1rem;
}
.proj-tags .tag {
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: var(--r-pill);
  padding: 0.22rem 0.65rem;
  border: 1px solid rgba(232,80,2,0.32);
  color: rgba(232,80,2,0.85);
}

.proj-meta-box {
  display: flex; flex-direction: column;
  padding-bottom: 0.4rem;
}
.proj-meta-box .row {
  display: grid; grid-template-columns: 90px 1fr;
  gap: 0.8rem; align-items: baseline;
  padding: 0.85rem 0;
  border-top: 1px solid var(--hairline);
}
.proj-meta-box .row:last-child { border-bottom: 1px solid var(--hairline); }
.proj-meta-box .label {
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mute);
}
.proj-meta-box .value {
  font-size: 1rem; color: var(--ink);
}

/* Big hero media block */
.proj-hero-media {
  max-width: var(--max); margin: 0 auto;
  padding: 0 var(--gutter);
}
.proj-hero-media .media-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 60% at 50% 40%, rgba(232,80,2,0.18), transparent 65%),
    linear-gradient(135deg, #131313, #050505);
  border: 1px solid var(--hairline-strong);
  display: flex; align-items: center; justify-content: center;
}
.proj-hero-media .media-placeholder {
  font-family: var(--serif); font-style: italic;
  color: var(--ink-mute); font-size: 1.2rem;
}
.proj-hero-media .media-wrap video,
.proj-hero-media .media-wrap iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none; object-fit: cover;
}

/* Photo gallery */
.proj-photos {
  max-width: var(--max); margin: 0 auto;
  padding: 5rem var(--gutter) 3rem;
}
.proj-section-lbl {
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 2rem;
  display: inline-flex; align-items: center; gap: 0.7rem;
}
.proj-section-lbl::before {
  content: ''; width: 22px; height: 1px; background: var(--orange);
}
.proj-photo-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.proj-photo-grid .pi {
  border-radius: var(--r);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(232,80,2,0.10), rgba(193,8,1,0.04) 50%, rgba(0,0,0,0.05)),
    linear-gradient(45deg, #131313 25%, #181818 25%, #181818 50%, #131313 50%, #131313 75%, #181818 75%);
  background-size: cover, 26px 26px;
  aspect-ratio: 3/2;
  position: relative;
}
.proj-photo-grid .pi.wide { grid-column: span 2; }
.proj-photo-grid .pi.tall { aspect-ratio: 2/3; grid-row: span 2; }
.proj-photo-grid .pi::after {
  content: 'foto — placeholder';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic;
  color: rgba(249,249,249,0.16); font-size: 0.95rem;
}
@media (max-width: 720px) {
  .proj-photo-grid { grid-template-columns: 1fr 1fr; }
  .proj-photo-grid .pi.wide { grid-column: span 2; }
  .proj-photo-grid .pi.tall { grid-row: auto; aspect-ratio: 3/2; }
}

/* Vertical reels strip */
.proj-vv {
  max-width: var(--max); margin: 0 auto;
  padding: 3rem var(--gutter) 5rem;
}
.proj-vv-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 880px) {
  .proj-vv-row { grid-template-columns: repeat(2, 1fr); }
}
.proj-vv-tile {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--r);
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(232,80,2,0.16), transparent 65%),
    linear-gradient(180deg, #131313, #050505);
  border: 1px solid var(--hairline);
}
.proj-vv-tile::before {
  content: 'vertikál';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--serif); font-style: italic;
  color: var(--ink-mute);
  font-size: 0.95rem;
}
.proj-vv-tile .label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1rem 0.85rem 0.9rem;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  font-size: 0.78rem; color: var(--ink);
  z-index: 2;
}

/* Prev/Next project navigation */
.proj-nav {
  max-width: var(--max); margin: 0 auto;
  padding: 2.5rem var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.proj-nav a {
  text-decoration: none;
  display: flex; flex-direction: column; gap: 0.5rem;
  color: var(--ink-dim);
  transition: color 0.2s;
}
.proj-nav a:hover { color: var(--ink); }
.proj-nav a:hover .arrow { transform: translateX(4px); }
.proj-nav .lbl {
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.proj-nav .arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}
.proj-nav .nm {
  font-family: var(--display);
  font-size: 1.5rem; letter-spacing: -0.02em;
  font-weight: normal;
  color: var(--ink);
}
.proj-nav .next { text-align: right; align-items: flex-end; }
.proj-nav .next:hover .arrow { transform: translateX(4px); }
.proj-nav .prev:hover .arrow { transform: translateX(-4px); }
@media (max-width: 600px) {
  .proj-nav { grid-template-columns: 1fr; gap: 1.5rem; }
  .proj-nav .next { text-align: left; align-items: flex-start; }
}

/* Related projects strip */
.proj-related {
  max-width: var(--max); margin: 0 auto;
  padding: 5rem var(--gutter);
}
.proj-related-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 880px) {
  .proj-related-grid { grid-template-columns: 1fr; }
}

/* =====================================================
   CHECKBOX PILLS — service selection in forms
   ===================================================== */
.check-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.25rem;
}
.check-pills .pill {
  position: relative;
  cursor: pointer;
}
.check-pills .pill input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.check-pills .pill span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--hairline-strong);
  font-size: 0.9rem; font-weight: 500;
  color: var(--ink-dim);
  transition: all 0.2s ease;
  user-select: none;
}
.check-pills .pill span::before {
  content: '';
  width: 14px; height: 14px;
  border-radius: 4px;
  border: 1.5px solid var(--ink-faint);
  background: transparent;
  flex-shrink: 0;
  transition: all 0.2s ease;
  position: relative;
}
.check-pills .pill:hover span {
  border-color: var(--ink-faint);
  color: var(--ink);
}
.check-pills .pill:hover span::before {
  border-color: var(--ink-dim);
}
.check-pills .pill input:checked + span {
  background: rgba(232, 80, 2, 0.18);
  border-color: var(--orange);
  color: var(--ink);
}
.check-pills .pill input:checked + span::before {
  background: var(--orange);
  border-color: var(--orange);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 7.5 6 10.5 11 4.5'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
}
.check-pills .pill input:focus-visible + span {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* =====================================================
   TYPE UNIFICATION — one font, no italic
   Strips italic styling everywhere; .it in headlines
   becomes an orange-coloured accent (replaces italic).
   ===================================================== */
em,
.it,
.display .it,
.heading .it,
.lede em,
.story em,
.story-pull,
.argument-lede p em,
.section-head .head-right em,
.case-body h3 .it,
.case-body .case-stat .num em,
.pullquote blockquote,
.stat .stat-num em,
.proj-hero .lede-after-h1 em,
.cta-side em,
.hero-sub em,
.head-right em,
.kicker,
.reel-meta .caption em,
.ref-card .rc-text em,
.qc-text::before {
  font-style: normal;
  font-family: inherit;
}

/* .it inside headlines — orange accent instead of italic */
.it,
.display .it,
.case-body h3 .it,
.heading .it {
  color: var(--orange);
}

/* em in body keeps subtle weight emphasis, no italic, no special color */
em {
  color: inherit;
  font-weight: 500;
}

/* Kicker (small caption) — keep orange but normal style */
.kicker {
  color: var(--orange);
  font-weight: 500;
}

/* Pull quote — bigger weight instead of italic */
.pullquote blockquote { font-weight: 500; }
.story-pull { font-weight: 500; color: var(--ink); border-left-color: var(--orange); }

/* =====================================================
   BRAND WATERMARK — owl icon as faint background on plain hero areas
   (inspired by ceník PDFs where the icon sits behind content)
   ===================================================== */
.page-hero,
.proj-hero {
  isolation: isolate;
}
.page-hero::after,
.proj-hero::after {
  content: '';
  position: absolute;
  top: 50%; right: -6%;
  transform: translateY(-48%);
  width: 48%;
  max-width: 560px;
  aspect-ratio: 1 / 1;
  background: url('assets/wisevisuals-icon.svg') center / contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 880px) {
  .page-hero::after,
  .proj-hero::after {
    width: 75%;
    right: -20%;
    opacity: 0.05;
  }
}

/* =====================================================
   LOGO MARQUEE — auto-scroll client logos (bewow-style)
   ===================================================== */
.logo-marquee {
  padding: 2.2rem 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
  position: relative;
  background: rgba(0, 0, 0, 0.15);
}
.logo-marquee::before,
.logo-marquee::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 2;
}
.logo-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--bg), transparent);
}
.logo-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--bg), transparent);
}
.lm-track {
  display: flex; align-items: center;
  gap: 3.5rem;
  white-space: nowrap;
  animation: lmScroll 38s linear infinite;
  width: fit-content;
}
@keyframes lmScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.lm-item {
  display: inline-flex; align-items: center;
  font-family: var(--display);
  font-weight: normal;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--ink-mute);
  opacity: 0.72;
  flex-shrink: 0;
  transition: opacity 0.25s, color 0.25s;
}
.lm-item:hover { opacity: 1; color: var(--ink); }
.logo-marquee:hover .lm-track { animation-play-state: paused; }

/* =====================================================
   METRICS GRID — replaces wall-of-text "Why" arguments
   Big numbers, minimal copy, Stripe/Linear vibe
   ===================================================== */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline-strong);
  border-bottom: 1px solid var(--hairline-strong);
  max-width: var(--max);
  margin: 0 auto;
  position: relative; z-index: 1;
}
@media (max-width: 720px) {
  .metrics-grid { grid-template-columns: 1fr; }
}
.metric {
  padding: 3.5rem 2.2rem;
  border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column;
  gap: 1.3rem;
  position: relative;
  transition: background 0.3s ease;
}
.metric:last-child { border-right: none; }
.metric:hover { background: rgba(255,255,255,0.015); }
@media (max-width: 720px) {
  .metric { border-right: none; border-bottom: 1px solid var(--hairline); padding: 3rem 1.8rem; }
  .metric:last-child { border-bottom: none; }
}
.metric .v {
  font-family: var(--display);
  font-weight: normal;
  font-size: clamp(3.5rem, 8vw, 6rem);
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: var(--ink);
}
.metric .v .unit {
  font-size: 0.45em;
  color: var(--ink-mute);
  letter-spacing: -0.02em;
  font-weight: normal;
  margin-left: 0.05em;
  vertical-align: 0.4em;
}
.metric.featured .v { color: var(--orange); }
.metric.featured .v .unit { color: rgba(232,80,2,0.55); }
.metric .l {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.metric.featured .l { color: var(--orange); }
.metric p {
  font-size: 0.95rem;
  color: var(--ink-dim);
  line-height: 1.6;
  margin: 0;
  max-width: 22rem;
}
.metric p strong { color: var(--ink); font-weight: 600; }

/* =====================================================
   FINAL CTA — MINIMAL CENTERED VARIANT
   Big headline + inline email form + one contact line
   ===================================================== */
.final-cta.is-minimal .final-cta-inner {
  grid-template-columns: 1fr;
  text-align: center;
  max-width: 720px;
  gap: 0;
}
.final-cta.is-minimal h2 {
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  letter-spacing: -0.035em;
  line-height: 0.96;
  margin-bottom: 1.4rem;
}
.final-cta.is-minimal .lede {
  font-size: 1rem;
  color: var(--ink-dim);
  line-height: 1.6;
  max-width: 32rem;
  margin: 0 auto 2.5rem;
}
.final-cta.is-minimal .lede em {
  color: var(--ink); font-weight: 500;
}
.inline-form {
  display: flex;
  gap: 0.4rem;
  max-width: 460px;
  margin: 0 auto 1.5rem;
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--hairline-strong);
  border-radius: 9999px;
  padding: 0.4rem 0.4rem 0.4rem 1.4rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.inline-form:focus-within {
  border-color: var(--orange);
  background: rgba(0,0,0,0.6);
}
.inline-form input {
  flex: 1;
  background: transparent; border: none; outline: none;
  font-family: inherit; font-size: 0.95rem;
  color: var(--ink);
  padding: 0.6rem 0;
}
.inline-form input::placeholder { color: var(--ink-mute); }
.inline-form button {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--orange); color: #fff;
  border: none;
  padding: 0.75rem 1.3rem;
  border-radius: 9999px;
  font-family: inherit; font-size: 0.88rem; font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.18s ease;
}
.inline-form button:hover { background: #ff5b08; transform: scale(1.02); }
.inline-form button svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.inline-form.is-sent button { background: #3aa44a; }
@media (max-width: 540px) {
  .inline-form { flex-direction: column; padding: 0.5rem; border-radius: 18px; }
  .inline-form input { padding: 0.85rem 0.8rem; }
  .inline-form button { width: 100%; justify-content: center; }
}
.cta-meta-line {
  font-size: 0.88rem;
  color: var(--ink-mute);
  letter-spacing: 0.01em;
}
.cta-meta-line a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(232,80,2,0.5);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.cta-meta-line a:hover { color: var(--orange); border-color: var(--orange); }
.cta-meta-line .sep { opacity: 0.45; margin: 0 0.5rem; }

/* =====================================================
   OMNI-INSPIRED — glow cards, massive caps, stat tiles
   ===================================================== */

/* MASSIVE CAPS HEADLINES — like OMNI "SERVICES", "FAQ", "READY TO GROW" */
.h-massive {
  font-family: var(--display);
  font-weight: normal;
  font-size: clamp(3rem, 9vw, 7rem);
  letter-spacing: -0.04em;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--ink);
}
.h-massive .accent { color: var(--orange); }
.h-massive .small {
  display: inline-block;
  font-size: 0.18em;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  vertical-align: 0.9em;
  margin-left: 0.5em;
}

/* GLOW CARD — base for OMNI-style tiles */
.glow-card {
  position: relative;
  border-radius: 24px;
  border: 1px solid rgba(232, 80, 2, 0.22);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232, 80, 2, 0.16), transparent 60%),
    linear-gradient(155deg, #1d100a 0%, #120804 60%, #0a0503 100%);
  box-shadow:
    0 30px 80px rgba(232, 80, 2, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.glow-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(232, 80, 2, 0.22), transparent 65%);
  pointer-events: none;
  opacity: 0.7;
}
.glow-card > * { position: relative; z-index: 1; }

/* STAT TILES — replace metrics-grid with OMNI cards */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: var(--max);
  margin: 0 auto;
}
@media (max-width: 720px) {
  .stat-tiles { grid-template-columns: 1fr; }
}
.stat-tile {
  composes: glow-card;
  padding: 2.5rem 2rem;
  min-height: 220px;
  display: flex; flex-direction: column;
  gap: 1rem;
}
.stat-tile {
  position: relative;
  border-radius: 24px;
  border: 1px solid rgba(232, 80, 2, 0.22);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232, 80, 2, 0.16), transparent 60%),
    linear-gradient(155deg, #1d100a 0%, #120804 60%, #0a0503 100%);
  box-shadow: 0 30px 80px rgba(232, 80, 2, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 2.5rem 2rem;
  min-height: 220px;
  display: flex; flex-direction: column; gap: 1rem;
  overflow: hidden;
}
.stat-tile::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(232, 80, 2, 0.22), transparent 65%);
  pointer-events: none; opacity: 0.7;
}
.stat-tile > * { position: relative; z-index: 1; }
.stat-tile.is-featured {
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, rgba(255, 91, 8, 0.4), transparent 60%),
    linear-gradient(155deg, #ff5b08 0%, #c10801 60%, #6e0500 100%);
  border-color: rgba(255, 200, 140, 0.4);
}
.stat-tile.is-featured::before {
  background: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(255, 200, 140, 0.18), transparent 60%);
}
.stat-tile .st-label {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(249, 249, 249, 0.7);
}
.stat-tile.is-featured .st-label { color: rgba(255, 255, 255, 0.85); }
.stat-tile .st-value {
  font-family: var(--display);
  font-weight: normal;
  font-size: clamp(3.5rem, 7vw, 5rem);
  letter-spacing: -0.045em;
  line-height: 0.9;
  color: var(--ink);
  margin-top: auto;
}
.stat-tile .st-value .unit {
  font-size: 0.45em;
  color: rgba(249, 249, 249, 0.55);
  margin-left: 0.05em;
  vertical-align: 0.4em;
}
.stat-tile.is-featured .st-value { color: #fff; }
.stat-tile.is-featured .st-value .unit { color: rgba(255, 255, 255, 0.7); }
.stat-tile .st-desc {
  font-size: 0.92rem;
  color: rgba(249, 249, 249, 0.65);
  line-height: 1.5;
}
.stat-tile.is-featured .st-desc { color: rgba(255, 255, 255, 0.85); }

/* SERVICE GLOW TILES — 2×2 grid (replaces editorial list) */
.service-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 880px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .service-tiles { grid-template-columns: 1fr; max-width: 100%; }
}
.service-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 24px;
  border: 1px solid rgba(232, 80, 2, 0.25);
  background:
    radial-gradient(ellipse 80% 70% at 50% 30%, rgba(232, 80, 2, 0.32), transparent 60%),
    linear-gradient(155deg, #2a1409 0%, #15080a 50%, #0a0503 100%);
  box-shadow: 0 30px 80px rgba(232, 80, 2, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 2rem;
  display: flex; flex-direction: column; justify-content: space-between;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.45s var(--ease-out-cubic), box-shadow 0.4s ease;
}
.service-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 40px 100px rgba(232, 80, 2, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.service-tile .st-icon {
  width: 56%; aspect-ratio: 1;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.service-tile .st-icon::before {
  content: '';
  position: absolute; inset: -20%;
  background: radial-gradient(circle, rgba(255, 220, 180, 0.25), transparent 60%);
  pointer-events: none;
  filter: blur(20px);
}
.service-tile .st-icon svg {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  stroke: rgba(255, 200, 140, 0.95);
  fill: none;
  stroke-width: 1.4;
}
.service-tile .st-icon svg .fill {
  fill: rgba(255, 200, 140, 0.18);
  stroke: none;
}
.service-tile .st-bottom {
  display: flex; align-items: flex-end; justify-content: space-between;
  position: relative; z-index: 1;
}
.service-tile .st-label {
  font-family: var(--display);
  font-weight: normal;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.05;
}
.service-tile .st-arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
  flex-shrink: 0;
}
.service-tile:hover .st-arrow {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  transform: translate(3px, -3px);
}
.service-tile .st-arrow svg {
  width: 12px; height: 12px;
  stroke: currentColor; fill: none; stroke-width: 2.5;
}

/* OMNI-STYLE CTA CARD — form in a glow card */
.cta-card {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  border-radius: 28px;
  border: 1px solid rgba(232, 80, 2, 0.28);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232, 80, 2, 0.22), transparent 60%),
    radial-gradient(ellipse 60% 70% at 50% 100%, rgba(193, 8, 1, 0.15), transparent 65%),
    linear-gradient(155deg, #1d100a 0%, #120804 60%, #0a0503 100%);
  box-shadow: 0 40px 120px rgba(232, 80, 2, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 3.5rem 3rem;
  text-align: center;
  overflow: hidden;
}
@media (max-width: 720px) { .cta-card { padding: 2.5rem 1.6rem; border-radius: 22px; } }
.cta-card .small-label {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 200, 140, 0.7);
  margin-bottom: 1.5rem;
}
.cta-card h2 {
  font-family: var(--display); font-weight: normal;
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  letter-spacing: -0.04em;
  line-height: 0.95;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.cta-card h2 .accent { color: var(--orange); }
.cta-card .cc-sub {
  font-size: 1rem;
  color: var(--ink-dim);
  line-height: 1.6;
  max-width: 30rem;
  margin: 0 auto 2.5rem;
}
.cta-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 1rem;
  text-align: left;
}
@media (max-width: 540px) { .cta-fields { grid-template-columns: 1fr; } }
.cta-fields input {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(232, 80, 2, 0.18);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  font-family: inherit; font-size: 16px;
  color: var(--ink);
  transition: border-color 0.2s, background 0.2s;
}
.cta-fields input::placeholder { color: rgba(249, 249, 249, 0.35); }
.cta-fields input:focus {
  outline: none;
  border-color: var(--orange);
  background: rgba(0, 0, 0, 0.65);
}
.cta-big-button {
  display: block;
  width: 100%;
  margin-top: 0.6rem;
  padding: 1.25rem 2rem;
  background: var(--orange);
  border: none;
  color: #fff;
  font-family: var(--display); font-weight: normal;
  font-size: 1.15rem; letter-spacing: -0.01em;
  text-transform: uppercase;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 16px 40px rgba(232, 80, 2, 0.32);
  transition: background 0.2s, transform 0.18s, box-shadow 0.2s;
}
.cta-big-button:hover {
  background: #ff5b08;
  transform: translateY(-2px);
  box-shadow: 0 22px 50px rgba(232, 80, 2, 0.5);
}
.cta-big-button.is-sent { background: #3aa44a; box-shadow: 0 14px 40px rgba(58,164,74,0.4); }
.cta-card .cc-foot {
  margin-top: 1.5rem;
  font-size: 0.86rem;
  color: var(--ink-mute);
}
.cta-card .cc-foot a {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid rgba(232, 80, 2, 0.4);
}
.cta-card .cc-foot a:hover { color: var(--orange); border-color: var(--orange); }
.cta-card .cc-foot .sep { opacity: 0.4; margin: 0 0.5rem; }

/* =====================================================
   RELOAD/MISCHKA REFERENCE — atmospheric, massive wordmark
   ===================================================== */

/* GLOW BLOB — atmospheric smoke/light leak */
.glow-blob {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
}
.glow-blob.red {
  background: radial-gradient(circle, rgba(193, 8, 1, 0.7) 0%, transparent 70%);
}
.glow-blob.orange {
  background: radial-gradient(circle, rgba(241, 96, 1, 0.6) 0%, transparent 70%);
}
.glow-blob.tl { top: -10%; left: -10%; width: 480px; height: 480px; }
.glow-blob.tr { top: -15%; right: -15%; width: 520px; height: 520px; }
.glow-blob.bl { bottom: -20%; left: -10%; width: 560px; height: 560px; }
.glow-blob.br { bottom: -10%; right: -20%; width: 520px; height: 520px; }
.glow-blob.center { top: 30%; left: 50%; transform: translateX(-50%); width: 800px; height: 600px; opacity: 0.35; }
@media (max-width: 720px) {
  .glow-blob { transform: scale(0.6); }
  .glow-blob.center { transform: translateX(-50%) scale(0.6); }
}

/* MASSIVE FOOTER WORDMARK — Reload signature */
.massive-mark {
  width: 100%;
  overflow: hidden;
  padding: 0 1.5rem;
  position: relative;
  border-top: 1px solid var(--hairline);
  background: var(--bg);
}
.massive-mark-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 4rem 0 1.5rem;
  position: relative;
}
.massive-mark .text {
  font-family: var(--display);
  font-weight: normal;
  font-size: clamp(4rem, 17vw, 16rem);
  letter-spacing: -0.05em;
  line-height: 0.85;
  color: var(--orange);
  text-transform: uppercase;
  display: block;
  text-align: center;
  white-space: nowrap;
  position: relative;
}
.massive-mark .text .dot { color: var(--ink); }
.massive-mark .glow-blob { z-index: 0; }
.massive-mark .text { position: relative; z-index: 1; }
.massive-mark .sub {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 1.5rem;
}

/* MIXED-WEIGHT HEADLINE — bright + muted in same line */
.h-mixed {
  font-family: var(--display);
  font-weight: normal;
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  letter-spacing: -0.035em;
  line-height: 1;
  text-transform: uppercase;
}
.h-mixed .bright { color: var(--ink); }
.h-mixed .muted { color: rgba(249, 249, 249, 0.32); }
.h-mixed .accent { color: var(--orange); }

/* BIG STATS BAR — Mischka style: huge numbers + tiny + */
.big-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: var(--max);
  margin: 0 auto;
  padding: 4rem var(--gutter);
  position: relative;
}
@media (max-width: 720px) { .big-stats { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } }
.big-stat {
  display: flex; flex-direction: column; gap: 0.4rem;
  position: relative; z-index: 1;
}
.big-stat .bv {
  font-family: var(--display);
  font-weight: normal;
  font-size: clamp(3rem, 8vw, 6.5rem);
  letter-spacing: -0.05em;
  line-height: 0.92;
  color: var(--ink);
  display: flex; align-items: flex-start; gap: 0.1em;
}
.big-stat .bv .plus {
  font-size: 0.35em;
  color: var(--orange);
  font-weight: normal;
  letter-spacing: 0;
  margin-top: 0.05em;
}
.big-stat .bl {
  font-size: 0.82rem;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  margin-top: 0.3rem;
}

/* COMPACT TESTIMONIAL CARDS — Mischka style */
.testi-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: var(--max);
  margin: 0 auto;
}
@media (max-width: 880px) { .testi-cards { grid-template-columns: 1fr; } }
.testi-card {
  position: relative;
  padding: 1.8rem;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232, 80, 2, 0.10), transparent 65%),
    linear-gradient(155deg, #161010 0%, #0c0808 60%);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  display: flex; flex-direction: column; gap: 1rem;
  min-height: 240px;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s;
}
.testi-card:hover {
  border-color: rgba(232, 80, 2, 0.35);
  transform: translateY(-3px);
}
.testi-card .tc-brand {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.testi-card .tc-brand .b-dot {
  width: 18px; height: 18px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep, #C10801));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
}
.testi-card .tc-quote {
  font-size: 0.96rem;
  color: var(--ink);
  line-height: 1.55;
  margin: 0;
  flex-grow: 1;
}
.testi-card .tc-meta {
  display: flex; align-items: center; gap: 0.8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
}
.testi-card .tc-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(232, 80, 2, 0.42), rgba(193, 8, 1, 0.2));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.74rem;
  color: var(--ink);
  flex-shrink: 0;
}
.testi-card .tc-name { font-size: 0.84rem; font-weight: 600; color: var(--ink); }
.testi-card .tc-role { font-size: 0.72rem; color: var(--ink-mute); margin-top: 0.1rem; }

/* =====================================================
   HERO REFRESH — Mischka-style stacked caps, glow blobs
   ===================================================== */

/* small bracket caption — < REALITNÍ MARKETING > vibe */
.hero-caption {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1.8rem;
}
.hero-caption::before,
.hero-caption::after {
  content: '';
  width: 10px; height: 1px;
  background: var(--orange);
  opacity: 0.6;
}
.hero-caption .bracket {
  color: var(--ink-mute);
  font-weight: 400;
  font-family: var(--display);
  font-size: 1.15em;
}

/* massive stacked headline — overrides .hero-title behavior */
.hero-stacked {
  font-family: var(--display);
  font-weight: normal;
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  letter-spacing: -0.04em;
  line-height: 0.95;
  text-transform: uppercase;
  margin-bottom: 1.8rem;
  text-wrap: balance;
}
.hero-stacked span {
  display: block;
}
.hero-stacked .bright { color: var(--ink); }
.hero-stacked .muted { color: rgba(249, 249, 249, 0.32); }
.hero-stacked .accent { color: var(--orange); }

/* simplified hero-sub copy */
.hero-stacked + .hero-sub {
  font-size: 1rem;
  color: var(--ink-dim);
  line-height: 1.6;
  margin-bottom: 2.2rem;
  max-width: 32rem;
}

/* hero glow blob — add atmospheric depth */
#hero .glow-blob {
  z-index: 0;
}
#hero .hero-grid {
  position: relative;
  z-index: 1;
}

/* small stat badge overlay — Reload "85% RELOADS" vibe */
.hero-stat-badge {
  position: absolute;
  bottom: 8%;
  left: -4%;
  padding: 0.9rem 1.2rem 0.95rem;
  background: rgba(15, 9, 5, 0.85);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(232, 80, 2, 0.32);
  border-radius: 14px;
  display: flex; align-items: center; gap: 0.9rem;
  z-index: 4;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  animation: badgePop 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.4s backwards;
}
@keyframes badgePop {
  from { opacity: 0; transform: translateY(8px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-stat-badge .v {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--orange);
}
.hero-stat-badge .l {
  font-size: 0.7rem;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
  line-height: 1.3;
  max-width: 9rem;
}
.hero-stat-badge .l strong { color: var(--ink); font-weight: 600; }
@media (max-width: 980px) {
  .hero-stat-badge { left: 0; bottom: -10%; }
}
@media (max-width: 540px) {
  .hero-stat-badge { display: none; }
}

/* =====================================================
   HERO v3 — Kinetic/Mischka hybrid
   Cinema case card replaces iPhone, big outline wordmark below
   ===================================================== */

/* Ensure hero contains the outline mark at bottom */
#hero {
  min-height: 100vh;
  padding-bottom: 0;
}

/* CINEMA CASE CARD — replaces iPhone */
.hero-cinema {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin-left: auto;
}
@media (max-width: 980px) { .hero-cinema { max-width: 480px; margin: 0 auto; } }

.cinema-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 30% 20%, rgba(232, 80, 2, 0.42), transparent 65%),
    radial-gradient(ellipse 80% 60% at 80% 80%, rgba(193, 8, 1, 0.5), transparent 60%),
    linear-gradient(155deg, #2a0e09 0%, #160806 50%, #050302 100%);
  border: 1px solid rgba(232, 80, 2, 0.28);
  box-shadow:
    0 50px 120px rgba(0, 0, 0, 0.7),
    0 20px 60px rgba(232, 80, 2, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.6s var(--ease-out-cubic);
  cursor: pointer;
}
.cinema-card:hover { transform: translateY(-4px) scale(1.005); }

/* Subtle texture / grain inside card */
.cinema-card::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Top label on card — "case 04" */
.cinema-tag {
  position: absolute;
  top: 1.3rem; left: 1.3rem;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.4rem 0.9rem;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.cinema-tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
  animation: tagPulse 1.8s ease-in-out infinite;
}
@keyframes tagPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(232,80,2,0.6); }
  50% { opacity: 0.5; box-shadow: 0 0 0 6px rgba(232,80,2,0); }
}

/* Play button — centered, oversized */
.cinema-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 78px; height: 78px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: all 0.35s var(--ease-out-cubic);
}
.cinema-card:hover .cinema-play {
  background: var(--orange);
  border-color: var(--orange);
  transform: translate(-50%, -50%) scale(1.08);
}
.cinema-play svg { width: 26px; height: 26px; margin-left: 4px; fill: rgba(255,255,255,0.95); }

/* Bottom info block */
.cinema-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.6rem 1.5rem 1.4rem;
  background: linear-gradient(to top, rgba(5, 3, 2, 0.85) 30%, transparent);
  z-index: 2;
}
.cinema-info .nm {
  font-family: var(--display); font-weight: normal;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.cinema-info .meta {
  font-size: 0.78rem;
  color: rgba(249, 249, 249, 0.65);
  letter-spacing: 0.02em;
}
.cinema-info .meta strong { color: var(--orange); font-weight: 600; }

/* Move the stat badge — overlap card on right */
#hero .hero-stat-badge {
  position: absolute;
  bottom: 12%; left: -8%;
  z-index: 4;
}
@media (max-width: 980px) {
  #hero .hero-stat-badge { left: 0; bottom: -4%; }
}

/* MASSIVE OUTLINE WORDMARK at bottom of hero — Kinetic signature */
.hero-outline-mark {
  position: relative;
  padding: 6rem 0 0;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}
.hero-outline-mark .text {
  font-family: var(--display);
  font-weight: normal;
  font-size: clamp(5rem, 18vw, 18rem);
  letter-spacing: -0.05em;
  line-height: 0.85;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(249, 249, 249, 0.18);
  text-stroke: 1.5px rgba(249, 249, 249, 0.18);
  display: block;
  transform: translateY(20%);
}
.hero-outline-mark .text .dot {
  color: var(--orange);
  -webkit-text-stroke: 0;
  text-stroke: 0;
}

/* Tighten hero-grid on the new design */
#hero .hero-grid {
  align-items: center;
}

/* =====================================================
   HERO v4 — RELOAD-STYLE FULL-BLEED CINEMATIC
   Headline top-right, floating cards, service pills
   ===================================================== */

/* Reset / override prior hero v3 layout */
#hero.hero-v4 {
  position: relative;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
}

/* Full-bleed cinematic background — placeholder until real photo */
#hero.hero-v4 .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* AI-generated luxury villa shot — sunset light through glass */
  background:
    linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 35%, transparent 60%),
    url('assets/hero/portrait.jpg') center center / cover no-repeat;
}
#hero.hero-v4 .hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Vignette darkening for text legibility */
#hero.hero-v4 .hero-vignette {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.1) 25%, transparent 50%, rgba(0,0,0,0.4) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.4) 0%, transparent 40%);
  pointer-events: none;
}

/* Content layer — absolute positioned anchors */
#hero.hero-v4 .hero-stage {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  padding: 7rem var(--gutter) 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 2rem;
}
@media (max-width: 880px) {
  #hero.hero-v4 .hero-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    padding: 6rem 1.25rem 2rem;
  }
}

/* Top-LEFT small block */
.hv4-caption {
  grid-column: 1; grid-row: 1;
  align-self: start;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.hv4-caption .small-label {
  font-family: var(--display); font-weight: normal;
  font-size: clamp(0.85rem, 1vw, 1rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.96);
  line-height: 1.15;
}
.hv4-caption .small-label::after { content: '/'; color: rgba(255, 255, 255, 0.55); margin-left: 0.1em; }
.hv4-caption .small-desc {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  letter-spacing: 0.01em;
  max-width: 14rem;
}

/* Top-RIGHT massive headline */
.hv4-headline {
  grid-column: 2; grid-row: 1 / span 2;
  align-self: start;
  text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: 1.6rem;
}
@media (max-width: 880px) {
  .hv4-headline {
    grid-column: 1; grid-row: 2;
    text-align: left; align-items: flex-start;
  }
}
.hv4-headline h1 {
  font-family: var(--display); font-weight: normal;
  font-size: clamp(1.9rem, 4.4vw, 3.8rem);
  letter-spacing: -0.035em;
  line-height: 0.96;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
}
.hv4-headline h1 span { display: block; }
.hv4-headline h1 .muted { color: rgba(255, 255, 255, 0.35); }
.hv4-headline h1 .accent { color: var(--orange); }

.hv4-headline-bottom {
  display: flex; align-items: center; gap: 2rem;
  margin-top: 0.5rem;
}
@media (max-width: 540px) {
  .hv4-headline-bottom { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
}
.hv4-headline-bottom p {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.55;
  max-width: 22rem;
  text-align: left;
}
.hv4-headline-bottom p strong { color: var(--ink); font-weight: 600; }

.hv4-round-cta {
  flex-shrink: 0;
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
  text-decoration: none;
  transition: all 0.3s ease;
}
.hv4-round-cta:hover {
  background: var(--orange);
  border-color: var(--orange);
  transform: rotate(45deg);
}
.hv4-round-cta svg {
  width: 22px; height: 22px;
  stroke: currentColor;
  fill: none; stroke-width: 1.5;
  transition: transform 0.3s ease;
}

/* BOTTOM-LEFT — floating proof + CTA cards */
.hv4-cards {
  grid-column: 1; grid-row: 3;
  align-self: end;
  display: flex; gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 880px) {
  .hv4-cards { grid-column: 1; grid-row: 3; }
}

.hv4-card {
  border-radius: 18px;
  padding: 1.2rem 1.4rem;
  display: flex; flex-direction: column;
  min-width: 200px;
  position: relative;
}
.hv4-card.light {
  background: rgba(255, 255, 255, 0.96);
  color: #1a1a1a;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.hv4-card.light .tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #555;
}
.hv4-card.light .tag::before {
  content: ''; width: 16px; height: 16px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep, #C10801));
  flex-shrink: 0;
}
.hv4-card.light .big {
  font-family: var(--display); font-weight: normal;
  font-size: 2.2rem;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: 0.85rem;
  color: #1a1a1a;
}
.hv4-card.light .small-line {
  font-size: 0.7rem;
  color: #777;
  margin-top: 0.3rem;
  letter-spacing: 0.02em;
}

.hv4-card.glass {
  background: linear-gradient(155deg, rgba(232, 80, 2, 0.38), rgba(193, 8, 1, 0.22) 60%, rgba(50, 10, 5, 0.5));
  backdrop-filter: blur(18px);
  border: 1px solid rgba(232, 80, 2, 0.35);
  color: var(--ink);
  max-width: 270px;
}
.hv4-card.glass .top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem;
}
.hv4-card.glass .top-text {
  font-family: var(--display); font-weight: normal;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
}
.hv4-card.glass .top-icon {
  width: 28px; height: 28px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hv4-card.glass .top-icon svg {
  width: 14px; height: 14px;
  fill: rgba(255, 255, 255, 0.9);
}
.hv4-card.glass .glass-desc {
  margin-top: 1.4rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

/* BOTTOM-RIGHT — service pills */
.hv4-pills {
  grid-column: 2; grid-row: 3;
  align-self: end;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  justify-content: flex-end;
}
@media (max-width: 880px) {
  .hv4-pills { grid-column: 1; grid-row: 4; justify-content: flex-start; }
}
.hv4-pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 1.1rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-transform: uppercase;
  transition: all 0.2s ease;
  cursor: default;
}
.hv4-pill:hover {
  background: var(--orange);
  border-color: var(--orange);
}
.hv4-pill.is-featured {
  background: rgba(255, 255, 255, 0.95);
  color: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.95);
}
.hv4-pill.is-featured .star {
  color: var(--orange);
  font-size: 1em;
}

/* Mobile arrange */
@media (max-width: 880px) {
  .hv4-caption { grid-row: 1; }
  .hv4-headline { grid-row: 2; }
  .hv4-cards { grid-row: 3; }
  .hv4-pills { grid-row: 4; }
}

/* Hide previous hero v3 internals when v4 is active */
.hero-v4 .hero-cinema,
.hero-v4 .hero-outline-mark,
.hero-v4 .hero-grid,
.hero-v4 .hero-scroll { display: none; }

/* =====================================================
   HERO v5 — CLEAN LEFT-ALIGNED CINEMATIC
   Drops the 4-corner scatter; one focused content column
   ===================================================== */
#hero.hero-v5 {
  position: relative;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}
#hero.hero-v5 .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.42) 35%, rgba(0,0,0,0.05) 65%, transparent 100%),
    url('assets/hero/portrait.jpg') center center / cover no-repeat;
}
#hero.hero-v5 .hero-vignette {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 25%, transparent 70%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

#hero.hero-v5 .hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  min-height: 100vh;
  padding: 8rem var(--gutter) 4rem;
  display: flex; flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
}
@media (max-width: 880px) {
  #hero.hero-v5 .hero-content {
    padding: 6rem 1.25rem 3rem;
  }
}

#hero.hero-v5 .hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.4rem;
}
#hero.hero-v5 .hero-eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
  animation: ehPulse 1.8s ease-in-out infinite;
}
@keyframes ehPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(232,80,2,0.55); }
  50% { opacity: 0.55; box-shadow: 0 0 0 6px rgba(232,80,2,0); }
}

#hero.hero-v5 .hero-title {
  font-family: var(--display); font-weight: normal;
  font-size: clamp(2rem, 4.6vw, 4rem);
  letter-spacing: -0.035em;
  line-height: 1;
  text-transform: none;
  color: var(--ink);
  text-shadow: 0 4px 30px rgba(0,0,0,0.6);
  max-width: 16ch;
}
#hero.hero-v5 .hero-title .accent {
  display: block;
  color: var(--orange);
}

#hero.hero-v5 .hero-sub {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.6;
  max-width: 34rem;
  text-shadow: 0 2px 18px rgba(0,0,0,0.5);
  margin-bottom: 0.6rem;
}

#hero.hero-v5 .hero-actions {
  display: flex; gap: 0.75rem; flex-wrap: wrap;
}
#hero.hero-v5 .hero-actions .btn-line {
  border-color: rgba(255,255,255,0.45);
  color: var(--ink);
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
}
#hero.hero-v5 .hero-actions .btn-line:hover {
  border-color: var(--ink);
  background: rgba(255,255,255,0.08);
}

#hero.hero-v5 .hero-proof {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.01em;
}
#hero.hero-v5 .hero-proof strong { color: var(--ink); font-weight: 600; }
#hero.hero-v5 .hero-proof .sep { opacity: 0.4; }

/* Kill ALL hero v4 internals if class lingered */
#hero.hero-v5 .hv4-caption,
#hero.hero-v5 .hv4-headline,
#hero.hero-v5 .hv4-cards,
#hero.hero-v5 .hv4-pills,
#hero.hero-v5 .hero-stage { display: none; }

/* =====================================================
   SERVICE TILES — shrink from 2×2 squares to 4-col compact
   ===================================================== */
.service-tiles {
  grid-template-columns: repeat(4, 1fr) !important;
  max-width: var(--max) !important;
  gap: 12px !important;
}
@media (max-width: 980px) {
  .service-tiles { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px) {
  .service-tiles { grid-template-columns: 1fr !important; }
}
.service-tile {
  aspect-ratio: 4 / 5 !important;
  padding: 1.4rem !important;
  border-radius: 18px !important;
}
.service-tile .st-icon {
  width: 44% !important;
}
.service-tile .st-label {
  font-size: 1.05rem !important;
}
.service-tile .st-arrow {
  width: 30px !important; height: 30px !important;
}

/* =====================================================
   TESTIMONIAL CARDS — smaller text
   ===================================================== */
.testi-card {
  padding: 1.5rem !important;
  min-height: 200px !important;
}
.testi-card .tc-quote {
  font-size: 0.86rem !important;
  line-height: 1.55 !important;
}
.testi-card .tc-brand {
  font-size: 0.68rem !important;
  letter-spacing: 0.08em !important;
}
.testi-card .tc-brand .b-dot {
  width: 16px !important; height: 16px !important;
  font-size: 0.56rem !important;
}
.testi-card .tc-name {
  font-size: 0.78rem !important;
}
.testi-card .tc-role {
  font-size: 0.68rem !important;
}
.testi-card .tc-avatar {
  width: 32px !important; height: 32px !important;
  font-size: 0.68rem !important;
}

/* =====================================================
   HERO v6 — SPLIT: text left + animated iPhone right
   ===================================================== */
#hero.hero-v6 {
  position: relative;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}
#hero.hero-v6 .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.38) 38%, rgba(0,0,0,0.05) 70%, transparent 100%),
    url('assets/hero/portrait.jpg') center center / cover no-repeat;
}
#hero.hero-v6 .hero-vignette {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, transparent 25%, transparent 70%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

#hero.hero-v6 .hero-split {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  min-height: 100vh;
  padding: 7rem var(--gutter) 4rem;
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 980px) {
  #hero.hero-v6 .hero-split {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 6rem 1.25rem 3rem;
  }
}

/* LEFT content — reuse same look as v5 */
#hero.hero-v6 .hero-content {
  display: flex; flex-direction: column;
  gap: 1.1rem;
  align-items: flex-start;
}
#hero.hero-v6 .hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0;
}
#hero.hero-v6 .hero-eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
  animation: ehPulse 1.8s ease-in-out infinite;
}
#hero.hero-v6 .hero-title {
  font-family: var(--display); font-weight: normal;
  font-size: clamp(2.4rem, 5.4vw, 4.8rem);
  letter-spacing: -0.04em;
  line-height: 0.98;
  color: var(--ink);
  text-shadow: 0 4px 30px rgba(0,0,0,0.6);
  max-width: 16ch;
}
#hero.hero-v6 .hero-title .accent {
  display: block;
  color: var(--orange);
}
#hero.hero-v6 .hero-sub {
  font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.55;
  max-width: 34rem;
  text-shadow: 0 2px 18px rgba(0,0,0,0.5);
  margin-bottom: 0.3rem;
}
#hero.hero-v6 .hero-actions {
  display: flex; gap: 0.7rem; flex-wrap: wrap;
}
#hero.hero-v6 .hero-actions .btn-line {
  border-color: rgba(255,255,255,0.45);
  color: var(--ink);
  background: rgba(0,0,0,0.28);
  backdrop-filter: blur(6px);
}
#hero.hero-v6 .hero-actions .btn-line:hover {
  border-color: var(--ink);
  background: rgba(255,255,255,0.08);
}
#hero.hero-v6 .hero-proof {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.18);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.75);
}
#hero.hero-v6 .hero-proof strong { color: var(--ink); font-weight: 600; }
#hero.hero-v6 .hero-proof .sep { opacity: 0.4; }

/* RIGHT — iPhone with breathing animation + ground shadow */
#hero.hero-v6 .hero-device-wrap {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center;
  perspective: 1500px;
}
#hero.hero-v6 .hero-device {
  /* override existing transforms — animation takes over */
  animation: phoneBreathe 6.5s ease-in-out infinite;
  transform-origin: 50% 60%;
  filter: drop-shadow(0 30px 80px rgba(0, 0, 0, 0.65)) drop-shadow(0 10px 30px rgba(232, 80, 2, 0.18));
}
#hero.hero-v6 .hero-device:hover {
  /* pause animation on hover but keep current position */
  animation-play-state: paused;
}
@keyframes phoneBreathe {
  0%, 100% {
    transform: rotate(-4.5deg) translateY(10px);
  }
  50% {
    transform: rotate(-2deg) translateY(-10px);
  }
}

/* Ground shadow — bobs out of sync with phone */
#hero.hero-v6 .device-ground {
  position: absolute;
  bottom: -3.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 75%;
  height: 28px;
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 35%, transparent 70%);
  filter: blur(14px);
  animation: shadowBreathe 6.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shadowBreathe {
  0%, 100% {
    transform: translateX(-50%) scaleX(1) scaleY(1);
    opacity: 0.95;
    filter: blur(12px);
  }
  50% {
    transform: translateX(-50%) scaleX(0.78) scaleY(0.65);
    opacity: 0.55;
    filter: blur(18px);
  }
}

/* hide old device-shelf if it lingers */
#hero.hero-v6 .device-shelf { display: none; }

@media (prefers-reduced-motion: reduce) {
  #hero.hero-v6 .hero-device,
  #hero.hero-v6 .device-ground {
    animation: none;
  }
  #hero.hero-v6 .hero-device {
    transform: rotate(-3deg) translateY(0);
  }
}

@media (max-width: 980px) {
  #hero.hero-v6 .hero-device-wrap { max-width: 280px; margin: 0 auto; }
}

/* =====================================================
   HERO v6 — 3D TILTED PHONE + REAL REEL IMAGE
   ===================================================== */

/* Reel placeholder gets the actual cinematic image */
#hero.hero-v6 .reel-placeholder {
  background: url('assets/hero/reel-1.png') center center / cover no-repeat !important;
  display: block !important;
  position: relative;
}
/* Subtle dark overlay at top + bottom for UI readability */
#hero.hero-v6 .reel-placeholder::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 18%, transparent 55%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Play button stays centered on top of image */
#hero.hero-v6 .reel-placeholder .reel-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

/* 3D TILT + slow Y-axis rotation animation */
#hero.hero-v6 .hero-device-wrap {
  perspective: 1800px;
  transform-style: preserve-3d;
}
#hero.hero-v6 .hero-device {
  /* override prior animation */
  animation: phoneShowcase 8s ease-in-out infinite !important;
  transform-origin: 50% 60%;
  transform-style: preserve-3d;
  filter:
    drop-shadow(0 35px 70px rgba(0, 0, 0, 0.7))
    drop-shadow(0 15px 30px rgba(232, 80, 2, 0.25));
}
#hero.hero-v6 .hero-device:hover {
  animation-play-state: paused;
}
@keyframes phoneShowcase {
  0% {
    transform: perspective(1800px) rotateY(-22deg) rotateX(6deg) rotateZ(-3deg) translateY(8px);
  }
  50% {
    transform: perspective(1800px) rotateY(-8deg) rotateX(3deg) rotateZ(-1deg) translateY(-12px);
  }
  100% {
    transform: perspective(1800px) rotateY(-22deg) rotateX(6deg) rotateZ(-3deg) translateY(8px);
  }
}

/* Ground shadow follows the tilt */
#hero.hero-v6 .device-ground {
  bottom: -2.5rem !important;
  width: 80% !important;
  height: 32px !important;
  animation: groundShowcase 8s ease-in-out infinite !important;
}
@keyframes groundShowcase {
  0% {
    transform: translateX(-50%) scaleX(1) scaleY(1);
    opacity: 0.95;
    filter: blur(12px);
  }
  50% {
    transform: translateX(-50%) scaleX(0.7) scaleY(0.55);
    opacity: 0.45;
    filter: blur(20px);
  }
  100% {
    transform: translateX(-50%) scaleX(1) scaleY(1);
    opacity: 0.95;
    filter: blur(12px);
  }
}

/* Add subtle reflective shine across the phone glass on rotation */
#hero.hero-v6 .hero-device-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 6;
  animation: glassShine 8s ease-in-out infinite;
}
@keyframes glassShine {
  0%, 100% { transform: translateX(-30%); opacity: 0; }
  45% { opacity: 0.7; }
  50% { transform: translateX(30%); opacity: 1; }
  55% { opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  #hero.hero-v6 .hero-device,
  #hero.hero-v6 .device-ground,
  #hero.hero-v6 .hero-device-screen::before {
    animation: none !important;
  }
  #hero.hero-v6 .hero-device {
    transform: perspective(1800px) rotateY(-15deg) rotateX(4deg) !important;
  }
}

/* =====================================================
   CASE STUDY HERO CARD — chart visualization
   ===================================================== */
.case-study-card {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  border-radius: 26px;
  border: 1px solid rgba(232, 80, 2, 0.28);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232, 80, 2, 0.16), transparent 60%),
    radial-gradient(ellipse 60% 80% at 100% 100%, rgba(193, 8, 1, 0.18), transparent 65%),
    linear-gradient(155deg, #1d100a 0%, #120804 60%, #0a0503 100%);
  padding: 3rem;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 3rem; align-items: center;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(232, 80, 2, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
@media (max-width: 880px) {
  .case-study-card { grid-template-columns: 1fr; padding: 2rem 1.6rem; gap: 2rem; }
}

.csc-left .csc-label {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1rem;
  display: inline-flex; align-items: center; gap: 0.55rem;
}
.csc-left .csc-label::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
  animation: ehPulse 1.8s ease-in-out infinite;
}
.csc-left .csc-title {
  font-family: var(--display); font-weight: normal;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 0.65rem;
}
.csc-left .csc-title .accent { color: var(--orange); }
.csc-left .csc-loc {
  font-size: 0.86rem;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  margin-bottom: 1.4rem;
}
.csc-left .csc-desc {
  font-size: 0.95rem;
  color: var(--ink-dim);
  line-height: 1.6;
  margin-bottom: 1.8rem;
  max-width: 28rem;
}
.csc-left .csc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.csc-stat {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(232, 80, 2, 0.18);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  display: flex; flex-direction: column; gap: 0.2rem;
}
.csc-stat .v {
  font-family: var(--display); font-weight: normal;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--orange);
}
.csc-stat .l {
  font-size: 0.68rem;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Chart container */
.csc-chart {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.65) 100%);
  border: 1px solid rgba(232, 80, 2, 0.22);
  border-radius: 18px;
  overflow: hidden;
  padding: 1.6rem;
}
.csc-chart-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 1rem;
}
.csc-chart-header .h-title {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.csc-chart-header .h-trend {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.72rem; font-weight: 700;
  color: var(--orange);
  padding: 0.25rem 0.55rem;
  background: rgba(232, 80, 2, 0.14);
  border: 1px solid rgba(232, 80, 2, 0.28);
  border-radius: 9999px;
}
.csc-chart-header .h-trend svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.csc-chart-svg {
  width: 100%;
  height: calc(100% - 56px);
}
/* line draws on view */
.csc-chart-svg .line-path {
  fill: none;
  stroke: var(--orange);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 14px rgba(232, 80, 2, 0.65));
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawLine 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}
@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}
.csc-chart-svg .area {
  fill: url(#csc-gradient);
  opacity: 0;
  animation: fadeArea 1s ease 2s forwards;
}
@keyframes fadeArea { to { opacity: 1; } }
.csc-chart-svg .point {
  fill: var(--orange);
  stroke: #fff;
  stroke-width: 1.5;
  opacity: 0;
  animation: popPoint 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.csc-chart-svg .point.p1 { animation-delay: 1.0s; }
.csc-chart-svg .point.p2 { animation-delay: 1.4s; }
.csc-chart-svg .point.p3 { animation-delay: 1.8s; }
.csc-chart-svg .point.p4 { animation-delay: 2.2s; }
@keyframes popPoint {
  from { opacity: 0; r: 0; }
  to { opacity: 1; r: 5; }
}
.csc-chart-svg .grid-line { stroke: rgba(255,255,255,0.06); stroke-width: 1; }

/* =====================================================
   RESULTS PANEL — Mischka style big stats column
   ===================================================== */
.results-panel {
  position: relative;
  padding: 8rem var(--gutter);
  overflow: hidden;
}
.results-panel .glow-blob { z-index: 0; }
.results-inner {
  position: relative; z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center;
}
@media (max-width: 880px) {
  .results-inner { grid-template-columns: 1fr; gap: 3rem; }
  .results-panel { padding: 5rem 1.25rem; }
}
.results-headline {
  font-family: var(--display); font-weight: normal;
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: -0.035em;
  line-height: 0.96;
  text-transform: uppercase;
}
.results-headline .bright { color: var(--ink); }
.results-headline .muted { color: rgba(249, 249, 249, 0.32); }
.results-headline .accent { color: var(--orange); }

.results-stats {
  display: flex; flex-direction: column;
  gap: 3rem;
}
.r-stat {
  display: flex; flex-direction: column; gap: 0.3rem;
}
.r-stat .rv {
  font-family: var(--display); font-weight: normal;
  font-size: clamp(3rem, 8vw, 6.5rem);
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: var(--ink);
  display: flex; align-items: flex-start;
}
.r-stat .rv .x {
  font-size: 0.35em;
  color: var(--orange);
  margin-left: 0.05em;
  margin-top: 0.2em;
  font-weight: normal;
}
.r-stat .rl {
  font-size: 0.86rem;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  max-width: 22rem;
}

/* =====================================================
   CASE IMAGE — when actual photo available
   ===================================================== */
.case-img.has-image {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  filter: brightness(0.92) saturate(1.05);
  transition: filter 0.5s ease, transform 0.7s var(--ease-out-cubic);
}
.case-img-wrap:hover .case-img.has-image {
  filter: brightness(1.05) saturate(1.1);
  /* No transform — image stays static, the frame around it scales instead */
}
.case-img-wrap .case-img.has-image + .case-placeholder { display: none; }

/* =====================================================
   GLOW BLOB SWEEP — atmospheric ambient lighting
   Apply to many sections via wrappers
   ===================================================== */
.has-ambient {
  position: relative;
  overflow: hidden;
}
.has-ambient > * { position: relative; z-index: 1; }
.has-ambient .glow-blob { z-index: 0; }

/* =====================================================
   ORANGE BACKDROP GLOW ON HOVER — case rows + portfolio cards
   ===================================================== */

/* Case rows on homepage — alternating layout */
.case-row {
  position: relative;
  isolation: isolate;
  transition: transform 0.5s var(--ease-out-cubic);
}
.case-row::before {
  content: '';
  position: absolute;
  inset: -3rem;
  background:
    radial-gradient(ellipse 60% 70% at 30% 50%, rgba(232, 80, 2, 0.4), transparent 70%),
    radial-gradient(ellipse 50% 70% at 70% 50%, rgba(193, 8, 1, 0.28), transparent 65%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: -1;
  filter: blur(50px);
}
.case-row:hover::before {
  opacity: 1;
}

/* Portfolio cards on portfolio.html — grid */
.portfolio-card {
  position: relative;
  isolation: isolate;
}
.portfolio-card::before {
  content: '';
  position: absolute;
  inset: -1.5rem;
  background: radial-gradient(ellipse 80% 90% at 50% 50%, rgba(232, 80, 2, 0.45), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: -1;
  filter: blur(35px);
}
.portfolio-card:hover::before {
  opacity: 1;
}

/* Portfolio card photo backgrounds */
.portfolio-card .pc-bg.has-image {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  filter: brightness(0.85) saturate(1.05);
  transition: filter 0.5s ease, transform 0.7s var(--ease-out-cubic);
}
.portfolio-card:hover .pc-bg.has-image {
  filter: brightness(1.05) saturate(1.12);
  /* No transform — image stays static, the card frame around it scales instead */
}
.portfolio-card .pc-bg.has-image + .pc-stamp { display: none; }

/* =====================================================
   GLOBAL HEADLINE SIZE REDUCTION
   Override prior huge clamp() values site-wide
   ===================================================== */

/* Base scale */
.h1 { font-size: clamp(1.9rem, 4vw, 3rem) !important; line-height: 1.02 !important; }
.h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem) !important; line-height: 1.04 !important; }
.h3 { font-size: clamp(1.2rem, 2vw, 1.6rem) !important; line-height: 1.1 !important; }

/* Display / hero-title (legacy) */
.display { letter-spacing: -0.025em; }
.hero-title { font-size: clamp(1.9rem, 4vw, 3rem) !important; }
.hero-title .sub-line { font-size: 0.65em !important; }

/* Page hero h1 (about/services/portfolio/refs/faq/contact) */
.page-hero .display.h1 {
  font-size: clamp(1.8rem, 3.8vw, 2.8rem) !important;
  line-height: 1.04 !important;
}

/* Mixed-weight headlines (h-mixed) */
.h-mixed {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.04 !important;
}

/* H-massive (caps display) */
.h-massive {
  font-size: clamp(2rem, 4.4vw, 3.4rem) !important;
  letter-spacing: -0.03em !important;
  line-height: 0.96 !important;
}

/* Results panel */
.results-headline {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem) !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
}
.r-stat .rv {
  font-size: clamp(2.2rem, 5vw, 3.8rem) !important;
  letter-spacing: -0.04em !important;
}

/* Hero v6 — main hero on homepage */
#hero.hero-v6 .hero-title {
  font-size: clamp(2rem, 4.2vw, 3.4rem) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.02 !important;
}

/* Stat tiles (homepage WHY) */
.stat-tile .st-value {
  font-size: clamp(2.2rem, 4.4vw, 3.4rem) !important;
}

/* Big stats (Mischka style) — if still used */
.big-stat .bv {
  font-size: clamp(2rem, 4.4vw, 3.4rem) !important;
}

/* Metric (older WHY pattern) */
.metric .v {
  font-size: clamp(2.4rem, 5vw, 3.8rem) !important;
}

/* Final CTA / cta-card h2 */
.cta-card h2 {
  font-size: clamp(1.9rem, 4vw, 3rem) !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
}
.final-cta h2.display {
  font-size: clamp(1.8rem, 3.8vw, 2.8rem) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.04 !important;
}

/* Reels tiles & case row headings (inner sections) */
.reel-cap-title { font-size: 0.95rem !important; }
.case-body h3 { font-size: clamp(1.25rem, 2.2vw, 1.7rem) !important; line-height: 1.08 !important; }
.case-body .case-stat .num { font-size: clamp(1.1rem, 2vw, 1.5rem) !important; }

/* Pullquote */
.pullquote blockquote {
  font-size: clamp(1.4rem, 2.6vw, 2rem) !important;
  line-height: 1.18 !important;
}

/* Case study card (chart section) */
.csc-left .csc-title {
  font-size: clamp(1.4rem, 2.6vw, 2rem) !important;
  line-height: 1.08 !important;
}

/* Reduce massive numbers in services + about page where they might appear */
.section-head .display.h2,
.section-head h2.display {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem) !important;
  line-height: 1.04 !important;
}

/* Project page hero */
.proj-hero h1, .proj-hero .display.h1 {
  font-size: clamp(1.8rem, 3.8vw, 2.8rem) !important;
}

/* Massive wordmark (if any residue) */
.massive-mark .text,
.hero-outline-mark .text {
  font-size: clamp(3rem, 10vw, 9rem) !important;
}

/* =====================================================
   HERO-ONLY OVERRIDE — bigger text + pushed further left
   Overrides the global reduction sweep above
   ===================================================== */

/* Wider left column + reduced left padding → content sits closer to edge */
#hero.hero-v6 .hero-split {
  grid-template-columns: 1.7fr 1fr !important;
  gap: 2.4rem !important;
  padding-left: clamp(1.25rem, 2.5vw, 2.4rem) !important;
  padding-right: clamp(1.25rem, 2.5vw, 2.4rem) !important;
}

/* Restore bigger hero title (overrides .hero-title in global sweep) */
#hero.hero-v6 .hero-title {
  font-size: clamp(2.4rem, 5.6vw, 4.8rem) !important;
  letter-spacing: -0.04em !important;
  line-height: 0.98 !important;
  max-width: 20ch !important;
}

/* Bigger eyebrow */
#hero.hero-v6 .hero-eyebrow {
  font-size: 0.88rem !important;
}

/* Bigger sub */
#hero.hero-v6 .hero-sub {
  font-size: 1.14rem !important;
  max-width: 36rem !important;
}

/* Bigger proof line */
#hero.hero-v6 .hero-proof {
  font-size: 0.98rem !important;
}

/* Hero CTAs slightly bigger */
#hero.hero-v6 .hero-actions .btn {
  font-size: 0.95rem !important;
  padding: 0.95rem 1.5rem !important;
}

@media (max-width: 980px) {
  #hero.hero-v6 .hero-split {
    grid-template-columns: 1fr !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  #hero.hero-v6 .hero-title {
    font-size: clamp(2rem, 7vw, 3.4rem) !important;
  }
}

/* =====================================================
   FAQ — OMNI-style glow accordion
   ===================================================== */

/* Big FAQ wordmark in page hero */
.faq-mark {
  font-family: var(--display) !important;
  font-weight: normal !important;
  font-size: clamp(5rem, 16vw, 11rem) !important;
  letter-spacing: -0.06em !important;
  line-height: 0.9 !important;
  color: var(--ink) !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

/* FAQ list spacing */
.faq-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  max-width: var(--max) !important;
  margin: 0 auto !important;
  border: none !important;
}

/* Each FAQ card with strong orange glow from the left */
.faq-item {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(232, 80, 2, 0.32) !important;
  background:
    radial-gradient(ellipse 55% 130% at 18% 50%, rgba(255, 100, 30, 0.55), transparent 55%),
    radial-gradient(ellipse 35% 100% at 5% 50%, rgba(232, 80, 2, 0.85), transparent 60%),
    linear-gradient(90deg, rgba(40, 12, 5, 0.5) 0%, rgba(15, 8, 5, 0.92) 55%, rgba(8, 4, 2, 0.96) 100%) !important;
  box-shadow:
    0 16px 40px rgba(232, 80, 2, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.4s var(--ease-out-cubic);
  padding: 0 !important;
}
/* Subtle outer halo extending past the left edge */
.faq-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 25% 90% at -5% 50%, rgba(255, 200, 100, 0.18), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.faq-item:hover {
  border-color: rgba(232, 80, 2, 0.55) !important;
  box-shadow:
    0 20px 50px rgba(232, 80, 2, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
.faq-item.open {
  border-color: rgba(255, 100, 30, 0.65) !important;
  box-shadow:
    0 24px 60px rgba(232, 80, 2, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Question button — uppercase, Archivo Black */
.faq-q {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 2rem !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  color: var(--ink) !important;
  text-align: left;
  text-transform: uppercase;
  font-family: var(--display) !important;
  font-weight: normal !important;
  letter-spacing: 0 !important;
  font-size: clamp(0.85rem, 1.1vw, 1rem) !important;
  line-height: 1.3 !important;
}
.faq-q:hover { color: var(--ink) !important; }

/* Hide roman numerals (i. ii. iii.) — reference doesn't use them */
.faq-q .faq-no {
  display: none !important;
}
.faq-q > span:not(.faq-icon):not(.faq-no) {
  flex: 1;
}

/* Plus / minus icon — orange, rotates to × when open */
.faq-q .faq-icon {
  width: 32px !important;
  height: 32px !important;
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--orange) !important;
  font-size: 1.6rem !important;
  font-weight: 300 !important;
  font-family: var(--sans) !important;
  line-height: 1 !important;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease !important;
  border: none !important;
  background: transparent !important;
  text-transform: none !important;
}
.faq-item.open .faq-q .faq-icon {
  transform: rotate(45deg);
}

/* Answer reveal — smooth max-height */
.faq-a {
  position: relative;
  z-index: 2;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  border-top: 1px solid transparent;
}
.faq-item.open .faq-a {
  max-height: 600px;
  border-top-color: rgba(255, 255, 255, 0.08);
}
.faq-a > div {
  padding: 1.3rem 2rem 1.6rem !important;
}
.faq-a p {
  font-size: 0.9rem !important;
  color: rgba(255, 255, 255, 0.78) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  font-family: var(--sans) !important;
}
.faq-a em {
  color: var(--ink) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-family: var(--sans) !important;
}
.faq-a a {
  color: var(--orange) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(232, 80, 2, 0.45) !important;
}
.faq-a a:hover {
  border-bottom-color: var(--orange) !important;
}

/* Hide the issue mark on FAQ section since the wordmark replaces it */
body[data-page="faq"] .issue-mark { display: none !important; }

/* =====================================================
   HERO REEL VIDEO — autoplay, muted, loop, plays in phone
   ===================================================== */
#hero.hero-v6 .reel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  display: block;
  background: #050302;
  /* Match parent screen radius — Safari needs explicit clip on <video> */
  border-radius: 36px;
  -webkit-border-radius: 36px;
  /* Force GPU compositing layer so border-radius properly clips the video frames */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Hard clip — bulletproof on iOS Safari */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
}

/* Make sure the screen creates its own stacking + clip context */
#hero.hero-v6 .hero-device-screen {
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
}

/* Subtle dark overlay for username/action UI readability */
#hero.hero-v6 .hero-device-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.35) 0%,
    transparent 18%,
    transparent 55%,
    rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Make sure overlay UI (username, like/comment/share) sits above the video */
#hero.hero-v6 .reel-ui,
#hero.hero-v6 .island,
#hero.hero-v6 .status {
  z-index: 4 !important;
}

/* Pause animation on hover to let the user see the reel clearly */
#hero.hero-v6 .hero-device:hover .reel-video {
  /* nothing; video keeps playing */
}

@media (prefers-reduced-motion: reduce) {
  #hero.hero-v6 .reel-video {
    /* respect user reduced motion — pause autoplay */
    animation-play-state: paused;
  }
}

/* =====================================================
   HERO v6 — CLEAN VIDEO IN BIGGER MOCKUP
   Hide UI overlay, video fills the screen, mockup enlarged
   ===================================================== */

/* Bigger iPhone */
#hero.hero-v6 .hero-device {
  max-width: 360px !important;
}
@media (max-width: 980px) {
  #hero.hero-v6 .hero-device { max-width: 280px !important; }
}

/* Adjust grid so the bigger phone has room */
#hero.hero-v6 .hero-split {
  grid-template-columns: 1.4fr 1fr !important;
  gap: 2.5rem !important;
}

/* Hide all Instagram-style overlay UI — video should play clean */
#hero.hero-v6 .island,
#hero.hero-v6 .status,
#hero.hero-v6 .reel-ui,
#hero.hero-v6 .hero-device-screen::after {
  display: none !important;
}

/* Make sure video fills the screen perfectly, no extras */
#hero.hero-v6 .reel-video {
  object-fit: cover !important;
  object-position: center !important;
  width: 100% !important;
  height: 100% !important;
}

/* Drop the parent screen mask (we don't need extra clip now that UI is gone) */
#hero.hero-v6 .hero-device-screen {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  overflow: hidden !important;
}

/* =====================================================
   PHONE SIZE + HARD CLIP video at rounded corners
   ===================================================== */

/* Reduce mockup size */
#hero.hero-v6 .hero-device {
  max-width: 290px !important;
}
@media (max-width: 980px) {
  #hero.hero-v6 .hero-device { max-width: 250px !important; }
}

/* Adjust grid back — more space for text since phone is smaller */
#hero.hero-v6 .hero-split {
  grid-template-columns: 1.65fr 1fr !important;
  gap: 2.4rem !important;
}

/* Hard geometric clip on the video — forces respect of rounded corners
   This is more reliable than border-radius + overflow hidden for video elements */
#hero.hero-v6 .reel-video {
  clip-path: inset(0 round 34px);
  -webkit-clip-path: inset(0 round 34px);
}

/* Belt + suspenders — also clip the screen container with clip-path
   so nothing slips past the rounded bottom curve */
#hero.hero-v6 .hero-device-screen {
  clip-path: inset(0 round 36px);
  -webkit-clip-path: inset(0 round 36px);
}

/* =====================================================
   VIDEO FIT INSIDE MOCKUP — no crop, no overflow
   ===================================================== */
#hero.hero-v6 .reel-video {
  /* CONTAIN — fits entire video, may show black bars if aspect mismatched */
  object-fit: contain !important;
  background: #050505 !important;
  /* Inset slightly so any rendering bleed stays inside the screen */
  inset: 4px !important;
  width: calc(100% - 8px) !important;
  height: calc(100% - 8px) !important;
}

/* =====================================================
   REELS — 3 FÁZE SYSTEM (phase badges + result line)
   ===================================================== */

/* Hide the old roman numeral — replaced by phase badge */
.reels-grid .reel-tile .reel-num { display: none !important; }

/* Phase badge — top-left of each tile */
.reels-grid .reel-tile .reel-phase {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.7rem 0.4rem;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(232, 80, 2, 0.4);
  border-radius: 9999px;
  font-family: var(--display);
  font-weight: normal;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.reels-grid .reel-tile .reel-phase::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 6px rgba(232, 80, 2, 0.85);
}

/* Result row inside caption */
.reels-grid .reel-tile .reel-cap {
  display: flex; flex-direction: column; gap: 0.25rem;
}
.reels-grid .reel-tile .reel-cap-title {
  font-family: var(--display);
  font-size: 0.92rem !important;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
}
.reels-grid .reel-tile .reel-cap-sub {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.01em;
}
.reels-grid .reel-tile .reel-cap-result {
  margin-top: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
}
.reels-grid .reel-tile .reel-cap-result strong {
  color: var(--orange);
  font-weight: 600;
}

/* =====================================================
   CASE STUDY — CLIENT TESTIMONIAL VIDEO CARD
   (replaces the chart on the right side of case study card)
   ===================================================== */
.csc-testimonial {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
}

/* Top label with pulsing live dot */
.cst-label {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 200, 140, 0.9);
}
.cst-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 8px rgba(232, 80, 2, 0.8);
  animation: ehPulse 1.8s ease-in-out infinite;
}

/* Vertical video frame — 9:16 aspect, rounded, orange glow */
.cst-frame {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  background: #050302;
  border: 1px solid rgba(232, 80, 2, 0.32);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.6),
    0 15px 40px rgba(232, 80, 2, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  clip-path: inset(0 round 20px);
  -webkit-clip-path: inset(0 round 20px);
}

/* Video fills frame */
.cst-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  background: #050302;
  z-index: 1;
}

/* Play overlay — visible only when no video file present (poster shows) */
.cst-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  pointer-events: none; /* purely decorative since video autoplays */
}
.cst-play svg { width: 20px; height: 20px; margin-left: 3px; }

/* Caption below frame */
.cst-caption {
  display: flex; flex-direction: column;
  gap: 0.2rem;
  text-align: center;
}
.cst-caption strong {
  font-family: var(--display);
  font-weight: normal;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cst-caption span {
  font-size: 0.78rem;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}

@media (max-width: 880px) {
  .csc-testimonial { margin-top: 1rem; }
  .cst-frame { max-width: 260px; }
}

/* =====================================================
   HERO VIDEO PERFECT FIT — works with JS aspect adapter
   Container aspect-ratio is set by JS to match video,
   so object-fit: cover = exact fit, no overflow, no letterbox.
   ===================================================== */

/* Override the contain/inset 4px from before — back to cover, full bleed */
#hero.hero-v6 .reel-video {
  object-fit: cover !important;
  object-position: center !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #050302 !important;
}

/* Device frame — aspect ratio is set by JS based on actual video metadata */
#hero.hero-v6 .hero-device {
  /* Initial fallback aspect — JS overrides once video metadata loads */
  aspect-ratio: 9 / 16 !important;
  height: auto !important;
}

/* =====================================================
   FINAL HERO VIDEO FIT — standard iPhone, video shrunk inside
   ===================================================== */

/* Reset iPhone to standard vertical aspect (9:19.5) */
#hero.hero-v6 .hero-device {
  aspect-ratio: 9 / 19.5 !important;
  max-width: 280px !important;
  height: auto !important;
}
@media (max-width: 980px) {
  #hero.hero-v6 .hero-device { max-width: 240px !important; }
}

/* Video sits inside the screen with safe inner padding —
   contain so it fits entirely, may show dark bars if aspect mismatch */
#hero.hero-v6 .reel-video {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 8px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #050505 !important;
  border-radius: 28px !important;
  clip-path: inset(0 round 28px) !important;
  -webkit-clip-path: inset(0 round 28px) !important;
}

/* Screen background is solid dark so the letterbox blends seamlessly */
#hero.hero-v6 .hero-device-screen {
  background: #050505 !important;
}

/* =====================================================
   FINAL FIX — clean reel video render (overrides ALL prior conflicts)
   ===================================================== */

/* Standard iPhone, aspect 9:19.5 */
#hero.hero-v6 .hero-device {
  aspect-ratio: 9 / 19.5 !important;
  max-width: 280px !important;
  height: auto !important;
}

/* The screen — dark bg, rounded, clipping */
#hero.hero-v6 .hero-device-screen {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  background: #050505 !important;
  border-radius: 36px !important;
  overflow: hidden !important;
  display: block !important;
  /* Reset any prior masks/clips that broke rendering */
  -webkit-mask-image: none !important;
  mask-image: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

/* The video — fills screen 100%, fits inside via contain, hard-clipped by parent */
#hero.hero-v6 .reel-video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #050505 !important;
  display: block !important;
  z-index: 1 !important;
  /* Reset masks/clips so video actually renders */
  border-radius: 0 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  transform: none !important;
}

/* =====================================================
   ABSOLUTE FINAL — video physically inside screen, never leaks
   ===================================================== */

/* The video sits INSIDE the screen with 14px safety margin on all sides.
   Even if browser fails to clip rounded corners, video is physically
   smaller than the screen and visibly nests inside. */
#hero.hero-v6 .reel-video {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  width: calc(100% - 28px) !important;
  height: calc(100% - 28px) !important;
  right: auto !important;
  bottom: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #050505 !important;
  display: block !important;
  z-index: 1 !important;
  /* Own rounded corners, smaller than the iPhone screen radius */
  border-radius: 26px !important;
  -webkit-border-radius: 26px !important;
  clip-path: inset(0 round 26px) !important;
  -webkit-clip-path: inset(0 round 26px) !important;
  overflow: hidden !important;
}

/* Reset any prior video transforms / masks left over */
#hero.hero-v6 .reel-video {
  transform: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  filter: none !important;
}

/* Make sure screen container is properly clipping at the rounded corner */
#hero.hero-v6 .hero-device-screen {
  overflow: hidden !important;
  border-radius: 36px !important;
  background: #050505 !important;
  clip-path: inset(0 round 36px) !important;
  -webkit-clip-path: inset(0 round 36px) !important;
}

/* =====================================================
   PERFECT FIT — iPhone aspect matches video aspect exactly
   Source video confirmed: 2160 × 3840 (9:16 vertical)
   ===================================================== */
#hero.hero-v6 .hero-device {
  aspect-ratio: 9 / 16 !important;
  max-width: 290px !important;
  height: auto !important;
}
@media (max-width: 980px) {
  #hero.hero-v6 .hero-device { max-width: 250px !important; }
}

/* Video fills the screen exactly — no overflow, no letterbox */
#hero.hero-v6 .reel-video {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #050505 !important;
  display: block !important;
  z-index: 1 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  transform: none !important;
}

/* =====================================================
   REEL TILE VIDEOS — fill the 9:16 tile, behind overlays
   ===================================================== */
.reels-grid .reel-tile {
  position: relative;
  overflow: hidden;
  /* Ensure rounded corners apply to children including <video> */
  isolation: isolate;
}

.reels-grid .reel-tile .reel-tile-video {
  position: absolute;
  inset: 0;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  display: block;
  background: #050505;
  /* Reset any inherited masks/transforms */
  border-radius: 0;
  transform: none;
}

/* Make sure overlays (phase badge, caption) sit ABOVE the video */
.reels-grid .reel-tile .reel-phase,
.reels-grid .reel-tile .reel-cap,
.reels-grid .reel-tile .reel-play {
  z-index: 3 !important;
}

/* Subtle gradient overlay for caption legibility */
.reels-grid .reel-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.35) 0%,
    transparent 18%,
    transparent 55%,
    rgba(0,0,0,0.7) 100%);
  pointer-events: none;
  z-index: 1;
}

/* The center play button stays only as placeholder; videos autoplay so hide it */
.reels-grid .reel-tile .reel-play {
  display: none;
}

/* =====================================================
   CASE TESTIMONIAL — interactive play/pause + sound toggle
   ===================================================== */

/* Hide the static play overlay since we now have interactive toggle */
.cst-frame .cst-play { display: none !important; }

/* Big centered play/pause toggle */
.cst-toggle {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.cst-toggle:hover {
  background: var(--orange);
  border-color: var(--orange);
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 12px 32px rgba(232, 80, 2, 0.45);
}
.cst-toggle svg {
  width: 24px; height: 24px;
  pointer-events: none;
}
.cst-toggle .ico-play { margin-left: 3px; }

/* Icon swap based on state */
.cst-frame[data-state="paused"] .cst-toggle .ico-pause { display: none; }
.cst-frame[data-state="paused"] .cst-toggle .ico-play  { display: block; }
.cst-frame[data-state="playing"] .cst-toggle .ico-play  { display: none; }
.cst-frame[data-state="playing"] .cst-toggle .ico-pause { display: block; }

/* Auto-fade toggle when playing, reveal on hover */
.cst-frame[data-state="playing"] .cst-toggle { opacity: 0; pointer-events: auto; }
.cst-frame[data-state="playing"]:hover .cst-toggle { opacity: 1; }

/* Sound (mute) toggle — bottom right corner */
.cst-sound {
  position: absolute;
  bottom: 12px; right: 12px;
  z-index: 3;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.25s ease;
}
.cst-sound:hover {
  background: var(--orange);
  border-color: var(--orange);
}
.cst-sound svg {
  width: 16px; height: 16px;
  pointer-events: none;
}

/* Icon swap based on muted state */
.cst-frame[data-muted="true"]  .cst-sound .ico-vol-on  { display: none; }
.cst-frame[data-muted="true"]  .cst-sound .ico-vol-off { display: block; }
.cst-frame[data-muted="false"] .cst-sound .ico-vol-on  { display: block; }
.cst-frame[data-muted="false"] .cst-sound .ico-vol-off { display: none; }

/* =====================================================
   SERVICE TILES — 3D AI ICONS (orange backlit product renders)
   ===================================================== */

/* Container for 3D PNG icon — replaces SVG */
.st-icon-3d {
  width: 78% !important;
  aspect-ratio: 1 !important;
  margin: 0 auto !important;
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* Atmospheric orange glow behind the 3D icon */
.st-icon-3d::before {
  content: '';
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at 50% 55%,
    rgba(255, 140, 50, 0.55) 0%,
    rgba(232, 80, 2, 0.35) 30%,
    transparent 70%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
  transition: opacity 0.45s var(--ease-out-cubic), filter 0.45s ease;
}

/* The 3D icon image itself */
.st-icon-3d img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(232, 80, 2, 0.4))
          drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
  transition: transform 0.55s var(--ease-out-cubic),
              filter 0.45s ease;
  pointer-events: none;
}

/* On hover — icon lifts + glow intensifies */
.service-tile:hover .st-icon-3d::before {
  opacity: 1;
  filter: blur(35px);
}
.service-tile:hover .st-icon-3d img {
  transform: translateY(-4px) scale(1.04);
  filter: drop-shadow(0 14px 30px rgba(232, 80, 2, 0.7))
          drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55));
}

/* Override the prior SVG-icon rules so they don't conflict */
.service-tile .st-icon-3d::after { display: none; }
.service-tile .st-icon-3d svg { display: none; }

/* Subtle floating animation — gives the 3D icons a "premium product" feel */
@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.st-icon-3d img {
  animation: iconFloat 4.5s ease-in-out infinite;
}
.service-tile:hover .st-icon-3d img {
  animation: none; /* hover transform takes over */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .st-icon-3d img { animation: none; }
}

/* =====================================================
   RESULTS PANEL — compact horizontal layout
   ===================================================== */

/* Tighten the outer padding */
.results-panel {
  padding: 4.5rem var(--gutter) !important;
}
@media (max-width: 880px) {
  .results-panel { padding: 3.5rem 1.25rem !important; }
}

/* Stack vertically: headline+intro on top, stats row below */
.results-inner.is-compact {
  grid-template-columns: 1fr !important;
  gap: 2.5rem !important;
}

/* 3-col horizontal stats row */
.results-stats.is-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  flex-direction: row !important;
  gap: 1.5rem !important;
  align-items: start;
}
@media (max-width: 720px) {
  .results-stats.is-row { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
}

/* Compact stat — smaller number, label below */
.results-stats.is-row .r-stat {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem !important;
  padding: 1.2rem 1.4rem !important;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.results-stats.is-row .r-stat:first-child {
  border-left: none;
  padding-left: 0;
}

.results-stats.is-row .r-stat .rv {
  font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
  letter-spacing: -0.04em !important;
  line-height: 0.95 !important;
}
.results-stats.is-row .r-stat .rv .x {
  font-size: 0.4em !important;
  margin-top: 0.15em !important;
}
.results-stats.is-row .r-stat .rl {
  font-size: 0.84rem !important;
  color: var(--ink-mute) !important;
  line-height: 1.45 !important;
  max-width: none !important;
  margin-top: 0.2rem !important;
}

/* =====================================================
   HERO VIDEO STAGE — no mockup, just floating video card
   ===================================================== */

/* Container — perspective context, max-width, aspect ratio matches video */
.hero-video-stage {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  perspective: 1500px;
  transform-style: preserve-3d;
  isolation: isolate;
}
@media (max-width: 980px) { .hero-video-stage { max-width: 270px; } }

/* Dual orange halo behind the video — atmospheric glow */
.hero-video-stage .hvs-halo {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(ellipse 55% 65% at 50% 50%,
    rgba(255, 100, 30, 0.55) 0%,
    rgba(232, 80, 2, 0.32) 35%,
    transparent 75%);
  filter: blur(50px);
  z-index: 0;
  pointer-events: none;
  animation: hvsHaloPulse 5.5s ease-in-out infinite;
}
.hero-video-stage .hvs-halo-2 {
  inset: -20%;
  background: radial-gradient(ellipse 60% 50% at 65% 80%,
    rgba(193, 8, 1, 0.45) 0%,
    transparent 70%);
  filter: blur(70px);
  animation: hvsHaloPulse 7s ease-in-out infinite reverse;
  opacity: 0.7;
}
@keyframes hvsHaloPulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

/* The video itself — clean rounded card, 3D tilt, float */
.hero-video-stage .hvs-video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 26px;
  background: #050505;
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.6),
    0 18px 40px rgba(232, 80, 2, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transform-origin: 50% 60%;
  animation: hvsFloat 7s ease-in-out infinite;
  will-change: transform;
}
.hero-video-stage:hover .hvs-video {
  animation-play-state: paused;
}
@keyframes hvsFloat {
  0%, 100% { transform: perspective(1500px) rotateY(-8deg) rotateX(3deg) translateY(8px); }
  50%      { transform: perspective(1500px) rotateY(-3deg) rotateX(1deg) translateY(-10px); }
}

/* Glass shine sweep across the video — feels like real reflection */
.hero-video-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 26px;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 70%);
  pointer-events: none;
  animation: hvsShine 7s ease-in-out infinite;
  mix-blend-mode: overlay;
}
@keyframes hvsShine {
  0%, 100% { transform: translateX(-30%); opacity: 0; }
  45%      { opacity: 0.7; }
  50%      { transform: translateX(30%); opacity: 1; }
  55%      { opacity: 0.6; }
}

/* Floating caption pill — bottom-left */
.hero-video-stage .hvs-pill {
  position: absolute;
  bottom: 14px; left: 14px;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.35rem 0.75rem 0.4rem;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(232, 80, 2, 0.4);
  border-radius: 9999px;
  font-family: var(--display);
  font-weight: normal;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  animation: hvsFloat 7s ease-in-out infinite;
}
.hero-video-stage .hvs-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 8px rgba(232, 80, 2, 0.9);
  animation: ehPulse 1.8s ease-in-out infinite;
}

/* Reduced motion — kill all animations, hold a sensible static pose */
@media (prefers-reduced-motion: reduce) {
  .hero-video-stage .hvs-video,
  .hero-video-stage .hvs-halo,
  .hero-video-stage .hvs-halo-2,
  .hero-video-stage::after,
  .hero-video-stage .hvs-pill { animation: none; }
  .hero-video-stage .hvs-video { transform: rotateY(-5deg) rotateX(2deg); }
}

/* =====================================================
   SERVICE TILES — clean cutout icons, perfectly centered
   ===================================================== */

/* Container takes full available area, centers absolutely */
.st-icon-3d {
  width: 100% !important;
  aspect-ratio: auto !important;
  height: 60% !important;
  margin: 0 !important;
  position: absolute !important;
  top: 8% !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Subtle orange halo behind cutout icon — atmospheric base */
.st-icon-3d::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 140, 50, 0.45) 0%,
    rgba(232, 80, 2, 0.25) 30%,
    transparent 65%);
  filter: blur(32px);
  z-index: 0;
  opacity: 0.85;
  transition: opacity 0.45s ease, filter 0.45s ease;
}

/* The cutout PNG — centered, scaled to fit, no clipping */
.st-icon-3d img {
  position: relative !important;
  z-index: 1 !important;
  width: auto !important;
  height: 100% !important;
  max-width: 80% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  filter: drop-shadow(0 10px 25px rgba(232, 80, 2, 0.55))
          drop-shadow(0 5px 12px rgba(0, 0, 0, 0.55));
  transition: transform 0.55s var(--ease-out-cubic),
              filter 0.45s ease;
  animation: iconFloat 4.5s ease-in-out infinite;
  margin: 0 auto;
}

/* Tile needs explicit position context so absolute children center */
.service-tile { position: relative; }

/* Make sure the bottom label stays anchored at the bottom of the tile */
.service-tile .st-bottom {
  position: relative;
  z-index: 2;
  margin-top: auto;
}

/* Hover — icon lifts cleanly, halo intensifies */
.service-tile:hover .st-icon-3d::before {
  opacity: 1;
  filter: blur(42px);
}
.service-tile:hover .st-icon-3d img {
  transform: translateY(-6px) scale(1.06);
  filter: drop-shadow(0 18px 38px rgba(232, 80, 2, 0.8))
          drop-shadow(0 8px 16px rgba(0, 0, 0, 0.65));
  animation: none;
}

@media (max-width: 720px) {
  .st-icon-3d { height: 55% !important; top: 10% !important; }
}

/* =====================================================
   FLOW BRIDGE — connects 3 reels section to case study result
   ===================================================== */
.flow-bridge {
  position: relative;
  padding: 3.5rem var(--gutter) 2rem;
  text-align: center;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(232, 80, 2, 0.04) 50%,
    transparent 100%);
}

.flow-bridge .fb-inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

/* Small kicker label */
.flow-bridge .fb-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  position: relative;
  padding-left: 1.5rem;
}
.flow-bridge .fb-label::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 1px;
  background: var(--orange);
}

/* Equation — the three videos summed up */
.flow-bridge .fb-equation {
  display: inline-flex;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--display);
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  flex-wrap: wrap;
  justify-content: center;
  line-height: 1.2;
}
.flow-bridge .fb-num {
  color: var(--ink);
  font-weight: normal;
}
.flow-bridge .fb-op {
  color: var(--ink-mute);
  font-weight: normal;
  font-size: 0.85em;
}
.flow-bridge .fb-total {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  color: var(--orange);
  font-size: 1.15em;
}
.flow-bridge .fb-total strong {
  font-weight: normal;
  font-size: 1.25em;
}
.flow-bridge .fb-unit {
  font-size: 0.7em;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}

/* Animated arrow — bouncing down */
.flow-bridge .fb-arrow {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(232, 80, 2, 0.12);
  border: 1px solid rgba(232, 80, 2, 0.42);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  animation: bridgeBob 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  box-shadow: 0 0 24px rgba(232, 80, 2, 0.22);
}
.flow-bridge .fb-arrow svg {
  width: 18px; height: 18px;
}
@keyframes bridgeBob {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* Result statement */
.flow-bridge .fb-result {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-family: var(--sans);
  color: var(--ink-dim);
  letter-spacing: -0.005em;
}
.flow-bridge .fb-result strong {
  font-family: var(--display);
  font-weight: normal;
  color: var(--ink);
  font-size: 1.15em;
  letter-spacing: -0.015em;
}

@media (prefers-reduced-motion: reduce) {
  .flow-bridge .fb-arrow { animation: none; }
}

@media (max-width: 600px) {
  .flow-bridge { padding: 2.5rem 1.25rem 1.5rem; }
  .flow-bridge .fb-equation {
    font-size: 0.95rem;
    gap: 0.4rem;
  }
  .flow-bridge .fb-arrow { width: 32px; height: 32px; }
  .flow-bridge .fb-arrow svg { width: 14px; height: 14px; }
}

/* =====================================================
   FLOW BRIDGE — MINIMAL (just an arrow + tiny label)
   ===================================================== */
.flow-bridge {
  padding: 2rem var(--gutter) 1.5rem !important;
  background: transparent !important;
}
.flow-bridge .fb-inner {
  gap: 0.9rem !important;
}
.flow-bridge .fb-label {
  font-size: 0.7rem !important;
  padding-left: 1.5rem !important;
}

/* =====================================================
   FOCUS TILES — 3 flip cards (front: question, back: detail)
   ===================================================== */

.focus-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 820px;
  margin: 0 auto;
}
@media (max-width: 880px) {
  .focus-tiles { grid-template-columns: 1fr; max-width: 360px; }
}

.focus-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  perspective: 1200px;
  cursor: pointer;
}

.focus-tile .ft-inner {
  position: relative;
  width: 100%; height: 100%;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
}

/* Flip on hover (desktop) and focus / .is-flipped (touch / keyboard) */
.focus-tile:hover .ft-inner,
.focus-tile:focus-within .ft-inner,
.focus-tile.is-flipped .ft-inner {
  transform: rotateY(180deg);
}

/* Front + back card shared base */
.focus-tile .ft-front,
.focus-tile .ft-back {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1.4rem 1.3rem 1.3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  border: 1px solid rgba(232, 80, 2, 0.22);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232, 80, 2, 0.18), transparent 60%),
    linear-gradient(155deg, #1d100a 0%, #120804 60%, #0a0503 100%);
  box-shadow:
    0 24px 50px rgba(232, 80, 2, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.focus-tile .ft-back {
  transform: rotateY(180deg);
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(232, 80, 2, 0.28), transparent 60%),
    linear-gradient(155deg, #261208 0%, #150805 60%, #0a0503 100%);
}

/* Label (top) */
.focus-tile .ft-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

/* Title (large display, bottom-aligned on front) */
.focus-tile .ft-title {
  font-family: var(--display);
  font-weight: normal;
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
  margin-top: auto;
}

/* Small hint at bottom of front */
.focus-tile .ft-hint {
  position: absolute;
  bottom: 0.85rem; right: 1.1rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.focus-tile .ft-hint::after {
  content: '↻';
  font-size: 0.85rem;
  letter-spacing: 0;
  color: rgba(232, 80, 2, 0.7);
}

/* Back description */
.focus-tile .ft-back p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.5;
  margin: 0;
  margin-top: 0.9rem;
}

/* FEATURED variant (tile 2) — full orange */
.focus-tile.is-featured .ft-front,
.focus-tile.is-featured .ft-back {
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, rgba(255, 91, 8, 0.4), transparent 60%),
    linear-gradient(155deg, #ff5b08 0%, #c10801 60%, #6e0500 100%);
  border-color: rgba(255, 200, 140, 0.4);
}
.focus-tile.is-featured .ft-back {
  background:
    radial-gradient(ellipse 80% 70% at 50% 100%, rgba(255, 130, 60, 0.45), transparent 60%),
    linear-gradient(155deg, #d10801 0%, #ff5b08 50%, #6e0500 100%);
}
.focus-tile.is-featured .ft-title { color: #fff; }
.focus-tile.is-featured .ft-label { color: rgba(255, 255, 255, 0.88); }
.focus-tile.is-featured .ft-back p { color: rgba(255, 255, 255, 0.95); }
.focus-tile.is-featured .ft-hint { color: rgba(255, 255, 255, 0.45); }
.focus-tile.is-featured .ft-hint::after { color: rgba(255, 255, 255, 0.85); }

/* Reduced motion — no flip, both sides show as stacked content */
@media (prefers-reduced-motion: reduce) {
  .focus-tile .ft-inner,
  .focus-tile:hover .ft-inner { transform: none !important; transition: none; }
  .focus-tile .ft-back {
    position: static;
    transform: none;
    margin-top: 14px;
  }
  .focus-tile { aspect-ratio: auto; }
}

/* Spread focus tiles wider — full container */
.focus-tiles {
  max-width: var(--max) !important;
  gap: 18px !important;
}
@media (max-width: 880px) {
  .focus-tiles { max-width: 360px !important; }
}

/* Focus tile front layout — title up under label, bigger */
.focus-tile .ft-front {
  justify-content: flex-start !important;
  gap: 1rem;
}
.focus-tile .ft-title {
  margin-top: 0 !important;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.03em !important;
}

/* Featured tile gets same treatment */
.focus-tile.is-featured .ft-front {
  justify-content: flex-start !important;
}

/* Make focus tile title even bigger */
.focus-tile .ft-title {
  font-size: clamp(2.1rem, 3.4vw, 3.2rem) !important;
  line-height: 0.96 !important;
}

/* =====================================================
   HERO TITLE ROTATOR — flips horizontally between
   "Videa, která prodávají." ↔ "Brand, který roste."
   ===================================================== */
#hero.hero-v6 .hero-title {
  perspective: 1500px;
}
.title-rotator {
  display: inline-grid;
  grid-template-areas: "stack";
  position: relative;
  transform-style: preserve-3d;
  animation: titleCycle 11s ease-in-out infinite;
  cursor: default;
}
.title-rotator .tr-front,
.title-rotator .tr-back {
  grid-area: stack;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: inline-block;
  white-space: nowrap;
}
.title-rotator .tr-back {
  color: var(--orange);
  transform: rotateY(180deg);
}

/* 11s loop with multiple spins each direction:
   0-27%   hold front
   27-42%  spin forward 900° (2.5 turns → lands on back)
   42-73%  hold back
   73-88%  spin back 900° more (total 1800° → lands on front)
   88-100% settle */
@keyframes titleCycle {
  0%, 27%   { transform: rotateY(0); }
  42%, 73%  { transform: rotateY(900deg); }
  88%, 100% { transform: rotateY(1800deg); }
}

/* Pause on hover so reader can finish parsing */
.title-rotator:hover { animation-play-state: paused; }

/* Accessibility — no flip, both phrases stack */
@media (prefers-reduced-motion: reduce) {
  .title-rotator {
    animation: none;
    transform-style: flat;
    display: inline-block;
  }
  .title-rotator .tr-front,
  .title-rotator .tr-back {
    grid-area: auto;
    display: block;
    backface-visibility: visible;
  }
  .title-rotator .tr-back { transform: none; }
}

/* =====================================================
   HERO ROTATOR — faster + motion blur on flip
   ===================================================== */
.title-rotator {
  animation: titleCycleFast 6s ease-in-out infinite !important;
  will-change: transform, filter;
}
.title-rotator .tr-front,
.title-rotator .tr-back {
  white-space: normal !important;
}

@keyframes titleCycleFast {
  /* hold front */
  0%, 30%   { transform: rotateY(0);       filter: blur(0); }
  /* flip forward — motion blur peaks mid-rotation */
  35%       { transform: rotateY(450deg);  filter: blur(10px); }
  /* lands on back, blur fades out */
  40%, 65%  { transform: rotateY(900deg);  filter: blur(0); }
  /* flip back — motion blur peaks mid-rotation */
  70%       { transform: rotateY(1350deg); filter: blur(10px); }
  /* lands on front */
  75%, 100% { transform: rotateY(1800deg); filter: blur(0); }
}

/* Tighten ft-back text for longer descriptions */
.focus-tile .ft-back p {
  font-size: 0.84rem !important;
  line-height: 1.5 !important;
  margin-top: 0.7rem !important;
}
/* Allow scroll if text overflows on small viewports */
.focus-tile .ft-back {
  overflow-y: auto !important;
}
.focus-tile .ft-back::-webkit-scrollbar {
  width: 4px;
}
.focus-tile .ft-back::-webkit-scrollbar-thumb {
  background: rgba(232, 80, 2, 0.4);
  border-radius: 2px;
}

/* =====================================================
   HERO ROTATOR — FINAL FIX
   1) Backface properly hidden — orange back text actually shows
   2) Stable dimensions — no layout shift during animation
   ===================================================== */

#hero.hero-v6 .hero-title {
  perspective: 1500px !important;
  /* Reserve space for both lines — locks vertical height so hero never shifts */
  min-height: calc(2.05em * 0.98) !important;
}

.title-rotator {
  display: inline-block !important;
  grid-template-areas: none !important;
  position: relative !important;
  transform-style: preserve-3d !important;
  animation: titleCycleFast 6s ease-in-out infinite !important;
  vertical-align: top !important;
  will-change: transform, filter !important;
}

/* Both faces: 3D context + backface hidden — required for the back to actually show */
.title-rotator .tr-front,
.title-rotator .tr-back {
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
  white-space: normal !important;
  grid-area: auto !important;
  display: block !important;
  margin: 0 !important;
}

/* Front face — sets the rotator's dimensions */
.title-rotator .tr-front {
  position: relative !important;
  transform: rotateY(0deg) translateZ(0) !important;
}

/* Back face — absolute, overlaps front, pre-rotated 180° */
.title-rotator .tr-back {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  transform: rotateY(180deg) translateZ(0) !important;
  color: var(--orange) !important;
}

/* =====================================================
   FOCUS TILE BACK — center text + bigger
   ===================================================== */
.focus-tile .ft-back {
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding: 1.6rem 1.6rem !important;
}
.focus-tile .ft-back .ft-label {
  text-align: center;
}
.focus-tile .ft-back p {
  font-size: clamp(0.95rem, 1.15vw, 1.1rem) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  text-align: center;
}
/* When centered, label sits subtly above the paragraph */
.focus-tile .ft-back .ft-label {
  margin-bottom: 0.9rem !important;
  display: block !important;
}
/* Hide overflow but no scrollbar — text should fit when bigger */
.focus-tile .ft-back {
  overflow: hidden !important;
}

/* =====================================================
   HERO ROTATOR — SPLIT: blur on outer wrap, rotation on inner
   (CSS filter on the rotating element kills preserve-3d
   and forces both faces to render — back text won't show.)
   ===================================================== */

/* Outer wrap — only filter blur, no transform */
.title-blur-wrap {
  display: inline-block !important;
  vertical-align: top !important;
  animation: titleBlurOnly 6s ease-in-out infinite !important;
  will-change: filter !important;
}

/* Inner rotator — only 3D rotation, NO filter */
.title-rotator {
  display: inline-block !important;
  position: relative !important;
  transform-style: preserve-3d !important;
  animation: titleSpinOnly 6s ease-in-out infinite !important;
  vertical-align: top !important;
  will-change: transform !important;
  grid-template-areas: none !important;
}

/* Both faces — 3D context + backface hidden */
.title-rotator .tr-front,
.title-rotator .tr-back {
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
  white-space: normal !important;
  display: block !important;
  margin: 0 !important;
  grid-area: auto !important;
}
.title-rotator .tr-front {
  position: relative !important;
  transform: rotateY(0deg) !important;
}
.title-rotator .tr-back {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  transform: rotateY(180deg) !important;
  color: var(--orange) !important;
}

@keyframes titleSpinOnly {
  0%, 30%   { transform: rotateY(0); }
  40%, 65%  { transform: rotateY(900deg); }
  75%, 100% { transform: rotateY(1800deg); }
}

@keyframes titleBlurOnly {
  0%, 30%   { filter: blur(0); }
  35%       { filter: blur(8px); }
  40%, 65%  { filter: blur(0); }
  70%       { filter: blur(8px); }
  75%, 100% { filter: blur(0); }
}

/* =====================================================
   FOCUS TILE BACK — label fixed top-left (match front),
   only the long text is centered
   ===================================================== */

.focus-tile .ft-back {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding: 1.4rem 1.3rem 1.3rem !important;
}

/* Label sits at top-left — exact same position as the front */
.focus-tile .ft-back .ft-label {
  display: block !important;
  text-align: left !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

/* Paragraph fills remaining space, centered vertically + horizontally */
.focus-tile .ft-back p {
  font-size: clamp(0.9rem, 1.05vw, 1.05rem) !important;
  line-height: 1.55 !important;
  text-align: center !important;
  margin: auto 0 !important;
  padding: 0 0.4rem !important;
  flex: 0 0 auto !important;
}

/* =====================================================
   HERO — single vertical flip + layout reset
   ===================================================== */

/* Single 180° flip on the X axis (vertical), shorter cycle */
@keyframes titleSpinVertical {
  0%, 32%   { transform: rotateX(0); }
  46%, 78%  { transform: rotateX(180deg); }
  92%, 100% { transform: rotateX(360deg); }
}
@keyframes titleBlurVertical {
  0%, 32%   { filter: blur(0); }
  39%       { filter: blur(9px); }
  46%, 78%  { filter: blur(0); }
  85%       { filter: blur(9px); }
  92%, 100% { filter: blur(0); }
}

/* Override the previous Y-axis animations */
.title-blur-wrap {
  animation: titleBlurVertical 4s ease-in-out infinite !important;
}
.title-rotator {
  animation: titleSpinVertical 4s ease-in-out infinite !important;
}

/* Faces — vertical orientation (rotate around X instead of Y) */
.title-rotator .tr-front {
  transform: rotateX(0deg) !important;
}
.title-rotator .tr-back {
  transform: rotateX(180deg) !important;
}

/* Hero split — bigger left bias for text, smaller right video */
#hero.hero-v6 .hero-split {
  grid-template-columns: 1.95fr 1fr !important;
  gap: 1.8rem !important;
}

/* Video stage — smaller, right-aligned in its column */
.hero-video-stage {
  max-width: 270px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}
@media (max-width: 980px) {
  .hero-video-stage {
    max-width: 240px !important;
    margin: 0 auto !important;
  }
  #hero.hero-v6 .hero-split { grid-template-columns: 1fr !important; }
}

/* Shift hero content (text + CTAs + proof) 2cm left on desktop */
@media (min-width: 980px) {
  #hero.hero-v6 .hero-content {
    margin-left: -2cm !important;
  }
}

/* More left shift */
@media (min-width: 980px) {
  #hero.hero-v6 .hero-content {
    margin-left: -4cm !important;
  }
}

/* Shift reel showcase further right on desktop */
@media (min-width: 980px) {
  .hero-video-stage {
    margin-right: -3cm !important;
    margin-left: auto !important;
  }
}

/* More gap — push text further left, video further right */
@media (min-width: 980px) {
  #hero.hero-v6 .hero-content {
    margin-left: -6cm !important;
  }
  .hero-video-stage {
    margin-right: -5cm !important;
    margin-left: auto !important;
  }
}

/* Enlarge reel showcase ~2cm taller (proportional, aspect 9:16) */
@media (min-width: 980px) {
  .hero-video-stage {
    max-width: 312px !important;
  }
}

/* Make hero video showcase bigger */
@media (min-width: 980px) {
  .hero-video-stage {
    max-width: 380px !important;
  }
}

/* =====================================================
   REELS — equalize all 3 tiles (no tilt, same size as Fáze 02)
   ===================================================== */
.reels-grid .reel-tile {
  width: 268px !important;
  transform: none !important;
}
.reels-grid .reel-tile:nth-child(1),
.reels-grid .reel-tile:nth-child(3) {
  transform: none !important;
}
.reels-grid .reel-tile:nth-child(2) {
  width: 268px !important;
}
.reels-grid .reel-tile:hover {
  transform: translateY(-6px) scale(1.02) !important;
}

@media (max-width: 880px) {
  .reels-grid .reel-tile { width: 200px !important; }
  .reels-grid .reel-tile:nth-child(2) { width: 200px !important; }
}
@media (max-width: 540px) {
  .reels-grid .reel-tile { width: 150px !important; }
  .reels-grid .reel-tile:nth-child(2) { width: 150px !important; }
}

/* =====================================================
   REELS — restore converging design (tilt + bigger center)
   ===================================================== */
.reels-grid .reel-tile {
  width: 244px !important;
}
.reels-grid .reel-tile:nth-child(1) {
  transform: rotate(-5deg) translateY(28px) scale(0.92) !important;
  transform-origin: bottom right;
  width: 244px !important;
}
.reels-grid .reel-tile:nth-child(2) {
  z-index: 2;
  width: 268px !important;
  transform: none !important;
}
.reels-grid .reel-tile:nth-child(3) {
  transform: rotate(5deg) translateY(28px) scale(0.92) !important;
  transform-origin: bottom left;
  width: 244px !important;
}
.reels-grid .reel-tile:hover {
  transform: rotate(0deg) translateY(0) scale(1.02) !important;
  z-index: 3 !important;
}

@media (max-width: 880px) {
  .reels-grid .reel-tile { width: 180px !important; }
  .reels-grid .reel-tile:nth-child(2) { width: 200px !important; }
}
@media (max-width: 540px) {
  .reels-grid .reel-tile { width: 130px !important; }
  .reels-grid .reel-tile:nth-child(2) { width: 145px !important; }
}

/* Hero video back to original substantial size */
@media (min-width: 980px) {
  .hero-video-stage {
    max-width: 460px !important;
  }
}

/* Align hero text with navbar logo — remove all left shifts */
@media (min-width: 980px) {
  #hero.hero-v6 .hero-content {
    margin-left: 0 !important;
  }
}

/* Reset all offsets — center entire hero (text + video) within max-width */
@media (min-width: 980px) {
  #hero.hero-v6 .hero-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .hero-video-stage {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
  #hero.hero-v6 .hero-split {
    grid-template-columns: 1.4fr 1fr !important;
    gap: 3rem !important;
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
  }
}

/* =====================================================
   HERO — DEFINITIVE RESET to pre-rotation classic layout
   Text left · video right · sensible gap · standard sizes
   No negative margins, no shifts, no resizes
   ===================================================== */
@media (min-width: 980px) {
  #hero.hero-v6 .hero-split {
    grid-template-columns: 1.65fr 1fr !important;
    gap: 2.4rem !important;
    padding-left: clamp(1.25rem, 2.5vw, 2.4rem) !important;
    padding-right: clamp(1.25rem, 2.5vw, 2.4rem) !important;
    align-items: center !important;
  }
  #hero.hero-v6 .hero-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .hero-video-stage {
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}
@media (max-width: 980px) {
  .hero-video-stage {
    max-width: 270px !important;
    margin: 0 auto !important;
  }
}

/* Align hero text START with navbar logo START
   (navbar-wrap structure: width calc(100%-2rem) max 1240px + padding-left 1.5rem on inner #navbar)
   Apply same structure to hero-split so text column begins exactly under the logo */
@media (min-width: 980px) {
  #hero.hero-v6 .hero-split {
    width: calc(100% - 2rem) !important;
    max-width: var(--max) !important;
    margin: 0 auto !important;
    padding-left: 1.5rem !important;
  }
}

/* Reduce featured case study video frame by 1cm */
.cst-frame {
  max-width: 282px !important;
}
@media (max-width: 880px) {
  .cst-frame { max-width: 222px !important; }
}

/* =====================================================
   SERVICE TILE — clean line icons (1.8px stroke + accent dots)
   ===================================================== */
.service-tile .st-icon-line {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  max-width: 110px;
  margin: 0 auto;
}
.service-tile .st-icon-line svg {
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.92);
  transition: color 0.3s ease, transform 0.4s var(--ease-out-cubic);
}
.service-tile .st-icon-line svg .accent-dot {
  fill: var(--orange);
  stroke: none;
}
.service-tile .st-icon-line svg .accent-fill {
  fill: var(--orange);
  stroke: var(--orange);
}
.service-tile:hover .st-icon-line svg {
  color: #fff;
  transform: translateY(-3px) scale(1.04);
}

/* Remove orange dash before "A jak to ovlivnilo prodej?" */
.flow-bridge .fb-label::before { display: none !important; }
.flow-bridge .fb-label { padding-left: 0 !important; }